In fact, wireframes are supposed to be boring. If you find them stimulating, your designer has probably gone too far, as UX veteran Darren Hood explains.

Nevertheless, a wireframe is a critical part of the design or redesign process. Think of it like a prototype of your site or app, stark and bare-bones but easy to manipulate and change until we have the perfect blueprint.

So, when a designer shows you a wireframe of your project, it’s important to review it carefully and provide actionable feedback that moves the project toward your goals.

Admittedly, that’s harder than it sounds, which is why we’ve put together a simple process to help our clients understand the wireframes we provide, how the wireframes serve their mission, and how to give great feedback.

What is a Wireframe?

We dive deeper into this subject in our guide on wireframe design, but here’s a quick primer.

A wireframe is an illustration of a website page or element. It’s also used for app screens. Wireframes are simple visualizations, usually without color, typography, or graphics.

Wireframes are early blueprints that designers use to conceptually “build” the site or app in order to validate user needs and business goals. This is where we establish the form and function of a site or app before worrying about the aesthetics.

We consider wireframes to be low-fidelity or mid-fidelity prototypes. A high-fidelity prototype would be a full-color mockup that depicts the site/app in its final form.

Some stakeholders like to skip the wireframing stage of the design process, but it’s absolutely critical. Reviewing and iterating on a wireframe isn’t an extra step. It can actually save time and resources before moving on to a high-fidelity prototype like a full-color mockup.

The Wireframe Review Process

Now that you have the wireframe from your design team, your job is to review it and provide feedback. In our experience, this process should involve a few other documents.

Strategy Brief

First, you’ll need the original strategy brief. This document includes the foundational information your designers need to build your website or app.

Most importantly, it should include your Minimum Experience Standards, which refer to the non-negotiable qualities that must be present in your site/app.

Here’s a blank version of the document we use at The Good.

And here is what that looks like filled out:

Design Brief

Along with your wireframe, the designer should also include a design brief on the current iteration. This document outlines what changed and why. Here’s an example of the document we use.

The “Key Changes” section documents what changed. This is important because the updates aren’t always easy to spot. The “Rationale” explains why those changes occurred. In many cases, the rationale for a change is related to your Minimum Experience Standards.

(If you’re using a collaborative design tool, this brief may not be necessary. You can simply comment on the changes with the rationale for it.)

The designer will also include questions, if any. This is often where hidden constraints pop up that no one thought about previously.

Feedback Brief

Once you’ve reviewed the strategy and design brief and explored the wireframe, your job is to provide some feedback on the current iteration. Here is the document we ask our clients to complete.

Primarily, we’re looking to learn whether the proposed wireframe is feasible (will it actually work on the client’s existing system), whether it meets our Minimum Experience Standards, and if the client has any questions about it.

You’ll notice we are not looking for feedback on visual design. That is deliberately absent from this document because it comes later in the process when we start looking at higher-fidelity mockups.

We don’t necessarily want our clients to write their responses in this document, but we find the framework helps them organize their thoughts, which we will then discuss on a call.

6 Tips for Reviewing Wireframe Designs

Now that you understand the wireframe review process let’s cover some tips to make it a positive experience for your team and the design team.

1. Reset Expectations on Wireframes

Your first step is to manage your expectations. A wireframe is not a high-fidelity mockup. It won’t look like your website or app. It won’t have pretty colors or graphics. Those elements are an important part of your brand but come later.

Furthermore, a static wireframe isn’t interactive, so you’ll have to use your imagination a bit. If an element has multiple states (like an accordion tab that expands), your designer should show both states.

Finally, keep in mind that while this step may feel like unnecessary planning, it actually saves time and money. Building your site/app is expensive and time-consuming, so it’s best to only do it once and properly, which comes from careful planning.

2. Realign Your Project Goals

The wireframe review is a good time to review your project goals: the Minimum Experience Standards. You’ll find these in the initial strategy document.

As you review the wireframe, ask yourself if each page, transition, form, and other elements serve your goals. Does the wireframe represent an experience that meets your user needs and business objectives?

3. Review Functionality and User Flow

When you review wireframes, your job is to focus on form and functionality. While color, typography, and fancy animations can affect the user experience, nothing is as impactful as the site/app’s functionality, so that’s what we settle on first.

Here are some questions to ask yourself as you explore the wireframe.

• Does the site/app have all of the necessary elements?
• Is it structured in a meaningful way for your users?
• Will it function as your users expect?
• Is there a reasonable path through the site/app (the flow)?
• Have we introduced any roadblocks that would cause friction?

Your wireframe document should indicate how pages are connected. If you don’t understand where a link or button leads, make sure to ask the design team.

4. Consider Constraints and Feasibility

It’s likely that the designer included elements or flows that you haven’t discussed yet, so some of the wireframe elements may not be feasible. Your job is to identify these constraints and educate the designer so they can provide an alternative.

For instance, suppose your wireframe includes a content block that’s meant to house a specific piece of product copy, but your content management system (CMS) doesn’t have this bit of text. This means you would have to task a copywriter to generate something for every product, but this may not be feasible if you have thousands of products.

In the case of a past client, their CMS required shoppers to choose a product size before they could choose a color. The product configurer had to be adjusted so this was obvious to users.

The challenge here is that only you – and your team – understand your constraints. The designer often doesn’t have a material understanding of your CMS, internal systems, staffing, and merchandising abilities.

Fortunately, there’s always something we can do to manage constraints, but it’s important that we know about them as early as possible.

5. Provide Constructive Feedback

Non-creatives tend to struggle with providing constructive feedback. Comments like, “It doesn’t feel right,” “There’s something wrong,” or “I just don’t like” are unhelpful. They are neither specific about the problem nor suggestive of a solution.

We don’t blame non-creatives, of course. Providing good feedback is hard, especially when you don’t have a feel for what makes creative work “good.”

Remember that at the wireframe stage, we aren’t worried about colors, typography, imagery, or specific UI elements. We focus on the form, and so should your feedback.

We need feedback on how the wireframe addresses the specific goals of the project. Review the Minimum Experience Standards that were defined earlier in the project. If the design doesn’t meet those standards, we need to know why.

What does good feedback look like? A great example is a past client that wanted to prioritize letting shoppers customize their products.

