The Layer-Cake Pattern of Website Scanning
If you’ve regularly read my blog, you know that one of my favorite sources of new information and research is NN/g (Nielsen Norman Group). NN/g is hyper-focused on user experience, which runs counter to almost every way an organization looks at its website.
NN/g research using eye-tracking and gaze plot analysis reveals that people are lazy: They do not read every word of a website (or any other digital communication such as email). People want to find what they want quickly and easily. As NN/g says, “People are naturally efficient and attempt to put in the least possible work for achieving their goals.”
Website layouts must visually organize the information so users can identify “essential” information. The layer-cake scanning pattern is created by people stopping mostly on headlines and subheads. So heat maps show stopping at a headline (the frosting), only occasional stopping on body copy (the cake), stopping on the subhead (frosting) and little stopping at attached body copy (cake). The layer-cake method is how people scan a page.
How to Do Layer-Cake Design
The problem arises when type sizes, colors or fonts do not make a clear delineated pattern of headline and subhead mapping. Here are a few ideas on accomplishing this for mobile and desktop websites:
- Mark subheads so they clearly stand out
- Use a “consistent, predictable” format
- Clearly show which body copy goes with a headline
- Prioritize content ordering on website
- Chunk content blocks
The layer-cake approach is much more efficient than the F-pattern. UX is what web design is all about.