hci user interface. what is an interface? the place at which independent and often unrelated systems...
TRANSCRIPT
HCI
User Interface
What is an interface?
the place at which independent and often unrelated systems meet and act on or communicate with each other.
— Meriam-Webster
Designing effective interfaces for software systems
The Interaction
interaction models translations between user and system
ergonomics physical characteristics of interaction
interaction styles the nature of user/system dialog
context social, organizational, motivational
interaction design basics
design: what it is, interventions, goals, constraints
the design process what happens when
users who they are, what they are like …
scenarios rich stories of design
navigation finding your way around a system
iteration and prototypes never get it right first time!
Why do we remember only the bad?
A good interface should be transparent Bad interfaces cause user frustration
“What was this product designer thinking?”
GOOD BAD
What Is “Design” in HCI? • It is a process:—a goal-directed problem solving activity informed by intended use, target domain, materials, cost, and feasibility
—a creative activity—a decision-making activity to balance trade-offs
• It is a representation:—a plan for development—a set of alternatives & successive elaborations
what is design?
achieving goals within constraints
goals - purpose who is it for, why do they want it
constraints materials, platforms
trade-offs
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
The First Graphical User Interfaces
XEROX’s GUI (1981)
Microsoft’s Window (1985)
Apple Computer’s Lisa GUI (1983)
A Brief History of User Interfaces
Batch-processing No interactive capabilities All user input specified in advance (punch cards, ...) All system output collected at end of program run
(printouts,...) -> Applications have no user interface component
distinguishable from File I/O Job Control Languages (example: IBM3090–JCL,
anyone?): specify job and parameters
A Brief History of User Interfaces Time-sharing Systems
Command-line based interaction with simple terminal Shorter turnaround (per-line), but similar program
structure Example: still visible in Unix commands
Full-screen textual interfaces Shorter turnaround (per-character) Interaction starts to feel "real-time" -> Applications receive UI input and react immediately
in main "loop" (threading becomes important)
A Brief History of User Interfaces
Menu-based systems Discover "Read & Select" over "Memorize & Type"
advantage Still text-based! Example: UCSD Pascal Development Environment -> Applications have explicit UI component But: choices are limited to a particular menu item at
a time (hierarchical selection)
A Brief History of User Interfaces
Graphical User Interface SystemsFrom character generator to bitmap display Pointing devices in addition to keyboard
-> Event-based program structureMost dramatic paradigm shift for application
developmentUser is "in control"Application only reacts to user (or system)
eventsEvent handling
GUI characteristics
Characteristic DescriptionWindows Multiple windows allow different information to be
displayed simultaneously on the user’s screen.Icons Icons different types of information. On some systems,
icons represent files; on others, icons representprocesses.
Menus Commands are selected from a menu rather than typedin a command language.
Pointing A pointing device such as a mouse is used for selectingchoices from a menu or indicating items of interest in awindow.
Graphics Graphical elements can be mixed with text on the samedisplay.
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
Graphical User Interface (GUI)Standard elements in GUI based direct
manipulationBitmapped screenWIMP
Windows Icon Menus Pointers
Graphical User Interface (GUI)
Standard elements in GUI based direct manipulation
WIMP Windows
Multiple windows Tiled vs. overlapping Reduce and restore Move Resize Scroll contents
Icons
small picture or image represents some object in the interface
often a window or actionwindows can be closed down (iconised)
small representation if many accessible windows
icons can be many and various highly stylized realistic representations.
19
Icons
Icons get used for lots of different things Representing objects
Files Tools
Representing commands Open Undo ..often shortcuts to menu commands that have no icon
20
Icons
There are guidelines for these too Apple:
Design and composition should indicate purpose Perspective should agree with real-life interactions Differentiate them from other UI elements
Microsoft: Colors that complement the XP design Perspective is either at a certain angle, or straight-on Everyday objects should look modern
21
Microsoft Icon Composition
Exceptions: Document icons Symbols such as warning Single objects Objects not recognizable at an angle
22
Apple Icon Composition
Icon “genres” Application: media (paper) and tool (pen) Utility: straight perspective, subdued colors ..also document, plug-in, toolbar
Dialog Styles
Q & A Old style. Used with setup. Answer selected (menu).
Graphical User Interface (GUI)
Standard elements in GUI based direct manipulation
WIMP Pointers
Property sheets/dialogue boxes Check box Selection / radio buttons Fill-in blanks
Pallets Tool bars etc.
Pointers important component
WIMP style relies on pointing and selecting things uses mouse, trackpad, joystick, trackball, cursor
keys or keyboard shortcuts wide variety of graphical images
Graphical User Interface (GUI)
Standard elements in GUI based direct manipulation
WIMP Menus Pull-down (from bar or top) Pop-up/contextual (from item)
Menus Set of options displayed on the screen Options visible
less recall - easier to use rely on recognition so names should be meaningful
Selection by: numbers, letters, arrow keys, mouse combination (e.g. mouse plus accelerators)
Often options hierarchically grouped sensible grouping is needed
Restricted form of full WIMP system
Menu Selection
Menus Choice of operations or services offered on the screen Required option selected with pointer
problem – take a lot of screen space
solution – pop-up: menu appears when needed
File Edit Options
Typewriter Screen Times
Font
Kinds of Menus Menu Bar at top of screen (normally), menu
drags down pull-down menu - mouse hold and drag down menu drop-down menu - mouse click reveals menu fall-down menus - mouse just moves over bar!
Contextual menu appears where you are pop-up menus - actions for selected object pie menus - arranged in a circle
easier to select item (larger target area) quicker (same distance to any option)
… but not widely used!
Buttons
individual and isolated regions within a display that can be selected to invoke an action
Special kinds radio buttons
– set of mutually exclusive choices check boxes
– set of non-exclusive choices
32
Push ButtonsYou click it, and something happensChoose the title text carefully
Apple: “Button names should be verbs that describe the
action performed”Microsoft:
“Aim for the shortest possible label; one word is best.”
“If possible, use label text that makes sense when read out of context — for example, when a user reads or hears only the label of the current control.”
33
Layout
34
Layout
Apple has a program called Interface Builder which automatically helps you use the correct spacing
35
Layout
Toolbars
long lines of icons …… but what do they do?
fast access to common actions
often customizable: choose which toolbars to see choose what options are on it
Dialogue boxes
information windows that pop up to inform of an important event or request information.
e.g: when saving a file, a dialogue box is displayed to allow the user to specify the filename and location. Once the file is saved, the box disappears.
Screen design
use boxes to group logical items use fonts for emphasis, headings but not too many!!
ABCDEFGHIJKLMNOPQRSTUVWXYZ
User interface design process
Executableprototype
Designprototype
Produce paper-based design
prototype
Producedynamic design
prototype
Evaluate designwith end-users
Implementfinal userinterface
Evaluate designwith end-users
Analyse andunderstand user
activities
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
User interface design principlesPrinciple DescriptionUser familiarity The interface should use terms and
concepts which are drawn from theexperience of the people who will make mostuse of the system.
Consistency The interface should be consistent in that,wherever possible, comparable operationsshould be activated in the same way.
Minimal surprise Users should never be surprised by thebehaviour of a system.
Recoverability The interface should include mechanisms toallow users to recover from errors.
User guidance The interface should provide meaningfulfeedback when errors occur and providecontext-sensitive user help facilities.
User diversity The interface should provide appropriateinteraction facilities for different types ofsystem user.
UI implementationConsole applications (CUI’s)
Command-line and natural language interfaces
Interaction devises (input & output devises)User interfaces for virtual environments
Graphical User Interfaces (GUI’s)Window systems, toolkits, frameworksGUI builders
Interaction styles
Direct manipulation Menu selection Form fill-in Command language Natural language
Direct manipulation advantages
Users feel in control of the computer and are less likely to be intimidated by it
User learning time is relatively short Users get immediate feedback on their
actions so mistakes can be quickly detected and corrected
Direct manipulation problems
The derivation of an appropriate information space model 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
Control panel interface
Title
Method
Type
Selection
NODE LINKS FONT LABEL EDIT
JSD. example
JSD
Network
Process
Units
Reduce
cm
Full
OUIT
Grid Busy
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
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
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
Form-based interface
Title
Author
Publisher
Edition
Classification
Date ofpurchase
ISBN
Price
Publicationdate
Number ofcopies
Loanstatus
Orderstatus
NEW BOOK
Command interfaces
User types commands to give instructions to the system e.g. UNIX
May be implemented using cheap terminals. 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
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 line interfaceWay of expressing instructions to the
computer directly function keys, single characters, short
abbreviations, whole words, or a combinationExact spellingsuitable for repetitive tasksbetter for expert users than novicesoffers direct access to system functionalitycommand names/abbreviations should be
meaningful!Hard to rememberTypical example: the Unix system
Linux/UNIX:Shell Command Language
Windows XP “DOS” Shell Command Language
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
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
Interface
User interfaces handle inputs and outputs that involve the system user directly
Interactions with the user and computer (HCI) can be modeled with dialog designs
User-interface design occurs in each iteration
Well, “…it could be better …”
“Better …”
Three dimensional interfacesvirtual reality ‘ordinary’ window systems
highlighting visual affordance indiscriminate use
just confusing!3D workspaces
use for extra virtual space light and occlusion give depth distance effects
flat buttons …
… or sculptured
click me!
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
Dynamic information display
1
3
4 20 10 20
Dial with needle Pie chart Thermometer Horizontal bar
Data visualisation Concerned with techniques for displaying large
amounts of information Visualisation can reveal relationships between
entities and trends in the data Possible data visualisations are:
Weather information collected from a number of sources
The state of a telephone network as a linked set of nodes
Chemical plant visualised by showing pressures and temperatures in a linked set of tanks and pipes
A model of a molecule displayed in 3 dimensions Web pages displayed as a hyperbolic tree
Conceptual model
Need to first think about how the system will appear to users (i.e. how they will understand it)
A conceptual model is a high level description of: “the proposed system in terms of a set of
integrated ideas and concepts about what it should do, behave and look like, that will be understandable by the users in the manner intended”
Conceptual Model Model of the product that the designer wants the
user to understand. Designer’s view of the product.
Expressed in terms of the concepts of the intended user’s task domain Data and how, when, where it will be used. In most cases, this is NOT an interface drawing.
Explains the function of the software and what people need to be aware of in order to use it.
Brief History
meteorological CM’s first appeared in early 1990’s
since then, many have been identified and described in various literature
1996 – “Manual of Synoptic Satellite Meteorology – Conceptual Models” started by the Austrian Meteorological Institute (ZAMG)
Two Views of Function
User versus Designer
Iterative Design Overview
Models &Specifications
Demos & Products
User Requirements
Design, Conceptual & Physical
Prototyping & Construction
Evaluation & Feedback
1. Object/Action Analysis
Define all of the objects. Nouns.
Define all of the actions. Verbs
2. Lexicon or Ontology
Ontology A common vocabulary for a specific domain. Learn the users’ vocabulary and introduce yours. Agree upon a common use of terms.
3. Scenarios Task Scenarios
Scenario development Participatory vs. Designer (Conceptual Model)
Participatory Users are involved in the design of the scenarios.
Designer based scenarios Designer uses conceptual model to develop scenarios. Conceptual Model = Mental Model???
3. Scenarios: System Model
Physical, perceptual, and conceptual aspects of the user interface
Prototyping & Construction
• What is a prototype? • Why prototype?• Low vs. high fidelity prototyping• Compromises in prototyping• Vertical vs. horizontal
• Construction• Evolutionary vs. throwaway prototype
What is a prototype?
Limited representation of a product design• Scale models, etc.• In interaction design it can be (among other things):• a series of screen sketches• a storyboard, i.e. a cartoon-like series of scenes • a piece of software with limited functionality
Sketching
• Core skill for most low-fidelity prototyping• Not about drawing ability! Simple symbols• Cruder sketch will emphasize conceptual design
over superficial, physical design
Storyboards
• Storyboards often used with scenarios, bringing detail and a chance to role play
• Series of scene sketches showing user progression through a task flow
• Series of screenshots illustrating use caseCheckout: Product List, Shipping, Payment, Confirmation
Physical Design Conceptual design abstractly describes
system’s intended behavior ATM should authenticate user ID and allow user to
withdraw cash on command Physical design addresses specific, concrete
layout and design issues ATM should have a card reader slot, a 10 digit
keypad for users to enter a PIN number, a touch screen monitor with a menu of command options and a mechanical reel for dispensing increments of $20 bills
Specific Widget Guidelines Menu Design
Common functions should be easiest to reach >8 options is too much, grouping to organize Opposite and dangerous operators should be
physically separated to avoid accidents
Icon Design Takes time to develop a good one Immediately recognizable (small and simple) Easily distinguishable from others More important than being very descriptive
Interaction Modes
Activity-based Instructing Conversing Manipulating
& Navigating Exploring
& Browsing Object-based
Interaction Modes
Activity-based Instructing Conversing Manipulating
& Navigating Exploring
& Browsing Object-based
Good Designs => Usable Systems
Work the way the user thinks they should Allows the user to focus on task at hand
and not worry about the underlying technology and interaction technology
Minimize user errorsPromote user satisfaction (users should
feel that they are accomplishing more with the system than without the system)
Graphical RepresentationFrom the design point of view
Screen two-dimensional Objects two-dimensional/three-dimensional Representation of 2D objects on a 2D screen
Straightforward graphics is enough Representation of 3D objects on a 2D screen
Required special techniquesHuman vision psychology is required to be
considered
Four basic activities There are four basic activities in Interaction Design:
1. Identifying needs and establishing requirements2. Developing alternative designs3. Building interactive versions of the designs4. Evaluating designs
Some practical issues
• Who are the users?
• What are ‘needs’?
• Where do alternatives come from?
• How do you choose among alternatives?
What are the users’ capabilities? Humans vary in many dimensions: — size of hands may affect the size and positioning of input buttons
— motor abilities may affect the suitability of certain input and output devices
—strength - a child’s toy requires little strength to operate, but greater strength to change batteries
— disabilities(e.g. sight, hearing, dexterity)
What are ‘needs’?• Users rarely know what is possible• Users can’t tell you what they ‘need’ to help them achieve
their goals • Instead, look at existing tasks:
– their context– what information do they require?– who collaborates to achieve the task?– why is the task achieved the way it is?
• Envisioned tasks:
– can be rooted in existing behaviour– can be described as future scenarios
What is interaction design?
Designing interactive products to support people in their everyday and working lives
Sharp, Rogers and Preece (2002)
The design of spaces for human communication and interaction
Winograd (1997)
Testing prototypes to choose among alternatives
Many kinds of interaction styles available…
Command line interface Speech Data-entry Form fill-in Query Graphical Web Pen Augmented reality three–dimensional interfaces
Web-based interfaces
Many web-based systems have interfaces based on web forms.
Form field can be menus, free text input, radio buttons, etc.
In the LIBSYS example, users make a choice of where to search from a menu and type the search phrase into a free text field.
LIBSYS search form
LIBSYS: Search
Choose collection
Keyword or phrase
Search using
Adjacent words
Search Reset Cancel
All
Title
Yes No
physical controls
grouping of items defrost settings
type of food
time to cook11type of food
time to cook
defrost settings
physical controls
grouping of items
order of items
4
4) start2
2) temperature
3
3) time to cook
11) type of heating
physical controls
grouping of items
order of items
decoration
different colours for different functions
lines around related buttons (temp up/down)
physical controls
grouping of items
order of items
decoration
alignment
? easy to scan ?
centred text in buttons
physical controls
grouping of items
order of items
decoration
alignment
white space
gaps to aid grouping
alignment - text
you read from left to right (English and European)
align left hand side
Willy Wonka and the Chocolate FactoryWinston Churchill - A BiographyWizard of OzXena - Warrior Princess
Willy Wonka and the Chocolate FactoryWinston Churchill - A Biography
Wizard of OzXena - Warrior Princess
fine for special effects but hard to scan
boring butreadable!
multiple columns
scanning across gaps hard:(often hard to avoid with large data base fields)
sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85
multiple columns - 2
use leaders
sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85
multiple columns - 3
or greying (vertical too)
sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85
colour and 3D both often used very badly! colour
older monitors limited palette colour over used because ‘it is there’ beware colour blind! use sparingly to reinforce other information
3D effects good for physical information and some graphs but if over used …
e.g. text in perspective!! 3D pie charts
bad use of colour
over use - without very good reason (e.g. kids’ site)
colour blindness poor use of contrast do adjust your set!
adjust your monitor to greys only can you still read your screen?
Example : Color Stereoscopy
Example : Text Stand Out
Example: One Color
Example: Two Colors
Example: Three Colors
Example: Four Colors
Text & ColorsWhat materials to present as spoken vs. text?
“less text is normally more effective”Text presentation
Number of fonts– one or two E.g., stick with Times New Roman, or stick with
New Century Schoolbook Don’t overuse bold, italics, underline etc. Spell check & proof read!
Colors Background– pale colors Foreground– brighter colors Use a small number of colors
Example: One Font
Example: Two Fonts
Example: Three Fonts
Example: Four Fonts
Attention with Structured Information Structure the information so that it is easy
to navigate through Presenting not so much information and not
too little on a screen Instead of arbitrarily presenting data on the
screen, it should be grouped and ordered into meaningful parts Blank space Color Font variations etc.
Attention with Structured Information
Dept Student Hostel Roll CGPA Rank
CS S. Gavaskar VS 7478961 9.56 11 CS R. Shastry MS 7631256 7.98 18 CS M. Amarnath JCB 7540343 8.12 19 CS M. Azaharuddin NH 7739434 8.55 16 CS Kapil Dev AH 7658522 9.01 15 CS S. Kirmani VS 7467615 7.21 23
IT S. Tendulkar HJB 9634232 9.45 12 IT R. Dravid VS 9944144 9.11 13 IT S. Ganguly VS 9854053 8.99 14 IT Irphan Pathan MS 9969565 7.23 17 IT Zahir Khan JCB 9978571 7.30 20
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 wording
Context The user guidance system should be aware of what the user isdoing and should adjust the output message to the currentcontext.
Experience As users become familiar with a system they become irritatedby long, ‘meaningful’ messages. However, beginners find itdifficult to understand short terse statements of the problem.The user guidance system should provide both types of messageand allow the user to control message conciseness.
Skill level Messages should be tailored to the user’s skills as well as theirexperience. Messages for the different classes of user may beexpressed in different ways depending on the terminology whichis familiar to the reader.
Style Messages should be positive rather than negative. They shoulduse the active rather than the passive mode of address. Theyshould never be insulting or try to be funny.
Culture Wherever possible, the designer of messages should be familiarwith the culture of the country where the system is sold. Thereare distinct cultural differences between Europe, Asia andAmerica. A suitable message for one culture might beunacceptable in another.
Nurse input of a patient’s name
Please type the patient name in the box then click ok
Bates , J.
OK Cancel
System and user-oriented error messages
Error #27
Invalid patient id entered?OK Cancel
Patient J . Bates is not registered
Click on Patients for a list of registered patientsClick on Retry to re-input a patient nameClick on Help for more information
Patients Help Retry Cancel
System-oriented error messageUser-oriented error message
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 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.
Entry points to a help system
Help frame network
Top-levelentry
Entry from errormessage system
Entry fromapplication
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
Document types
Functional description Brief description of what the system can do
Introductory manual Presents an informal introduction to the system
System reference manual Describes all system facilities in detail
System installation manual Describes how to install the system
System administrator’s manual Describes how to manage the system when it is in use
Example Visionary approaches for developing novel
conceptual paradigms