User Experience Design for Tablets
-
Upload
rajarajan-radhakrishnan -
Category
Technology
-
view
676 -
download
5
description
Transcript of User Experience Design for Tablets
![Page 1: User Experience Design for Tablets](https://reader033.fdocuments.net/reader033/viewer/2022042715/558c722ad8b42a65098b463a/html5/thumbnails/1.jpg)
UX DESIGN FOR TABLETS Rajarajan Radhakrishnan
![Page 2: User Experience Design for Tablets](https://reader033.fdocuments.net/reader033/viewer/2022042715/558c722ad8b42a65098b463a/html5/thumbnails/2.jpg)
Why Tablets?
More than 1/3rd of Americans own a tablet - Source: Pew Research
![Page 3: User Experience Design for Tablets](https://reader033.fdocuments.net/reader033/viewer/2022042715/558c722ad8b42a65098b463a/html5/thumbnails/3.jpg)
Why Tablets?
Between 32% and 43% of tablet owners are using their desktop less than tablets. - Source: Nielson Report
![Page 4: User Experience Design for Tablets](https://reader033.fdocuments.net/reader033/viewer/2022042715/558c722ad8b42a65098b463a/html5/thumbnails/4.jpg)
Why Tablets?
U.S. Consumers spend 2.5 hrs/per day on an average on smartphones and tablets. • 80% on apps. • 20% mobile web.
- Source: Flurry
![Page 5: User Experience Design for Tablets](https://reader033.fdocuments.net/reader033/viewer/2022042715/558c722ad8b42a65098b463a/html5/thumbnails/5.jpg)
Best Practices 1. Design with Context in Mind 2. Fill a need 3. Design for core tasks and keep it air tight 4. Make Search easy and obvious 5. Focus on the browse experience 6. Gestures – meaningful and engaging 7. Immersive call to action 8. Reduce typing 9. Design usable forms 10. Make clear what is touchable 11. Intuitive navigation
![Page 6: User Experience Design for Tablets](https://reader033.fdocuments.net/reader033/viewer/2022042715/558c722ad8b42a65098b463a/html5/thumbnails/6.jpg)
1. Design with context in mind Users use tablets when they do a task requiring optimum portability and screen size.
Vs
![Page 7: User Experience Design for Tablets](https://reader033.fdocuments.net/reader033/viewer/2022042715/558c722ad8b42a65098b463a/html5/thumbnails/7.jpg)
• Reading
• Hobbies
• Sketching
• Browsing
• Shopping
• Note taking
• Games
• Learning
• Productivity
• Note taking
• Analysis
• Programming
• Image Editing
• Designing
Vs
![Page 8: User Experience Design for Tablets](https://reader033.fdocuments.net/reader033/viewer/2022042715/558c722ad8b42a65098b463a/html5/thumbnails/8.jpg)
Notes App is a classic example of simplified functionality. - No edit mode - Auto saves - Relevant functions pops on demand
![Page 9: User Experience Design for Tablets](https://reader033.fdocuments.net/reader033/viewer/2022042715/558c722ad8b42a65098b463a/html5/thumbnails/9.jpg)
2. Fill a need
“I love to paint. I don’t have enough time to paint. The Paper app simplifies that hobby and allows me to strengthen that interest in my own convenience” - Ux Professional
Paper
![Page 10: User Experience Design for Tablets](https://reader033.fdocuments.net/reader033/viewer/2022042715/558c722ad8b42a65098b463a/html5/thumbnails/10.jpg)
Garageband
Learn music
Digital audio workstation
Create podcasts
![Page 11: User Experience Design for Tablets](https://reader033.fdocuments.net/reader033/viewer/2022042715/558c722ad8b42a65098b463a/html5/thumbnails/11.jpg)
3. Design for Core Tasks 1. Provide cues for how and where to initiate key tasks
2. Orient users by highlighting call-to-action on the home screen.
e-bay
![Page 12: User Experience Design for Tablets](https://reader033.fdocuments.net/reader033/viewer/2022042715/558c722ad8b42a65098b463a/html5/thumbnails/12.jpg)
4. Make Search easy and obvious 1. Search should be placed in a easy to
discover location (top right) and should have cue words(search) or the search icon.
2. When tapped the field should immediately bring up the relevant keyboard (shown here in app store).
![Page 13: User Experience Design for Tablets](https://reader033.fdocuments.net/reader033/viewer/2022042715/558c722ad8b42a65098b463a/html5/thumbnails/13.jpg)
5. Focus on the ‘browse’ experience The large screens and the light weight of tablets make them suitable for browsing. The multi touch interfaces with interesting gestures like swiping, pinching etc., makes the interactions quite immersive
500px
Gilt
![Page 14: User Experience Design for Tablets](https://reader033.fdocuments.net/reader033/viewer/2022042715/558c722ad8b42a65098b463a/html5/thumbnails/14.jpg)
To enhance browseability: • Use high quality images
• Allow users to enlarge images by tapping or stretching
• Hide nav elements and show them on demand
![Page 15: User Experience Design for Tablets](https://reader033.fdocuments.net/reader033/viewer/2022042715/558c722ad8b42a65098b463a/html5/thumbnails/15.jpg)
• Swipe – Usually for scroll and Next/Previous. Few new actions are: reveal panels, confirmation dialogs(swipe to unlock, close, cancel)
Youtube uses a swipe left gesture to close.
6. Gestures – meaningful & engaging
![Page 16: User Experience Design for Tablets](https://reader033.fdocuments.net/reader033/viewer/2022042715/558c722ad8b42a65098b463a/html5/thumbnails/16.jpg)
Real world gestures should be meaningfully used. If it mirrors real world usage Users will like it and adopt it instantly.
Page turning gesture in Paper The old iOS contacts app did not work like a real world Address book
![Page 17: User Experience Design for Tablets](https://reader033.fdocuments.net/reader033/viewer/2022042715/558c722ad8b42a65098b463a/html5/thumbnails/17.jpg)
• Long Tap – Right click of tablets. Fires a contextual menu.
long tap brings up the contextual actions.
Kindle: long tap allows users to highlight and add a note.
![Page 18: User Experience Design for Tablets](https://reader033.fdocuments.net/reader033/viewer/2022042715/558c722ad8b42a65098b463a/html5/thumbnails/18.jpg)
Please note: • No clear standards for gestures. • Except for simple gestures multi
touch gestures are hard to learn and inconsistent.
![Page 19: User Experience Design for Tablets](https://reader033.fdocuments.net/reader033/viewer/2022042715/558c722ad8b42a65098b463a/html5/thumbnails/19.jpg)
7. Immersive Call to Action • Call to Action should be clear, recognizable and inviting
Houzz has very inviting call to actions – dancing icons on the images
![Page 20: User Experience Design for Tablets](https://reader033.fdocuments.net/reader033/viewer/2022042715/558c722ad8b42a65098b463a/html5/thumbnails/20.jpg)
![Page 21: User Experience Design for Tablets](https://reader033.fdocuments.net/reader033/viewer/2022042715/558c722ad8b42a65098b463a/html5/thumbnails/21.jpg)
8. Reduce Typing • Where possible use multiple choice or auto-fill and auto-suggest for
information.
Zite automatically collects user information and creates a magazine
Google Maps – on tapping into the search field it brings up my home, and recent searches along with common icons.
![Page 22: User Experience Design for Tablets](https://reader033.fdocuments.net/reader033/viewer/2022042715/558c722ad8b42a65098b463a/html5/thumbnails/22.jpg)
9. Design usable fields & buttons • Make entering data as easy as you can by showing the relevant key
board
![Page 23: User Experience Design for Tablets](https://reader033.fdocuments.net/reader033/viewer/2022042715/558c722ad8b42a65098b463a/html5/thumbnails/23.jpg)
Large primary buttons focused on continuing the flow are well presented here
Zappos Dropbox
![Page 24: User Experience Design for Tablets](https://reader033.fdocuments.net/reader033/viewer/2022042715/558c722ad8b42a65098b463a/html5/thumbnails/24.jpg)
10. Make clear what is touchable
Clickable areas are not clear
Double touching the home button brings this feature up. It is hidden.
![Page 25: User Experience Design for Tablets](https://reader033.fdocuments.net/reader033/viewer/2022042715/558c722ad8b42a65098b463a/html5/thumbnails/25.jpg)
Thumb Zone
Thumb Zone – Arc of your thumb span on the screen. Favor this zone for navigation controls
11. Intuitive navigation
![Page 26: User Experience Design for Tablets](https://reader033.fdocuments.net/reader033/viewer/2022042715/558c722ad8b42a65098b463a/html5/thumbnails/26.jpg)
Content on top, controls on bottom a basic staple of industrial design.
![Page 27: User Experience Design for Tablets](https://reader033.fdocuments.net/reader033/viewer/2022042715/558c722ad8b42a65098b463a/html5/thumbnails/27.jpg)
Instapaper and Twitter provide good placement of controls in the Thumb Zone.
![Page 28: User Experience Design for Tablets](https://reader033.fdocuments.net/reader033/viewer/2022042715/558c722ad8b42a65098b463a/html5/thumbnails/28.jpg)
Usability Testing for Tablets
![Page 29: User Experience Design for Tablets](https://reader033.fdocuments.net/reader033/viewer/2022042715/558c722ad8b42a65098b463a/html5/thumbnails/29.jpg)
Reference • Tablet Stats
http://www.cmo.com/articles/2013/8/13/_15_must_know_stats_.html
• Smashing Mag article on best practices for Tablet UX http://uxdesign.smashingmagazine.com/2012/01/31/ten-things-think-about-designing-ipad-app/
• Touch Gestures cheat sheet http://www.lukew.com/ff/entry.asp?1071
• Reflector for usability testing http://www.90percentofeverything.com/2013/01/14/combining-reflector-and-silverback-for-ios-usability-testing/
• The Mobile Book by Smashing Magazine