{"id":5689,"date":"2019-05-06T07:00:21","date_gmt":"2019-05-06T12:00:21","guid":{"rendered":"http:\/\/juneux.com\/blog\/?p=5689"},"modified":"2022-03-23T19:18:26","modified_gmt":"2022-03-24T00:18:26","slug":"ux-word-of-the-day-scroll-stopper","status":"publish","type":"post","link":"https:\/\/juneux.com\/blog\/2019\/05\/ux-word-of-the-day-scroll-stopper\/","title":{"rendered":"UX Word of the Day: Scroll Stopper"},"content":{"rendered":"\n

I love introducing the concept of \u201cinformation scent<\/a>\u201d to non-UX designers. They almost always find the concept fun to say and empowering.<\/p>\n\n\n\n

Once non-designers understand the definition of information scent\u2014the ability to use design and copy to pull users deeper into an experience\u2014concerns about \u201cthe fold\u201d and \u201cnumber of clicks\u201d quickly fade away.<\/p>\n\n\n\n\n\n\n\n

Scroll Stopper<\/h2>\n\n\n\n

A scroll stopper is the antonym of information scent. <\/h4>\n\n\n\n

Scroll stoppers are design cues that tell users: \u201cStop scrolling! There\u2019s nothing more to see here.\u201d<\/h4>\n\n\n\n

I find scroll stopper is even more fun to say than information scent. Or when sung to the tune of \u201cHeartbreaker\u201d a la Pat Benatar.<\/p>\n\n\n\n

3 Most Common Scroll Stoppers<\/h2>\n\n\n\n

During usability testing, I most frequently observe 3 types of scroll stoppers:<\/p>\n\n\n\n

1) Full-screen image \/ video<\/h3>\n\n\n\n
\"\"<\/figure><\/div>\n\n\n\n

2) Too much negative space<\/h3>\n\n\n\n
\"\"<\/figure><\/div>\n\n\n\n

3) Sticky footers<\/h3>\n\n\n\n
\"\"<\/figure><\/div>\n\n\n\n

How to Stop Scroll-Stoppers<\/h2>\n\n\n\n

Information scent!<\/p>\n\n\n\n

1) Pay attention to breakpoints<\/h3>\n\n\n\n

Figure out where the most common breakpoints will be, and then ensure your image, copy, video is cut in half<\/strong> at that breakpoint. Users will naturally scroll down to see the rest of the content.<\/p>\n\n\n\n

\"\"<\/figure><\/div>\n\n\n\n

2) Include elements that break the grid<\/h3>\n\n\n\n

Include vertical design cues<\/strong> to pull the user\u2019s eye down the screen. In the ZuPreem example below, the designer uses images of birds and bird feed that break the grid. Try to to avoid just using a down arrow to indicate more content\u2014it signals lazy thinking.<\/p>\n\n\n\n

\"\"<\/figure><\/div>\n\n\n\n

See also: UX Word of the Day Index<\/a><\/p>\n\n\n\n

Related Articles<\/h2>\n\n\n