Designing for mobile user experience


Published on

A mobile design workshop I took at TechEase 2012 at IIIT Hyderabad.

Published in: Design
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Designing for mobile user experience

  1. 1. Designing for Mobile User Experience Sameer Chavan @sameerhere TechEase 2012Views expressed in this presentation are purely views of Presenter and do not reflect views of his employers.All the product names and technologies discussed in this presentation are property of respective companies.
  2. 2. What we will learn today?• Mobile websites and application evolution• Current state of Small Form Factor devices• Challenges for Mobile UI design• Understanding Touch Gesture Interactions• UI design patterns for Mobile UX• Converting existing web sites into mobile applications.• Design Exercise.
  3. 3. User Interface Evolution Mainframe Desktop Client/Server Websites RIA3
  4. 4. Mobile Content• Mobile Sites and Apps• Keypad and track pad to touchscreens• Links to tabs/plans/Rows• Multi column to single column• Simple navigation• Sensors and smartness
  5. 5. State of early mobile sites
  6. 6. Mobile Content
  7. 7. Multi screens 7
  8. 8. Multi screens 8
  9. 9. New Opportunities and Challenges: Mobile UX Small, touch screen Unstable environment On the go Various OS & UI Potential frustration May 9-10, 2012
  10. 10. Evolution – keypads to Touch
  11. 11. Mobile UI - A new Paradigm• Connected devices.• Touch interfaces• Acceleration sensing• Orientation awareness• Natural animation• Simulations of physical behavior
  12. 12. Touch Targets• Mobile devices moving to touch UI• Use appropriately sized targets• Maintain spacing between targets• Place important actions in easy to reach• locations (ergonomics) grids.html us/library/windows/apps/hh465415.aspx
  13. 13. Designing for Mobile UI13
  14. 14. Native Apps Advantages: • Full access to device capabilities • Integration with other native applications • Off-line operation • ‘Push’ notifications • Seamless design • Runs faster • Dev frameworks • Installation via app stores Disadvantages: • Device specific • Lock in to device upgrades14
  15. 15. Web Apps Advantages: Disadvantages: • Cross-device support • Less functionality • Quick development • Limited integration with device • Instant update Process • Off-line is difficult • No lock in to app stores (no 30% cut) • Less seamless with other apps • HTML5 is doing more15
  16. 16. Hybrid Apps Advantages: Disadvantages: • Potentially provides best of both • Early days, which platform worlds to choose? • Access to native features • Potentially complex • Apps are web-based, and therefore cross platform • Growing range of third-party options16
  17. 17. Mobile approach Miniaturisation “... treats the mobile environment and technology as a subset of the desktop environment.” It’s a repurpose of existing content Mobilisation “... precisely targets mobile user needs, making (the) best possible use of technology.” Content and context specific Barbara Ballard17
  18. 18. Mobile Web design Desktop Vs Mobile • Breadcrumbs • Deep Explorer views • Popup Dialogues • Multiple planes • Progress indicator • Error messages and warnings. • Mobile sites offer better integration with phone functions - orders by phone or sending promotional text messages. • Mobile sites can take advantage of technology that automatically detects where users are to present local search results.18
  19. 19. Mobile WebsitesContent prioritization No Hypertext 19
  20. 20. UI Controls
  21. 21.
  22. 22. Mobile UI Wireframe
  23. 23. Mobile UI Wireframe
  24. 24. Continuous Experience.24 5/9/2011
  25. 25. SensorsAccelerometer GPS Gyroscope WiFiMagnetometer Bluetooth Barometer GSM/CDMA Proximity NFC Light Sensor Camera Touch Screen
  26. 26. Alternatives Responsive Web design
  27. 27. Design Guidelines • Design for - On the go.. • Content is king. Navigation next • Shallow navigation • Fun and explorations • Stick to a design pattern. • Use graphics wisely • Think of touch target size.27
  28. 28. Design Exercise• Design Mobile site/App for your collage library.• Minimum requirements- • Browse books by category • Search books • View my books • Social sharing of books, recommendations, comments, likes, etc.. • Any new ideas !!!
  29. 29. Questions.. www.sameerchavan.com29