User Interface Principles
-
Upload
gidgreen -
Category
Technology
-
view
701 -
download
2
Transcript of User Interface Principles
![Page 1: User Interface Principles](https://reader034.fdocuments.net/reader034/viewer/2022052523/555ac1abd8b42ab1128b4c5e/html5/thumbnails/1.jpg)
3 — User Interface Principles
From Code to Product gidgreen.com/course
![Page 2: User Interface Principles](https://reader034.fdocuments.net/reader034/viewer/2022052523/555ac1abd8b42ab1128b4c5e/html5/thumbnails/2.jpg)
Lecture 3
• Introduction • Vision • Cognition • Memory • Action • Emotion
From Code to Product Lecture 3 — UI Principles — Slide 2 gidgreen.com/course
![Page 3: User Interface Principles](https://reader034.fdocuments.net/reader034/viewer/2022052523/555ac1abd8b42ab1128b4c5e/html5/thumbnails/3.jpg)
User Interface
“The aspects of a computer system or program which can be seen (or heard or otherwise perceived) by the human user, and the commands and mechanisms the user uses to control its operation and input data.”
— Free On-Line Dictionary of Computing
From Code to Product Lecture 3 — UI Principles — Slide 3 gidgreen.com/course
![Page 4: User Interface Principles](https://reader034.fdocuments.net/reader034/viewer/2022052523/555ac1abd8b42ab1128b4c5e/html5/thumbnails/4.jpg)
Other terms
• Graphical user interface • User experience • Interaction design • Human-computer interaction • Usability • Information architecture
From Code to Product Lecture 3 — UI Principles — Slide 4 gidgreen.com/course
![Page 5: User Interface Principles](https://reader034.fdocuments.net/reader034/viewer/2022052523/555ac1abd8b42ab1128b4c5e/html5/thumbnails/5.jpg)
Layers of a product
From Code to Product Lecture 3 — UI Principles — Slide 5 gidgreen.com/course
Core
![Page 6: User Interface Principles](https://reader034.fdocuments.net/reader034/viewer/2022052523/555ac1abd8b42ab1128b4c5e/html5/thumbnails/6.jpg)
The problem
From Code to Product Lecture 3 — UI Principles — Slide 6 gidgreen.com/course
I want to see this guy’s face
MOV r0, #10 ADD r0, r0, r1
How do we bridge this gap?
![Page 7: User Interface Principles](https://reader034.fdocuments.net/reader034/viewer/2022052523/555ac1abd8b42ab1128b4c5e/html5/thumbnails/7.jpg)
The solution
From Code to Product Lecture 3 — UI Principles — Slide 7 gidgreen.com/course
I want to see this guy’s face
MOV r0, #10 ADD r0, r0, r1
I can use Skype on my mobile
I will press his name in the app
Function call in Skype app
Touch event detected
![Page 8: User Interface Principles](https://reader034.fdocuments.net/reader034/viewer/2022052523/555ac1abd8b42ab1128b4c5e/html5/thumbnails/8.jpg)
Channels of communication
From Code to Product Lecture 3 — UI Principles — Slide 8 gidgreen.com/course
Pressing buttons
Pointing on screen
Talking and singing
Being photographed
Moving the device
Flashing lights
Image on screen
Playing sound
Vibration
![Page 9: User Interface Principles](https://reader034.fdocuments.net/reader034/viewer/2022052523/555ac1abd8b42ab1128b4c5e/html5/thumbnails/9.jpg)
Lecture 3
• Introduction • Vision • Cognition • Memory • Action • Emotion
From Code to Product Lecture 3 — UI Principles — Slide 9 gidgreen.com/course
![Page 10: User Interface Principles](https://reader034.fdocuments.net/reader034/viewer/2022052523/555ac1abd8b42ab1128b4c5e/html5/thumbnails/10.jpg)
Vision
From Code to Product Lecture 3 — UI Principles — Slide 10 gidgreen.com/course
![Page 11: User Interface Principles](https://reader034.fdocuments.net/reader034/viewer/2022052523/555ac1abd8b42ab1128b4c5e/html5/thumbnails/11.jpg)
Proximity
From Code to Product Lecture 3 — UI Principles — Slide 11 gidgreen.com/course
![Page 12: User Interface Principles](https://reader034.fdocuments.net/reader034/viewer/2022052523/555ac1abd8b42ab1128b4c5e/html5/thumbnails/12.jpg)
Similarity
From Code to Product Lecture 3 — UI Principles — Slide 12 gidgreen.com/course
![Page 13: User Interface Principles](https://reader034.fdocuments.net/reader034/viewer/2022052523/555ac1abd8b42ab1128b4c5e/html5/thumbnails/13.jpg)
Similarity
From Code to Product Lecture 3 — UI Principles — Slide 13 gidgreen.com/course
![Page 14: User Interface Principles](https://reader034.fdocuments.net/reader034/viewer/2022052523/555ac1abd8b42ab1128b4c5e/html5/thumbnails/14.jpg)
Proximity
From Code to Product Lecture 3 — UI Principles — Slide 14 gidgreen.com/course
![Page 15: User Interface Principles](https://reader034.fdocuments.net/reader034/viewer/2022052523/555ac1abd8b42ab1128b4c5e/html5/thumbnails/15.jpg)
Similarity
From Code to Product Lecture 3 — UI Principles — Slide 15 gidgreen.com/course
![Page 16: User Interface Principles](https://reader034.fdocuments.net/reader034/viewer/2022052523/555ac1abd8b42ab1128b4c5e/html5/thumbnails/16.jpg)
Similarity
From Code to Product Lecture 3 — UI Principles — Slide 16 gidgreen.com/course
![Page 17: User Interface Principles](https://reader034.fdocuments.net/reader034/viewer/2022052523/555ac1abd8b42ab1128b4c5e/html5/thumbnails/17.jpg)
Continuity
From Code to Product Lecture 3 — UI Principles — Slide 17 gidgreen.com/course
![Page 18: User Interface Principles](https://reader034.fdocuments.net/reader034/viewer/2022052523/555ac1abd8b42ab1128b4c5e/html5/thumbnails/18.jpg)
Symmetry
From Code to Product Lecture 3 — UI Principles — Slide 18 gidgreen.com/course
![Page 19: User Interface Principles](https://reader034.fdocuments.net/reader034/viewer/2022052523/555ac1abd8b42ab1128b4c5e/html5/thumbnails/19.jpg)
Continuity and Symmetry
From Code to Product Lecture 3 — UI Principles — Slide 19 gidgreen.com/course
![Page 20: User Interface Principles](https://reader034.fdocuments.net/reader034/viewer/2022052523/555ac1abd8b42ab1128b4c5e/html5/thumbnails/20.jpg)
Ambiguity
From Code to Product Lecture 3 — UI Principles — Slide 20 gidgreen.com/course
![Page 21: User Interface Principles](https://reader034.fdocuments.net/reader034/viewer/2022052523/555ac1abd8b42ab1128b4c5e/html5/thumbnails/21.jpg)
Grids
From Code to Product Lecture 3 — UI Principles — Slide 21 gidgreen.com/course
![Page 22: User Interface Principles](https://reader034.fdocuments.net/reader034/viewer/2022052523/555ac1abd8b42ab1128b4c5e/html5/thumbnails/22.jpg)
Figure and Ground
From Code to Product Lecture 3 — UI Principles — Slide 22 gidgreen.com/course
Phot
o by
Sha
Sha
Chu
![Page 23: User Interface Principles](https://reader034.fdocuments.net/reader034/viewer/2022052523/555ac1abd8b42ab1128b4c5e/html5/thumbnails/23.jpg)
Figure and Ground
From Code to Product Lecture 3 — UI Principles — Slide 23 gidgreen.com/course
![Page 24: User Interface Principles](https://reader034.fdocuments.net/reader034/viewer/2022052523/555ac1abd8b42ab1128b4c5e/html5/thumbnails/24.jpg)
Hierarchy
From Code to Product Lecture 3 — UI Principles — Slide 24 gidgreen.com/course
1
2
4 3
5
![Page 25: User Interface Principles](https://reader034.fdocuments.net/reader034/viewer/2022052523/555ac1abd8b42ab1128b4c5e/html5/thumbnails/25.jpg)
Movement
From Code to Product Lecture 3 — UI Principles — Slide 25 gidgreen.com/course
![Page 26: User Interface Principles](https://reader034.fdocuments.net/reader034/viewer/2022052523/555ac1abd8b42ab1128b4c5e/html5/thumbnails/26.jpg)
Tunnel Vision
From Code to Product Lecture 3 — UI Principles — Slide 26 gidgreen.com/course
Photo by Ali Khurshid
![Page 27: User Interface Principles](https://reader034.fdocuments.net/reader034/viewer/2022052523/555ac1abd8b42ab1128b4c5e/html5/thumbnails/27.jpg)
Tunnel Vision
From Code to Product Lecture 3 — UI Principles — Slide 27 gidgreen.com/course
![Page 28: User Interface Principles](https://reader034.fdocuments.net/reader034/viewer/2022052523/555ac1abd8b42ab1128b4c5e/html5/thumbnails/28.jpg)
Structure
Thank you for your reservation. Your indoor table has been booked for four people at 8 in the evening on Tuesday January 6th 2012 at Sushi Samba. The address is 245 Park Avenue South, between East 19th and 20th Street. You must arrive by 8.15pm to maintain your reservation. In the event of problems, please call the restaurant on 2124759377. Note that the minimum charge is $50 per person.
From Code to Product Lecture 3 — UI Principles — Slide 28 gidgreen.com/course
![Page 29: User Interface Principles](https://reader034.fdocuments.net/reader034/viewer/2022052523/555ac1abd8b42ab1128b4c5e/html5/thumbnails/29.jpg)
Structure
Date Tue 6 Jan
Time 8.00pm
Latest 8.15pm
People 4
Table Indoors
Minimum $50/person
From Code to Product Lecture 3 — UI Principles — Slide 29 gidgreen.com/course
Thank you for your reservation.
Sushi Samba 245 Park Avenue South
(212) 475–9377
![Page 30: User Interface Principles](https://reader034.fdocuments.net/reader034/viewer/2022052523/555ac1abd8b42ab1128b4c5e/html5/thumbnails/30.jpg)
Structure
Date Tue 6 Jan Time 8.00pm Latest 8.15pm People 4 Table Indoors Minimum $50/person
From Code to Product Lecture 3 — UI Principles — Slide 30 gidgreen.com/course
Thank you for your reservation.
Sushi Samba 245 Park Avenue South (212) 475–9377
![Page 31: User Interface Principles](https://reader034.fdocuments.net/reader034/viewer/2022052523/555ac1abd8b42ab1128b4c5e/html5/thumbnails/31.jpg)
Prominence
From Code to Product Lecture 3 — UI Principles — Slide 31 gidgreen.com/course
![Page 32: User Interface Principles](https://reader034.fdocuments.net/reader034/viewer/2022052523/555ac1abd8b42ab1128b4c5e/html5/thumbnails/32.jpg)
Prominence
From Code to Product Lecture 3 — UI Principles — Slide 32 gidgreen.com/course
1
2
3 4
![Page 33: User Interface Principles](https://reader034.fdocuments.net/reader034/viewer/2022052523/555ac1abd8b42ab1128b4c5e/html5/thumbnails/33.jpg)
Sequence
From Code to Product Lecture 3 — UI Principles — Slide 33 gidgreen.com/course
Source: xkcd.com
![Page 34: User Interface Principles](https://reader034.fdocuments.net/reader034/viewer/2022052523/555ac1abd8b42ab1128b4c5e/html5/thumbnails/34.jpg)
Sequence
From Code to Product Lecture 3 — UI Principles — Slide 34 gidgreen.com/course
![Page 35: User Interface Principles](https://reader034.fdocuments.net/reader034/viewer/2022052523/555ac1abd8b42ab1128b4c5e/html5/thumbnails/35.jpg)
Sequence
From Code to Product Lecture 3 — UI Principles — Slide 35 gidgreen.com/course
![Page 36: User Interface Principles](https://reader034.fdocuments.net/reader034/viewer/2022052523/555ac1abd8b42ab1128b4c5e/html5/thumbnails/36.jpg)
Sequence
From Code to Product Lecture 3 — UI Principles — Slide 36 gidgreen.com/course
![Page 37: User Interface Principles](https://reader034.fdocuments.net/reader034/viewer/2022052523/555ac1abd8b42ab1128b4c5e/html5/thumbnails/37.jpg)
Sequence
From Code to Product Lecture 3 — UI Principles — Slide 37 gidgreen.com/course
![Page 38: User Interface Principles](https://reader034.fdocuments.net/reader034/viewer/2022052523/555ac1abd8b42ab1128b4c5e/html5/thumbnails/38.jpg)
Clutter
From Code to Product Lecture 3 — UI Principles — Slide 38 gidgreen.com/course
Phot
o by
Met
ro C
entr
ic
![Page 39: User Interface Principles](https://reader034.fdocuments.net/reader034/viewer/2022052523/555ac1abd8b42ab1128b4c5e/html5/thumbnails/39.jpg)
Clutter
From Code to Product Lecture 3 — UI Principles — Slide 39 gidgreen.com/course
![Page 40: User Interface Principles](https://reader034.fdocuments.net/reader034/viewer/2022052523/555ac1abd8b42ab1128b4c5e/html5/thumbnails/40.jpg)
Minimalism
“Perfection is achieved, not when there is nothing more to add, but when there is nothing left to take away.” — Antoine de Saint-Exupéry
From Code to Product Lecture 3 — UI Principles — Slide 40 gidgreen.com/course
![Page 41: User Interface Principles](https://reader034.fdocuments.net/reader034/viewer/2022052523/555ac1abd8b42ab1128b4c5e/html5/thumbnails/41.jpg)
Minimalism
From Code to Product Lecture 3 — UI Principles — Slide 41 gidgreen.com/course
The face of a $200b company
![Page 42: User Interface Principles](https://reader034.fdocuments.net/reader034/viewer/2022052523/555ac1abd8b42ab1128b4c5e/html5/thumbnails/42.jpg)
Visual affordance
From Code to Product Lecture 3 — UI Principles — Slide 42 gidgreen.com/course
Sour
ce:
Chri
sEly
ea.c
om
![Page 43: User Interface Principles](https://reader034.fdocuments.net/reader034/viewer/2022052523/555ac1abd8b42ab1128b4c5e/html5/thumbnails/43.jpg)
Visual affordance
From Code to Product Lecture 3 — UI Principles — Slide 43 gidgreen.com/course
![Page 44: User Interface Principles](https://reader034.fdocuments.net/reader034/viewer/2022052523/555ac1abd8b42ab1128b4c5e/html5/thumbnails/44.jpg)
A few words about sound…
• Don’t do it, unless… – Audio/video player
– Game or other experiential product
– Alert from desktop/mobile app
– Phone number entry
– Reassuring key clicks
– Accessibility
• Let users switch it off
From Code to Product Lecture 3 — UI Principles — Slide 44 gidgreen.com/course
![Page 45: User Interface Principles](https://reader034.fdocuments.net/reader034/viewer/2022052523/555ac1abd8b42ab1128b4c5e/html5/thumbnails/45.jpg)
Lecture 3
• Introduction • Vision • Cognition • Memory • Action • Emotion
From Code to Product Lecture 3 — UI Principles — Slide 45 gidgreen.com/course
![Page 46: User Interface Principles](https://reader034.fdocuments.net/reader034/viewer/2022052523/555ac1abd8b42ab1128b4c5e/html5/thumbnails/46.jpg)
Cognition
Consider babies Ben and Sam.
They were born to the same woman, on the same day, in the same month and the same year.
Yet they're not twins.
How can this be?
From Code to Product Lecture 3 — UI Principles — Slide 46 gidgreen.com/course
![Page 47: User Interface Principles](https://reader034.fdocuments.net/reader034/viewer/2022052523/555ac1abd8b42ab1128b4c5e/html5/thumbnails/47.jpg)
The ideal interface
From Code to Product Lecture 3 — UI Principles — Slide 47 gidgreen.com/course
![Page 48: User Interface Principles](https://reader034.fdocuments.net/reader034/viewer/2022052523/555ac1abd8b42ab1128b4c5e/html5/thumbnails/48.jpg)
Implementation model
From Code to Product Lecture 3 — UI Principles — Slide 48 gidgreen.com/course
![Page 49: User Interface Principles](https://reader034.fdocuments.net/reader034/viewer/2022052523/555ac1abd8b42ab1128b4c5e/html5/thumbnails/49.jpg)
Mental model
From Code to Product Lecture 3 — UI Principles — Slide 49 gidgreen.com/course
![Page 50: User Interface Principles](https://reader034.fdocuments.net/reader034/viewer/2022052523/555ac1abd8b42ab1128b4c5e/html5/thumbnails/50.jpg)
Talk to people
From Code to Product Lecture 3 — UI Principles — Slide 50 gidgreen.com/course
![Page 51: User Interface Principles](https://reader034.fdocuments.net/reader034/viewer/2022052523/555ac1abd8b42ab1128b4c5e/html5/thumbnails/51.jpg)
Metaphors
From Code to Product Lecture 3 — UI Principles — Slide 51 gidgreen.com/course
![Page 52: User Interface Principles](https://reader034.fdocuments.net/reader034/viewer/2022052523/555ac1abd8b42ab1128b4c5e/html5/thumbnails/52.jpg)
Overly literal metaphors
From Code to Product Lecture 3 — UI Principles — Slide 52 gidgreen.com/course
![Page 53: User Interface Principles](https://reader034.fdocuments.net/reader034/viewer/2022052523/555ac1abd8b42ab1128b4c5e/html5/thumbnails/53.jpg)
Mapping
From Code to Product Lecture 3 — UI Principles — Slide 53 gidgreen.com/course
Sour
ce:
UXH
ero.
com
![Page 54: User Interface Principles](https://reader034.fdocuments.net/reader034/viewer/2022052523/555ac1abd8b42ab1128b4c5e/html5/thumbnails/54.jpg)
Mapping
From Code to Product Lecture 3 — UI Principles — Slide 54 gidgreen.com/course
![Page 55: User Interface Principles](https://reader034.fdocuments.net/reader034/viewer/2022052523/555ac1abd8b42ab1128b4c5e/html5/thumbnails/55.jpg)
Unnecessary burdens
From Code to Product Lecture 3 — UI Principles — Slide 55 gidgreen.com/course
![Page 56: User Interface Principles](https://reader034.fdocuments.net/reader034/viewer/2022052523/555ac1abd8b42ab1128b4c5e/html5/thumbnails/56.jpg)
Unnecessary burdens
From Code to Product Lecture 3 — UI Principles — Slide 56 gidgreen.com/course
adm
inap
ps.u
tep.
edu/
chan
gepa
ssw
ord
![Page 57: User Interface Principles](https://reader034.fdocuments.net/reader034/viewer/2022052523/555ac1abd8b42ab1128b4c5e/html5/thumbnails/57.jpg)
Examples + Defaults
From Code to Product Lecture 3 — UI Principles — Slide 57 gidgreen.com/course
![Page 58: User Interface Principles](https://reader034.fdocuments.net/reader034/viewer/2022052523/555ac1abd8b42ab1128b4c5e/html5/thumbnails/58.jpg)
Interruptions
From Code to Product Lecture 3 — UI Principles — Slide 58 gidgreen.com/course
![Page 59: User Interface Principles](https://reader034.fdocuments.net/reader034/viewer/2022052523/555ac1abd8b42ab1128b4c5e/html5/thumbnails/59.jpg)
Interruptions
From Code to Product Lecture 3 — UI Principles — Slide 59 gidgreen.com/course
![Page 60: User Interface Principles](https://reader034.fdocuments.net/reader034/viewer/2022052523/555ac1abd8b42ab1128b4c5e/html5/thumbnails/60.jpg)
Lecture 3
• Introduction • Vision • Cognition • Memory • Action • Emotion
From Code to Product Lecture 3 — UI Principles — Slide 60 gidgreen.com/course
![Page 61: User Interface Principles](https://reader034.fdocuments.net/reader034/viewer/2022052523/555ac1abd8b42ab1128b4c5e/html5/thumbnails/61.jpg)
Memory
From Code to Product Lecture 3 — UI Principles — Slide 61 gidgreen.com/course
![Page 62: User Interface Principles](https://reader034.fdocuments.net/reader034/viewer/2022052523/555ac1abd8b42ab1128b4c5e/html5/thumbnails/62.jpg)
Two types of memory
From Code to Product Lecture 3 — UI Principles — Slide 62 gidgreen.com/course
Short-term Long-term
Contents Current task Life history
Capacity Tiny (7 items?) Huge
Recall Instant Slow
Retention Short Eternal
Accuracy Perfect Poor
Just like… CPU cache Lots of floppy disks
![Page 63: User Interface Principles](https://reader034.fdocuments.net/reader034/viewer/2022052523/555ac1abd8b42ab1128b4c5e/html5/thumbnails/63.jpg)
Modes
From Code to Product Lecture 3 — UI Principles — Slide 63 gidgreen.com/course
![Page 64: User Interface Principles](https://reader034.fdocuments.net/reader034/viewer/2022052523/555ac1abd8b42ab1128b4c5e/html5/thumbnails/64.jpg)
Modes
From Code to Product Lecture 3 — UI Principles — Slide 64 gidgreen.com/course
![Page 65: User Interface Principles](https://reader034.fdocuments.net/reader034/viewer/2022052523/555ac1abd8b42ab1128b4c5e/html5/thumbnails/65.jpg)
Modes
From Code to Product Lecture 3 — UI Principles — Slide 65 gidgreen.com/course
Drawing Selection
![Page 66: User Interface Principles](https://reader034.fdocuments.net/reader034/viewer/2022052523/555ac1abd8b42ab1128b4c5e/html5/thumbnails/66.jpg)
Modes
From Code to Product Lecture 3 — UI Principles — Slide 66 gidgreen.com/course
![Page 67: User Interface Principles](https://reader034.fdocuments.net/reader034/viewer/2022052523/555ac1abd8b42ab1128b4c5e/html5/thumbnails/67.jpg)
Context
From Code to Product Lecture 3 — UI Principles — Slide 67 gidgreen.com/course
Phot
o by
jim
a
![Page 68: User Interface Principles](https://reader034.fdocuments.net/reader034/viewer/2022052523/555ac1abd8b42ab1128b4c5e/html5/thumbnails/68.jpg)
Context
From Code to Product Lecture 3 — UI Principles — Slide 68 gidgreen.com/course
![Page 69: User Interface Principles](https://reader034.fdocuments.net/reader034/viewer/2022052523/555ac1abd8b42ab1128b4c5e/html5/thumbnails/69.jpg)
Instructions
From Code to Product Lecture 3 — UI Principles — Slide 69 gidgreen.com/course
Imag
e by
Zoa
gli
![Page 70: User Interface Principles](https://reader034.fdocuments.net/reader034/viewer/2022052523/555ac1abd8b42ab1128b4c5e/html5/thumbnails/70.jpg)
Instructions
From Code to Product Lecture 3 — UI Principles — Slide 70 gidgreen.com/course
![Page 71: User Interface Principles](https://reader034.fdocuments.net/reader034/viewer/2022052523/555ac1abd8b42ab1128b4c5e/html5/thumbnails/71.jpg)
Instructions
From Code to Product Lecture 3 — UI Principles — Slide 71 gidgreen.com/course
![Page 72: User Interface Principles](https://reader034.fdocuments.net/reader034/viewer/2022052523/555ac1abd8b42ab1128b4c5e/html5/thumbnails/72.jpg)
Comparisons
From Code to Product Lecture 3 — UI Principles — Slide 72 gidgreen.com/course
![Page 73: User Interface Principles](https://reader034.fdocuments.net/reader034/viewer/2022052523/555ac1abd8b42ab1128b4c5e/html5/thumbnails/73.jpg)
Offer, don’t ask
From Code to Product Lecture 3 — UI Principles — Slide 73 gidgreen.com/course
![Page 74: User Interface Principles](https://reader034.fdocuments.net/reader034/viewer/2022052523/555ac1abd8b42ab1128b4c5e/html5/thumbnails/74.jpg)
Offer, don’t ask
From Code to Product Lecture 3 — UI Principles — Slide 74 gidgreen.com/course
Car$ /bin/set-temperature 73fTemperature set OKCar$ /bin/rear-demister onCOMMAND NOT RECOGNIZED
![Page 75: User Interface Principles](https://reader034.fdocuments.net/reader034/viewer/2022052523/555ac1abd8b42ab1128b4c5e/html5/thumbnails/75.jpg)
Overviews
From Code to Product Lecture 3 — UI Principles — Slide 75 gidgreen.com/course
![Page 76: User Interface Principles](https://reader034.fdocuments.net/reader034/viewer/2022052523/555ac1abd8b42ab1128b4c5e/html5/thumbnails/76.jpg)
Autosuggest
From Code to Product Lecture 3 — UI Principles — Slide 76 gidgreen.com/course
![Page 77: User Interface Principles](https://reader034.fdocuments.net/reader034/viewer/2022052523/555ac1abd8b42ab1128b4c5e/html5/thumbnails/77.jpg)
Show what’s old
From Code to Product Lecture 3 — UI Principles — Slide 77 gidgreen.com/course
![Page 78: User Interface Principles](https://reader034.fdocuments.net/reader034/viewer/2022052523/555ac1abd8b42ab1128b4c5e/html5/thumbnails/78.jpg)
Show what’s new
From Code to Product Lecture 3 — UI Principles — Slide 78 gidgreen.com/course
![Page 79: User Interface Principles](https://reader034.fdocuments.net/reader034/viewer/2022052523/555ac1abd8b42ab1128b4c5e/html5/thumbnails/79.jpg)
Consistency
From Code to Product Lecture 3 — UI Principles — Slide 79 gidgreen.com/course
Source: bhc3.com
![Page 80: User Interface Principles](https://reader034.fdocuments.net/reader034/viewer/2022052523/555ac1abd8b42ab1128b4c5e/html5/thumbnails/80.jpg)
Learned mapping
From Code to Product Lecture 3 — UI Principles — Slide 80 gidgreen.com/course
![Page 81: User Interface Principles](https://reader034.fdocuments.net/reader034/viewer/2022052523/555ac1abd8b42ab1128b4c5e/html5/thumbnails/81.jpg)
Learned affordance
From Code to Product Lecture 3 — UI Principles — Slide 81 gidgreen.com/course
![Page 82: User Interface Principles](https://reader034.fdocuments.net/reader034/viewer/2022052523/555ac1abd8b42ab1128b4c5e/html5/thumbnails/82.jpg)
Learned idioms
From Code to Product Lecture 3 — UI Principles — Slide 82 gidgreen.com/course
![Page 83: User Interface Principles](https://reader034.fdocuments.net/reader034/viewer/2022052523/555ac1abd8b42ab1128b4c5e/html5/thumbnails/83.jpg)
Lecture 3
• Introduction • Vision • Cognition • Memory • Action • Emotion
From Code to Product Lecture 3 — UI Principles — Slide 83 gidgreen.com/course
![Page 84: User Interface Principles](https://reader034.fdocuments.net/reader034/viewer/2022052523/555ac1abd8b42ab1128b4c5e/html5/thumbnails/84.jpg)
Action
From Code to Product Lecture 3 — UI Principles — Slide 84 gidgreen.com/course
http
://w
ww
.85q
m.d
e/up
/Big
RedB
utto
n.sw
f
![Page 85: User Interface Principles](https://reader034.fdocuments.net/reader034/viewer/2022052523/555ac1abd8b42ab1128b4c5e/html5/thumbnails/85.jpg)
Goals and subgoals
From Code to Product Lecture 3 — UI Principles — Slide 85 gidgreen.com/course
Make my friend feel better
Send flowers to friend online Call friend up
Wait for flowers to arrive
Find a flowers website Order the flowers
Open web browser
Go to google.com
Type in “flowers” Choose the best site
f l o w e r s
![Page 86: User Interface Principles](https://reader034.fdocuments.net/reader034/viewer/2022052523/555ac1abd8b42ab1128b4c5e/html5/thumbnails/86.jpg)
Execute—Evaluate
From Code to Product Lecture 3 — UI Principles — Slide 86 gidgreen.com/course
Define subgoal
Try something sensible
Was the subgoal
reached?
Next subgoal…
YES! NO
![Page 87: User Interface Principles](https://reader034.fdocuments.net/reader034/viewer/2022052523/555ac1abd8b42ab1128b4c5e/html5/thumbnails/87.jpg)
Execute—Evaluate
From Code to Product Lecture 3 — UI Principles — Slide 87 gidgreen.com/course
Choose the best site
Looks OK, but only first. Back! Seems to be UK
only. Back!
Seems really pricey. Back!
Looks perfect. We’re done!
Wikipedia
![Page 88: User Interface Principles](https://reader034.fdocuments.net/reader034/viewer/2022052523/555ac1abd8b42ab1128b4c5e/html5/thumbnails/88.jpg)
Enabling evaluation
• Every user action – Key presses and mouse clicks
• Instant results, or… – Waiting cursor (0.1s … 1s) – Progress bar (>1s)
• If invisible… – Confirmation message – Activity logs
From Code to Product Lecture 3 — UI Principles — Slide 88 gidgreen.com/course
![Page 89: User Interface Principles](https://reader034.fdocuments.net/reader034/viewer/2022052523/555ac1abd8b42ab1128b4c5e/html5/thumbnails/89.jpg)
Evaluation
From Code to Product Lecture 3 — UI Principles — Slide 89 gidgreen.com/course
![Page 90: User Interface Principles](https://reader034.fdocuments.net/reader034/viewer/2022052523/555ac1abd8b42ab1128b4c5e/html5/thumbnails/90.jpg)
Information scent
• Information = food – We follow a ‘scent’
• Links and category names – Don’t make up words!
• Provide feedback – Scent getting stronger
• Gain vs cost – Good content, easy to find
From Code to Product Lecture 3 — UI Principles — Slide 90 gidgreen.com/course
![Page 91: User Interface Principles](https://reader034.fdocuments.net/reader034/viewer/2022052523/555ac1abd8b42ab1128b4c5e/html5/thumbnails/91.jpg)
Information scent
From Code to Product Lecture 3 — UI Principles — Slide 91 gidgreen.com/course
![Page 92: User Interface Principles](https://reader034.fdocuments.net/reader034/viewer/2022052523/555ac1abd8b42ab1128b4c5e/html5/thumbnails/92.jpg)
Information scent
From Code to Product Lecture 3 — UI Principles — Slide 92 gidgreen.com/course
![Page 93: User Interface Principles](https://reader034.fdocuments.net/reader034/viewer/2022052523/555ac1abd8b42ab1128b4c5e/html5/thumbnails/93.jpg)
Direct manipulation
From Code to Product Lecture 3 — UI Principles — Slide 93 gidgreen.com/course
Phot
o by
gar
rykn
ight
![Page 94: User Interface Principles](https://reader034.fdocuments.net/reader034/viewer/2022052523/555ac1abd8b42ab1128b4c5e/html5/thumbnails/94.jpg)
Direct manipulation
From Code to Product Lecture 3 — UI Principles — Slide 94 gidgreen.com/course
![Page 95: User Interface Principles](https://reader034.fdocuments.net/reader034/viewer/2022052523/555ac1abd8b42ab1128b4c5e/html5/thumbnails/95.jpg)
Reversibility
From Code to Product Lecture 3 — UI Principles — Slide 95 gidgreen.com/course
![Page 96: User Interface Principles](https://reader034.fdocuments.net/reader034/viewer/2022052523/555ac1abd8b42ab1128b4c5e/html5/thumbnails/96.jpg)
Dangerous actions
From Code to Product Lecture 3 — UI Principles — Slide 96 gidgreen.com/course
![Page 97: User Interface Principles](https://reader034.fdocuments.net/reader034/viewer/2022052523/555ac1abd8b42ab1128b4c5e/html5/thumbnails/97.jpg)
Dangerous actions
From Code to Product Lecture 3 — UI Principles — Slide 97 gidgreen.com/course
![Page 98: User Interface Principles](https://reader034.fdocuments.net/reader034/viewer/2022052523/555ac1abd8b42ab1128b4c5e/html5/thumbnails/98.jpg)
Common actions
From Code to Product Lecture 3 — UI Principles — Slide 98 gidgreen.com/course
![Page 99: User Interface Principles](https://reader034.fdocuments.net/reader034/viewer/2022052523/555ac1abd8b42ab1128b4c5e/html5/thumbnails/99.jpg)
Common actions
From Code to Product Lecture 3 — UI Principles — Slide 99 gidgreen.com/course
![Page 100: User Interface Principles](https://reader034.fdocuments.net/reader034/viewer/2022052523/555ac1abd8b42ab1128b4c5e/html5/thumbnails/100.jpg)
Lecture 3
• Introduction • Vision • Cognition • Memory • Action • Emotion
From Code to Product Lecture 3 — UI Principles — Slide 100 gidgreen.com/course
![Page 101: User Interface Principles](https://reader034.fdocuments.net/reader034/viewer/2022052523/555ac1abd8b42ab1128b4c5e/html5/thumbnails/101.jpg)
Emotion
From Code to Product Lecture 3 — UI Principles — Slide 101 gidgreen.com/course
![Page 102: User Interface Principles](https://reader034.fdocuments.net/reader034/viewer/2022052523/555ac1abd8b42ab1128b4c5e/html5/thumbnails/102.jpg)
Waiting…
From Code to Product Lecture 3 — UI Principles — Slide 102 gidgreen.com/course
![Page 103: User Interface Principles](https://reader034.fdocuments.net/reader034/viewer/2022052523/555ac1abd8b42ab1128b4c5e/html5/thumbnails/103.jpg)
Time limits
From Code to Product Lecture 3 — UI Principles — Slide 103 gidgreen.com/course
0.01 sec
0.1 sec
1 sec
10 sec
Moment of perception Stylus input on screen
Hand–eye coordination Clicks, drags, keys
Gap in conversation Waiting without progress bar
Concentration on mini-task Wizard step, field entry
![Page 104: User Interface Principles](https://reader034.fdocuments.net/reader034/viewer/2022052523/555ac1abd8b42ab1128b4c5e/html5/thumbnails/104.jpg)
Avoid insults
From Code to Product Lecture 3 — UI Principles — Slide 104 gidgreen.com/course
![Page 105: User Interface Principles](https://reader034.fdocuments.net/reader034/viewer/2022052523/555ac1abd8b42ab1128b4c5e/html5/thumbnails/105.jpg)
Color
From Code to Product Lecture 3 — UI Principles — Slide 105 gidgreen.com/course
![Page 106: User Interface Principles](https://reader034.fdocuments.net/reader034/viewer/2022052523/555ac1abd8b42ab1128b4c5e/html5/thumbnails/106.jpg)
Color
From Code to Product Lecture 3 — UI Principles — Slide 106 gidgreen.com/course
![Page 107: User Interface Principles](https://reader034.fdocuments.net/reader034/viewer/2022052523/555ac1abd8b42ab1128b4c5e/html5/thumbnails/107.jpg)
Design
From Code to Product Lecture 3 — UI Principles — Slide 107 gidgreen.com/course
![Page 108: User Interface Principles](https://reader034.fdocuments.net/reader034/viewer/2022052523/555ac1abd8b42ab1128b4c5e/html5/thumbnails/108.jpg)
But…
From Code to Product Lecture 3 — UI Principles — Slide 108 gidgreen.com/course
![Page 109: User Interface Principles](https://reader034.fdocuments.net/reader034/viewer/2022052523/555ac1abd8b42ab1128b4c5e/html5/thumbnails/109.jpg)
Feeling served
From Code to Product Lecture 3 — UI Principles — Slide 109 gidgreen.com/course
• What you want • When you want it • How you like it • No grunt work • No criticism • No “personality” • Cleanly presented
![Page 110: User Interface Principles](https://reader034.fdocuments.net/reader034/viewer/2022052523/555ac1abd8b42ab1128b4c5e/html5/thumbnails/110.jpg)
Books
From Code to Product Lecture 3 — UI Principles — Slide 110 gidgreen.com/course
![Page 111: User Interface Principles](https://reader034.fdocuments.net/reader034/viewer/2022052523/555ac1abd8b42ab1128b4c5e/html5/thumbnails/111.jpg)
Memory
From Code to Product Lecture 3 — UI Principles — Slide 111 gidgreen.com/course