design principles - eindhoven university of technology · • design principles: – design the...

"Design of user interfaces" design principles

TU/e 1

© M. Rauterberg, 2005 JFS-USI Primer-4 1/68

Design Principles

Matthias RauterbergGOOGLE: rauterberg

2005


Benefit

knowledge and experiences in application domain

low high

textualrepresentation

visual rperesentation

concreterepresentation

high

low


TU/e 2


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


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


TU/e 3


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.


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.


TU/e 4


A design concept for visual attractors


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.


TU/e 5


An Icon Set for Different Sports

Exercise:try to find out the different kind of sport represented by each icon.


An Icon Set for a Way-finding System


TU/e 6


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]


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.


TU/e 7


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]


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]


TU/e 8


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.


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.


TU/e 9


Dynamic in a static picture (1)

• The right picture is more dynamic than the left caused by the oversized ball



• The right picture is more dynamic than the left caused by the tilted frame


TU/e 10



• Breaking through the frame increases the perception of dynamics




TU/e 11


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.


Implicit Design for a Multimedia Information System


TU/e 12


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.”


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]


TU/e 13


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.


Implicit Screen Design


TU/e 14


Corrective Design

To motivate users to switch from explicit to implicit an additional explicit instruction is necessary: “Tippen Sie auf eines der EC-Symbole”


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


TU/e 15


First golden ruleAll things on earth have the tendency to fall down!


Second golden rule

• horizon– the horizon is always

lighter than the ground

• ground– the ground is always

darker than the horizon


TU/e 16


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.


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.


TU/e 17


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


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!


TU/e 18


Design of Light Switch Panels (1)• Problem:

– no direct mapping between switches and corresponding lamps


Design of Light Switch Panels (2)


TU/e 19


Design of Door Handles


Natural Mapping (1)


TU/e 20


Natural Mapping (2)


Design of Stove Controls (1)


TU/e 21


Design of Stove Controls (2)

Fischer, A. (1999). Intuitive Interfaces.


Interactive Directness: the desktop example

Pull down menus

Pull down menus

Toolbar


TU/e 22


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.


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.


TU/e 23


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.


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.


TU/e 24


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


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.


TU/e 25


The Virtual Workbench

The KOSIMA projectat the TU Aachen


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.


TU/e 26


Actual research goals...

• hand-written input• speech input• two-handed interaction

• new methods and concepts for integrative design


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.


TU/e 27


Trends in User Interface Technology

Ubiquitous and Mobile computing Ambient rooms and Cooperative buildings


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


TU/e 28


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


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


TU/e 29


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.


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


TU/e 30


Office of the Future

• Main characteristics:

• attentive

• active

• adaptive


Design challengeswearable computing intelligent environments

Penetration of the body space

Penetration of the social space

Isolation in immersive virtual worlds

Privacy in augmented worlds


TU/e 31


Trend in Interface Design

0

50

100

150

1970-1990 1990-2010 2010-

SW controlsHW controls


time1900 2000

mechanical style

electronic style

mechatronic style


TU/e 32


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.


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/]


TU/e 33


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


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


TU/e 34


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


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

design principles - eindhoven university of technology · • design principles: – design the...

Documents