Tap. Swipe. Pinch.Designing for touch-friendly devices26 April 2012
Welcome          Nathan Denton          Creative Director          Kalev Peekna          Director of Interactive          ...
Agenda•  Rise of Touch Interfaces•  Techniques for touch-friendly design    Content Strategy          Interactive Technolo...
Rise of Touch Interfaces•  Smartphones•  Tablets•  New Operating Systems
Browsing Behavior is ChangingFrom January 2011 to January 2012, general mobileweb traffic grew almost 100%        4.3%     ...
Strong preference for TouchMobile Traffic Q1 2012, Sites hosted by Hubbard One                        2.34%         2.17%  ...
Handheld vs. Tablet Strategy            vs.
Handheld vs. Tablet StrategyHandheld Users      Tablet Users•  Focused needs    •  General browsing•  Smaller screen   •  ...
Tablet behavior is targeted450000           300                        100400000                                      90  ...
Content Strategy for Touch•  Keep important things at the top•  Create a focus•  Break it up1_CustomLayout it scannable•  ...
Touch InteractivityRemember, a touch device has no mouse. Thismeans:•  No “hover” or “rollover”1_Custom•  Rely on the clic...
Typography•  Limited space    •  Retina display  –  Less is more  –  Size matters1_Custom•  More fontsLayout available
Bigger is Better•  Large Buttons•  Ample Spacing•  Not all fingers1_Custom   are created equalLayout
Universal Footer Sitemaps•  What do you do   at the end of a page?•  Doesn’t interrupt   content•  Feature sandbox for   m...
Persistent Navigation•  Navigation that remains anchored to the top   and/or side of your device•  Increases usability and...
Paginations and ListingsTraditional pagination controls (previous, next, 1 2 3 4)are outdated and hard to use on a touch i...
From Form to FilterGetting all your content onto the web used to be amain goal of interactive marketing. Now the problemis...
Contrast Ratios•  Avoid certain color   combinations   A	 A	   A	 A	•  Different lighting   situations
Gestures•  The Big 3:  - Tap  - Swipe  - Pinch•  Gestures have a natural   feel for most users and   are easy to remember
Responsive Design•  Lets your site respond to a wide   range of screen sizes  –  Handheld  –  Tablets/Small Screens  –  De...
Responsive Design: Food Sense     1              2           3
Tech NotesIn many ways, re-tuning the technical approach fortouch interfaces makes things easier:•  Use newer standards: H...
Touch Design Cliff Notes•  Content Strategy•  Touch Cognizant•  Bigger is Better•  Typography Matters•  Persistent Navigat...
Q&A
Tap. Swipe. Pinch: Designing for Touch-Friendly Devices
Tap. Swipe. Pinch: Designing for Touch-Friendly Devices
Tap. Swipe. Pinch: Designing for Touch-Friendly Devices
Tap. Swipe. Pinch: Designing for Touch-Friendly Devices
Tap. Swipe. Pinch: Designing for Touch-Friendly Devices
Tap. Swipe. Pinch: Designing for Touch-Friendly Devices
Tap. Swipe. Pinch: Designing for Touch-Friendly Devices
Tap. Swipe. Pinch: Designing for Touch-Friendly Devices
Tap. Swipe. Pinch: Designing for Touch-Friendly Devices
Tap. Swipe. Pinch: Designing for Touch-Friendly Devices
Tap. Swipe. Pinch: Designing for Touch-Friendly Devices
Tap. Swipe. Pinch: Designing for Touch-Friendly Devices
Upcoming SlideShare
Loading in...5
×

Tap. Swipe. Pinch: Designing for Touch-Friendly Devices

1,982

Published on

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.

Published in: Technology, Design
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,982
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
32
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Tap. Swipe. Pinch: Designing for Touch-Friendly Devices

  1. 1. Tap. Swipe. Pinch.Designing for touch-friendly devices26 April 2012
  2. 2. Welcome Nathan Denton Creative Director Kalev Peekna Director of Interactive Marketing Strategy
  3. 3. Agenda•  Rise of Touch Interfaces•  Techniques for touch-friendly design Content Strategy Interactive Technologies Touch Interactivity Paginations and Listings Bigger is Better From Form to Filter Typography Handling Gestures Contrast Ratios Responsive Design Navigation Techniques•  Q&A
  4. 4. Rise of Touch Interfaces•  Smartphones•  Tablets•  New Operating Systems
  5. 5. Browsing Behavior is ChangingFrom January 2011 to January 2012, general mobileweb traffic grew almost 100% 4.3% 8.5% January 2011 January 2012Law firm traffic is not behind… 6.5% 5.6% - 9% Average - Q1 2012 Range – Q1 2012
  6. 6. Strong preference for TouchMobile Traffic Q1 2012, Sites hosted by Hubbard One 2.34% 2.17% 6.71% 18.31% 40.14% iPhone iPad Android BlackBerry 30.33% iPod Unknown Mobile
  7. 7. Handheld vs. Tablet Strategy vs.
  8. 8. Handheld vs. Tablet StrategyHandheld Users Tablet Users•  Focused needs •  General browsing•  Smaller screen •  Full screen•  Dedicated site •  Expect full site •  Need it to work well
  9. 9. Tablet behavior is targeted450000 300 100400000 90 250350000 80 70300000 200 60250000 150 50200000 40150000 100 30100000 20 50 50000 10 0 0 0 Views Visit Duration Bounce Rate (%) Desktop iPad
  10. 10. Content Strategy for Touch•  Keep important things at the top•  Create a focus•  Break it up1_CustomLayout it scannable•  Make•  Allow explorationWhat’s good for touch users is good foreveryone else.
  11. 11. Touch InteractivityRemember, a touch device has no mouse. Thismeans:•  No “hover” or “rollover”1_Custom•  Rely on the click or drag to initiate actionsLayout•  Use transitions•  Reduce overlapping windows or areas
  12. 12. Typography•  Limited space •  Retina display –  Less is more –  Size matters1_Custom•  More fontsLayout available
  13. 13. Bigger is Better•  Large Buttons•  Ample Spacing•  Not all fingers1_Custom are created equalLayout
  14. 14. Universal Footer Sitemaps•  What do you do at the end of a page?•  Doesn’t interrupt content•  Feature sandbox for multiple tools and navigation
  15. 15. 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 x 1.5 •  210 seconds/week •  14 minutes/month •  ≈ 3 hours/year
  16. 16. Paginations and ListingsTraditional 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.
  17. 17. From Form to FilterGetting all your content onto the web used to be amain goal of interactive marketing. Now the problemis getting users to the right content:•  Avoid traditional search forms.•  Use progressive filters.•  Update results naturally. Use transitions.•  Leverage search.
  18. 18. Contrast Ratios•  Avoid certain color combinations A A A A •  Different lighting situations
  19. 19. Gestures•  The Big 3: - Tap - Swipe - Pinch•  Gestures have a natural feel for most users and are easy to remember
  20. 20. 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
  21. 21. Responsive Design: Food Sense 1 2 3
  22. 22. Tech NotesIn many ways, re-tuning the technical approach fortouch 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
  23. 23. 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
  24. 24. Q&A
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×