User Interface Design Principles Essential For A User Friendly Website

User Interface Design Principles

User Interface Design Principles - Usability

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 long. I am 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. It therefore 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 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 websites message is understood more efficiently, which in turn will be reflected in an improvement in the core performance of your website.

User Interface MapAbove are the results from user 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.

It is essential to again stress that not all users will follow this exact three stage process. The F-shape is a rough shape as opposed to a perfect pixel representation of user behaviour.

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. Uer 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.

User Interface whitespace

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 affectively, 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 affective 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.

User Interface Design - Whitespace

  • 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 users attention to the product within the interface design.

User Interface Design - whitespace around product

Conclusion

These user interface design principles can be used to a designers advantage to optimise usability and conversion rates. Please sign up for my newsletter for more essential user interface design principles and see my services to test your interface today.


By Sam Nickson

usabilityaudits.co.uk