Mobile User Experience - @iRajLal

4 997 vues

Publié le

Introduction to Mobile User Experience, the fourth part of the User Experience Series presentation. - Rajesh Lal

Publié dans : Technologie, Design
1 commentaire
16 j’aime
Aucun téléchargement
Nombre de vues
4 997
Sur SlideShare
Issues des intégrations
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Mobile User Experience - @iRajLal

  1. 1. Rajesh Lal Senior UI/UX Engineer On designing Mobile User Interfaces
  2. 2. Mobile Device <ul><li>Fundamentals </li></ul><ul><ul><li>User Experience </li></ul></ul><ul><ul><li>User Interface Design </li></ul></ul><ul><ul><li>Web Usability </li></ul></ul><ul><li>User Experience for Mobile Device </li></ul><ul><li>Best Practices </li></ul><ul><li>6 Lessons from iPhone </li></ul>
  3. 3. User Experience The level of satisfaction an average user gets from a product bad good Context and Typical User define the User Experience, not design and functionality
  4. 4. User Interface Design <ul><li>Process of designing the interaction between User & Product </li></ul><ul><ul><ul><li>Interact </li></ul></ul></ul><ul><ul><ul><li>UI Design Process </li></ul></ul></ul><ul><ul><ul><li> Identify the users </li></ul></ul></ul><ul><ul><ul><li>Ask the users </li></ul></ul></ul><ul><ul><ul><li>Design accordingly </li></ul></ul></ul>
  5. 5. Web Usability <ul><ul><ul><li>First Principle : Make it Easy for the Average user </li></ul></ul></ul><ul><ul><li>Easy to Look at </li></ul></ul><ul><ul><li>Easy to Understand </li></ul></ul><ul><ul><li>Easy to Use </li></ul></ul>Website User Psychology
  6. 6. - Barbara Ballard Mobile Device User Experience “ Fundamentally, ‘mobile’ refers to the user, and not the device”
  7. 7. Mobile Device Best Practices
  8. 8. Mobile Device Best Practices <ul><li>Development </li></ul><ul><ul><li>Consistency </li></ul></ul><ul><ul><ul><li>For multiple devices </li></ul></ul></ul><ul><ul><ul><li>Between applications </li></ul></ul></ul><ul><ul><li>Wireframes </li></ul></ul><ul><ul><ul><li>Different than desktop /web application </li></ul></ul></ul><ul><ul><li>Capabilities </li></ul></ul><ul><ul><ul><li>Exploit the capabilities of device </li></ul></ul></ul><ul><ul><ul><li>Choose Top 5 resolutions – </li></ul></ul></ul><ul><ul><ul><ul><li>Resolution 240 X 320 for WM 6 </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Resolution 480 x 800 for WM 7 </li></ul></ul></ul></ul><ul><ul><li>Resources </li></ul></ul><ul><ul><ul><li>Create reusable components </li></ul></ul></ul><ul><ul><ul><li>Create reusable assets </li></ul></ul></ul><ul><ul><ul><ul><li>Reuse images/ style sheets / status messages </li></ul></ul></ul></ul><ul><ul><li>Testing </li></ul></ul><ul><ul><ul><li>Always Test on actual device </li></ul></ul></ul>
  9. 9. Mobile Device Best Practices <ul><li>Design </li></ul><ul><ul><li>One page should display one Idea </li></ul></ul><ul><ul><li>Content density </li></ul></ul><ul><ul><ul><li>Trade Off between functionality </li></ul></ul></ul><ul><ul><ul><li>Too Many links on a page / Following Too many links </li></ul></ul></ul><ul><ul><li>Essentiality </li></ul></ul><ul><ul><ul><li>Limit user to content which is requested </li></ul></ul></ul><ul><ul><li>Spatial organization </li></ul></ul><ul><ul><ul><li>Organize </li></ul></ul></ul><ul><ul><ul><li>Use a Grid with no more than 2 columns/rows </li></ul></ul></ul>Organize
  10. 10. Mobile Device Best Practices <ul><li>Design </li></ul><ul><ul><li>Functional areas </li></ul></ul><ul><ul><ul><li>Notification / Content / Input </li></ul></ul></ul><ul><ul><li>Visual flow </li></ul></ul><ul><ul><ul><li>Align related objects </li></ul></ul></ul><ul><ul><li>Typography Standard Size </li></ul></ul><ul><ul><li>(For resolution = 240x320) </li></ul></ul><ul><ul><ul><li>Menu – 10 to 12px </li></ul></ul></ul><ul><ul><ul><li>Content –12 to 14px </li></ul></ul></ul><ul><ul><ul><li>Header – 14 – 16px </li></ul></ul></ul><ul><ul><li>Colors for Mobile device </li></ul></ul><ul><ul><ul><li>Consider Sun, screen contrast, reflex, brightness </li></ul></ul></ul><ul><ul><ul><li>Use color for both style and function </li></ul></ul></ul><ul><ul><ul><li>(Red color = Stop) </li></ul></ul></ul>Notification Input Content
  11. 11. Mobile Device Best Practices <ul><li>Interaction </li></ul><ul><ul><li>Likelihood to reach a Target </li></ul></ul><ul><ul><ul><li>Directly proportional to the distance of the target </li></ul></ul></ul><ul><ul><li>More Choice = More time for decisions </li></ul></ul><ul><ul><ul><li>Usage of functionality is directly proportional to the number of choices user have to make to get there </li></ul></ul></ul><ul><ul><li>Categorize in 7 sets </li></ul></ul><ul><ul><ul><li>Human mind is able to remember information in chunks of 7 ± 2 </li></ul></ul></ul><ul><ul><li>Always provide feedback </li></ul></ul><ul><ul><ul><li>Acknowledgment for every action </li></ul></ul></ul><ul><ul><ul><li>Feed forward </li></ul></ul></ul><ul><ul><ul><li>Mobile device can be slow in performance so immediate feedback is a must </li></ul></ul></ul>
  12. 12. Mobile Device Best Practices <ul><li>Interaction </li></ul><ul><ul><li>Consistent navigation </li></ul></ul><ul><ul><li>Define dimensions (example) </li></ul></ul><ul><ul><ul><li>Left-right: Time </li></ul></ul></ul><ul><ul><ul><li>Up-down: Space </li></ul></ul></ul><ul><ul><li>Focus on User Needs </li></ul></ul><ul><ul><li>Remember User Preference </li></ul></ul><ul><ul><li>Avoid Scrolling </li></ul></ul><ul><ul><li>Rotating, Full Screen and Scaling </li></ul></ul>
  13. 13. Mobile Device Best Practices <ul><li>Input </li></ul><ul><ul><li>Design for Multiple Modes </li></ul></ul><ul><ul><ul><li>Finger Touch ( includes Stylus) </li></ul></ul></ul><ul><ul><ul><li>Left Hand users </li></ul></ul></ul><ul><ul><ul><li>Soft Keys </li></ul></ul></ul><ul><ul><ul><li>Keyboards </li></ul></ul></ul><ul><ul><ul><li>Projected keyboards </li></ul></ul></ul><ul><li>Cross-Device </li></ul><ul><ul><li>Touch and Non-Touch Device </li></ul></ul>
  14. 14. 6 Lessons from IPhone <ul><ul><ul><li>IPhone User Interface </li></ul></ul></ul><ul><ul><ul><li>“ Designed for the Device” </li></ul></ul></ul>
  15. 15. Question for You <ul><ul><ul><li>What is the unique selling point of IPhone ? </li></ul></ul></ul>
  16. 16. <ul><li>Consistent Interaction </li></ul><ul><li>Favor Better User Experience to Features </li></ul><ul><li>Make Applications reachable </li></ul><ul><li>Big Buttons </li></ul><ul><li>Symmetry </li></ul><ul><li>Absence of abruptness </li></ul>6 Lessons from IPhone
  17. 17. Lessons 1 <ul><li>Consistency </li></ul><ul><li>IPhone have a small set of Interactions which uses common controls and is consistent among all the applications </li></ul><ul><ul><li>List View </li></ul></ul><ul><ul><li>Touch </li></ul></ul><ul><ul><li>Update buttons at the top BAR </li></ul></ul><ul><ul><li>Categories in the bottom </li></ul></ul>
  18. 18. Lessons 1: Common controls and Consistency
  19. 19. Lessons 2 <ul><ul><li>Keeping better ‘experience’ </li></ul></ul><ul><ul><ul><li>Ahead of more Feature (4 main apps) </li></ul></ul></ul><ul><ul><li>Phone </li></ul></ul><ul><ul><li>Mail </li></ul></ul><ul><ul><li>Browser </li></ul></ul><ul><ul><li>Music </li></ul></ul>
  20. 20. Lessons 3 <ul><li>Every thing reachable in 3-4 taps </li></ul><ul><ul><li>Application </li></ul></ul><ul><ul><ul><li>Choice </li></ul></ul></ul><ul><ul><ul><ul><li>Action </li></ul></ul></ul></ul>
  21. 21. Lessons 4 <ul><li>Big buttons </li></ul><ul><li>For thumb / finger Interaction </li></ul>
  22. 22. Lessons 5 <ul><li>Symmetry </li></ul><ul><li>Give perfect interaction for both hands </li></ul>
  23. 23. Lessons 6 <ul><li>Absence of abruptness – Fluidity </li></ul>
  24. 24. <ul><li>References </li></ul><ul><ul><li> </li></ul></ul><ul><ul><li>Designing the Mobile User Experience - Barbara Ballard </li></ul></ul><ul><ul><li>Using Microsoft Silverlight for Creating Rich Mobile User Experience - Giorgio Sardo </li></ul></ul> contact: [email_address]