Your SlideShare is downloading. ×
User Interface Design 2013
User Interface Design 2013
User Interface Design 2013
User Interface Design 2013
User Interface Design 2013
User Interface Design 2013
User Interface Design 2013
User Interface Design 2013
User Interface Design 2013
User Interface Design 2013
User Interface Design 2013
User Interface Design 2013
User Interface Design 2013
User Interface Design 2013
User Interface Design 2013
User Interface Design 2013
User Interface Design 2013
User Interface Design 2013
User Interface Design 2013
User Interface Design 2013
User Interface Design 2013
User Interface Design 2013
User Interface Design 2013
User Interface Design 2013
User Interface Design 2013
User Interface Design 2013
User Interface Design 2013
User Interface Design 2013
User Interface Design 2013
User Interface Design 2013
User Interface Design 2013
User Interface Design 2013
User Interface Design 2013
User Interface Design 2013
User Interface Design 2013
User Interface Design 2013
User Interface Design 2013
User Interface Design 2013
User Interface Design 2013
User Interface Design 2013
User Interface Design 2013
User Interface Design 2013
User Interface Design 2013
User Interface Design 2013
User Interface Design 2013
User Interface Design 2013
User Interface Design 2013
User Interface Design 2013
User Interface Design 2013
User Interface Design 2013
User Interface Design 2013
User Interface Design 2013
User Interface Design 2013
User Interface Design 2013
User Interface Design 2013
User Interface Design 2013
User Interface Design 2013
User Interface Design 2013
User Interface Design 2013
User Interface Design 2013
User Interface Design 2013
User Interface Design 2013
User Interface Design 2013
User Interface Design 2013
User Interface Design 2013
User Interface Design 2013
User Interface Design 2013
User Interface Design 2013
User Interface Design 2013
User Interface Design 2013
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

User Interface Design 2013

788

Published on

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

  • Be the first to like this

