True art tries not to attract attention in order to be noticed.
– José Bergamín, Spanish writer and poet

A web page is not a page in a book. Your shoppers will not simply notice everything from left to right, up to down, in the order they appear. The depiction of each and every element (size and color), as well as their relation to those around it (spacing and the overall layout), will determine what gets seen in what order, not to mention their perceived value. That makes visual hierarchy, the structure of what gets noticed first, one of the most powerful tools in eCommerce website design and UX.

Influencing what your shoppers see influences their behavior, which in turn influences their buying decisions. That makes you more than an eCommerce designer, but also a salesperson. The major difference is that your sales techniques are a lot subtler, resembling Bergamín’s “true art” from the introductory quote.

Here we share the 7 best techniques for visual hierarchy in eCommerce design, or the 7 best ways to get noticed without attracting attention.

01. Contrasting Colors

For starters, individual colors themselves have natural attention-grabbing abilities. Dominant colors like red or black will attract more attention than more muted colors like white or beige. Right away, you can command the visual hierarchy by giving the most important elements like call to action buttons a strong color, and the least important elements like backgrounds a weak color.

But that’s a little too basic for a best practice, and often you’re limited to using the brand’s colors or a predecided scheme. To get the full effect out of color, you need to also consider how they’re paired our grouped together.

Colors that complement each other — such as different shades of the same color or the colors adjacent to each other on the color wheel — are aesthetically pleasing, but don’t attract attention. These work best for elements on the lower end of the visual hierarchy, for example, the text color of sizing details on top of the background color.

Pairs of colors on opposite ends of the color spectrum tend to bring out the best in each other. Red-green, orange-blue, yellow-purple, and all the variations in between, are ideal for getting noticed when placed next to each other, as we mentioned in an earlier article about call-to-action buttons. Elements you want seen, as a sale or discount, should be contrasted with whatever colors are nearby, especially the background.

Color Wheel

Source: Sessions College

Similarly, if you have a black background, bright and neon colors stand out well, as does white itself. Black backgrounds in general create a slightly edgier appearance, popular for fashion brands, and make it easier for brightly colored elements to get noticed.

If you have any questions about specifics, this interactive Color Calculator from Sessions College can help.

02. Play with Size

Size is the easiest way to manipulate visual hierarchy, but it’s also a bit unruly. The general rule of thumb is that the biggest elements get noticed first, but from there it’s a balancing act. If even a single element is too big, it overshadows the others and throws off the entire composition of the page.

For eCommerce website design, size is best used for images and text on the home page. Commonly landing pages are centered around a single, large, and dominating visuals, such as an image of a featured product, or bold text advertising a sale or promotion.

This is size used properly, since there’s no worthy competition for the shopper’s attention and the site wants one particular aspect highlighted over others. Other elements like the navigation menu are still large enough to be noticed, but only afterwards.

It goes without saying that less significant elements, such as legal disclaimers, should be the smallest elements on the screen.

For product pages, the product photo should take up the largest portion of the screen. The product photo is the most important part of a product page, but there’s more to it than that. A larger product image allows a more realistic view and closer zooms.

According to MDG Advertising, 67% of shoppers consider image quality “very important.” High-quality pictures reveal details like texture to give customers a better idea of what the product is like in real life. In that sense, devoting adequate space to product images directly correlates to increasing conversions.

03. Ample Negative Space

Also known as “white space” or “empty space,” negative space has unique visual properties and should be treated as an element on its own — not just the absence of other elements. The hard-and-fast rule for spacing is that, the more negative space surrounding an element, the more attention that element will attract.

Using negative space is a best practice even outside of visual hierarchy. It actually improves a page’s readability and has been proven to increase comprehension by 20%. This is directly applicable to product descriptions: give blocks of text wide enough margins, padding, and paragraph spacing to encourage shoppers to read and understand them.

As an attention grabbing tool, you often see calls-to-action embedded in generous amounts of negative space. This sets them apart from other elements and makes them more important. Moreover, if the shopper has already committed to buying in their mind, generous negative space shows them where to click at a glance, especially if combined with other techniques on this list. A speedy UX is a good UX.

