152
Interactions in Responsive Web A look at applying responsive interaction patterns with mouse hovers, touch events, and more. @jennlukas

Interactions in Responsive Web - BDConf Orlando 2014

Embed Size (px)

Citation preview

Interactions in Responsive Web

A look at applying responsive interaction patterns with mouse hovers, touch events, and more.

@jennlukas

Interactions have come a long way

25 years of skip intros and counting

MM_swapImg

Flash Interactions

Flash Intros

Interactions in an RWD world

What do we do now?

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

tinyurl.com/rwd-interactionsFollow along with the survey

Campus CatApplication for college kids checking in on their

distant cats

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/

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/

Detention Dog

Detention Dog Analytics

AudienceOptimization

Put a carousel

on it.

We can’t forget our mobile users.

We can’t forget our desktop users.

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

jasonsantamaria.com

Doesn’t fly anymore.

If it’s a small screen, it’s touch.

If it’s a big screen, it’s a mouse.

“Assume every screen your website serves is a

touchscreen” - Josh Clark

http://globalmoxie.com/blog/desktop-touch-design.shtml

a {transition: color 0.25s linear;

}

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

Surprise and delight hovers

Add visual engagement through hover

Just because I can do something,

should I?

Some properties bring less speed delight than others

Try using translate

http://blogs.adobe.com/webplatform/2014/03/18/css-animations-and-transitions-performance/http://www.html5rocks.com/en/tutorials/speed/high-performance-animations/

Quick properties to animate

• Transform

• position

• scale

• Opacity

• Rotation

• Filter

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 hover

Show additional information on hover

mammothbooth.com

emporiumpies.com

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

Destination hovershow additional link information on hover

wifeel.com

Mobile browsers wait ~300ms

from the time that you tap the button to fire the click event

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

Navigation menus

Moving beyond the Suckerfish dropdowns

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

SlideshowsEveryone’s favorite interaction

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

Be faster than your competitors.

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

Introsand other background animations and interactions

Overgram

Piction

Overgram Piction

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

Hover/Touch Global Switcher

A A A strikes back

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?

tinyurl.com/rwd-interactionsShare your thoughts

Thank you.@jennlukas

jennlukas.comthenerdary.net

cookinsidethebox.com