User-Centered Web Design

Adapted from: “Analysis of Usability”

Cato J., (2001), User-Centered Web Design. Pearson Education.

Designing is not just about fonts, colors, pretty pictures, animated gifts, it is much more about a thorough analysis and structuring of the action needs and the information needs of the user.

What users do?

  • Arrive
  • Engage
  • Immerse
  • Feel emotions and
  • Leave with both cognitive and emotional outcomes

The question is, how do we design the user experience, the way the user will move through the site, what happens and when, the things they can see and use, the presentation, interaction, emotion, satisfaction of use?

What kind of experience do we want them to have, that will meet their needs, expectations and enjoyment? What mood and feel do we want to create that will work for them? Understanding the mood and feel will help us design the structure, and the dynamics. (Cato, pp. 68-76).

Space (layout)

Space is a precious commodity on a web page, so it makes good sense to use every bit of it. But this does not mean you have to fill it all up with visual and functional paraphernalia. You could also take a minimalist approach.

Consider how much space you will use for information, how much for action and interaction, and how much for navigation. You know what the actions and interactions need to be and what information is needed to support the user’s needs. So, you can decide how to lay out the space for each of these components.

Areas

Should not be clattered , visually overloaded. Areas help to give the user a sense of location. It keeps them comfortable and well oriented with what they are doing. Just as when you walk around a city or town, you know what kind of area you are in by the visual image and other senses, and those clues give you reassurance and support, so also on a website.

Navigation

Navigation is about maps in the head, conceptual models in the user’s mind. It is about visual signposts that are easily understandable to the user. It is about language, the user’s language. Navigation must therefore support the user’s action processes in a language the user understands, make it clear where the user is, and how they can do what they want to achieve.

Information clarity

Think about how you can present information clearly. There are a number of important points to bear in mind.

  • use color judiciously; don’t use more than are necessary. When using color, think about the symbology of the color, the obvious ones being red (negative, anger, vibrancy) and green (positive, country values, ethical), black (dark character, sexy) and so on.
  • ensure that everything is clearly identified and of appropriate sizes and layout for the information and the user.
  • make headings clear, put headings at the top of what they head, make them related to the content, and use a language which is the user’s language…
  • cluster information in an appropriate manner, making sure that similar concepts are presented together both visually and in the user’s action process. Don’t create discord in their thinking, unless you are consciously trying to do that.
  • make graphs easy to read and understand. (Cato, pp. 115-148).

 

Usability

is a combination of the site’s usefulness, effectiveness, efficiency, satisfaction, respect for the user, presentation and learnability.

User control and freedom

Users often choose functions by mistake and will need a clearly marked “exit”. Support undo and redo.

Consistency and standards

Users should not have to wonder whether different words, situations, or actions mean the same thing. Follow conventions; be consistent.

Recognition rather than recall

Make objects, actions, and options visible. The user should not have to remember information from one part of the dialog to another. Instructions for use of the system should be visible or easily retrievable whenever appropriate.

Flexibility and efficiency of use

Aesthetic and minimalist design

Do not include information which is irrelevant or rarely needed. Every extra unit of information on a page competes with the relevant units of information and diminishes their relative visibility.

Privacy

Help the user to protect personal or private information .

Design Impact

Consider how design impact the user performance: the efficiency, correctness, and recover from error. (Cato, pp.193-222)

 

 

Hints:

Headings should be headings – they are intended to clarify, not confuse.

Make it obvious what comes next.

Save the user time scrolling or clicking when maybe they don’t have to.

Use screen space wisely. Don’t waste the screen space unnecessarily.

Make rational use of colors.

 

Make actions close to the information to which they relate.

If you are going to provide help, make it obvious how to get it rather than hiding it away.

Make good and consistent use of colors.

 

Always bring forward information providing the opportunity for recall rather than memory.

 

Don’t provide two ways of doing the same thing – one will usually do.

 

Don’t rely on the user guessing how the information is structured, provide clear structure.

Understand the use scenario.

Use a common “user-centered” language of communication.

 

Don’t provide two buttons on the same screen which do exactly the same thing.

Don’t make the user confused and unsure.

Keeping it simple saves money on development and maintenance.

 

If there is no obvious and immediate value for the user in their activity, they will ignore it.

Don’t use two screens when one will do.

 

Meet the user’s needs (from the use scenario).

What you provide first is often what the user does, especially if they are uncertain.

 

If one thing is wrong, other things will be doubted.

Don’t lose the user in hyperspace.

Don’t force unnecessary user actions.

 

Make every action easy – at the right place and the right time.

Don’t repeat information.

 

Don’t give the user options they don’t need at that time.

 

Reduce user actions.

 

Keep like activities and like information together in the process.

Keep things in a logical order. (Cato, pp. 225-252).