Negative space can also be used as a countermeasure to balance out the entire screen layout. For example, instead of centering your homepage around an enormous central image and cramming the other elements around it, you can shrink the image slightly and leave a barrier of negative space around it. This improves the clarity and readability of the entire page, but doesn’t take away too much attention from the center image.

04. Establish Scanning Patterns

Human behavior can be so predictable at times that we even look at websites in the same ways. In fact, a Nielsen Norman Group study used eye-tracking to discover common scanning patterns of users browsing sites. These patterns can be encouraged by the general layout and the application of other techniques to form the backbone of a page’s visual hierarchy.

website heatmap reading pattern eyetracking
Source: Nielsen Norman Group

The two most popular are the F pattern and the Z pattern. Both have their advantages to traditional web pages, although they don’t work as well for eCommerce-specific pages likes product or checkout pages. (Keep in mind that these patterns are for cultures that read left-to-right.)

Both patterns begin the same way. The reader begins in the upper-left corner and first scans from left to right across the top. This explains why the brand logo is almost always in the upper-left corner; this icon is the single most important visual on a commercial site, and as a link back to the home page from any page, it anchors the site in an easy to find location. This also explains the popularity of the horizontal top navigation bar, another essential element to most sites.

At the upper-right corner, the patterns diverge.

In the F pattern, the user’s sight returns to the left side of the screen, only a “line” lower, then proceeds again to the right side of the screen. This pattern mimics typical reading behavior, and because of this works well with text-heavy pages, especially blogs.

wesbite-reading-pattern
Source: Tuts+

It can also be used with rows of images, especially useful for product category pages, where you want to display a multitude of product images in a way that’s easy to browse by the shopper. Typically, on the left side there’s a vertical navigation menu (in addition to the main horizontal menu at the top), the rows of product thumbnails filling the center.

Related posts:  The 5 Most Common Pricing Mistakes in eCommerce and Tactics to Avoid Them

One key best practice for the F pattern is to showcase secondary promotions on the right side. When the user reaches the end of a line or row, they pause momentarily before returning to the left side. This creates the perfect opportunity to entice them with an off-topic offer.

Alternatively, you can create a Z pattern, where the user’s sight drops down while returning to the left side. You do this by breaking up the next row with an enormous image: while the F pattern goes row-row-row, the Z patterns goes row-image-row-image-row.

z-reading-pattern
Source: Tuts+

The Z pattern is all too common for home pages, where the navigation menu makes up the top row, then a central image promotes the site’s main features, whether outstanding products or new promotions. The bottom row then concludes with secondary promotions or less-important products.

The main advantage of the Z pattern is that it highlights a single call to action at the bottom-right corner. This is the preferred layout of landing pages for single-service websites, but can be modified for use in standard eCommerce.


Source: Amazon

Amazon’s homepage actually uses both on top of each other. It starts with a Z pattern, the main horizontal navigation menu, logo, and an extra advertisement banner at the top. This accents the main central image, a carousel promoting whatever timely deals it needs to, before concluding with some customer account details on the bottom row. Notice, however, that they take full advantage of the bottom-right corner by placing a call to action for one of their promoted Amazon Prime TV shows.

amazon products page ux
Source: Amazon

Then, even before the fold, the F pattern takes over. Using rows of product thumbnails, divided by their category titles like “New for you,” Amazon showcases more products personalized to the specific customer, arranged in a way to optimize how they’re browsed. Again, Amazon takes advantage of each pattern’s unique benefit by placing  secondary promotion banners in the right side.

05. Set – then Break – a Rhythm

In conjunction with the previous technique about establishing scanning patterns, another key technique in visual hierarchy is to subsequently break those patterns.

Call it a scanning pattern, call it compositional flow, call it “rhythm”… Either way, if you establish a repetition in your layout organization, breaking that repetition will draw attention. That can be a powerful, if only single-use, weapon in outlining a visual hierarchy.

