User centered design and usability

User centered design and usability

Introduction

For this topic we are going to look one of the most important factors that influence the success of any site – the way in which it is designed. The process that the web designer goes through can have a significant effect on the way in which users relate to a site. Research shows that users feel they are using the web as a whole rather than any particular site and they show increasing reluctance to learning new navigation tricks. They tend to expect to be able to use a site on the basis of web conventions they have picked up as a result of their experience of using the web as a whole, where each new site they visit is interpreted according to the rules they have learned. Interface design Over the last 50 years the media that provides us with information has changed dramatically. We have moved from books and newspapers to Television and the Internet. Information is being presented to us in quite radically different ways and the ability to generate visual attention is becoming increasingly important. Television viewing has had a significant effect on the way we get new information. Compared with reading a book watching television is a passive activity where all the information is converted into mostly images and sound that are “pushed” at us. More recent generations have learned to use digital interfaces through games and mobile phones. This ‘point and click generation’ is becoming more dependent on visual concepts rather than reading core information to acquire knowledge. Recent research indicates that there is 8 seconds (or less!) to gain the attention of the online web user. Information gathering on web sites is moving from a “read it all” activity to a “scan it all” activity. This implies there is a downward trend in reading all the information available on a site and an upward trend in the rapid perception of imagery. Whilst the users interaction with a web page may pose new challenges to the designer, the design of key visual elements can still follow well established guidelines that have been developed over the years for print media. Because of this graphic design and interface design are closely related. It is possible to draw upon current practice in print media to design, create assemble, edit and organise the multiple forms of media required in contemporary web pages. In fact, one of the best web design strategies is to consistently apply a few tried and tested printed document design principles to the web pages that you create. Activity Lets have a closer look at the way in which web page design and conventional document design can be linked. Go onto the Internet and read this section of the Web Style Guide site. http://www.webstyleguide.com/interface/freestanding.html It is also available as a book and its library reference is The Web Style Guide 2nd Edition Patrick J Lynch & Sarah Horton Yale University Press ISBN 0-300-08898-1 For the book read pages 1 to 3 of the Interface design chapter. Now try the following activity based on your reading in the previous activity Activity List, with a basic description for each item, the basic elements needed to make a web page free standing. Now that you created your list lets do something with it Activity Go back onto the Internet and go to the WEB 100 site where “user ratings and reviews of Web sites guide you to the best of the Web” http://www.web100.com/ Use your list as a checklist and look at how the top five sites comply with your freestanding guidelines How many (if any!) comply? User Centred Design User centred design can be defined as: – “the practice of designing products so that users can perform required use, operations, service, and supportive tasks with a minimum of stress and maximum efficiency” (cited in Rubin, 1994, p. 10). Probably the main difference between the traditional computer graphical user interface (GUI) and the web is that on the web the user has almost total control over where they are going. They can follow paths that the designer never thought of, for example jumping deep into the page structure of a site directly from a search engine, or book marking favourite pages on a site to create a customised menu. One of the main challenges for web designers is to accommodate and support user – controlled navigation, where freedom of movement is designed for rather than constrained. This represents a challenge for the interactive designer who will usually want make some form or unique expression – a balance needs to be struck between individuality of design and designing for the web as a whole. Whilst there are no formally established web design guidelines some conventions have emerged established mostly through practice rather than theory. A good designer will find it useful to look at the top sites (say, in terms of traffic or turnover of money) to see what they have in common, if most of them do something in a certain way then that suggests serious consideration of that feature. The opposite applies if there is no obvious convention, then it comes down to the designer’s alternative, however, usability testing is still strongly recommended. Activity Now lets go back to the web style guide and have a look at what they have to say about user centred design http://www.webstyleguide.com/interface/user-centered.html Work your way through the entire section and note the key features of user centred design. Your notes from your previous reading of user centred design should include:- Clear navigation Navigation needs to be consistent and users need to be able to easily find their way about your site and also have a good idea of where they are within your site. Dead end pages Do not lock your viewers out from the rest of your site if they jump directly into a page deep within it. Have at least a “home” link. Access Allow your users to find what they want in as few steps as possible. Bandwidth Remember you may only have 6 seconds to get heir attention! Pages that take a (relatively) long time to download are likely to cause frustration. Simplicity and consistency Keep it simple! Users do not want to have to learn a new interface every time they visit a site. Also be consistent in terms of navigation and visual imagery. Design Integrity and stability Instil confidence in the user through the quality of your design and editorial standards Feedback Confirm the users actions and listen to what they have to say. Now lets put some sites to the test in terms of how well they rate for user centred design Activity Go back to the web 100 site and assess the top five sites using the main points of user centred design from above. http://www.web100.com/ How would you rate the top 5 now? Usability A web site is really a form of interactive product and because of this it is important to study user interaction. Usability engineering methodologies are being increasingly used as effective tools for an accurate means of measuring user interaction. Whilst market research techniques such as focus groups are useful for getting information on customers needs and concerns they will rarely give insight into fundamental business processes. Users are not designers, they will not come up with a design for a navigation system, this still needs to be prototyped and tested. This is where usability studies come into play as a means to measure the quality of the user experience with a web site. But what exactly does the web designer have to take into account to ensure they produce a web site that is centred on the users needs? The following activity is based on the WorkingWeb enhancing website usability guidelines. The guidelines provide a useful approach web usability and links it to the wider area of user centred design covered in the previous section. Activity Let’s go onto the Internet and have a look at the WorkingWeb usability guidelines http://workingweb.com.au/training/intro_to_usability.php Work your way through the complete training menu. Now lets test your understanding of the previous activity by answering the following short questions. Activity 1. What should a designer do first on a new project, before even considering the website content? 2. Give your own definition of Information Architecture. 3. Broadly describe the main factors that a web designer has to take into account when designing a prototype web site. Note your answers should be between 100 to 200 words long end

