Why I chose Rightmove

I’ve found that using Rightmove¹ recently has been a little frustrating in Microsoft Edge at least. My family and I have been using it a lot to look at properties in the Norwich area because recently we have been considering moving out of Wymondham and into Norwich and some features of the website are either incomplete or don’t work as intuitively as I’d like. As a UX designer this interested me and I was keen to analyse Rightmove’s website to find out how it sticks to a design framework yet manages to have some minor annoyances.

What is a design framework?

A design framework is simply a list of requirements for a design to have in order to be deemed successful. They typically focus on specifying how certain elements of a website or an app should look, such as the text and typography, alignment of assets such as images and videos, styling of controls, placing of elements and the colours used. All of these requirements are put together to create a standard called a design framework. They can be fairly generic and apply to a lot of different apps or websites or some can be more specific, such as the Schell’s Elements of Game Mechanics framework which is more suited to specifying how objects in games should move and be interacted with and how much of a part things like chance should play in the gameplay experience than specifying how a website should be designed.

How Rightmove uses the Schlatter and Levinson’s Characteristics of Good Interface Design

This design framework² seems to fit websites and apps best, though it could possibly be applied to other applications such as games too. This design framework dictates that:

• Elements are organised using alignment
• Elements are placed where people expect them to be placed
• Similar elements are placed in groups
• Fonts are appropriate to the situation
• Typographic standards are consistent
• Colours are appropriate to the situation
• Colours are used consistently
• Controls are deployed and styled consistently

Rightmove does show evidence of using some of these design rules.

Elements organised using alignment

This means that objects on the page are arranged in an order (usually along on a line or on a grid) and are placed relative to one another, for example directly next to each other or directly on top of each other, see my diagram below.

The squares are all equidistant from one another. The squares are also exactly the same size as one another, but elements do not necessarily need to be the same size in order to be perfectly aligned with one another. The squares look uniform and tidy.

If the items aren’t aligned it means that are not equidistant from each other. The positioning of the items looks scatty and untidy in some cases.

 

Aligning elements makes a website or a design (including a logo) look more uniform and tidy as a whole. This can help to instill a sense of trust in the user and makes the website feel more professional.

Elements on the Rightmove website are aligned to one another. The placing of the elements is generally relative to other elements and this helps to keep the site looking clean and tidy and instill that sense of trust and professionalism that the sites designers were aiming for. The home page for example has a lot of elements that are aligned to one another.

It’s not just the home page that has elements aligned, other pages do too, for example look at how many elements are aligned on a listing page.

Element alignment on the Rightmove site is very subtle – possibly so subtle that you may not even see it or really notice it, but it’s there and makes a big difference to the design of the website.

Elements are placed where people expect

If you design a website or an app that is complicated to use with illogical element placement, your product will not pleasurable to use and the chances are the user will not want to use it again. The best way to test whether the elements are in a logical place is to use eye-tracking hardware to monitor where users are looking when given specific tasks to perform on that website. By tracking their eye movement, it is possible to see where they’re looking to find the elements that allow them to do specific tasks.

I set one of my peers the following tasks to complete on Rightmove:

• Find a property for sale (not to rent) within 1/4 mile of Norwich City Centre. The property must be between £150,000 and £250,000 and it must be at least 3 bedrooms.

• Select the first property that the search yields and view the floorplan in full screen, zooming in as far as possible.

• On the same property, view the street map in full screen and zoom into it as far as possible.

• On the same property, find the nearest school to the property that received an ‘Ofsted: Inadequate’ inspection rating in its latest inspection.

• Find the price that the property sold for when it was first put on the market.

• Use Rightmove to check the fastest available broadband speed for the property. Which ISP is able to provide the fastest broadband connection to this property? Which provide the slowest according to Rightmove’s tool?

• Looking at the photos of the rooms of the property you’ve been looking at, where might you look to find out exactly which room it is you’re looking at?

• Attempt to try and make the photos bigger.

• Is it possible to see from the floorplan which room you are looking at a photograph of?

The tasks start off fairly basic and become harder and require a little more thinking. They follow this specific order because this is the order that the site works in – you start off by selecting a location for a property and then the city, then the number of bedrooms and once you’ve found the property you are looking for you can do the additional tasks which are all about finding out information. The final three tasks are actually not possible to complete because Rightmove does not have these features (in my opinion these are useful features that are missing from the site) but I wanted to see where the user might look for these items that are missing from the site.

The software I used to track the tester’s eyes produced a heatmap on a screenshot of the website showing where the user was looking and it also recorded a video of the user using the site, complete with audio and webcam footage showing the tester’s facial expressions whilst using the site. Facial expressions are important too because you can tell instantly if the tester is enjoying using the website.

