4 — user interface design - gideon greenspan · lecture 4 • the design process • common...
TRANSCRIPT
![Page 1: 4 — User Interface Design - Gideon Greenspan · Lecture 4 • The design process • Common examples – User registration – Other onboarding – Search • Books and tools](https://reader034.vdocuments.site/reader034/viewer/2022042105/5e832693f14a8a291b116d1d/html5/thumbnails/1.jpg)
4 — User Interface Design
From Code to Product gidgreen.com/course
![Page 2: 4 — User Interface Design - Gideon Greenspan · Lecture 4 • The design process • Common examples – User registration – Other onboarding – Search • Books and tools](https://reader034.vdocuments.site/reader034/viewer/2022042105/5e832693f14a8a291b116d1d/html5/thumbnails/2.jpg)
Or… how to prevent this
From Code to Product Lecture 4 — UI Design — Slide 2 gidgreen.com/course
Sour
ce:
busi
ness
pund
it.c
om
![Page 3: 4 — User Interface Design - Gideon Greenspan · Lecture 4 • The design process • Common examples – User registration – Other onboarding – Search • Books and tools](https://reader034.vdocuments.site/reader034/viewer/2022042105/5e832693f14a8a291b116d1d/html5/thumbnails/3.jpg)
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
![Page 4: 4 — User Interface Design - Gideon Greenspan · Lecture 4 • The design process • Common examples – User registration – Other onboarding – Search • Books and tools](https://reader034.vdocuments.site/reader034/viewer/2022042105/5e832693f14a8a291b116d1d/html5/thumbnails/4.jpg)
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
![Page 5: 4 — User Interface Design - Gideon Greenspan · Lecture 4 • The design process • Common examples – User registration – Other onboarding – Search • Books and tools](https://reader034.vdocuments.site/reader034/viewer/2022042105/5e832693f14a8a291b116d1d/html5/thumbnails/5.jpg)
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
![Page 6: 4 — User Interface Design - Gideon Greenspan · Lecture 4 • The design process • Common examples – User registration – Other onboarding – Search • Books and tools](https://reader034.vdocuments.site/reader034/viewer/2022042105/5e832693f14a8a291b116d1d/html5/thumbnails/6.jpg)
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
![Page 7: 4 — User Interface Design - Gideon Greenspan · Lecture 4 • The design process • Common examples – User registration – Other onboarding – Search • Books and tools](https://reader034.vdocuments.site/reader034/viewer/2022042105/5e832693f14a8a291b116d1d/html5/thumbnails/7.jpg)
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
![Page 8: 4 — User Interface Design - Gideon Greenspan · Lecture 4 • The design process • Common examples – User registration – Other onboarding – Search • Books and tools](https://reader034.vdocuments.site/reader034/viewer/2022042105/5e832693f14a8a291b116d1d/html5/thumbnails/8.jpg)
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
![Page 9: 4 — User Interface Design - Gideon Greenspan · Lecture 4 • The design process • Common examples – User registration – Other onboarding – Search • Books and tools](https://reader034.vdocuments.site/reader034/viewer/2022042105/5e832693f14a8a291b116d1d/html5/thumbnails/9.jpg)
Avoiding stereotypes
From Code to Product Lecture 4 — UI Design — Slide 9 gidgreen.com/course
![Page 10: 4 — User Interface Design - Gideon Greenspan · Lecture 4 • The design process • Common examples – User registration – Other onboarding – Search • Books and tools](https://reader034.vdocuments.site/reader034/viewer/2022042105/5e832693f14a8a291b116d1d/html5/thumbnails/10.jpg)
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
![Page 11: 4 — User Interface Design - Gideon Greenspan · Lecture 4 • The design process • Common examples – User registration – Other onboarding – Search • Books and tools](https://reader034.vdocuments.site/reader034/viewer/2022042105/5e832693f14a8a291b116d1d/html5/thumbnails/11.jpg)
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
![Page 12: 4 — User Interface Design - Gideon Greenspan · Lecture 4 • The design process • Common examples – User registration – Other onboarding – Search • Books and tools](https://reader034.vdocuments.site/reader034/viewer/2022042105/5e832693f14a8a291b116d1d/html5/thumbnails/12.jpg)
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
![Page 13: 4 — User Interface Design - Gideon Greenspan · Lecture 4 • The design process • Common examples – User registration – Other onboarding – Search • Books and tools](https://reader034.vdocuments.site/reader034/viewer/2022042105/5e832693f14a8a291b116d1d/html5/thumbnails/13.jpg)
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
![Page 14: 4 — User Interface Design - Gideon Greenspan · Lecture 4 • The design process • Common examples – User registration – Other onboarding – Search • Books and tools](https://reader034.vdocuments.site/reader034/viewer/2022042105/5e832693f14a8a291b116d1d/html5/thumbnails/14.jpg)
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
![Page 15: 4 — User Interface Design - Gideon Greenspan · Lecture 4 • The design process • Common examples – User registration – Other onboarding – Search • Books and tools](https://reader034.vdocuments.site/reader034/viewer/2022042105/5e832693f14a8a291b116d1d/html5/thumbnails/15.jpg)
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
![Page 16: 4 — User Interface Design - Gideon Greenspan · Lecture 4 • The design process • Common examples – User registration – Other onboarding – Search • Books and tools](https://reader034.vdocuments.site/reader034/viewer/2022042105/5e832693f14a8a291b116d1d/html5/thumbnails/16.jpg)
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
![Page 17: 4 — User Interface Design - Gideon Greenspan · Lecture 4 • The design process • Common examples – User registration – Other onboarding – Search • Books and tools](https://reader034.vdocuments.site/reader034/viewer/2022042105/5e832693f14a8a291b116d1d/html5/thumbnails/17.jpg)
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
![Page 18: 4 — User Interface Design - Gideon Greenspan · Lecture 4 • The design process • Common examples – User registration – Other onboarding – Search • Books and tools](https://reader034.vdocuments.site/reader034/viewer/2022042105/5e832693f14a8a291b116d1d/html5/thumbnails/18.jpg)
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
![Page 19: 4 — User Interface Design - Gideon Greenspan · Lecture 4 • The design process • Common examples – User registration – Other onboarding – Search • Books and tools](https://reader034.vdocuments.site/reader034/viewer/2022042105/5e832693f14a8a291b116d1d/html5/thumbnails/19.jpg)
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
![Page 20: 4 — User Interface Design - Gideon Greenspan · Lecture 4 • The design process • Common examples – User registration – Other onboarding – Search • Books and tools](https://reader034.vdocuments.site/reader034/viewer/2022042105/5e832693f14a8a291b116d1d/html5/thumbnails/20.jpg)
Sketch: Dashboard
From Code to Product Lecture 4 — UI Design — Slide 20 gidgreen.com/course
More link?
Card ad?
![Page 21: 4 — User Interface Design - Gideon Greenspan · Lecture 4 • The design process • Common examples – User registration – Other onboarding – Search • Books and tools](https://reader034.vdocuments.site/reader034/viewer/2022042105/5e832693f14a8a291b116d1d/html5/thumbnails/21.jpg)
Sketch: Event editor
From Code to Product Lecture 4 — UI Design — Slide 21 gidgreen.com/course
![Page 22: 4 — User Interface Design - Gideon Greenspan · Lecture 4 • The design process • Common examples – User registration – Other onboarding – Search • Books and tools](https://reader034.vdocuments.site/reader034/viewer/2022042105/5e832693f14a8a291b116d1d/html5/thumbnails/22.jpg)
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
![Page 23: 4 — User Interface Design - Gideon Greenspan · Lecture 4 • The design process • Common examples – User registration – Other onboarding – Search • Books and tools](https://reader034.vdocuments.site/reader034/viewer/2022042105/5e832693f14a8a291b116d1d/html5/thumbnails/23.jpg)
Key path: adding first events
From Code to Product Lecture 4 — UI Design — Slide 23 gidgreen.com/course
1
![Page 24: 4 — User Interface Design - Gideon Greenspan · Lecture 4 • The design process • Common examples – User registration – Other onboarding – Search • Books and tools](https://reader034.vdocuments.site/reader034/viewer/2022042105/5e832693f14a8a291b116d1d/html5/thumbnails/24.jpg)
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
![Page 25: 4 — User Interface Design - Gideon Greenspan · Lecture 4 • The design process • Common examples – User registration – Other onboarding – Search • Books and tools](https://reader034.vdocuments.site/reader034/viewer/2022042105/5e832693f14a8a291b116d1d/html5/thumbnails/25.jpg)
Revised: Event creator
From Code to Product Lecture 4 — UI Design — Slide 25 gidgreen.com/course
![Page 26: 4 — User Interface Design - Gideon Greenspan · Lecture 4 • The design process • Common examples – User registration – Other onboarding – Search • Books and tools](https://reader034.vdocuments.site/reader034/viewer/2022042105/5e832693f14a8a291b116d1d/html5/thumbnails/26.jpg)
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
![Page 27: 4 — User Interface Design - Gideon Greenspan · Lecture 4 • The design process • Common examples – User registration – Other onboarding – Search • Books and tools](https://reader034.vdocuments.site/reader034/viewer/2022042105/5e832693f14a8a291b116d1d/html5/thumbnails/27.jpg)
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
![Page 28: 4 — User Interface Design - Gideon Greenspan · Lecture 4 • The design process • Common examples – User registration – Other onboarding – Search • Books and tools](https://reader034.vdocuments.site/reader034/viewer/2022042105/5e832693f14a8a291b116d1d/html5/thumbnails/28.jpg)
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
![Page 29: 4 — User Interface Design - Gideon Greenspan · Lecture 4 • The design process • Common examples – User registration – Other onboarding – Search • Books and tools](https://reader034.vdocuments.site/reader034/viewer/2022042105/5e832693f14a8a291b116d1d/html5/thumbnails/29.jpg)
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
![Page 30: 4 — User Interface Design - Gideon Greenspan · Lecture 4 • The design process • Common examples – User registration – Other onboarding – Search • Books and tools](https://reader034.vdocuments.site/reader034/viewer/2022042105/5e832693f14a8a291b116d1d/html5/thumbnails/30.jpg)
Twitter home page
From Code to Product Lecture 4 — UI Design — Slide 30 gidgreen.com/course
![Page 31: 4 — User Interface Design - Gideon Greenspan · Lecture 4 • The design process • Common examples – User registration – Other onboarding – Search • Books and tools](https://reader034.vdocuments.site/reader034/viewer/2022042105/5e832693f14a8a291b116d1d/html5/thumbnails/31.jpg)
Twitter sign up
From Code to Product Lecture 4 — UI Design — Slide 31 gidgreen.com/course
![Page 32: 4 — User Interface Design - Gideon Greenspan · Lecture 4 • The design process • Common examples – User registration – Other onboarding – Search • Books and tools](https://reader034.vdocuments.site/reader034/viewer/2022042105/5e832693f14a8a291b116d1d/html5/thumbnails/32.jpg)
From Code to Product Lecture 4 — UI Design — Slide 32 gidgreen.com/course
No username!
![Page 33: 4 — User Interface Design - Gideon Greenspan · Lecture 4 • The design process • Common examples – User registration – Other onboarding – Search • Books and tools](https://reader034.vdocuments.site/reader034/viewer/2022042105/5e832693f14a8a291b116d1d/html5/thumbnails/33.jpg)
Hotmail
From Code to Product Lecture 4 — UI Design — Slide 33 gidgreen.com/course
![Page 34: 4 — User Interface Design - Gideon Greenspan · Lecture 4 • The design process • Common examples – User registration – Other onboarding – Search • Books and tools](https://reader034.vdocuments.site/reader034/viewer/2022042105/5e832693f14a8a291b116d1d/html5/thumbnails/34.jpg)
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
![Page 35: 4 — User Interface Design - Gideon Greenspan · Lecture 4 • The design process • Common examples – User registration – Other onboarding – Search • Books and tools](https://reader034.vdocuments.site/reader034/viewer/2022042105/5e832693f14a8a291b116d1d/html5/thumbnails/35.jpg)
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
![Page 36: 4 — User Interface Design - Gideon Greenspan · Lecture 4 • The design process • Common examples – User registration – Other onboarding – Search • Books and tools](https://reader034.vdocuments.site/reader034/viewer/2022042105/5e832693f14a8a291b116d1d/html5/thumbnails/36.jpg)
Hints
From Code to Product Lecture 4 — UI Design — Slide 36 gidgreen.com/course
![Page 37: 4 — User Interface Design - Gideon Greenspan · Lecture 4 • The design process • Common examples – User registration – Other onboarding – Search • Books and tools](https://reader034.vdocuments.site/reader034/viewer/2022042105/5e832693f14a8a291b116d1d/html5/thumbnails/37.jpg)
Validation
From Code to Product Lecture 4 — UI Design — Slide 37 gidgreen.com/course
![Page 38: 4 — User Interface Design - Gideon Greenspan · Lecture 4 • The design process • Common examples – User registration – Other onboarding – Search • Books and tools](https://reader034.vdocuments.site/reader034/viewer/2022042105/5e832693f14a8a291b116d1d/html5/thumbnails/38.jpg)
Passwords
From Code to Product Lecture 4 — UI Design — Slide 38 gidgreen.com/course
![Page 39: 4 — User Interface Design - Gideon Greenspan · Lecture 4 • The design process • Common examples – User registration – Other onboarding – Search • Books and tools](https://reader034.vdocuments.site/reader034/viewer/2022042105/5e832693f14a8a291b116d1d/html5/thumbnails/39.jpg)
Usernames
From Code to Product Lecture 4 — UI Design — Slide 39 gidgreen.com/course
![Page 40: 4 — User Interface Design - Gideon Greenspan · Lecture 4 • The design process • Common examples – User registration – Other onboarding – Search • Books and tools](https://reader034.vdocuments.site/reader034/viewer/2022042105/5e832693f14a8a291b116d1d/html5/thumbnails/40.jpg)
Email confirmation
From Code to Product Lecture 4 — UI Design — Slide 40 gidgreen.com/course
![Page 41: 4 — User Interface Design - Gideon Greenspan · Lecture 4 • The design process • Common examples – User registration – Other onboarding – Search • Books and tools](https://reader034.vdocuments.site/reader034/viewer/2022042105/5e832693f14a8a291b116d1d/html5/thumbnails/41.jpg)
First steps
From Code to Product Lecture 4 — UI Design — Slide 41 gidgreen.com/course
![Page 42: 4 — User Interface Design - Gideon Greenspan · Lecture 4 • The design process • Common examples – User registration – Other onboarding – Search • Books and tools](https://reader034.vdocuments.site/reader034/viewer/2022042105/5e832693f14a8a291b116d1d/html5/thumbnails/42.jpg)
Welcome email
From Code to Product Lecture 4 — UI Design — Slide 42 gidgreen.com/course
![Page 43: 4 — User Interface Design - Gideon Greenspan · Lecture 4 • The design process • Common examples – User registration – Other onboarding – Search • Books and tools](https://reader034.vdocuments.site/reader034/viewer/2022042105/5e832693f14a8a291b116d1d/html5/thumbnails/43.jpg)
Wrong username/password
From Code to Product Lecture 4 — UI Design — Slide 43 gidgreen.com/course
![Page 44: 4 — User Interface Design - Gideon Greenspan · Lecture 4 • The design process • Common examples – User registration – Other onboarding – Search • Books and tools](https://reader034.vdocuments.site/reader034/viewer/2022042105/5e832693f14a8a291b116d1d/html5/thumbnails/44.jpg)
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
![Page 45: 4 — User Interface Design - Gideon Greenspan · Lecture 4 • The design process • Common examples – User registration – Other onboarding – Search • Books and tools](https://reader034.vdocuments.site/reader034/viewer/2022042105/5e832693f14a8a291b116d1d/html5/thumbnails/45.jpg)
Evernote home page
From Code to Product Lecture 4 — UI Design — Slide 45 gidgreen.com/course
![Page 46: 4 — User Interface Design - Gideon Greenspan · Lecture 4 • The design process • Common examples – User registration – Other onboarding – Search • Books and tools](https://reader034.vdocuments.site/reader034/viewer/2022042105/5e832693f14a8a291b116d1d/html5/thumbnails/46.jpg)
Finishing signup
From Code to Product Lecture 4 — UI Design — Slide 46 gidgreen.com/course
![Page 47: 4 — User Interface Design - Gideon Greenspan · Lecture 4 • The design process • Common examples – User registration – Other onboarding – Search • Books and tools](https://reader034.vdocuments.site/reader034/viewer/2022042105/5e832693f14a8a291b116d1d/html5/thumbnails/47.jpg)
Download page
From Code to Product Lecture 4 — UI Design — Slide 47 gidgreen.com/course
![Page 48: 4 — User Interface Design - Gideon Greenspan · Lecture 4 • The design process • Common examples – User registration – Other onboarding – Search • Books and tools](https://reader034.vdocuments.site/reader034/viewer/2022042105/5e832693f14a8a291b116d1d/html5/thumbnails/48.jpg)
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…)
![Page 49: 4 — User Interface Design - Gideon Greenspan · Lecture 4 • The design process • Common examples – User registration – Other onboarding – Search • Books and tools](https://reader034.vdocuments.site/reader034/viewer/2022042105/5e832693f14a8a291b116d1d/html5/thumbnails/49.jpg)
Installation
From Code to Product Lecture 4 — UI Design — Slide 49 gidgreen.com/course
![Page 50: 4 — User Interface Design - Gideon Greenspan · Lecture 4 • The design process • Common examples – User registration – Other onboarding – Search • Books and tools](https://reader034.vdocuments.site/reader034/viewer/2022042105/5e832693f14a8a291b116d1d/html5/thumbnails/50.jpg)
Opening the app
From Code to Product Lecture 4 — UI Design — Slide 50 gidgreen.com/course
![Page 51: 4 — User Interface Design - Gideon Greenspan · Lecture 4 • The design process • Common examples – User registration – Other onboarding – Search • Books and tools](https://reader034.vdocuments.site/reader034/viewer/2022042105/5e832693f14a8a291b116d1d/html5/thumbnails/51.jpg)
First editing window
From Code to Product Lecture 4 — UI Design — Slide 51 gidgreen.com/course
![Page 52: 4 — User Interface Design - Gideon Greenspan · Lecture 4 • The design process • Common examples – User registration – Other onboarding – Search • Books and tools](https://reader034.vdocuments.site/reader034/viewer/2022042105/5e832693f14a8a291b116d1d/html5/thumbnails/52.jpg)
Initial tips
From Code to Product Lecture 4 — UI Design — Slide 52 gidgreen.com/course
![Page 53: 4 — User Interface Design - Gideon Greenspan · Lecture 4 • The design process • Common examples – User registration – Other onboarding – Search • Books and tools](https://reader034.vdocuments.site/reader034/viewer/2022042105/5e832693f14a8a291b116d1d/html5/thumbnails/53.jpg)
Finally, the actual product?
From Code to Product Lecture 4 — UI Design — Slide 53 gidgreen.com/course
![Page 54: 4 — User Interface Design - Gideon Greenspan · Lecture 4 • The design process • Common examples – User registration – Other onboarding – Search • Books and tools](https://reader034.vdocuments.site/reader034/viewer/2022042105/5e832693f14a8a291b116d1d/html5/thumbnails/54.jpg)
No, still the onboarding (game)
From Code to Product Lecture 4 — UI Design — Slide 54 gidgreen.com/course
![Page 55: 4 — User Interface Design - Gideon Greenspan · Lecture 4 • The design process • Common examples – User registration – Other onboarding – Search • Books and tools](https://reader034.vdocuments.site/reader034/viewer/2022042105/5e832693f14a8a291b116d1d/html5/thumbnails/55.jpg)
Confirmation optional
From Code to Product Lecture 4 — UI Design — Slide 55 gidgreen.com/course
![Page 56: 4 — User Interface Design - Gideon Greenspan · Lecture 4 • The design process • Common examples – User registration – Other onboarding – Search • Books and tools](https://reader034.vdocuments.site/reader034/viewer/2022042105/5e832693f14a8a291b116d1d/html5/thumbnails/56.jpg)
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
![Page 57: 4 — User Interface Design - Gideon Greenspan · Lecture 4 • The design process • Common examples – User registration – Other onboarding – Search • Books and tools](https://reader034.vdocuments.site/reader034/viewer/2022042105/5e832693f14a8a291b116d1d/html5/thumbnails/57.jpg)
The search box
From Code to Product Lecture 4 — UI Design — Slide 57 gidgreen.com/course
![Page 58: 4 — User Interface Design - Gideon Greenspan · Lecture 4 • The design process • Common examples – User registration – Other onboarding – Search • Books and tools](https://reader034.vdocuments.site/reader034/viewer/2022042105/5e832693f14a8a291b116d1d/html5/thumbnails/58.jpg)
Exploratory search
From Code to Product Lecture 4 — UI Design — Slide 58 gidgreen.com/course
![Page 59: 4 — User Interface Design - Gideon Greenspan · Lecture 4 • The design process • Common examples – User registration – Other onboarding – Search • Books and tools](https://reader034.vdocuments.site/reader034/viewer/2022042105/5e832693f14a8a291b116d1d/html5/thumbnails/59.jpg)
Navigational search
From Code to Product Lecture 4 — UI Design — Slide 59 gidgreen.com/course
![Page 60: 4 — User Interface Design - Gideon Greenspan · Lecture 4 • The design process • Common examples – User registration – Other onboarding – Search • Books and tools](https://reader034.vdocuments.site/reader034/viewer/2022042105/5e832693f14a8a291b116d1d/html5/thumbnails/60.jpg)
Exploratory search
From Code to Product Lecture 4 — UI Design — Slide 60 gidgreen.com/course
![Page 61: 4 — User Interface Design - Gideon Greenspan · Lecture 4 • The design process • Common examples – User registration – Other onboarding – Search • Books and tools](https://reader034.vdocuments.site/reader034/viewer/2022042105/5e832693f14a8a291b116d1d/html5/thumbnails/61.jpg)
Navigational search
From Code to Product Lecture 4 — UI Design — Slide 61 gidgreen.com/course
![Page 62: 4 — User Interface Design - Gideon Greenspan · Lecture 4 • The design process • Common examples – User registration – Other onboarding – Search • Books and tools](https://reader034.vdocuments.site/reader034/viewer/2022042105/5e832693f14a8a291b116d1d/html5/thumbnails/62.jpg)
Autosuggest
From Code to Product Lecture 4 — UI Design — Slide 62 gidgreen.com/course
![Page 63: 4 — User Interface Design - Gideon Greenspan · Lecture 4 • The design process • Common examples – User registration – Other onboarding – Search • Books and tools](https://reader034.vdocuments.site/reader034/viewer/2022042105/5e832693f14a8a291b116d1d/html5/thumbnails/63.jpg)
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
![Page 64: 4 — User Interface Design - Gideon Greenspan · Lecture 4 • The design process • Common examples – User registration – Other onboarding – Search • Books and tools](https://reader034.vdocuments.site/reader034/viewer/2022042105/5e832693f14a8a291b116d1d/html5/thumbnails/64.jpg)
Autosuggest dangers
From Code to Product Lecture 4 — UI Design — Slide 64 gidgreen.com/course
![Page 65: 4 — User Interface Design - Gideon Greenspan · Lecture 4 • The design process • Common examples – User registration – Other onboarding – Search • Books and tools](https://reader034.vdocuments.site/reader034/viewer/2022042105/5e832693f14a8a291b116d1d/html5/thumbnails/65.jpg)
Search results page
From Code to Product Lecture 4 — UI Design — Slide 65 gidgreen.com/course
![Page 66: 4 — User Interface Design - Gideon Greenspan · Lecture 4 • The design process • Common examples – User registration – Other onboarding – Search • Books and tools](https://reader034.vdocuments.site/reader034/viewer/2022042105/5e832693f14a8a291b116d1d/html5/thumbnails/66.jpg)
Search results page
From Code to Product Lecture 4 — UI Design — Slide 66 gidgreen.com/course
![Page 67: 4 — User Interface Design - Gideon Greenspan · Lecture 4 • The design process • Common examples – User registration – Other onboarding – Search • Books and tools](https://reader034.vdocuments.site/reader034/viewer/2022042105/5e832693f14a8a291b116d1d/html5/thumbnails/67.jpg)
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
![Page 68: 4 — User Interface Design - Gideon Greenspan · Lecture 4 • The design process • Common examples – User registration – Other onboarding – Search • Books and tools](https://reader034.vdocuments.site/reader034/viewer/2022042105/5e832693f14a8a291b116d1d/html5/thumbnails/68.jpg)
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
![Page 69: 4 — User Interface Design - Gideon Greenspan · Lecture 4 • The design process • Common examples – User registration – Other onboarding – Search • Books and tools](https://reader034.vdocuments.site/reader034/viewer/2022042105/5e832693f14a8a291b116d1d/html5/thumbnails/69.jpg)
Advanced search
From Code to Product Lecture 4 — UI Design — Slide 69 gidgreen.com/course
![Page 70: 4 — User Interface Design - Gideon Greenspan · Lecture 4 • The design process • Common examples – User registration – Other onboarding – Search • Books and tools](https://reader034.vdocuments.site/reader034/viewer/2022042105/5e832693f14a8a291b116d1d/html5/thumbnails/70.jpg)
Advanced search
From Code to Product Lecture 4 — UI Design — Slide 70 gidgreen.com/course
![Page 71: 4 — User Interface Design - Gideon Greenspan · Lecture 4 • The design process • Common examples – User registration – Other onboarding – Search • Books and tools](https://reader034.vdocuments.site/reader034/viewer/2022042105/5e832693f14a8a291b116d1d/html5/thumbnails/71.jpg)
Faceted navigation
From Code to Product Lecture 4 — UI Design — Slide 71 gidgreen.com/course
![Page 72: 4 — User Interface Design - Gideon Greenspan · Lecture 4 • The design process • Common examples – User registration – Other onboarding – Search • Books and tools](https://reader034.vdocuments.site/reader034/viewer/2022042105/5e832693f14a8a291b116d1d/html5/thumbnails/72.jpg)
Faceted navigation
From Code to Product Lecture 4 — UI Design — Slide 72 gidgreen.com/course
![Page 73: 4 — User Interface Design - Gideon Greenspan · Lecture 4 • The design process • Common examples – User registration – Other onboarding – Search • Books and tools](https://reader034.vdocuments.site/reader034/viewer/2022042105/5e832693f14a8a291b116d1d/html5/thumbnails/73.jpg)
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
![Page 74: 4 — User Interface Design - Gideon Greenspan · Lecture 4 • The design process • Common examples – User registration – Other onboarding – Search • Books and tools](https://reader034.vdocuments.site/reader034/viewer/2022042105/5e832693f14a8a291b116d1d/html5/thumbnails/74.jpg)
Mock-up tools
From Code to Product Lecture 4 — UI Design — Slide 74 gidgreen.com/course
![Page 75: 4 — User Interface Design - Gideon Greenspan · Lecture 4 • The design process • Common examples – User registration – Other onboarding – Search • Books and tools](https://reader034.vdocuments.site/reader034/viewer/2022042105/5e832693f14a8a291b116d1d/html5/thumbnails/75.jpg)
Books
From Code to Product Lecture 4 — UI Design — Slide 75 gidgreen.com/course
![Page 76: 4 — User Interface Design - Gideon Greenspan · Lecture 4 • The design process • Common examples – User registration – Other onboarding – Search • Books and tools](https://reader034.vdocuments.site/reader034/viewer/2022042105/5e832693f14a8a291b116d1d/html5/thumbnails/76.jpg)
Books
From Code to Product Lecture 4 — UI Design — Slide 76 gidgreen.com/course