4 User Interface Design From Code to Product gidgreen.com/course - - PowerPoint PPT Presentation

▶
4 user interface design
SMART_READER_LITE
LIVE PREVIEW

4 User Interface Design From Code to Product gidgreen.com/course - - PowerPoint PPT Presentation

Sep 14, 2023 134 likes •902 views

4 User Interface Design From Code to Product gidgreen.com/course Or how to prevent this Source: businesspundit.com From Code to Product Lecture 4 UI Design Slide 2 gidgreen.com/course Some reminders Products are for people

slide-1
SLIDE 1

4 — User Interface Design

From Code to Product gidgreen.com/course

slide-2
SLIDE 2

Or… how to prevent this

From Code to Product Lecture 4 — UI Design — Slide 2 gidgreen.com/course

Source: businesspundit.com

slide-3
SLIDE 3

Some reminders

  • Products are for people
  • People have limited…

– Vision – Cognition – Memory

  • People act and respond in certain ways

– (but not all people are the same)

  • For people, UI = product

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

slide-4
SLIDE 4

Lecture 4

  • The design process
  • Common examples

– User registration – Other onboarding – Search

  • Books and tools

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

slide-5
SLIDE 5

RememberTheBirthdays.com

  • Birthday reminder website

– Also: anniversaries, holidays

  • Basic service is free

– Pay to send greeting cards

  • Easy to enter birthdays

– Imports from Facebook

  • Reminders by email or SMS

From Code to Product Lecture 4 — UI Design — Slide 5 gidgreen.com/course

slide-6
SLIDE 6

The process

  • User and scenario
  • Entities, properties, actions
  • Grouping
  • Initial sketches
  • Key paths
  • Other paths
  • Visual design

From Code to Product Lecture 4 — UI Design — Slide 6 gidgreen.com/course

slide-7
SLIDE 7

User and scenario

  • Who would use it?

– Who wouldn’t?

  • What’s their goal?
  • When and where?
  • What devices?
  • How do they think?
  • What skills?

From Code to Product Lecture 4 — UI Design — Slide 7 gidgreen.com/course

Photo by Mushroom Princess

slide-8
SLIDE 8

Building a user profile

  • Identify users

– Age, gender, country, education

  • Interviews

– How do they do it now? – Propose the idea

  • Observation

– Using something similar

  • Stereotypes

From Code to Product Lecture 4 — UI Design — Slide 8 gidgreen.com/course

slide-9
SLIDE 9

Avoiding stereotypes

From Code to Product Lecture 4 — UI Design — Slide 9 gidgreen.com/course

slide-10
SLIDE 10

User goals

  • Experience goals (feel)

– Feel in control – Sense of achievement

  • End goals (do)

– Stop forgetting birthdays – Get great gifts

  • Life goals (be)

– Be loved by friends and family

From Code to Product Lecture 4 — UI Design — Slide 10 gidgreen.com/course

slide-11
SLIDE 11

RTB.com Entities

  • The user
  • Other people
  • Recurring events

– Birthdays – Anniversaries – Holidays

  • Event instances
  • Greeting card

From Code to Product Lecture 4 — UI Design — Slide 11 gidgreen.com/course

slide-12
SLIDE 12

Mary’s 2012 card Sue’s 2012 card J&M 14th card J&M 13th card John’s 41st card

Entity relationships

From Code to Product Lecture 4 — UI Design — Slide 12 gidgreen.com/course

Mary

John’s 41st birthday John’s 42nd birthday John’s 43rd birthday J&M 13th anniversary J&M 14th anniversary J&M 15th anniversary New year 2011 New year 2012 New year 2013

Sue John and Mary’s Anniversary John New year (holiday) John’s Birthday

slide-13
SLIDE 13

Entity: The user

Properties Actions Username Register new user Email address Log in existing user Password Log out Name Change details Mobile number Change preferences Birthday Reminding preferences

