User Interface principles in web design

on October 21st, 2009

This is actually a post I published last year – but it is really one that I found very useful and I think it deserves to be revisited for the benefit of my now much larger audience. So please forgive the “recycling”…

There is much hype surrounding website UI design, and a large variety of tools claiming to help optimise the said interface; however, the most useful piece of theory I have found on the topic is dated 1998 and was written by somebody called Talin, whose home page now returns a 404.

It was written with reference to program design rather than website design, but I think the principles stated there apply cross-topic.

Actually, to me, Talin’s list read like a collection of my own disparate observations regarding what works and does not work when it comes to websites, what converts and what doesn’t. So, while I give the full credit to Talin, I will reiterate the principles and explain my take on the way they should influence website design.

1. The principle of user profiling

– Know who your user is.

The cornerstone of all marketing. Know your user. Several questions to answer before designing a website:

  • Who are your users? Find out some demographics – they will impact the degree of design sophistication, colours, font size, etc. For example, a website for kids will have a very different look compared to a website for financial planners.
  • How do they access the website? This refers to technical aspects – monitor resolution, is the browser java-enabled, flash-enabled etc – all these aspects will decide whether you will design a fluid, elastic or fixed width website, with or without flash, with or without javascript elements.
    Search engine bots deserve an extra mention here: they ‘read’ a website just like a visually impaired human being does: without much regard for fancy graphics or colours; they don’t support javascript; they barely follow links embedded in Flash movies and if you’re aiming for an optimised website you have to keep these technical limitations in mind.
  • What are their goals in coming to your website? Are they looking for information, tools, news, transactions, media browsing; the visual structure of the website will look different for each of these categories. To better visualise this, do a search for WordPress themes – and notice how they come categorized according to their purpose: media, news, magazine, corporate, portfolio.

2. The principle of metaphor

– Borrow behaviors from systems familiar to your users.

No point in reinventing the wheel; the fact is that most people like finding themselves on familiar territory, especially when it comes to finding and digesting information. As such, most websites within a given category will be organised in a similar manner.

A few typical examples: news websites, bank websites, artist portfolios (yes, even artist portfolios: they may look different but most of the time they are split in category, album and individual project pages).

3. The principle of feature exposure

– Let the user see clearly what functions are available

Let me say that again: let the user see clearly what’s available. That’s what they’re there for; if they can’t find it, they’ll leave.

This principle applies very strongly to landing pages and to conversion pages. In the former case we get the category boxes splattered across the centre of the page: “home loans”, “credit cards”, “calculators”; for the latter, the big green “download”, ‘buy” or “enquire now” buttons.

If we do not desire to overwhelm the user with too much information, there are various options for stacking the information in a logical manner:

  • navigation menus
  • secondary navigation, specific to certain pages or page clusters
  • rollover or onclick areas: information becomes available when the user requires it

4. The principle of coherence

– The behavior of the program should be internally and externally consistent

Externally, this principle ties in with the principle of metaphor: any website should be consistent with websites from the same category.

Internally, the structure for each content silo should be structured in a similar manner; especially important for loyal users, who start developing a mental map for interacting with the website, which they should be able to use wherever on the site they find themselves at any given point in time.

5. The principle of state visualisation

– Changes in behavior should be reflected in the appearance of the program

This one is sometimes observed in web design, and sometimes not so much; a few examples:

  • the different colour of the menu tab to mark the page the user is on
  • breadcrumbs
  • changes in the appearance of the cursor to mark editable or clickable regions
  • hover effects for links

6. The principle of shortcuts

– Provide both concrete and abstract ways of getting a task done

This must be the most important principle on the list from a conversion perspective; even more so than the principle of feature exposure: the user must be provided with multiple ways of reaching the information directly or indirectly related to their topic of interest or the point of conversion.

Some of these ways are pretty straightforward: self-advertisements that take the user to the featured pge, or “enquiry”/”contact” pages linked to from the main navigation menu.

Some other times, these conversion funnels become much more subtle, e.g. contextually targeted links to conversion points. For example links to conversion points embedded in various calculators, widgets or applications.

Finally, the third variety is not exactly a shortcut at all, per se; it’s distracting the user to take the long way around to the sought information, and in doing so they keep the user on the site for longer, particularly relevant for cross-selling and for businesses based on an advertising-driven revenue model. Several examples of this application of the shortcut principle are notorious; one website that does it particularly well is Amazon. For example, whenever adding a book to cart, the confirmation page displays the famous: “People who bought ‘this’ also bought…” A shortcut to other conversion points…

7. The principle of focus

– Some aspects of the UI attract attention more than others do

And this is how we ended up with the wave of Flash-based websites, although they rather missed the point, which is: human eye is attracted by moving elements, but only as long as they exist in a static environment.

Human eye is also driven to spots of colour (e.g.red is traditionally the first colour we look at). As such, website design should make use of colourful and/or moving elements to drive attention to the important features.

A good example is portfolio websites; quite numerous artists prefer the website to be like a blank canvas for their art and as such it is not infrequent that one encounters those white (or black) one page websites with a large number of jpegs embedded and barely any text at all. The user looks instinctively at the art (which is the whole point of the website); there isn’t much else to distract.

8. The principle of grammar

– A user interface is a kind of language — know what the rules are

This one bears a literal application and a figurative one. The literal is obvious: check your grammar and your spelling. The Figurative: the terminology used on a website should be congruent with the language used by similar websites in the same category/industry/geographical area.

This doesn’t mean using the same language. It means calling things the same way as everybody else. Example that pops to mind: I used to work for a voice recognition company that insisted on calling their solutions “speech recognition” solutions. The problem was that this terminology did not bring in much search engine traffic, since users were not searching for “speech” but for “voice”.

