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