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.
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.
User Interface Evolution Mainframe Desktop Client/Server Websites RIA3
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
Mobile UI - A new Paradigm• Connected devices.• Touch interfaces• Acceleration sensing• Orientation awareness• Natural animation• Simulations of physical behavior
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
Designing for Mobile UI13 http://www.lukew.com/ff/entry.asp?1071
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
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
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
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
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
Mobile WebsitesContent prioritization No Hypertext 19
SensorsAccelerometer GPS Gyroscope WiFiMagnetometer Bluetooth Barometer GSM/CDMA Proximity NFC Light Sensor Camera Touch Screen
Alternatives Responsive Web design http://jquerymobile.com/ http://www.formfett.net/ http://forefathersgroup.com/ http://cafeevoke.com/26
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
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 !!!