From Code to Product Lecture 4 — UI Design — Slide 13 gidgreen.com/course

slide-14
SLIDE 14

Entity: Recurring event

Properties Actions Date every year Create recurring event Event type Delete recurring event Event name Edit recurring event Event comments View sent cards Related people

From Code to Product Lecture 4 — UI Design — Slide 14 gidgreen.com/course

slide-15
SLIDE 15

Entity: Event instance

Properties Actions Date with year View on calendar Related recurring event View event instance View recurring event

From Code to Product Lecture 4 — UI Design — Slide 15 gidgreen.com/course

slide-16
SLIDE 16

Entity: Other person

Properties Actions Name View related events Address View sent cards Birthday Create Delete

From Code to Product Lecture 4 — UI Design — Slide 16 gidgreen.com/course

slide-17
SLIDE 17

Grouping: Dashboard

  • Global navigation bar

– Include the user’s name to show logged in

  • Calendar for next 2 months

– Links to recurring events – Link to view broader calendar

  • Up to 3 recently sent cards
  • Scrollable list of events

– Link to event editor

From Code to Product Lecture 4 — UI Design — Slide 17 gidgreen.com/course

slide-18
SLIDE 18

Grouping: Event editor

  • Global navigation bar
  • Form fields:

– Event type – Date – Name – Comments – People

  • Save / Cancel buttons

From Code to Product Lecture 4 — UI Design — Slide 18 gidgreen.com/course

slide-19
SLIDE 19

Grouping: User profile

  • View username
  • Edit fields for:

– Name – Email address – Mobile number – Birthday – Reminding preferences

  • Separate change password form

From Code to Product Lecture 4 — UI Design — Slide 19 gidgreen.com/course

slide-20
SLIDE 20

Sketch: Dashboard

From Code to Product Lecture 4 — UI Design — Slide 20 gidgreen.com/course

More link?

Card ad?

slide-21
SLIDE 21

Sketch: Event editor

From Code to Product Lecture 4 — UI Design — Slide 21 gidgreen.com/course

slide-22
SLIDE 22

Key paths

  • User registration
  • Adding first few events
  • Importing birthdays from Facebook
  • User login
  • Viewing upcoming events
  • Sending a greeting card

From Code to Product Lecture 4 — UI Design — Slide 22 gidgreen.com/course

slide-23
SLIDE 23

Key path: adding first events

From Code to Product Lecture 4 — UI Design — Slide 23 gidgreen.com/course

1

slide-24
SLIDE 24

Key path: adding first events

From Code to Product Lecture 4 — UI Design — Slide 24 gidgreen.com/course

2 4 5 Cancel 6 John Birthday 3

slide-25
SLIDE 25

Revised: Event creator

From Code to Product Lecture 4 — UI Design — Slide 25 gidgreen.com/course

slide-26
SLIDE 26

Other paths

  • Forgot my password
  • Deleting an event
  • Finding a person by name
  • Printing a calendar
  • Sharing data with other users
  • Change mobile number

From Code to Product Lecture 4 — UI Design — Slide 26 gidgreen.com/course

slide-27
SLIDE 27

Visual design

  • After functional design
  • Sketch a few options

– Much more subjective

  • Communicate right message
  • Apply consistently over screens
  • Beware: it’s a time sink

– Users don’t care that much

From Code to Product Lecture 4 — UI Design — Slide 27 gidgreen.com/course

slide-28
SLIDE 28

To keep in mind

  • Design for a specific user

– Deal with variants later on

  • Avoid inventing paradigms

– Example: The 3D fantasy

  • Study popular products

– But don’t rip them off

  • Constantly collect feedback
  • With time, it gets faster

From Code to Product Lecture 4 — UI Design — Slide 28 gidgreen.com/course

slide-29
SLIDE 29

Lecture 4

  • The design process
  • Common examples

– User registration – Other onboarding – Search

  • Books and tools

From Code to Product Lecture 4 — UI Design — Slide 29 gidgreen.com/course