No Downloads
Views
Total Views
788
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
10
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. 4 — User Interface Design From Code to Product gidgreen.com/course
  • 2. Or… how to prevent this From Code to Product Lecture 4 — UI Design— Slide 2 gidgreen.com/course Source:businesspundit.com
  • 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
  • 4. Lecture 4 •  The design process •  Common examples – User registration – Search •  Books and tools From Code to Product Lecture 4 — UI Design— Slide 4 gidgreen.com/course
  • 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
  • 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
  • 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
  • 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
  • 9. Avoiding stereotypes From Code to Product Lecture 4 — UI Design— Slide 9 gidgreen.com/course
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 20. Sketch: Dashboard From Code to Product Lecture 4 — UI Design— Slide 20 gidgreen.com/course More link? Card ad?
  • 21. Sketch: Event editor From Code to Product Lecture 4 — UI Design— Slide 21 gidgreen.com/course
  • 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
  • 23. Key path: adding first events From Code to Product Lecture 4 — UI Design— Slide 23 gidgreen.com/course 1
  • 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
  • 25. Revised: Event creator From Code to Product Lecture 4 — UI Design— Slide 25 gidgreen.com/course
  • 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
  • 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
  • 28. Visual design From Code to Product Lecture 4 — UI Design— Slide 28 gidgreen.com/course
  • 29. Visual design From Code to Product Lecture 4 — UI Design— Slide 29 gidgreen.com/course
  • 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 faster From Code to Product Lecture 4 — UI Design— Slide 30 gidgreen.com/course
  • 31. Lecture 4 •  The design process •  Common examples – User registration – Search •  Books and tools From Code to Product Lecture 4 — UI Design— Slide 31 gidgreen.com/course
  • 32. Twitter From Code to Product Lecture 4 — UI Design— Slide 32 gidgreen.com/course
  • 33. Facebook From Code to Product Lecture 4 — UI Design— Slide 33 gidgreen.com/course No username!
  • 34. Hotmail From Code to Product Lecture 4 — UI Design— Slide 34 gidgreen.com/course
  • 35. To username or not to username From Code to Product Lecture 4 — UI Design— Slide 35 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
  • 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) •  reCAPTCHA From Code to Product Lecture 4 — UI Design— Slide 36 gidgreen.com/course
  • 37. Hints From Code to Product Lecture 4 — UI Design— Slide 37 gidgreen.com/course
  • 38. Validation From Code to Product Lecture 4 — UI Design— Slide 38 gidgreen.com/course
  • 39. Passwords From Code to Product Lecture 4 — UI Design— Slide 39 gidgreen.com/course
  • 40. Usernames From Code to Product Lecture 4 — UI Design— Slide 40 gidgreen.com/course
  • 41. Email confirmation From Code to Product Lecture 4 — UI Design— Slide 41 gidgreen.com/course
  • 42. First steps From Code to Product Lecture 4 — UI Design— Slide 42 gidgreen.com/course
  • 43. Welcome email From Code to Product Lecture 4 — UI Design— Slide 43 gidgreen.com/course
  • 44. Sign in From Code to Product Lecture 4 — UI Design— Slide 44 gidgreen.com/course
  • 45. Wrong username/password From Code to Product Lecture 4 — UI Design— Slide 45 gidgreen.com/course
  • 46. Wrong again! From Code to Product Lecture 4 — UI Design— Slide 46 gidgreen.com/course
  • 47. Forgot password form From Code to Product Lecture 4 — UI Design— Slide 47 gidgreen.com/course
  • 48. Forgot password email From Code to Product Lecture 4 — UI Design— Slide 48 gidgreen.com/course
  • 49. Password reset form From Code to Product Lecture 4 — UI Design— Slide 49 gidgreen.com/course
  • 50. Lecture 4 •  The design process •  Common examples – User registration – Search •  Books and tools From Code to Product Lecture 4 — UI Design— Slide 50 gidgreen.com/course
  • 51. The search box From Code to Product Lecture 4 — UI Design— Slide 51 gidgreen.com/course
  • 52. Exploratory search From Code to Product Lecture 4 — UI Design— Slide 52 gidgreen.com/course
  • 53. Navigational search From Code to Product Lecture 4 — UI Design— Slide 53 gidgreen.com/course
  • 54. Exploratory search From Code to Product Lecture 4 — UI Design— Slide 54 gidgreen.com/course
  • 55. Navigational search From Code to Product Lecture 4 — UI Design— Slide 55 gidgreen.com/course
  • 56. Autosuggest From Code to Product Lecture 4 — UI Design— Slide 56 gidgreen.com/course
  • 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 activity From Code to Product Lecture 4 — UI Design— Slide 57 gidgreen.com/course
  • 58. Autosuggest dangers From Code to Product Lecture 4 — UI Design— Slide 58 gidgreen.com/course
  • 59. Search results page From Code to Product Lecture 4 — UI Design— Slide 59 gidgreen.com/course
  • 60. Search results page From Code to Product Lecture 4 — UI Design— Slide 60 gidgreen.com/course
  • 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 •  Date From Code to Product Lecture 4 — UI Design— Slide 61 gidgreen.com/course
  • 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. Advanced search From Code to Product Lecture 4 — UI Design— Slide 63 gidgreen.com/course
  • 64. Advanced search From Code to Product Lecture 4 — UI Design— Slide 64 gidgreen.com/course
  • 65. Faceted navigation From Code to Product Lecture 4 — UI Design— Slide 65 gidgreen.com/course
  • 66. Faceted navigation From Code to Product Lecture 4 — UI Design— Slide 66 gidgreen.com/course
  • 67. Lecture 4 •  The design process •  Common examples – User registration – Search •  Books and tools From Code to Product Lecture 4 — UI Design— Slide 67 gidgreen.com/course
  • 68. Mock-up tools From Code to Product Lecture 4 — UI Design— Slide 68 gidgreen.com/course
  • 69. Books From Code to Product Lecture 4 — UI Design— Slide 69 gidgreen.com/course
  • 70. Books From Code to Product Lecture 4 — UI Design— Slide 70 gidgreen.com/course

×