Вы находитесь на странице: 1из 89

User interface design

Designing effective interfaces for software systems

Ian Sommerville 2000

Software Engineering, 6th edition. Chapter 15

Slide 1

The user interface

System users often judge a system by its interface rather than its functionality A poorly designed interface can cause a user to make catastrophic errors Poor user interface design is the reason why so many software systems are never used Software engineers generally must do interface design

Ian Sommerville 2000

Software Engineering, 6th edition. Chapter 15

Slide 4

Importance of User Interface


Most important part of any computer system Interface is the system for most users Increasingly important
GUIs a big improvement over previous approaches Platforms (e.g. Mac/ Microsoft) have style guides 50% of code devoted to interface

Interface should disappear users can focus on their task, not the interface Biggest enemy of good interface design is time

Galitz
Ian Sommerville 2000 Software Engineering, 6th edition. Chapter 15 Slide 5

Benefits of Good Design

Small improvements can be worth big $$$


Book e.g. if users work 1 sec slower on each of 4.8 million screens per year, need almost an extra person Book e.g.s Redesigns have improved productivity 20%, 25%, 40%, 50% IBM - $1 invested in usability returns $10-$100

Interface problems are treated as bugs


Pressman - $1 fix during design, $10 fix during development, $100 fix after release

Big Improvements can establish new products, companies, markets


the browser was a UI idea before it, search using gopher etc was tedious. AOL was successful because it was more user friendly than early leader CompuServe.

Galitz
Ian Sommerville 2000 Software Engineering, 6th edition. Chapter 15 Slide 6

Graphical user interfaces

Most users of business systems interact with these systems through graphical interfaces although, in some cases, legacy text-based interfaces are still used

Ian Sommerville 2000

Software Engineering, 6th edition. Chapter 15

Slide 7

GUI characteristics
Windows
Icons

Menus
Pointing

Graphics
Ian Sommerville 2000 Software Engineering, 6th edition. Chapter 15 Slide 8

GUI advantages

They are easy to learn and use. The user may switch quickly from one task to another and can interact with several different applications. Fast, full-screen interaction is possible with immediate access to anywhere on the screen

Ian Sommerville 2000

Software Engineering, 6th edition. Chapter 15

Slide 9

User-centred design

The aim of this chapter is to sensitise software engineers to key issues underlying the design rather than the implementation of user interfaces User-centred design is an approach to UI design where the needs of the user are paramount and where the user is involved in the design process UI design always involves the development of prototype interfaces

Ian Sommerville 2000

Software Engineering, 6th edition. Chapter 15

Slide 10

User interface design process


Analyse and understand user activities Produce paperbased design prototype Evaluate design with end-users

Design prototype

Produce dynamic design prototype

Evaluate design with end-users

Executable prototype

Implement final user interface

Ian Sommerville 2000

Software Engineering, 6th edition. Chapter 15

Slide 11

15.1 UI design principles

UI design must take account of the needs, experience and capabilities of the system users Designers should be aware of peoples physical and mental limitations (e.g. limited short-term memory) and should recognise that people make mistakes UI design principles underlie interface designs although not all principles are applicable to all designs
Software Engineering, 6th edition. Chapter 15 Slide 12

Ian Sommerville 2000

User interface design principles


Principle
User Familiarity

Description
Interface should use terms familiar to users

Consistency
Minimal Surprise Recoverability

Comparable operations should be started the same way Users should never be surprised
Users should be able to recover from their errors

User Guidance
User Diversity

Meaningful feedback, context-sensitive help


Should provide for different types of user

Ian Sommerville 2000

Software Engineering, 6th edition. Chapter 15

Slide 13

Nielsens Ten Usability Heuristics


Visibility of system status Match between system and the real world User control and freedom Consistency and standards Error prevention Recognition rather than recall Flexibility and efficiency of use Aesthetic and minimalist design Help users recognize, diagnose, and recover from errors Help and documentation Nielsen
Ian Sommerville 2000 Software Engineering, 6th edition. Chapter 15 Slide 16

Galitzs Heuristics (Table 14.2)


1. 2. 3. 4.

5.
6.

7. 8.

9. 10.

