4

I know that many website nowadays use large hero banner to bait people scrolling. And I read this one article:

"A big striking hero area at the top of a page, grabs people’s attention and gives them an initial point of focus — a place to start. It’s a tried and tested way to engage people with a site’s core offering."

But I'm just curious do you really think people will scroll and knew that there is still part of the page below that huge banner?

2 Answers 2

5

Yes. Users do scroll below the fold - all you need is a balanced approach.

Hero banners are used to trick users, take a pause, read some content, and then scroll down.


How to Ensure that You Use Images Appropriately

Identify and prioritize all the goals of the page — both the user goals, and the business goals (including brand goals.) Is the page primarily a marketing vehicle to build your brand? Or are most visitors already familiar with your organization (or at least your industry vertical), and now need specific content or functionality?

Define how each design element relates to the page goals. Images are usually decorative, and support branding goals. Navigation and structured search relate to specific user tasks.

Assign visual weight based on goal importance. If a design element supports a high priority goal, it should have more visual emphasis; conversely, design elements related to secondary goals should have less emphasis. (This guideline sounds obvious, but is often completely disregarded, or gets lost along the way to creating a 'modern' looking website.)

Select images that have a strong relationship with brand goals. Remember, the purpose of your site is not just to showcase images (unless you're Flickr). Instead, the images you select should showcase the purpose of your site.

Choose striking visuals that capture attention. Once you've identified the goals of your images and their relative importance among other design elements, and you’ve determined what types of images relate to these goals — only then should you focus on selecting the most compelling images you can find.

Be selective about which trends you embrace when 'updating' your site. For many redesign projects, creating a site that looks 'modern' is an important goal. But there are many ways to accomplish this goal. Typography, layout, and brand colors — just to name a few—can all be effectively used to create a modern look and feel, while still providing appropriate emphasis on critical site functions.


Some more factors that make users scroll down are:

1. Navigation Placement

enter image description here


2. The Animating Arrow

enter image description here


3. The Attractive CTA

enter image description here

2

My position is hero banners are very difficult to do right.

TL; DR

It's hard to get/create a good image as a hero background. Using stock usually doesn't work. There are performance concerns.

Informativity


Not sure if the word exists in English but it means information amount in the content / design.

E.g. "we make sites" is less informative than "we design sites" because "make" is more general word than "design"

But "we make beautiful sites" is also less informative than "we make sites" because beautiful is vague / subjective and doesn't add to the meaning of the phrase. It's an extra word though and I considered it as a noise


So.

99% of the time it's won't be informative enough. It's used just because of the "trend" or to add some visual sauce or designer doesn't know or want to think about better way of presenting the information.

The background should convey some meaning: but unless you have a budget for a custom photoshoot / illustration most likely your banner won't be informative and tells nothing about you/company/product. You just take almost a random stock photo and just throw it under the text because it looks cool. But actually it's a visual noise because text on non-plain background is harder to read.

Performance

Big image (or even video) must be transferred via the network, adding to overall loading time of the page (because not everyone uses lazy loading). If you don't use responsive images you make life of mobile users a pain since they get the full version of your background. There are some techniques to help with performance though (via Smashing Mag):

How to make it even worse

Use a hero autoplaying slider.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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