14. User-Centred Web Design

1. 14. User-Centred Web Design 14. User-Centred Web Design

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

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

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

5. Planes 14. User-Centred Web Design

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

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

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

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

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

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

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

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

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

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

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

17. Elements - Surface • The main element here is Visual Design, which is important for both software interfaces and hypertext systems 14. User-Centred Web Design

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

19. Userview Contexts ·Environment ·User ·Genre ·Site ·Page 14. User-Centred Web Design

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

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

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

23. Systematic Userview Process 14. User-Centred Web Design

24. Goals & Functional Requirements • General goals • User specific goals • Functional requirements • Non-functional requirements 14. User-Centred Web Design

25. Goals and Functional Requirements Document 14. User-Centred Web Design

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

27. Environment Context - scripts • User 1 – new to store, with a list of items to buy • Possible script for this scenario • Walks into main entrance of store • Takes trolley • Looks around • Consults shopping list and decides to look for lettuce • Turns to aisle 1 and looks for lettuce • Moves to aisle 2 and finds bread • Moves from aisle to aisle looking fro coffee • Finds aisle with cereals and remembers that cornflakes are on list • Reaches coffee aisle and chooses brand • Goes to checkout • User 2 – familiar with store, with a single item to buy • Possible script for this scenario • Walks into main entrance of store • Takes basket • Heads directly to aisle 7 and finds coffee and chooses brand • Goes to checkout 14. User-Centred Web Design

28. User Context • Audience profile • Knowledge, experience and skill • Personality factors • Demographic and physical attributes • Web experience 14. User-Centred Web Design

29. User Context 14. User-Centred Web Design

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

31. Genre Context 14. User-Centred Web Design

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

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

34. Page Context • Page types • Home page • Content page • Transaction page 14. User-Centred Web Design