3 User Interface Principles From Code to Product - - PowerPoint PPT Presentation

▶
3 user interface principles
SMART_READER_LITE
LIVE PREVIEW

3 User Interface Principles From Code to Product - - PowerPoint PPT Presentation

Jan 20, 2024 161 likes •1.23k views

3 User Interface Principles From Code to Product gidgreen.com/course 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

slide-1
SLIDE 1

3 — User Interface Principles

From Code to Product gidgreen.com/course

slide-2
SLIDE 2

User Interface

“The aspects of a computer system or program which can be seen (or heard or

  • therwise 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 2 gidgreen.com/course

slide-3
SLIDE 3

Layers of a product

From Code to Product Lecture 3 — UI Principles — Slide 3 gidgreen.com/course

Core

slide-4
SLIDE 4

The problem

From Code to Product Lecture 3 — UI Principles — Slide 4 gidgreen.com/course

I want to see this guy’s face MOV r0, #10 ADD r0, r0, r1

How do we bridge this gap?

slide-5
SLIDE 5

The solution

From Code to Product Lecture 3 — UI Principles — Slide 5 gidgreen.com/course

I want to see this guy’s face MOV r0, #10 ADD r0, r0, r1 I can use Skype

  • n my mobile

I will press his name in the app Function call in Skype app Touch event detected

slide-6
SLIDE 6

Channels of communication

From Code to Product Lecture 3 — UI Principles — Slide 6 gidgreen.com/course

Pressing buttons Pointing on screen Talking and singing Being photographed Moving the device Flashing lights Image on screen Playing sound Vibration

slide-7
SLIDE 7

But it’s still very limited

From Code to Product Lecture 3 — UI Principles — Slide 7 gidgreen.com/course

slide-8
SLIDE 8

Lecture 3

  • Introduction
  • Vision
  • Cognition
  • Memory
  • Action
  • Emotion

From Code to Product Lecture 3 — UI Principles — Slide 8 gidgreen.com/course

slide-9
SLIDE 9

Proximity

From Code to Product Lecture 3 — UI Principles — Slide 9 gidgreen.com/course

slide-10
SLIDE 10

Similarity

From Code to Product Lecture 3 — UI Principles — Slide 10 gidgreen.com/course

slide-11
SLIDE 11

Similarity

From Code to Product Lecture 3 — UI Principles — Slide 11 gidgreen.com/course

slide-12
SLIDE 12

Movement

From Code to Product Lecture 3 — UI Principles — Slide 12 gidgreen.com/course

slide-13
SLIDE 13

Proximity

From Code to Product Lecture 3 — UI Principles — Slide 13 gidgreen.com/course

slide-14
SLIDE 14

Similarity

From Code to Product Lecture 3 — UI Principles — Slide 14 gidgreen.com/course

slide-15
SLIDE 15

Similarity

From Code to Product Lecture 3 — UI Principles — Slide 15 gidgreen.com/course

slide-16
SLIDE 16

Continuity

From Code to Product Lecture 3 — UI Principles — Slide 16 gidgreen.com/course

slide-17
SLIDE 17

Symmetry

From Code to Product Lecture 3 — UI Principles — Slide 17 gidgreen.com/course

slide-18
SLIDE 18

Continuity and Symmetry

From Code to Product Lecture 3 — UI Principles — Slide 18 gidgreen.com/course

slide-19
SLIDE 19

Ambiguity

From Code to Product Lecture 3 — UI Principles — Slide 19 gidgreen.com/course

slide-20
SLIDE 20

Grids

From Code to Product Lecture 3 — UI Principles — Slide 20 gidgreen.com/course

slide-21
SLIDE 21

Figure and Ground

From Code to Product Lecture 3 — UI Principles — Slide 21 gidgreen.com/course Photo by Sha Sha Chu

slide-22
SLIDE 22

Figure and Ground

From Code to Product Lecture 3 — UI Principles — Slide 22 gidgreen.com/course

slide-23
SLIDE 23

Hierarchy

From Code to Product Lecture 3 — UI Principles — Slide 23 gidgreen.com/course

1 2 4 3 5

slide-24
SLIDE 24

Tunnel Vision

From Code to Product Lecture 3 — UI Principles — Slide 24 gidgreen.com/course Photo by Ali Khurshid

slide-25
SLIDE 25

Tunnel Vision

From Code to Product Lecture 3 — UI Principles — Slide 25 gidgreen.com/course

slide-26
SLIDE 26

Visual affordance

From Code to Product Lecture 3 — UI Principles — Slide 26 gidgreen.com/course

Source: ChrisElyea.com

slide-27
SLIDE 27

Visual affordance

From Code to Product Lecture 3 — UI Principles — Slide 27 gidgreen.com/course

slide-28
SLIDE 28

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

slide-29
SLIDE 29

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

slide-30
SLIDE 30

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

slide-31
SLIDE 31

Prominence

From Code to Product Lecture 3 — UI Principles — Slide 31 gidgreen.com/course

slide-32
SLIDE 32

Prominence

From Code to Product Lecture 3 — UI Principles — Slide 32 gidgreen.com/course

1 2 3 4

slide-33
SLIDE 33

Sequence

From Code to Product Lecture 3 — UI Principles — Slide 33 gidgreen.com/course

Source: xkcd.com

slide-34
SLIDE 34

Sequence

From Code to Product Lecture 3 — UI Principles — Slide 34 gidgreen.com/course

slide-35
SLIDE 35

Sequence

From Code to Product Lecture 3 — UI Principles — Slide 35 gidgreen.com/course

slide-36
SLIDE 36

Sequence

From Code to Product Lecture 3 — UI Principles — Slide 36 gidgreen.com/course

slide-37
SLIDE 37

Sequence

From Code to Product Lecture 3 — UI Principles — Slide 37 gidgreen.com/course

slide-38
SLIDE 38

Clutter

From Code to Product Lecture 3 — UI Principles — Slide 38 gidgreen.com/course

Photo by Metro Centric

slide-39
SLIDE 39

Clutter

From Code to Product Lecture 3 — UI Principles — Slide 39 gidgreen.com/course

slide-40
SLIDE 40

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

slide-41
SLIDE 41

Minimalism

From Code to Product Lecture 3 — UI Principles — Slide 41 gidgreen.com/course

The face of a $400b company

slide-42
SLIDE 42

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 42 gidgreen.com/course

slide-43
SLIDE 43

Lecture 3

  • Introduction
  • Vision
  • Cognition
  • Memory
  • Action
  • Emotion

From Code to Product Lecture 3 — UI Principles — Slide 43 gidgreen.com/course

slide-44
SLIDE 44

The ideal interface

From Code to Product Lecture 3 — UI Principles — Slide 44 gidgreen.com/course

slide-45
SLIDE 45

Implementation model

From Code to Product Lecture 3 — UI Principles — Slide 45 gidgreen.com/course

slide-46
SLIDE 46

Mental model

From Code to Product Lecture 3 — UI Principles — Slide 46 gidgreen.com/course

slide-47
SLIDE 47

Talk to people

From Code to Product Lecture 3 — UI Principles — Slide 47 gidgreen.com/course

slide-48
SLIDE 48

Metaphors

From Code to Product Lecture 3 — UI Principles — Slide 48 gidgreen.com/course

slide-49
SLIDE 49

Overly literal metaphors

From Code to Product Lecture 3 — UI Principles — Slide 49 gidgreen.com/course

slide-50
SLIDE 50

Mapping

From Code to Product Lecture 3 — UI Principles — Slide 50 gidgreen.com/course

Source: UXHero.com

slide-51
SLIDE 51

Mapping

From Code to Product Lecture 3 — UI Principles — Slide 51 gidgreen.com/course

þ ý þ þ ý

slide-52
SLIDE 52

Unnecessary burdens

From Code to Product Lecture 3 — UI Principles — Slide 52 gidgreen.com/course

slide-53
SLIDE 53

Unnecessary burdens

From Code to Product Lecture 3 — UI Principles — Slide 53 gidgreen.com/course

slide-54
SLIDE 54

This one’s for real

From Code to Product Lecture 3 — UI Principles — Slide 54 gidgreen.com/course

adminapps.utep.edu/changepassword

slide-55
SLIDE 55

Examples + Defaults

From Code to Product Lecture 3 — UI Principles — Slide 55 gidgreen.com/course

slide-56
SLIDE 56

Interruptions

From Code to Product Lecture 3 — UI Principles — Slide 56 gidgreen.com/course

slide-57
SLIDE 57

Interruptions

From Code to Product Lecture 3 — UI Principles — Slide 57 gidgreen.com/course

slide-58
SLIDE 58

Lecture 3

  • Introduction
  • Vision
  • Cognition
  • Memory
  • Action
  • Emotion

From Code to Product Lecture 3 — UI Principles — Slide 58 gidgreen.com/course

slide-59
SLIDE 59

Two types of memory

From Code to Product Lecture 3 — UI Principles — Slide 59 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

slide-60
SLIDE 60

Modes

From Code to Product Lecture 3 — UI Principles — Slide 60 gidgreen.com/course

slide-61
SLIDE 61

Modes

From Code to Product Lecture 3 — UI Principles — Slide 61 gidgreen.com/course

slide-62
SLIDE 62

Modes

From Code to Product Lecture 3 — UI Principles — Slide 62 gidgreen.com/course

Drawing Selection

slide-63
SLIDE 63

Modes

From Code to Product Lecture 3 — UI Principles — Slide 63 gidgreen.com/course

slide-64
SLIDE 64

Context

From Code to Product Lecture 3 — UI Principles — Slide 64 gidgreen.com/course

Photo by jima

slide-65
SLIDE 65

Context

From Code to Product Lecture 3 — UI Principles — Slide 65 gidgreen.com/course

slide-66
SLIDE 66

Instructions

From Code to Product Lecture 3 — UI Principles — Slide 66 gidgreen.com/course

Image by Zoagli

slide-67
SLIDE 67

Instructions

From Code to Product Lecture 3 — UI Principles — Slide 67 gidgreen.com/course

slide-68
SLIDE 68

Instructions

From Code to Product Lecture 3 — UI Principles — Slide 68 gidgreen.com/course

slide-69
SLIDE 69

Comparisons

From Code to Product Lecture 3 — UI Principles — Slide 69 gidgreen.com/course

slide-70
SLIDE 70

Offer, don’t ask

From Code to Product Lecture 3 — UI Principles — Slide 70 gidgreen.com/course

slide-71
SLIDE 71

Offer, don’t ask

From Code to Product Lecture 3 — UI Principles — Slide 71 gidgreen.com/course

Car$ /bin/set-temperature 73f Temperature set OK Car$ /bin/rear-demister on COMMAND NOT RECOGNIZED

slide-72
SLIDE 72

Overviews

From Code to Product Lecture 3 — UI Principles — Slide 72 gidgreen.com/course

slide-73
SLIDE 73

Autosuggest

From Code to Product Lecture 3 — UI Principles — Slide 73 gidgreen.com/course

slide-74
SLIDE 74

Show what’s old

From Code to Product Lecture 3 — UI Principles — Slide 74 gidgreen.com/course

slide-75
SLIDE 75

Show what’s new

From Code to Product Lecture 3 — UI Principles — Slide 75 gidgreen.com/course

slide-76
SLIDE 76

Consistency

From Code to Product Lecture 3 — UI Principles — Slide 76 gidgreen.com/course

Source: bhc3.com

slide-77
SLIDE 77

Learned mapping

From Code to Product Lecture 3 — UI Principles — Slide 77 gidgreen.com/course

slide-78
SLIDE 78

Learned affordance

From Code to Product Lecture 3 — UI Principles — Slide 78 gidgreen.com/course

slide-79
SLIDE 79

Learned idioms

From Code to Product Lecture 3 — UI Principles — Slide 79 gidgreen.com/course

slide-80
SLIDE 80

Lecture 3

  • Introduction
  • Vision
  • Cognition
  • Memory
  • Action
  • Emotion

From Code to Product Lecture 3 — UI Principles — Slide 80 gidgreen.com/course

slide-81
SLIDE 81

Action

From Code to Product Lecture 3 — UI Principles — Slide 81 gidgreen.com/course

http://www.85qm.de/up/BigRedButton.swf

slide-82
SLIDE 82

Goals and subgoals

From Code to Product Lecture 3 — UI Principles — Slide 82 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

slide-83
SLIDE 83

Execute—Evaluate

From Code to Product Lecture 3 — UI Principles — Slide 83 gidgreen.com/course

Define subgoal Try something sensible Was the subgoal reached? Next subgoal…

YES! NO

slide-84
SLIDE 84

Execute—Evaluate

From Code to Product Lecture 3 — UI Principles — Slide 84 gidgreen.com/course

Choose the best site

Looks OK, but

  • nly first. Back!

Seems to be UK

  • nly. Back!

Seems really

  • pricey. Back!

Looks perfect. We’re done!

Wikipedia

slide-85
SLIDE 85

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 85 gidgreen.com/course

slide-86
SLIDE 86

Evaluation

From Code to Product Lecture 3 — UI Principles — Slide 86 gidgreen.com/course

slide-87
SLIDE 87

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 87 gidgreen.com/course

slide-88
SLIDE 88

Direct manipulation

From Code to Product Lecture 3 — UI Principles — Slide 88 gidgreen.com/course

Photo by garryknight

slide-89
SLIDE 89

Direct manipulation

From Code to Product Lecture 3 — UI Principles — Slide 89 gidgreen.com/course

slide-90
SLIDE 90

Reversibility

From Code to Product Lecture 3 — UI Principles — Slide 90 gidgreen.com/course

slide-91
SLIDE 91

Dangerous actions

From Code to Product Lecture 3 — UI Principles — Slide 91 gidgreen.com/course

slide-92
SLIDE 92

Dangerous actions

From Code to Product Lecture 3 — UI Principles — Slide 92 gidgreen.com/course

slide-93
SLIDE 93

Common actions

From Code to Product Lecture 3 — UI Principles — Slide 93 gidgreen.com/course

slide-94
SLIDE 94

Common actions

From Code to Product Lecture 3 — UI Principles — Slide 94 gidgreen.com/course

slide-95
SLIDE 95

Lecture 3

  • Introduction
  • Vision
  • Cognition
  • Memory
  • Action
  • Emotion

From Code to Product Lecture 3 — UI Principles — Slide 95 gidgreen.com/course

slide-96
SLIDE 96

Emotion

From Code to Product Lecture 3 — UI Principles — Slide 96 gidgreen.com/course

slide-97
SLIDE 97

Waiting…

From Code to Product Lecture 3 — UI Principles — Slide 97 gidgreen.com/course

slide-98
SLIDE 98

Time limits

From Code to Product Lecture 3 — UI Principles — Slide 98 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

slide-99
SLIDE 99

Avoid insults

From Code to Product Lecture 3 — UI Principles — Slide 99 gidgreen.com/course

slide-100
SLIDE 100

Bestow achievements

From Code to Product Lecture 3 — UI Principles — Slide 100 gidgreen.com/course

slide-101
SLIDE 101

Color

From Code to Product Lecture 3 — UI Principles — Slide 101 gidgreen.com/course

slide-102
SLIDE 102

Color

From Code to Product Lecture 3 — UI Principles — Slide 102 gidgreen.com/course

slide-103
SLIDE 103

Design

From Code to Product Lecture 3 — UI Principles — Slide 103 gidgreen.com/course

slide-104
SLIDE 104

But…

From Code to Product Lecture 3 — UI Principles — Slide 104 gidgreen.com/course

slide-105
SLIDE 105

Books

From Code to Product Lecture 3 — UI Principles — Slide 105 gidgreen.com/course