The initial design included a standard color selector, but the client felt that using the simple menu didn’t feel like customization. It felt like buying any T-shirt on Amazon. We replaced it with a large row of selectable color swatches, each labeled with its name. This educated shoppers about their color choices and made the experience more interactive.

It’s perfectly fine if you don’t have the right vocabulary to offer great feedback. We (and any designer you work with) can walk you through it as long as your comments are as descriptive and actionable as possible.

6. Identify Open Questions and Next Steps

As you review your wireframes, you’ll undoubtedly have some questions. That’s great! It’s important to pass them along to the design team for two reasons:

1. To help you gain a better understanding of the design. This improves your future feedback so we can all iterate faster.
2. To pass hidden feedback to the designer. There are often tidbits of information that the designer can glean from your questions. For instance, if you were to ask, “What kinds of products will fill this ‘People Also Bought’ section?”, it might prompt the designer to ask if your CMS is capable of such a component.

It’s also a good idea to document your own next steps. What action items will you take away from the review? This way, you and the design team are absolutely clear on what you will provide. Your next steps might include;

• Consult with a developer about the feasibility of an element.
• Instruct copywriters to provide certain bits of text.
• Identify a solution to a particular constraint.
• Verify an element is legally/regulatorily compliant.
• Get other stakeholders to sign off the wireframe.

Avoid Unnecessary Development Costs with Wireframes

We recognize that to some, wireframes are a less exciting part of the website/app design or redesign process. They don’t always feel like a real interface, so it’s hard to treat them as such.

But just like we draft blueprints before erecting skyscrapers, we must plan the form of our sites and apps before writing code. Iterating at the wireframe stage (where changes are quick and easy) saves time and resources you would spend updating a high-fidelity mockup or a live site.

At The Good, we try to make this process simple using the three briefs outlined above. We find that they help stakeholders understand the wireframes we present and focus their feedback in a way that helps us iterate on the perfect design for their needs.

If you need help designing a new digital property or redesigning an existing one, contact us right away.

The post How Do I Actually Review a Wireframe? appeared first on The Good.

Analytics data, user interviews, and surveys are helpful in their own ways, but there is powerful insight in observing people use the site or app.

This gives you a clear, comprehensive, and unbiased view of their experience.

How do you get this valuable view? With a tool like Hotjar.

Hotjar is one of our favorite research tools. It’s a staple of our workflow and a key way we develop insights to optimize our clients’ digital experiences.

Sometimes, new clients will ask us to use their preferred tool, but we usually resist. That’s how confident we are in Hotjar’s value. Right now, it’s the best heat mapping software on the market for professional researchers.

We’d like to take a moment to explain what makes Hotjar so great and how it helps us create better experiences for our clients. We’ll also address a common criticism of Hotjar’s platform.

What is Hotjar?

Hotjar is an analytics tool that helps digital brands understand how users interact with their websites. It provides insights into user behavior through visual representations so you can identify areas for improvement and enhance the overall user experience.

Unlike traditional analytics tools that offer simple numerical data, Hotjar provides visual feedback through heatmaps, session recordings, surveys, user interviews, and feedback polls.

These tools let you see exactly how users navigate your site, where they click, and how far they scroll. This information helps you make data-driven decisions to optimize your website, which ultimately leads to a better digital experience for everyone (not to mention higher conversion rates and increased revenue for you).

What are Heatmaps, Scroll Maps, and Click Maps?

Before we dig into why Hotjar is the best heatmap software, let’s get an understanding of the tool’s primary value.

If you look at analytical data, it can seem like conversions just happen on their own. But in reality, there are dozens of little variables that affect how and when your visitors decide to take action.

For instance, a visitor might read some content, explore some images, or watch a video on the page before finally taking the next step. These “footprints” can provide key insight to help you optimize the experience and drive more conversions.

Unfortunately, you can’t get this kind of data out-of-the-box in Google Analytics. (That isn’t to say Google Analytics is a bad tool, but it doesn’t provide everything you need.) And if you have customer tracking set up that tells the fuller story, all that can do is tell you what’s happening. It won’t show you.

Therefore, you need specialty tools to show exactly what your visitors do on your site: heatmaps, scroll maps, click maps, and session recordings.

Heatmaps: Where People Pay Attention

A Nielsen eye-tracking study made pretty big waves when it proved what we all suspected: people don’t read on the web. We scan.

In fact, we scan in a fairly predictable F-shaped pattern. We start on the far left-hand side, scan to the right, and then drop down and to the left to repeat.

The result is that some spots on the page get the majority of our attention. Other spots are basically ignored.

That Nielsen study is an example of a heatmap. It shows us where users focus their attention. We can use it to learn whether design elements are effective and how to optimize the page.

Areas that receive a lot of attention are shown in warmer colors, like red and orange, and areas that receive little attention get cooler colors, like green and blue.

For instance, consider the following two images. When the baby is facing forward, the face receives the majority of the reader’s attention (indicated by the hot red spot). The title and text are far “cooler,” meaning they get less attention.

But look what happens when the baby faces the content. The attention on the face gets transferred to the text.

The direction of a face is a simple visual cue, but we wouldn’t see its effect without the help of the heatmap.

Obviously, this is a simple example. It’s not always so cut-and-dry. However, it shows us that heatmaps help us understand what our users are paying attention to. Armed with that information, we can create an experience that meets their needs and our goals.

Scroll Maps: Whether People Consume Your Content

You design long, beautiful pages. But does anyone read them? Do they actually make the experience better for your users?

Scroll maps help us understand where people scroll to on a page and how long they spend there. These maps use the same hot-cold color grading as heat maps. If users spend a lot of time in one area, the map shows it as red or orange. If they never scroll to a part of the page at all, it gets the super-cold blue.

Check out the following scroll map example. Essentially, this map tells us that no one scrolls below the fold.

Suppose this page’s juiciest offer is below the fold. In this case, most users will never see it because they don’t have a reason to explore further.

Does this mean information farther down the page is less valuable to users? Not necessarily. The following scroll map shows a page that’s almost entirely hot, meaning users care about all of the content.

Scroll maps are another powerful tool to help you optimize your pages. Like heatmaps, they tell you what users care about and offer insight into improving your pages.

Click Maps: Whether People are Close to Converting

The click is one of our most valuable signals because it represents engagement with the content. In some cases, a click indicates a prized conversion.

