Spring 2012 1

Why User Interface Design ? What

Prof. Giuseppe Riccardi Dipartimento di Ingegneria e Scienza dell’Informazione

University of Trento riccardi@dit.unitn.it

Why ? What

UI guidelines in Android

Spring 2012 2

http://developer.android.com/design/

User Interface

Spring 2012 3

On Terminology n UI design does not stop at displaying

Information via a GUI, MUI or VUI n That is where it starts! n That is when the human-machine interaction

can be grounded into actions as simple as: n  Clicks, Taps, Swipes, Gestures, Typing n  In order to accomplish a task (“Compose an email”)

n  It applies to designing human-machine interactive systems and NOT only

Spring 2012 4

Why

n  In a typical mid-large SW project the UI designer function should be present

n  In small project teams ( people < 2-3 ) might not be available.

n He/She a minority whereas the team is mostly made of programmers/managers

n  It is important that programmers know what UI design is about. n  Better Communicate SW system development

team. n  Programmers might turn into UI designers! Spring 2012 5

Lecture Plan n  1st Part

n  User Interface Design n  Principles ( applicable to any Human-Machine

Interface System ) n  Psychological and Cognitive Motivations

n 2° Part n  Mobile UI guidelines n  Prototyping: WireFraming n  Examples

Spring 2012 6

Human – Computer Interaction

H C

ARTICULATION PERFORMANCE

PRESENTATION OBSERVATION

TYPING

POINTING

SPEECH

VISION

VISION

PRINT GUI

TTS HEARING

7

8

2

Spring 2012 7

Spring 2012 8

De-Constructing Communication

Complexity

Devices

Signal Input / Output

INTERACTION

Spring 2012 9

Human Computer Interaction The Interface

n Device n  Input Device: Mouse, Keyboard, Joystick, Audio, .. n  Output: Screen, Speakers, Virtual Reality goggles

n Interface n  GUI n  WIMP (Windows, Icons, Menus & Pointers) [Xerox ’70s]

n Human-Machine Interaction n  Multimodal ( Speech, Text, Gestures )

n HCI principles n  U3: Useful & Usable & Used

Spring 2012 10

Demo Mobile Phone 1990

Useful Usable Used

Outline n  Intro n  Principles ( Design Rules ) n Foundations

n  Perception n  Vision n  Attention n  Memory n  Task Execution

Spring 2012 11

Reference for the lectures : “Designing with the mind in mind”, Jeff Johnson

User Interface Design n Educated ART

n  Creativity n  Human Interaction Understanding

n Based on n  Science (Cognitive, Psychology) n  Engineering

n Goal of Designing interactive systems based on requirements n  SW, HW n  Interaction System (User, Machine)

Spring 2012 12

Bridge Design and Engineering (0)

Spring 2012 13

n Many solutions to the problem of

“ Design and Build a bridge from point A to B, that can carry car/truck traffic, pedestrians, be stable in super-windy conditions, earthquakes etc..”

Bridge Design and Engineering (1)

Spring 2012 14

Bridge Design and Engineering (2)

Spring 2012 15

House design

Spring 2012 16

n Given a set of requirements n  Location n  Real estate space n  Energy saving materials n  Project costs

n There are many solutions n  Different Aesthetic appeal n  Space layouts n  Expected people behavior

House design: Project 1

Spring 2012 17

Spring 2012 18

House design: Project 2

Spring 2012 19

Artifact requires

n Science (Cognitive, Psychology..) n Engineering (Technology & Systems) n User/Social acceptance

n  Reward (“it takes from A to B, it saves time, it is safe, it is fun! It is beautiful! ”)

n  Aesthetics ( sensorial information ) universals n Architecture, Industrial, User design

n  Require all of the above to reach a point equilibrium == solution

n Not unique!

Spring 2012 20

Towards a Science of HCI Systems

n Engineering of Bridge Building n  DOES not need people to evaluate the solution!

n  In HCI systems, users are part of it. n  They are needed to study and evaluate

n Usability Testing n  Limited by the number of users and delay btw

prototype and final engineered solution

Spring 2012 21

A word of advice from S. Jobs:

Spring 2012 22

UI Design Principles

n They guide towards optimal equilibrium of requirements

n Do not provide analytical solution n Should allow to avoid errors in early phases

n  System, User Requirements, Prototyping n And not to rediscover each time dos and donts

