Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Interactions in Responsive Web - BDConf Orlando 2014

800 views

Published on

We have the technology to add amazing interactions to our websites. With just a little bit of CSS or JavaScript, we can layer enhancements and animations onto our pages which allow our visitors to interact with our content in different ways. These enrichments, if used responsibly, can make our sites fun, memorable, and more enjoyable to use.

Examples of interactions we see range from common drop-down menus for navigation to interesting, in-depth transitions while hovering over links. Often, we rely on our mouse device to trigger actions on our sites. While we don’t want to lose these interactions, we also need to find solutions for our visitors without a mouse.

These days, we have users browsing our websites on desktops with a mouse, desktops that can touch, small screen mobile phones, large screen tablets, and more. Sometimes the endless possibilities for our audience might seem daunting, but we can find ways to make sure we optimize our site experience for the majority of our users without sacrificing our vision.

We’ll take a look at:

How interactions on your website affect your visitors
Ways to create meaningful and useful interactions with CSS animations and transitions
What happens to our actions and enhancements on mobile and touch devices
Options to make sure our interactions work well on all devices while maintaining design integrity

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Interactions in Responsive Web - BDConf Orlando 2014

  1. 1. Interactions in Responsive Web A look at applying responsive interaction patterns with mouse hovers, touch events, and more. @jennlukas
  2. 2. fuckyeahhovers.tumblr.com
  3. 3. Interactions have come a long way 25 years of skip intros and counting
  4. 4. MM_swapImg
  5. 5. Flash Interactions
  6. 6. Flash Intros
  7. 7. Interactions in an RWD world What do we do now?
  8. 8. Don’t Stallone it.
  9. 9. Why add interactions? • Illustrate a change on the page • Let users know something has changed • Make changes less jarring • Allow other changes to happen in the background • Appear current • Use of new technology lets users know you are up-to-date • Add entertainment • Surprise and delight • Value in fun factor
  10. 10. tinyurl.com/rwd-interactions Follow along with the survey
  11. 11. Campus Cat Application for college kids checking in on their distant cats
  12. 12. 90%of Americans have a cell phone http://www.pewinternet.org/2014/02/27/summary-of-findings-3/
  13. 13. 68%of adults connect to the internet with mobile devices like smartphones or tablet computers http://www.pewinternet.org/2014/02/27/summary-of-findings-3/
  14. 14. 50%of cell phone owners download apps http://www.pewinternet.org/2013/09/19/cell-phone-activities-2013/
  15. 15. 110%of everyone, everywhere, loves cats this is terrible math
  16. 16. Campus Cat audience • Primary: college-bound teenagers (age 17-18) • Primary: college freshmen (age 18-19) • Secondary: parents of college bound students and college freshmen • Tertiary: college upperclassmen
  17. 17. 77%of cell owners age 18-29 download apps 84%of cell owners age 18-29 access the internet http://www.pewinternet.org/2013/09/19/cell-phone-activities-2013/
  18. 18. 93%of teens have a computer or access to one. http://www.pewinternet.org/2013/03/13/main-findings-5/
  19. 19. 37%of teens have a smartphone 23%of teens have a tablet http://www.pewinternet.org/2013/08/22/teens-and-mobile-apps-privacy/
  20. 20. 58%of all teens have downloaded apps to their cell phone or tablet computer http://www.pewinternet.org/2013/03/13/main-findings-5/
  21. 21. Detention Dog
  22. 22. Detention Dog Analytics
  23. 23. Audience Optimization
  24. 24. Put a carousel on it.
  25. 25. We can’t forget our mobile users. We can’t forget our desktop users.
  26. 26. Simple transitions on :hover & :focus For visitors with access to these selectors, we will add interactions to a place that visitors can expect change
  27. 27. “I like to think of CSS transitions like butter” - Dan Cederholm http://alistapart.com/article/understanding-css3-transitions
  28. 28. jasonsantamaria.com
  29. 29. Doesn’t fly anymore. If it’s a small screen, it’s touch. If it’s a big screen, it’s a mouse.
  30. 30. “Assume every screen your website serves is a touchscreen” - Josh Clark http://globalmoxie.com/blog/desktop-touch-design.shtml
  31. 31. a { transition: color 0.25s linear; }
  32. 32. Simple transitions • Pros: • no context lost on touch/non-touch devices • smooth change for users with hover or focus • minimal work to implement • Cons: • multiple functionalities to test/design
  33. 33. Surprise and delight hovers Add visual engagement through hover
  34. 34. delval.edu
  35. 35. http://diningataltitude.com/vail-restaurants/
  36. 36. Just because I can do something, should I?
  37. 37. drivesafemode.com
  38. 38. Some properties bring less speed delight than others Try using translate
  39. 39. bit.ly/1gZ5zJK
  40. 40. http://blogs.adobe.com/webplatform/2014/03/18/css-animations-and-transitions-performance/http://www.html5rocks.com/en/tutorials/speed/high-performance-animations/
  41. 41. Quick properties to animate • Transform • position • scale • Opacity • Rotation • Filter
  42. 42. Surprise and delight links • Pros: • Gain fun, user enjoyment with playful interaction • No context lost on touch devices • Cons: • Minimal to potentially average added page weight for functionality
  43. 43. Information reveal hover Show additional information on hover
  44. 44. mammothbooth.com
  45. 45. emporiumpies.com
  46. 46. Information reveal • Pros: • Show information to users quickly without additional clicks or page loads • Can provide a fun interface for visitors to interact with • Cons: • Different experience for touch/mouse users • Touch users on larger sizes might be confused by experience
  47. 47. Destination hover show additional link information on hover
  48. 48. http://www.brandaiddesignco.com/
  49. 49. wifeel.com
  50. 50. Mobile browsers wait ~300ms from the time that you tap the button to fire the click event
  51. 51. http://updates.html5rocks.com/2013/12/300ms-tap-delay-gone-away
  52. 52. http://msdn.microsoft.com/en-us/library/windows/apps/Hh767313.aspx
  53. 53. https://github.com/ftlabs/fastclick
  54. 54. https://github.com/filamentgroup/tappy/
  55. 55. Destination hovers • Pros: • Can maximize imagery by hiding text till interaction • Can offer shortcuts for reaching a destination • Cons: • Users without hover will not know destination, might be forced to take longer route to content • Visitors might miss links all together • Might require additional JavaScript to remove 300ms delay
  56. 56. Navigation menus Moving beyond the Suckerfish dropdowns
  57. 57. fbf8.com
  58. 58. yourmajesty.co
  59. 59. andculture.com
  60. 60. https://fundbox.com/
  61. 61. chownow.com
  62. 62. http://starmatic.com
  63. 63. studiorotate.com
  64. 64. Navigation menus • Hovers: • Have become a common convention for dropdown menus • Touch users will have a sub-par experience by having to take a longer route to content • Clicks: • Visitors might not recognize the need for a click • Makes sure touch and mouse users can access content
  65. 65. Slideshows Everyone’s favorite interaction
  66. 66. artsy.net
  67. 67. jukely.com
  68. 68. hipstamatic.com/oggl
  69. 69. “ Multimedia can engage or enrage teens, depending on its usefulness. The best online experiences for teens are those that teach them something new or keep them focused on a goal.” - Hoa Loranger and Jakob Nielsen http://www.nngroup.com/articles/usability-of-websites-for-teenagers/
  70. 70. timkadlec.com/2013/01/setting-a-performance-budget/clearleft.com/thinks/responsivedesignonabudget/
  71. 71. Be faster than your competitors.
  72. 72. Slideshows • Pros: • Common interface for serving image and text content • Visitors can use arrow, pagination, and swipe conventions • Lazy load techniques can help solve speed problems • Cons: • Can have a speed impact; add to our performance budget • Interactions can be confusing on smaller screens when content doesn’t fit nicely and movement is rendered at unexpected speeds and directions
  73. 73. Intros and other background animations and interactions
  74. 74. pictionapp.com
  75. 75. Overgram Piction
  76. 76. Overgram Piction
  77. 77. getjustlanded.com
  78. 78. Intros/Background Animation • Pros: • Can focus attention on specific elements • Adds visual enjoyment and liveliness to page • Adds slickness to otherwise pretty barren splash pages • Cons: • Can be a large speed impact • Can be confusing on smaller screens to follow elements as they animate in
  79. 79. Hover/Touch Global Switcher A A A strikes back
  80. 80. http://www.stucox.com/blog/you-cant-detect-a-touchscreen/
  81. 81. http://codepen.io/Jenn/full/cwuJf/
  82. 82. Hover/touch switcher • Pros: • Makes sure that there is a way that visitors on any device can get the best experience for them • Allows aesthetic customization for different use cases • Can combine with screen size to optimize for small screen touch vs large screen touch • Cons: • Additional design/development work to craft different experience • Requires user to do extra work to set preferences
  83. 83. thenerdary.net/post/52860724240/using-mousemove-and-touchstart-to-detect-touch-devices
  84. 84. Detect hover • Pros: • Allows us to keep neat hover effects while also designing touch first • Doesn’t require visitor to change any settings • Cons: • If a user has touch and mouse enabled, they will not be able to switch back and forth • Flash of touch driven content is viewable until mouse moves in the screen
  85. 85. Interaction Media Features Pointer and Hover features could be awesome http://dev.w3.org/csswg/mediaqueries-4/
  86. 86. Interactive Media Features • Pointer: • Checks for: none, coarse, fine • If multiple input mechanisms: recommended that the UA reports the characteristics of the least capable pointing device • UAs may make the feature match multiple values.
  87. 87. Interactive Media Features • Hover: • Queries whether primary pointing system used on the output device can hover or not. • Values: none, on-demand, hover
  88. 88. “An interface that tries to be all things to all devices might ultimately not do a good job for any situation” - Luke Wroblewski http://www.lukew.com/ff/entry.asp?1816
  89. 89. Questions to ask • Will the interaction help users understand the changes in the interface? • Will the interaction add personal value or enjoyment to the experience? • How does the interaction affect the page size/performance budget? • Can I optimize the experience by choosing less expensive properties to animate? • How much time will be added to the design/development timeline to create/ implement? • How will this effect the cross-device QA/testing time? • If I remove the interaction, can my visitors still access the information in an easy manner, with minimal clicks or confusion? • Do the interaction choices degrade gracefully? • Is the design accessible for touch, mouse, and keyboard users?
  90. 90. tinyurl.com/rwd-interactions Share your thoughts
  91. 91. Thank you. @jennlukas jennlukas.com thenerdary.net cookinsidethebox.com

×