For example, if you have multiple rows of 5 product images, and then throw in a row of only 2 product images, that misfit row will stand out. You can use that deviant row to highlight whatever needs attention.

Breaking the rhythm is not just a way to get noticed, it’s also a best practice. Adhering too rigidly to any single pattern will become dull and monotonous, especially after rows and rows of an infinite scroll. Throwing a curveball every now and then keeps things visually interesting, and by extension keeps your shoppers interested.

06. Motion: An All-Purpose Wildcard

As a result of biology, the human eye is attracted to motion. That means, when all else fails, you can throw in a small but apparent animation to draw attention to any element you wish.

Motion is a bit of a wildcard that can trump all other techniques and be applied anywhere. Depending on the size and speed of the movement, your animation will be noticed sooner or later, unless its loop time is on the long side.

The downside is that, like size, the power is unwieldy. A little goes a long way. If your animation is too flashy, it will be the only thing your shopper sees, and will annoy them by distracting them from their shopping experience. Likewise, competing animations create a chaotic and dizzying appearance for a site,

These play-it-safe animations should be used sparingly, and with restraint.

Autoplaying videos also fall into this category, and if you have one on the page, it will most likely be the first place your customers look. That’s not to discourage video usage, but to be careful with it. Design pages around the video, which will innately draw the shopper in if they play automatically. If they don’t play automatically, such as on some product pages, then you can treat them as static visuals.

One emerging trend concerning motion is the increasingly frequent use of photo-video hybrids. Either videos with predominantly static elements, or photographs with occasional (sometimes creepy) movements, this type of visual gives you the best of both worlds — visually stimulating movement without eclipsing the rest of the site.

animated image
Source: BUNDY BUNDY

This type of movement works best for accenting a visual that’s already the center of attention, as with the BUNDY BUNDY example above. The technique itself makes for impressive visuals in general, and you avoid competition by extending that power whichever element already dominates the visual hierarchy. Essentially you’re just making the pages best visual even better.

07. Test Your Results with the Blurring Technique

Last is a technique for checking how well the other techniques work. It’s called the “Blurring Technique,” from the Irish UX designer and coder Lee Munroe. The concept behind the Blurring Technique is simple. Blurring the image you’re analyzing removes the fine details, but keeps the core features, so you can tell where your eyes go in a more simplified way.

This technique is particularly helpful to eCommerce designers who have been slaving away at visual hierarchy for too long, and suffer from overexposure. Working for extended periods of time on the same designs tends to leave you immune to the greater picture and unable to take a step back from your work. You can’t see the forest for the trees. The Blurring Technique sidesteps this pitfall, allowing you to see you work from a fresh perspective.

The process itself is simple enough:

  1. Take a screenshot of your site page or work area where you’re designing the page.
  2. Open the screenshot in Photoshop.
  3. Give the screenshot a 5 px Gaussian blur (Filter > Blur > Gaussian Blur).
  4. Look at the screenshot anew and take note of what stands out, what doesn’t, and how this lines up with your expectations.

(If you’re not familiar with Photoshop, you could just blur your eyes. The Photoshop method works because it’s more precise, but obviously there’s other options.)

lemonstand-homepage

lemonstand-homepage-blurred

Source: LemonStand

Where do your eyes go first? What do they miss?

For our LemonStand example, we’re pleased that our yellow call to action stands out. Even though the text isn’t legible, our eyes are drawn to the page header, which then leads attention to the body text below. Even our “Try It Free” call to action in the upper-right corner stands out slightly from the other menu items, as we hoped.

The Blurring Technique is an great technique for eCommerce website design, and all design for that matter. It’s the ultimate progress report for visual hierarchy, revealing the barebone visuals without any misleading information.

Takeaway

Visuals aren’t just an artistic decoration when it comes to eCommerce website design. They’re a practical, load-bearing component that can determine the success or failure of the overall usability. UX isn’t just about customer satisfaction, it’s also about usability. Use your visual hierarchy to communicate both the goals of your business and the functionality of the site itself.

Do you have any questions about visual hierarchy? Care to share your results from the techniques above? Leave your thoughts in the comments section now.