2

I've been designing a website for one of my clients and I have a cover image on the landing screen. It's basically a 100vh + 100vw image.

I wanted to know what is a good way to show the users that there's content underneath the main image. For some reason, I'm not a fan of the arrow pointing downwards, would you guys suggest any other options?

4

I personally prefer non-obtrusive solutions like showing an edge of the next section of the content.

Here it's shown with cards: it's obvious there is something on the right, and users flick almost unconsciously. No cognitive load whatsoever.

enter image description here

2

As Brian points out, 'the fold' is a rather antiquated concept (see UX Myths: people don't scroll) that has, for the most part, been remedied by time.

What's brought the problem back is this trend to have single page web sites that act more like full-screen powerpoint slides. The challenge is that this actually re-introduces the problem of the fold. The design is purposefully created to imply that there is 'one full screen' in view at a time.

As such, this is why you see the down-arrow solutions. It's a workaround to the fact that the 'slide deck' design trend causes this fold problem again.

In terms of accommodating general users, I think that leaves you with a few general options:

  1. Don't follow this design trend and consider making it very clear that the page doesn't end after that first slide by not sticking with 100vh banners.

  2. Go with the arrow solution. It, of course, doens't have to literally be an arrow, but something needs to be shown there to give the user an indication something exists beyond this full screen banner.

  3. Assume/hope that people are used to this particular design trend and decide to scroll intuitively.

  • Thanks for taking the time to reply to my post! You mentioned some really good and interesting things. I will have to find a creative way to show the user that there is in fact content underneath the main image. – Neo Nov 27 '15 at 15:27
1

Well, you have two paths: implicit or explicit.

An implicit approach would be to rely on implied affordances and user's past experiences. Thus, you could rely on the user noticing the scroll bar denotes additional content, or simply make your screen height's value 90vh. Needless to say these approaches aren't the best UX.

On the other side, an explicit approach would require an explicit (doh!) element, such as text or graphic elements, like the arrow you mention, or a + sign or whatever your creativity brings. And creativity is the keyword here, because your question comes from the fact that somehow you don't like an element, and obviously nobody but you can tell why.

But be very careful: a good UX designer must know when to back off from his/her own taste to apply the best possible solution. So if you want to go crazy... Do it! By all means, it's extremely boring to see everybody using the same rules and techniques, just make sure to test, and if everything fails.... Just back off and do like everybody does

  • I'd say that showing part of the content below is pretty explicit... – Zach Saucier Nov 27 '15 at 4:24
  • Thanks for taking the time to reply! I've already tried and tested the approach you mentioned where we show part of the content to the user (I believe my element's height value was 95vh when I tested it). It does work really well and I like that idea. However, I wanted to know if there's even more approaches to tackle this issue. I'm testing out "circle" graphics on the right side of the screen to show where the user is located on the page and this ultimately shows that there is content underneath the landing screen. I don't thinks this is a good approach though as it's hard to notice. – Neo Nov 27 '15 at 15:20
  • @ZachSaucier: not necessarily. Many sites show just the start of the following section, which usually is just the empty space before the content start. As a mattr of fact, if not ths most common approach, it's pretty close. Another oprion is to add an inner shadow right to the bottom of the viewport, no content at all. Or what if you see one line of text? Does the site ends there or continues? So yes, content is implicit. – Devin Nov 27 '15 at 15:58
  • @Neo: the problem with the steps on the side is the same that you will face with the scrollbar. Even worse, since users are aware of scrollbar affordances, but won't expect a stepper navigation. If you want to go this route, I suggest you label those steps: it gives the user context, navigation abilities and a clear affordance of the elements – Devin Nov 27 '15 at 16:03
1

Cut off some content at the bottom of the screen. This will tell users there is more without the need for icons and text.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

Apple does this in their iOS Mail app. The last item doesn't fit completely so it's immediately clear there is more content.

enter image description here

0

This is an issue of the "Fold". Particularly, "above the fold" which is a term borrowed from print-newspaper terminology. You are displaying "above the fold" content and want a user to know there is content "below the fold" to vertically scroll to. The fold is considered an antiquated concept by some because the broad range of device sizes and monitor screen sizes make the "fold" vastly different. But the "fold" is still a relevant concept to help wrap your head around solutions to let users know their is vertical content "below the fold". A great and common way to let users know their is content "below the fold" is a nice arrow icon of some kind, that, when clicked, scrolls to the next section of content.

Here is an example:

enter image description here

Since you are using a 100vh + 100vw fill you do not have to figure out different fold heights, for example: 900px for desktop and 768px for iPad Landscape, you just have an arrow icon of some kind that is within the 100vh + 100vw viewport which is your "above the fold" content visible to the user when the web page loads.

Here is an example of one I did along time ago because users did not understand there was more content to vertically scroll: http://www.homevana.com

Here is a a reference article I used to help answer your question: http://www.nngroup.com/articles/page-fold-manifesto/

  • Thank you for taking the time to reply to my post. As I said in the post, I'm not looking for an "arrow" solution because I'm simply not a fan of it. I just wanted to know if there are alternatives or other methods that I can possibly use to avoid using the arrow that's pointing downwards. The link you posted to the NNGroup is what I was looking for before but I just couldn't find it. Thanks for that. But this however doesn't answer my question. – Neo Nov 27 '15 at 2:23
  • Ya I don't know if you will find a good alternative to the down arrow, if you do, you will have to consider how many users will not intuitively understand whatever alternative you find to the contemporary down arrow. I mean you could do a robot pointing down, a rocket ship thrusting down (instead of its usual up), it just seems it will be confusing to any user that is already not aware enough to vertically scroll in the first place. – Brian Ogden Nov 27 '15 at 2:28
0

Another alternative is to make the main call to action in the banner area scroll down to the content below, or to use a second call to action to initiate the scroll:

enter image description here

In this example, “Buy it now” is the primary call to action and “Learn more” scrolls the user to the next section to show that there is content below.

  • Thanks for replying to my post! I did play around with this approach a while back and it does seem to work really well, however, there's isn't a clear message on the main image that I have at the moment. I might have to play around with it and try the approach you mentioned with the specific design that I have. – Neo Nov 27 '15 at 15:29
  • This also forces the user to make a decision immediately which may not always be a good thing – Zach Saucier Nov 27 '15 at 16:09

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.