4 — User Interface Design     From Code to Product     gidgreen.com/course
Or… how to prevent this                                                          Source: businesspundit.comFrom Code to Pr...
Some reminders•  Products are for people•  People have limited…      –  Vision      –  Cognition      –  Memory•  People a...
Lecture 4•  The design process•  Common examples      –  User registration      –  Search•  Books and toolsFrom Code to Pr...
RememberTheBirthdays.com•  Birthday reminder website      –  Also: anniversaries, holidays•  Basic service is free      – ...
The process•    User and scenario•    Entities, properties, actions•    Grouping•    Initial sketches•    Key paths•    Ot...
User and scenario•  Who would use it?      –  Who wouldn’t?•    What’s their goal?•    When and where?•    What devices?• ...
Building a user profile•  Identify users      –  Age, gender, country, education•  Interviews      –  How do they do it no...
Avoiding stereotypesFrom 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 fo...
RTB.com Entities•  The user•  Other people•  Recurring events      –  Birthdays      –  Anniversaries      –  Holidays•  E...
Entity relationships                                              John’s 41st birthday   John’s 41st card                 ...
Entity: The user                Properties                                      Actions                 Username          ...
Entity: Recurring event                Properties                                     Actions           Date every year   ...
Entity: Event instance                Properties                                     Actions            Date with year    ...
Entity: Other person                Properties                                      Actions                       Name    ...
Grouping: Dashboard•  Global navigation bar      –  Include the user’s name to show logged in•  Calendar for next 2 months...
Grouping: Event editor•  Global navigation bar•  Form fields:      –  Event type      –  Date      –  Name      –  Comment...
Grouping: User profile•  View username•  Edit fields for:      –  Name      –  Email address      –  Mobile number      – ...
Sketch: Dashboard                                                                   Card                                  ...
Sketch: Event editorFrom 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•    Viewi...
Key path: adding first events                                                1From Code to Product   Lecture 4 — UI Design...
Key path: adding first events                                                               3                             ...
Revised: Event creatorFrom 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 ...
Visual design•  After functional design•  Sketch a few options      –  Much more subjective•  Communicate right message•  ...
Visual designFrom Code to Product     Lecture 4 — UI Design— Slide 28   gidgreen.com/course
Visual designFrom Code to Product     Lecture 4 — UI Design— Slide 29   gidgreen.com/course
To keep in mind•  Design for a specific user      –  Deal with variants later on•  Avoid inventing paradigms      –  Examp...
Lecture 4•  The design process•  Common examples      –  User registration      –  Search•  Books and toolsFrom Code to Pr...
TwitterFrom Code to Product   Lecture 4 — UI Design— Slide 32   gidgreen.com/course
Facebook                                                         No username!From Code to Product   Lecture 4 — UI Design—...
HotmailFrom Code to Product   Lecture 4 — UI Design— Slide 34   gidgreen.com/course
To username or not to username               Advantages                                 Disadvantages      Can be 100% per...
CAPTCHAs•  Prevent automated scripts•  Based on the Turing test      –  Easy for humans, hard for computers•  Problems    ...
HintsFrom Code to Product   Lecture 4 — UI Design— Slide 37   gidgreen.com/course
ValidationFrom Code to Product   Lecture 4 — UI Design— Slide 38   gidgreen.com/course
PasswordsFrom Code to Product   Lecture 4 — UI Design— Slide 39   gidgreen.com/course
UsernamesFrom Code to Product   Lecture 4 — UI Design— Slide 40   gidgreen.com/course
Email confirmationFrom Code to Product       Lecture 4 — UI Design— Slide 41   gidgreen.com/course
First stepsFrom Code to Product   Lecture 4 — UI Design— Slide 42   gidgreen.com/course
Welcome emailFrom Code to Product     Lecture 4 — UI Design— Slide 43   gidgreen.com/course
Sign inFrom Code to Product   Lecture 4 — UI Design— Slide 44   gidgreen.com/course
Wrong username/passwordFrom Code to Product   Lecture 4 — UI Design— Slide 45   gidgreen.com/course
Wrong again!From Code to Product    Lecture 4 — UI Design— Slide 46   gidgreen.com/course
Forgot password formFrom Code to Product   Lecture 4 — UI Design— Slide 47   gidgreen.com/course
Forgot password emailFrom Code to Product   Lecture 4 — UI Design— Slide 48   gidgreen.com/course
Password reset formFrom Code to Product    Lecture 4 — UI Design— Slide 49   gidgreen.com/course
Lecture 4•  The design process•  Common examples      –  User registration      –  Search•  Books and toolsFrom Code to Pr...
The search boxFrom Code to Product     Lecture 4 — UI Design— Slide 51   gidgreen.com/course
Exploratory searchFrom Code to Product       Lecture 4 — UI Design— Slide 52   gidgreen.com/course
Navigational searchFrom Code to Product        Lecture 4 — UI Design— Slide 53   gidgreen.com/course
Exploratory searchFrom Code to Product       Lecture 4 — UI Design— Slide 54   gidgreen.com/course
Navigational searchFrom Code to Product        Lecture 4 — UI Design— Slide 55   gidgreen.com/course
AutosuggestFrom Code to Product    Lecture 4 — UI Design— Slide 56   gidgreen.com/course
Autosuggest sources•  Database of matches      –  Most relevant matches with prefix•  Behavior of all users      –  Most c...
Autosuggest dangersFrom Code to Product    Lecture 4 — UI Design— Slide 58   gidgreen.com/course
Search results pageFrom Code to Product        Lecture 4 — UI Design— Slide 59   gidgreen.com/course
Search results pageFrom Code to Product        Lecture 4 — UI Design— Slide 60   gidgreen.com/course
Ranking factors•    Number of matches•    Location of match•    Importance of result•    Previously visited by user?•    U...
Combining factors•  Multiplicative      –  Score = Relevance × Importance•  Probabilistic principle      –  P(relevant to ...
Advanced searchFrom Code to Product      Lecture 4 — UI Design— Slide 63   gidgreen.com/course
Advanced searchFrom Code to Product      Lecture 4 — UI Design— Slide 64   gidgreen.com/course
Faceted navigationFrom Code to Product       Lecture 4 — UI Design— Slide 65   gidgreen.com/course
Faceted navigationFrom Code to Product       Lecture 4 — UI Design— Slide 66   gidgreen.com/course
Lecture 4•  The design process•  Common examples      –  User registration      –  Search•  Books and toolsFrom Code to Pr...
Mock-up toolsFrom Code to Product     Lecture 4 — UI Design— Slide 68   gidgreen.com/course
BooksFrom Code to Product   Lecture 4 — UI Design— Slide 69   gidgreen.com/course
BooksFrom Code to Product   Lecture 4 — UI Design— Slide 70   gidgreen.com/course
Upcoming SlideShare
Loading in …5
×

User Interface Design

1,568 views

Published on

Published in: Technology, News & Politics
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,568
On SlideShare
0
From Embeds
0
Number of Embeds
41
Actions
Shares
0
Downloads
19
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

User Interface Design

  1. 1. 4 — User Interface Design From Code to Product gidgreen.com/course
  2. 2. Or… how to prevent this Source: businesspundit.comFrom Code to Product Lecture 4 — UI Design— Slide 2 gidgreen.com/course
  3. 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 = productFrom Code to Product Lecture 4 — UI Design— Slide 3 gidgreen.com/course
  4. 4. Lecture 4•  The design process•  Common examples –  User registration –  Search•  Books and toolsFrom Code to Product Lecture 4 — UI Design— Slide 4 gidgreen.com/course
  5. 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 SMSFrom Code to Product Lecture 4 — UI Design— Slide 5 gidgreen.com/course
  6. 6. The process•  User and scenario•  Entities, properties, actions•  Grouping•  Initial sketches•  Key paths•  Other paths•  Visual designFrom Code to Product Lecture 4 — UI Design— Slide 6 gidgreen.com/course
  7. 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? Photo by Mushroom PrincessFrom Code to Product Lecture 4 — UI Design— Slide 7 gidgreen.com/course
  8. 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•  StereotypesFrom Code to Product Lecture 4 — UI Design— Slide 8 gidgreen.com/course
  9. 9. Avoiding stereotypesFrom Code to Product Lecture 4 — UI Design— Slide 9 gidgreen.com/course
  10. 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 familyFrom Code to Product Lecture 4 — UI Design— Slide 10 gidgreen.com/course
  11. 11. RTB.com Entities•  The user•  Other people•  Recurring events –  Birthdays –  Anniversaries –  Holidays•  Event instances•  Greeting cardFrom Code to Product Lecture 4 — UI Design— Slide 11 gidgreen.com/course
  12. 12. Entity relationships John’s 41st birthday John’s 41st card John’s John’s 42nd birthday John Birthday John’s 43rd birthday John and J&M 13th anniversary J&M 13th card Mary Mary’s J&M 14th anniversary J&M 14th card Anniversary J&M 15th anniversary New year 2011 Mary’s 2012 card Sue New year (holiday) New year 2012 Sue’s 2012 card New year 2013From Code to Product Lecture 4 — UI Design— Slide 12 gidgreen.com/course
  13. 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 preferencesFrom Code to Product Lecture 4 — UI Design— Slide 13 gidgreen.com/course
  14. 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 peopleFrom Code to Product Lecture 4 — UI Design— Slide 14 gidgreen.com/course
  15. 15. Entity: Event instance Properties Actions Date with year View on calendar Related recurring event View event instance View recurring eventFrom Code to Product Lecture 4 — UI Design— Slide 15 gidgreen.com/course
  16. 16. Entity: Other person Properties Actions Name View related events Address View sent cards Birthday Create DeleteFrom Code to Product Lecture 4 — UI Design— Slide 16 gidgreen.com/course
  17. 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 editorFrom Code to Product Lecture 4 — UI Design— Slide 17 gidgreen.com/course
  18. 18. Grouping: Event editor•  Global navigation bar•  Form fields: –  Event type –  Date –  Name –  Comments –  People•  Save / Cancel buttonsFrom Code to Product Lecture 4 — UI Design— Slide 18 gidgreen.com/course
  19. 19. Grouping: User profile•  View username•  Edit fields for: –  Name –  Email address –  Mobile number –  Birthday –  Reminding preferences•  Separate change password formFrom Code to Product Lecture 4 — UI Design— Slide 19 gidgreen.com/course
  20. 20. Sketch: Dashboard Card ad? More link?From Code to Product Lecture 4 — UI Design— Slide 20 gidgreen.com/course
  21. 21. Sketch: Event editorFrom Code to Product Lecture 4 — UI Design— Slide 21 gidgreen.com/course
  22. 22. Key paths•  User registration•  Adding first few events•  Importing birthdays from Facebook•  User login•  Viewing upcoming events•  Sending a greeting cardFrom Code to Product Lecture 4 — UI Design— Slide 22 gidgreen.com/course
  23. 23. Key path: adding first events 1From Code to Product Lecture 4 — UI Design— Slide 23 gidgreen.com/course
  24. 24. Key path: adding first events 3 2 John Birthday 4 5 Cancel 6From Code to Product Lecture 4 — UI Design— Slide 24 gidgreen.com/course
  25. 25. Revised: Event creatorFrom Code to Product Lecture 4 — UI Design— Slide 25 gidgreen.com/course
  26. 26. Other paths•  Forgot my password•  Deleting an event•  Finding a person by name•  Printing a calendar•  Sharing data with other users•  Change mobile numberFrom Code to Product Lecture 4 — UI Design— Slide 26 gidgreen.com/course
  27. 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 muchFrom Code to Product Lecture 4 — UI Design— Slide 27 gidgreen.com/course
  28. 28. Visual designFrom Code to Product Lecture 4 — UI Design— Slide 28 gidgreen.com/course
  29. 29. Visual designFrom Code to Product Lecture 4 — UI Design— Slide 29 gidgreen.com/course
  30. 30. 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 fasterFrom Code to Product Lecture 4 — UI Design— Slide 30 gidgreen.com/course
  31. 31. Lecture 4•  The design process•  Common examples –  User registration –  Search•  Books and toolsFrom Code to Product Lecture 4 — UI Design— Slide 31 gidgreen.com/course
  32. 32. TwitterFrom Code to Product Lecture 4 — UI Design— Slide 32 gidgreen.com/course
  33. 33. Facebook No username!From Code to Product Lecture 4 — UI Design— Slide 33 gidgreen.com/course
  34. 34. HotmailFrom Code to Product Lecture 4 — UI Design— Slide 34 gidgreen.com/course
  35. 35. 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 Needs test for uniquenessFrom Code to Product Lecture 4 — UI Design— Slide 35 gidgreen.com/course
  36. 36. 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)•  reCAPTCHAFrom Code to Product Lecture 4 — UI Design— Slide 36 gidgreen.com/course
  37. 37. HintsFrom Code to Product Lecture 4 — UI Design— Slide 37 gidgreen.com/course
  38. 38. ValidationFrom Code to Product Lecture 4 — UI Design— Slide 38 gidgreen.com/course
  39. 39. PasswordsFrom Code to Product Lecture 4 — UI Design— Slide 39 gidgreen.com/course
  40. 40. UsernamesFrom Code to Product Lecture 4 — UI Design— Slide 40 gidgreen.com/course
  41. 41. Email confirmationFrom Code to Product Lecture 4 — UI Design— Slide 41 gidgreen.com/course
  42. 42. First stepsFrom Code to Product Lecture 4 — UI Design— Slide 42 gidgreen.com/course
  43. 43. Welcome emailFrom Code to Product Lecture 4 — UI Design— Slide 43 gidgreen.com/course
  44. 44. Sign inFrom Code to Product Lecture 4 — UI Design— Slide 44 gidgreen.com/course
  45. 45. Wrong username/passwordFrom Code to Product Lecture 4 — UI Design— Slide 45 gidgreen.com/course
  46. 46. Wrong again!From Code to Product Lecture 4 — UI Design— Slide 46 gidgreen.com/course
  47. 47. Forgot password formFrom Code to Product Lecture 4 — UI Design— Slide 47 gidgreen.com/course
  48. 48. Forgot password emailFrom Code to Product Lecture 4 — UI Design— Slide 48 gidgreen.com/course
  49. 49. Password reset formFrom Code to Product Lecture 4 — UI Design— Slide 49 gidgreen.com/course
  50. 50. Lecture 4•  The design process•  Common examples –  User registration –  Search•  Books and toolsFrom Code to Product Lecture 4 — UI Design— Slide 50 gidgreen.com/course
  51. 51. The search boxFrom Code to Product Lecture 4 — UI Design— Slide 51 gidgreen.com/course
  52. 52. Exploratory searchFrom Code to Product Lecture 4 — UI Design— Slide 52 gidgreen.com/course
  53. 53. Navigational searchFrom Code to Product Lecture 4 — UI Design— Slide 53 gidgreen.com/course
  54. 54. Exploratory searchFrom Code to Product Lecture 4 — UI Design— Slide 54 gidgreen.com/course
  55. 55. Navigational searchFrom Code to Product Lecture 4 — UI Design— Slide 55 gidgreen.com/course
  56. 56. AutosuggestFrom Code to Product Lecture 4 — UI Design— Slide 56 gidgreen.com/course
  57. 57. 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 activityFrom Code to Product Lecture 4 — UI Design— Slide 57 gidgreen.com/course
  58. 58. Autosuggest dangersFrom Code to Product Lecture 4 — UI Design— Slide 58 gidgreen.com/course
  59. 59. Search results pageFrom Code to Product Lecture 4 — UI Design— Slide 59 gidgreen.com/course
  60. 60. Search results pageFrom Code to Product Lecture 4 — UI Design— Slide 60 gidgreen.com/course
  61. 61. 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•  DateFrom Code to Product Lecture 4 — UI Design— Slide 61 gidgreen.com/course
  62. 62. 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 62 gidgreen.com/course
  63. 63. Advanced searchFrom Code to Product Lecture 4 — UI Design— Slide 63 gidgreen.com/course
  64. 64. Advanced searchFrom Code to Product Lecture 4 — UI Design— Slide 64 gidgreen.com/course
  65. 65. Faceted navigationFrom Code to Product Lecture 4 — UI Design— Slide 65 gidgreen.com/course
  66. 66. Faceted navigationFrom Code to Product Lecture 4 — UI Design— Slide 66 gidgreen.com/course
  67. 67. Lecture 4•  The design process•  Common examples –  User registration –  Search•  Books and toolsFrom Code to Product Lecture 4 — UI Design— Slide 67 gidgreen.com/course
  68. 68. Mock-up toolsFrom Code to Product Lecture 4 — UI Design— Slide 68 gidgreen.com/course
  69. 69. BooksFrom Code to Product Lecture 4 — UI Design— Slide 69 gidgreen.com/course
  70. 70. BooksFrom Code to Product Lecture 4 — UI Design— Slide 70 gidgreen.com/course

×