Usability is fundamental to the overall performance of your website. It is all very well having the most aesthetically pleasing website, but if users can't navigate your website or have a poor user experience, they are not going to be hanging around too long. In this blog, we are going to discuss in depth two user interface design principles that must be considered when developing a user-friendly website. As technology develops, these user interface design principles may evolve, but the main concepts and principles will remain.
1. User Interface Design Principle - Placement
A far greater proportion of copy is read above the fold. Based on this information it makes intuitive sense to place your most important elements above the fold, early on in the user experience. Studies have estimated that whilst 80% of the text is read above the fold, only 28% is read overall. These figures are significant and really stresses the importance of key elements within the user interface.
Users in the Western World naturally commence reading at the top left of any page. As they scroll, users also spend a far greater proportion of their time focused on the left-hand side of a page. Jakob Nielsen estimates users spend 69% of their viewing time on the left side of pages. Factoring such user habits into your web design ensures your website's message is understood more efficiently, which in turn will be reflected in an improvement in the core performance of your website.
Above are the results from user's eye-tracking studies, conducted by Jakob Nielsen in 2006. The study analysed how 232 users looked at thousands of websites. The areas of the user interface looked at most frequently are coloured red. The grey areas of the user interface didn't attract any attention at all. What we see is a variety of F-Shaped maps, which tells us that in general users interact with websites in a predictable manner:
- Initially, users read across in a horizontal line, typically across the top content area. This forms the F's top bar.
- Users then typically move down the page slightly and then scan across in a second horizontal movement. This second horizontal scan forms the F's lower bar.
- Lastly, users scan the content's left side in a vertical movement. This last element forms the F's stem.
What user interface design principles can we take from this?
- Users are scanners who are highly unlikely to read your copy word for word.
- A much higher proportion of copy is read above the fold so make sure the opening copy states the most important information. The most user-friendly website can be viewed by any type of user, who can quickly ascertain what the website can offer them.
- Start subheads, paragraphs, and bullet points with information-carrying words. This caters for the way users interact with websites, who are scanning, on the scent for the information they seek, by grabbing their attention.
2. User Interface Design Principle - Whitespace
Whitespace, often referred to as negative space, is the portion of a user interface left unmarked, that is left blank, or the empty space in a page.
Although many may regard white space as a waste of valuable screen estate, when used effectively in user interface design, the benefits are multifaceted:
- Aids readability and scannability (as previously outlined users certainly are scanners). The basic use of whitespace, when used effectively, is to reduce the quantity of text users see all at once. This, in turn, makes reading much easier. A cluttered looking interface can be very off-putting to a user, exacerbating the likelihood of them being unwilling to invest the time required to read it.
- Guides users. When used effectively, white space can be used to lead the user around the interface, at the designers intent. Jason Santa Maria discusses this in his article on white space design. The example below shows the effective use of whitespace to emphasise the call to action. This works as the user only has one thing to focus on in that area of the user interface. It gives your call to action some breathing room so that it can stand out from the rest of your web design.
- Add to the visual appeal. Sites with lots of whitespace, that are also designed well, often look very professional and modern. Minimalism is considered a modern style and the Rolex website below demonstrates this principle perfectly. The lack of competing elements also guides the user's attention to the product within the interface design.
These user interface design principles can be used to a designers advantage to optimise usability and conversion rates.