User interface design ©Ian Sommerville 2006 Software Engineering, 8th edition Chapter 16 Slide Topics covered ⚫ ⚫ ⚫ ⚫ ⚫ Design issues The user interface design process User analysis User interface prototyping Interface evaluation ©Ian Sommerville 2006 Software Engineering, 8th edition Chapter 16 Slide The user interface ⚫ ⚫ ⚫ ⚫ User interfaces should be designed to match the match the skills, experience and expectations of its anticipated users System users often judge a system by its interfaces rather than its implementation A poorly designed interface can cause a user to make mistakes and hinder them in achieving their goals Poor user interface design results in users not using the system ©Ian Sommerville 2006 Software Engineering, 8th edition Chapter 16 Slide Human factors in interface design ⚫ Limited short-term memory • ⚫ People make mistakes • • ⚫ Inappropriate alarms and messages can… put more stress on users, increasing chances they’ll make more mistakes People are different • ⚫ People can instantaneously remember about 7-10 items of information How? culture, intellectual ability, education, skills, etc People have different interaction preferences ©Ian Sommerville 2006 Software Engineering, 8th edition Chapter 16 Slide Design issues in UIs ⚫ ⚫ Two problems must be addressed in interactive systems design • How should user interact with system? • How should information be presented? User interaction and information presentation may be integrated through a coherent framework such as user interface metaphor ©Ian Sommerville 2006 Software Engineering, 8th edition Chapter 16 Slide Interface Design Typical Design Errors lack of consistency too much memorization no guidance / help no context sensitivity poor response Arcane/unfriendly ©Ian Sommerville 2006 Software Engineering, 8th edition Chapter 16 Slide Golden Rules ⚫ ⚫ ⚫ ©Ian Sommerville 2006 Place the user in control Reduce the user’s memory load Make the interface consistent Software Engineering, 8th edition Chapter 16 Slide Place the User in Control Define interaction modes in a way that does not force a user into unnecessary or undesired actions Provide for flexible interaction Allow user interaction to be interruptible and undoable Streamline interaction as skill levels advance and allow the interaction to be customized Hide technical internals from the casual user Design for direct interaction with objects that appear on the screen ©Ian Sommerville 2006 Software Engineering, 8th edition Chapter 16 Slide Reduce the User’s Memory Load Reduce demand on short-term memory Establish meaningful defaults Define shortcuts that are intuitive The visual layout of the interface should be based on a real world metaphor Disclose information in a progressive fashion ©Ian Sommerville 2006 Software Engineering, 8th edition Chapter 16 Slide Make the Interface Consistent Allow the user to put the current task into a meaningful context Maintain consistency across a family of applications If past interactive models have created user expectations, not make changes unless there is a compelling reason to so ©Ian Sommerville 2006 Software Engineering, 8th edition Chapter 16 Slide 10 The design process ©Ian Sommerville 2006 Software Engineering, 8th edition Chapter 16 Slide 27 User analysis ⚫ ⚫ ⚫ If you don’t understand what the users want to with a system, you have no realistic prospect of designing an effective interface User analyses have to be described in terms that users and other designers can understand Scenarios where you describe typical episodes of use, are one way of describing these analyses ©Ian Sommerville 2006 Software Engineering, 8th edition Chapter 16 Slide 28 Analysis techniques ⚫ Task analysis • ⚫ Interviewing and questionnaires • ⚫ Models the steps involved in completing a task Asks the users about the work they Ethnography • Observes the user at work ©Ian Sommerville 2006 Software Engineering, 8th edition Chapter 16 Slide 29 Hierarchical task analysis Retrieve pictures from remote libraries 1, 2, u ntil pictures fou nd, Dis cover pos s ible s ources Es tablish s earch terms Search for pictures Req uest tocop ies offounditems 3.1, 3.2, 3.3 until p ictu res found , 3.4 if neces sary , 3.5 3.1 Select library 3.2 Log in to catalog ue 3.3 Search for pictures 3.4 Mo dify searchterms 3.5 Record relevan t items 3.3.1, 3.3.2, 3.3.3 3.3.1 Entersearch terms ©Ian Sommerville 2006 3.3.2 In itiate s earch 3.3.3 Rev iew res ults Software Engineering, 8th edition Chapter 16 Slide 30 Interviewing ⚫ ⚫ ⚫ Design semi-structured interviews based on open-ended questions Users can then provide information that they think is essential; not just information that you have thought of collecting Group interviews or focus groups allow users to discuss with each other what they ©Ian Sommerville 2006 Software Engineering, 8th edition Chapter 16 Slide 31 Ethnography ⚫ ⚫ ⚫ Involves an external observer watching users at work and questioning them in an unscripted way about their work Valuable because many user tasks are intuitive and they find these very difficult to describe and explain Also helps understand the role of social and organizational influences on work ©Ian Sommerville 2006 Software Engineering, 8th edition Chapter 16 Slide 32 User interface prototyping ⚫ The aim of prototyping is to • • ⚫ ⚫ elicit requirements allow users to gain direct experience with the interface to give feedback Without such direct experience, it is impossible to judge the usability of an interface Prototyping may be a two-stage process: ã ã paper automated âIan Sommerville 2006 Software Engineering, 8th edition Chapter 16 Slide 33 Paper prototyping ⚫ ⚫ ⚫ Work through scenarios using sketches of the interface Use a storyboard to present a series of interactions with the system Paper prototyping is an effective way of getting user reactions to a design proposal ©Ian Sommerville 2006 Software Engineering, 8th edition Chapter 16 Slide 34 Prototyping techniques ⚫ Script-driven prototyping ⚫ Visual programming ⚫ Internet-based prototyping ©Ian Sommerville 2006 Software Engineering, 8th edition Chapter 16 Slide 35 User interface evaluation ⚫ ⚫ ⚫ Some evaluation of a user interface design should be carried out to assess its suitability Full scale evaluation is very expensive and impractical for most systems Ideally, an interface should be evaluated against a usability specification However, it is rare for such specifications to be produced ©Ian Sommerville 2006 Software Engineering, 8th edition Chapter 16 Slide 36 Usability attributes Attribute Description Lea rnability How long does it ta ke a new user to become productive with the system? Speed of operation How well does the system response match the userÕswork practice? Robustness How tolerant is the system of user error? Recoverability How good is the system at recovering from user errors? Adaptability How closely is the system t ied to a single model of w ork? ©Ian Sommerville 2006 Software Engineering, 8th edition Chapter 16 Slide 37 Simple evaluation techniques ⚫ ⚫ ⚫ ⚫ Questionnaires for user feedback Video recording of system use and subsequent tape evaluation Instrumentation of code to collect information about facility use and user errors The provision of code in the software to collect on-line user feedback ©Ian Sommerville 2006 Software Engineering, 8th edition Chapter 16 Slide 38 HCI Guidelines (Golden rules) ⚫ General interaction • • • • • • • • • • ©Ian Sommerville 2006 Consistency Meaningful feedback Ask for verification Undo Reduce amount of info user memorizes Efficiency in dialogue, motion an thought System protection (forgive mistakes) Categorize function/organize screen geographically Context-sensitive help Simple short verb phrases Software Engineering, 8th edition Chapter 16 Slide 39 ⚫ Information display • • • • • • • • ⚫ Only info needed displayed Use graph and charts Consistent labels and standard abbrev Maintain visual context Meaningful error messages CAPS, indent, etc Windows to compartmentalize and geograpy “analog” displays Data input • • • • • • Minimize # input actions (macros) Consistency between info display and data input Customize input allowed (dispense w/ sure?) Tune to user’s preferred mode of input (mouse/key) Assist all input actions Eliminate “micky mouse” inputs (defaults, no 00 on $) Standards ⚫ ⚫ ⚫ X-window system PC windows Microsoft ©Ian Sommerville 2006 Software Engineering, 8th edition Chapter 16 Slide 41 ... Chapter 16 Slide Interface Design Typical Design Errors lack of consistency too much memorization no guidance / help no context sensitivity poor response Arcane/unfriendly ©Ian Sommerville 2006 Software... meaning ©Ian Sommerville 2006 Software Engineering, 8th edition Chapter 16 Slide 21 Color use guidelines ⚫ ⚫ ⚫ ⚫ ⚫ Limit the number of colours used and be conservative in their use Use colour... user feedback ©Ian Sommerville 2006 Software Engineering, 8th edition Chapter 16 Slide 38 HCI Guidelines (Golden rules) ⚫ General interaction • • • • • • • • • • ©Ian Sommerville 2006 Consistency