December 18, 2017

Pass the 1-2-3-4 test

Put the hot stuff up top for mobile web writing

Think of it as the new 80/20 rule.

Reach mobile visitors

Top it all off To reach mobile visitors, get the gist of your message across in the first four elements of your webpage. Image by Nina Strehl

According to a Nielsen Norman Group eyetracking study, web visitors spend:

  • 80% of their time on a webpage above the fold, aka on the first screen
  • 20% of their time on a webpage below the fold

View from the top People spend 80% of their time on the first screen of a webpage, according to Nielsen Norman Group research.

This finding echoes ClickTale’s scrolling research, which shows that visitors:

  • Scroll to some extent 75% of the time. (That means they don’t scroll at all 25% of the time.)
  • Scroll to the bottom of the page 25% of the time.

Tip top One out of four visitors never make it past the first screen, according to ClickTale research.

Bottom line, according to king of usability Jakob Nielsen, “The average difference in how users treat information above vs. below the fold is 84%.”

But where’s the fold?

Don’t blow your top.

That’s a great question. Because content that shows up above the fold on a 30-inch monitor can take as many as five screens on a 3.5-x-6.5-inch smartphone.

See you at the top Mobile site visitors spend the most time on the upper middle of the first screen. Image by Google

And here’s the problem: Mobile visitors spend 68% of their attention on the top half of that tiny screen according to a study by Briggsby. They spend 86% of their attention on the top two-thirds of that tiny screen.

And below this point on the screen? Not so much, Briggsby says.

So what’s a writer to do?

Pass the 1-2-3-4 test.

To reach mobile web visitors up top, communicate the gist of the message in the first four elements of the webpage:

1. Headline

Tell the story, don’t tell about the story. “Hallmark doubles profit-sharing contribution,” for instance, not “Benefits changes announced.”

And don’t even get me started on label headlines: “Benefits changes” is not a headline.

Before:

Preventing and declaring conflicts of interest

This buries the topic behind 25 characters worth of –inging words. Plus, it’s unclear: Who’s preventing? Who’s declaring?

After:

Conflicts of interest: How do you handle?

This moves the topic to the top and clarifies who’s responsible.

2. Deck.

Deliver a secondary angle for news stories and a summary for benefits and feature stories. Don’t drop this essential element: 95% of webpage visitors look at the deck.

Before: The writer dropped the deck, missing 25% of her chance to get the word out within the top four elements of the story.

After:

Conduct all your business ethically with our new policy

The new deck adds the benefit to the readers and introduces the new policy.

3. Lead

Show, don’t tell. Leads that illustrate the point with concrete material like stories bring the point to life for readers. And they draw 300% more readers and 520% more reading, according to a split test by Alex Turnbull and the Groove HQ.

Before:

Have you ever been in a situation where your personal interests seem to be in conflict with your responsibilities as an XYZ employee?

I think I’d read 520% more of this if it were 15% more colorful.

After:

Is your brother-in-law bidding on an XYZ contract? Does your husband work for the competition? Is your neighbor applying for a job in your department?

Just a light touch of detail makes this piece more engaging, puts the reader in the story and brings the message to life.

4. Nut graph

Put the story into a nutshell in the second paragraph. Don’t drop the deck: 95% of webpage visitors read the deck, so it’s a key element for communicating to skimmers and other nonreaders in a hurry.

Before:

Situations such as these can touch every aspect of our day-to-day operations, regardless of where we are located or what we do. They can be difficult to identify and it may not always be clear how best to resolve them.

I’m sure this is all true, but it doesn’t define the story and move it forward. I’d consider this background rather than a nut graph.

After:

If so, your personal interests may be in conflict with your responsibilities as an XYZ employee. Our new conflicts of interest policy can help.

Here, we make the story snappier and get that policy link up among the first four elements.

Now test it.

Now email those first four elements to yourself and test them on your smartphone.

BeforeAfter
Preventing and declaring conflicts of interest

Have you ever been in a situation where your personal interests seem to be in conflict with your responsibilities as an XYZ employee?

Situations such as these can touch every aspect of our day-to-day operations, regardless of where we are located or what we do. They can be difficult to identify and it may not always be clear how best to resolve them.

Conflicts of interest: How do you handle?
Conduct all your business ethically with our new policy

Is your brother-in-law bidding on an XYZ contract? Does your husband work for the competition? Is your neighbor applying for a job in your department?

If so, your personal interests may be in conflict with your responsibilities as an XYZ employee. Our new conflicts of interest policy can help.

Can you get the gist of the story from the first four elements? If so, congratulations! You pass the 1-2-3-4 test.

A little off the top

Now that you have placed the important elements up top, weed out anything that’s getting in the way of seeing them.

Get to the point faster HubSpot, left, fills much of its first screen with sharing buttons and chrome; The New York Times app, right, gets to the point faster, displaying a headline, caption and three lines of content — even on a small screen.

Take Hubspot’s marketing blog. Above the fold, we have:

  • The HubSpot flag and menu
  • Marketing a sales tabs
  • Publication date
  • A three-line headline
  • A two-line byline, including the writer’s Twitter handle
  • Sharing buttons
  • A busy image without a caption

What we don’t see? A single word of the article itself.

The New York Times app, on the other hand, squeezes a three-line headline, a telling photo, a caption that adds information and four lines of the lead onto the first screen.

So what can you move from the top screen?

  • Bylines. Only the writer and the writer’s mother care who wrote the piece.
  • Publication dates. “The story date is not worth the substantial screen real estate it occupies,” writes usability expert Jakob Nielsen.
  • Categories, tags and sharing buttons. They don’t add helpful information.
  • Chrome, or buttons, navigation, menus and other design elements. “Prioritize content over chrome” on mobile, Nielsen counsels.

Because when it comes to making the webpage tops, what you take off the first screen is as important as what you put in.

  • Writing For the Web and Mobile in Chicago

    People devote 86% of their time and attention to the upper two-thirds of a mobile screen, according to a study by Briggsby.

    Chicago Writing For the Web and Mobile workshopAt Writing For the Web and Mobile — a two-day digital writing Master Class on June 12-13, 2018 in Chicago — you’ll learn to reach them where their eyes are.

    Specifically, you'll learn to:

    • Organize your webpage using the temple structure. Designed for the web, it's the most effective way to help visitors find what they're looking for online.
    • Choose from 5 types of web leads that work. And learn 3 common approaches to avoid.
    • Tear down obstacles to reading your webpage by passing The Palm Test.
    • Get found and clicked. Help Google and humans figure out what your piece is about with 6 quick tricks.
    • Pass the 80/20 test. Put your key messages where readers will be 84% more likely to find them.

    Learn more about the Master Class.

    Register for Writing For the Web and Mobile Workshop in Chicago.


    Browse all upcoming Master Classes.

    Would you like to hold an in-house Writing For the Web and Mobile workshop? Contact Ann directly.

Speak Your Mind

Tell us what you're thinking...
and oh, if you want a pic to show with your comment, go get a gravatar!


%d bloggers like this: