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.
Upcoming SlideShare
Business communication
Next
Download to read offline and view in fullscreen.

0

Share

Download to read offline

Notes on Mobile UX

Download to read offline

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.

Related Books

Free with a 30 day trial from Scribd

See all
  • 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

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.

Views

Total views

1,046

On Slideshare

0

From embeds

0

Number of embeds

287

Actions

Downloads

5

Shares

0

Comments

0

Likes

0

×