The Different Ways That Visual Design Can Impact UX

knowing-the-difference-between-the-ux-and-ui-design

When custom label printer Consolidated Labels redesigned its website, their end goal was to increase customer conversions. Yet they liked their site, and didn’t see the need to make many changes. In the end, they changed only one thing on their homepage: adding call-to-action with a bright-green button.

According to a case study on the project, after running the test, Consolidated Labels was shocked to see a 62% increase in conversions. All that, just from adding a single call-to-action button. For Tracy Gamlin, their web marketing manager, the lesson learned was obvious:

“Make your desired conversion goal obvious, but harmonious to the rest of the design.”

When we look at this case study, we see a clear example of visual design making a difference. Specifically, Consolidated Labels did a few things right. The call-to-action’s color contrast pops out on the page, it featured easy-to-read fonts in the button copy, and it was big enough to make people take notice.

Why Visual Elements Are Important

People are visual creatures, and the web is a visual medium. On any site, a person’s user experience will be informed and affected by the visual elements. These elements are an integral aspect of UI design, as visual cues convey how a person can interact with the site.

In this article, we’ll talk about how five prominent visual elements that people see across hundreds of sites can drastically influence the user’s experience. They are:

  1. Typography
  2. Logos
  3. Call-to-action buttons
  4. White space
  5. Images

These visual elements all have a unique role to play in the overall scheme of good UX. When a designer understands how each of these visual elements impact the UX, they can provide the sorts of experiences that engage users, and improve conversion rates for organizations. Simply changing around seemingly small attributes of a visual element—whether it’s their size or positioning – can result in a significantly different experience for the user.

For example, when it comes to typography, certain fonts actually make us feel good or bad, according to The Next Web, based on factors like size, the right line length (50 to 75 characters), and proper spacing. Similarly, our brains first identify a logo’s color, shape and form, before grouping these objects to make a positive identification of the logo, according to a HubSpot infographic.

Then, our brains match this visual pattern with prior experiences that demonstrate the same pattern. Finally, semantic attributes like preferences and attribution are provided to give the logo meaning. With that in mind, we can design logos and use them to do far more than merely identify an organization. Similarly, we can use calls-to-action, whitespace, and images to impact the user’s experience, in ways that we’ll explore shortly.

Typography

Text forms the bulk of the content we see on any given site. Accordingly, the appearance of the typography is a significant force in UX design. Take this recent study from Carnegie Mellon University and Universitat Pompeu Fabra in Spain. It conducted an online-reading experiment on readability and comprehension and concluded that bigger is better – much better.

Study participants performed reading experiments on Wikipedia, arguably one of the most popular and text-heavy sites on the web, and they reported that text was more easily read and understood when font sizes were larger. With that in mind, the authors recommended that all sites use 18-point font size for the body text of all web pages. As they put it: “Best subjective readability was achieved with 18 points,” however moving up to 22-point font size produced no meaningful improvements.

What makes this study so powerful is that it boldly diverts from and challenges some of our typography norms – such as a 2013 article from Smashing Magazine that talks about the then-popularity of using 12-point font size (16 pixels). In a way, this makes the 18-point font size a secret weapon.

Logos

Logos are often considered mere branding tools that quickly and universally identify a company or news publication. Certainly, there is a marketing element present in displaying the logo in the header of a page. If a user likes something that he wants to buy or agrees with something she sees written, he or she will know right away what brand sells that product or shares the same values. But there’s more to it than that.

From a strict UX perspective, logos are the means for users to orient themselves, often doubling as a quick link to the site’s homepage. In addition, they provide a consistent beacon, identifying the site. It’s subtle, but by virtue of always displaying the logo in the same spot across websites improves a user’s experience.

In a study from the Nielsen Norman Group, study participants were asked to perform navigational tasks in a study and brand-recall exercises after looking at different sites with left-aligned and centered logos. The results confirmed that left-aligned logos aided UX considerably. They summarized, “getting back to the homepage is about 6 times harder when the logo is placed in the center of a page compared to when it’s in the top left corner.”

