Upload
maik
View
59
Download
1
Embed Size (px)
DESCRIPTION
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 - PowerPoint PPT Presentation
Citation preview
14. User-Centred Web Design
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
14. User-Centred Web Design
Typical web problems
Design showing off technology for its own sake
Cluttered pages Sites not updated or maintained Annoying adverts
Poor page layout
14. User-Centred Web Design
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
14. User-Centred Web Design
Planes
14. User-Centred Web Design
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
14. User-Centred Web Design
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.
14. User-Centred Web Design
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
14. User-Centred Web Design
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
14. User-Centred Web Design
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
14. User-Centred Web Design
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
14. User-Centred Web Design
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
14. User-Centred Web Design
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”
14. User-Centred Web Design
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
14. User-Centred Web Design
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
14. User-Centred Web Design
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
14. User-Centred Web Design
Elements - Surface
The main element here is Visual Design, which is important for both software interfaces and hypertext systems
14. User-Centred Web Design
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
14. User-Centred Web Design
Userview Contexts
Environment
User
Genre
Site
Page
14. User-Centred Web Design
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
14. User-Centred Web Design
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
14. User-Centred Web Design
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
14. User-Centred Web Design
Systematic Userview Process
14. User-Centred Web Design
Goals & Functional Requirements
General goals User specific goals Functional requirements Non-functional requirements
14. User-Centred Web Design
Goals and Functional Requirements Document
14. User-Centred Web Design
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
14. User-Centred Web Design
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
14. User-Centred Web Design
User Context
Audience profile Knowledge, experience and skill Personality factors Demographic and physical attributes Web experience
14. User-Centred Web Design
User Context
14. User-Centred Web Design
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
14. User-Centred Web Design
Genre Context
14. User-Centred Web Design
Site Context
Usability issues within the site context include: Creating a user-centred focus Positioning the content Navigation Making the site visible
14. User-Centred Web Design
Page Context
Issues involved in the web page context include: Consistency Coherence Information placement Information coding Colour Text clarity Type of page
14. User-Centred Web Design
Page Context
Page types Home page Content page Transaction page