We can do better than a "Scroll arrow"

Huge's research can tell us one thing or two about how some users can skip your content once you break the affordance of scrolling and about the solutions to that problem. Even though the scrorrow had a very successful result, is it really a solution to be tested? Compare the results between "Scroll arrow" and "Short image". They're literally the same. Now compare the "Scroll arrow" with "Control image". I mean it's obvious to me that in the case of the arrow users scrolled cause the page was yelling at them. In other words, it works but it doesn't provide a good experience. If people perceive content bellow the image, they’ll naturally scroll.

Using subtle animation to communicate (not an animated arrow though)

Animating the elements of the page can give great clues about the content below that huge picture. I'm not saying I have the perfect solution for every case, but I'll use animation to brainstorm other ways to handle this.

In the first example, our content pops from the bottom and disappears right after. It's like saying "Hello, I'm here. If you need me, just do your thing:"

If you're using a parallax effect in the main picture, take advantage of it to help give that sneak peek a less subtle effect — also to be consistent with the page's behavior. After all if the picture zooms out when the user scrolls, it should do the same on that page load hint:

In case of multiple blocks, the content can be nicely choreographed:

Don't hide the content, take control of it

Google Fit Android app uses just part of the first card from below the big circular chart to indicate that there’s more content to see. This approach is intuitive and elegant cause it's using no additional elements to talk to the user. It’s just them hanging out on the land of good perception, while leaving a lot of room for that main circle to shine.

This isn't new. In 2006, Jared Spool was already discussing the use of the cut-off look to improve the affordance of scrolling.

On the web you can achieve something like this getting the picture section to fit around 90% of the viewport max-height, with just one line of CSS or some quick JavaScript (if you need to support old browsers).

What about combining it with an animation and setting a lower opacity for the content? That way it can't take much of the user's attention from your beloved main picture:

Let's just be careful about the level of opacity. If it's too low we're doing no good. Oh and let's not forget to set the opacity back to 100% when the user scroll the page or interact with those elements as well :-)