38

I've noticed that many websites that have sliders / carousels as a full height background have this "down arrow icon" centered in the middle. Sometimes you can click it.

Does this arrow have a name? Does it serve a purpose? How does it benefit the user?

enter image description here

  • 32
    "does it benefit the user?" It (or the need for it, due to a full-height waste-of-space™) would tell me to go to another website. If you've got something useful on a website, put it where I can see it and don't use a full-height image or three screens-worth of cleverly-scrolling large text before I get to what I came for </endsRant> – TripeHound May 2 '17 at 15:30
45

It's called a Ghost Action Button, particularly used on above the fold for full-sized websites. Since the top fold fills up entire screen the users might assume there is nothing more to scroll down and see.

This button informs the users that there is more content below the fold, so that they can scroll down and consume.


Update

Referring to @jacob's comment - a couple of helpful sources to back my post:

Use Visual Cues

Inform users that most of the content is below the fold

Suggest scrolling with design elements so that every user can quickly see how the site works. A subtle visual cue, such as an arrow pointing off-screen or a copy “scroll down”, can inform users that most of the content is available below the fold.


Keep Scrolling Please ↓

The danger with using the full screen as a form of introduction is that users may not realise there’s more to be found by scrolling. Our very own Envato home page negates this with a “scroll” icon, suggesting you should take a peek below the fold.


Another study from NNGroup; Why the page fold still matters:

The two quantitative studies produce slightly different estimates of the fold’s impact on the user experience. But both numbers are big: we’re not talking a 5% difference or a 10% difference between information above vs. below the fold. The difference is on the order of 66%–102%. If you want a single number as our best current estimate, let's take the mid-point of this range: 84% is the average difference in how users treat info above vs. below the fold. Huge. Believe in the fold. It’s there, and the user experience changes drastically at that spot.

Users don’t scroll for fun. They scroll for a purpose. So if talking about the fold puts the focus on what’s first on the page, let’s continue the conversation.


This study here is talking about some alternatives to look at:
Dear web designer, let's stop breaking the affordance of scrolling

  • 1
    Do you have a source to back this up? (It sounds cool!). Also, are they supposed to be clickable? – Jacob Raccuia May 2 '17 at 13:38
  • @JacobRaccuia I've included some sources, please check. – DPS May 2 '17 at 14:20
  • Thanks @DPS. Please include reference to name "Ghost Action Button" if you have one! – Jacob Raccuia May 2 '17 at 16:10
  • 1
    A ghost button is just a stylistic label for a button with a border and no background fill. It could be used all over, not just as a paging or scroll indicator. – plainclothes May 2 '17 at 18:33
16

Naming

It's called scroll arrow, as many noted before me. The icon itself called chevron sometimes and called keyboard arrow down in Material Design.

Purpose

Hence fullscreen image and hidden scrollbars e.g. on Apple devices (they are not shown until the scroll), some users may think that there is no content below the image. Icon signifies there is. Huge tested it though and it seems most people will scroll anyway.

enter image description here

User benefits

Click is not probably that valuable because scroll is always cheaper than click (because you don't need to target icon on the screen: Fitt's law).

Many would argue that it is bad practice since if you need to explain your design, it's not cool and would opt to option three in the image (content partly visible).

A word about carousels

In your example I'd say it's a bad practice because:

  • carousels themselves are generally considered a bad practice (reasons: users don't click after first slide anyways, dots are too small for cursor, etc.)
  • even if you're using carousel, generally it's better to use thumbnails than dots (more informative) and make prev/next arrows larger
  • the icon is too similar to other icons (prev/next slide), so another inviting to scroll icon (e.g. mouse) may work better
2

That UI element is called Block Scroll.

On a single-page design broken into blocks (chunks), the block-scroll feature displays the blocks one screen at a time to improve user-flow and make the page work in a responsive way. Each block is responsive to the user's screen height so the user does sees exactly one block at a time when scrolling through the page.

You can find two demos of the plugin by Dominik Gorecki.

In this first demo, the page retains the vertical scrollbar -- compare scrolling on the page using the mouse scroll-wheel versus using the buttons (or keyboard ) instead.

The second demo completely hides the browser scroll bar, making navigation possible only with block scroll. Note how the user experience differs.

Block Scroll is available as a jQuery plugin.

  • While the second demo no longer suffers the annoying machine syndrome (you scroll down and it scrolls back), the user experience is even more terrible. It only provides one (or two, if you count the indication of the page edge) of the functions of the scroll bar and kills one entire way of navigation. – Jan Tojnar May 4 '17 at 11:20
  • @JanTojnar: Hey, thanks for noticing. I hadn't observed that the second demo does away with the mouse-scroll-wheel actions! (which it shouldn't have). It would be recommended to keep the scroll-wheel action (on desktops) and screen-swipe gesture (on mobile) to allow the user to scroll as usual, but have browser scroll bar hidden to prevent stops between blocks. – SNag May 4 '17 at 12:31
  • The "second demo" link is now dead. I'd recommend against block scroll: it gives the user the impression that what is shown is the whole of the current web page. This is bad if that page has content the user should see or at least know about. – Rosie F Apr 23 '18 at 6:52
1

From what I know it is called a scroll down arrow/scroll arrow generally it is used to scroll down one page down on our window.

And also from what I observed it is used on web pages where the landing page has an introductory div which fully occupies the window height and has no navbar or header and when user click on arrow our webpage start showing the header and navbar just like a normal site.

1

This is called a scroll down and lets the user know that there is more content below the 'fold' of the viewport of browser. Typically when there's a full width/height hero unit it's not always apparent to the user that there's more content below. It's also a quick way for the user to click and navigate to the next section of content.

0

These type of carousel are called vertical carousels and they are used for different purposes in a website. Example1 can be used in landing page banner carousels, Example2 can be used in application sidebars, Example3 can be used for gallery image thumbnails.

Nowadays the websites and more responsive and mobile friendly. Even laptops and desktops were made with touch screens. The vertical carousels are used for websites which are mostly image driven, and the user can swipe or slide from top to bottom to change the slides which are the most common action on a touch screen device.

The purpose of the arrow here is to show the user that this is a vertical carousel and they can use the arrow or swipe action or even slide action from top to bottom to change slides.

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.