If people click your call to action, it’s a sign that your page is well-optimized. If they click elsewhere, it means they find something else more valuable or need more information.

Click maps show where someone clicks on your page. They reveal whether your users are interested in what they’re looking at.

Let’s look at an example. In this click map, you’ll notice most of the clicking takes place around the selector tabs on the left (represented by the warm zone). There’s also some clicking on the menu and the logo.

This map indicates that the page is working as intended. Users interact with the intended components and then explore other areas of the site.

Click tracking is part of Hotjar’s heat-mapping feature, but it doesn’t just show you where the click happens. You also get to learn where the user moved their cursor. This is another layer of user behavior that makes us love Hotjar.

5 Features That Make Hotjar the Best Tool for Researchers

Now that you understand Hotjar’s value offering let’s explore what specifically makes it the best tool on the market.

1. Separate Instances for Each Map

Having access to lots of different types of data is great, but some tools pump them all into the same report, which paints a muddy picture and makes accurate analysis difficult.

We love that Hotjar provides heatmaps, scroll maps, and click maps in separate instances with clear markings. This separation helps our team focus on the information we’re looking for so there are no misunderstandings.

2. Filters for Session Recordings

Session recordings typically take a while to sort through, especially if you have many of them. You can watch them at speeds faster than real-time, but they still take a while to watch.

This means we end up spending a lot of time watching dozens of irrelevant recordings for each page, often without learning anything valuable. It’s a major time suck.

Fortunately, Hotjar lets us filter our recordings to reduce the number of sessions we’re forced to watch. We can quickly drill down to the sessions that have the most impact on whatever we’re trying to learn.

Here’s a list of all the filters you can apply to your bank of session recordings.

• Path/URL – Explore where users have or haven’t navigated. You can focus on viewed pages, specific landing pages, exit pages, or traffic channels.
• Session – Refine data based on broader details about the session, such as new/returning users, country, duration, or page count.
• Behavior – This includes actions performed/experienced by users during the session, such as clicks, events, rage clicks, entered text, refreshed page, U-turns, or errors.
• User Attributes – Sessions from specific users based on custom attributes you’ve passed to Hotjar from your data.
• Technology – Refine collected session data based on technology used during a session, such as device, screen resolution, browser, operating system, or Hotjar user ID.
• Feedback – Filter sessions where a user submitted feedback through a feedback widget or Net Promoter Score widget.
• Experiment – Explore sessions based on inclusion in an experiment.
• Date Filter – Filter sessions based on relative or custom date ranges.

Our favorite filters include device type, landing page, pages visited, duration, relevance (engagement), and new vs returning user.

3. Keyboard Shortcuts for Quick Navigation

When you’re watching session recordings, Hotjar enables you to stop/play or go forward/back using the keyboard. This is a huge time saver, letting you bounce around recordings quickly to find the information you need.

Some competitors allow this kind of movement, but their buttons are small and out of the way. You have to click them manually, which takes your attention away from the video. As far as we know, no one else provides keyboard shortcuts so you can zip through the recording with ease.

4. Quickly Find Usability Issues

There’s only so far people will go to find what they need on your website or in your app. If your digital experience is hard to use, you’ll struggle to convert visitors. It’s simple logic.

In a HubSpot survey, 76% of respondents said the most important factor in a website’s design is the ability to find what they’re looking for.

Using Hotjar is a great way to identify usability issues that prevent users from taking the next step, whether that’s completing a purchase, opening a new user account, consuming content, or whatever else they need.

For instance, if you notice users opening your menu and hovering around without clicking, it tells you they couldn’t locate something they wanted. Maybe it’s worth testing different menu structures to facilitate a better experience.

5. Identify Moments of “Rage”

Sometimes, users become so frustrated that they click repeatedly to make the site work. This is often caused by slow page speed, confusion, or broken elements.

These are serious moments of frustration that you must avoid.

We like that Hotjar’s click maps can show you where users rage clicked. This helps us focus on the biggest causes of frustration in their experience.

Any rage-click issues you identify are easy wins. Solve them quickly before other users experience the same frustration.

Downsampling: A Common But Misguided Criticism of Hotjar

Whenever you consider analytics tools, you’ll likely read complaints of downsampling. Some tools use it. Tools that don’t use it often plaster it over their marketing as a point of value.

Downsampling refers to the process where a tool shows you a random percentage of your total session data instead of the full 100%.

Many analytics tools use downsampling for their free or lower-priced tiers and then encourage you to upgrade to higher-priced options to get access to 100% of your data. Essentially, this means that lower-tier accounts never see some of their data.

Downsampling can pose problems for detailed and precise metrics, such as conversion rates, in tools like Google Analytics. Calculating these nuanced numbers requires a complete understanding of the total number of visitors and sessions. Any reduction in the data can skew the results.

However, when using Hotjar for heat mapping, the situation is different.

Heatmaps are primarily used to identify patterns of user behavior on your website. Whether you’re looking at 100% of your sessions or a subset of sessions, the trends and themes that emerge from the data are usually consistent.

Some tools claim to be superior because they don’t downsample, but in our opinion, this really isn’t a concern when it comes to heat mapping. The fear of missing out on data is often exaggerated to encourage users to switch to more expensive plans.

Even with a sample of data, Hotjar’s ability to visualize user interactions, such as clicks and scrolls, allows you to make informed decisions about your website optimizations.

Go with Hotjar for Reliable Insights

Hotjar provides reliable and valuable data to help you understand user behavior patterns. The insights you gain are still robust and actionable. The app is simple to use for beginners and pros alike.

Hotjar is what we use to optimize sites like Pendleton, The Economist, and Fully. If you want to empower yourself (and your organization) with the best information to optimize your digital experience, Hotjar is the way to go.

You can sign up for a free account here.

The post This Is The Best Heatmap Software For Researchers (Yes, It Downsamples, And That Is OK) appeared first on The Good.

Amidst the plethora of apps and algorithms promising to streamline processes, there’s an often overlooked hidden gem—a tool deeply rooted in psychology and human behavior.

Welcome to the world of heuristics, where problem-solving meets intuition to build better digital experiences.

Heuristics, or mental shortcuts, could be the key to unlocking optimal performance in your role and your digital property.

In this article, we explore how these cognitive shortcuts pave the way for smoother, more intuitive user interactions. We unravel the significance of each of our six Heuristics for Digital Experience Optimization and offer actionable strategies for enhancing user experiences.