slide-30
SLIDE 30

Twitter home page

From Code to Product Lecture 4 — UI Design — Slide 30 gidgreen.com/course

slide-31
SLIDE 31

Twitter sign up

From Code to Product Lecture 4 — UI Design — Slide 31 gidgreen.com/course

slide-32
SLIDE 32

Facebook

From Code to Product Lecture 4 — UI Design — Slide 32 gidgreen.com/course

No username!

slide-33
SLIDE 33

Hotmail

From Code to Product Lecture 4 — UI Design — Slide 33 gidgreen.com/course

slide-34
SLIDE 34

To username or not to username

From Code to Product Lecture 4 — UI Design — Slide 34 gidgreen.com/course

Advantages Disadvantages

Can be 100% permanent Another field at registration Semi-anonymous identity for user interactions Likely to be forgotten May provide additional useful information Prevents detection of wrong email addresses Natural way to address user Can be inappropriate Two users want the same one

slide-35
SLIDE 35

CAPTCHAs

  • Prevent automated scripts
  • Based on the Turing test

– Easy for humans, hard for computers

  • Problems

– Accessibility – Can be hard for regular people – Bypassed with cheap labor ($0.001)

  • reCAPTCHA

From Code to Product Lecture 4 — UI Design — Slide 35 gidgreen.com/course

slide-36
SLIDE 36

Hints

From Code to Product Lecture 4 — UI Design — Slide 36 gidgreen.com/course

slide-37
SLIDE 37

Validation

From Code to Product Lecture 4 — UI Design — Slide 37 gidgreen.com/course

slide-38
SLIDE 38

Passwords

From Code to Product Lecture 4 — UI Design — Slide 38 gidgreen.com/course

slide-39
SLIDE 39

Usernames

From Code to Product Lecture 4 — UI Design — Slide 39 gidgreen.com/course

slide-40
SLIDE 40

Email confirmation

From Code to Product Lecture 4 — UI Design — Slide 40 gidgreen.com/course

slide-41
SLIDE 41

First steps

From Code to Product Lecture 4 — UI Design — Slide 41 gidgreen.com/course

slide-42
SLIDE 42

Welcome email

From Code to Product Lecture 4 — UI Design — Slide 42 gidgreen.com/course

slide-43
SLIDE 43

Wrong username/password

From Code to Product Lecture 4 — UI Design — Slide 43 gidgreen.com/course

slide-44
SLIDE 44

Lecture 4

  • The design process
  • Common examples

– User registration – Other onboarding – Search

  • Books and tools

From Code to Product Lecture 4 — UI Design — Slide 44 gidgreen.com/course

slide-45
SLIDE 45

Evernote home page

From Code to Product Lecture 4 — UI Design — Slide 45 gidgreen.com/course

slide-46
SLIDE 46

Finishing signup

From Code to Product Lecture 4 — UI Design — Slide 46 gidgreen.com/course

slide-47
SLIDE 47

Download page

From Code to Product Lecture 4 — UI Design — Slide 47 gidgreen.com/course

slide-48
SLIDE 48

Attention to detail

From Code to Product Lecture 4 — UI Design — Slide 48 gidgreen.com/course

Safari on Mac Firefox on Mac Chrome on Mac (and Opera…)

slide-49
SLIDE 49

Installation

From Code to Product Lecture 4 — UI Design — Slide 49 gidgreen.com/course

slide-50
SLIDE 50

Opening the app

From Code to Product Lecture 4 — UI Design — Slide 50 gidgreen.com/course

slide-51
SLIDE 51

First editing window

From Code to Product Lecture 4 — UI Design — Slide 51 gidgreen.com/course

slide-52
SLIDE 52

Initial tips

From Code to Product Lecture 4 — UI Design — Slide 52 gidgreen.com/course

slide-53
SLIDE 53

Finally, the actual product?

From Code to Product Lecture 4 — UI Design — Slide 53 gidgreen.com/course

