Wrapping

Joe Julian Updated by Joe Julian

Wrapping 🔄

Why don't we like big horizontal groups?

Simply put, the increased cognitive load on users trying to information forage when fields wrap.

Here's an animation to show how big horizontal groups wrap for different screen resolutions. We'd consider this to be poorly designed based on our accessibility principles because in order to read the data in a coherent way at anything other than the thinnest resolution your eyes need to follow a Z path.

An animation to show field wrapping in groups

And here's an animation to show how sections get automatically reordered for different screen resolutions. This time the vertical order of each section is maintained, which means a users eyes can find a topic first then follow a straight path down. This makes it easier for users to forage for data on the page regardless of the resolution.

An animation to show sections resizing for different screen resolutions
We'd suggest you keep your groups small to avoid adding unnecessary wrapping on your pages

Was this article useful?

Thinking of the fold

Page structure and information foraging

Contact