Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Notes on Mobile UX

991 views

Published on

thoughts on Mobile and the shift it represents compared to classic web layouts, which were derived from print but had their own morphology. Concludes with a few notes on how to optimize designs for mobile platforms.

  • Be the first to comment

  • Be the first to like this

Notes on Mobile UX

  1. 1. Giles Phillips - @gilesphillips Notes on mobile UX
  2. 2. Web pages are clickable newspapers
  3. 3. The concepts map, but the design isn’t optimized
  4. 4. Newspapers have pretty large viewports You can fit lots of content
  5. 5. HEADER
  6. 6. HEADER + LOGO PAGE HEADLINE IMAGE AND CAPTION COLUMN COLUMN COLUMN COLUMN important messaging
  7. 7. HEADER + LOGO + GLOBAL NAV PAGE HEADLINE IMAGE AND CAPTION SECONDARYNAV COLUMN COLUMN SIDEBARNAV important annoying message
  8. 8. HEADER + GLOBAL NAV PAGE HEADLINE SECONDARYNAV SIDEBARNAV annoying message!!
  9. 9. Newspapers are also highly mobile But sort of hard to read this way...
  10. 10. Too bad this doesn’t fold up
  11. 11. mobile devices have created a revolutionary new medium
  12. 12. KVM (Keyboard, Video, Mouse) is a transitional interface
  13. 13. Somewhere between dials and knobs...
  14. 14. ...and natural human interaction
  15. 15. Mobile is more natural: touch & voice inputs Carried on the body, mobile extends us We’ve become Cyborgs
  16. 16. mobile is disrupting the user experience: design paradigms, constraints, metaphors
  17. 17. Design is creation for use Design has intent Expressing intent as simply as possible is good design OPTIMIZE
  18. 18. OPTIMIZING MOBILE UX - FORM FACTOR • Small viewport = limited screen real estate - Old nav paradigms not efficient, use new lighter models - Shorten content for affordances and headings • Make your affordances big (40x40px +10 px) • Hovers = fail • Popups stink • Reference the platform interface guidelines
  19. 19. OPTIMIZING MOBILE UX - PERFORMANCE • Load times are just as important as ever • Minimize payload - including using the UX to break up requests • Perceived performance as an element of your user experience
  20. 20. OPTIMIZING MOBILE UX - CONTEXT OF USE • Map your user scenario & touchpoint • Design for a 1-minute timebox • Divided attention, not sustained attention • Mobile usage is not about engagement - Usage tends to be destination-driven - The completion of a specific task - Responding to an alert or checking update
  21. 21. OPTIMIZING MOBILE UX - CONTENT • Different labels work better on mobile • Always be succinct • Map or storyboard your content along a linear sequence

×