Designing for Touch and Sensor for Mobiles & Tablets

995 views
836 views

Published on

Presented at Siliconindia.com event - "Mobile World' at Bangalore.

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
995
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide
  • MSFT: http://bit.ly/YSCRkSAndroid: http://bit.ly/WvDmxd
  • http://services.google.com/fh/files/misc/multiscreenworld_final.pdf
  • http://jquerymobile.com/http://www.formfett.net/http://forefathersgroup.com/http://cafeevoke.com/
  • Designing for Touch and Sensor for Mobiles & Tablets

    1. 1. Designing UX for Touch Screen,Multi-Devices & Sensors Sameer Chavan @sameerhere February 16, 2013
    2. 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 Exercise3 Copyright © 2013 Intel Corporation. All rights reserved.
    3. 3. Human Memory Load4 Copyright © 2013 Intel Corporation. All rights reserved.
    4. 4. User Interface Evolution Mainframe Desktop Client/Server Websites Rich Internet Application5 Copyright © 2013 Intel Corporation. All rights reserved.
    5. 5. Mobile UI Elements Traditional User Interaction points • Dialer • Camera • Music Player • Mobile Web Sites • Mobile Native Apps6 Copyright © 2013 Intel Corporation. All rights reserved.
    6. 6. Examples of Early Mobile Sites7 Copyright © 2013 Intel Corporation. All rights reserved.
    7. 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 mobilize8 Copyright © 2013 Intel Corporation. All rights reserved.
    8. 8. Traditional Challenges in Mobile UX • Small Screen • On the Go, errors • Unstable Environment • Social context • Non standard OS • No tooltips, context • Data speed9 Copyright © 2013 Intel Corporation. All rights reserved.
    9. 9. Mobile UI - A New Paradigm • Connected devices • Touch interfaces • Acceleration sensing • Orientation awareness • Natural animation • Simulations of physical behavior10 Copyright © 2013 Intel Corporation. All rights reserved.
    10. 10. Evolution – From Keypads to Touch Tablets11 Copyright © 2013 Intel Corporation. All rights reserved.
    11. 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. 12. Touch Size 7mm 7mm 7mm 2mm padding 7x7 mm: Recommended minimum size 9x9 mm: When accuracy matters 5x5 mm: When it just wont fit13 Copyright © 2013 Intel Corporation. All rights reserved.
    13. 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 pictures14 Copyright © 2013 Intel Corporation. All rights reserved.
    14. 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 areas15 Copyright © 2013 Intel Corporation. All rights reserved.
    15. 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 specific16 Copyright © 2013 Intel Corporation. All rights reserved.
    16. 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. 17. New Challenges - Multi screens Smart Phone Tablet Laptop TV Activities span over multiple devices.18 Copyright © 2013 Intel Corporation. All rights reserved.
    18. 18. Solution: Responsive Web Design19 Copyright © 2013 Intel Corporation. All rights reserved.
    19. 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. 20. Responsive Web Design Logo Logo Logo Logo 480px 800px 1024px 1920px Smartphone Tablets Netbooks Laptops Wireframe for different sizes21 Copyright © 2013 Intel Corporation. All rights reserved.
    21. 21. Examples Example 1 Example 2 Example 3 Framework
    22. 22. Touch Design principles Single Column New Mobile OS controls Gestures actions Navigation Sections > Content Controls23 Copyright © 2013 Intel Corporation. All rights reserved.
    23. 23. Mobile Sensors24 Copyright © 2013 Intel Corporation. All rights reserved.
    24. 24. Mobile Sensors Accelerometer GPS Gyroscope WiFi Magnetometer Bluetooth Barometer GSM/CDMA Proximity NFC Light Sensor Camera Touch Screen25 Copyright © 2013 Intel Corporation. All rights reserved.
    25. 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. 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 earths 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. 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 palm28 Copyright © 2013 Intel Corporation. All rights reserved.
    28. 28. Examples Coffee29 Copyright © 2013 Intel Corporation. All rights reserved.
    29. 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 size30 Copyright © 2013 Intel Corporation. All rights reserved.
    30. 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. 31. Questions?32 Copyright © 2013 Intel Corporation. All rights reserved.
    32. 32. Thank You33 INTEL CONFIDENTIAL

    ×