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 • 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
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
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
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
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? Photo by Mushroom Princess From Code to Product Lecture 4 — UI Design — Slide 7 gidgreen.com/course
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
Avoiding stereotypes From Code to Product Lecture 4 — UI Design — Slide 9 gidgreen.com/course
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
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
Entity relationships John’s 41st birthday John’s 41st card John’s John’s 42nd birthday Birthday John John’s 43rd birthday J&M 13th anniversary J&M 13th card John and Mary Mary’s J&M 14th anniversary J&M 14th card Anniversary J&M 15th anniversary New year 2011 Mary’s 2012 card New year Sue New year 2012 Sue’s 2012 card (holiday) New year 2013 From Code to Product Lecture 4 — UI Design — Slide 12 gidgreen.com/course
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
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
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
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
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
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
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
Sketch: Dashboard Card ad? More link? From Code to Product Lecture 4 — UI Design — Slide 20 gidgreen.com/course
Sketch: Event editor From Code to Product Lecture 4 — UI Design — Slide 21 gidgreen.com/course
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
Key path: adding first events 1 From Code to Product Lecture 4 — UI Design — Slide 23 gidgreen.com/course
Key path: adding first events 3 John 2 Birthday 4 5 Cancel 6 From Code to Product Lecture 4 — UI Design — Slide 24 gidgreen.com/course
Revised: Event creator From Code to Product Lecture 4 — UI Design — Slide 25 gidgreen.com/course
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
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
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
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
Twitter home page From Code to Product Lecture 4 — UI Design — Slide 30 gidgreen.com/course
Twitter sign up From Code to Product Lecture 4 — UI Design — Slide 31 gidgreen.com/course
Facebook No username! From Code to Product Lecture 4 — UI Design — Slide 32 gidgreen.com/course
Hotmail From Code to Product Lecture 4 — UI Design — Slide 33 gidgreen.com/course
To username or not to username Advantages Disadvantages Can be 100% permanent Another field at registration Semi-anonymous identity for Likely to be forgotten user interactions May provide additional useful Prevents detection of wrong information email addresses Natural way to address user Can be inappropriate Two users want the same one From Code to Product Lecture 4 — UI Design — Slide 34 gidgreen.com/course
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
Hints From Code to Product Lecture 4 — UI Design — Slide 36 gidgreen.com/course
Validation From Code to Product Lecture 4 — UI Design — Slide 37 gidgreen.com/course
Passwords From Code to Product Lecture 4 — UI Design — Slide 38 gidgreen.com/course
Usernames From Code to Product Lecture 4 — UI Design — Slide 39 gidgreen.com/course
Email confirmation From Code to Product Lecture 4 — UI Design — Slide 40 gidgreen.com/course
First steps From Code to Product Lecture 4 — UI Design — Slide 41 gidgreen.com/course
Welcome email From Code to Product Lecture 4 — UI Design — Slide 42 gidgreen.com/course
Wrong username/password From Code to Product Lecture 4 — UI Design — Slide 43 gidgreen.com/course
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
Evernote home page From Code to Product Lecture 4 — UI Design — Slide 45 gidgreen.com/course
Finishing signup From Code to Product Lecture 4 — UI Design — Slide 46 gidgreen.com/course
Download page From Code to Product Lecture 4 — UI Design — Slide 47 gidgreen.com/course
Attention to detail Safari on Mac Firefox on Mac Chrome on Mac (and Opera…) From Code to Product Lecture 4 — UI Design — Slide 48 gidgreen.com/course
Recommend
More recommend
