• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
User Interface Design
 

User Interface Design

on

  • 1,210 views

 

Statistics

Views

Total Views
1,210
Views on SlideShare
1,174
Embed Views
36

Actions

Likes
1
Downloads
3
Comments
0

3 Embeds 36

http://www.gidgreen.com 29
http://gidgreen.com 5
http://localhost 2

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    User Interface Design User Interface Design Presentation Transcript

    • 4 — User Interface Design From Code to Product gidgreen.com/course
    • Or… how to prevent this Source: businesspundit.comFrom 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 = productFrom Code to Product Lecture 4 — UI Design— Slide 3 gidgreen.com/course
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • Sketch: Dashboard Card ad? More link?From Code to Product Lecture 4 — UI Design— Slide 20 gidgreen.com/course
    • 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•  Viewing upcoming events•  Sending a greeting cardFrom Code to Product Lecture 4 — UI Design— Slide 22 gidgreen.com/course
    • Key path: adding first events 1From Code to Product Lecture 4 — UI Design— Slide 23 gidgreen.com/course
    • 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
    • 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 data with other users•  Change mobile numberFrom 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 muchFrom Code to Product Lecture 4 — UI Design— Slide 27 gidgreen.com/course
    • 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 –  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
    • 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
    • TwitterFrom Code to Product Lecture 4 — UI Design— Slide 32 gidgreen.com/course
    • Facebook No username!From Code to Product Lecture 4 — UI Design— Slide 33 gidgreen.com/course
    • HotmailFrom Code to Product Lecture 4 — UI Design— Slide 34 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 Needs test for uniquenessFrom Code to Product Lecture 4 — UI Design— Slide 35 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)•  reCAPTCHAFrom Code to Product Lecture 4 — UI Design— Slide 36 gidgreen.com/course
    • 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 Product Lecture 4 — UI Design— Slide 50 gidgreen.com/course
    • 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 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
    • 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?•  User’s other previous activity•  Click-throughs of other users•  DateFrom Code to Product Lecture 4 — UI Design— Slide 61 gidgreen.com/course
    • 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
    • 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 Product Lecture 4 — UI Design— Slide 67 gidgreen.com/course
    • 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