design principles - eindhoven university of technology · • design principles: – design the...
TRANSCRIPT
"Design of user interfaces" design principles
TU/e 1
© M. Rauterberg, 2005 JFS-USI Primer-4 1/68
Design Principles
Matthias RauterbergGOOGLE: rauterberg
2005
© M. Rauterberg, 2005 JFS-USI Primer-4 2/68
Benefit
knowledge and experiences in application domain
low high
textualrepresentation
visual rperesentation
concreterepresentation
high
low
"Design of user interfaces" design principles
TU/e 2
© M. Rauterberg, 2005 JFS-USI Primer-4 3/68
Information types
physical
conceptual
static
dynamic
static
dynamic
States person sleepingdescriptive features of a computerrelationships similarity between twinsspatial dimensions of a room
discrete action switch light oncontinuous action ski turnevents start of a raceprocedural repair photocopiercausal how an engine works
states evidence is uncertaindescriptive person’s beliefrelationships classes of religious beliefvalues prime numbers
discrete action choosing to agree/disagreecontinuous action monitoring successprocedural diagnosing a faultcausal explanation of gravity
© M. Rauterberg, 2005 JFS-USI Primer-4 4/68
Media selection and combinationInformation type Preferred media selection Example
Physical Realistic still or moving image Photo of a person
Conceptual Text or speech, designed image Explain sales policy
Descriptive Text, speech, realistic image Chemical properties
Spatial Realistic/designed image Diagram of a building
Value Text/tables/numeric list(s) Pressure reading
Relationship Designed images, graphs, charts Histogram of rainfall/month
Procedural Image series, text Evacuation instructions
Discrete action Still image Make coffee
Continuous action Moving image Monoeuvres while skiing
Events Sound, speech Fire alarm
States Still images, text Photo of weather conditions
Causal Still & moving image, text, speech Video of rainstorm causing flash flood
"Design of user interfaces" design principles
TU/e 3
© M. Rauterberg, 2005 JFS-USI Primer-4 5/68
Examples for media designrepresentational abstract
visual
• concrete
• signified
picture, e.g.
symbol, e.g.
speed –> speedometer,e.g.
danger –> alarm flasher,e.g.blue light of a police car
auditory• verbal
• spatial
speech, e.g."Stop the machine!"
onomatopoeia and mimic,e.g. event generatedsound pattern
speech, e.g."Attention, please!"
tone, e.g.beep-beep-beep…
Rauterberg, M. (1998). About the importance of auditory alarms during the operation of a plant simulator. Interacting with Computers, Vol. 10, No. 1, pp. 31-44.
© M. Rauterberg, 2005 JFS-USI Primer-4 6/68
The Concept of Perceptual Attractors
• To guide the users attention on the interface, each visual attractor (=any separate perceivable structure) is of crucial importance, so use them carefully in your design to avoid not intended distractions.
• Consequence: you will end up with a slim design!
See also 1998 by Robert Dilts., Santa Cruz, CA.
"Design of user interfaces" design principles
TU/e 4
© M. Rauterberg, 2005 JFS-USI Primer-4 7/68
A design concept for visual attractors
© M. Rauterberg, 2005 JFS-USI Primer-4 8/68
Historical Trends for Icon Design
• Four different levels of abstraction can be found over the last 80 years.
• Actual icons get more abstract compared to the past.
"Design of user interfaces" design principles
TU/e 5
© M. Rauterberg, 2005 JFS-USI Primer-4 9/68
An Icon Set for Different Sports
Exercise:try to find out the different kind of sport represented by each icon.
© M. Rauterberg, 2005 JFS-USI Primer-4 10/68
An Icon Set for a Way-finding System
"Design of user interfaces" design principles
TU/e 6
© M. Rauterberg, 2005 JFS-USI Primer-4 11/68
The Meaning of Icons• The numbers in the
table mean the percentage of all collected answers; each intended answer is underlined.
• [see Caron, J.P., Jamieson, D.G. & Dewar, R.E.: Evaluating pictograms using semantic differential and classification technique. Ergonomics 23(2), 1980, p. 142]
© M. Rauterberg, 2005 JFS-USI Primer-4 12/68
The Icon Set for Marshalling Signals
• [ redrawn from Henry Dreyfuss, Symbol Sourcebook (New York, 1972), p. 152]
• See the wonderful analysis of this icon set and the recommended redesign in the marvelous book of Edward R. Tufte(Envisioning Information, 1990, Graphics Press) on page 63.
"Design of user interfaces" design principles
TU/e 7
© M. Rauterberg, 2005 JFS-USI Primer-4 13/68
Redesign of Icons (1)
• Design Principle:– avoid excessive
detail in icon design.
• [see Deborah J. Mayhew, Principles and Guidelines in Software User Interface Design (1992) pp.316-331]
© M. Rauterberg, 2005 JFS-USI Primer-4 14/68
Redesign of Icons (2)
• Design Principles:– design the icons to
communicate object relations and attributes whenever possible;
– accompany icons with names.
• [see Deborah J. Mayhew, Principles and Guidelines in Software User Interface Design (1992) pp.316-331]
"Design of user interfaces" design principles
TU/e 8
© M. Rauterberg, 2005 JFS-USI Primer-4 15/68
Design of Road-Signs (1)
• Based on the concept of Natural Mapping (see the book of Donald Norman, The psychology of every day things) the road-sign is realized.
• The exception is the order of the city names on top of the sign: first the most nearby city, and then the more fare away locations.
© M. Rauterberg, 2005 JFS-USI Primer-4 16/68
Design of Road-Signs (2)• The sign above is
following the concept of natural mapping.
• The sign below is mis-designed, because the whole shape is indicating a turn to the left.
"Design of user interfaces" design principles
TU/e 9
© M. Rauterberg, 2005 JFS-USI Primer-4 17/68
Dynamic in a static picture (1)
• The right picture is more dynamic than the left caused by the oversized ball
© M. Rauterberg, 2005 JFS-USI Primer-4 18/68
Dynamic in a static picture (2)
• The right picture is more dynamic than the left caused by the tilted frame
"Design of user interfaces" design principles
TU/e 10
© M. Rauterberg, 2005 JFS-USI Primer-4 19/68
Dynamic in a static picture (3)
• Breaking through the frame increases the perception of dynamics
© M. Rauterberg, 2005 JFS-USI Primer-4 20/68
Dynamic in a static picture (4)
"Design of user interfaces" design principles
TU/e 11
© M. Rauterberg, 2005 JFS-USI Primer-4 21/68
The Power of the Center• [see the book of Rudolf Arnheim, 1982, The power
of the center--a study of composition in the visual arts. University of California Press]
• Results of an eye recording experiments: the area in the center (see the figure) covers 13% of the total screen area, but captures 26% of 220’000 fixation points of users looking at different screens of these size.
• Results of a mock-up study: the central hot spot area (one of four hot spots = 25%; see next slide) captures 38% of all touch downs of different users.
© M. Rauterberg, 2005 JFS-USI Primer-4 22/68
Implicit Design for a Multimedia Information System
"Design of user interfaces" design principles
TU/e 12
© M. Rauterberg, 2005 JFS-USI Primer-4 23/68
Explicit versus Implicit Design
• This design concept for a specific screen of the hypercard stack “InigoGets Out” is based on explicit design: only two buttons are used for navigation (--> forward, <-- backward).
Goodenough, Amanda. 1987. “Inigo Gets Out.”
© M. Rauterberg, 2005 JFS-USI Primer-4 24/68
Implicit Design: screen from “Inigo Gets Out”
• This screen is based on implicit design and has a second-person perspective: to get the cat to run to the right, you click on the cat itself. The actual image from “Inigo Gets Out” has been overlaid with data (the click markers) from a field study of the use of the system in a Copenhagen kindergarten.
• [see in the book of Jakob Nielsen, HyperText & HyperMedia, 1990, Academic Press, p. 136]
"Design of user interfaces" design principles
TU/e 13
© M. Rauterberg, 2005 JFS-USI Primer-4 25/68
Explicit Screen Design
Rauterberg, M., Berny, P., Lordong, G., Schmid, A., Zemp, M., Zürcher, T. (1995). Designing multi media user interfaces with eye recording data. In: A. Grieco, G. Molteni, E. Occhipinti & B. Piccoli (eds.), Work with Display Units--WWDU'94 (pp. 265-270). Amsterdam: North-Holland.
© M. Rauterberg, 2005 JFS-USI Primer-4 26/68
Implicit Screen Design
"Design of user interfaces" design principles
TU/e 14
© M. Rauterberg, 2005 JFS-USI Primer-4 27/68
Corrective Design
To motivate users to switch from explicit to implicit an additional explicit instruction is necessary: “Tippen Sie auf eines der EC-Symbole”
© M. Rauterberg, 2005 JFS-USI Primer-4 28/68
Corrective Design• One major problem
of a mixed style (explicit plus implicit) is that nearly all users are not able to switch from the buttons (explicit) to the picture with touch sensitive areas (implicit).
• To overcome this problem an extra explicit instruction is necessary: “WaehlenSie die gewuenschte Region durch Beruehren”
button area
"Design of user interfaces" design principles
TU/e 15
© M. Rauterberg, 2005 JFS-USI Primer-4 29/68
First golden ruleAll things on earth have the tendency to fall down!
© M. Rauterberg, 2005 JFS-USI Primer-4 30/68
Second golden rule
• horizon– the horizon is always
lighter than the ground
• ground– the ground is always
darker than the horizon
"Design of user interfaces" design principles
TU/e 16
© M. Rauterberg, 2005 JFS-USI Primer-4 31/68
Third golden rule
• The Top– All good, strong and
important things are at the top (e.g., God in heaven, the king, the boss, etc.).
• The Bottom– All small, weak and
unimportant things are at the bottom line.
© M. Rauterberg, 2005 JFS-USI Primer-4 32/68
Fourth golden rule
• Perception Space– The physical space where
the user’s attention is.
• Action Space– The physical space where
the user acts in.
• Design Principle:– perception space and action
space must coincide!
Rauterberg, M., Steiger, P. (1996). Pattern recognition as a key technology for the next generation of user interfaces. In: Proceedings of IEEE International Conference on Systems, Man and Cybernetics--SMC'96 (Vol. 4, IEEE Catalog Number: 96CH35929, pp. 2805-2810). IEEE.
"Design of user interfaces" design principles
TU/e 17
© M. Rauterberg, 2005 JFS-USI Primer-4 33/68
Fifth golden rule
Affordances are perceived and actual properties of an object that suggests how the object should be used in line with user’s expectations.Affordances originate from a variety of object properties:
material: opacity, transparency, firmness, reflectivity
shape: roundness, holes, handles
size: hand-sized, person-sized, miniaturized
texture: roughness, smoothness, contours (i.e. "organic"), softness
color: brightness, dullness, glossiness
© M. Rauterberg, 2005 JFS-USI Primer-4 34/68
The Concept of Natural Mappings
• Definition [see Norman, D., 1988, p. 75ff]:
– A design solution based on a natural mappings reduces the need for additional explanatory information in memory!
– Natural mappings guarantee a minimum number of cognitive transformation steps.
– If a design depends upon labels, it may be faulty. Labels are important and often necessary, but the appropriate use of natural mappings can minimize the need for them. Wherever labels seem necessary, consider another design!
"Design of user interfaces" design principles
TU/e 18
© M. Rauterberg, 2005 JFS-USI Primer-4 35/68
Design of Light Switch Panels (1)• Problem:
– no direct mapping between switches and corresponding lamps
© M. Rauterberg, 2005 JFS-USI Primer-4 36/68
Design of Light Switch Panels (2)
"Design of user interfaces" design principles
TU/e 19
© M. Rauterberg, 2005 JFS-USI Primer-4 37/68
Design of Door Handles
© M. Rauterberg, 2005 JFS-USI Primer-4 38/68
Natural Mapping (1)
"Design of user interfaces" design principles
TU/e 20
© M. Rauterberg, 2005 JFS-USI Primer-4 39/68
Natural Mapping (2)
© M. Rauterberg, 2005 JFS-USI Primer-4 40/68
Design of Stove Controls (1)
"Design of user interfaces" design principles
TU/e 21
© M. Rauterberg, 2005 JFS-USI Primer-4 41/68
Design of Stove Controls (2)
Fischer, A. (1999). Intuitive Interfaces.
© M. Rauterberg, 2005 JFS-USI Primer-4 42/68
Interactive Directness: the desktop example
Pull down menus
Pull down menus
Toolbar
"Design of user interfaces" design principles
TU/e 22
© M. Rauterberg, 2005 JFS-USI Primer-4 43/68
action space
perception space
Rauterberg, M., Cachin, C. (1993). Locating the primary attention focus of the user. Lecture Notes in Computer Science, Vol. 733, pp. 129-140.
© M. Rauterberg, 2005 JFS-USI Primer-4 44/68
Head-up Displays in Cars• More information and less
distractionInformation on the state of the road, on the speed of the vehicle in front (supplied by the intelligent cruise control), on obstacles lying around the next bend in the road identified by the remote detection system, or direction arrows sent by the driver guidance system... drivers will be receiving more and more information from "intelligent" vehicle systems. Although the information is intended to enhance safe driving, there is a danger that an abundance of information may produce the opposite effect if driver glance-away time has to increase in order to apprehend the data.
"Design of user interfaces" design principles
TU/e 23
© M. Rauterberg, 2005 JFS-USI Primer-4 45/68
Electronic Performance Support System
• Food processing plant worker with a first-generation prototype wearable computer.
• Possible applications include support for quality control data collection or assistance with environmental auditing.
• This system gives its users the information the users need to perform a task as they actually perform the task.
© M. Rauterberg, 2005 JFS-USI Primer-4 46/68
Airline Applications• This remarkable ultra-lightweight
computer, worn as a belt, delivers maximum information to users with a minimum of work.
• Designed for individuals who demand mobility, this computer offers voice control and heads up display for complete, hands-free operation.
• Users can enter or retrieve information while going about their jobs, instead of constantly returning to the shop area to check a stationary computer, or stopping work to punch keys.
"Design of user interfaces" design principles
TU/e 24
© M. Rauterberg, 2005 JFS-USI Primer-4 47/68
Two design principles for natural user interfaces
No technical equipment inside to body space of the user!
2. design principle
Perception space and action space must coincide!
1. design principle
© M. Rauterberg, 2005 JFS-USI Primer-4 48/68
The two different interaction areas
Working Area
Communication & Working Area
Paper document
Electronic documents
Rauterberg, M., Steiger, P. (1996). Pattern recognition as a key technology for the next generation of user interfaces. In: Proceedings of IEEE International Conference on Systems, Man and Cybernetics--SMC'96 (Vol. 4, IEEE Catalog Number: 96CH35929, pp. 2805-2810). IEEE.
"Design of user interfaces" design principles
TU/e 25
© M. Rauterberg, 2005 JFS-USI Primer-4 49/68
The Virtual Workbench
The KOSIMA projectat the TU Aachen
© M. Rauterberg, 2005 JFS-USI Primer-4 50/68
BUILD-IT: an integrative design tool
• design team with different domain knowledge
• unconstrained social interaction
• integration of form and content
• intuitive interaction style
Rauterberg, M., Bichsel, M., Leonhardt, U., Meier, M. (1997). BUILD-IT: a computer vision-based interaction technique of a planning tool for construction and design. In: S. Howard, J. Hammond & G. Lindgaard (eds.), Human-Computer Interaction--INTERACT'97 (pp. 587-588). London: Chapman&Hall.
"Design of user interfaces" design principles
TU/e 26
© M. Rauterberg, 2005 JFS-USI Primer-4 51/68
Actual research goals...
• hand-written input• speech input• two-handed interaction
• new methods and concepts for integrative design
© M. Rauterberg, 2005 JFS-USI Primer-4 52/68
Design Metaphors
Channel
Tool
Substitute
1000 2000 historyRauterberg M., Salem B., Mortel van de D. (2005). From passive to active forms. In: L. Feijs, S. Kyffin & B. Young (eds.) Design and semantics of form and movements. Koninklijke Philips Electronics N.V., pp. 110-117, ISBN 0-9549587-I-3.
"Design of user interfaces" design principles
TU/e 27
© M. Rauterberg, 2005 JFS-USI Primer-4 53/68
Trends in User Interface Technology
Ubiquitous and Mobile computing Ambient rooms and Cooperative buildings
© M. Rauterberg, 2005 JFS-USI Primer-4 54/68
Ubiquitous Computing
• Two issues are of crucial importance: location and scale
• Location : ubiquitous computers must know where they are
• Inch-scale machines: approximate active Post-It notes
• Foot-scale machines: like a sheet of paper (or a book or a magazine)
• Yard-scale machines: the equivalent of a blackboard or bulletin board
• Prototype tabs, pads and boards are just the beginning of ubiquitous computing
"Design of user interfaces" design principles
TU/e 28
© M. Rauterberg, 2005 JFS-USI Primer-4 55/68
The PalmPilot
• The PalmPilot has a lot functionality.
• This device fits with its pocket size into one hand.
• There is a communication channel via IR to the PC.
• Small, and a reasonable price
© M. Rauterberg, 2005 JFS-USI Primer-4 56/68
Wearable Computer
• Providing hands-free operation
• Sharing the data in real-time with background
• Supporting user comfort
• Allowing audio interactions in a noisy environment
• Creating a simple user interface
• Keeping costs down
"Design of user interfaces" design principles
TU/e 29
© M. Rauterberg, 2005 JFS-USI Primer-4 57/68
The DynaWall and two CommChairs
• The size of the DynaWall opens a new set of human-computer interactions.
• It is possible that information objects can be taken at one position and put somewhere else on the display or thrown from one side to the opposite side.
• Dialog boxes always appear in front of the current user(s).
• User interface components are always at hand, etc.
© M. Rauterberg, 2005 JFS-USI Primer-4 58/68
Home of the Future
• Main characteristics:
• Home automation is defined as a process or system which provides the ability to enhance one's lifestyle, and make a home more comfortable, safe and efficient.
• Home automation can link lighting, entertainment, security, tele-communications, heating and air conditioning into one centrally controlled system.
Bill and Melinda Gates' $97 million house
"Design of user interfaces" design principles
TU/e 30
© M. Rauterberg, 2005 JFS-USI Primer-4 59/68
Office of the Future
• Main characteristics:
• attentive
• active
• adaptive
© M. Rauterberg, 2005 JFS-USI Primer-4 60/68
Design challengeswearable computing intelligent environments
Penetration of the body space
Penetration of the social space
Isolation in immersive virtual worlds
Privacy in augmented worlds
"Design of user interfaces" design principles
TU/e 31
© M. Rauterberg, 2005 JFS-USI Primer-4 61/68
Trend in Interface Design
0
50
100
150
1970-1990 1990-2010 2010-
SW controlsHW controls
© M. Rauterberg, 2005 JFS-USI Primer-4 62/68
time1900 2000
mechanical style
electronic style
mechatronic style
"Design of user interfaces" design principles
TU/e 32
© M. Rauterberg, 2005 JFS-USI Primer-4 63/68
Literature for Visual DesignArt and Visual Perception, a Psychology of the Creative Eye, Rudolf Arnheim, University of California Press, 1974.
The Power of the Center, a Study of Composition in the Visual Arts, Rudolf Arnheim, University of California Press, 1982.
Steps to an Ecology of Mind, Gregory Bateson, Ballantine Books, 1972.
Logic and Design, in Art, Science and Mathematics, Krome Barratt, George Godwin Limited, 1980.
Design in the Visual Arts, Roy Behrens, Prentice Hall, 1984.
Principles of Visual Perception, Carolyn M. Bloomer, Van Nostrand Reinhold Co., 1976.
Primer of Visual Literacy, Donis Dondis, M.I.T. Press, 1973.
The Hidden Order of Art, Anton Ehrenzweig, University of California Press, 1967.
Art and Illusion, a Study in the Psychology of Pictorial Representation, E.H. Gombrich, Princeton University Press,1960.
Illusion in Nature and Art, Gregory and Gombrich, Charles Scribner's and Sons, 1980.
Eye and Brain, R.L. Gregory, McGraw Hill Paperback edition, 1966.
Illusions, edited by Edi Lanner, Holt, Rinehart and Winston, 1973.
The Visual Display of Quantitative Information, Edward R. Tufte, Graphics Press, 1983.
Envisioning Information, Edward R. Tufte, Graphics Press, 1990.
Perception and Photography, Richard D. Zakia, Prentice-Hall Inc., 1975.
© M. Rauterberg, 2005 JFS-USI Primer-4 64/68
References for GuidelinesArticles and Books
•Grudin, Jonathan. "The Case Against User Interface Consistency." Communications of the ACM, October 1989.
•Microsoft Windows User Experience, Official Guidelines for User Interface Developers and Designers. Redmond, WA: Microsoft Press, 1999. (USBN: 0735605661)
Organizations
•ACM Special Interest Group on Computer-Human Interaction (SIGCHI): The largest organization of UI practitioners.
•German HCI Group: A specialist group of the German Computer Society.
•Human Factors and Ergonomics Society.
•Usability Professionals Association: See their consultant directory for contract resources.
Other Online Resources
•Microsoft User Experience and UI Design Resources [http://msdn.microsoft.com/ui/]
•Useit.com [http://www.useit.com/]
"Design of user interfaces" design principles
TU/e 33
© M. Rauterberg, 2005 JFS-USI Primer-4 65/68
ISO TC 159 SC4 Ergonomics of Human System Interaction
WG1 is responsible for ISO 7249 and ISO 9355 which deal with fundamentals of displays and controls rather than HCI.
WGs 2 to 5 are responsible for ISO 9241 (see later slide).
WG 5 is developing a standard dealing with the ergonomics requirements of multi-media interfaces ISO NP 14915 - see later slide.
WG 6 is concerned with how ISO 9241 can be used and with ISO 13407 Human-Centred Design of Interactive Systems.
WG8 is concerned with ISO 11064, (see Table h621-2) on the ergonomics design of control centres, which include process plant control centres, security control centres and other, frequently safety critical control centre applications.
Part 1 Principles for the design of control centres
Part 2 Principles of control suite arrangement
Part 3 Control room layout
Part 4 Workstation layout and dimensions
Part 5 Displays and controls
Part 6 Environmental requirements for control rooms
Part 7 Principles for the evaluation of control centres
Part 8 Ergonomics requirements for specific applications
© M. Rauterberg, 2005 JFS-USI Primer-4 66/68
ISO/IEC JTC1 SC18 WG9 User System Interfaces and Symbols
Joint Technical Committee (JTC1) deals with standards in the field of information technology.
Sub committee 18 (SC18) is responsible for standards for Document Processing and Related Communication.
Working Group 9 is developing standards in keyboard layout, symbols and user interfaces which have relevance beyond the strict domain of document processing.
It has sub-groups working on Keyboard Layout, User Interfaces and Symbols.
ISO/IEC 9995 is a multi-part standard dealing with keyboard layout which replaces a number of existing standards (see Table h621-3). It includes a keyboard layout for multiple Latin alphabet languages and a layout for letters used on a numeric keyboard. It should be noted that WG9 deals with the layout of keyboards, not with the key operation or other ergonomic features which are the responsibility of WG3 of TC 159 SC4.
Part 1 General principles governing keyboard layouts
Part 2 Alphanumeric Section
Part 3 Complementary layout of the alpha-numeric zone of the alpha-numeric section
Part 4 Numeric Section
Part 5 Editing Section
Part 6 Function Section
Part 7 Symbols used to represent functions
Part 8 Numeric zone of the numeric section, allocation of letters
"Design of user interfaces" design principles
TU/e 34
© M. Rauterberg, 2005 JFS-USI Primer-4 67/68
HCI Standards
ISO methods 9241 (ISO 9000 series standards address quality) Ergonomic requirements of VDT - both hardware and software in 17 parts:
Introduction Guidance on task requirements Visual Display requirements keyboard requirements workstation layout and postural requirements environmental requirements display requirements with reflections requirements for displayed coloursrequirements for non-keyboard input devices Dialogue Principles Usability Specification Presentation of Information User Guidance and Help Menu Dialogues Command Dialogues Direct Manipulation Dialogues Form-filling Dialogues
Task Design - ISO 9241-2
The application of ergonomic principles ... is essentially the integration of task design with the design of software -where well designed tasks
•provide for the application of an appropriate variety of skills;
•ensure that the task performed are identifiable as whole units of work rather than fragments
•provide sufficient feedback on task performance in terms meaningful to the user
© M. Rauterberg, 2005 JFS-USI Primer-4 68/68
ISO 14915 Multimedia User Interface Design - Ergonomic Requirements for human-centredmultimedia interfaces
Status
Part 1 Design Principles and Framework DIS
Part 2 Multimedia Control and Navigation CD
Part 3 Media Selection and Media DIS
Part 4 Domain Specific Interfaces WI