Tap. Swipe. Pinch: Designing for Touch-Friendly Devices
-
Upload
hubbard-one -
Category
Technology
-
view
112 -
download
0
description
Transcript of Tap. Swipe. Pinch: Designing for Touch-Friendly Devices
![Page 1: Tap. Swipe. Pinch: Designing for Touch-Friendly Devices](https://reader035.fdocuments.us/reader035/viewer/2022081414/54c7c7fd4a7959e1188b45b6/html5/thumbnails/1.jpg)
Tap. Swipe. Pinch. Designing for touch-friendly devices 26 April 2012
![Page 2: Tap. Swipe. Pinch: Designing for Touch-Friendly Devices](https://reader035.fdocuments.us/reader035/viewer/2022081414/54c7c7fd4a7959e1188b45b6/html5/thumbnails/2.jpg)
Welcome
Nathan Denton Creative Director
Kalev Peekna Director of Interactive Marketing Strategy
![Page 3: Tap. Swipe. Pinch: Designing for Touch-Friendly Devices](https://reader035.fdocuments.us/reader035/viewer/2022081414/54c7c7fd4a7959e1188b45b6/html5/thumbnails/3.jpg)
Agenda
• Rise of Touch Interfaces
• Techniques for touch-friendly design
• Q&A
Content Strategy
Touch Interactivity
Bigger is Better
Typography
Contrast Ratios
Navigation Techniques
Interactive Technologies
Paginations and Listings
From Form to Filter
Handling Gestures
Responsive Design
![Page 4: Tap. Swipe. Pinch: Designing for Touch-Friendly Devices](https://reader035.fdocuments.us/reader035/viewer/2022081414/54c7c7fd4a7959e1188b45b6/html5/thumbnails/4.jpg)
Rise of Touch Interfaces
• Smartphones
• Tablets
• New Operating Systems
![Page 5: Tap. Swipe. Pinch: Designing for Touch-Friendly Devices](https://reader035.fdocuments.us/reader035/viewer/2022081414/54c7c7fd4a7959e1188b45b6/html5/thumbnails/5.jpg)
Browsing Behavior is Changing
From January 2011 to January 2012, general mobile web traffic grew almost 100%
4.3% January 2011
8.5% January 2012
Law firm traffic is not behind…
6.5% Average - Q1 2012
5.6% - 9% Range – Q1 2012
![Page 6: Tap. Swipe. Pinch: Designing for Touch-Friendly Devices](https://reader035.fdocuments.us/reader035/viewer/2022081414/54c7c7fd4a7959e1188b45b6/html5/thumbnails/6.jpg)
Strong preference for Touch
40.14%
30.33%
18.31%
6.71%
2.34% 2.17%
iPhone iPad Android BlackBerry iPod Unknown Mobile
Mobile Traffic Q1 2012, Sites hosted by Hubbard One
![Page 7: Tap. Swipe. Pinch: Designing for Touch-Friendly Devices](https://reader035.fdocuments.us/reader035/viewer/2022081414/54c7c7fd4a7959e1188b45b6/html5/thumbnails/7.jpg)
Handheld vs. Tablet Strategy
vs.
![Page 8: Tap. Swipe. Pinch: Designing for Touch-Friendly Devices](https://reader035.fdocuments.us/reader035/viewer/2022081414/54c7c7fd4a7959e1188b45b6/html5/thumbnails/8.jpg)
Handheld vs. Tablet Strategy
Handheld Users
• Focused needs
• Smaller screen
• Dedicated site
Tablet Users
• General browsing
• Full screen
• Expect full site
• Need it to work well
![Page 9: Tap. Swipe. Pinch: Designing for Touch-Friendly Devices](https://reader035.fdocuments.us/reader035/viewer/2022081414/54c7c7fd4a7959e1188b45b6/html5/thumbnails/9.jpg)
Tablet behavior is targeted
0
50
100
150
200
250
300
Visit Duration 0
50000
100000
150000
200000
250000
300000
350000
400000
450000
Views 0
10 20 30 40 50 60 70 80 90
100
Bounce Rate (%)
Desktop iPad
![Page 10: Tap. Swipe. Pinch: Designing for Touch-Friendly Devices](https://reader035.fdocuments.us/reader035/viewer/2022081414/54c7c7fd4a7959e1188b45b6/html5/thumbnails/10.jpg)
![Page 11: Tap. Swipe. Pinch: Designing for Touch-Friendly Devices](https://reader035.fdocuments.us/reader035/viewer/2022081414/54c7c7fd4a7959e1188b45b6/html5/thumbnails/11.jpg)
![Page 12: Tap. Swipe. Pinch: Designing for Touch-Friendly Devices](https://reader035.fdocuments.us/reader035/viewer/2022081414/54c7c7fd4a7959e1188b45b6/html5/thumbnails/12.jpg)
1_Custom Layout
Content Strategy for Touch
• Keep important things at the top
• Create a focus
• Break it up
• Make it scannable
• Allow exploration
What’s good for touch users is good for everyone else.
![Page 13: Tap. Swipe. Pinch: Designing for Touch-Friendly Devices](https://reader035.fdocuments.us/reader035/viewer/2022081414/54c7c7fd4a7959e1188b45b6/html5/thumbnails/13.jpg)
![Page 14: Tap. Swipe. Pinch: Designing for Touch-Friendly Devices](https://reader035.fdocuments.us/reader035/viewer/2022081414/54c7c7fd4a7959e1188b45b6/html5/thumbnails/14.jpg)
1_Custom Layout
Touch Interactivity
Remember, a touch device has no mouse. This means:
• No “hover” or “rollover”
• Rely on the click or drag to initiate actions
• Use transitions
• Reduce overlapping windows or areas
![Page 15: Tap. Swipe. Pinch: Designing for Touch-Friendly Devices](https://reader035.fdocuments.us/reader035/viewer/2022081414/54c7c7fd4a7959e1188b45b6/html5/thumbnails/15.jpg)
![Page 16: Tap. Swipe. Pinch: Designing for Touch-Friendly Devices](https://reader035.fdocuments.us/reader035/viewer/2022081414/54c7c7fd4a7959e1188b45b6/html5/thumbnails/16.jpg)
1_Custom Layout
Typography
• More fonts available
• Limited space – Less is more
– Size matters
• Retina display
![Page 17: Tap. Swipe. Pinch: Designing for Touch-Friendly Devices](https://reader035.fdocuments.us/reader035/viewer/2022081414/54c7c7fd4a7959e1188b45b6/html5/thumbnails/17.jpg)
![Page 18: Tap. Swipe. Pinch: Designing for Touch-Friendly Devices](https://reader035.fdocuments.us/reader035/viewer/2022081414/54c7c7fd4a7959e1188b45b6/html5/thumbnails/18.jpg)
1_Custom Layout
Bigger is Better
• Large Buttons
• Ample Spacing
• Not all fingers are created equal
![Page 19: Tap. Swipe. Pinch: Designing for Touch-Friendly Devices](https://reader035.fdocuments.us/reader035/viewer/2022081414/54c7c7fd4a7959e1188b45b6/html5/thumbnails/19.jpg)
![Page 20: Tap. Swipe. Pinch: Designing for Touch-Friendly Devices](https://reader035.fdocuments.us/reader035/viewer/2022081414/54c7c7fd4a7959e1188b45b6/html5/thumbnails/20.jpg)
Universal Footer Sitemaps
• What do you do at the end of a page?
• Doesn’t interrupt content
• Feature sandbox for multiple tools and navigation
![Page 21: Tap. Swipe. Pinch: Designing for Touch-Friendly Devices](https://reader035.fdocuments.us/reader035/viewer/2022081414/54c7c7fd4a7959e1188b45b6/html5/thumbnails/21.jpg)
![Page 22: Tap. Swipe. Pinch: Designing for Touch-Friendly Devices](https://reader035.fdocuments.us/reader035/viewer/2022081414/54c7c7fd4a7959e1188b45b6/html5/thumbnails/22.jpg)
![Page 23: Tap. Swipe. Pinch: Designing for Touch-Friendly Devices](https://reader035.fdocuments.us/reader035/viewer/2022081414/54c7c7fd4a7959e1188b45b6/html5/thumbnails/23.jpg)
Persistent Navigation
• Navigation that remains anchored to the top and/or side of your device
• Increases usability and can make a more efficient user experience
• 30 seconds/day
• 210 seconds/week
• 14 minutes/month
• ≈ 3 hours/year
} x 1.5
![Page 24: Tap. Swipe. Pinch: Designing for Touch-Friendly Devices](https://reader035.fdocuments.us/reader035/viewer/2022081414/54c7c7fd4a7959e1188b45b6/html5/thumbnails/24.jpg)
![Page 25: Tap. Swipe. Pinch: Designing for Touch-Friendly Devices](https://reader035.fdocuments.us/reader035/viewer/2022081414/54c7c7fd4a7959e1188b45b6/html5/thumbnails/25.jpg)
Paginations and Listings
Traditional pagination controls (previous, next, 1 2 3 4) are outdated and hard to use on a touch interface:
• The fold is dead.
• Scrolling is fun. Really.
• Data columns look and feel like work.
• Use simplified controls for sorting and seeing more content.
![Page 26: Tap. Swipe. Pinch: Designing for Touch-Friendly Devices](https://reader035.fdocuments.us/reader035/viewer/2022081414/54c7c7fd4a7959e1188b45b6/html5/thumbnails/26.jpg)
![Page 27: Tap. Swipe. Pinch: Designing for Touch-Friendly Devices](https://reader035.fdocuments.us/reader035/viewer/2022081414/54c7c7fd4a7959e1188b45b6/html5/thumbnails/27.jpg)
From Form to Filter
Getting all your content onto the web used to be a main goal of interactive marketing. Now the problem is getting users to the right content:
• Avoid traditional search forms.
• Use progressive filters.
• Update results naturally. Use transitions.
• Leverage search.
![Page 28: Tap. Swipe. Pinch: Designing for Touch-Friendly Devices](https://reader035.fdocuments.us/reader035/viewer/2022081414/54c7c7fd4a7959e1188b45b6/html5/thumbnails/28.jpg)
![Page 29: Tap. Swipe. Pinch: Designing for Touch-Friendly Devices](https://reader035.fdocuments.us/reader035/viewer/2022081414/54c7c7fd4a7959e1188b45b6/html5/thumbnails/29.jpg)
Contrast Ratios
• Different lighting situations
• Avoid certain color combinations
A A A A
![Page 30: Tap. Swipe. Pinch: Designing for Touch-Friendly Devices](https://reader035.fdocuments.us/reader035/viewer/2022081414/54c7c7fd4a7959e1188b45b6/html5/thumbnails/30.jpg)
Gestures
• The Big 3:
• Gestures have a natural feel for most users and are easy to remember
- Tap
- Swipe
- Pinch
![Page 31: Tap. Swipe. Pinch: Designing for Touch-Friendly Devices](https://reader035.fdocuments.us/reader035/viewer/2022081414/54c7c7fd4a7959e1188b45b6/html5/thumbnails/31.jpg)
Responsive Design
• Lets your site respond to a wide range of screen sizes – Handheld – Tablets/Small Screens
– Desktop/Big Screen
• Lets your site respond to a wide range of resolutions
• Not everyone maximizes their browsers
• Utilizes latest coding techniques
![Page 32: Tap. Swipe. Pinch: Designing for Touch-Friendly Devices](https://reader035.fdocuments.us/reader035/viewer/2022081414/54c7c7fd4a7959e1188b45b6/html5/thumbnails/32.jpg)
1 2 3
Responsive Design: Food Sense
![Page 33: Tap. Swipe. Pinch: Designing for Touch-Friendly Devices](https://reader035.fdocuments.us/reader035/viewer/2022081414/54c7c7fd4a7959e1188b45b6/html5/thumbnails/33.jpg)
Tech Notes
In many ways, re-tuning the technical approach for touch interfaces makes things easier:
• Use newer standards: HTML5 / CSS
• Eliminate Flash
• Platform-independent tools like AJAX and JavaScript
• Common media formats like MP4 and MP3
![Page 34: Tap. Swipe. Pinch: Designing for Touch-Friendly Devices](https://reader035.fdocuments.us/reader035/viewer/2022081414/54c7c7fd4a7959e1188b45b6/html5/thumbnails/34.jpg)
![Page 35: Tap. Swipe. Pinch: Designing for Touch-Friendly Devices](https://reader035.fdocuments.us/reader035/viewer/2022081414/54c7c7fd4a7959e1188b45b6/html5/thumbnails/35.jpg)
Touch Design Cliff Notes
• Content Strategy
• Touch Cognizant
• Bigger is Better
• Typography Matters
• Persistent Navigation & Footer Sitemaps = Efficient UX
• Pagination Can Be Cumbersome
• Filters are Fun
• Contrast Ratios Improve UX
• Gestures: Remember the Big 3
• Responsive Design Accounts for the Masses
• Keep Your Developer Happy
![Page 36: Tap. Swipe. Pinch: Designing for Touch-Friendly Devices](https://reader035.fdocuments.us/reader035/viewer/2022081414/54c7c7fd4a7959e1188b45b6/html5/thumbnails/36.jpg)
Q&A