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

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

6. Mobile Content

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

21. http://jquerymobile.com/designs/

22. Mobile UI Wireframe
http://www.mockflow.com/

23. Mobile UI Wireframe
http://blog.metaspark.com/2009/02/fireworks-toolkit-for-creating-iphone-ui-mockups/)

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..
sameer@chavan.me
www.sameerchavan.com
29