Design for Comfortable Use

Hybrids are digital devices that accept multiple channels of input methods, for example touch, mouse, stylus, etc. People buy keyboard trays, styluses, wireless mouse to customize their workflows on touch devices. How to design a product that supports multiple inputs for comfortable use?

This presentation is created to share the tips that I gained from designing for Windows 8 with Firefox Android team.

Transcript

1. Design for comfortable use Firefox on hybrid and convertible devices Firefox UX July 2013
2. Background Design practice Suggestions
3. Designing for comfortable use Page 3 TV Desktop Tablet Smart Phone Context of use Input Screen-size 10 foot lean-back on the coach Long period of use at desk Casual bed or coach use Quick bursts of activity in various locations Remote control/ motion gestures Mouse/keyboard Touch Touch Wall-size Desk-size (11-20 inches) Lap-size (7-10 inches) Palm-size (3-5 inches) Traditional definition of device experiences Device experience by LukeW: https://developers.facebook.com/blog/post/2012/01/24/device-experiences---responsive-design/
4. Designing for comfortable use Page 4 TV as computer monitor Touchscreen laptop, tablet deck Over palm size touchscreen with stylus What was once targeted to specific activities, is a highly customizable always on, always connected canvas. TV Desktop Tablet Smart Phone
5. Designing for comfortable use Page 5 74% A Q1 2012 study by Viacom of US tablet owners: http://www.emarketer.com/Article/Home-Where-Tablet/1009027 Google tablet study in 2011: http://www.google.com/think/research-studies/understanding-tablet-device-users.html tablet users are most likely to use their tablet at home of them use it in the living room of them use it in the bedroom of them are likely to use tablets in their home office 96% 94% 75% Tablets are used mostly on weekdays and in the night 77% reported that their desktop/laptop usage decreased after getting a tablet
6. Designing for comfortable use Page 6 2010 2011 2012 2013 14 inch 13 inch 12 inch 11 inch 10 inch 9 inch 8 inch 7 inch 6 inch Windows 8 Android Android and Windows 8 tablet screen-sizes are merging Data source: Android devices: http://en.wikipedia.org/wiki/Comparison_of_Android_devices Data source: Windows 8 devices: http://en.wikipedia.org/wiki/List_of_Windows_8_and_RT_tablet_devices
7. Designing for comfortable use Page 7 TV Desktop Tablet Smart Phone Windows 8 Desktop machines Android Phone: Nexus 4 Windows Phone 8 Windows 8 7-inch tablets Android 7-inch tablets: Nexus 7 Android 10-inch tablets: Nexus 10 Windows 8 on Xbox Android based TV console Windows 8 hybrid and convertible devices Android hybrid devices? Chrome OS
8. Designing for comfortable use Page 8 Windows 8 hybrid and convertible devices http://reviews.cnet.com/8301-33642_7-57531562-292/hybrids-vs-convertibles-cnets-field-guide-to-windows-8-hardware/ http://reviews.cnet.com/8301-33642_7-57531562-292/hybrids-vs-convertibles-cnets-field-guide-to-windows-8-hardware/ HP Envy X2 Surface Pro Lenovo IdeaPad Yoga The hybrid The hybrid lite The convertible
9. Designing for comfortable use Page 9 Windows 8 hybrid and convertible devices http://reviews.cnet.com/8301-33642_7-57531562-292/hybrids-vs-convertibles-cnets-field-guide-to-windows-8-hardware/ Sony Vaio Duo 11 Sony Vaio T13 Touch The slider The touch-screen laptop
10. Designing for comfortable use Page 10 http://reviews.cnet.com/8301-33642_7-57531562-292/hybrids-vs-convertibles-cnets-field-guide-to-windows-8-hardware/ Windows 8 hybrid and convertible devices Acer Aspire 7600 (27-inch) Sony Vaio Tap 20 All-in-one high-end Very large tablet (all-in-one)
11. Designing for comfortable use Page 11 Android hybrid and convertible devices ASUS Transformer Series (10.1-inch) The hybrid ASUS Slider Pad (10.1-inch) The slider ASUS transformer: http://www.asus.com/Tablets_Mobile/ASUS_Transformer_Pad_Infinity_TF700T/ ASUS slider pad: http://www.asus.com/Tablets_Mobile/Eee_Pad_Slider_SL101/
12. Designing for comfortable use Page 12 Android + Windows 8 hybrid! The convertible + the slider Samsung ATIV Q (13-inch) Multi functional design adapts on the go: http://www.ztechx.com/wp-content/uploads/2013/07/Ativ-Q.jpg
13. Background Design practice Suggestions ON-SCREEN SOFT KEYBOARD HARDWARE KEYBOARD MOUSE
14. ON-SCREEN SOFT KEYBOARD 1. Adaptive layout 2. Design for limited space first 3. Customize keyboard keys 4. Easy to reach main input fields
15. Designing for comfortable use Page 15 1 Adaptive layout On-screen keyboard should not block users from getting their tasks done. In the message app on Windows 8, input fields move up and sit on top of the on-screen keyboard.
16. Designing for comfortable use Page 16 Adaptive layout 1 Provide additional value for additional space In the Bing search app, there are more search results when on- screen keyboard is not in use
17. Designing for comfortable use Page 17 2 Design for limited space first Firefox Metro: Explorations on auto-complete snap view Exploration #1: Managed to fit all the content. But the tiles are not identifiable since no space is left to display to full title Exploration #2: Enough space to display the full title. The trade-off is to add a vertical scroll bar for auto- complete snap view
18. Designing for comfortable use Page 18 3 Customize keyboard keys Google Chrome iPad app shows a customized keyboard to make typing and editing URL easier
19. Designing for comfortable use Page 19 4 Easy to reach main input fields An eye-tracking testing on Windows 8 tablet Input fields receive the most amount of focus when participant types on soft keyboard. The bigger the screen is, the further distance eyes have to travel. http://blogs.msdn.com/cfs-filesystemfile.ashx/__key/communityserver-blogs-components-weblogfiles/00-00-01-29-43-metablogapi/5722.Eye_2D00_track- ing_2D00_study_5F00_3F7CFB7A.png
20. 1. Functional without touch or mouse 2. Support common keyboard commands HARDWARE KEYBOARD
21. Designing for comfortable use Page 21 1 Functional without touch or mouse Each UI element that can be clicked can also be invoked with the keyboard. Navigate among interactive UI elements (links, drop downs) by using the Tab key. http://www.dsquaredmedia.net/wp-content/uploads/2013/03/website-accessibility.png
22. Designing for comfortable use Page 22 2 Support common keyboard commands https://etherpad.mozilla.org/metro-shortcuts http://cloud.addictivetips.com/wp-content/uploads/2012/11/Firefox-keyboard-shortcuts_ft.jpg
23. 1. Take advantage of hover-over 2. Consider mouse device capabilities 3. Provide affordance for the cursor MOUSE
24. Designing for comfortable use Page 24 1 Take advantage of hover-over Hover to learn more: Display more detailed info or teaching visuals (such as a tool-tip) without a commitment to an action In the Mail app, hovering over main commands reveals the label and also keyboard short-cut
25. Designing for comfortable use Page 25 2 Consider mouse device capabilities Microsoft Touch Mouse supports swiping gestures by thumb, two fingers, and three fingers. It’s worthy checking how the app reacts to those swiping gestures.
26. Designing for comfortable use Page 26 3 Provide affordance for the cursor A screen-shot of my Firefox Metro Start Page Right now the tiles don’t have affordances when the cursor is on top of tiles. They don’t feel live and inviting yet.
27. Designing for comfortable use Page 27 How is Firefox for Metro doing on these practices? Easy to reach main input fields Design for limited space first Set up an adaptive layout Customize keyboard keys Support common keyboard commands Functional without touch or mouse Consider mouse device capabilities Take advantage of hover-over Provide affordance for the cursor Done In progress To explore
28. Background Design practice Suggestions
29. Designing for comfortable use Page 29 Main themes Set up an adaptive layout Design for limited space first Support common keyboard commands Functional without touch or mouse Customized keyboard keys Consider mouse capabilities [New]Track-pad gestures Take advantage of hover-over Provide affordance for the cursor UI Optimizations Affordance Efficiency Ergonomics Easy to reach main input fields
30. Designing for comfortable use Page 30 Favorites and priorities Set up an adaptive layout Design for limited space first Support common keyboard commands Functional without touch or mouse Customized keyboard keys Consider mouse capabilities [New]Trackpad gestures Take advantage of hover-over Provide affordance for the cursor UI Optimizations Affordance Efficiency Ergonomics Easy to reach main input fields
31. Designing for comfortable use Page 31 Planning next steps Unknown solution Unknown problem To execute To apply To invent To explore Known problem known solution Functional without touch or mouse Support common keyboard command Provide affordance for the cursor Trackpad gestures Take advantage of hover-over Easy to reach main input fields Set up an adaptive layout Consider mouse capabilities Design for limited space first Customized keyboard keys
32. Designing for comfortable use Page 32 Quick wins Provide affordance for the cursor Trackpad gestures auto crosshair default e-resize help move n-resize ne-resize nw-resize pointer progress s-resize se-resize sw-resize text w-resize wait Back Forward Scroll to top Scroll to bottom Pinch to zoom Double tap to zoom Functional without touch or mouse Tab key Input focus Right, left arrow key Home, End, Up, and Down key Default actions for Enter key Spacebar Access keys Customized keyboard keys .com www. form assistance: “Next” key CSS cusor property: http://www.w3schools.com/cssref/pr_class_cursor.asp
33. Designing for comfortable use Page 33 Questions? Yuan Wang yuan@mozilla.com Ian Barlow ibarlow@mozilla.com