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 User Experience - @iRajLal

5,116 views

Published on

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

Published in: Technology, Design
  • Get my book on Mobile User Interface design guidelines and best practices here http://www.designuserinterface.com/
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

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>www.w3.org/tr/mobile-bp </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>www.abcofdesign.com contact: [email_address]

×