interactions in responsive web - bdconf orlando 2014
Post on 20-Jul-2015
204 Views
Preview:
TRANSCRIPT
Interactions in Responsive Web
A look at applying responsive interaction patterns with mouse hovers, touch events, and more.
@jennlukas
fuckyeahhovers.tumblr.com
Don’t Stallone it.
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
90%of Americans have a cell phone
http://www.pewinternet.org/2014/02/27/summary-of-findings-3/
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/
50%of cell phone owners download apps
http://www.pewinternet.org/2013/09/19/cell-phone-activities-2013/
110%of everyone, everywhere, loves cats
this is terrible math
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
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/
93%of teens have a computer or access to one.
http://www.pewinternet.org/2013/03/13/main-findings-5/
37%of teens have a smartphone
23%of teens have a tablet
http://www.pewinternet.org/2013/08/22/teens-and-mobile-apps-privacy/
58%of all teens have downloaded apps to their
cell phone or tablet computer
http://www.pewinternet.org/2013/03/13/main-findings-5/
Simple transitions on :hover & :focus
For visitors with access to these selectors, we will add interactions to a place that
visitors can expect change
“I like to think of CSS transitions like butter”
- Dan Cederholm
http://alistapart.com/article/understanding-css3-transitions
“Assume every screen your website serves is a
touchscreen” - Josh Clark
http://globalmoxie.com/blog/desktop-touch-design.shtml
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
delval.edu
http://diningataltitude.com/vail-restaurants/
drivesafemode.com
bit.ly/1gZ5zJK
http://blogs.adobe.com/webplatform/2014/03/18/css-animations-and-transitions-performance/http://www.html5rocks.com/en/tutorials/speed/high-performance-animations/
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
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
http://www.brandaiddesignco.com/
http://updates.html5rocks.com/2013/12/300ms-tap-delay-gone-away
http://msdn.microsoft.com/en-us/library/windows/apps/Hh767313.aspx
https://github.com/ftlabs/fastclick
https://github.com/filamentgroup/tappy/
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
fbf8.com
yourmajesty.co
andculture.com
https://fundbox.com/
chownow.com
http://starmatic.com
studiorotate.com
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
artsy.net
jukely.com
hipstamatic.com/oggl
“ 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/
timkadlec.com/2013/01/setting-a-performance-budget/clearleft.com/thinks/responsivedesignonabudget/
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
pictionapp.com
getjustlanded.com
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
http://www.stucox.com/blog/you-cant-detect-a-touchscreen/
http://codepen.io/Jenn/full/cwuJf/
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
thenerdary.net/post/52860724240/using-mousemove-and-touchstart-to-detect-touch-devices
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
Interaction Media Features
Pointer and Hover features could be awesome
http://dev.w3.org/csswg/mediaqueries-4/
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.
Interactive Media Features
• Hover:
• Queries whether primary pointing system used on the output device can hover or not.
• Values: none, on-demand, hover
“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
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?
top related