1 week 5 principles of gui design object oriented programming 31465
TRANSCRIPT
1
Week 5
Principles of GUI Design
Object Oriented Programming31465
2
Lecture Overview
• What is the user interface
• Principles of user interface design
• Issues of information display
• User guidance- Error Messages- Help systems
3
The User Interface
• System users often judge a system by its interface
• 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
• The focus of this lecture is on graphical user interface (GUI) design
4
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
Controls need to be visible, with good mapping to their effects and their design should also suggest their functionality
5
Have a Question? Justtype it in and click Ask!
6
Star Interface (Xerox,1981)
• Make computer invisible as possible to the user
• Interface metaphor based on physical office
• Paper, folders, in and out trays were represented as icons on the virtual desktop
• Dragging=moving
• But extended metaphor- e.g. allowed for rapid
searching
7
Magic Cap 3D desktop
8
How many different metaphors can you find?
9
What does this do?
10
Graphical User Interfaces
• User interfaces which rely on windows, iconic representation of entities, pull-down or pop-up menus and pointing devices.
• Previously called WIMP interfaces - now generally referred to as GUIs.
• The standard form of interface for workstations and high-power personal computers.
11
GUI Advantages
They are easy to learn and use. - Users without experience can learn to use the system
quickly.
The user may switch quickly from one task to another and can interact with several different applications.- Information remains visible in its own window when
attention is switched.
Fast, full-screen interaction is possible with immediate access to anywhere on the screen
12
User Interface Design Principles
Principle Description
Know the userpopulation
This means being sympathetic to different user needs
Reducecognitive load
Design so that users do not have to remember largeamounts of detail
Engineer forerrors
People always make mistakes. The system can bedesigned both to prevent errors and to enable recoveryfrom errors
Maintainconsistency andclarity
Emerges from standard operations and representationsand from using appropriate metaphors. A designer’sunderstanding of what is ‘clear’ will depend on theirunderstanding of their users.
(From Preece et al. p. 488)
13
User Interface Design Principles
Principle DescriptionUser familiarity The interface should use terms and concepts which are
drawn from the experience of the anticipated class ofuser.
Consistency The interface should be consistent in that comparableoperations should be activated in the same way.
Minimal surprise Users should never be surprised by the behaviour of asystem.
Recoverability The interface should include mechanisms to allow usersto recover from their errors.
User guidance The interface should incorporate some form of context -sensitive user guidance and assistance.
Ian Sommerville (1995) Software Engineering
14
User Interface Design Principles
Principle Description
Naturalness The user does not have to alter their approach to theirwork in order to interact with the system
Consistency Expectations built up through the use of one part of thesystem are not frustrated by changes in another
Non-redundancy The user needs to input only the minimum informationfor the systems operation
Supportiveness The ‘dialogue’ assists the user to use the system
Flexibility Different levels of user familiarity should be supported
Linda Macaulay (1995) Human-Computer Interaction for Software Designers.
15
Principles and Rules
Principles• allow query in depth• design for user growth• allow input flexibility• adapt to different user levels and styles• ensure ease of understanding• give appropriate quantity of response
Rules• provide a ‘RESET’ command• always issue a ‘warning’ message to the user before deleting a file• display the ‘quit’ button in the bottom left-hand quarter of the screen
A ‘design rule’ can be obeyed with minimal filling out and interpretation by the designer
16
Useability Attributes
Attribute Description
Learnibility How long does it take a new user to becomeproductive with the system?
Speed ofOperation
How well does the system’s response match the user’swork practice?
Robustness How tolerant is the system of user error?
Recoverability How good is the system at recovering from usererrors?
Adaptability How closely is the system tied to a single model ofwork?
17
Designing a User Interface - 1
1. Identify what work will be shared between the user and the system
2. Specify the flow of interaction between the user and the system to do that work
• identify online events• input/output data items• create a ‘logical’ dialogue outline - at least one per event• check you have got all the data you need• create logical dialogue controls ( ie how will the event begin and end
or branch)• validate the diagrams with users
3. Design a consistent set of screens/windows to support that interaction
18
Designing a User Interface - 2
4. Decide what information should be displayed in each window/screen
5. Decide how the information should be displayed
6. Decide where each field will appear
7. Decide what highlighting is required
8. Produce a draft design
9. Test the design with users
10. Iterate
19
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?
• Is there a direct manipulation interface?• Is the information textual or numeric? Are relative
values important?
20
Analogue vs. Digital Presentation
Digital presentation- Compact - takes up little screen space
- Precise values can be communicated
- User has to attend to it
Analogue presentation- Easier to get an 'at a glance' impression of a value
- Possible to show relative values
- Easier to see exceptional data values
21
22
Colour Displays
Colour adds an extra dimension to an interface and can help the user understand complex information structures
Colour can be used to highlight exceptional events
Common mistakes in the use of colour in interface design include:- Relying on colour to communicate meaning
- Over-use of colour in the display
23
Colour Use Guidelines
• Don't use too many colours• Use colour coding to support use 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 can be of lower
resolution
24
Which is easiest to read and why?
What is the time?
What is the time?
What is the time?
What is the time?
What is the time?
25
Guidelines on Information Presentation
• Use upper and lower case
• Use normal conventions
• Caption names should be as brief as possible
• Use only meaningful abbreviations
• Captions should be positioned in a ‘natural’ and physically consistent relationship to the corresponding data fields
26
Guidelines on Data Entry
• Explicit entry: users should be asked to check data before entry
• Explicit movement between fields: users should be able to use Tab or some other key to move logically and explicitly between fields
• Explicit delete: users should be required to confirm any request for deletion
• Provide undo: whenever possible allow users to go back to a previous state (ie undo their last action/s)
27
Guidelines on Text Presentation
• leave about half the total screen/window blank• every screen/window should be self-contained• there should be an obvious starting point
- usually upper left - then proceed left to right, top to bottom• the same information should be displayed consistently
throughout the application• USE UPPER CASE TO ATTRACT ATTENTION• right-justified text with variable spacing is harder to
read than evenly spaced text with a ragged margin• optimal spacing between lines is equal or slightly
greater than the height of the characters themselves
28
User Guidance
The user guidance system is integrated with the user interface to help users when they need information about the system or when they make some kind of error
User guidance covers:- System messages, including error messages
- Documentation provided for users
- On-line help
The help and message system may be integrated
29
Error Message Design
• 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
30
e.g. Medical Record / Patient Entry
Please type the patient name in the box then click on OK
Bates, J.
OK Cancel
31
Good and Bad Error Responses
32
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
Should not simply be an on-line manual- Screens or windows don't map well onto paper pages.
People are not so good at reading text on a screen as they are text on paper The dynamic characteristics of the display can improve information presentation.
33
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.
34
User Interface Evaluation
Some evaluation of a user interface design should be carried out to assess its suitabilityIdeally, an interface should be evaluated against a useability specification. However, it is rare for such specifications to be produced Full scale evaluation is very expensive and impractical for most systemsBut you can start your interface evaluation by using
1. Interface design principles2. Useability attributes3. User scenarios
35
Key Points
• Interface design should be user-centred. An interface should be logical and consistent and help users recover from errors
• Menu systems are good for casual or occasional system users
• Graphical displays should be used to present trends and approximate values. Digital displays when precision is required
• Colour should be used sparingly and consistently
36
More Key Points
• Systems should provide on-line help. This should include “help, I’m in trouble” and “help, I want information”
• Error messages should be positive rather than negative.
• A range of different types of user documents should be provided
• A user interface should always be evaluated, ideally against a useability specification