Applying responsive interaction patterns for any device
•
0 likes•1,007 views
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
Recommended
Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Similar to Applying responsive interaction patterns for any device
Similar to Applying responsive interaction patterns for any device (20)
More from Jenn Lukas
Recently uploaded
Recently uploaded (20)
Applying responsive interaction patterns for any device
- 1. Interactions in Responsive Web A look at applying responsive interaction patterns with mouse hovers, touch events, and more. @jennlukas
- 3. Interactions have come a long way 25 years of skip intros and counting
- 4. MM_swapImg
- 6. Flash Intros
- 7. Interactions in an RWD world What do we do now?
- 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. tinyurl.com/rwd-interactions Follow along with the survey
- 11. Campus Cat Application for college kids checking in on their distant cats
- 13. 90%of Americans have a cell phone http://www.pewinternet.org/2014/02/27/summary-of-findings-3/
- 14. 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/
- 15. 50%of cell phone owners download apps http://www.pewinternet.org/2013/09/19/cell-phone-activities-2013/
- 16. 110%of everyone, everywhere, loves cats this is terrible math
- 17. 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
- 18. 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/
- 19. 93%of teens have a computer or access to one. http://www.pewinternet.org/2013/03/13/main-findings-5/
- 20. 37%of teens have a smartphone 23%of teens have a tablet http://www.pewinternet.org/2013/08/22/teens-and-mobile-apps-privacy/
- 21. 58%of all teens have downloaded apps to their cell phone or tablet computer http://www.pewinternet.org/2013/03/13/main-findings-5/
- 23. Detention Dog
- 31. We can’t forget our mobile users. We can’t forget our desktop users.
- 32. Simple transitions on :hover & :focus For visitors with access to these selectors, we will add interactions to a place that visitors can expect change
- 33. “I like to think of CSS transitions like butter” - Dan Cederholm http://alistapart.com/article/understanding-css3-transitions
- 36. Doesn’t fly anymore. If it’s a small screen, it’s touch. If it’s a big screen, it’s a mouse.
- 42. “Assume every screen your website serves is a touchscreen” - Josh Clark http://globalmoxie.com/blog/desktop-touch-design.shtml
- 44. a { transition: color 0.25s linear; }
- 46. 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
- 47. Surprise and delight hovers Add visual engagement through hover
- 48. delval.edu
- 53. Just because I can do something, should I?
- 58. Some properties bring less speed delight than others Try using translate
- 59. bit.ly/1gZ5zJK
- 61. Quick properties to animate • Transform • position • scale • Opacity • Rotation • Filter
- 62. 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
- 63. Information reveal hover Show additional information on hover
- 71. mammothbooth.com
- 73. emporiumpies.com
- 77. 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
- 79. Destination hover show additional link information on hover
- 82. wifeel.com
- 85. Mobile browsers wait ~300ms from the time that you tap the button to fire the click event
- 92. 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
- 93. Navigation menus Moving beyond the Suckerfish dropdowns
- 94. fbf8.com
- 95. yourmajesty.co
- 98. andculture.com
- 100. chownow.com
- 101. http://starmatic.com
- 103. studiorotate.com
- 104. 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
- 106. artsy.net
- 108. jukely.com
- 110. hipstamatic.com/oggl
- 112. “ 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/
- 114. timkadlec.com/2013/01/setting-a-performance-budget/clearleft.com/thinks/responsivedesignonabudget/
- 115. Be faster than your competitors.
- 117. 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
- 118. Intros and other background animations and interactions
- 120. pictionapp.com
- 123. Overgram Piction
- 124. Overgram Piction
- 125. getjustlanded.com
- 127. 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
- 128. Hover/Touch Global Switcher A A A strikes back
- 141. 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
- 145. 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
- 146. Interaction Media Features Pointer and Hover features could be awesome http://dev.w3.org/csswg/mediaqueries-4/
- 147. 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.
- 148. Interactive Media Features • Hover: • Queries whether primary pointing system used on the output device can hover or not. • Values: none, on-demand, hover
- 149. “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
- 150. 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?