What are heuristics?

Heuristics are mental shortcuts used to solve problems quickly and effectively. They allow people to speed up analysis and make informed, efficient decisions.

Our brains are wired to take shortcuts and make quick decisions. So, heuristics play a crucial role in how customers navigate and perceive digital experiences.

How do heuristics apply to digital experience optimization?

By understanding the mental shortcuts your customers rely on, you shift the focus squarely onto their experience. Ensuring we understand and adhere to those shortcuts aids users in quickly and successfully accomplishing their goals. At the same time, actively removing barriers that interfere with these heuristics builds a subconscious level of trust with your customers.

We unpack more of these elements in our book, Behind the Click, but fundamentally, heuristics in digital experience optimization are a way to frame common optimization challenges and turn them into a trustworthy experience that:

• Feels familiar
• Does what they say
• Functions intuitively

Feels Familiar

From the classic navigation menu to the ever-present search bar at the top right, there’s a certain rhythm to digital experiences. Customers have developed a strong expectation of how websites and apps should function.

When a digital experience adheres to these established norms, customers feel a sense of familiarity and control. This subconsciously reduces friction and makes them more receptive to your company.

Does What They Say

Customers crave predictability and transparency in their digital experiences. Honoring a promise—whether about your pricing structure, refund policy, or product features—is essential.

Unexpected fees, convoluted purchase processes, or hidden terms and conditions violate the customer’s trust. Be upfront about all costs and keep the interactions straightforward to build confidence and credibility with your customer base.

Functions Intuitively

Intuitive design is crucial, especially for SaaS products. Users are already familiar with countless digital platforms, so don’t force them to relearn fundamental workflows for your product.

Leverage common design patterns and visual design cues. When your product functions in a way that feels natural, customers can focus on the value you provide rather than the mechanics of using the interface.

The Heuristics for Digital Experience Optimization

The Heuristics for Digital Experience Optimization are a tool developed at The Good to theme common optimization issues and opportunities with the user at the center of analyses.

These heuristics can guide your strategy and help you build digital journeys that feel familiar, do what they say, and function intuitively, as mentioned above.

The six heuristics are:

1. Priming & Expectation Setting
2. Trust & Authority
3. Ease
4. Benefits & Unique Selling Points
5. Directional Guidance
6. Incentives

Let’s take a look at each heuristic in more detail. We’ll cover what it is, how it manifests, and optimization examples of how you might adjust your digital experience to account for these heuristics and any barriers impeding users from accomplishing their tasks seamlessly.

Heuristic #1: Priming & Expectation Setting

Set users up for success by clarifying how the interface will perform, what actions users should take, and what they can expect.

Violations of this heuristic may manifest as:

• Unmet Expectations
• Poor Priming
• Unclear System Status

To adhere to the priming and expectation setting heuristic, you can apply a tactic like explicitly mentioning free shipping early in the journey to reduce cart abandonment rates or sharing estimated delivery dates. Doing so targets the poor priming violation.

Share Estimated Delivery Dates

Get as specific as possible with shipping dates on both PDPs and checkout pages.

You can do this in a few ways. First, you can list the date the item will arrive instead of giving a nonspecific range. “Standard Shipping 3-5 Business Days” becomes “Standard Shipping: Arrives by February 24.”

Here’s an example of estimated delivery dates. Notice the “Delivery Options” box in the bottom right corner.

Alternatively, you can add a zip code search option, where users can type in their location, and your website will provide estimated delivery dates (EDDs).

Setting clear expectations for EDDs can reduce customer anxiety, improve purchasing confidence, and even reduce the workload of your customer support team.

Heuristic #2: Trust & Authority

Establish and maintain perceived trust, authority, and security throughout the digital experience.

This is critical because issues like bugs or anything that violates users’ sense of trust can lead to disengagement. Building trust enhances users’ confidence in the website while violating it can lead to abandonment.

Violations of this heuristic may manifest as:

• Poor Usability
• Comparison Shopping

To follow the trust and authority heuristic, mitigate bugs, build trust by featuring social proof, or consider adding additional educational “how it works” content for complex products.

Highlight Positive Reviews

While brands can say a lot of great things about themselves, they can be more effective, more relatable, and more believable when real customers are singing their praises.

Featuring positive reviews can build user confidence to make a purchase decision and increase user trust.

This is especially great for brands with high-price point products (bikes, furniture) or products with trust-reducing user-dependent variables (makeup: compatibility with dark skin, shoes: true to size fit).

Offer Guarantees

Guarantees can help prime users to make purchasing decisions and incentivize them to purchase. They give users a feeling that the brand is making a commitment to them.

Highlighting guarantees in a quickly scannable way can increase a sense of trust, reduce decision paralysis, and highlight the value of a product.

Highlighting guarantees is great for sites that have high-value items (mattresses, bikes) and/or brands with trust-reducing user-dependent variables (dress fit, color match).

Add a How-it-works Model

Describing “How it Works” for some business models and/or features can give users the context and confidence that they need to understand competitive differentiators like price and quality.

Doing so for complex products will boost user trust, encourage buy-in to the brand, and instill purchasing confidence.

Heuristic #3: Ease

Ensure your interface is easy to use, including aspects like information architecture, navigability, and seamless functionality.

Violations of this heuristic may manifest as:

• High Interaction Cost
• Heavy Cognitive Load
• Content Fatigue

Making a website easy ensures that users won’t abandon it due to its complexity. It also offers better accessibility to diverse audiences. You can address the ease heuristic by reducing content or building in clear navigation elements like a mega menu.

Add a Mega Menu

Adding a mega menu can show the breadth of products, provide directional guidance, and increase visits to PDPs. This can ease product discoverability.

Mega menus are great for brands with a wide range of product offerings and/or multiple sub-categories.

Truncate Long Lists & Copy

Large amounts of copy or long lists can overwhelm users and create additional cognitive load.

Truncating long lists and copy can improve directional guidance, help users differentiate products better, and increase the likelihood of purchase.

Note that it’s not just about adding a “Read more” and hiding ineffective copy behind a click. It is sometimes necessary to bring in a copy expert to rewrite product copy entirely, focusing on decreasing the work to read and increasing the value for the user.

Heuristic #4: Benefits & Unique Selling Points

