Mobile UX
     Jenifer Hanen @msjen
        & Cindy Li @cindyli




                              1
“Sworn by oath to
               uphold you, we are.” -Yoda


MobileUX
Jenifer Hanen & Cindy Li                    2

    ...
Choose a path:

                            A. mobile web
                            B. mobile app?



MobileUX
Jenifer H...
Keeping the essence of
        your website or product



MobileUX
Jenifer Hanen & Cindy Li          4

                  ...
What is your goal?
                           • Features (camera, microphone,
                                      notific...
It depends...



MobileUX
Jenifer Hanen & Cindy Li                   6

                                               6
It’s about context



MobileUX
Jenifer Hanen & Cindy Li                        7

                                        ...
“Clear, your mind must be
      if you are to discover the
        real villains behind the
                 plot”-Yoda

M...
The Villain is the
                           download speed



MobileUX
Jenifer Hanen & Cindy Li                        9...
“If into the security
               recordings you go, only
                pain will you find” -Yoda


MobileUX
Jenifer H...
Give users the same
                        features for their
                       security aka privacy
               ...
Case Study: Gowalla




MobileUX
Jenifer Hanen & Cindy Li                         12

                                    ...
13
 13
“Decide you must how
                to serve them best...”
                           -Yoda




MobileUX
Jenifer Hanen & ...
Allowing users
                            possibilities



MobileUX
Jenifer Hanen & Cindy Li                    15

     ...
Case Study: Twitter (m.twitter.com)




MobileUX
Jenifer Hanen & Cindy Li                                     16

        ...
One phone to rule them all?




                           You know which one I am talking about.
MobileUX
Jenifer Hanen &...
I think not.
                               There are many
                               mobile devices,
                ...
Don’t Assume
                     that because you & your tribe love & depend on
                    '_________' mobile th...
What are the User's
                       desires, wants, and
                             needs?
                       ...
This brings us back to Choice.
MobileUX
Jenifer Hanen & Cindy Li          21

                                   21
WAIT!
                   Does this mean we have to return to 1999?
              Design & Code two or more sites depending...
Take the time

     to consider your internal &
           external users
       Will simplicity or more
       complexity...
One Web Site?
                     Or a Mobile & a Web
                       Site? Or More?
                Does it serve...
Always give the user
                     choice to escape any
                     walled mobile garden.




MobileUX
Jen...
MobileUX
Jenifer Hanen & Cindy Li
                           A KISS for the User   26

                                   ...
Keep it Simple, Sweety

                                Click me, Baby!
                           1-5 clicks vs. 15-20 cl...
Perhaps?
                 For a mobile app put as much complexity in the user
                settings & allow the user to...
Designing for Context
                           means never forgetting
                                  voice.


       ...
Mobile apps and web should
               take voice and text usage
                     into account.
                One...
But, think very carefully
              before linking to a sms:

                           <a href="sms:17145551212">Tex...
Be consistent and coherent
        in the design choices.

                       Would it serve the user better to use co...
Last but not least
                                  don't forget about the physicality of
                              a...
Resources


MobileUX
Jenifer Hanen & Cindy Li               34

                                        34
iPhone templates
   Omnigraffle:
   http://graffletopia.com/stencils/413

   Fireworks:
   http://blog.metaspark.com/2009/02...
iPad:
     http://www.teehanlax.com/blog/2010/02/01/ipad-gui-psd

     Android template photoshop:
     http://www.matchec...
Assets to send to Apple



MobileUX
Jennifer Hanen & Cindy Li               37

                                         37
Icon: Png format:
    512x512: for display in the App store
    57x57: for App icon
    29x29: for spotlight search

    T...
Standard System
                           Buttons and Icons



MobileUX
Jenifer Hanen & Cindy Li                       39...
Toolbar icons: 20x20 (PNG)
   Light is 90° (top of the icon)




   Tab Bar icons: 30x30 (PNG)




   Standard Buttons in ...
Mobile Web Resources:
                       Design for Mobile Wiki:
                       http://patterns.design4mobile....
Books:
                       Barbara Ballard,
                       "Designing the Mobile User Experience", 2007, Wiley
...
Flickr CC Photo Credits:
              C-Monster's Donald Judd photo: http://www.flickr.com/photos/arte/4532448832/

      ...
Thank You!

                                Cindy Li, @cindyli, cindyli.com

                           Jenifer Hanen, @ms...
Upcoming SlideShare
Loading in...5
×

Mobile UX

1,833

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,833
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

Transcript of "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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×