Presentation on theme: "First steps to usability and User-Centred Design Gemma Richardson JISC programme February 2008."— Presentation transcript:
First steps to usability and User-Centred Design Gemma Richardson JISC programme February 2008
Some familiar (and unfamiliar terms Usability User Experience (UX) User-Centred Design (UCD) Human-Computer Interaction (HCI) Computer-Human Interaction (CHI)
UCD developments (Agile)
Usefulness vs Usability USEFULNESS – The value of the system or service (over existing methods) USABILITY – How easy the system or service is to use Source: Expero Inc.
Development layers Source: based on model from Expero Inc.
Audience needs & goals ASK!
Audience needs & goals Original bid There will be six study packages. It is planned that they will cover the following areas: The creation of the welfare state De-colonisation in Africa The special relationship with the United States during the mid-Cold War crisis Economic crisis, the unions and government Cabinet and the prosecution of global war , The permissive society: social change and government Each package will include a selection of up to 60 documents to highlight key issues, themes and arguments for teachers of history organising taught graduate, undergraduate and A level courses or modules. Study Packages SoR The requirement is to create a guide to the Cabinet papers for A level, undergraduate and graduate students of history and politics. This will be done in three distinct ways Two A-level study packages linked to specific topics covered by the national curriculum are built around a selection of Cabinet papers. These will be linked to other resources to explain governments role in defining and implementing policies. HE students benefit from a broad overview of the governments role within 100 separate packages linked to selected Cabinet papers. Search keywords linked to each section guide them towards productive searches of the full collection. A separate resource section provides additional guides to assist students search the collection effectively. The resources can be browsed independently as well as providing contextual links within study packages.
Functionality & Usefulness Translate user need into system requirements Be imaginative – what is your USP Source:
Content & Terminology Be succinct Write for scannability Use hypertext Be appropriate to the audience but remember Plain English! Source:
Content & Terminology British Governance in the 20 th Century: Cabinet Papers Cabinet Papers
Content & Terminology
Visual Design Source: The Glass Wall - BBC
Visual Design Big Ben Clockface concept The very recognisable clockface of Big Ben is set on the horizon of the background, while the cogs and sprockets of the clock fly out below, indicating looking in detail at the workings of government. The horizon line evokes the world but also adds a sense of balance. Number 10 Downing Street concept People are walking past the iconic door of 10 Downing Street in a blur, indicating not only the workings of government but the activity which goes on inside. Number 10 Downing Street is also linked to the Cabinet Papers because the building is part of the Cabinet Office Typewriter concept The word Cabinet Papers has been typed on an early 20th century typewriter. The overall colour is sepia, which denotes age and the history of the papers. There is also something of the newspaper reporter about the presentation.
Source: The Glass Wall - BBC
What is evaluation? Tests the usability, functionality and acceptability of an interactive system Laboratory vs Field Expert vs User Occurs throughout the design lifecycle
Goals of evaluation Assess the extent and accessibility of the systems functionality Assess users experience of the interaction Identify specific problems with the system
Expert reviews Expert reviews are quick and cheap Can be used early, on incomplete designs and prototypes as well as on complete systems Does not replace user testing!
Types of expert review Cognitive Walkthroughs Heuristic evaluation
Heuristics A commonsense rule (or set of rules) intended to increase the probability of solving some problem. A rule of thumb.
What you need to start A system or prototype A scenario of use Information about the users, their knowledge and experience
Heuristic list 1.Visibility of system status 2.Match between system and the real world appear in a natural and logical order. 3.User control and freedom 4.Consistency and standards 5.Error prevention Source: Nielsens 10 Heuristics – useit.com
Heuristic list 6.Recognition rather than recall 7.Flexibility and efficiency of use 8.Aesthetic and minimalist design 9.Help users recognize, diagnose, and recover from errors 10.Help and documentation Source: Nielsens 10 Heuristics – useit.com
Cognition The mental process of knowing, including aspects such as awareness, perception, reasoning, and judgment A detailed review of a sequence of actions Walkthrough
What you need to start A system or prototype A description of the task A complete, list of the actions needed to complete the task successfully A corresponding list of the system display or response for each action Information about the users, their knowledge and experience
Methodology Step through each action in the sequence At each action ask four questions Be the user not the expert!
Question One: Does the action match the users goal at that point? For example, if the effect of the action is to save a document, is saving a document what the user wants to do?
Question Two: Will the user see that the action is available? Is the button or menu item visible, or is unobvious or hidden?
Question Three: Will the user recognise the action is the one they need? Not to be confused with whether the action is visible. For example, a help button may be visible but labelled with a ? – the user may see it but not recognise it as help
Question Four: Will the user understand the feedback they receive? In order to successfully complete an action the user must get sufficient feedback. For example, the page may change or a waiting signal may appear.
Example Programming a video recorder by remote control Left: handset in normal use Right: handset after the timed record button has been pressed Source: Dix et al – Human Computer Interaction
Action sequence UA1: Press the timed record button SD1: Display moves to timer mode. Flashing cursor moves to start UA2: Press digits SD2: Each digit is displayed as typed and flashing cursor moves to next position UA3: Press the timed record button SD3: Flashing cursor moves to end
Four questions for UA1 & SD1 UA1: Press the timed record button Is the effect of the action the same as the users goal at that point? YES. The timed record button initiates timer programming. We can assume that the user would be doing this as their first goal.
Four questions for UA1 & SD1 UA1: Press the timed record button Will the user see the action is available? YES. The timed record button is visible on the handset.
Four questions for UA1 & SD1 UA1: Press the timed record button Once the user has found the correct action, will they know it is the one they need? NO. It is not clear which button is the timed record button. There is one that looks a bit like a clock but this could change the time rather than be related to recording.
Four questions for UA1 & SD1 SD1: Display moves to timer mode. Flashing cursor moves to start After the action is taken will the user understand the feedback? YES. We can assume that the user would recognise the change in display as an indication of the successful completion of the first action.
So what have we learnt about the handset design? NB. This is a potential problem. Further testing with the user group may show that they are able to identify the right button easily