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