The heatmap below shows where the tester was looking when selecting the options for the property to search for. The results show very clearly that the elements were logically placed and where the user would expect to find them given that the heat spots are all over the dropdown options. The tester was not really looking at much else on the website other than the area he needed to concentrate on to select the options.

When looking at a heatmap of the whole website, it’s easy to see where his attention was. When asked to look at the pictures of the property and possibly suggest a location for a caption for the photos (something that Rightmove lacks), it’s easy to see that the tester’s focus was very much on the picture area, see below.

When asked to find information about the property, for example the nearest schools, the previous sale prices and the broadband speed, the attention was very much on the text area underneath the photographs of the property.

This shows that the location of information on Rightmove is logical. The tester clearly expected to find the information that he was being asked to find about the property underneath the photos of the property. The biggest heat spots are directly over where the buttons to find the information are, which suggests good interface design from the designers at Rightmove.

To see how Rightmove fared in the full test, I have included the screen recording that the eye tracker software produced. The video shows in real-time what the tester was doing and exactly where his eyes were looking.

Similar elements are placed in groups

Keeping with the logical thinking, similar elements should be placed close to each other or in groups to make them easier to find. On Rightmove there are several good examples of where this is the case for example on the page where you can refine search options.

On other pages too, relevant elements are grouped together and placed in the same page area.

Fonts are appropriate to the situation

They certainly seem to be on Rightmove! It’s mostly Helvetica like most websites. The font is easy to read and is also an appropriate colour and size. Headings are buttons tend to have larger, bolder fonts than the standard text which is smaller. This makes it easier to identify the different text types on the website to aid navigation. Helvetica was an appropriate choice as it promotes business, professionalism and trust. Other fonts such as Times New Roman which once were popular on the web wouldn’t be as appropriate to use as Helvetica on this website because whilst Helvetica and similar fonts such as Calibri look modern and professional, Times New Roman looks older and more antiquated – it is probably more appropriate for an old-style book. That being said, Times New Roman does look official, after all it was developed by the newspaper The Times for printing newspapers, whereas Helvetica is often said to be a ‘calming font’³ which is interesting given that buying a property can be a very stressful experience, so perhaps the use of Helvetica is a subtle move by Rightmove to try and reduce the stress of buying a new house.

Typographic standards are consistent

Generally speaking, yes. The same font size is used throughout the website and all buttons are bold whereas all text is standard form. The text is easy to read against the white background. All text is either black, grey or turquoise to keep the site looking clean, consistent and also to help aid navigation. The spacing is completely standard on all text assets (with the exception of third-party adverts) to help make reading easier. When you are buying something as important as a property it is critical that you can read the information correctly, hence why standard spacing is so important. If the spacing is too wide or too narrow, the text can become incredibly hard to read – really letter spacing is only appropriate for text in logos and although the text in the Rightmove logo is spaced slightly tighter than the standard body text, it is still very clear and easy to read.  Fonts are consistent throughout the website with very little font variation.

Colours are appropriate to the situation

Garish colours are unnecessary on a website like this where the user is potentially making the biggest and most important purchase of their life – their home. Going back to that sense of trust and professionalism, Rightmove excels in the colour department where most of the page is a non-distracting white and some elements have a hint of a very attractive and pleasing turquoise blue to add a bit of colour into the mix and to match the house graphic in the Rightmove logo. Turquoise is thought to be a colour that adds sophistication to designs whilst also adding peace and tranquility.⁴ It’s interesting to note that even third-party adverts on the site fit in with the colour scheme. Adverts from Starkings & Watson on the website also use a turquoise colour scheme which helps them blend into the design of the site, making them seem more seamless and less like a third-party advert which in turn helps with the simplistic, professional design of the site. Button controls on pictures are a translucent black with white font so the controls are really clear and easy to find and use. The site’s colours don’t set your heart alive with excitement, but it’s not at all garish or ‘standoffish’ and inf act the use of colour (in conjunction with other elements such as typographic standards and alignment) instill a sense of cleanless, simplicity, peace and tranquility which are all things that you want when buying a house.

Colours are used consistently

Generally they are. There’s a lovely use of a turquoise blue on the request information button which is used on every page and directly underneath the photographs on every page is a dark blue box which has ‘Call’ in this turquoise colour and exactly the same ‘Request Details’ button that you’ll see on the right hand side of every listing. Every listing is set out like this, so the use of colour is consistent. Every page has a white background to make the site look more uniform and promote a sense of professionalism and business – there are no pages with image backgrounds or with alternative background colours, not even the home page.

