Message clarity

Screen grab from Apple's web site, of the forthcoming Apple Watch.Clarity of intent and design looks simple, but requires enormous discipline, both in the messaging strategy, and the graphic design that supports it. Most companies and institutions fail at this because the easiest way to appease competing groups of stakeholders is to parse out pieces of the home page. When everybody gets a little slice of attention what you usually get is a noisy fail that is often—ironically—an accurate reflection of the muddled thinking behind the business and communication strategy. Does the world’s most valuable company look confused about its priorities, or its message?

Scrolling and “the fold” in page design

In 1994, the earliest days of the World Wide Web, human interface researcher Jakob Nielsen noted that his research showed that users of the first web browsers and web sites seemed reluctant to scroll to see portions of web pages hidden below the bottom of their display screens, and notes the importance of material at the top of web pages. Three years later Nielsen retracted his finding that “web users don’t scroll,” because his later research showed that as users adapted to the new web medium they did indeed scroll to see content on the lower parts of web pages. Unfortunately people remembered the “users don’t scroll” dictum better than the later retraction, and this mistaken meme has persisted in web design. [1, 2]

The roughly 115 square inches at the top of a home page comprise the most visible area of the web site. Most desktop or laptop users will be looking at your site on 19–22-inch monitors or on laptop screens, and the top 8–9 vertical inches (about 900–1000 pixels) are all that is sure to be visible on average screens, and perhaps less on the short but wide screens of most laptops. The measures for various mobile screens differ of course, but the basic effect is the same: the top part of the typical web page is visible, and the rest of the page is not visible unless the user scrolls. The “above the fold” metaphor refers to the middle fold in classic folded broadsheet newspapers like the New York Times or Wall Street Journal. Front-page stories “above the fold” are the most important and visible in both newspapers and web pages.

Diagram of the fold concept in web pages.

Although web users do scroll when they use the web, a number of studies have shown that there is a distinct fall-off of views in the portion of web pages that users must actively scroll to see. Eyetracking studies done by the Nielsen-Norman Group have shown that the tops of web pages get about 80% of the attention (strictly speaking, eyetracking gaze fixations on the page), and only 20% of fixations for page areas “below the fold” that they must scroll to reveal. Google conducted a study on the relative visibility of web advertisements on various page locations and also found that visibility drops off sharply at the fold, as did a similar study by Chartbeat. Significantly, the Google study also showed a drop-off in visibility “below the fold” on smaller mobile devices, but the effect was less pronounced, especially on smaller phone screen where users are used to scrolling to see page content. [3, 4, 5]

Diagrammatic summary of three research studies on scrolling and content visibility in web pages.

However, the Google and Chartbeat studies both showed that while attention and visibility do indeed drop at “the fold,” their studies found that about half of users do see material well below the fold line (~900 pixels down the page). These studies also noted something that sounds a bit counterintuitive if you assume that the top of pages are always the most visible areas: the top of the page was not the most reliably visible part of the page. Because pages are complex and often slow loading these days and users are impatient, users often begin to scroll down a page before the page top has fully rendered. Users are also well aware that the page top is commonly used for advertising, and is therefore is a less rewarding place to look for information. User attention and advertising visibility seems to peak between 500–800 pixels down the page, quite near the roughly 900 pixel fold area on most desktop and laptop screens.

Chartbeat also noticed that web readers who chose to scroll down the page often spent more time there than in the “above the fold” region, suggesting that when readers found the page content compelling that they would continue to read down the page. Taken together these studies suggest that the “the fold” is not a hard-and-fast line between great attention and no attention, that the bottom visible areas above the fold get great attention, and that the dreaded “fold line” may be less important in design than previously thought. Our own conclusions are that the fold area remains a significant transition zone, and that critical material on the page is best placed no lower than 600–700 pixels down the page to guarantee visibility on desktops and laptops.

An excerpt from the forthcoming book Web Style Guide, 4th ed., Patrick J. Lynch and Sarah Horton, to be published by Yale University Press late in 2015.

[1] Nielsen, J. 1997. Changes in Web Usability Since 1994. Nielsen-Norman, December 1, 1997.

[2] Nielsen, J. 2010. Scrolling and Attention. Nielsen-Norman, March 22, 2010.

[3] Schade, A. 2015. The Fold Manifesto: Why the Page Fold Still Matters. Nielsen-Norman, February 1, 2015.

[4] Google, 2014. The Importance of Being Seen: Viewability Insights for Digital Marketers and Publishers. Think with Google, November, 2014.

[5] Chartbeat, 2013. Scroll behavior across the web. Chartbeat Blog, August 12, 2013.

On reading and making

When you love something like reading — or drawing or music or nature — it surrounds you with a sense of connection to something great. If you are lucky enough to know this, then your search for meaning involves whatever that Something is. It’s an alchemical blend of affinity and focus that takes us to a place within that feels as close as we ever get to “home.” It’s like pulling into our own train station after a long trip — joy, relief, a pleasant exhaustion.
–Anne Lamott, Stitches

Spicy roasted carrots

