F-Scanning and Why Icons Come First

We start scanning a web page horizontally, then

down

a bit,

horizontally again for a shorter distance,

and finally

just the

left side

of the page

vertically.

The way we scan resembles the letter ‘F’. The Nielsen Norman Group coined the term F-shaped scanning after conducting extensive eye-tracking research. F standing for Fast.

“Good design can prevent F-shape scanning.” — Kara pernice

eye-tracking heat map

What is F-shaped scanning?

F-shaped scanning is a natural behavior effective in minimizing interaction costs, the time a user spends on a web page searching for important information.

How can we help users find important information easily?

Icon By Brandon Lewis

Iconography!

Icons can save users the cost of scanning, by signifying an action Icons can make for a smoother scanning and enhanced experience.

Icons are like bullet points as they:

• Draw attention to important information.
• Improve ease of information scanning.
• Effectively and efficiently broadcast information.

Having icons before text is effective, however icons after text can be great status indicators and emphasize CTA intents.

(Image: UX Movement) (View large version)

In conclusion

• There are natural patterns we use to find important information. F-Scanning being the biggest.
• To reduce mental load on the user we can use icons.
• Icons are great to signify actions.
• Icons in front of text are effective.

For feedback and questions, feel free to reach out to me via email, twitter, or smoke signals.

Further readings

Where to Place Icons Next to Button Labels

F-Shaped Pattern of Reading on the Web: Misunderstood, But Still Relevant (Even on Mobile)

F-Shaped Pattern for Reading Content

Icons As Part Of A Great User Experience