The document discusses user experience (UX) design principles for touchscreen and multi-device interfaces. It covers challenges of small screens, touch gestures, responsive web design, mobile sensors, and converting websites to mobile apps. Design guidelines emphasized task-oriented interfaces, shallow navigation, and utilizing touch, graphics, and sensors appropriately for mobile contexts. An exercise proposes sketching screens for a bus app in Bangalore.

1. Designing UX for Touch Screen,
Multi-Devices & Sensors
Sameer Chavan @sameerhere
February 16, 2013

2. Agenda
• Changing state of mobile phones
• Challenges in designing for small screens
• Gestural Touch interactions
• Responsive Web Design
• Mobile Sensors and how to use in UX
• Converting existing web sites into mobile
applications
• Design Exercise
3 Copyright © 2013 Intel Corporation. All rights reserved.

3. Human Memory Load
4 Copyright © 2013 Intel Corporation. All rights reserved.

4. User Interface Evolution
Mainframe Desktop Client/Server Websites Rich Internet Application
5 Copyright © 2013 Intel Corporation. All rights reserved.

5. Mobile UI Elements
Traditional User Interaction points
• Dialer
• Camera
• Music Player
• Mobile Web Sites
• Mobile Native Apps
6 Copyright © 2013 Intel Corporation. All rights reserved.

6. Examples of Early Mobile Sites
7 Copyright © 2013 Intel Corporation. All rights reserved.

7. Early Mobile Interface
• Interaction limited by
hardware buttons
• Difficult to use track pad,
navigation key
• Small screen size
• Copy of desktop UI and
controls
• Goal is to miniaturize and not
to mobilize
8 Copyright © 2013 Intel Corporation. All rights reserved.

8. Traditional Challenges in Mobile UX
• Small Screen
• On the Go, errors
• Unstable Environment
• Social context
• Non standard OS
• No tooltips, context
• Data speed
9 Copyright © 2013 Intel Corporation. All rights reserved.

9. Mobile UI - A New Paradigm
• Connected devices
• Touch interfaces
• Acceleration sensing
• Orientation awareness
• Natural animation
• Simulations of physical behavior
10 Copyright © 2013 Intel Corporation. All rights reserved.

10. Evolution – From Keypads to Touch
Tablets
11 Copyright © 2013 Intel Corporation. All rights reserved.

11. Designing for Touch Targets
• Mobile devices moving to touch UI – no
standardization !
• Use appropriately sized targets – bigger buttons
• Maintain spacing between targets – space between
controls
• Place important actions in easy to reach- thumb reach
• Provide adequate feedback and visual clues
• Locations matters (ergonomics)
12 Copyright © 2013 Intel Corporation. All rights reserved.

12. Touch Size
7mm 7mm
7mm
2mm padding
7x7 mm: Recommended minimum size
9x9 mm: When accuracy matters
5x5 mm: When it just won't fit
13 Copyright © 2013 Intel Corporation. All rights reserved.

13. Touch Gestures
Touch Long press Flick Drag Double Tap Pinch /
Rotate
Tap Touch & Hold Swipe Pan
Select item Multi select Flick pages Moving objects Zoom in & out Zoom in & out
Context menu Swipe to delete Rotate pictures
14 Copyright © 2013 Intel Corporation. All rights reserved.

14. Touch Reach
Difficult
Difficult
ok
ok
Easy
Easy access
Touch areas that are in reach while holding devices.
Design interaction controls in these proffered areas
15 Copyright © 2013 Intel Corporation. All rights reserved.

15. Mobile Approach
Miniaturisation
“... treats the mobile environment and technology as a
subset of the desktop environment.”
Is a repurpose of existing content
Mobilisation
“... precisely targets mobile user needs, making
(the) best possible use of technology.”
Is content and context specific
16 Copyright © 2013 Intel Corporation. All rights reserved.

16. Mobile Design: Desktop vs Mobile
Desktop Website
• Breadcrumbs
• Deep Explorer Views
• Popup Dialogues
• Multiple planes
• Progress indicator
• Error messages and warnings
Mobile Websites
• Cannot have deep navigation, too many controls, popups, etc
• 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.
17 Copyright © 2013 Intel Corporation. All rights reserved.