Highlight the benefits and unique features of products or services to persuade users to purchase them here instead of elsewhere.

Violations of this heuristic may manifest as:

• Low directness
• Attentive/intentional reading

To address this heuristic, consider testing factors like faster shipping times or highlighting product quality.

Add Quality Tiles

Brands often over-rely on homepages to sell the brand and product pages to sell a product’s features. Few users make it to all of a website’s pages (home, category page, product page), leaving users with knowledge gaps about brand positioning and product benefits.

Displaying quality tiles within collection pages can increase engagement, help users connect with brand values, and reiterate purchase incentives.

This is great for brands that have strong value propositions (sustainability, luxury) and selling points (hand-made, organic) that will connect with users.

Note that each quality tile variant could focus on a different theme, such as sustainable business practices in one, quality in another, and incentives like free shipping and returns in another.

Add Value Proposition to a Banner

Global promotion banners aren’t just for sales. They can be utilized to quickly communicate brand values, product benefits, and key differentiators with simple microcopy.

Showcasing positioning, brand values, and key differentiators in banners can increase engagement and decrease adds to cart.

Heuristic #5: Directional Guidance

Support users in finding and discovering what they need through visual hierarchy, way-finding, and guiding them to the next best step in their journey.

Violations of this heuristic may manifest as:

• Low Visibility/Low Discoverability
• Low Findability

This is particularly helpful for users who may need extra assistance in decision-making. Think of them as your friend who never knows where they want to go for dinner. We’re offering them an easy guide to follow, directing users toward desired actions or outcomes.

You can address the directional guidance heuristic with improvements like predictive search or sort order.

Use Predictive Search

Increasing the use of search is a great way to encourage intentional browsing, but often, users need a helping hand to guide them to relevant products or pages.

Featuring popular or relevant products in search suggestions can improve product discoverability, increase the helpfulness of search, and help users quickly and easily navigate the site.

Deeper customizations might include featuring different products based on user segment, search terms entered, seasonality, or geographic area of the site.

Change Sort Order

Sort orders often default to standard settings that don’t support user goals.

Testing alternative default sort orders (by popularity, by price) can help users quickly discover the products that are right for them and improve directional guidance.

Heuristic #6: Incentives

Provide additional motivation, confidence, and urgency for users to make a purchase. Ideally, incentives encourage a user to convert today rather than at a later date.

Violations of this heuristic may manifest as:

• Abandonment
• Comparison Shopping

You can address this heuristic by offering things like expedited shipping for VIP members, promotional offers, or guarantees.

Create Value-Based Promotions

Instead of discounting to incentivize purchases, which can ultimately devalue your product, consider a promotion that adds value. For example, buy-one-get-one-free, free shipping when you reach a minimum purchase amount, or a free gift with purchase.

Suggest Bulk Orders

Nobody likes running out of their favorite product. There are plenty of ways to incentivize adding products to the cart with tactics like cross-sells, upsells, or product bundling.

Suggesting shoppers stock up is a good way to increase AOV and secure long-term brand loyalty. This can be particularly effective if you have a shipping threshold.

How The Heuristics for Digital Experience Optimization Can Inform Your Strategic Roadmap

One of the most powerful ways to turn these six heuristics into an actionable improvement plan for your digital property is to use them to inform your strategic roadmap.

Armed with user research, identify common patterns or pitfalls that your users are experiencing. Then, group those patterns by the Heuristics for Digital Experience Optimization we covered above.

You can then prioritize the themes based on their potential impact on performance and develop a plan to test improvements. The whole process is outlined in more detail in our article on theme-based roadmaps, so I highly recommend checking that out if you’re looking to turn conversion challenges into opportunities.

The power of heuristics is being able to strategically and efficiently identify your digital challenges in a way that is centered on the user experience. At the end of the day, if your customer is getting stuck in your digital journey, you need to find out where and smooth out their path to purchase. Until that happens, not much else matters.

If you want to do just that and would like expert support in the process, take a look at our Digital Experience Optimization Program. The custom program gives you access to an entire team of researchers, strategists, designers, and developers so you can build a better website, app, or digital product.

The post How To Solve Common Optimization Issues Using Heuristics (With Examples) appeared first on The Good.

Nearly 50% of our brain is involved in visual processing – We can process images in just 13 milliseconds, which is 60,000 times faster than text.

This innate skill not only applies to our physical surroundings, but the digital products and websites we use. Raw text and plain links are boring and unengaging, even if they function well.

What’s more, we can use colors, shapes, and lines to provide visual cues that communicate specific functionality, which creates affordances that support a better and more efficient user experience.

Ultimately, we can use visual design and aesthetics to improve functionality.

In this article, we explain the fundamentals of visual design and why your site needs it, providing examples to help you incorporate these principles into your own user experience.

Our goal is to show you how to think about design strategically and objectively to improve your site’s user experience.

What is Visual Design?

Visual design is a combination of both graphic design and user experience (UX) design that uses aspects of the site, such as brand identity, internal consistency, and visually communicated goals, to provide a unified, cohesive experience to its users.

Basically, visual design is the use of aesthetics to support a system’s usability. That system could be a physical product, an app, or your ecommerce site.

A strong visual design doesn’t take away from the site’s content, usability, or conversion potential. Instead, it enhances these functions by creating an engaging and trustworthy experience for users.

Let’s look at a super basic example: The checkout button is just a link, but we always see it styled like a button. It’s typically displayed visually, rather than with just text. Which of these two links supports the user experience better?

Option B is clearly more effective.

The colored background and space it occupies on the page make it stand out as a button. The lock icon assures users that clicking it is safe. The slight shadow and conventional design as a button communicate its functionality clearly, appealing to users’ affordances.

Our innate ability to quickly process these visual cues provides a more efficient user experience and minimizes the effort required to interact with a site, improving the overall experience and bringing users one step closer to conversion.

The Aesthetic-Usability Effect

There’s a misconception that visual design has a minor effect on the overall user experience, but it actually plays an important role in positively impacting user perception and the overall experience. We can observe this impact through the aesthetic-usability effect.

The aesthetic-usability effect refers to our tendency to perceive attractive products as more usable. If something looks better, we tend to think it will work better, even if it isn’t as effective or efficient. Essentially, a positive emotional response to visual stimuli makes us tolerate small usability issues.

