Mobile UX

1,926
-1

Published on

Mobile User Ex

Published in: Technology, Business
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,926
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
51
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Mobile UX

  1. 1. Mobile UX Jenifer Hanen @msjen & Cindy Li @cindyli 1
  2. 2. “Sworn by oath to uphold you, we are.” -Yoda MobileUX Jenifer Hanen & Cindy Li 2 2
  3. 3. Choose a path: A. mobile web B. mobile app? MobileUX Jenifer Hanen & Cindy Li 3 3
  4. 4. Keeping the essence of your website or product MobileUX Jenifer Hanen & Cindy Li 4 4
  5. 5. What is your goal? • Features (camera, microphone, notifications) • Location • Light weight version of website MobileUX Jenifer Hanen & Cindy Li 5 5
  6. 6. It depends... MobileUX Jenifer Hanen & Cindy Li 6 6
  7. 7. It’s about context MobileUX Jenifer Hanen & Cindy Li 7 7
  8. 8. “Clear, your mind must be if you are to discover the real villains behind the plot”-Yoda MobileUX Jenifer Hanen & Cindy Li 8 8
  9. 9. The Villain is the download speed MobileUX Jenifer Hanen & Cindy Li 9 9
  10. 10. “If into the security recordings you go, only pain will you find” -Yoda MobileUX Jenifer Hanen & Cindy Li 10 10
  11. 11. Give users the same features for their security aka privacy preferences MobileUX Jenifer Hanen & Cindy Li 11 11
  12. 12. Case Study: Gowalla MobileUX Jenifer Hanen & Cindy Li 12 12
  13. 13. 13 13
  14. 14. “Decide you must how to serve them best...” -Yoda MobileUX Jenifer Hanen & Cindy Li 14 14
  15. 15. Allowing users possibilities MobileUX Jenifer Hanen & Cindy Li 15 15
  16. 16. Case Study: Twitter (m.twitter.com) MobileUX Jenifer Hanen & Cindy Li 16 16
  17. 17. One phone to rule them all? You know which one I am talking about. MobileUX Jenifer Hanen & Cindy Li 17 17
  18. 18. I think not. There are many mobile devices, many manufacturers, & many cultures & user needs to be met. MobileUX Jenifer Hanen & Cindy Li 18 18
  19. 19. Don’t Assume that because you & your tribe love & depend on '_________' mobile that everyone else does, too. MobileUX Jenifer Hanen & Cindy Li 19 19
  20. 20. What are the User's desires, wants, and needs? Do User Research, Work up Personas, Test and then Watch your site's statistics. MobileUX Jenifer Hanen & Cindy Li 20 20
  21. 21. This brings us back to Choice. MobileUX Jenifer Hanen & Cindy Li 21 21
  22. 22. WAIT! Does this mean we have to return to 1999? Design & Code two or more sites depending on who is visiting on what multiple devices? ((O.o)) MobileUX Jenifer Hanen & Cindy Li 22 22
  23. 23. Take the time to consider your internal & external users Will simplicity or more complexity serve them better? MobileUX Jenifer Hanen & Cindy Li 23 23
  24. 24. One Web Site? Or a Mobile & a Web Site? Or More? Does it serve the user and the available resources better to have one site using progressive enhancement, or a web & a mobile site with a sniffer, or several mini- sites for major devices? MobileUX Jenifer Hanen & Cindy Li 24 24
  25. 25. Always give the user choice to escape any walled mobile garden. MobileUX Jenifer Hanen & Cindy Li 25 25
  26. 26. MobileUX Jenifer Hanen & Cindy Li A KISS for the User 26 26
  27. 27. Keep it Simple, Sweety Click me, Baby! 1-5 clicks vs. 15-20 clicks MobileUX Jenifer Hanen & Cindy Li 27 27
  28. 28. Perhaps? For a mobile app put as much complexity in the user settings & allow the user to determine the simplicity or complexity of their own experience. MobileUX Jenifer Hanen & Cindy Li 28 28
  29. 29. Designing for Context means never forgetting voice. Don't forget the power of voice, sms/text, MobileUX and sensors as well as web or app functions. Jenifer Hanen & Cindy Li 29 29
  30. 30. Mobile apps and web should take voice and text usage into account. One Simple fix you can do today is make sure that all the phone numbers on business mobile sites use <a href="tel:17145551212">1.714.555.1212</a> MobileUX Jenifer Hanen & Cindy Li 30 30
  31. 31. But, think very carefully before linking to a sms: <a href="sms:17145551212">Text me!</a> MobileUX Jenifer Hanen & Cindy Li 31 31
  32. 32. Be consistent and coherent in the design choices. Would it serve the user better to use common interface & interactions or to innovate? MobileUX Jenifer Hanen & Cindy Li 32 32
  33. 33. Last but not least don't forget about the physicality of a mobile device in the palm of one's hand. It is an object with limitations of screen, input, battery, and connectivity. How do we as designers work within these constraints to create a great user experience? MobileUX Jenifer Hanen & Cindy Li 33 33
  34. 34. Resources MobileUX Jenifer Hanen & Cindy Li 34 34
  35. 35. iPhone templates Omnigraffle: http://graffletopia.com/stencils/413 Fireworks: http://blog.metaspark.com/2009/02/fireworks-toolkit-for- creating-iphone-ui-mockups/ Photoshop: http://www.teehanlax.com/blog/2009/06/18/iphone-gui-psd-30/ MobileUX Jenifer Hanen & Cindy Li 35 35
  36. 36. iPad: http://www.teehanlax.com/blog/2010/02/01/ipad-gui-psd Android template photoshop: http://www.matcheck.cz/androidguipsd/ Nokia Templates, Icons and UX Docs: http://www.forum.nokia.com/Tools_Docs_and_Code/ Documentation/Usability/ Palm pre template: http://www.teehanlax.com/blog/2009/07/08/palm-pre-gui-psd/ MobileUX Jennifer Hanen & Cindy Li 36 36
  37. 37. Assets to send to Apple MobileUX Jennifer Hanen & Cindy Li 37 37
  38. 38. Icon: Png format: 512x512: for display in the App store 57x57: for App icon 29x29: for spotlight search Title Treatment: Min size:600x600: Title treatment/logo for app should be easy to read. Format: vector, eps, ai; transparent psd or tif Launch images: 320x480: include status bar area to display status bar color you’ve chosen. First image after launching. Don’t use the splash screen, or an about page. •Do not submit with rounded corner, shine or a drop shadow MobileUX Jenifer Hanen & Cindy Li 38 38
  39. 39. Standard System Buttons and Icons MobileUX Jenifer Hanen & Cindy Li 39 39
  40. 40. Toolbar icons: 20x20 (PNG) Light is 90° (top of the icon) Tab Bar icons: 30x30 (PNG) Standard Buttons in Table Rows/UI element: 30x30 (PNG) MobileUX Jenifer Hanen & Cindy Li 40 40
  41. 41. Mobile Web Resources: Design for Mobile Wiki: http://patterns.design4mobile.mobi PPK's Mobile browser testing and articles: http://www.quirksmode.org/mobile/ MobiForge's Mobile Emulators: http://mobiforge.com/emulators/page/mobile-emulators Mobile Web Application Best Practices: http://www.w3.org/TR/mwabp/ MobileUX Jenifer Hanen & Cindy Li 41 41
  42. 42. Books: Barbara Ballard, "Designing the Mobile User Experience", 2007, Wiley Brian Fling, "Mobile Design and Development", 2009, O'Reilly Media Matt Jones, "Mobile Interaction Design", 2006, Wiley MobileUX Jenifer Hanen & Cindy Li 42 42
  43. 43. Flickr CC Photo Credits: C-Monster's Donald Judd photo: http://www.flickr.com/photos/arte/4532448832/ Urban Don's Time Machine 3026 photo: http://www.flickr.com/photos/donpezzano/ 2724171374 Nataliej's Kiss Me photo: http://www.flickr.com/photos/nataliejohnson/1862352885/ Ms. Jen's Cubicle Gangsta photo: http://www.flickr.com/photos/msjen/14282969/ MobileUX Jenifer Hanen & Cindy Li 43 43
  44. 44. Thank You! Cindy Li, @cindyli, cindyli.com Jenifer Hanen, @msjen, blackphoebe.com MobileUX Jenifer Hanen & Cindy Li 44

×