How to Design Mobile Headers to Better Guide Customers

When people start browsing your company’s store on their phone or other mobile device, they look to the page headers to help them decide where to go next. Mobile headers are small, but they can pack a lot of information in little space. These headers often contain a search bar, menu items, navigation features, a promotional message, and more.

As we demonstrate in this video, retailers need to make important choices about how to lay-out all the different components in a small mobile header. If the information is too cluttered, customers may decide it’s too hard to look any further. At the same time, merchants want to convey enough to encourage people to keep exploring the site.

Reviewing these various approaches to mobile headers will help your company decide on the best strategy for your store.

Transcript: Video Review: Designing Mobile Headers that Guide Customers

Hi there. I’m Lauren. I’m a Conversion Specialist here at Command C, and today I’m going to be taking you through mobile headers. So, let’s say you have a desktop experience that looks something like this. Now, how do you show that on mobile? Well, you could try something like this. Perhaps you want to test something a little bit different on your mobile site. Well, you could show your categories like this.

In this video, you’re going to learn what elements are necessary for a header and which can be tested. And you’ll see quite a few examples from other stores on how you can get creative with your mobile header experience.

Here we can see a couple of different options. We have REI, we have Alo Yoga and we have Bombas. So, really depending on how much your audience searches, what type of products you’re offering, determines if you need to showcase a search bar.

Retailers Take Different Approaches for the Search Bar on Mobile

So with REI, they have tons and tons of products. It’s highly likely that a lot of people are starting shopping with the search bar. They make that nice and prominent here.

For Alo Yoga, they do something interesting. They actually combine the menu icon here with the search bar, so visitors know to click if they want the menu or the search bar. A lot of customers probably aren’t searching, they’re probably just browsing through categories, which is likely why they did it like this.

And then we have Bombas – they do kind of a combination. Rather than showing the search bar all the time, if you click the icon, then the search bar appears and it takes over the whole header there.

Site Navigation in the Mobile Header Also Varies A Lot

So, next we have navigation. As you can see from these examples, tons of different things you can test out and try. There’s things like showing the search bar in your navigation or near a menu. Or you can show icons like Joybird and Ratio does. You can split up content by main category.

For Everlane, they have women and men. You can also showcase other types of categories. Joybird has room ideas, they have materials, and if you scroll down, you can get other ways to search or to browse. Everlane has some main categories and you can scroll down and see those.

And then Ratio keeps it pretty simple. They only have a couple of products, so they just show those products in the menu here.

Communicating Unique Selling Points in a Mobile Header

Then we have a USP bar, so that’s where you’re showcasing your unique selling proposition. So, stuff like free shipping, if you have a guarantee, if you’re made in the US, or a specific country.

Typically, sites are showing those at the top here, and there’s a couple of different things you can test. You can test whether that bar should be sticky. Should it be prominent? Should it really be standing out with a different color? Do you want to show all of your items? So, kind of stacked like this one for Disco, or do you want to just show one item like Burrow? Or a kind of a combination, like Apartment 2B where they have an automatic slider that shows all of their USP’s.

Pay Special Attention to Organizing Menu Items

And lastly, we have menu items. If you don’t want to hide all of your navigation items behind menu links like this, you could do something like Bonobos is doing. They’re showcasing their navigation in a slider, and then also using these nice large thumbnails, so it’s easy for people to click.

So for Glossier, they do something similar. They have the slider here, so visitors don’t have to go into the menu. They can easily click one of these top categories.

So, those are a few things to pay attention to for mobile headers. Definitely not always the case that you can really just shrink down desktop. And there’s plenty of different things to test. I mean, you can see here with Bonobos and Glossier, Glossier actually did shrink it down. Bonobos went completely different.

So, lots of different things to do, really have to consider what your customers want to do. Do they want to search? Do they want to look at navigation? And how you can help facilitate that.