Automate unwanted workload Reduce uncertainty Fuse data Present new info with meaningful aid to interpretation Use names that are conceptually related to functions Group data in consistently meaningful ways to reduce search time Limit data-driven tasks Include in displays only info needed by user at a given time Provide multiple coding of data where appropriate Practice judicious redundancy
Ian Sommerville 2000 Software Engineering, 6th edition. Chapter 15

Galitz
Slide 17

Galitzs WWW Heuristics


1. 2. 3. 4. 5. 6. 7. 8. 9.

Speak the users language Be consistent Minimize the users memory load Build flexible and efficient systems Design aesthetic and minimalist systems Use chunking Provide progressive levels of detail Give navigational feedback Dont lie to the user

Galitz
Ian Sommerville 2000 Software Engineering, 6th edition. Chapter 15 Slide 18

15.2 User-system interaction

Two problems must be addressed in interactive systems design


How should information from the user be provided to the computer system? How should information from the computer system be presented to the user?

User interaction and information presentation may be integrated through a coherent framework such as a user interface metaphor
Ian Sommerville 2000 Software Engineering, 6th edition. Chapter 15 Slide 19

Interaction styles

Direct manipulation Menu selection Form fill-in Command language Natural language

Ian Sommerville 2000

Software Engineering, 6th edition. Chapter 15

Slide 20

Direct manipulation advantages

Users feel in control of the computer and are less likely to be intimidated by it Fast and intuitive interaction User learning time is relatively short Users get immediate feedback on their actions so mistakes can be quickly detected and corrected

Ian Sommerville 2000

Software Engineering, 6th edition. Chapter 15

Slide 21

Direct manipulation problems

The creation of an appropriate information space model (metaphor) for real world tasks and objects can be very difficult Given that users have a large information space, what facilities for navigating around that space should be provided? Direct manipulation interfaces can be complex to program and make heavy demands on the computer system
Software Engineering, 6th edition. Chapter 15 Slide 22

Ian Sommerville 2000

Direct Manipulation Applications


Games CAD systems Files and Folders

Ian Sommerville 2000

Software Engineering, 6th edition. Chapter 15

Slide 23

Menu systems

Users make a selection from a list of possibilities presented to them by the system The selection may be made by pointing and clicking with a mouse, using cursor keys or by typing the name of the selection May make use of simple-to-use terminals such as touchscreens

Ian Sommerville 2000

Software Engineering, 6th edition. Chapter 15

Slide 25

Advantages of menu systems

Users need not remember command names as they are always presented with a list of valid commands Typing effort is minimal User errors are trapped by the interface Context-dependent help can be provided. The users context is indicated by the current menu selection

Ian Sommerville 2000

Software Engineering, 6th edition. Chapter 15

Slide 26

Problems with menu systems

Actions which involve logical conjunction (and) or disjunction (or) are awkward to represent Menu systems are best suited to presenting a small number of choices. If there are many choices, some menu structuring facility must be used Experienced users find menus slower than command language

Ian Sommerville 2000

Software Engineering, 6th edition. Chapter 15

Slide 27

Menu System Applications

Most general purpose systems

Ian Sommerville 2000

Software Engineering, 6th edition. Chapter 15

Slide 28

Form-based interface
NE W BOOK Title Author Publisher Edition Classification Date of purchase ISBN Price Publication date Number of copies Loan status Order status
Software Engineering, 6th edition. Chapter 15 Slide 29

Ian Sommerville 2000

Forms-based Systems Advantages


Simple data entry Easy to learn

Ian Sommerville 2000

Software Engineering, 6th edition. Chapter 15

Slide 30

Forms-based Systems Disadvantages

Takes up a lot of screen space

Ian Sommerville 2000

Software Engineering, 6th edition. Chapter 15

Slide 31

Forms-based Systems Applications

Most systems involving significant data entry

Ian Sommerville 2000

Software Engineering, 6th edition. Chapter 15

Slide 32

Command interfaces

User types commands to give instructions to the system e.g. UNIX, DOS Advantages:
Powerful and flexible good for experts Easy to process using compiler techniques Commands of arbitrary complexity can be created by command combination Concise interfaces requiring minimal typing can be created

Ian Sommerville 2000

Software Engineering, 6th edition. Chapter 15

Slide 33

Problems with command interfaces