n  “color blindness” n They may be Ambiguous and Contradictory n Goal to UNDERSTAND the motivations of such

principles so to GUIDED in executive decisions.

Spring 2012 23

Guidelines – A (Shneiderman 1987)

n Strive for Consistency n Cater to Universal Usability n Offer Informative Feedback n Design Tasks Flows to yield closure n  Prevent Errors n  Permit Easy Reversal of Actions n Make Users feel They are in Control n Minimize Short-Term Memory Load

Spring 2012 24

Guidelines – B (Nielsen and Molich 1990)

n Consistency and Standards n Visibility of System Status n Match between System and Real World n User Control and Freedom n Error Prevention n Flexibility and Efficiency of Use n Aesthetics and Minimalist Design n Help Users Recognize, Diagnose and Recover from

Errors n  Provide Online Documentation and Help

Spring 2012 25

What they do come from?

n They are inspired from human psychology processes n Science on how people

n  Perceive n  Remember n  Learn n  Reason n  Ground Intentions into Actions

Spring 2012 26

Perception

n  Perception is the process of interpreting signals being collected by our sense organs into our nervous system.

Hearing (Hair Cells), Sight (Retina) Smell (Olfactory Receptors)

Taste (Taste buds) Touch (Neural Receptors)

n Not only Bottom-up Processing!

“Vision”, W. H. Freeman, New York, NY

ATM Transaction

Spring 2012 29

Select Account Checking 1 Checking 2

…

ATM Transaction (cont.d)

Spring 2012 30

What would you like to do? Withdrawal

Transfer …

ATM Transaction (cont.d)

Spring 2012 31

……. …… …... …

ATM Transaction (cont.d)

Spring 2012 32

Please Confirm Amount

200 $?

ATM Transaction

Spring 2012 33

Push NEXT for printed receipt

Spring 2012 34

Perception is biased by

n  Past : Experience or prior information

Spring 2012 35

Language is Ambiguous

n Giorgio e Luca erano compagni di banco n  Senso è

n  Il direttore del banco di Napoli n  Senso è

n  Il nuovo test sara’ il banco di prova n  Senso è

n  .......Banco ottico n  .......

Spring 2012 36

Perception is biased by

n  Past : Experience or prior information n  Present : Current Context

n  Also from concurrent signals from different sensorial information ( sight & hearing)

n  Influence/Reinforce each other (e.g. lip reading)

Spring 2010 37

“Cocktail Party Problem”

n  Human Perception Experiment n  Multiple audio sources n  Humans can “adaptively” separate a specific sound source n  Cocktail Party Problem

n  Audio sample 1 source n  Audio sample 2 source n  Audio sample 3 source

Human Speech

Recognition

“yes I would like to make a reservation.. “

Spring 2012 38

Perception is biased by

n  Past : Experience or prior information n  Present : Current Context n Future : Our Goals

n  Our goals may filter our perception n  Example of goal oriented information over web n  Ignoring information ≠ Do not notice information

Spring 2012 39

Influencing where we look

EyeTracker

Observing, Measuring and Evaluating

Spring 2012 41

Take Away Guidelines Perception

n Avoid Ambiguity n  Requires effort

n Be Consistent n  Exploit users past experience

n Understand users’ goals n  Either be explicit n  Or Implicitly track them

Spring 2012 42

The Gestalt Theory Visual Perception

n  Psychologists proposed in 20th century to explain how visual perception works n Supported now by neurophysiological experiments n Descriptive framework n Support for graphic and user interface design

Spring 2012 43

The Gestalt Theory Visual Perception

It identifies rules/principles human visual perception

groups tokens together

Spring 2012 44

Rules

n Proximity n Similarity n Continuity n Closure n Symmetry n Figure/Ground

Proximity (1)

Spring 2012 45

Proximity (2)

Spring 2012 46

Proximity (3)

Spring 2012 47

Proximity (4)

Spring 2012 48

n EXAMPLE (stars) where you perceive horiz

Similarity

Spring 2012 49

Continuity (1)

Spring 2012 50

Continuity (2)

Spring 2012 51

Closure (1)

Spring 2012 52

Simmetry

Spring 2012 53

Simmetry

Figure/Ground (1)

Spring 2012 54

Figure/Ground (2)

Spring 2012 55

Common Fate Moving Objects

Spring 2012 56

Closure-Symmetry-Continuity

Spring 2012 57 Cover of “Coherence in Thought and Action” book by Paul Thagard

