user interface design l.
Skip this Video
Loading SlideShow in 5 Seconds..
User interface design PowerPoint Presentation
Download Presentation
User interface design

Loading in 2 Seconds...

play fullscreen
1 / 89

User interface design - PowerPoint PPT Presentation

  • Uploaded on

User interface design Designing effective interfaces for software systems 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

I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
Download Presentation

User interface design

An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.

- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
user interface design
User interface design
  • Designing effective interfaces for software systems
the user interface
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
importance of user interface
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


benefits of good design
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.


graphical user interfaces
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
gui characteristics
GUI characteristics
  • Windows
  • Icons
  • Menus
  • Pointing
  • Graphics
gui advantages
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
user centred design
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
15 1 ui design principles
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 people’s 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
nielsen s ten usability heuristics
Nielsen’s 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


galitz s heuristics table 14 2
Galitz’s Heuristics (Table 14.2)
  • 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


galitz s www heuristics
Galitz’s WWW Heuristics
  • Speak the user’s language
  • Be consistent
  • Minimize the user’s memory load
  • Build flexible and efficient systems
  • Design aesthetic and minimalist systems
  • Use chunking
  • Provide progressive levels of detail
  • Give navigational feedback
  • Don’t lie to the user


15 2 user system interaction
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
interaction styles
Interaction styles
  • Direct manipulation
  • Menu selection
  • Form fill-in
  • Command language
  • Natural language
direct manipulation advantages
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
direct manipulation problems
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
direct manipulation applications
Direct Manipulation Applications
  • Games
  • CAD systems
  • Files and Folders
menu systems
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
advantages of menu systems
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 user’s context is indicated by the current menu selection
problems with menu systems
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
menu system applications
Menu System Applications
  • Most general purpose systems
forms based systems advantages
Forms-based Systems Advantages
  • Simple data entry
  • Easy to learn
forms based systems disadvantages
Forms-based Systems Disadvantages
  • Takes up a lot of screen space
forms based systems applications
Forms-based Systems Applications
  • Most systems involving significant data entry
command interfaces
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
problems with command interfaces
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
command languages
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
natural language interfaces
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
15 3 information presentation
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
information presentation34
Information presentation
  • Static information
    • Initialised at the beginning of a session. It does not change during the session
    • May be either numeric or textual
  • Dynamic information
    • Changes during a session and the changes must be communicated to the system user
    • May be either numeric or textual
information display factors
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?
analogue vs digital presentation
Analogue vs. digital presentation
  • Digital presentation
    • Compact - takes up little screen space
    • Precise values can be communicated
  • Analogue presentation
    • Easier to get an 'at a glance' impression of a value
    • Possible to show relative values
    • Easier to see exceptional data values
data visualisation
Data visualisation
  • Concerned with techniques for displaying large amounts of information
  • Visualisation can reveal relationships between entities and trends in the data
15 3 1 colour displays
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
colour use guidelines
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
15 4 user support
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
error messages
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
design factors in message wording47
Design factors in message wording
  • Context
  • Experience
  • Skill Level
  • Style
  • Culture
system and user oriented error messages
System and user-oriented error messages

System-oriented error message



or #27



alid patient id entered



user oriented error messages
user-oriented error messages

User-oriented error message


atient J


Bates is not registered


k on P

atients f

or a list of registered patients


k on Retr

y to re-input a patient name


k on Help f

or more inf









help system design
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
help information
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 – don’t overwhelm user
help system use
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
help on www
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 doesn’t know context where you needed help – cannot provide context sensitive help
5 4 3 user documentation
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
15 5 user interface evaluation
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
things to test
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
  • Subjective user satisfaction


system user interface design goals
…System - User Interface Design Goals
  • 5 human factors central to community evaluation:
    • 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


objective measures of usability
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


simple evaluation techniques
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.
kinds of tests
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


elements of discount usability engineering
Elements of Discount Usability Engineering
  • Scenarios
  • Simplified Thinking Aloud
  • Heuristic Evaluation


  • 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


simplified thinking aloud
Simplified Thinking Aloud
  • Bring in some users, give them tasks, have them think out loud
  • Fewer users in user testing


heuristic evaluation
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


how to conduct a heuristic evaluation
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


norman s four principles of good design
Norman’s 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
galitz s principles of user interface design
Galitz’s Principles of User Interface Design
  • To follow … alphabetically (following book)
aesthetically pleasing
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
  • Visual elements
  • Functions
  • Metaphors
  • Words and text
  • With the user
  • With the task and job
  • With the product (past systems)
  • 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
  • Users should be able to set preferences
  • Good Default Settings should be provided for non-tinkerers
  • One of Shneiderman’s 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
  • 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 user’s perspective
  • More than one way to do things
  • Avoid modes
  • Configurable
  • 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
  • Minimize eye and hand movements
    • Make user actions flow from one to another
    • Don’t switch users frequently from keyboard to mouse
  • Anticipate users wants and needs whenever possible
  • Use language and concepts familiar to the user
  • Keep the interface natural
  • Use real world metaphors
  • compatible with the user’s “skills, experience, habits, and preferences, and current conditions”
  • Danger: more flexibility increases complexity of system
  • 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
  • User should be able to anticipate the flow of the task
  • Expectations should be fulfilled
  • System should permit:
    • Commands or actions to be abolished or reversed
    • Immediate return to a certain point if difficulties arise
  • Users should never lose work due to:
    • An error on their part
    • Hardware, software, or communication problems
  • Respond rapidly to user requests
  • Provide acknowledgement of user actions
  • Beginners need more / more informative feedback than experts do
  • Provide as simple an interface as possible
    • Progressive disclosure
    • Defaults
    • Minimize screen alignment points
    • Make common actions simple
    • Provide consistency
  • Allow user to focus on the task, not the interface
    • Basic principle of direct manipulation
    • Use user’s task vocabulary
    • Design interface based on task analysis
trade offs
  • Final Design will always represent a series of trade-offs
  • People’s requirements always take precedence over technical requirements