Users have to learn and remember a command language. Command interfaces are therefore unsuitable for occasional users Users make errors in command. An error detection and recovery system is required System interaction is through a keyboard so typing ability is required

Ian Sommerville 2000

Software Engineering, 6th edition. Chapter 15

Slide 34

Command languages

Often preferred by experienced users because they allow for faster interaction with the system Not suitable for casual or inexperienced users May be provided as an alternative to menu commands (keyboard shortcuts). In some cases, a command language interface and a menu-based interface are supported at the same time

Ian Sommerville 2000

Software Engineering, 6th edition. Chapter 15

Slide 35

Natural language interfaces

The user types a command in a natural language. Generally, the vocabulary is limited and these systems are confined to specific application domains (e.g. timetable enquiries) NL processing technology is now good enough to make these interfaces effective for casual users but experienced users find that they require too much typing

Ian Sommerville 2000

Software Engineering, 6th edition. Chapter 15

Slide 36

15.3 Information presentation

Information presentation is concerned with presenting system information to system users The information may be presented directly (e.g. text in a word processor) or may be transformed in some way for presentation (e.g. in some graphical form) The Model-View-Controller approach is a way of supporting multiple presentations of data

Ian Sommerville 2000

Software Engineering, 6th edition. Chapter 15

Slide 38

Information presentation

Information to be displayed

Presentation software

Display

Ian Sommerville 2000

Software Engineering, 6th edition. Chapter 15

Slide 39

Information presentation

Static information
Initialised at the beginning of a session. It does not change during the session May be either numeric or textual Changes during a session and the changes must be communicated to the system user May be either numeric or textual

Dynamic information

Ian Sommerville 2000

Software Engineering, 6th edition. Chapter 15

Slide 41

Information display factors


Is the user interested in precise information or data relationships? How quickly do information values change? Must the change be indicated immediately? Must the user take some action in response to a change? Does the user need to interact with the displayed info via a direct manipulation interface? Is the information textual or numeric? Are relative values important?

Ian Sommerville 2000

Software Engineering, 6th edition. Chapter 15

Slide 42

Alternative information presentations


Jan 2842 4000 Feb Mar 2851 3164 April 2789 May 1273 June 2835

3000

2000

1000

0 Jan
Ian Sommerville 2000

Feb

Mar

April

May

June
Slide 43

Software Engineering, 6th edition. Chapter 15

Analogue vs. digital presentation

Digital presentation
Compact - takes up little screen space Precise values can be communicated Easier to get an 'at a glance' impression of a value Possible to show relative values Easier to see exceptional data values

Analogue presentation

Ian Sommerville 2000

Software Engineering, 6th edition. Chapter 15

Slide 44

Dynamic information display


1 4 3 2 0 10 20

Dial with needle

Pie chart

Thermometer

Horizontal bar

Ian Sommerville 2000

Software Engineering, 6th edition. Chapter 15

Slide 45

Displaying relative values

Pressure 0 100 200 300 400 0 25

T emper atu re 50 75 100

Ian Sommerville 2000

Software Engineering, 6th edition. Chapter 15

Slide 46

Textual highlighting

!
Ian Sommerville 2000

The filename you have chosen h as been used. Please choose an other name Ch. 16 User interface design OK Cancel

Software Engineering, 6th edition. Chapter 15

Slide 47

Data visualisation

Concerned with techniques for displaying large amounts of information Visualisation can reveal relationships between entities and trends in the data

Ian Sommerville 2000

Software Engineering, 6th edition. Chapter 15

Slide 48

15.3.1 Colour displays

Colour adds an extra dimension to an interface and can help the user understand complex information structures Can be used to highlight exceptional events Common mistakes in the use of colour in interface design include over-use of colour in the display

Ian Sommerville 2000

Software Engineering, 6th edition. Chapter 15

Slide 49

Colour use guidelines


Don't use too many colours Use colour coding to support user tasks Allow users to control colour coding Design for monochrome then add colour Use colour coding consistently Avoid colour pairings which clash Use colour change to show status change Be aware that colour displays are usually lower resolution

Ian Sommerville 2000

Software Engineering, 6th edition. Chapter 15

Slide 50

15.4 User support

