tap. swipe. pinch: designing for touch-friendly devices
DESCRIPTION
More than 70% of the world’s population is now connected to a mobile network, and more and more mobile devices are inviting users to let their fingers do the navigating. How well does your website accommodate the users of touch-friendly devices? In 2011 alone, traffic to law firm websites from mobile devices increased by 152%. Your audience increasingly relies on mobile devices to get information, communicate and even conduct transactions. During this webinar, our interactive marketing experts – Kalev Peekna and Nate Denton – discussed how you can make your site more accessible to your mobile clients. They explored the latest trends and techniques in responsive and touch-friendly design and shared ways your firm can move beyond the desktop today. To watch the webinar, visit http://www.hubbardone.com/touch-friendlydesign.TRANSCRIPT
Tap. Swipe. Pinch. Designing for touch-friendly devices 26 April 2012
Welcome
Nathan Denton Creative Director
Kalev Peekna Director of Interactive Marketing Strategy
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
Rise of Touch Interfaces
• Smartphones
• Tablets
• New Operating Systems
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
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
Handheld vs. Tablet Strategy
vs.
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
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
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.
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
1_Custom Layout
Typography
• More fonts available
• Limited space – Less is more
– Size matters
• Retina display
1_Custom Layout
Bigger is Better
• Large Buttons
• Ample Spacing
• Not all fingers are created equal
Universal Footer Sitemaps
• What do you do at the end of a page?
• Doesn’t interrupt content
• Feature sandbox for multiple tools and navigation
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
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.
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.
Contrast Ratios
• Different lighting situations
• Avoid certain color combinations
A A A A
Gestures
• The Big 3:
• Gestures have a natural feel for most users and are easy to remember
- Tap
- Swipe
- Pinch
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
1 2 3
Responsive Design: Food Sense
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
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
Q&A