Fitting Long-Form Content on a Page

Rishi Rawat Blog Posts 1 Comment has a clever solution for preventing user distraction.

When users need more context, instead of opening a new page or tab they show the extra content on the page itself.

For example, if a user is scrolling and decides to read more about Highest Quality. Honest Prices. promise (screenshot below) … example.
Default state of page

… instead of taking the user to a new page (risky because shoppers are easily distracted) Thursday shows a slide-out overlay.

This is especially useful for lengthy content. With a slide-out design, the user can scroll a long column of text while the background page remains fixed:
Slide-out overlay activated

And you can apply this same strategy to the mobile version of the page: mobile page.

One nice feature of the mobile slide-out is the little gap on the left margin which acts as a visual cue. It lets users know clicking X (the top right corner) will return them to where they started. Visual cues matter.

Comments 1

Leave a Reply

Your email address will not be published. Required fields are marked *

The maximum upload file size: 50 MB.
You can upload: image, audio, video, document, spreadsheet, interactive, text, archive, code, other.
Links to YouTube, Facebook, Twitter and other services inserted in the comment text will be automatically embedded.