User guidance covers all system facilities to support users including on-line help, error messages, manuals etc. The user guidance system should be integrated with the user interface to help users when they need information about the system or when they make some kind of error The help and message system should, if possible, be integrated
Software Engineering, 6th edition. Chapter 15 Slide 51

Ian Sommerville 2000

Error messages

Error message design is critically important. Poor error messages can mean that a user rejects rather than accepts a system Messages should be polite, concise, consistent and constructive The background and experience of users should be the determining factor in message design

Ian Sommerville 2000

Software Engineering, 6th edition. Chapter 15

Slide 53

Design factors in message wording


Context Experience The user guidance system should be aware of what the user is doing and should adjust the out put message t o t he current cont ext . As users become familiar with a system t hey become irrit at ed by long, meaningful messages. However, beginners find it difficult to understand short t erse statement s of t he problem. The user guidance system should provide bot ht ypes of message and allow the user t o control message conciseness. Messages should be tailored t o t he users skills as well as their experience. Messages for the different classes of user may be expressed in different ways depending on he terminology which t is familiar t o the reader. Messages should be positive rat her than negative. They should use t he active rat her t han t he passive mode of address. They should never be insult ing or t ry t o be funny. Wherever possible, thedesigner of messages should be familiar with t he culture of t he count ry where t he system is sold. There are distinct cult ural differences between Europe, Asia and America. A suit able message for one cult ure might be unacceptable in another.
Software Engineering, 6th edition. Chapter 15 Slide 54

Skill level

St yle Cult ure

Ian Sommerville 2000

Design factors in message wording


Context Experience Skill Level Style Culture

Ian Sommerville 2000

Software Engineering, 6th edition. Chapter 15

Slide 55

System and user-oriented error messages


System-oriented error message Error #27 In valid patient id entered

?
OK

Cancel

Ian Sommerville 2000

Software Engineering, 6th edition. Chapter 15

Slide 57

user-oriented error messages


User-oriented error message
Patient J . Bates is not registered Click on Patients f or a list of registered patients Click on Retry to re-input a patient name Click on Help f or more inf ormation Patients Help Retr y Cancel

Ian Sommerville 2000

Software Engineering, 6th edition. Chapter 15

Slide 58

Help system design


Help? means help I want information Help! means HELP. I'm in trouble Both of these requirements have to be taken into account in help system design Different facilities in the help system may be required

Ian Sommerville 2000

Software Engineering, 6th edition. Chapter 15

Slide 59

Help information

Should not simply be an on-line manual Screens or windows don't map well onto paper pages. The dynamic characteristics of the display can improve information presentation. People are not as good at reading screen as they are paper text. Content should be prepared with help of application specialists Content should not be too large dont overwhelm user

Ian Sommerville 2000

Software Engineering, 6th edition. Chapter 15

Slide 60

Help system use

Multiple entry points should be provided so that the user can get into the help system from different places. Some indication of where the user is positioned in the help system is valuable. Facilities should be provided to allow the user to navigate and traverse the help system. Index, TOC, and Search should be provided

Ian Sommerville 2000

Software Engineering, 6th edition. Chapter 15

Slide 61

Entry points to a help system


Top-level entry

Entry from application

Entry from error message system

Help frame network

Ian Sommerville 2000

Software Engineering, 6th edition. Chapter 15

Slide 62

Help system windows


Help frame map Mail redirection Mail may be redirected to another network user by pressing the redirect button in the control panel. The system asks for the name of the user or users to whom the mail has been sent You are here Help history 1. 2. 3. 4. Mail Send mail Read mail Redirection more next top ics

Ian Sommerville 2000

Software Engineering, 6th edition. Chapter 15

Slide 63

Help on WWW

Easy to implement Easy for users to use Difficult to link to applications themselves
users may need to make extra effort to get to help Help doesnt know context where you needed help cannot provide context sensitive help

Ian Sommerville 2000

Software Engineering, 6th edition. Chapter 15

Slide 64

5.4.3 User documentation

As well as on-line information, paper documentation should be supplied with a system Documentation should be designed for a range of users from inexperienced to experienced As well as manuals, other easy-to-use documentation such as a quick reference card may be provided

Ian Sommerville 2000

Software Engineering, 6th edition. Chapter 15

Slide 65

User document types


System evaluators System administrators Novice users Experienced users System administrators