Envisioning The Design

Envisioning is about:

• Understanding : clients & users
• Communicating
• Evaluating and Selecting

Techniques for doing this

• Restating client requirements
• Scenarios of use
• End user profiling
• Mood boards
• Storyboards
• Navigation maps
• Flow diagrams
• Sketching
• Design space analysis

Restating client requirements (brief)

• Different words = different perspectives
• Clients don’t always know what they want
• Client’s don’t always know what is possible
• Restating their requirements:
  • provides opportunity for discussion
  • clarifies misunderstandings
  • better basis for a  contractual agreement

End user profiling

• Not enough to say ‘anyone’, or ‘children’,etc

be specific (anyone interested in buying a car and with the money to do it, children between 7-12 in the London area, etc)

address any issues users might have (kids – feel safe, feel cool, etc)

• If your interface/website/object has multiple audiences:

profiling will reveal potential clashes of interest

you have a place from which to start making decisions/trade-offs

Alternative methods for gathering data about users and for presenting profiles

Observation: ethnographic approaches; ethical issues (discussed later in module)

Using cultural probe

Creating fictional ‘personas’ to use in scenarios

Mood/Style Boards

• Widely used in interior design/advertising http://www.bbc.co.uk/homes/design/colour_moodboard.shtml
• You can generate them, or you can get users/clients to generate them
• Capture feelings of a place or of a design:
• anything goes (images, text, colours, textures, website screen shots, etc)
• use removable sticky stuff so you can alter board

Storyboards

Technique from film-making:

scenes/frames from the user experience point of view

communicate the feel of the ‘flow’ of the design

Can be used in prototypes/scenarios (see later weeks..)

storyboard normally contain a sketch of the visual elements + descriptions of animations, interactions (e.g. dialog boxes), sounds, and any other media.

Navigation Maps

Represent how the user navigates through the design:

not same thing as directory structure!

Box per page/key moment:

where can you go from here

include backwards as well as forwards flows

Frequently, drawing them helps spot:

orphan pages

dead ends

structure is getting too complex and users will get lost

Examples:

Simple:http://www.dcc.uchile.cl/~luguerre/cc61j/recursos/76.pdf

ComplexMcAfee software

Interaction Design: An Overview

The process in general terms

• Understand problem and its context
  Generate possible solutions
  Concretise the possible solutions
  Evaluate them
  Selection of possible solutions until one emerges
  Realise that one
  Evaluate
  Continue or start again!

Put the user at the center

Understanding the user: a recurring theme, there are different aspects to this

• asking users
• observing users
• involving users
• using theory (about users) to inform designs and design practice
• asking users
• observing users
• involving users
• using theory (about users) to inform designs and design practice

User-centric View of Design Problems: PACT Analysis

• PACT makes a good ‘user-centric’ framework for thinking about a design problem/brief
• Take each category and work through it
• Use the analysis to help focus/orient early design thinking
• Important: revisit the analysis:
• As you get deeper into the problem the analysis should change and/or get richer

P(eople)ACT

• Consider range of characteristics of people
• Physiologically
• Age differences, physical abilities
• Psychologically
• Attention, perception, memory
• Forming the right ‘mental model’
• Socially and Culturally

PA(ctivities)CT

in general think of..

• Goals, tasks and actions
• Regular or unusual, weekly? Yearly?
• Individual or distributed, involving others
• Well-defined or vague
• Continuous or interrupted

PAC(ontexts)T

generally

• Physical environments for the activities
• Social environments
• Circumstances under which activities happen (time, place, pressure of work/time)
• Amount and type of support for activities

PACT(echnologies)

• Input
• Getting data in; getting commands; security
• Output
• Characteristics of different displays (e.g. video vs. photographs; speech vs. screen)
• Communications
• Between people, between devices, speed, etc.
• Always keeping one eye on the future

Doing a PACT analysis

• Brainstorm the variety of P, A, C and Ts that are possible
• Explore design implications
• Write as detailed concrete stories…
• …then group together into general scenes
• Look for trade-offs between combinations of PACT
• Think about how these might effect design

Design Awareness Exercise

In groups identify:

people

activities

technologies

contexts

of an in-flight entertainment system

What are the design implications?

UID Lesson Nov 11 09