17. New Challenges - Multi screens
Smart Phone Tablet Laptop TV
Activities span over multiple devices.
18 Copyright © 2013 Intel Corporation. All rights reserved.

18. Solution: Responsive Web Design
19 Copyright © 2013 Intel Corporation. All rights reserved.

19. What is Responsive Web Design
For a long time, the web was just on a desktop.
Now the web is in phone, tablet, TV, refrigerator, car, etc.
Old Solution
Create separate sites for Desktop & Mobile
New Approach
Create one site that expands and contracts to the size of whatever device it is
being viewed on
Principles
• Fluid layouts with media queries to change the design at specific
widths or breakpoints.
• The site must be built with a flexible grid foundation.
• Images that are incorporated into the design must be flexible
themselves.
• Different views must be enabled in different contexts via media
queries.
20 Copyright © 2013 Intel Corporation. All rights reserved.

20. Responsive Web Design
Logo
Logo
Logo
Logo
480px 800px 1024px 1920px
Smartphone Tablets Netbooks Laptops
Wireframe for different sizes
21 Copyright © 2013 Intel Corporation. All rights reserved.

21. Examples
Example 1
Example 2
Example 3
Framework

22. Touch Design principles
Single Column New Mobile OS controls Gestures actions
Navigation
Sections >
Content
Controls
23 Copyright © 2013 Intel Corporation. All rights reserved.

23. Mobile Sensors
24 Copyright © 2013 Intel Corporation. All rights reserved.

24. Mobile Sensors
Accelerometer GPS
Gyroscope WiFi
Magnetometer Bluetooth
Barometer GSM/CDMA
Proximity NFC
Light Sensor Camera
Touch Screen
25 Copyright © 2013 Intel Corporation. All rights reserved.

25. Use of Sensors
Ambient Light Sensor
Ambient light sensor extends battery life and enables easy-to-
view displays that are optimized to the environment lighting
Proximity Sensor
A proximity sensor is used mostly in Smartphone. It detects
how close the screen of the phone is to your body. This allows
the phone to sense when you have brought the phone up to
your ear. At that point, the display turns off in order to save
battery.
Global Positioning System (GPS)
GPS was originally intended for military applications, but in the
1980s, the government made the system available for civilian
use. It’s a navigation tracking system.
26 Copyright © 2013 Intel Corporation. All rights reserved.

26. Examples of Sensors
Accelerometer
The accelerometer allows the device of Smartphone to detect the
orientation of the device and adapts the content to suit the new
orientation. It rotates photos, browser, apps automatically when you
rotate the phone. It detects motion. Shake to refresh or change
song
Compass
Basically compasses are attracted to the earth's poles using
magnets. But the modern smart phone is not using magnets. It
listens to ultra low frequency signal coming from e.g. North pole.
Used with GPS
Gyros
A gyroscope is a device for measuring or maintaining
orientation, based on the principles of angular momentum. It helps
in gesture recognition.
27 Copyright © 2013 Intel Corporation. All rights reserved.

27. Use of Sensors
Camera
• Taking pictures, Face login
• Scanning barcodes and QR codes
• Face detection to keep phone awake.
GPS + compass
• Geo tagging photos
• Used in Check-in applications
• Map applications, Context aware apps
• Location based content apps – mobile security
Accelerometer + Gyro
• Gaming
• Rotating screens - Turning off phone
• Finding vibrations to increase sound
• off phone using palm
Proximity
• Switching off screen
• Turning off phone using palm
28 Copyright © 2013 Intel Corporation. All rights reserved.

28. Examples
Coffee
29 Copyright © 2013 Intel Corporation. All rights reserved.

29. Summary: Design Guidelines
• Task oriented design
• Designed 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
30 Copyright © 2013 Intel Corporation. All rights reserved.

30. Design Exercise
• Pencil sketch mobile screens for an App for Bangalore
Bus
• Requirements-
• Find upcoming buses by location
• Publish pictures of traffic
• Scan bus numbers/codes to check its path
• Any new ideas!
Don’t worry about login and user registrations.
31 Copyright © 2013 Intel Corporation. All rights reserved.

31. Questions?
32 Copyright © 2013 Intel Corporation. All rights reserved.

32. Thank You
33 INTEL CONFIDENTIAL