• Like
Mobile UX
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Mobile UX

  • 1,730 views
Published

Mobile User Ex

Mobile User Ex

Published in Technology , Business
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,730
On SlideShare
0
From Embeds
0
Number of Embeds
4

Actions

Shares
Downloads
51
Comments
0
Likes
3

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Mobile UX Jenifer Hanen @msjen & Cindy Li @cindyli 1
  • 2. “Sworn by oath to uphold you, we are.” -Yoda MobileUX Jenifer Hanen & Cindy Li 2 2
  • 3. Choose a path: A. mobile web B. mobile app? MobileUX Jenifer Hanen & Cindy Li 3 3
  • 4. Keeping the essence of your website or product MobileUX Jenifer Hanen & Cindy Li 4 4
  • 5. What is your goal? • Features (camera, microphone, notifications) • Location • Light weight version of website MobileUX Jenifer Hanen & Cindy Li 5 5
  • 6. It depends... MobileUX Jenifer Hanen & Cindy Li 6 6
  • 7. It’s about context MobileUX Jenifer Hanen & Cindy Li 7 7
  • 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. The Villain is the download speed MobileUX Jenifer Hanen & Cindy Li 9 9
  • 10. “If into the security recordings you go, only pain will you find” -Yoda MobileUX Jenifer Hanen & Cindy Li 10 10
  • 11. Give users the same features for their security aka privacy preferences MobileUX Jenifer Hanen & Cindy Li 11 11
  • 12. Case Study: Gowalla MobileUX Jenifer Hanen & Cindy Li 12 12
  • 13. 13 13
  • 14. “Decide you must how to serve them best...” -Yoda MobileUX Jenifer Hanen & Cindy Li 14 14
  • 15. Allowing users possibilities MobileUX Jenifer Hanen & Cindy Li 15 15
  • 16. Case Study: Twitter (m.twitter.com) MobileUX Jenifer Hanen & Cindy Li 16 16
  • 17. One phone to rule them all? You know which one I am talking about. MobileUX Jenifer Hanen & Cindy Li 17 17
  • 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. 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. 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. This brings us back to Choice. MobileUX Jenifer Hanen & Cindy Li 21 21
  • 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. 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. 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. Always give the user choice to escape any walled mobile garden. MobileUX Jenifer Hanen & Cindy Li 25 25
  • 26. MobileUX Jenifer Hanen & Cindy Li A KISS for the User 26 26
  • 27. Keep it Simple, Sweety Click me, Baby! 1-5 clicks vs. 15-20 clicks MobileUX Jenifer Hanen & Cindy Li 27 27
  • 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. 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. 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. But, think very carefully before linking to a sms: <a href="sms:17145551212">Text me!</a> MobileUX Jenifer Hanen & Cindy Li 31 31
  • 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. 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. Resources MobileUX Jenifer Hanen & Cindy Li 34 34
  • 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. 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. Assets to send to Apple MobileUX Jennifer Hanen & Cindy Li 37 37
  • 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. Standard System Buttons and Icons MobileUX Jenifer Hanen & Cindy Li 39 39
  • 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. 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. 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. 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. Thank You! Cindy Li, @cindyli, cindyli.com Jenifer Hanen, @msjen, blackphoebe.com MobileUX Jenifer Hanen & Cindy Li 44