Marketing Website Traffic : Marketing Business


Website Design Basics

User Interface principles in web design

a return to the basics

Fourteen principles of user interface design applied to website design and usability.

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

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.

For more information on web design visit limeshot graphic design.

Related Website Design Basics Videos

Bookmark/Share This Page: