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.
Mobile UX
Nick Finck, November 12, 2009




                                Refresh Portland
The Mobile Web


                 Refresh Portland
Photo by Rion Nakaya
http://www.flickr.com/photos/rion/47437262/
A Quick Walkthru



                   Refresh Portland
Found Products
Oh Dear Gawd, a whole
section for cheese. Yes!
No Product List
Lets Get Technical!
Fitts’s Law
“ In ergonomics, Fitts's law is a model of
  human movement which predicts the time
  required to rapidly move to a target...
Not so good




Way better
Optimized Markup
digital-web.com
Screen based CSS & Print based CSS
Developing for the Mobile Context
• XHTML
  ✓ Well formed
  ✓ Semantically correct
  ✓ Highly optimized

• CSS
  ✓ Handhel...
http://nytimes.com                    http://app.getleaflets.com/nyt/




NYTimes.com                           NY Times on...
Highly optimized header markup




Non-optimized header markup
Optimized UI
Highly optimized UI




Non-optimized UI
A Deep Dive into Mobile Web
Content
Readability & Page Width
The problem
Unreadable




Must zoom
Unreadable
Again
Text does not fit within screen
Possible solutions
Readable
without
zooming




           Fits perfectly within screen
Readable
                     without
                     zooming




Text fits on screen
Interaction
Navigation
The problem
Navigation
Hotspots visible & clickable
     only after zoomed 10x
Content is
way above
navigation
Navigation
could have
larger
hotspots
Microscopic
hotspots
Barely
navigable
Possible solutions
Navigation
along side
the content
Nice big
and juicy
hotspots
Super size
 hotspots
Visually
called out
navigation
Use larger
headings &
visual hints
Pagination
The problem
World’s
smallest
pagination
A possible solution
Excellent
pagination
solution
Search
The problem
A possible solution
A perfect
case for
search ahead
Buttons
The problem
Very typical
web button
Possible solutions
Large juicy
buttons for
easy clicking
Designed
with the
specific      555-5555
context in
mind
Calls to Action
The problem
Calls to
action are
lost in page
A possible solution
Make calls
to action
very obvious
?
What is Next?


                Refresh Portland
Augmented Reality with Location Based Services
Augmented Reality with Visual Recognition
Nintendo Wii
Microsoft’s Project Natal
Microsoft Surface
Oblong's g-speak
Spatial Operating Environment
Sixth Sense
Wearable Gestural Interface
Thank you!



             Refresh Portland
?
Questions


            Refresh Portland
Mobile UX
Nick Finck
nick@blueflavor.com
Blue Flavor - http://blueflavor.com
Personal - http://nickfinck.com




            ...
Mobile UX
Mobile UX
Mobile UX
Mobile UX
Mobile UX
Mobile UX
Mobile UX
Mobile UX
Mobile UX
Mobile UX
Mobile UX
Mobile UX
Upcoming SlideShare
Loading in …5
×

of

Mobile UX Slide 1 Mobile UX Slide 2 Mobile UX Slide 3 Mobile UX Slide 4 Mobile UX Slide 5 Mobile UX Slide 6 Mobile UX Slide 7 Mobile UX Slide 8 Mobile UX Slide 9 Mobile UX Slide 10 Mobile UX Slide 11 Mobile UX Slide 12 Mobile UX Slide 13 Mobile UX Slide 14 Mobile UX Slide 15 Mobile UX Slide 16 Mobile UX Slide 17 Mobile UX Slide 18 Mobile UX Slide 19 Mobile UX Slide 20 Mobile UX Slide 21 Mobile UX Slide 22 Mobile UX Slide 23 Mobile UX Slide 24 Mobile UX Slide 25 Mobile UX Slide 26 Mobile UX Slide 27 Mobile UX Slide 28 Mobile UX Slide 29 Mobile UX Slide 30 Mobile UX Slide 31 Mobile UX Slide 32 Mobile UX Slide 33 Mobile UX Slide 34 Mobile UX Slide 35 Mobile UX Slide 36 Mobile UX Slide 37 Mobile UX Slide 38 Mobile UX Slide 39 Mobile UX Slide 40 Mobile UX Slide 41 Mobile UX Slide 42 Mobile UX Slide 43 Mobile UX Slide 44 Mobile UX Slide 45 Mobile UX Slide 46 Mobile UX Slide 47 Mobile UX Slide 48 Mobile UX Slide 49 Mobile UX Slide 50 Mobile UX Slide 51 Mobile UX Slide 52 Mobile UX Slide 53 Mobile UX Slide 54 Mobile UX Slide 55 Mobile UX Slide 56 Mobile UX Slide 57 Mobile UX Slide 58 Mobile UX Slide 59 Mobile UX Slide 60 Mobile UX Slide 61 Mobile UX Slide 62 Mobile UX Slide 63 Mobile UX Slide 64 Mobile UX Slide 65 Mobile UX Slide 66 Mobile UX Slide 67 Mobile UX Slide 68 Mobile UX Slide 69 Mobile UX Slide 70 Mobile UX Slide 71 Mobile UX Slide 72 Mobile UX Slide 73 Mobile UX Slide 74 Mobile UX Slide 75 Mobile UX Slide 76 Mobile UX Slide 77 Mobile UX Slide 78 Mobile UX Slide 79 Mobile UX Slide 80 Mobile UX Slide 81 Mobile UX Slide 82 Mobile UX Slide 83 Mobile UX Slide 84 Mobile UX Slide 85 Mobile UX Slide 86
Upcoming SlideShare
Mobile UX - the intricacies of designing for mobile devices
Next
Download to read offline and view in fullscreen.

50 Likes

Share

Download to read offline

Mobile UX

Download to read offline

This is a presentation I did for Refresh Portland. It is a very high level look at the User Experience Design in the Mobile Web.

This will be a crash course in mobile user experience design, are you ready? We will look at how the mobile context has evolved over the years and where it is headed. We’ll explore the differences between the web and the mobile web, why these differences are important, what the key user experience principals are for the mobile web ...oh yeah, and there will be plenty of examples for you to sink your teeth into. I will give you the information you need to design an optimal user experience for the mobile web as well as what decisions you will need to make along the way.

Related Audiobooks

Free with a 30 day trial from Scribd

See all

