12 ways to encourage scrolling

Goggle Offers just launched, I like how all the content sits above the fold on the iPhone. It’s not that users don’t scroll, just that most of their attention is focused above the fold.

Web users spend 80% of their time looking at information above the page fold. Although users do scroll, they allocate only 20% of their attention below the fold -  Nielsen March 2010

Luckily there are design tricks to encourage scrolling, here’s 12:

1. Diagonal lines {View}

design elements to encourage scrolling

A continuation of the title text, the diagonal line cleaves through the creative drawing the eye downward.


2. Scavenger hunt {View}

design elements to encourage scrolling

If you map out a clear path through your creative, users can’t help but follow.  Also see the mother of all scavenger hunt emails, by Localsknow.ca. Both examples incorporate game play to engage the user.


3. Hijack the Navi {View}

design elements to encourage scrolling


A partial view of the creative captures users curiosity in the preview pane. They’re compelled to figure out what lies below.

This example courtesy of Chad White, was one of the 2009 Hall of Fame inductees. A riff on this is this Easter Bunny email and Clinique email.

4. Animation {View}

design elements to encourage scrolling

Similar to the bunny email above, the animation in this J. Crew email compels users to explore down the page. Also see Saks and Bed, Bath and Beyond.

5. Legs in the air {View}

design elements to encourage scrolling

Can legs in the air really be a category? I’m not sure but here’s two more. The promise of nudity and unusual composition acts as a teaser.

6. Big Arrows {View}

design elements to encourage scrolling

Hard, horizontal lines deter scrolling. The arrow shaped dividers invite further exploration.

Though keep paragraphs of text short if you want people to keep reading.

7. Super tall element {View}

design elements to encourage scrolling

Big bags, stockings, tall ladies and piles of presents…all super tall design elements that indicate further content.

8. Scannable organic layouts  {View}

design elements to encourage scrolling

Organic or editorial style layouts, are easy to scan with no hard horizontal lines to break up the flow.

9. Chain link {View}

design elements to encourage scrolling

Similar to organic layouts, chain link layouts connect each product via a design element. Dotted lines, diagonal lines or scrolls…anything that maps out the route the eye should take.

10. Vertical lines {View}

design elements to encourage scrolling


Vertical lines encourage scrolling, whether it’s a big arrow or vertical stripes

11. Teaser content {View}

design elements to encourage scrolling

Mobile users check email during quick breaks, so important content should be viewable on the first screen. If your content overflows then allow some teaser content to peek through.

Unlike on the desktop, we know where the fold occurs. Stay ignorant, and you end up cutting off your CTA.

 

Above the fold on iPhone 4 
click view to see test screenshots
320 x 600px 285px view
500 x 600px 440px view
550 x 600px 485px view
600 x 600px 530px view
650 x 600px 575px view
700 x 800px 615px view

12. Numbered lists {View}

design elements to encourage scrolling

Everyone loves a list, here’s another example from Sephora.

Morsel:

Eye tracking reports by Nielsen, found the very bottom of a page often attracts additional attention.

They recommend, “While placing the most important stuff on top, don’t forget to put a nice morsel at the very bottom”.

So here’s mine…last October Clicktale found that 20% more visitors continue to scroll when using larger screens vs. tablets. Attention time also more than doubled over that of small screen users.

Also check out David Hoang’s post, “1996 Called - It Wants “The Fold” Back“. David argues users don’t mind scrolling if given a good incentive and the title made me laugh.