Creating the proper header hierarchy

Re-organizing your content flow can have a tremendous impact on telling a clear, concise story.

Here’s 4 tips for dialing in your header hierarchy: 

Suggestion 1: When it comes to your mobile experience, every pixel counts. Tighten up your padding and line spacing so the users gets the full picture as soon as you welcome them!

Suggestion 2: If you are going to introduce a product, make sure the user can see it. Simply describing a product is pointless if the user can’t see it. One way to save vertical space is to shrink your image size and surface 3-5 rather than 1. This paints a clear product picture and allows for some motion in the header (put them on an automatic ticker side-to-side. 

Suggestion 3: Make user engagement easy by ensuring your primary action is full width on mobile, and sits at the bottom of the fold. If action buttons are short and in the middle, or too far to the left/right, they can be difficult to reach on mobile devices. It should also take users to the actual product you’re featuring.

Suggestion 4: Add a secondary action to shop all of your products, rather than only just a single product. This gives users the opportunity to explore your catalogue easily if they aren’t excited about the featured product.

Want us to look at your website? Grab a FREE Oddit or book a call to chat with our team!