Make your website user friendly with core building blocks

I tend to keep an eye on the UK’s most popular websites (Alexa is a good source for this data), as I know that my clients and their customers are likely to be familiar with their navigation features, tools and interfaces.

There is a risk that creating something ‘too new’ or ‘too different’ can give rise to negative user feedback, a recent case in point being Microsoft® Windows 8 lacking a Start button.

For most projects, delivery timescales are tight and there isn’t time to experiment with wild and fanciful navigation.

More importantly, users want to find things quickly. They don’t want to have to ‘learn’ how to use your site, it should be intuitive to them.

By Luke Brason May 17th 2013 11:29

Caveat: if you are in a role or on a project where you need to set a completely new trend then this article isn’t for you!

Adopting popular navigation rhetoric is a sure way to deliver both familiarity and current ‘best practice’ both of which drive swift user acceptance.

I’ve pulled together some good examples that high-traffic sites are using, which can be viewed as ‘building blocks’ for user friendliness. These interfaces work well and are ideal for adoption into your own prototypes and for using as part of rationale development.

(Alexa UK # rankings used below are from 14/05/13)

Building block A: “I want to find stuff using your site”

The mobile starting point for eBay (#6) and Rightmove (#27) is a clear and simple search box leading to clean and uncluttered results – both followed by an image-led product detail view.

If you are familiar with eBay then you’ll be able to use Rightmove without having to think (and vice versa).

The latest ebay desktop home page below (top left) bears a strong resemblance to an interface made popular on Pinterest (#36) (top right).

The new MySpace (#389) interface (bottom left) demonstrates similar traits. This is a trend common on numerous new sites – I’ve shown a start-up site called BuddyBounce (bottom right).

Using strong emotive imagery over text supports instant emotional affinity (assuming you like the images you are seeing!) – the common interface means you don’t have to think about how to use the site, as a user you get straight to the content.

Building block B: “I want to consume all your information on my mobile”

A few years ago, designing the main navigation for mobile sites posed a conundrum, small screens prohibited a fixed main navigation with lots of permanent links (at the time, desktop sites tended to favour a universal inverted ‘L’ navigation).

Today there is a standard mobile solution that millions of mobile users are completely at ease with – as implemented by the BBC (#7), the Guardian (#19) and the Telegraph (#34).

The interface above is not unique to mobile sites but on small screens it’s a brilliant solution for navigating page heavy websites.

A small link / small icon in a common location will inform users of their place and purpose – whatever mobile site I am on.

Building block C: “I need to tell you something”

I have long admired the way the moneysupermarket.com (#181) structures their web forms (top left). They were the first site I saw who made form completion really quite easy – they only show help text relevant to your active field (rather than filling the page with it) and they clearly highlight where you are in the process.

This method is now commonplace in their sector, for example Confused.com (#537) (top right).

Social networking sites are prime examples of sites that want you to submit profile info, updates, messages etc. LinkedIn (#11) and the updated Google+ (#4*) are shown below (bottom left and bottom right).

No coincidence that their calls to action to add new users and post messages are in almost identical places on the web page. Not familiar with Google+? If you are a LinkedIn user you will be! And of course they also share a lot of interface similarity with Facebook (#2) and Twitter (#12)!

(*N.B the Google Alexa ranking of #4 is based on the entire google.com domain and therefore includes subdomains like mail.google.com, docs.google.com, plus.google.com etc)

Summary

This is just a snapshot of a few common interface themes, personal favourites that I use when developing rationale for my work, and as conversation pieces with clients.

It is important to know that your interface will work: it has to be familiar to users. Unless, perhaps, it’s an art project rather than a design project.

Of course I don’t advocate the wholesale copying of other peoples’ work. I absolutely believe that each project must have its own slant, which is normally achieved through unique content and branding.

But as interface designers, there really is no need to reinvent the wheel; instead it pays to invest time in staying up-to-date the most widely-used interfaces, and sharing with our digital colleagues.

For further reading there’s a great book I recommend by Steve Krug called Don’t Make Me Think!: A Common Sense Approach to Web Usability.