Parallax scrolling research by Kristen Chon

July 2013

Scrolling versusâ&#x20AC;¨ Pagination AGENDA ITEMS: Function and Reasoning behind Usage of parallax scrolling Effective and poor examples of parallax scrolling Pros and Cons Customer behaviors in scrolling and clicking User mentality and behavior in search and browse

! ! ! ! ! !

.biz

Parallax Scrolling

Parallax Scrollingâ&#x20AC;¨ What Parallax scrolling is when layers of the website move at different speeds as a user scrolls through the page. It can be very powerful in leading a user through a narrative.

For Used in video games and website homepage layouts

Best for Story telling websites and multiple dimension layouts.

Source: Awwwards

! ! Source: Sun Dog Interactive !

.biz

ÂŠ 2010 AT&T. All rights reserved. AT&T, the AT&T logo and all other AT&T marks contained herein are trademarks of AT&T Intellectual Property and/or AT&T affiliated companies. All other marks contained herein are the property of their respective owners.

Parallax Scrolling

Parallax Scrolling  Pros Accessible Increases accessibility because scrolling is a natural, native way to interact with touch screen devices !

Usable Easy, impressive, informative !

Valuable Creates a positive association with the brand ! ! ! ! ! ! ! ! !

Gives the user more freedom Instead of just vertical scrolling, a user can choose how to experience the website. !

Entertains and engages the user Parallax scrolling adds a level of entertainment to website design, especially when it involves subtle animation or surprise ! ! ! ! ! ! ! ! ! ! !

.biz

Allows a designer to lead the user through the website in a meaningful way With parallax scrolling, a designer can lead a user through the experience in a guided way. Instead of depending on colors and scale to draw a user’s eye across the site, the movement can guide the user through the site ! ! ! ! ! ! ! !

© 2010 AT&T. All rights reserved. AT&T, the AT&T logo and all other AT&T marks contained herein are trademarks of AT&T Intellectual Property and/or AT&T affiliated companies. All other marks contained herein are the property of their respective owners.

Parallax Scrolling

4 Ð

Parallax Scrolling  Effective Examples

Source: Soleil Noir 2012

.biz

Parallax Scrolling

5 Ð

Parallax Scrolling  Effective Examples

Source: Life of Pi-Movie

.biz

Parallax Scrolling

6 Ð

Parallax Scrolling  Effective Examples

Source: Lexus LS

.biz

Parallax Scrolling

7 Ð

Parallax Scrolling  Cons A search engine optimization nightmare Not SEO-friendly so miss the opportunity to define important meta data and title tags within your site ! !*SEO: Search Engine Optimization

Slow to load, quick to leave It can slow your website’s load time, which is a leading cause of visitor frustration, which prompts them to leave ! ! ! ! ! ! ! ! ! ! .biz

Mobile specific design Difficult to design parallax scrolling websites to accommodate to tablet or smartphone size

Accessible Problems develop when widgets show up or when navigation isn’t clear or consistent

Possible distraction Although design can catch attention, it can be distracting ! ! ! ! ! ! ! ! !

Value When users can’t find what they’re looking for and are unclear on what you’re saying the value disappears ! ! !Source: Parachute Design, A Better UX ! ! ! ! !

Parallax Scrolling

8 Ð

Parallax Scrolling  Poor Examples When user scrolls, it scrolls down vertically, but when the user is on a row and scrolls, it scrolls horizontally

! This weakens navigation as the user may feel that they do not have control over navigation

Source: Muffi

The use of horizontal and vertical navigation is confusing.

.biz

Parallax Scrolling

9 Ð

Parallax Scrolling  Poor Examples

The separation between each “page” is pointless due to the lack of hiding/revealing information. Also there is no interaction or a transition between each page.

Source: Green Splash Design

The use of parallax scrolling doesn’t add to anything because it’s not hiding any information and there is not any narration.

.biz

Parallax Scrolling

10 Ð

Parallax Scrolling  Poor Examples

Transition from unrelated pictures to a page of logos and to a page of a map illustrating their office locations is unclear in terms of navigation and narrative

Source: Figmenta

The use of disconnected photos and the navigation to a page of logos and a map of their three locations isn’t clear. There is no distinct navigation or narrative

.biz

Parallax Scrolling

11 Ð

Best Practices for Parallax Scrolling  A Parallax-scrolling page needs to: •Speak the users language •Communicate who the customer is •Communicate the core benefits •Show passion for the product •Build trust •Push user into sales funnel ! ! ! ! ! ! ! ! ! !

Best Practices: •Good story line •One message per state/page •Navigation between states is clear •Persistent navigation that indicates position •Play is encouraged by providing a scrubber mechanism that lets users go back and forth between stages •Mobile first is honored and how/if it ports to smaller screens ! ! !Source: UX Stack Exchange, A Better UX ! ! ! ! ! ! !

.biz

Parallax Scrolling

12 Ð

Best Practices for Parallax Scrolling  Product presentation •Shows your product in 3D •Demonstrate the benefits •Add some sphere to your product !

Engagement •Make your visitors curious •Let your visitors have some fun •Surprise your visitors !