The aesthetic-usability effect was first studied in 1995 when researchers Masaaki Kurosu and Kaori Kashimura from the Hitachi Design Center tested dozens of variations of an ATM user interface. They asked the study participants to rate each UI design on two criteria: 1) ease of use and 2) aesthetic appeal.

The researchers found a strong correlation between the participants’ ratings of aesthetic appeal with perceived ease of use. The correlation between their ratings of aesthetic appeal with actual ease of use was much lower. Therefore, not only are users influenced by aesthetics to the point of overlooking usability challenges, they do so even when they are intentionally trying to evaluate the functionality of the system.

Naturally, there are limits to this effect. A pleasing design can make users overlook minor usability issues, but not substantial ones.

For instance, if your customers can’t find the products they need on your ecommerce site, no pretty layout or trendy color scheme will save the sale. But if you find the balance, you can make users perceive more usability than there actually is.

Source: https://uxdesign.cc/the-importance-of-clarity-in-ux-91052e0ad4e4 

Ultimately, form and function need to work together. When interfaces and digital experiences struggle with usability issues, or when aesthetics are completely neglected for the sake of usability, the users tend to have a poor experience. The solution, therefore, is balance.

The 5 Principles of Visual Design

There are five basic principles of visual design. When used properly, they create a pleasing experience that keeps users engaged and helps them navigate the site to find what they need.

Visual designers apply these principles whenever they combine lines, shapes, colors, textures, typography, and layout.

1. Scale

Designers use scale to establish the visual hierarchy of content on a page.

Scale uses the relative size of elements (such as text, icons, or CTAs) to indicate the importance and rank of the element in relation to other components on the site.

Proper use of scale can demonstrate how items relate to one another and create clear visual boundaries that help guide the user efficiently through the content on the site.

Notice how Allbirds makes their hero row full width and taller than subsequent rows. It draws the eye and directs you toward those options.

2. Visual Hierarchy

Visual hierarchy controls the delivery of the experience by guiding the users’ eyes sequentially down a page using elements on the site such as color, size, spacing, and organization of content.

Unclear page hierarchies with elements competing for visual attention can create clutter that makes a site feel overwhelming and difficult to navigate.  

Ritual does a great job utilizing white space, layout, and scale to signify the most important content on its homepage.

The large text, both in the hero area and further down the page, directs the user’s attention, while the organization of the content follows the conventional left-to-right, down-the-page layout, typical of western reading patterns.

3. Balance

Achieving visual balance on a page requires the visual weight of elements on a site, such as imagery or text, to be equally distributed across an imaginary y-axis down the center of the page.

Balance can be symmetrical or asymmetrical. A page is considered symmetrical when there is the same or a similar amount of content on both sides of the axis, while an asymmetrical page contains the same amount of visual weight on both sides of the axis but with different elements, sometimes in different locations.

This Verve product details page is a great example of symmetrical balance. The product image in the center is winged by elements on the right and left. If you scroll a bit, the right-side add-to-cart widget scrolls with you, so there’s always even weight on that side.

Github showcases asymmetrical balance on its site using heavy imagery on both corners of the page and bolder text to the right to maintain consistent visual weight on both sides of the imaginary y-axis of the page.

4. Contrast

Designers use the principle of contrast to help users differentiate between elements on the page.

A greater visual contrast typically signifies a greater difference between site elements, whereas similar items are given similar characteristics or functionality. Items can contrast based on size, direction, color, and other characteristics.

Notice the contrast on this MVMT page. The green add-to-cart button is impossible to miss. It’s more important than other elements.

5. Gestalt

Gestalt principles acknowledge our tendency to group similar elements together.

Our brains love patterns, so when we see similar items together, we perceive them as a whole unit, rather than individual elements.

These principles include similarity, continuation, closure, proximity, common region, figure-ground relationships, and symmetry & order.

For a basic example, check out the NBC logo. On their own, the colorful map pin-shaped icons don’t mean much. But when they are arranged just so, along with some clever whitespace, we see the NBC peacock.

This KOS category page uses the common region Gestalt principle by enclosing each product within a container, helping you understand what’s related. Instead of seeing a title, a price, an image, and a button, you see a product listing.

The Role of Visual Design in User Experience

Visual design is a powerful tool you can use to support the user experience. Visual designers don’t just create eye candy.

They use their designs to make websites and interfaces simpler, more intuitive, and more accessible. Once usability is assured, they use design to impress your shoppers with your brand’s presence and style.

Any page of your site or screen of a digital product can be broken down into fundamental elements: type, lines, shapes, colors, textures, volume, and negative space.

Visual designers use these elements to direct us to important information, express functionality, and help us move forward toward a conversion.

To use design to support usability, you can follow the structure of the UX Design Pyramid. The pyramid is similar to Maslow’s Hierarchy of Needs in that each level serves as a foundation for the levels above it.

Source: https://syndicode.com/blog/the-ux-design-pyramid-with-the-user-needs/

1. Functional – The design meets all of the requirements to work the site. The most important tasks are in high-value places. The clicks required to achieve the site’s purpose are as minimal as possible. The site has a low learning curve.
2. Reliable – The site’s information is available, accurate, and consistent. It works properly on all browsers and devices. It works the same way every time.
3. Usability – Users can easily find what they need. No one gets lost or confused. They can move toward their goals without much struggle or thought.
4. Convenient – Users want to use the site because it’s easy. There are no barriers that make using your site difficult. Content appears exactly where it’s needed.
5. Enjoyable – Users invest themselves in the site and want to share it with their friends. There are delightful features, such as high-resolution imagery, microcopy, error guidance, animations, tactic transitions, and more.
6. Significant – The site becomes a tool users love. Pain points and obstacles have been reduced almost entirely. The site is personalized to their needs.

The bottom of the pyramid contains the fundamental requirements of a successful design. These elements must come first. After all, when a user visits your site, it’s paramount that they can complete a task.

Completing the task should be simple, predictable, and intuitive. Your users shouldn’t be forced to carry a large cognitive load just to shop at your store.

Aesthetic elements start to step in around step three.

Those design principles we explained can be used to make information easy to find. A well-designed menu and clear calls to action prevent people from getting lost.

As you get to the top of the pyramid, you’ll be working with aesthetics entirely to strengthen your brand presence, but at this point, the site should work.  

