Put the Headline and CTA at the Top of the Hero
Within the first screenful of a web page, people spend more than 65% of their viewing time on the top half. On search results pages the figure is above 75%. Measured across the whole page, more than 42% of viewing time goes to the top 20% (Nielsen Norman Group, 2018).
What the research observed
Nielsen Norman Group used eye tracking to measure how viewing time was distributed down web pages. Attention did not spread evenly across the first screen. It concentrated near the top and thinned toward the bottom edge of the viewport, before any scrolling took place (Nielsen Norman Group, 2018).
The cause is expectation. People have learned that the most important information on a page usually sits at the top, so that is where they look first and longest. Whatever occupies the upper half of the first screen gets the largest share of attention the page will receive.
What it means for a business website
Many small business sites open with a tall hero: a large photo, generous padding, and a headline set near the middle of the screen or lower. The button often sits further down still. That arrangement puts the two most important elements in the part of the screen that gets the smaller share of attention.
The fix is mostly a matter of height and order. A shorter image band, less top padding, and a headline that starts close to the navigation bar move the message to where people already look. On phones, a tall image can push the headline nearly out of the first screen.
What to do
- Open your home page on a laptop and a phone and check whether the headline and primary button sit in the top half of the first screen.
- Reduce hero image height and top spacing until they do.
- Keep the headline to one or two lines so the button stays high.
- Check your main landing pages too.
Sources
- Fessenden. Scrolling and Attention. Nielsen Norman Group, 2018.