The Masterpiece Model
The Masterpiece Model
Last updated November 1, 2021

Usability

Usability is at the center of the model for good reason; bad usability can destroy any of the other four elements in an instant. Thankfully, just three simple factors form the core of good usability: navigation, speed, and interaction. 

Navigation

At any given time, a visitor needs to know which page they’re on. Visitors should also be able to easily find the path to their destination from any page on the website. 

Navigation doesn’t just come in the form of what we usually know as the navigation bar.

Scrolling a page is a form of navigation. Scroll animations, when done right, can draw a visitor’s eye to important areas of the page. They can be entertaining and add depth to a story.

Like many valuable things, they can also be needlessly overdone. The concept of scrolljacking is a reminder that any time you’re going against user expectations, it’s likely going to create a bad experience. 

Navigational elements aren’t an area to get cute. Like getting overly creative with a vehicle’s steering wheel, messing with your visitor’s sense of orientation will only lead to bad results. 

Using a familiar base structure and ensuring that all directional cues are easily noticed is vital. Getting visitors further along your buyer’s journey should always be your goal; navigation is what enables this more than any other factor. 

Screenshot of The Sill's website navigation menu
NAVIGATION // The Sill uses a mega menu to make it easier to explore their growing catalog of products. The current page (in this case, Live Plants) is underlined, indicating where a visitor is located on the site.

Speed

There are plenty of eye-opening statistics about website speed. Some companies are able to increase their revenue by millions of dollars with a speed increase of a few milliseconds. To get to this point, you’d need to be making tens of millions of dollars in sales every hour. 

Even if you’re not quite pulling those numbers yet, your page loading speed can impact your bottom line. Speed is one of the factors Google uses when ranking websites. If that isn’t enough to sway you, each second in loading speed decreases conversions by 7%. 

“Site speed has a tremendous effect on bounce rates. In fact, if your site takes just 3 seconds to load, the probability of bouncing increases by 32%. Make this 5 seconds and it’s a whopping 90%. In other words, if your site is sluggish, even the best offers and deals won’t stop people from leaving.”

- Pravin Singh for WebAnalyticsHub.com

Saving your visitors’ time is also something that just creates a good experience.

It’s extremely noticeable when someone hesitates after you ask them a question. You feel like they’re not paying attention, don’t care, or are formulating an answer that isn’t truthful. It just doesn’t feel right.

It’s similar when we interact with the web; we begin to lose trust, feel like we aren’t valued, and attribute this annoyance with the brand that’s delivered it to us. 

Interaction

How a user interacts with your interface—and how it responds—is a major factor in usability. This goes beyond customization and personalization to the base level of human-computer interaction.

When a user clicks a button, transitions can make the experience feel more streamlined.

Hover effects can help users understand what can be clicked; they can also create deeper experiences without adding more elements to the page. Interaction is all about the details. 

Screenshot of Trade Coffee's filter capabilities
CUSTOMIZATION // Trade Coffee uses a wide selection of filter categories to allow visitors to find a coffee that fits exactly what they desire.

Customization

Filters, preferences, and sorting capabilities are just a few examples of customization available on most websites. Allowing your visitors to customize their experience gives them control and helps them find exactly what they’re looking for in a way that’s comfortable to them.

In theory, customization should make the experience more streamlined, leading to a deeper customer journey and more sales. It doesn’t always work this way, but you can never go wrong giving your potential customers more control rather than forcing them to be beholden to your design decisions and categorization. 

Screenshot of "You may also like" section on Huckberry website
PERSONALIZATION // Huckberry uses one of the more common forms of personalization to guide users to additional products. These recommendations are based on what's currently being viewed as well as browsing history.

Personalization

More about how your actions impact the experience of the visitor, personalization takes a variety of forms, that you pre-program, to provide the visitor with a more tailored experience. Serving up product recommendations based on past activity is a good example of this. The user has no way of directly configuring this, so it’s not a customization. 

Personalization, when done without compromising the privacy of your visitors, is a highly effective way to show that you have your customers’ best interests at heart. Helping your visitors find something new that will delight them is mutually beneficial. 

Usability is Central

Having success in any of the other four elements of the Masterpiece Model requires sound usability throughout your experience. All three usability factors are a platform for relevance, trust, engagement, and assurance. Proper navigation, optimal page speed, and intuitive interactions are the framework on which a modern website is based. Not maintaining at least a baseline level of usability can cause visitors to view your site as outdated or worse—frustrating. 

Use the guidelines below to optimize your eCommerce store’s usability:

Usability Guidelines:

20

Don't use full screen pop-ups.

Interrupting your visitor as soon as they arrive is a poor experience, even if you're offering them a discount.

◼︎Details ->
21

Use your navigation to show your product range.

A nav item called "shop" or "products" is a missed opportunity. Instead, show top-level product categories.

◼︎Details ->
22

Don't get too creative with your navigation.

Keep your navigation at the top of the page, with your logo & nav items to the left or center and your cart to the right.

◼︎Details ->
23

Use hierarchy to channel your visitor's focus.

Size corresponds with importance in visual design. Use this to help visitors focus on key elements.

◼︎Details ->
24

Use fonts that are easy to read.

Start with a legible typeface, then size and space it appropriately throughout your site.

◼︎Details ->
25

Always put your cart in the top right of the page.

Core customer journey elements, like your cart, should be where visitors expect them to be.

◼︎Details ->
26

Use a mega menu (for large inventories).

Allowing visitors to easily find what they want, without visiting multiple pages, is an ideal experience.

◼︎Details ->
27

Make your CTAs consistent & noticeable.

Calls-to-action should contrast with the rest of your page and should keep the same style throughout.

◼︎Details ->
28

Never have more than one primary CTA per section.

If a visitor can choose between two buttons in one section, they should be visually different.

◼︎Details ->
29

Use descriptive CTAs.

Be detailed about where the button will take the visitor. "Shop now" can always be more specific.

◼︎Details ->
30

Clearly distinguish your sections.

Use spacing and headings to keep your sections visually distinct throughout your website.

◼︎Details ->
31

Provide enough info on your product cards.

Product cards should show style variations & pricing, at a minimum.

◼︎Details ->
32

Only use photos that accurately represent your products.

Use real, high-quality photos of your products; not photoshopped or rendered images.

◼︎Details ->
33

Use filters on category pages.

If a category has a lot of products, use filters to help visitors narrow down the selection.

◼︎Details ->
34

Use sub-menus on collection pages.

On "All Products" (and similar) pages, use sub-menus to help visitors select the category they want.

◼︎Details ->
35

Always indicate the page being viewed.

No matter where a visitor is on your site, the design should tell them where they are.

◼︎Details ->
36

Use the typical 'top of product page' structure.

Product image(s) to the left and name, price, description, variation selectors, and call-to-action(s) to the right.

◼︎Details ->
37

Make it easy to see all product photos.

Whether you use thumbnails or show a gallery on scroll, make it easy for visitors to cycle through your product photos.

◼︎Details ->
38

Keep product imagery consistent.

Visually consistent product photos help visitors easily understand the differences between products.

◼︎Details ->
39

Use tags to highlight product attributes.

Highlight product features—like sale items or featured collections—using small visual elements on product cards and pages.

◼︎Details ->
40

Make it easy to select product variables.

Size, color, quantity, and other product options should be easy to select (and change).

◼︎Details ->
41

Make it easy to understand purchase type.

If you have the option of one-time purchase or subscription, make each option clearly different from the other.

◼︎Details ->
42

Always point visitors to their next action.

Don't assume the visitor knows what they should do next. Use CTAs to guide shoppers through the journey.

◼︎Details ->
43

Design for accessibility.

Visitors with visual impairments or low vision (nearly 10% of the population) should be able to easily use your website.

◼︎Details ->
44

Allow visitors to control sliders.

Sliders (or carousels) that automatically change take control away from your visitors.

◼︎Details ->
45

Show recently viewed products.

Reminding users of their viewing history helps them orient to your site and compare products.

◼︎Details ->