User Interface Designchate/2110646/2553/... · Knowledge Types for UI Design • Information‐gathering activities and analyses that form part of the user interface design and development

User Interface Design

Lecture 4Lecture 4

Requirements Gathering: Knowledge f U I f D iof User Interface Design

C. Patanothai 2110646:04‐Knowledge of User Interface Design 2

Knowledge Types for UI DesignKnowledge Types for UI Design

• Information‐gathering activities and analyses that form part of the user interface designthat form part of the user interface design and development process

• User interface design knowledge, from theory (cognitive psychology), and experience (studying designs that areexperience (studying designs that are currently working well.


Minimizing workMinimizing work

C iti k• Cognitive work– comprehension of product behaviors

• Memory work• Memory work– recall of product behaviors, commands, names and locations of objects and controls and other relationships b bbetween objects

• Visual workwhere the eye should start on a screen finding object– where the eye should start on a screen, finding object, decoding layouts

• Physical worky– keystrokes, mouse movement, gesture (click, drag, double‐click), switching between input modes, # of clicks required


Design KnowledgeDesign Knowledge

D i P i i l• Design Principles– derived from experienceabstract high level guides– abstract, high‐level guides

– general, difficult to apply– First Principles of Interactive Design– First Principles of Interactive Design

• Design Rules• Design Rules– low‐level– high specific instruction– high specific instruction– 8 Golden Rules


4 Psychological Principles4 Psychological Principles

U h t th t t• Users see what they expect to see

• Users have difficulty focusing on more than• Users have difficulty focusing on more than one activity at a time

• It is easier to perceive a structured layout

It i i t i thi th t t• It is easier to recognize something that to recall it



Users See What They Expect to See


ExerciseExercise

• Look at figure and read it.

• Anything strange?Anything strange?

• Principle of consistency– throughout the UIthroughout the UI

• Principle of exploiting prior knowledge– users perceive the screen using their prior knowledge



Users Have Difficulty Focusing on More Than One Activity at a Time

– The Cocktail Party Effect

– Principle of Perceptual OrganizationG lik thi t th• Group like things together

– Principle of Importance• Prominent display for important items



It Is Easier to Perceive a Structured Layout



Gestalt principlesa. Proximityy

b. Similarity

c Closurec. Closure

d. Continuity

e. Symmetry


Figure‐Ground SegregationFigure Ground Segregation


Exercise (5 minutes)Exercise (5 minutes)

How well does this web sites support the principles of proximity, similarity, p y, y,closure, and continuity?



It Is Easier to Recognize Something Than to Recall ItRecall It

• Principle of recognitionp g• Knowledge in the head & Knowledge in the world• exceptionsexcept ons

• expert prefer key combinations• routine operator don’t like to read the same routine operator don t like to read the same

info. repeatedly


Three Principles from Experience: Visibility, Affordance, and Feedback

The Principle of Visibility: It Should Be Obvious What a Control Is Used ForWhat a Control Is Used For



The Principle of Affordance: It Should Be Obvious How a Control Is UsedObvious How a Control Is Used

ff d t l t ti f‐ affordance: strong clues to operations of things

‐ no picture, label, or instruction is required


Affordance: actual vs perceivedAffordance: actual vs. perceived



• The Principle of Feedback: It Should Be Obvious When a Control Has Been UsedObvious When a Control Has Been Used



Principles to support usabilityPrinciples to support usability

L biliLearnabilitythe ease with which new users can begin effective interaction and achieve maximal performanceand achieve maximal performance

Flexibilityythe multiplicity of ways the user and system exchange information

Robustnessthe level of support provided the user in determiningthe level of support provided the user in determining successful achievement and assessment of goal‐directed behaviour


Principles of learnabilityPrinciples of learnability

di biliPredictability– determining effect of future actions based on past interaction history

– operation visibility

SynthesizabilitySynthesizability– assessing the effect of past actions on the current statestate

– immediate vs. eventual honesty



F ili itFamiliarity– how prior knowledge applies to new system

b l– guessability; – affordance – how any visual object can be manipulatedmanipulated

G li biliGeneralizability– extending specific interaction knowledge to new

it tisituations– within a single app. or across apps.



C iConsistency– likeness in input/output behaviour arising from similar situations or task objectivessituations or task objectives

– familiarity – consistency with respect to past real‐world experiencep

– generalizability – consistency with respect to experience with the same system or set of applications on the same l fplatform


Principles of flexibilityPrinciples of flexibility

Di l i iti tiDialogue initiative– freedom from system imposed constraints on input dialogue– system vs. user pre‐emptivenessy p p– maximize the user pre‐emptive, minimize the system pre‐emptive

MultithreadingMultithreading– ability of system to support user interaction for more than one task at a time

t i t l i lti d lit ( lti h l)– concurrent vs. interleaving; multimodality (multi‐channel)

Task migratability– passing responsibility for task execution between user and system– e.g. spell‐check


Principles of flexibilityPrinciples of flexibility

S b tit ti itSubstitutivity– allowing equivalent values of input and output to be substituted for each othersubstituted for each other

– representation multiplicity; equal opportunity

Customizability– modifiability of the user interface by user (adaptability) or

t ( d ti it )system (adaptivity)– adaptability – user's ability to adjust the form of input and outputp

• the overall structure of the interaction is unchanged– adaptivity – automatic customization


Principles of robustnessPrinciples of robustness

Observability– ability of user to evaluate the internal state of the system from its perceivable representation

– browsability;

– defaults;

– reachability;

– persistence;

– operation visibility



ObservabilityObservability– browsability – allows the user to explore the current internal state of the system via the limited view provided at the i t finterface.

– defaults – system provided values• static or dynamic

– reachability – the possibility of navigation through the observable system states

• affects the recoverability of the system– persistence – the duration of the effect of a communication act and the ability of the user to make use of that effect

• vocal comm. does not persist• visual comm. remains long after the act of presentation• e.g. email notification with beef and envelop flashing



R biliRecoverability– ability of user to take corrective action once an error has been recognizedrecognized

– linked to reachability since we do not want to block the user from getting to a desired state from some other undesired state

• forward recovery – the acceptance of the current state and negotiation from that state towards the desired state

• backward recovery – undo the effects of previous interaction in d i b f diorder to return to a prior state before proceeding

– commensurate effort – if it is difficult to undo a given effect on the state, then it should have been difficult to do in the first place p(easily undone actions should be easily doable.)

• if it is difficult to recover deleted files, then it should be difficult to remove them.



R iResponsiveness– how the user perceives the rate of communication with the systemthe system

– stability – the invariance of the duration for identical or similar computational resources

• e.g. pull‐down menus are expected to pop up instantaneously as soon as a mouse button is pressed

Task conformancedegree to which system services support all of the– degree to which system services support all of the user's tasks

– task completeness; task adequacyp ; q y


Other PrinciplesOther Principles

• Constraints

• Natural mappingNatural mapping


ConstraintsConstraints

d• Boundary

• Some can be selected, some cannotSome can be selected, some cannot

• physical vs. logical– cannot move cursor outside the screencannot move cursor outside the screen


Natural MappingNatural Mapping

• Mapping should match functionality

• direct is the bestdirect is the best• natural mapping does not have to be direct

– light switch

– oven control– turn signal


Poor Physical Natural MappingPoor Physical Natural Mapping


Good Physical Natural MappingGood Physical Natural Mapping


Logical MappingLogical Mapping


Documents

User Interface Designchate/2110646/2553/... · Knowledge Types for UI Design • Information‐gathering activities and analyses that form part of the user interface design and development