SOME "LIGHT" READING

UI Best Practices

March 25, 2019

Practices your website should not do without

When it comes to hooking a new customer for your e-commerce site, or noticing somebody’s new haircut, the same rule applies: you only get one chance. Your product can have plenty of substance, but you’re sunk if your site lacks style. Is this shallow? Maybe, but this is the world of online shopping, where appearance means everything, especially for that all- important first impression.

So how do you make browsers fall in love with your store at first sight? Is it the homepage? While your homepage is a big part of that, let’s think a little bit smaller than that. What’s the first thing that you look at when you visit a new website? On most sites, it’s the header, that little bar at the very top of the screen. The header is to a website the way a rug is to a physical room; it may not be the center of attention, but it really ties the room together. What makes the header so influential? Nearly every webpage is formatted like a page in a book, and we’ve all been taught from a young age to start at the upper left corner, so that’s where your eye goes instantly, so it almost certainly will be the very first thing a user looks at. After that, they usually scan the entire page, but they don’t take it all in at once. Research has shown that there are three common patterns that people’s eyes follow when scanning a website.

Patterns

One is Z-Pattern, where they start at the upper left, then move to the upper right, before going down to bottom left, then to bottom right.

z-pattern web design

There is also Zig-Zag Pattern, which is similar to Z, but instead flicks back and forth from one side to the other until they reach the bottom.

zig-zag-pattern web design

Finally, there is F-Pattern. Readers who read in an F-Pattern follow the first line of horizontal movement, then move downwards and scan another line of horizontal movement, before finally scanning all the way to the bottom of the page. If you’ve ever read the first few lines of a newspaper article before skipping to the end, chances are that you do this. What do these patterns have to do with your header? Notice how all three of them start with reading the very first line before they head downwards? That means you know where most of your users will be looking first, which means you can define a user’s first impression in that first line.

If your header is strong, welcoming, and friendly, then you’ve already done most of the work of getting a user’s attention. In the same way, a badly formatted header can spoil somebody’s entire perception of your site, even if the rest of your page is pleasant. Your header is the first thing a user sees, but it can be much more than a welcome sign for your customers. For nearly every sort of website out there, the header serves as a navigation bar as well. If you choose to do this, then having an aesthetically pleasing header is especially important because your customers will have to revisit it time and again in order to navigate your site.


Which destinations you actually include in the header is up to you and your priorities, but there are a few things that you should not do without. A Call-To-Action, or CTA is an essential part of any header. What form this CTA takes can vary. If you have an iconic logo or branding, that alone might be enough. It serves as a flag, planted right in full view, proclaiming who you are to any potential user. This approach might not work so well if you aren’t well-established yet. For most e-commerce stores, the CTA is better served by including some buzzwords about your product, so that users can instantly know what to expect when they make a purchase. After reading that, you can include a link to special deals in the next place they’re likely to look, emphasizing that this you have the best goods for the best price.

Call To Action Web Header

One pitfall to watch out for is making your header too busy, especially if it’s also your navbar. It’s tempting to put a link to every page on your site up there, so that your users will see just how much content you have, and be able to reach any of it at any time. While it can be convenient, a crowded header muddles your message, and can actually make it more difficult for the user to find what they’re looking for. Take a step back, and figure out which pages are most essential to your customers. If you have many different categories of product in your catalog, try using a drop down menu in place of yet another button on the navbar.

Another tool that must be used wisely is making your header “sticky”, meaning having it’s position in the browser window remain constant even when the customer scrolls down. This is very useful if your pages are very tall, and you don’t want to make people have to scroll up for minutes just to visit a different section of your site. On some pages, however, this can read as intrusive or pretentious. It can also look very ugly if you’re not careful when it is coded. Most modern webpage making services, like Wix and Squarespace, have tools that do it for you, but if you’re making it yourself then you need to be cautious.

Whether your header is a CTA, a navigation bar, or even just decorative, it’s not an aspect of your website that you want to ignore. Luckily for you, designing a good header is actually quite easy. A few simple tweaks can take it from something plain and boring to something truly eye-catching. Consider adding a beautiful image to the background, one related to your product. A professional and pleasing picture of your products, or even more than one picture, can help fortify your branding and make your header even more pleasing. You can also experiment with typography and fonts; there are many available for free online.

However you want to style your header, make sure that it serves the interests of your e-commerce site. Your header is the first thing your users will see, and it can invite new customers in, or drive them away. If you give it the same care, attention, and thought that you give the rest of your website, your business will see the difference.

Return to blog