Controls are deployed and styled consistently

Controls on RightMove are very consistent indeed on the whole, however there are some interesting variations across browsers.

The main navigation bar for the site appears at the top of the page on every page to make navigation simple. The last thing the user wants is to have to search for a navigation bar on each page they visit. Each listing uses exactly the same size photos but of course each listing does not always have the same number of photos. The user can click on the photos to expand them, but by default thy’re all displayed in the same size to help make the comparison between properties fairer. A property may appeal more attractive to a potential buyer if they can see bigger photographs of it to get a better idea of how the property looks without actually visiting it. To make the competition fairer, the photos of the properties are all the same size until the user chooses to expand the view. Similarly, the buttons to advance the photos in the slideshow and expand the view are in the same place on each listing. It would be frustrating and potentially dangerous for a property’s sales prospects if the user couldn’t work out how to view other photos, so the controls to view the other photos are in the same place on each listing and they’re also the same size and colour on each listing too.

A user is potentially looking at a lot of properties per browsing session on this website, hence why basic information like the guide price, house type (which includes the number of bedrooms, whether it is detached or semi-detached and whether it is for sale or rent) and the description, floorplan, a map of its location, a video tour (if available), a school checker and the market information are all displayed in exactly the same place on each listing. If you were to use the website and look at 25 properties in a single session (for example), it speeds up the browsing experience if you can find this critical information quickly and easily. Once the user learns where this information is, they can find it on any listing. The description of each property includes bullet point information summarising details of the house such as parking arrangements, whether the house is detached or semi-detached, what kind of feature rooms it may have (for example an open-plan kitchen-diner may be an attractive feature of a property that could increase its sale potential, so something like that might be mentioned in the description tab on the listing), number of bathrooms and additional features such as conservatories, basements and large attic spaces. Each property listing has this to help the user quickly learn about key features of the property. Each bullet point is a square turquoise dot, going back to the subtle turquoise design of the website.

Other controls such as save, print, notes and social media link buttons are also in the same place on every listing for the reasons listed above. They are also all styled in the same way on every way so that the user can identify them quickly and easily.

Some of the not-so-obvious controls display differently depending on which browser is used – key examples are the zoom controls on the map and floorplan views of the property. In an ideal world the website will display exactly the same in each browser, but it seems that some browsers are perhaps missing frameworks or display CSS differently to others that impact on the site’s appearance and functionality, especially when it comes to scaling floorplan views in full screen.

In Google Chrome the floorplan view in full screen is fully visible without resizing the browser window by default, but perhaps the window that the floorplan is displayed in is oversized.

The small floorplan in the middle of the page is not terribly ideal though as the user needs to adjust the scale of the view to get any kind of detail – and then by increasing the scale the floorplan goes out of the browser window so the user has to resize the browser window too.

On Firefox, Internet Explorer and Edge the scaling is incorrect when the user opens the floorplan in full screen view. The user must manually adjust the browser window size to view the floorplan comfortably. Firefox is shown directly beneath with Internet Explorer shown beneath that. The same thing happens in the Windows 10 Edge browser too.

Really, the full screen view shouldn’t be opening up a new browser window anyway – it should instead be more like the ‘expanded’ view of the property photos and open up a lightbox to display the larger view in inside of the existing open window, a bit like as shown in the screenshot below but maybe a bit bigger and with an option to zoom in on the plan.

How well does Rightmove fit the framework?

On the whole, this framework applies almost perfectly to Rightmove. Rightmove’s website shows examples of how it follows this framework quite rigidly – perhaps it was designed with this framework in mind. Different design frameworks work with different applications, the Schlatter and Levinson’s framework I chose to analyse Rightmove against is aimed more at websites and apps than it is games, which other frameworks such as Allmer’s 13 Basic Principles of Gameplay Design and the Schell’s Elements and Games Mechanics framework.

The fact that Rightmove fits the framework so well could indicate that it is a well-designed website with each design principle considered and implemented well. By implementing each principle, Rightmove have developed a website that looks professional and is easy to use because elements are logically placed. This hopefully gives the user a pleasant experience and they’ll wish to use their services.

Bibliography

1 – Rightmove.co.uk. (2017). Rightmove.co.uk. [online] Available at: http://rightmove.co.uk [Accessed 14 Oct. 2017].

2 – Schlatter, T & Levinson, D. (2013) Visual Usability: Principles and Practices for Designing Digital Applications, Morgan Kaufmann, Burlington, MA.