Mobile UX

  1. 1. Mobile UX Nick Finck, November 12, 2009 Refresh Portland
  2. 2. The Mobile Web Refresh Portland
  3. 3. Photo by Rion Nakaya http://www.flickr.com/photos/rion/47437262/
  4. 4. A Quick Walkthru Refresh Portland
  5. 5. Found Products
  6. 6. Oh Dear Gawd, a whole section for cheese. Yes!
  7. 7. No Product List
  8. 8. Lets Get Technical!
  9. 9. Fitts’s Law
  10. 10. “ In ergonomics, Fitts's law is a model of human movement which predicts the time required to rapidly move to a target area, as a function of the distance to the target and the size of the target.” Description of Fitts’s Law Wikipedia
  11. 11. Not so good Way better
  12. 12. Optimized Markup
  13. 13. digital-web.com Screen based CSS & Print based CSS
  14. 14. Developing for the Mobile Context • XHTML ✓ Well formed ✓ Semantically correct ✓ Highly optimized • CSS ✓ Handheld media type (sometimes even screen media type) ✓ Highly optimized Refresh Portland
  15. 15. http://nytimes.com http://app.getleaflets.com/nyt/ NYTimes.com NY Times on Leaflet Minimum 30 Seconds to lo load 796kb Maximum of 7 seconds to lo load 30kb plus requests to multiple servers
  16. 16. Highly optimized header markup Non-optimized header markup
  17. 17. Optimized UI
  18. 18. Highly optimized UI Non-optimized UI
  19. 19. A Deep Dive into Mobile Web
  20. 20. Content
  21. 21. Readability & Page Width
  22. 22. The problem
  23. 23. Unreadable Must zoom
  24. 24. Unreadable Again
  25. 25. Text does not fit within screen
  26. 26. Possible solutions
  27. 27. Readable without zooming Fits perfectly within screen
  28. 28. Readable without zooming Text fits on screen
  29. 29. Interaction
  30. 30. Navigation
  31. 31. The problem
  32. 32. Navigation
  33. 33. Hotspots visible & clickable only after zoomed 10x
  34. 34. Content is way above navigation
  35. 35. Navigation could have larger hotspots
  36. 36. Microscopic hotspots
  37. 37. Barely navigable
  38. 38. Possible solutions
  39. 39. Navigation along side the content
  40. 40. Nice big and juicy hotspots
  41. 41. Super size hotspots
  42. 42. Visually called out navigation
  43. 43. Use larger headings & visual hints
  44. 44. Pagination
  45. 45. The problem
  46. 46. World’s smallest pagination
  47. 47. A possible solution
  48. 48. Excellent pagination solution
  49. 49. Search
  50. 50. The problem
  51. 51. A possible solution
  52. 52. A perfect case for search ahead
  53. 53. Buttons
  54. 54. The problem
  55. 55. Very typical web button
  56. 56. Possible solutions
  57. 57. Large juicy buttons for easy clicking
  58. 58. Designed with the specific 555-5555 context in mind
  59. 59. Calls to Action
  60. 60. The problem
  61. 61. Calls to action are lost in page
  62. 62. A possible solution
  63. 63. Make calls to action very obvious
  64. 64. ? What is Next? Refresh Portland
  65. 65. Augmented Reality with Location Based Services
  66. 66. Augmented Reality with Visual Recognition
  67. 67. Nintendo Wii
  68. 68. Microsoft’s Project Natal
  69. 69. Microsoft Surface
  70. 70. Oblong's g-speak Spatial Operating Environment
  71. 71. Sixth Sense Wearable Gestural Interface
  72. 72. Thank you! Refresh Portland
  73. 73. ? Questions Refresh Portland
  74. 74. Mobile UX Nick Finck nick@blueflavor.com Blue Flavor - http://blueflavor.com Personal - http://nickfinck.com Refresh Portland
  • fabiannoethe

    Mar. 11, 2015
  • dhashinamoorthy

    Dec. 17, 2014
  • Paradisegreentea

    Nov. 22, 2013
  • cinziaschiffo

    Apr. 24, 2013
  • ahmedxp

    Feb. 25, 2013
  • davizqb

    Feb. 8, 2013
  • ajdav07

    Sep. 27, 2012
  • throughart

    Sep. 10, 2012
  • maybamaung

    Aug. 8, 2012
  • clango

    Jul. 29, 2012
  • imbingdian

    Apr. 26, 2012
  • cklavery

    Apr. 15, 2011
  • liishygo

    Jul. 5, 2010
  • visicog

    Jun. 25, 2010
  • pletalk

    Jun. 17, 2010
  • tablan

    Jun. 16, 2010
  • badlittleduck

    Jun. 4, 2010
  • mister_k

    Apr. 13, 2010
  • kaidomo

    Apr. 10, 2010
  • ibox2000

    Feb. 28, 2010

This is a presentation I did for Refresh Portland. It is a very high level look at the User Experience Design in the Mobile Web. This will be a crash course in mobile user experience design, are you ready? We will look at how the mobile context has evolved over the years and where it is headed. We’ll explore the differences between the web and the mobile web, why these differences are important, what the key user experience principals are for the mobile web ...oh yeah, and there will be plenty of examples for you to sink your teeth into. I will give you the information you need to design an optimal user experience for the mobile web as well as what decisions you will need to make along the way.

Views

Total views

8,931

On Slideshare

0

From embeds

0

Number of embeds

820

Actions

Downloads

363

Shares

0

Comments

0

Likes

50

×