Thankfully these days we all optimise for popular keywords, so website terminology usually aligns with the user’s terminology.

9. The principle of help

– Understand the different kinds of help a user needs

  1. Goal-oriented: “What kinds of things can I do on this website?”. Applications: make it visible to the user what the possible destinations are. Closely related to the principle of feature exposure
  2. Descriptive: “What is this? What does this do?” Applications: any tool or function of a website should be self-explanatory or – even better – have a set of clear instructions provided in close proximity.
  3. Procedural: “How do I do this?”Applications: java instructions for filling in forms, hover messages explaining how to use certain tools
  4. Interpretive: “Why did this happen?” Applications: Error messages should be understandable “You have encountered error 345P and your 20 minute credit card application has been reset” type messages are not acceptable.
  5. Navigational: “Where am I?”. Applications: good ol’ breadcrumbs. Highlighted tabs.
  6. 10. The principle of safety

    – Let the user develop confidence by providing a safety net

    The safety – or security – principle is widespread: the practice of using secure pages, of providing certificates, or displaying affiliations with recognisable entities – all these aim to create a feeling of security that will induce the user to provide confidential information or trust the respective company with catering to their requirements.

    11. The principle of context

    – Limit user activity to one well-defined context unless there’s a good reason not to

    This refers to the way the website interacts with the user. The website interface should help the user remember at any point in time where they are and what they are there to do. The elements and visual imagery of any given page should be related to the page or category theme.

    Interesting example in applying the principle of context is provided by Credit Immobilier de France: their website is split into four sites, each targeting a different customer segment.

    The context on each site is incredibly coherent, from imagery and language to products. There are no confusing side-contexts: each site is about a very specific type of user, who is carefully guided through their interaction with the site.

    12. The principle of aesthetics

    – Create a program of beauty

    It never hurts when a website is pretty to look at; however, aesthetics should not come at the expense of other principles.

    13. The principle of user testing

    – Recruit help in spotting the inevitable defects in your design

    I think this not only applies to user testing, but also to A/B and multivariate testing of the site performance; each web wireframe should be tested with several different configurations, results tracked and analysed and the best performing version implemented.

    In as far as the user testing goes, beta/sandbox versions are always good ways of testing a website on the actual user population and identifying and fixing bugs before the big launch.

    14. The principle of humility

    – Listen to what ordinary people have to say

    Perhaps we should have started with this one, as it should the basis for any website design and development: all marketing should be based on research, direct or indirect.

    We all think the entire world thinks the same way we do, and we are all wrong. Users come in different levels of computer literacy; different aesthetic tastes; they have different requirements and expectations.

    Any website should start with user input and bootstrap regularly based on ongoing feedback.

    This is original article on user interface design, a really good read.

Tags: ,

18 Responses to “User Interface principles in web design”

  1. Matthew says:

    Yahoo video should take some of your user interface principles into effect there website is horrible to use, i tried for 10 minutes to find the VIDEO UPLOAD button with no luck!

  2. You put a helluva post together here with some very helpful informations. To all readers : Please share on facebook but by all means let’s get more people read this articles.

  3. John says:

    Talin’s 14 program design points can be found at:

    http://viridia.org/~talin/projects/ui_design.html

  4. [...] This post was Twitted by Shishev [...]

  5. This is a great framework for building UI. Thank you for sharing. I wish there’s an article that talks about what colors go together and where are they meant to be used for.

  6. APRoxy says:

    What a superb site you have, really enoyed it, thanks again vicky

  7. Your principles are pretty meaty and one could argue that the nuances of each could be discussed in separate posts. In particular, I would have like to see more elaboration on #6, but that’s just me ;)

    Thanks.

    • limeshot says:

      Well, thing is one could talk about UI principles for ages, if one wants to really go into detail. But then again, such detail is only understandable and relevant to people who make a living out of optimising sites for conversion. And there aren’t that many of those in my audience to justify writing a piece on each principle. Still, it is a fascinating topic.

  8. I had not read these suggestions before. Thanks for the post. I think it is a very valid observation that people should always feel like they know how to move forward or backward in a website, but they should not have to perform too many clicks to find the information they need.
    .-= San Diego Real Estate Pro´s last blog ..Extend Home Buyer Tax Credit! =-.

  9. very unique writing style you have, i have bookmarked your website Thanks, good to see more Aussies blogging

  10. Thanks for sharing. It’s very important for websites to provide information but at the same time, look good for that’s what draws in visitors.

  11. I am in the middle of redoing a e-commerce site and I have been spending lots of time thinking about the ui of the site. Having just the right amount of navigation and in just the right spots teamed with screen sizes and more can be tough. It needs to be intuitive for the person who will be using it.

  12. jack parler says:

    I really liked your blog! I hope in the future you have more neat things and goodies.

  13. this information has been of great use, I always have problems on how to structure my work.thanke you.

    Mark
    tienda de informatica

  14. [...] This post was mentioned on Twitter by paul tamaro, paul tamaro. paul tamaro said: User Interface principles in web design – a return to the basics | http://bit.ly/1nwWX5 (Right on target!) Via @limeshot @glnster [...]

  15. This is so true. Some web-sites don’t provide enough information in what you are looking for nor were to look at it, but some designs look very appealing that attracts viewers.

  16. Tertius says:

    I agree with Neta, there are so few designers that just try to make something look pretty and if it works then they’re done!

    The problem I think is, you find this everywhere. Cars, houses, gardens etc. You get what you pay for.

    If you have these skills, you charge more. Getting standards to the average person, design standards, doesn’t seem to be a very easy job.

    Tertius´s last blog post: Getting website maintenance done… With a plan site: [site]

  17. I wish every web-source creator read this article. Sometimes when you come to a web-site, you are totally lost in its structure, and it’s hard to find the item you need. This is due to the lack of mere site-building competence.