Designing for mobile user experience
5 likes1,443 views
This document discusses designing for mobile user experience. It covers the evolution of mobile devices from keypads to touchscreens, challenges of mobile UI design like smaller screens, and design patterns for touch interfaces. Guidelines are provided for mobile websites and applications, including prioritizing content over navigation, using shallow navigation structures, and ensuring touch targets are appropriately sized. The document concludes with an exercise to design a mobile library application.
Designing for mobile user experience
- 1. Designing for Mobile User Experience Sameer Chavan @sameerhere TechEase 2012 Views 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. 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. User Interface Evolution Mainframe Desktop Client/Server Websites RIA 3
- 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. State of early mobile sites
- 7. Multi screens 7 http://services.google.com/fh/files/misc/multiscreenworld_final.pdf
- 8. Multi screens 8 http://services.google.com/fh/files/misc/multiscreenworld_final.pdf
- 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. Evolution – keypads to Touch
- 11. Mobile UI - A new Paradigm • Connected devices. • Touch interfaces • Acceleration sensing • Orientation awareness • Natural animation • Simulations of physical behavior
- 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) http://developer.android.com/design/style/metrics- http://msdn.microsoft.com/en- grids.html us/library/windows/apps/hh465415.aspx
- 13. Designing for Mobile UI 13 http://www.lukew.com/ff/entry.asp?1071
- 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 upgrades 14
- 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 more 15
- 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 options 16
- 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 Ballard 17
- 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. Mobile Websites Content prioritization No Hypertext 19
- 20. UI Controls
- 22. Mobile UI Wireframe http://www.mockflow.com/
- 24. Continuous Experience. 24 5/9/2011
- 25. Sensors Accelerometer GPS Gyroscope WiFi Magnetometer Bluetooth Barometer GSM/CDMA Proximity NFC Light Sensor Camera Touch Screen
- 26. Alternatives Responsive Web design http://jquerymobile.com/ http://www.formfett.net/ http://forefathersgroup.com/ http://cafeevoke.com/ 26
- 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. 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. Questions.. [email protected] www.sameerchavan.com 29