Functional description

Installation document

Introductory manual

Reference manual

Administrators guide

Description of services

How to install the system

Getting started

Facility description

Operation and maintenance

Ian Sommerville 2000

Software Engineering, 6th edition. Chapter 15

Slide 66

15.5 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 2000

Software Engineering, 6th edition. Chapter 15

Slide 68

Usability attributes
Attribute Learnability Speed of operat ion Robust ness Recoverability Adapt ability Des cripti on How long does it t ake a new user to become product ive with t he system? How well does t he system response match t he users work practice? How t olerant is the syst em of user error? How good is t he syst em at recovering from user errors? How closely is t he system t ied t o a single model of work?

Ian Sommerville 2000

Software Engineering, 6th edition. Chapter 15

Slide 69

Things to Test

Conformance with a requirement Conformance with guidelines for good design Identification of design problems Ease of system learning Retention of learning over time Speed of task completion Speed of need fulfillment Error rates Galitz Subjective user satisfaction
Ian Sommerville 2000 Software Engineering, 6th edition. Chapter 15 Slide 70

System - User Interface Design Goals

5 human factors central to community evaluation:


1. 2. 3. 4. 5. Time to learn Speed of performance Rate of errors by users Retention over time Subjective satisfaction

Trade-offs sometimes necessary Test all design alternatives using mock-ups

Galitz
Ian Sommerville 2000 Software Engineering, 6th edition. Chapter 15 Slide 71

Objective Measures of Usability

Effectiveness
Speed of performance, # errors (against some standard) Tasks completeable by required pct of target users

Learnable
Time to learn, amount of training and tech support needed (against some standard) Relearning time for intermittent users

Flexible Subjective satisfaction


Tiredness, discomfort, frustration, effort required, willingness/eagerness to use system

Galitz
Ian Sommerville 2000 Software Engineering, 6th edition. Chapter 15 Slide 72

Simple evaluation techniques


Questionnaires for user feedback Video recording of system use and subsequent tape evaluation. Observation of users at work with system and thinking aloud about how they are trying to use system Instrumentation of code to collect information about facility use and user errors. The provision of a gripe button for on-line user feedback.

Ian Sommerville 2000

Software Engineering, 6th edition. Chapter 15

Slide 73

Kinds of Tests

Guidelines review Heuristic evaluation (will be covered last due to extensive coverage) Cognitive walkthrough Think aloud evaluations Usability test Classic experiments Focus groups

Galitz
Ian Sommerville 2000 Software Engineering, 6th edition. Chapter 15 Slide 74

Elements of Discount Usability Engineering


Scenarios Simplified Thinking Aloud Heuristic Evaluation

Nielsen
Ian Sommerville 2000 Software Engineering, 6th edition. Chapter 15 Slide 75

Scenarios

Take prototyping to extreme reduce functionality AND number of features Small, can afford to change frequently Get quick and frequent feedback from users Compatible with interface design methods

Nielsen
Ian Sommerville 2000 Software Engineering, 6th edition. Chapter 15 Slide 76

Simplified Thinking Aloud

Bring in some users, give them tasks, have them think out loud Fewer users in user testing

Nielsen
Ian Sommerville 2000 Software Engineering, 6th edition. Chapter 15 Slide 77

Heuristic Evaluation

Context part of iterative design Goal find usability problems Who small set of evaluators How study interface in detail, compare to small set of principles

Nielsen
Ian Sommerville 2000 Software Engineering, 6th edition. Chapter 15 Slide 78

How to Conduct a Heuristic Evaluation


More than one evaluator to be effective. Each evaluator inspects the interface by themselves General heuristics may be supplemented Results can be oral or written Evaluator spends 1-2 hours with interface Evaluator goes through interface > 1 time Evaluators may follow typical usage scenarios Interface can be paper

Nielsen
Ian Sommerville 2000 Software Engineering, 6th edition. Chapter 15 Slide 79

Normans Four Principles of Good Design


State and the action alternatives should be visible Should be a good conceptual model with a consistent system image Interface should include good mappings that reveal the relationships between stages User should receive continuous feedback

Ian Sommerville 2000

Software Engineering, 6th edition. Chapter 15

Slide 82

Galitzs Principles of User Interface Design

To follow alphabetically (following book)

