The location of an interface element plays a crucial role in how much attention it’ll get. Users scan certain screen areas more than others. If you were to use an eye-tracking device to track their eye fixations, you would notice a common scanning pattern.
Users of left-to-right languages tend to fixate in the top left screen area the most. Their fixations gradually trickle down from the top left corner to the bottom right corner as they scan. Users of right-to-left languages experience a mirror effect of this diagonal pattern.
An optimal layout for left-to-right users places primary elements near the top left. This corner won’t only get more fixations, but those fixations will last longer. A higher fixation count and duration translates to greater attention. In contrast, elements near the bottom right corner will receive fewer and shorter fixations. As such, that’s where secondary elements should go.
Knowing that a diagonal hierarchy exists isn’t enough. It doesn’t help you maximize the spatial efficiency of your screen. It would help if you had precise measurements of pixel areas that correspond with the diagonal hierarchy. Then you would know how much space to give your elements for an optimal layout.
It’s for this reason that you should use the diagonal hierarchy grid. The grid will allow you to optimize the layout of any screen size. You’ll be able to visualize all the high, low, and medium attention areas in pixels. From there, you’ll know exactly where to place your elements.
Subscribe to read the rest
Become a paying subscriber of UX Movement Newsletter to access this article and other subscriber-only content.
Book
Affiliate
