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?
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.
Referring to @jacob's comment - a couple of helpful sources to back my post:
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.
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
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.
Commented
May 2, 2017 at 18:33
It's called scroll arrow, as many noted before me. The icon itself called chevron sometimes and called keyboard arrow down in Material Design.
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.
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).
In your example I'd say it's a bad practice because:
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.
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.
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.
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.