Ian Sommerville 2000

Software Engineering, 6th edition. Chapter 15

Slide 83

Aesthetically Pleasing

Meaningful contrast between screen elements Create groupings Align screen elements and groups Provide 3 dimensional representation Use color and graphics effectively and simply

Ian Sommerville 2000

Software Engineering, 6th edition. Chapter 15

Slide 84

Clarity

Visual elements Functions Metaphors Words and text

Ian Sommerville 2000

Software Engineering, 6th edition. Chapter 15

Slide 85

Compatible

With the user With the task and job With the product (past systems)

Ian Sommerville 2000

Software Engineering, 6th edition. Chapter 15

Slide 86

Comprehensibility

User should easily be able to determine:


What to look at What to do When to do it Where to do it Why to do it How to do it

Ian Sommerville 2000

Software Engineering, 6th edition. Chapter 15

Slide 87

Configurability

Users should be able to set preferences Good Default Settings should be provided for non-tinkerers

Ian Sommerville 2000

Software Engineering, 6th edition. Chapter 15

Slide 88

Consistency

One of Shneidermans 8 golden rules for interface design Similar components should
Have similar look Operate similarly

Same action should always produce the same result Function of elements should not change Position of standard elements should not change Same terminology used for same thing throughout Standards and Guidelines increase the odds of consistency
Software Engineering, 6th edition. Chapter 15 Slide 89

Ian Sommerville 2000

Control

User should control the interaction


Actions initiated by user Actions performed quickly Actions can be interrupted or stopped, and reversed

Context maintained is from the users perspective More than one way to do things Avoid modes Configurable

Ian Sommerville 2000

Software Engineering, 6th edition. Chapter 15

Slide 90

Directness

Provide Direct Manipulation


user selects an object, then directly performs an action on it The effect of action on an object should be immediately visible Available alternatives reduces memory load

Ian Sommerville 2000

Software Engineering, 6th edition. Chapter 15

Slide 91

Efficiency

Minimize eye and hand movements


Make user actions flow from one to another Dont switch users frequently from keyboard to mouse

Anticipate users wants and needs whenever possible

Ian Sommerville 2000

Software Engineering, 6th edition. Chapter 15

Slide 92

Familiarity

Use language and concepts familiar to the user Keep the interface natural Use real world metaphors

Ian Sommerville 2000

Software Engineering, 6th edition. Chapter 15

Slide 93

Flexibility

compatible with the users skills, experience, habits, and preferences, and current conditions Danger: more flexibility increases complexity of system

Ian Sommerville 2000

Software Engineering, 6th edition. Chapter 15

Slide 94

Forgiveness

Prevent errors from occurring when possible Tolerate and forgive common and unavoidable human errors When an error occurs, provide constructive error messages Protect against catastrophic errors

Ian Sommerville 2000

Software Engineering, 6th edition. Chapter 15

Slide 95

Predictability

User should be able to anticipate the flow of the task Expectations should be fulfilled

Ian Sommerville 2000

Software Engineering, 6th edition. Chapter 15

Slide 96

Recovery

System should permit:


Commands or actions to be abolished or reversed Immediate return to a certain point if difficulties arise An error on their part Hardware, software, or communication problems

Users should never lose work due to:


Ian Sommerville 2000

Software Engineering, 6th edition. Chapter 15

Slide 97

Responsiveness

Respond rapidly to user requests Provide acknowledgement of user actions Beginners need more / more informative feedback than experts do

Ian Sommerville 2000

Software Engineering, 6th edition. Chapter 15

Slide 98

Simplicity

Provide as simple an interface as possible


Progressive disclosure Defaults Minimize screen alignment points Make common actions simple Provide consistency

Ian Sommerville 2000

Software Engineering, 6th edition. Chapter 15

Slide 99

Transparency

Allow user to focus on the task, not the interface


Basic principle of direct manipulation Use users task vocabulary Design interface based on task analysis

Ian Sommerville 2000

Software Engineering, 6th edition. Chapter 15

Slide 100

Trade-offs

Final Design will always represent a series of trade-offs Peoples requirements always take precedence over technical requirements

Ian Sommerville 2000

Software Engineering, 6th edition. Chapter 15

Slide 101

Вам также может понравиться