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
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
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/
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/
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
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
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
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
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
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
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/
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
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
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
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?