What would happen if you skipped the usability steps and focused on aesthetics? A terrible user experience, most likely. Your site would look pretty, but fail to convert.

5 Best-In-Class Examples of Visual Design

Now that we’ve discussed visual design thoroughly, let’s look at some best-in-class examples. Use these to inspire your design work.

1. Kettle & Fire

This Kettle & Fire product page uses design to assist usability. Notice how the designer uses lines (containers), colors, and icons to indicate the options that are currently selected.

You can tell, at a glance, that clicking the add-to-cart button means ordering one 6-pack. The subscription option and other quantity options are clearly inactive. Furthermore, we can tell by their form, arrangement, and spacing that we can interact with them.

2. ModCloth

This is a fairly conventional product page, but let’s talk about why it’s great.

First, there’s a good use of scale. The image and call-to-action button are the most important, so they are the largest and most colorful. Less important elements (such as the “Earn loyalty points” copy) are gray, small, and out of the way.

Furthermore, the page is balanced and easy to look at. Your eyes are drawn to the main image first. The weight is about equal on both sides.

3. Shopify

Shopify had a unique challenge when creating its checkout page. It has to work with all of the brands they serve.

Their approach was to keep things minimal. They use balance to feature the checkout form from the shopping cart.

Everything is fairly nondescript except the “express checkout” buttons and the “continue shopping” button that use contrast to stand out on the page.

4. Bellroy

Informational pages are usually quite boring. Most ecommerce sites neglect to give them much thought. But Bellory was intentional with their design choices.

While the page is still somewhat boring, it functions well for its intended purpose.

The scale directs users efficiently to what they need on the page.

“Need help” is the first thing users see, letting them know where they are on the site. Next, a user’s eye is drawn to “shipping delivery” which lets them know what topic they are on.

Lastly, the headers for each section on the page are visible and scannable, helping a user quickly get the answers they are looking for.

5. Optic Nerve

Optic Nerve knows its customers are buying for aesthetics, not just function. They care about the look and style of their sunglasses.

So instead of simply listing the color options or offering a drop-down selector, Optic Nerve uses thumbnails of the color options as selectors. This encourages exploration.

The brand also includes value-proposition icons below the thumbnails. This quickly tells users about the products’ many benefits in an easily scannable and visual manner.

Using Visual Design to Build a Better User Experience & Boost Conversions

Ultimately, when visual design is properly incorporated into a site, it can have a profound effect on the user experience.

But before you change the visual design of your ecommerce site, it’s important to think strategically and remember the pyramid we mentioned before.

The functional aspects of the site should be fully flushed out before visual aspects can be considered.

Once that is achieved, aesthetics can support usability and create a strong brand presence, which leads to higher conversions.

If you’re interested in having an expert take a look at the usability and design of your site, explore our Wireframe Audit.

The post The Fundamentals of Visual Design and Why You Need It appeared first on The Good.

• What makes a winning form design for ecommerce and SaaS brands
• How to build a form that converts for your website
• Understand the principles and common practices of over 32 form design examples

Form design seems like a website element that doesn’t require much thought, but there are actually many ways the form experience can go wrong. When it happens, you can lose a sale or  lose a lead, and in turn give those users a bad impression of your brand.

Website forms are one of your most important onsite elements. They are the crux of a user’s path to conversion. 

Bad form design can cause users to drop off during critical conversion opportunities, leaving them frustrated or confused, while great form design creates a seamless user experience that can increase conversion rates and leave users feeling excited about a product or company.

In this article, I’ll cover: 

• The basics of form design
• 10 UX form design principles 
• Form design examples that convert

What is form design? 

Form design is the process of putting together text fields and other form elements to collect user information while keeping usability, customer experience, and appearance in mind. 

For ecommerce specifically, form design is used when putting together website pages for: 

• Registration forms (a sign up or login form)
• Contact forms 
• Checkout forms
• Questionnaires

Improving the web form design on any of these pages of your ecommerce site can see incredible ROI – increasing conversions and building a better customer experience. 

So how do you do it? 

Here are a few of the form design principles that you should consider as well as corresponding desktop and mobile form examples from winning ecommerce brands.

10 UX form design principles with form design examples from winning brands

1. Priming 

The first principle to consider when designing your form is priming. We consider “priming” anything that sets user expectations for what is to come, so they aren’t deterred by any surprises.

That might mean:

• Telling users how many steps they can expect and what is in them
• Setting expectations for what will be required of users (for example, whether or not they might need to get their credit card out, vs indicating “no credit card required”)
• Sharing what happens after the form is complete (for example, “we’ll ship within 1 business day”)

This principle is when elements in the interface guide user behavior and inform them of what to expect from their interaction.

Priming often takes the form of progress bars. Adding this element tells the user what they can expect from the process during or before completion of the form, setting the expectation so that users come prepared to fully fill out the form.

See this example from Hungryroot.com. The brand features a progress bar with clear labels to prime users about what to expect during the experience. 

Etsy uses a similar progress bar on mobile to prime users on the checkout process. 

This example from Robinhood tells users exactly what information will be required from them to register.

Another example of priming is sharing the end result or value they’ll receive upon completing the form. This helps them anticipate what to expect once the form is complete and generate excitement for the product, motivating them to complete the form.

The “Try Demo” button, shown below, primes users to know what they can expect after they fill out the form, in this case, they get to demo the product once the form is complete. For additional priming, the brand has a bulleted list of what the user can expect after the form is complete. 

2. Error prevention 

Great form design should always include error prevention. Provide clear and adequate instructions that help users fill out forms correctly on the first try and prevent errors before they are committed.

Here are a few examples of error prevention in action. 

Providing an example of how the text input field should be completed. Both Canva and Petco use hint text in the email field to remind users of proper formatting.

Mailchimp and Lululemon provide a password requirement checklist to assist users in creating a password that meets the requirements.

Ritual and Etsy use an inactive CTA that turns colorful when the user has properly filled out the form, giving them feedback and validation that they are ready to move on to the next step.

Highlighting required fields, like Prose and Headspace do here, assures users won’t skip the necessary fields.

When you’re clear about the expectations and requirements of your form, you avoid user error and in turn avoid user frustration.

3. Error recovery

Even with the best error prevention methods, mistakes still happen and are always frustrating. That’s why we have error recovery! 