Storytelling •Let your visitors travel through time •Draw your visitors in •Make your comic book interactive ! ! ! ! ! ! ! ! ! !

.biz

Action trigger •Invite your visitors in •Lead your visitors to your Call to Action •Guide your visitors’ line of sight

Design •Make your website special •Build your website on the interaction •Make your background fun ! !Source: Usabilla ! !

! ! ! ! ! ! ! ! ! !

Parallax Scrolling

13 Ð

Scrolling Vs. Clicking  If the page is designed to encourage scrolling, people do scroll According to usability expert, Jakob Nielsen’s eye-tracking study

Apple removed the scrollbar from MAC OS X This clearly shows that people are so familiar with scrolling that they don’t even need the visual clue for it

Scrolling encourages continuity of reading flow while clicking fragments it

! ! ! ! ! ! ! !

! ! ! ! ! ! ! ! !

! !Source: UX Myths ! ! ! ! ! !

Users can read long, scrolling pages faster than paginated ones Usability studies by Software Usability Research Laboratory's study confirms that people are accustomed to scrolling

.biz

Scrolling beats paging It’s easier for users to simply keep going down the page than it is to decide whether or not to click through for the next page of a fragmented article

Scrolling has better usability in terms of speed and ease of use

Parallax Scrolling

14 Ð

Customer Behavior  Scrolling Long pages continue to be problematic Because of users’ limited attention span. People prefer sites that get to the point and let them get things done quickly ! ! ! ! ! ! ! ! ! !

People will look very far down a page If the layout encourages scanning !

If the information makes them believe that it will be worth their time to scroll ! ! ! ! ! ! ! ! ! !

.biz

Page fold The content above the fold is more valuable than the one below the fold for attracting and keeping users’ attention !

However, less content above the fold may encourage more exploration below the fold ! ! !Source: The NN Group ! ! ! ! ! ! !

Parallax Scrolling

15 Ð

Design Tips to Encourage Scrolling  Scrolling Less is more Don’t be tempted to cram everything above the fold. Good use of whitespace and imagery encourages exploration ! ! ! ! ! ! ! ! ! !

Stark, horizontal lines discourage scrolling This doesn’t mean stop using horizontal full width elements. Have a small amount of content just visible, poking up above the fold to encourage scrolling ! ! ! ! ! ! ! ! ! !

.biz

Avoid the use of in-page scroll bars The browser scrollbar is an indicator of the amount of content on the pages. iFrames and other elements with scroll bars can break this convention and may lead to content not being seen ! ! !Source: The NN Group, CX Partners ! ! ! ! ! ! !

Parallax Scrolling

16 Ð

Customer Behavior  Clicking Disregard the three-click rule Users would rather have several links telling them they’re headed the right direction !

Fewer clicks do not make more satisfied users ! ! ! ! ! ! ! ! ! ! ! !

The one-click rule Every click or interaction should take the user closer to their goal while eliminating as much of the non-destination as possible

Well labeled links Effective when incorporated with the scent of information. The optimum length for a link is 7-12 words

The scent of information As long as the scents lead users to the right information, they don’t care about the number of clicks

Source: UX Myths

! ! ! ! ! ! !

.biz

Parallax Scrolling

17 Ð

User Mentality in Search and Browse  Search Searching A goal-directed action with a planned purchased in mind (search and deliberation) ! ! ! ! ! ! ! ! ! ! ! !

Focus search within a specific category Use a combination of search and social media to fuel their purchasing decisions !

Satisfice The customer chooses the first reasonable option. As soon as he finds a link that seems like it might lead to what he is looking for, there’s a good chance the customer will click it ! ! ! ! ! ! ! ! ! ! .biz

Search Queries Informational searching Looking for a specific fact or topic Navigational searching Seeks to locate a specific website Transactional searching Looks for information related to buying particular product or service !

80% searches are informational 20% searches are navigational or transactional

Source: Buying, Searching, or Browsing: Differentiating between online shoppers using in-store navigational clickstream by Wendy W. Moe, Search Engine Land

Parallax Scrolling

18 Ð

User Mentality in Search and Browse  Browse Browsing An examination of a store’s merchandise for recreational or informational purposes without a current intent to buy !

A form of leisure activity and an external search behavior !

The browser adds to feelings of self-esteem to the user By satisfying his/her curiosity, acquisition of product or market expertise ! ! ! ! ! ! ! ! ! ! !

Non-purchase search behavior Browsing is associated with other types of search behavior. For example, the person who frequently browses in camera stores may be expected to read photography magazines !

Exploratory search behavior •Hedonic browsing •Less focused •Views broader category levels •Explores and encounters new stimuli

An outlet for general information hunger This can be targeted to a specific product or the market !

May bear a positive relationship To both product knowledge and opinion leadership Source: Buying, Searching, or Browsing: Differentiating between online shoppers using in-store navigational clickstream by Wendy W. Moe Association for Consumer Research

Motivation of exploratory is that of acquiring a bank of relevant product information potentially useful in the future

.biz

! ! ! ! ! !

July 29, 2013

Thank You

.biz