{{ searchResult.published_at | date:'d MMMM yyyy' }}

Loading ...
Loading ...

Enter a search term such as “mobile analytics” or browse our content using the filters above.

No_results

That’s not only a poor Scrabble score but we also couldn’t find any results matching “”.
Check your spelling or try broadening your search.

Logo_distressed

Sorry about this, there is a problem with our search at the moment.
Please try again later.

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.

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

searching on a mobile

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. 

image driven interfaces

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

mobile primary navigation

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)

give me your data examples

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.

Luke Brason

Published 21 May, 2013 by Luke Brason

Luke Brason is Head of User Experience at Grass Roots and a contributor to Econsultancy. You can connect with Luke on Google Plus and LinkedIn

8 more posts from this author

Comments (3)

Avatar-blank-50x50

Lucinda Brook

Really good examples here. It highlights to me the important questions that are often not considered when designing a website (well when it's a smaller company that is i.e. without a huge team of UX and IAs!) For example: if there was one action you want the user to take on this page, what is it? what information might help achieve that goal? what is the journey? etc etc

almost 3 years ago

Avatar-blank-50x50

Get Scheduled

Great post, just goes to show the value of simple but effective designs online. AJAX built sites, for example, can often hinder user experience.

almost 3 years ago

Avatar-blank-50x50

test

hello

almost 3 years ago

Comment
No-profile-pic
Save or Cancel
Daily_pulse_signup_wide

Enjoying this article?

Get more just like this, delivered to your inbox.

Keep up to date with the latest analysis, inspiration and learning from the Econsultancy blog with our free Daily Pulse newsletter. Each weekday, you ll receive a hand-picked digest of the latest and greatest articles, as well as snippets of new market data, best practice guides and trends research.