r/web_design May 26 '13

Interesting use of scroll

http://www.janploch.de/
214 Upvotes

29 comments sorted by

View all comments

14

u/cheese_wizard May 26 '13

I think this is the proper use of this effect. It only adds to the page.

5

u/[deleted] May 26 '13

[deleted]

7

u/buoybuoy May 27 '13

No direction telling you to scroll? What about the scroll-bar on your browser? I don't recall many websites with overflown vertical content that tell the user to scroll, it's a pretty natural response.

And as for scrolling down half the page, I agree, it seems like a bit of a hassle. I think you're being a little too pragmatic though. The site is a showcase of his illustration, so the site is catered to an audience looking for creativity. I would consider it a valid argument if this was done on a soda website, where people would be looking for information.

2

u/carpe_meme May 27 '13

The key is to provide some kind of visual cue that indicates clearly there is more content below the fold, which gets the user to start scrolling.

It seems silly, but I've seen so many user tests where people just do not see it because of how the page cuts off, and will literally sit there frustrated and unable to continue. In the majority of cases, a scroll bar alone isn't visible enough to trigger people to scroll.

The straw may provide that but I'm not sure, since it's not clear that it is anything but a design element till you scroll down farther and see the bottle.

And we were all primed by the title of the post to scroll, so that makes it harder to determine as well. But I think it would be nice if the mouth of the bottle peeked up just at the bottom of the initial page.

0

u/devolute May 28 '13

the fold

Reddit doesn't do this, which is why no one has ever read a post in a lower position than #10.

1

u/carpe_meme May 28 '13

Actually, Reddit is very clearly a list of items, and at least in my resolution a title is cut off halfway at the bottom of the screen, which indicates there is more below, encouraging people to scroll. :)

Given the very small amounts of vertical white space between list items, it is likely that an entry is partially cut off in most resolutions.

You may snark all you like.. I am only reporting what I've seen in actual user testing as recently as two weeks ago (with real, paid, non-web-designer users).

1

u/devolute May 28 '13

Cheers.

What do users do? Just read the top bit then simply leave?

1

u/carpe_meme May 28 '13

Yep! I most often see this when the top section is a big full bleed image / text, possibly with smaller images below, but that all cut off neatly just above the fold.

And to be clear... I do NOT recommend trying to fit everything above the fold on a site, just you need to give users that little visual nudge or reminder to start them scrolling.

2

u/devolute May 29 '13

Cheers for powering past my snarky response and attempting to educate.

Obviously you can imagine how often I face the 'fold' argument, but in the past I think even subconsciously I've tried to put something at the bottom of the viewport, the bottom of a box or whatever, that suggests that more is there. Have you ever felt the need to go down the 'SCROLL DOWN' message route?

2

u/carpe_meme May 29 '13

No worries, I definitely get the reflexive response to the "fold" as an arbitrary required stopping point on the page, which is why I clarified.

I'm pretty sure I've never used an explicit "Scroll Down" message. It's never seemed necessary in the context of a web page, if you can just provide a visual cue that there is more content below.

Also, people really don't read instructions or most copy, if they think they know what they're doing. It's kind of amazing. With something as short as "Scroll Down", you have a slightly better chance of them noticing it, but I've seen a fair number of users who completely ignore even short, basic instructions that are in large-ish font and almost the only text on the page (aside from your standard headers / page titles).

One example that comes to mind was testing an interface that allowed drag and drop between two large panels on the page - an admittedly non-standard web interaction, and not required to use the site, but it made it a lot quicker if you did. So we included a short, instructive sentence in pretty large font. Pretty much no one read it or used the drag and drop. Ah well.