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.
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
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
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
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 !!!