slide-54
SLIDE 54

No, still the onboarding (game)

From Code to Product Lecture 4 — UI Design — Slide 54 gidgreen.com/course

slide-55
SLIDE 55

Confirmation optional

From Code to Product Lecture 4 — UI Design — Slide 55 gidgreen.com/course

slide-56
SLIDE 56

Lecture 4

  • The design process
  • Common examples

– User registration – Other onboarding – Search

  • Books and tools

From Code to Product Lecture 4 — UI Design — Slide 56 gidgreen.com/course

slide-57
SLIDE 57

The search box

From Code to Product Lecture 4 — UI Design — Slide 57 gidgreen.com/course

slide-58
SLIDE 58

Exploratory search

From Code to Product Lecture 4 — UI Design — Slide 58 gidgreen.com/course

slide-59
SLIDE 59

Navigational search

From Code to Product Lecture 4 — UI Design — Slide 59 gidgreen.com/course

slide-60
SLIDE 60

Exploratory search

From Code to Product Lecture 4 — UI Design — Slide 60 gidgreen.com/course

slide-61
SLIDE 61

Navigational search

From Code to Product Lecture 4 — UI Design — Slide 61 gidgreen.com/course

slide-62
SLIDE 62

Autosuggest

From Code to Product Lecture 4 — UI Design — Slide 62 gidgreen.com/course

slide-63
SLIDE 63

Autosuggest sources

  • Database of matches

– Most relevant matches with prefix

  • Behavior of all users

– Most common searches with prefix

  • Behavior of this user

– Searches closest to user’s activity

From Code to Product Lecture 4 — UI Design — Slide 63 gidgreen.com/course

slide-64
SLIDE 64

Autosuggest dangers

From Code to Product Lecture 4 — UI Design — Slide 64 gidgreen.com/course

slide-65
SLIDE 65

Search results page

From Code to Product Lecture 4 — UI Design — Slide 65 gidgreen.com/course

slide-66
SLIDE 66

Search results page

From Code to Product Lecture 4 — UI Design — Slide 66 gidgreen.com/course

slide-67
SLIDE 67

Ranking factors

  • Number of matches
  • Location of match
  • Importance of result
  • Previously visited by user?
  • User’s other previous activity
  • Click-throughs of other users
  • Date

From Code to Product Lecture 4 — UI Design — Slide 67 gidgreen.com/course

slide-68
SLIDE 68

Combining factors

  • Multiplicative

– Score = Relevance × Importance

  • Probabilistic principle

– P(relevant to user | user search)

  • But consider spread

– P(at least one result is good | …)

  • This stuff is really hard…

From Code to Product Lecture 4 — UI Design — Slide 68 gidgreen.com/course

slide-69
SLIDE 69

Advanced search

From Code to Product Lecture 4 — UI Design — Slide 69 gidgreen.com/course

slide-70
SLIDE 70

Advanced search

From Code to Product Lecture 4 — UI Design — Slide 70 gidgreen.com/course

slide-71
SLIDE 71

Faceted navigation

From Code to Product Lecture 4 — UI Design — Slide 71 gidgreen.com/course

slide-72
SLIDE 72

Faceted navigation

From Code to Product Lecture 4 — UI Design — Slide 72 gidgreen.com/course

slide-73
SLIDE 73

Lecture 4

  • The design process
  • Common examples

– User registration – Other onboarding – Search

  • Books and tools

From Code to Product Lecture 4 — UI Design — Slide 73 gidgreen.com/course

slide-74
SLIDE 74

Mock-up tools

From Code to Product Lecture 4 — UI Design — Slide 74 gidgreen.com/course

slide-75
SLIDE 75

Books

From Code to Product Lecture 4 — UI Design — Slide 75 gidgreen.com/course

slide-76
SLIDE 76

Books

From Code to Product Lecture 4 — UI Design — Slide 76 gidgreen.com/course