When errors happen, it’s important to notify users immediately, in a friendly tone, and provide clear and specific instructions to help them fix the issue on their own.

For example, highlight text form fields with incorrect information in order to catch the user’s attention. Then provide clear instructions to fix the error.

Sephora and Lululemon do this well on desktop and mobile respectively.

4. Feedback

The same way humans need feedback in our day to day life, we also need it in our digital interactions. Feedback is a combination of error prevention, error recovery and priming to let users know they are on the right track to achieving their goals.

Feedback refers to visibly and simply communicating the results of any user interaction, providing positive reinforcement if a user succeeds at performing a task.

Inline validation that confirms a user is entering the correct (or incorrect) information, is an example of form feedback. 

Mailchimp and Home Depot share real time feedback to let the user know whether they are successfully inputting a password or not.

Another example of feedback is confirmation or error messaging during a user experience. For example, Hum Nutrition sends a success message as feedback letting users know they successfully completed their task. 

5. Proximity 

In your form design, take advantage of gestalt principles like proximity to indicate to users what is needed from them. Psychology shows that through the Law of Proximity, items closer together will be perceived as more related than items further apart. 

By closely grouping related fields, users can quickly make sense of your form at a glance, which can reduce form completion time and create a much more seamless and enjoyable experience for the user. For example, you can group together related form text fields such as shipping information in order to help users easily make the distinction between form content. 

Shopify separates the email field from the shipping info, so users don’t have to think too hard about what is being asked of them. 

And don’t forget to use the principle of proximity in your labeling. Keep your form labels close to their corresponding input fields to minimize confusion and prevent errors. 

6. Convention

There are some elements of web design that remain consistent, even across different industries, which users depend on to navigate the digital world much more quickly. For example, an account icon in the top right corner of an ecommerce website or a checkout button in the cart. 

Using platform and industry standards that align with users’ expectations and mental models of the digital world helps minimize confusion or frustrations, and increases the usability of the interface

Form design also has conventions that need to be followed in order to create a positive user experience and promote conversions.

Here’s an example from Oscar, a Medicare Advantage company, uses radio buttons for language selection that universally indicate the ability to select only one option.

Here, the SaaS company Scale uses checkboxes for interest selection that universally means that users can select multiple options. 

Additionally, checkout how Headspace (and most forms) have some type of “Submit” CTA that are always placed at the end of the form. 

These are just a few examples of industry and platform standards in form design that are in line with user expectations. When industries deviate from basic standards, usability breaks down.

7. Momentum

How do we encourage users to convert and avoid abandonment? We can accomplish this by making users feel a sense of accomplishment, like they are progress toward their goal during the form filling process. 

Leverage the product’s value in order to inspire users to complete your form. For example, like monday.com, put a scrim behind a sign up form to give a sneak peek of what’s coming upon completion. It illustrates to users that they’re almost to their goal of trying out your product and only need to complete the form to see the dashboard.

Momentum is a well tested and verified form design principle that keeps users motivated through completion. 

8. Proof 

Humans have the tendency to “reference the behaviors of others to guide their own behavior” (NNG, 2014). In forms, we can stimulate this tendency to increase conversion rates by using different types of proof, such as  social proof, testimonials, and proof in numbers. When we build these elements into our design, we foster a sense of trust between the user and the brand, making it more likely that users will convert. 

Here’s how that might look in action, with various forms of social proof: 

• Ratings and accreditation: 5 star ratings on a customer review site
• Expert endorsement: Including logos on the homepage of your site 
• Customer testimonial: A satisfied customer quote
• Expert testimonial: Known brands and experts lend their names to the review a product or service
• Proof in numbers: Show your success using a phrase like “trusted by 2 million moms” or something that builds confidence and connects with your target audience. 

Keep in mind, the numbers, testimonials, and social proof you’re using should be the primary, or at least secondary, text on the form screen in order to catch the user’s attention. 

Here’s an example from Yousign, using a testimonial. 

Uscreen uses proof in numbers to build trust with users on desktop.

And Thrive Market does the same on mobile.

Scale uses logos on their form to build trust.

9. Demonstrated Value

How are you telling the user what they will get in return for their effort?

Are you making it clear that it’s worth their time? 

If not, you need to demonstrate the value users will get by taking the time to fill out your form. Highlight the main benefits of your product in a way that’s visible and concise. 

Adidas and Dominos offer lists of the benefits they offer upon signup or login. 

Shippo, shown below, uses icons to demonstrate value on their signup form, in a skimmable and impactful format. 

10. Perceived Effort Level 

Users are busy and their attention is fleeting. To increase the likelihood of completion and conversion, make sure your form appears – and really is – low effort for the customer.

In practice, this looks like honest and specific references to the timing (7 minutes to complete or only three steps, shown with an accurate progress bar) and only asking for necessary information. Gather the information you need, and then you can follow up for more, less crucial details later if necessary. 

On mobile, Daily Harvest shows that users only need to enter two pieces of information to see plans and pricing. Once they fill out the initial information, they are one step closer to subscribing. Additionally, users can see to complete the whole process there are only 4 steps. 

On desktop, Kickoff labs uses the word “instantly” and lets users know that they won’t need to input any payment info to signal a fast and free sign up process. 

Apply these principles to desktop and mobile form design

While desktop and mobile users have different needs, and there are certainly ways that forms should differ, each principle listed above still applies. That’s the beauty of this list and these examples, you can implement them no matter where you’re designing your form. 

Some principles are even more relevant when applied to mobile devices. If a user on their smartphone clicks through to an ecommerce site’s sale from a social media ad, the form on the landing page should minimize the number of text fields even more than a desktop form, automate answers when possible, and use a single column layout. 

For an easy to follow checklist on mobile form design checkout the NNG’s checklist of usability requirements for mobile, and implement the form design principles we covered today on top of that. 

Forms are just one part of your user experience

Implementing the principles we covered today can help you improve your site’s user experience and conversion rates, but form design isn’t the only thing that needs to be considered in order to see a larger, iterative improvement. 

Forms are just one element of your ecommerce website. Each step in the customer journey is an opportunity to test and optimize the experience you deliver. If you’re interested in partnering with experts in digital experience optimization to understand your users and improve their experience, contact us.

The post 10 Principles of Good UX Form Design (+ Winning Form Design Examples) appeared first on The Good.