4

We know that English-speaking users read from left to right, top to bottom.

We also know that on a web page, users scan using an F pattern (https://www.nngroup.com/articles/f-shaped-pattern-reading-web-content/).

If I have a grid of application icons, at what grid dimensions (# rows, # columns) would a user change his scanning pattern from strictly left-to-right/top-to-bottom to a F pattern if he was searching for something specific?

I'm asking to help inform how I layout some application icons (and their associated text underneath) assuming I know which applications the user would most likely be seeking. In this case, the grid dimensions change when a new application is added to the user's account, which doesn't happen often. I'll also consider muscle memory/position so it could be that designing this grid for a F scan won't make sense anyway, but I was still curious about the scanning behaviour.

Here are some grid examples to reference in the discussion, but feel free to make up your own:

Grid A: 3 x 2

Grid B: 5 x 4

Grid C: 10 x 10+

4

Ok, before anything: not only F-shape isn't the only possible pattern (it's just a common one, see more at 3 Design Layouts: Gutenberg Diagram, Z-Pattern, And F-Pattern ), but right now there's quite some discussion about whether does it apply nowadays or not.

This being said, any pattern will change to top to bottom (or Gutenberg if you like) on mobile due to space restrictions and element's stacking over each other. However, on big resolution phones the desktop patterns such as F-pattern seems to still apply, although the horizontal scanning is obviously shorter. To understand what I mean, see Reading and Estimating Gaze on Smart Phones , where you'll be able to read about this more in depth and see heatmaps.

However, as I said, there's a lot of controversy about F-pattern. If you're interested in very in-depth research, numbers and heat maps, take a look to Towards Better Measurement of Attention and Satisfaction in Mobile Search. Although the study is arguable as well since it considers only one type of page, you'll be quite surprised at the results: if anything, the only pattern you can recognize is Gutenberg, F and Z patterns are gone for good in this excellent study.

If you want more about F-pattern's nowaday's dubious future, take a look to F-Patterns No More: How People View Google & Bing Search Results from which I took the following images:

enter image description here

enter image description here

Please take note to dates, because it's not coincidence that F-pattern was clearly distinguishable 10 years ago and now is hard to find

In short: all this long prelude is to help me get to your answer since you're making some assumptions that may not be correct. While barring more proof and research, F-pattern may or may not apply anymore, the answer to your question based on all the documentation above is: desktop users will start with a pattern (any pattern, no matter which one for the purposes of the answer) while mobile users will keep this pattern on big screen mobiles and change to a Gutenberg pattern at 2 columns grid (if available) or simply go to a stack view. This will entirely depend on your design and the focal points

  • Thanks, @Devin! Firstly, I should have specified that my app is a web application, viewed strictly on a typical monitor. However, you do point out how the scanning patterns are changing across all devices, and I will certainly look into this new information. Does that mean you feel that we can't be certain how a desktop user will scan a grid these days? – Marnie A. Jul 29 '16 at 15:05
  • @msa I think there's a paradigm shift and you'll probably need to make your own tests to draw an accurate conclusion for your specific case. However, i'd bet you will probably find a stacked model will work fine for you – Devin Aug 14 '16 at 22:52

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.