Use visual hierarchy to improve UX

Use visual hierarchy to improve UX

1. Position your most important information, such as your logo or your value proposition, in the top left.

When users land on your site, their eye path starts from the upper-left corner and moves down and right from there.

2. Use a Z pattern to place elements related to the stages of your sales funnel for visually-oriented pages.

Place your signup or sign-in options at the top-right corner of the page, products at the middle, and a CTA at the bottom right. For more text-heavy pages such as blog posts or product listings, scanning behavior happens in an F pattern. Use tools for eye tracking and recording user behavior, heat maps, click maps, scroll maps, and funnel visualizations to discover your site’s particular viewing patterns.

3. Experiment with white space to make visitors notice important sections of the website and to increase comprehension.

Use white space to emphasize headlines, images, CTA buttons, or links to valuable content. You will need to find a smooth balance of content and white space for readability, usability, and organization. When splitting the flow of a product page, you can use whitespace to clearly separate an informational Learn More pathway from a transactional Buy pathway.

4. Use repeating components like identically sized rectangles with other products, below a product image.

This provides visual cues for visitors to follow the content and understand how everything fits together.

5. Use an animation, like an element shifting subtly in the middle of a text block, to draw attention to something you want to highlight.

Be careful with overly flashy animations and auto-playing videos. They can distract shoppers from the shopping experience. You can test using videos of primarily static elements or photographs with occasional, repetitive movement of a single element to break the current flow of a website.