When Consolidated Label, a label printing company, decided to redesign their website, their goal was to increase the number of user conversions. The company’s management generally liked the previous site, so no one saw much need for any dramatic changes. All ideas for updates as a result of one thing – on the main page was a bright green button with a call to action.
What happened next shocked the managers of Consolidated Labels – the website conversion rate increased by an incredible 62%. All just because a big green button appeared on the site. For Tracy Gemlin, Internet Marketing Manager, it didn’t go unnoticed:
When you think about what happened to Consolidated Label’s site, it’s clear that we’re facing a shining example of the impact of visual design on user behavior. Consolidated Label’s designers got only a few things right, but it was enough. The contrasting color of the call to action button appears on the page at just the right moment, and the text on the button is in legible type. But the element itself was noticeable enough to get people’s attention.
Why are visual elements so important?
There are five visual elements that all users encounter when browsing the sites they visit. These are:
- Typography
- Logos
- Buttons with a call to action
- White space
- Images
These five visual elements are crucial when looking at design from a User Experience perspective. If a designer realizes that each of these elements captures the attention of visitors, it improves the User Experience and increases conversion rates. A simple change in seemingly small and insignificant visual elements, for example, increasing or changing the position, can lead to an improved user experience.
When it comes to typography, it’s clear that there are indeed fonts that are perceived as good or bad. There are also factors such as the right line length (50 to 70 characters) and appropriate spacing. Our brain evaluates typography in the same way that it evaluates the color of a logo, the shape of various shapes, and the relationship of all design elements.
The user evaluates the visual design and compares it to his or her past experience, which suggests that there is some pattern to which the person thinks the site should conform. In the case of logos, one must also keep semantics in mind – the user evaluates the design based on their own preferences. With this in mind, designers can create logos that not only identify the brand or company, but also convey a message that is quite clear to the user.
Typography
The bulk of the content we see on most websites is text. Accordingly, one cannot ignore the importance of typography in UX design. A recent study by experts from Carnegie Mellon University (USA) and Universitat Pompeu Fabra (Spain) showed that increasing the font size often leads to better readability of the text and, consequently, better memorization of information.
The researchers conducted a series of experiments in which participants of the study read articles from Wikipedia, one of the most popular and at the same time the most “text” sites on the Internet. It turned out that the text became clearer and easier to read when the font size was moderately large. What does this mean? The results of the study indicate that the best readability was achieved when the font size was 18 points. However, increasing the font size to 22 points did not result in any noticeable improvement in user experience.
For many designers, this news will come as a surprise, as the results of the study run counter to established norms for web typography, such as an article on Smashing Magazine published in 2013 that cited a font size of 12 points (16 pixels) as the most UX-friendly. In a sense, this data on the impact of an 18-point font could be a UX designer’s secret weapon.
Logos
Logos are often seen as part of branding, that is, as elements that let the user know which company is publishing an article or reporting news. Of course, there is also an element of marketing, especially if the logo is located at the top of the page, next to the headline. If the user is already in the mood to buy or agrees with the published point of view, they immediately understand what brand is promoting that product or idea. But that’s not all there is to it.
From a UX perspective, logos allow the user to navigate the online space, often serving as a visual anchor that reinforces the URL of a web page. The name of the site in the address bar of the browser is not remembered by many, so the logo is a kind of beacon that allows the user to identify the site. The constant presence of the logo in the same place on different pages of the site can significantly improve the user experience, although the benefits of this technique are not so obvious.
In a Nielsen Norman Group study, experiment participants were asked to test navigation on various sites. The goal of the study was to find out which brands were better remembered, those with the logo in the center of the page or those with it in the upper left corner of the screen. The results confirmed that left-alignment improved the user experience. And users, on average, found it six times harder to get to the homepage if the logo was centered. Designers have a lot to think about.
In addition to proper positioning of the logo, making it more noticeable will allow a simple rule, which is as follows: “The visual appearance of the logo must match the previous experience of the user. In other words, if the logo is prominent and at the same time does not annoy the user, a person will tend to associate the brand with positive impressions in future visits to the site.
Buttons with a call to action
As a rule, CTA buttons reflect users’ goals, they tell people what they need to do to move on to the next stage of interaction. With this in mind, it can be concluded that button placement is crucial to building a positive user experience. The easier it is for the user to find and understand the call to action, the more intuitive their behavior will be.
According to perceptual set theory, our brains assimilate the information that call-to-action buttons try to convey based on previous expectations. The user expects such buttons to be located on the landing pages because that’s where he has always seen them. Is this true? To a certain extent yes, but for the UX designer this is only a starting point if he or she wants to improve the effectiveness of the call to action.
That said, keep in mind that there are no perfect solutions for the location of a CTA button on a page. However, any button should carry a result-oriented verbal message that tells users exactly what action they should take. Once the text of the button has been determined, you will need to find the best position for it. Or even a few positions, if you want to put more than one button on a long page. It is also possible to use directional signals if the CTA button is located outside the first screen. The attention of users can be attracted with the help of storytelling, telling a story that smoothly leads the visitor to the button, which should definitely be contrasted in relation to the main content. But contrast is not enough, we should also remember about typography – the text within the button should be easy to read. It probably wouldn’t hurt for designers to run some usability tests to understand the real needs of the site’s audience.
White space
Internet users are so used to white space that they hardly pay attention to it – it’s literally everywhere. It is white space that surrounds every design element, allowing the user to focus on the most important content on the web page. Whether it’s a headline, a video, or a CTA button, our subconscious responds to a freestanding element surrounded by white space. Anything surrounded by white space stands out, and becomes more comfortable to view.
According to a study conducted by researchers from Wichita State University, the content of a web page was better understood if the text was surrounded by white space, that is, the most common fields. If there were no margins, perception of the text deteriorated.
White space is not just “air” around an element, it is primarily the correct framing of the most significant part of the content. As an example, we can take the United Airlines site. The company’s previous site was heavily overloaded, with too much important information dumped on the user, and all the forms were literally right next to each other. After the redesign, there is only one form, but it does not exist in a white void, but it is surrounded by other, less significant elements, which unobtrusively offer additional information.
For many designers, this news will come as quite a surprise, as the results of the study go against established norms of web typography, for example, an article on the Smashing Magazine website published in 2013 cited a font of 12 points (16 pixels) as the most UX-friendly. In a way, this data on the impact of an 18-point font could be a UX designer’s secret weapon.
Images
It’s impossible to talk about visuals without mentioning images. Our brains process images very quickly – it only takes 13 milliseconds. This processing speed allows us to assimilate information quickly, allowing us to move on. For example, if we see a picture of a shoe on a website, we immediately understand that we are looking at a shoe, or rather its image, so once we identify it we have two choices: either to search for data on the price of these shoes, or to move on, if we are not interested in buying shoes (in general or shoes in particular).
Numerous studies show that the use of high-quality images increases the conversion rate. However, it is important to use images correctly and in the right context. Here are some impressive examples:
An online store offering products for pregnant women increased its conversion rate by 27% by starting to use images that show the product from all sides
Brick House Security added images to search results on the site, resulting in a 100% increase in conversions
Medialia Art, an online gallery, increased its conversion rate by 95% after adding pictures of artists’ paintings to its homepage
It should be noted here that each example given is unique in its own way. That is, what works well in one case will be less effective in another. This is why it is very important to test all changes related to the visual component of site design. Nevertheless, it is obvious to everyone that images affect user perception, and affect it positively. Statistics published on Jeff Bullas’ website show that an article with an image gets 94% more hits than text without an image, business contact searches are 60% more likely to be successful if there are links with images in the output, and the number of press release views increases by 45% if they are accompanied by an illustration.
Even small changes in visual design can lead to significant improvements in the user experience and, as a result, higher conversion rates. Visual cues and overall site appeal are not only a smart decision in terms of design improvements-it’s a good business decision.
