14. user-centred web design

14. User-Centred Web Design



Typical web problems

Web user not considered Slow download due to graphics, multimedia

files, scripts and plug-ins Disorganised structures Lack of standards and consistency


Typical web problems

Design showing off technology for its own sake

Cluttered pages Sites not updated or maintained Annoying adverts

Poor page layout


Elements of User Experience

Garrett describes user-centred design using the Elements of User Experience approach

This approach uses a structure of five planes which provide a framework

The elements, or factors, involved in the design process are mapped onto framework


Planes


Planes

A site is built from the bottom of this structure up

The design process and the decisions taken at each plane are dependent on the planes below


Surface Plane

On the surface, What you see when you look at a web site A series of web pages, largely containing text

and images.


Skeleton Plane

The skeleton is the basic arrangement used to place parts of the pages in a site

Lies beneath the surface of the site The placement of text blocks, images, buttons, etc.

on the pages of a site is usually done in consistent way

The skeleton is designed to place objects on the pages for maximum effect and to give a consistent look to the site

Related to Wireframe diagram


Structure Plane

The structure plane represents a more abstract structure on which the skeleton is based

Defines the way in which a user can navigate around a site while the skeleton defines how the navigation is presented to the user

Related to Blueprint diagram


Scope Plane

The scope of the site is the set of features and functions which the site will offer, while the structure defines the way these fit together


Strategy Plane

The scope is fundamentally determined by the strategy of the site

The strategy defines what the site owners wish to get out of the site AND what the users want to get out of the site


Hypertext systems and software interfaces

Originally the web was simply a hypertext system

Now many sites are effectively software interfaces

Hypertext systems are mainly concerned with information, while software interfaces are mainly concerned with tasks

Most sites have elements of both hypertext systems and software interfaces


Elements - Strategy

User Needs are the goals for the site from the people who will use the site. The designers must know the goals of the audience.

Site Objectives are the site owners objectives, for example business goals such as “make £1m in online sales”


Elements - Scope

Software side - Functional Specifications are a detailed description of the feature set of the site

Hypertext side – Content Requirements are a description of the information the site will provide


Elements - Structure

Software side – Interaction Design defines how the system behaves in response to the user

Hypertext side – Information Architecture is the arrangement of content elements within the information space, e.g. the categories into which a bookstore site organises its books


Elements - Skeleton

Information Design is the presentation of information in a way which facilitates understanding.

This takes different forms for software and hypertext sides of the plane: Software side – Interface Design is the arrangement of

the interface elements to enable users to interact with the functionality

Hypertext side –Navigation Design is the set of screen elements which allow the user to move through the information architecture


Elements - Surface

The main element here is Visual Design, which is important for both software interfaces and hypertext systems


Userview Process

The Userview process was described in 2002 by Badre

He states that usable Web sites are designed contextually.

The contextual approach separates Web design into the five context levels


Userview Contexts

Environment

User

Genre

Site

Page


Userview Contexts

Designing contextually for each level means considering design within the level and how the contexts relate to each other.

In general, decisions made at a higher level override decisions made at a lower level


Userview Contexts

For example, in a tourism web site: The genre context might suggest a high

proportion of graphics on a page. However, if we are designing for users or

environments where it is expected that information should be presented textually, then the higher level context characteristics should be preferred over the typical genre characteristic


Strategy and Process

Userview process follows the established HCI principles of User-Centred Design

These principles include: User-centred approach Early human factors input Iterative design Continuous testing


Systematic Userview Process


Goals & Functional Requirements

General goals User specific goals Functional requirements Non-functional requirements


Goals and Functional Requirements Document


Environment Context

Site designers have to organise sites in such a way as to match users’ expectations of that organisation.

These expectations are related to users’ stored knowledge based on previous experience in real-world settings or with other web sites.

This knowledge can be described in terms of schemata, scripts and mental models. These topics are covered in detail elsewhere in your HCI course


Environment Context - scriptsUser 1 – new to store, with a list of items to buyPossible script for this scenario1. Walks into main entrance of store2. Takes trolley3. Looks around4. Consults shopping list and decides to look for lettuce5. Turns to aisle 1 and looks for lettuce6. Moves to aisle 2 and finds bread7. Moves from aisle to aisle looking fro coffee8. Finds aisle with cereals and remembers that cornflakes are on list9. Reaches coffee aisle and chooses brand10. Goes to checkout

User 2 – familiar with store, with a single item to buyPossible script for this scenario1. Walks into main entrance of store2. Takes basket3. Heads directly to aisle 7 and finds coffee and chooses brand4. Goes to checkout


User Context

Audience profile Knowledge, experience and skill Personality factors Demographic and physical attributes Web experience


User Context


Genre Context

The web is a recent phenomenon However, it has been around long enough for

several specific types of sites, or genres, to develop Each genre has its own unique established

expression and form that define and distinguish the genre

Following genre expression rules can allow users to feel immediately comfortable with a site


Genre Context


Site Context

Usability issues within the site context include: Creating a user-centred focus Positioning the content Navigation Making the site visible


Page Context

Issues involved in the web page context include: Consistency Coherence Information placement Information coding Colour Text clarity Type of page


Page Context

Page types Home page Content page Transaction page

14. user-centred web design

Documents