And if that’s not reason enough to make a logo visually prominent, remember the wisdom of the HubSpot infographic mentioned earlier: part of recognizing a logo is matching the pattern to prior experiences. In other words, if the logo is prominent, and the user has a positive experience, they’ll be more likely to associate the brand with positive things in the future.

Call-to-Action Buttons

As a general rule, call-to-action buttons reflect user goals: they prompt people to click, tap, or select, in order to move to the next step of the user’s journey. With that in mind, positioning of these buttons is central to creating a positive user experience. The more easily a user can find and understand the call-to-action, the more intuitive they’ll find the experience.

According to the psychological principle of the perceptual set theory, our brains process call-to-action buttons based on our prior expectations. We expect them to be on landing pages; we have always seen them on landing pages – it’s a bit of a circular theory! Still, it’s a starting point for any effective call-to-action, if we follow additional best practices.

Image from Unbounce

While there’s no one layout for calls to action, they should have an action-oriented verb starting them off, so users understand that they have to take action, according to HubSpot best practices. Once this is established, build off Unbounce’s research as well: use more than one button on a long sales page, use directional cues if the call-to-action is below the fold, engage users by telling a story to guide them to the button, and make the button stand out by using contrast.

Beyond that, as with all visual elements, usability test to learn more about the target audience’s specific needs.

White Space

White space is all around us on the web: it refers to the negative space around any element. It can help users focus on the important content on a page, whether that’s a call-to-action button or a video, because the subconscious responds to it. Anything framed by white space tends to stand out on a page, making viewing easier. As a result, increasing white space on a page also increases reading comprehension.

White Space

According to this study from Wichita State University, participants in an online-reading study comprehended more content from a webpage when it had margins surrounding the text (read: white space) than when it had no margins. The study’s authors concluded:

“The use of white space for online reading is important as the number of people using online textbooks and materials continues to grow at a steady rate.”

For a strong example of how intelligently adding white space onto a page can transform its usability, look at United Airlines. Until last year, their site had hardly any white space in the margins of the page. Conversely, the new design prominently features a lot of white space in the margins, as well as in the footer. As a result, users can now more easily focus on the main content on the page. The old design’s lack of white space made it more likely that users could get “lost” in the different content blocks of the page.

Images

It’s impossible to discuss visuals without talking about the most obvious: Our brains process images super fast – at 13 milliseconds, according to the Daily Mail. This processing speed helps us quickly grasp information, which in turn helps us move forward. For instance, if we’re looking at a product page of a shoe, we see the image, immediately understand what it is, determine whether we like it, and, decide to look for pricing information as a next step toward making a purchase or moving on.

Likely as a result, studies show that using images increases conversion rates. Conversion XL references many case studies where using images had a positive effect on conversion rates:

  • Online maternity retailer Due Maternity saw a 27% increase because they began using 360-degree rotating images
  • Security retailer Brick House Security added images into its dropdown search results, which boosted conversions by a whopping 100% among customers who use its site search
  • Art site Medalia Art boosted site conversions by a stunning 95% after it added images of its artists on the homepage

It needs to be stressed, though, that each example is unique. In other words, what worked for Due Maternity isn’t going to necessarily work for Brick House Security, and vice versa. That’s why testing is so important for any project.

Still, the one common bond with images is, according to Jeff Bullas, that they simply perform better. They cause articles to get 94% more views than articles without images, they increase the likelihood of searchers contacting a business by as much as 60% if its search result features an image, and they increase views in press releases by 45%.

Make It Visual

Even little changes in visual design can result in significantly better UX. Site conversions and user engagement are impacted by the visual design choices that designers make. Improving the visual cues and increasing the visual appeal of a website is not only a smart design decision, but a smart business decision.

Leave a Reply

Your email address will not be published. Required fields are marked *