Upload
others
View
5
Download
0
Embed Size (px)
Citation preview
Spring 2012 1
Why User Interface Design ? What
Prof. Giuseppe Riccardi Dipartimento di Ingegneria e Scienza dell’Informazione
University of Trento [email protected]
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.