Activities

Finish Evaluation of Style Board

Lo Fi prototype -paper based; at least two variations

Hi Fi prototype – screen based, final design version

Evaluate user interaction with both

Relating content and interface design with Hi Fi prototype

exhibitionX

January exhibition brief 2010

Interactive exhibition of student work

Screen and paper based

Themes are 10 and retro technology

Held in Media Space foyer and online

Resources

CRT TVs and monitors – various sizes

Video players

DVD players

PC’s

Sound systems

Black exhibition screens

Interactive Media: Planning LO1

LO1

Submit for both the Dignans and Jan exhibition projects

1 Your interpretation of the the given design brief

2 Pact analysis

3  Scenario of use

4 A statement of purpose summary

5 Functional requirements

6 Non Functional requirements

7 Verify requirements specification against brief

Target date Monday November 2nd

F1VS 34: Interactive Media: Planning

Learning material developed by SQA to support this unit.

It is designed for you to work through on your own.

XhibitionX

Project Brief

Theme

Investigate the relationship between art and technology.

Is it really necessary to have the latest piece of technology to maximise your creativity?

Retro technology or recycled technology used to create an interactive audio visual  installation or exhibition to present student work.

Venue

Online and Media space foyer and maybe elsewhere.

Name

Play on words –   exhibition and roman numeral for 10?

ExhibitionX

eXX

JanX

JanEx

Timescale

Runs over a week after we come back in January

Activities

Plan

Produce

Promote

Organise

Set up

Run

Testing & Evaluation

Testing, Evaluation & Documentation
A checklist of checklistsLaunching a flawed application onto the market can be a very costly mistake.  Make sure you have got it right, your job and your reputation are at stake! Also, don’t do all this at the end of the project, anticipate problems at the early design stages, its a  lot cheaper and easier to fix them then than towards the end of a project when the design is relatively closed and expensive to change.
Usability testing What is usability testing? Usability testing generally involves measuring how well test subjects respond in four areas: time, accuracy, recall, and emotional response. The results of the first test are the baseline or control measurement; all subsequent tests are compared to the baseline.  A typical usability test would cover the following for around five to ten users Time on Task — How long does it take people to complete basic tasks? (For example, find something to buy, create a new account, and order the item.) Accuracy — How many mistakes did people make? (And were they fatal or recoverable with the right information?) Recall — How much does the person remember afterwards? Emotional Response — How does the person feel about the tasks completed? (Confident? Stressed? Would the user recommend this system to a friend?)
Short article on Practical usability testing
US Gov comprehensive usability resource
Series of tutorials from IBM on design for ease of use
Screen Testing Each screen of an application should be tested to ensure that it complies with the design and works properly.  A checklist can be used to work through each item.  Below is a typical example which could be adapted to your project Does the layout match the design? Do all the buttons work? Do all the texts, fonts colours and sizes match the original design spec? Do  text scroll functions or animations work? Do the non functioning controls grey out when not needed? Is there a visible continuity between screens? If there are any applets, SWF’s or other plugins and do they operate correctly? Has the text been spell checked? Do video and audio files load quickly enough and play smoothly?
Navigation testing Is your navigation scheme logical and fully functioning?  A typical test checklist would include Do all the links within the application work? Do all the hyperlinks function correctly? Are there any broken links? Is there a smooth transition between screens? Is there consistency between screens?
Accessibility How many different types of people can use your application without modification?  Is your design inclusive?  Can it be used by as many people as possible regardless of their age, ability or situation?
W3C web accessibility guidelines
RNIB good design advice.  There are two million people with sight problems in the UK. Good design can make websites, information, products, services and buildings accessible to them.
About Inclusive Design at the Design Council
Security Are there any security issues that have to be covered?
Dancing pigs (warning this link could be insecure, your bank account could be cleared out and all your children be born with tails)
Evaluation Any multimedia application should be evaluated especially in terms of its fitness for purpose.  Have you met all the requirements of the design brief?  Will you get paid?  Some contracts require the developer to produce an evaluative report prior to product launch. Does the application do what it is intended to do? Has the designer designed the best solution for the problem? Does the application work in an efficient manner? Is the application robust? Is the application easily maintained? Has a technical and user guide been provided?
Documentation People need to know how to use your application and that it will work on their machine.  Do not assume they will know what to do or have any technical knowledge.  If they can find a way to break it they will! Instructions – “……….press any key” User – ” Where’s the any key………?” You will need to establish the platform and lowest specification that will play your application.  A typical specification would include Operating system Clock speed of CPU RAM Hard drive space Optical drive type Sound card  configuration Video card configuration Screen resolution Internet access Instructions for using the application and sources of support also need to be included.  For example Insert into DVD drive If auto run does not work navigate to “game” folder Left double click on game icon
How to write instructions for busy, grouchy people.
Copyright Is it all your own work? Any multimedia application must take into account the Copyright, Designs and Patents Act. The creator of a multimedia application must ensure that all appropriate licences and permissions have been obtained for their particular purposes.
General copyright issues
ver 12/5/6 cb