Spicy roasted carrots, finished dish.
Delicious, spicy-sweet, fast and easy to make.

  • 3 cups fresh carrots, peeled and bias-sliced
  • 1 tablespoon soy sauce
  • 1 tablespoon chili oil
  • 1 teaspoon Worcestershire sauce
  • Salt and pepper to taste
  1. Peel and cut carrots, and microwave about 3 minutes, until just soft, but not fully cooked.
  2. Mix carrots with the rest of the ingredients and spread the carrot slices on a baking sheet.
  3. Broil about 15 minutes in a toaster oven, turning every 5 minutes, until brown at the edges. Watch carefully, as the carrots will brown on the bottom first.
  4. In an over, try baking at 450F, turning every 5 minutes until brown at the edges.

Finding my most current information

This is my personal site, mostly dedicated to my book projects. In the age of social media personal sites still have their uses, but this is not the best place to see what I’m up to on a daily basis.

I’m most active on my personal Facebook page, which is entirely public. I also maintain a Facebook page dedicated to my interests in coastal ecology and marine life. I use Twitter occasionally, mostly to comment on design, web communication, and data visualization. You are welcome to send me a Facebook “friend” request or to “like” my coastal ecology page.

There is a large selection of my photography on my personal Facebook page, but I also post my photos on Flickr.

I sell limited editions of my illustrations and photographs on my Patrick Lynch Design site.

Labrador duck drake

Photoshop illustration of a Labrador Duck.

Labrador Duck drake (Camptorhynchus labradorius), an extinct species that once wintered off the New England and mid-Atlantic coasts. Last seen alive in 1875.
A reminder that we can lose whole species, and that we stand to lose many more in the next century if we don’t change our ways very soon.
Photoshop illustration.

Faux pho — Vietnamese beef noodle soup

Bowl of pho bo Vietnamese beef noodle soup.A re-engineering of a favorite wintertime soup, Pho bo, or Vietnamese beef noodle soup. Real pho is made from an hours-long simmer of beef bones to make a light beef stock, but this recipe can be made on a weeknight in under an hour.

Feeds four, and requires about 45 minutes to prepare.

For the stock:
1 48 ounce can of College Inn chicken broth
1 14.5 ounce can of College Inn beef broth
1 dried star anise
1 tablespoon of “Three Crab” brand nam pla (fish sauce; in Vietnamese, nuoc mam). Use only excellent quality Thai or Vietnamese fish sauce sold in glass bottles. The cheap supermarket stuff reeks of old fish. Good nam pla has a strong savory smell that is only faintly fishy. Three Crab Fish Sauce is available on Amazon.
2 tablespoons of soy sauce
.5 teaspoon of dried ground galangal
.5 teaspoon ground cinnamon
1 large clove of garlic, sliced
1 cup of water (keeps the broth from getting too strong or reduced)
.5 cup finely sliced celery
3 tablespoons of minced white onion, roasted until just brown
1 tablespoon of fresh ginger, minced and roasted with the onions
Ground black pepper to taste

Roast the onions and ginger until just brown in a toaster oven, or in a sauté pan, then combine all the stock ingredients and bring up to a a boil, then down to a low simmer.

For the noodles:
Capellini (angel hair) pasta
Rice noodles (often sold as “rice sticks”)
Use rice noodles for a more authentic pho. I find the rice noodles too bland, and usually prepare some capellini (angel hair) pasta as an alternative. Cook either or both as directed to be done about 5 minutes before serving the soup. Drain and place in a bowl so guests can assemble their soups themselves.

The beef:
2 filet mignon beef portions
Use a very tender cut of beef like filet mignon. Freeze several filets, then let them thaw partially in the refrigerator so that it is easier to slice into very fine slices. Slice the meat as finely as you can, and set aside. The beef slices are cooked in the final moments before serving by placing them in the bowls of hot soup and noodles. If you add the beef too soon even filet will toughen more than is ideal. The fine slices will cook instantly in the hot broth and stay tender.

Thin-sliced beef.

Pho bo is normally garnished with fresh vegetable and herb ingredients that, like the beef, are added to the hot broth at the last minute and cook lightly in the soup.

These toppings are traditional for pho:
1 cup finely sliced celery
2 cups of fresh white bean sprouts (canned will do if fresh sprouts are not available)
1 large jalapeño pepper or several whole bird chiles, minced
.5 cup finely sliced fresh basil. Thai basil is ideal, but Italian basil will do.
.5 cups chopped scallions
Pictured here: Broccolini that I lightly blanched in the microwave. Don’t fully cook the broccolini (or other vegetables), as the hot pho broth will finish the cooking.
Many other vegetable ingredients work well with pho, such as finely diced zucchini, thinly-sliced mushrooms, sweet red or green pepper slivers, or shredded carrot. Finely slice the raw vegetables to cook lightly in the broth just as the soup is served.

Ingredients for pho bo soup.

Final serving:
Bring the broth up to a full rolling boil and then turn off the heat. Quickly place a serving of noodles in each serving bowl, and ladle the hot broth over the noodles. Add the raw beef slices and other ingredients and stir lightly. Eat immediately to keep the beef tender.