Spring 2012 58

Spring 2012 59

Learning

n  Learning a task n Recall from experience

n  Personal Past experience à Learned Actions are easy to perform

“Stay away from walking over the edge of a cliff” “Do not execute .exe files received from unknown recipients” “Facebook is good for making friends” (User 1) “Facebook is a waste of time” (User 2)

Spring 2012 60

Learning from Experience Issues n  Learning from experience is in general difficult

and not perfect both for human and machines! n Too much or too little data to learn from or too

many conclusions to draw n  Learning from errors is not easy n Credibility of the experience to learn from

n  Whose experience was that (brother vs friend..) n Overgeneralization is used both by humans and

machines and can undeniably lead to errors.

Spring 2012 61

Learned actions easy to perform

n Many tasks may be performed routinely n  “Riding a bike”, “Driving a car”,”Walking on the

sidewalk”… n  For most part of the experience we do not

consume any conscious resources ( attention or memory) (Schneider & Shiffrin 1977) àWe automate how and when to change gears à We have learned from past experience à We pay attention to obstacle avoidance

Spring 2012 62

Examples of Learned vs New Tasks

n  “Recite letters of the alphabet A through P” n  “Recite letters of the alphabet from P to A” n  “Drive to work using your normal route” n  “Drive to work an unfamiliar one” n  “Spell out your telephone number” n  “Spell out your telephone number by grouping

numbers by four” n Write and post a letter at the post office n Write and send an email (users age >50)

Spring 2012 63

n  Provide System status and Users’ progress toward their goal à Relieve attention strain and minimize short-

memory n Guide users to goal

àConsider one-time user or repeat-user experience àExpliciting needed information ( do not overload either)

n  Let Computer do the math n  “Go the middle of the document”à Solve it

graphically

Take Away Guidelines Perception

Homework n Select three smartphone (Android) apps

and rate them ( 1-5). Why you like, What it does for you, etc..

n Upload along with your project report/apk

Spring 2012 64

UI guidelines to build Your App

Spring 2012 65

UI guideline docs in iOS

Spring 2012 67

App Design strategies

Spring 2012 68

n Create an Application Definition n  List All the Features You Think Users

Might Like n Determine Who Your Users Are n Filter the Feature List Through the

Audience Definition n Review n  Prototype and Iterate

Extreme Use Cases n 60 SECONDS use case

n  Soccer match scores, weather, stock quotes..

n 60 MINUTES use case n  Video watching, Reading (emails ) , Writing

(blogs) , making dinner plans..

Spring 2012 69

Extreme Use Cases

Spring 2012 70

From Nathan . Freitas

Extreme Use Cases

Spring 2012 71

From Nathan . Freitas

12 Myths of Mobile User-Interface Design Over the years (2005 A. Marcus and adapted)

Spring 2012 72

APP concept: create a story

Spring 2012 73

I want to easily create a shopping list easily,

quickly and share it with my family.

I want to check how much exercise while I go to

work, do sports and share it with my doctor

I want to plan my next summer vacation in the countryside and select

from friends’ advices and social websites

I want my camera to tell me when is the best

timing/lighting for me to shoot a picture

I want to know where is the cheapest gas station

wherever I am considering the mileage

to reach it.

I want to monitor and improve my mnemonic

skills

The Story; Where and When

Spring 2012

n At the office during a meeting n At home, with my kids n On Vacation with my friends n 24/7 n A teacher with 1-10 grades students in class n Recruiter on face-to-face interviews

UI prototyping: Wireframing UI schema of application n Visual layout and its elements ( e.g. action bars) n Functions of the elements (e.g. input text box) n Navigation flow and rules n Effect of interaction context on the visual state DOES NOT focus on graphics RATHER on app user action dynamics and behavior in context HOW: pencil, drawings, board and tools

Spring 2012 75

Spring 2012 76 Spring 2012 76

Bibliography n  Johnson, J., “Designing with the mind in mind”, MK Publisher, 2010 n  Shneiderman, B., “Designing the user interfaces: Strategies for

effective human-computer interaction”,, Addison-Wesley Publisher, 1987

n  Nielsen, J. and Molich, R. “Heuristic Evaluation of user interfaces”, Proceedings of ACM CHI , Seattle, 1990.

n  Schneider, W. and Shiffrin, R. M., “Controlled and Automatic human information processing: detection, search and attention”, Psychological Review, pp. 1-66, 1977.