Visual Design in Usability Testing

Visual design is a large part of any website and is often the aspect of websites that people will most often remember. The visual design is how you choose to present your website and it is the first impression that users will have of your website.

Visual design can enhance the website and increase usability, if executed correctly

So, ensuring that the aesthetic aspect of your website is up to mark is essential to having an efficient and usable website.  

How to Test Visual Design

According to Kathryn Whitenton from Nielsen Norman Group , usability testing can be used to gauge the visual design elements on a webpage. However, caution must be exercised not to only focus on the first impression that the visual design leaves on a user. The details of the design, (such as font size, color, graphics, etc.) actually affect the usability of the website far more than the first impression.

However, details are far more challenging to measure than the first impression. Too often a user will only comment on the website’s color scheme when actually a problem may lay in the font size being too small. In order to uncover the truth about the entire user experience regarding visual design and make informed tactical design choices, Whitenton has laid out two main techniques to keep in mind: assessing opinions and behaviors and comparing multiple versions of designs.

Assess both the opinion and behavior of the user

Give the user a few tasks to complete while on the site and simply observe instead of asking questions. Through the process of observation, the way that the user interacts with the website, how much time they spend, and how much they comprehend will reveal important information about the website’s effectiveness.

Compare multiple versions of the design to each other

This technique is where usability testing will give you an advantage, since it will allow a user to compare two different design options at the same time. This strategy is called competitive usability evaluation. Again, make sure to observe first and ask questions later. It is also important to note that the most effective way to compare designs is to vary the order in which they are presented to users. If one design is always presented first, it may affect the way users interact with the second option, so switch up the order to ensure the best results. 


Usability Testing of Icons

Icons are essential in visual design. Small, simple, and representative, these graphic symbols dictate how users navigate and interact with websites.

Despite their simplicity, icons have the potential to be confusing if interpreted incorrectly. Therefore, it is essential to test the usability of all icons on a website before incorporating them into visual design. According to Aurora Haley from the Nielsen Norman Group, there are four main critera to icon usability:

  • Findability – Is it visible on the page? Is it too big? Too small? Incorrect color?
  • Recognition – Can the user identify the symbol? Is it commonly used?
  • Information scent – Can users anticipate the interaction with the icon? Is the purpose unclear?
  • Attractiveness – Is the icon aesthetically pleasing? Or is it poorly designed?

Why Do We Need Icon Usability?

It is commonly assumed that a poorly designed icon is easy to spot. After all, everyone knows the icon that represents the phone, right? Which image below is the correct icon?

Icons depend entirely on the user and the audience. The two icons above mean the same thing, but one appeals to an older audience and the other to a younger audience. Choosing may seem simple, but usability tests should be conducted.

How to conduct an Icon Usability Test

Several methods are available to test icon usability. For a more in-depth description of all the methods, read this article. This section will focus on the two main categories: out of context and in-context testing.

Out of Context testing refers to the practice of showing a user the icon in isolation. This means that the user will not have context clues provided by the rest of the webpage to figure out it’s meaning. This type of testing is helpful in determining the recognition and attractiveness aspects of icons.

On the other hand, in-context testing refers to the practice of observing a user interacting with an icon on a webpage. In-context testing allows for the user to evaluate the findability and information scent of an icon. If an icon is poorly designed or poorly incorporated into a website, users will likely have trouble interacting with it.


The Dangers of Aesthetics 

While it is true that visual design is the first impression of a website and is important to be tested, visual design can also present problems to the overall process of usability testing. It’s all too easy to get caught up in how to website looks and forget that the important aspect is how it functions. According to Kate Moran from the Nielsen Norman Group , users will often only remember the design elements from a website when asked to reflect on their experience. They will tend to be more tolerant of minor usability issues if they think it looks well designed. This is called the aesthetic-usability effect.

“The aesthetic-usability effect refers to users’ tendency to perceive attractive products as more usable. People tend to believe that things that look better will work better — even if they aren’t actually more effective or efficient.”

-The Aesthetic-Usability Effect

Essentially, this means that having a good visual design can trick users into liking a website that may not be the most effective. This can be used to the advantage of a web designer, in fact some companies, such as Apple, have built their entire brand on this effect. These companies rely on the audience being drawn to a product or website that is pretty over one that will function in the way best suited to their needs.

Designers need to find a balance point in between aesthetics and actual usability

However, the aesthetic usability should not be counted upon to make a website effective. Wouldn’t you rather have a website that is effective to begin with instead of one that tricks users into liking it? In the end, it is important to not focus entirely on visual design when conducting a usability test.

This Post Has 9 Comments

  1. Rebecca,
    Nice job on your blog post. I found it very interesting, informative, and enjoyable to read. The organization of your post guided me right from the beginning to the end through the use of headings and sub-headings. The visuals you used throughout the post really helped me understand concepts, such as the aesthetic-usability effect. I also really loved the visual of the butterfly as a representation of the difference between a wire frame and visual design because it was aesthetically pleasing to look at as well as informative.
    The part that most interested me in your blog post was the portion about usability testing for icons. I’ve never thought a company would need to test the use of icons in their website, but now it makes a lot of sense why they do. As you mentioned, different generations have different images they attach to certain things, like a phone, so depending on who your audience is for a website, different icons may be used to represent something, and testing the use of icons would definitely help a designer decide on what icon to use. For example, many websites like PacSun (https://www.pacsun.com/) and Nike (https://www.nike.com/), use the heart icon for items a user has liked/saved, so it would be confusing for users if other websites similar to these two started using a different icon. Many times, I feel like I don’t even notice these icons because they are so ingrained in websites and their meanings are already known, but I found an article, https://www.smashingmagazine.com/2009/03/how-to-use-icons-to-support-content-in-web-design/, that was very interesting to read. It describes how to use icons and why they are used.

  2. Hi Rebecca,
    Your blog post does a great job of describing key concepts when considering website aesthetics and connects them well! I liked how you divided your post up into three main sections, separating each concept while unifying each idea through smooth transitions. The section on icon usability was especially interesting to me. Icons are incredibly common and can help with navigation. However, as your visual of the two phones demonstrates, selecting the right icon can prove difficult when considering the audience of the site. I found an interesting article that outlines four different ways to use icons in mobile applications (https://www.smashingmagazine.com/2020/09/icons-mobile-apps/). While the ideas described are primarily for mobile applications, I found one idea quite interesting—“Turn non-icon elements into icons.” This section of the article described how apps with large amounts of content can be difficult to navigate, leading to users quickly giving up on them. This reminded me of the idea of the mobile-first approach when designing websites. The article included the example of displaying brand logos as icons beside soft drinks on the SONIC mobile app as one way to cut down on the amount of text present on an app at a time. The article also stressed the importance of not including too many icons within an application. The same can be said for websites, coinciding with your discussion of the potential dangers of aesthetics; too many icons or an intense focus on the design elements of a website can decrease a site’s usability.

  3. Rebecca,

    I enjoyed your blog a lot. You did a really nice job breaking down the different elements of the section and detailing the information to your readers. I found the visuals, bolded texts, and lines separating each section very helpful to aid in readability and accessibility as a reader. Right off the bat I think that you do a good job of grabbing the reader’s attention. You describe the importance of visual design and aesthetic and for me, the butterfly visual helps emphasize that idea and put a picture in my head of which elements of a website are attributed with the visual design. I thought that your insight about how usability is affected by font, color, and graphics often means more than the user’s first impression was really interesting and definitely something to note for us when creating a website. The talk about icons, and how different icons resonate with different generations, was cool to read about. It reminded me of a TikTok I recently saw about how when you ask a young kid what gesture they would use to make a phone call they simply put their hand flat to their ear to mimic an iPhone type of call whereas many other generations before them use their pinky and thumb to indicate a call. With this I chose to look into more things that younger gen z members will never understand like older generations do and I found quite a few interesting examples; I would definitely recommend checking them out! https://www.boredpanda.com/generations-difference-millennials-genz/?utm_source=bing&utm_medium=organic&utm_campaign=organic

  4. Rebecca,

    Nice job effectively providing readers information in your blog post. “However, caution must be exercised not to only focus on the first impression that the visual design leaves on a user. The details of the design, (such as font size, color, graphics, etc.) actually affect the usability of the website far more than the first impression.” This stood out to me the most. Sometimes a web designer focuses on how the website looks which can be a good and a bad thing. Just focusing on how a website looks can make your website ineffective behind the scenes. The site should provide an overall great UX. Visuals are not the only thing that make users’ experiences memorable. “It’s all too easy to get caught up in how to website looks and forget that the important aspect is how it functions.” This is true as well. Being caught up on the visuals can actually trick users into thinking that the site is effective when in fact the site doesn’t function well. It’s kind of like picking a beverage or food based on how it looks but not what it actually tastes like or how it makes your body feel after consuming it. Similar to the article First Impressions Matter: Why Great Visual Design Is Essential written by Peeo Laja, which talks about how first impressions matter. Participants were given tasks to do on websites. “Users gave high ‘usability and interest ratings’ to sites with high appeal and low ‘usability and interest ratings’ to sites with low appeal.” Sure looks are important but feeling is important as well. How does someone make their site memorable, learnable, and effective over just making their site look good? How does a designer provide user satisfaction when it comes to how a site function with great visuals of that site?

    https://cxl.com/blog/first-impressions-matter-the-importance-of-great-visual-design/

  5. Hi Rebecca!
    Your blog post about visual design adds a new layer onto the concept of user experience. The previous blog posts talked about the importance of going beyond, or kind of beneath, the visual design and making sure the website design is usable above all else. Those posts touched on the fact that visual design is important, and your post is the perfect complement to those. I especially love the first image of the butterfly. I honestly think that this says so much about web design and user experience. The information on icons is something I’ve never thought of, but I can definitely recall moments when I’ve found icons don’t make sense. Also, I think its really good that you mentioned the dangers of aesthetics! If a website looks too good that can have an impact on accurate testing. I found this article on the importance of using graphic design elements in website design. It discusses how much more successful a site typically is when the principals and elements are applied. There is even a section on how good graphic design increases usability by laying out and designing aspects in a way that is less confusing and naturally appealing. Nice work on the blog post!

    http://www.archimediastudios.com/corporate/2011/05/why-is-graphic-design-important-to-web-design/

  6. Hi Rebecca! I really appreciated how you explained the components of usability testing that are less talked about. Your blog made me realize that it is important to observe just as much as it is to listen in order to understand what was actually causing the user difficulties. The concept of icon usability is a small yet important thing that hadn’t crossed my mind before as well. It makes sense that certain groups of people would react better to a specific icon than others, and the designer needs to remember this when thinking about the sites audience. I also found the aesthetic-usability effect very interesting. I have observed myself being controlled by this factor when using sites and thought it was important to call attention to for our class as we begin user testing. I found an article (https://ux360.design/aesthetic-usability-effect/) that expanded on your points of aesthetic-usability effect and why aesthetic should not take priority over usability, along with talking about the reasoning behind this effect!

  7. I found this article very fascinating. I’ve always been obsessed with the look of websites that sometimes I forget that it needs to actually do the job it was made to do. In many cases, it seems that perhaps websites like to “dim down” their appearance to keep the user on track, which isn’t a bad thing. I’ve always been obsessed with aesthetics, so I can see myself getting easily distracted by the colors and design of a website. I’ve also been guilty of trying to make a website so beautiful, but I forgot to make it function properly. It seems, based on your blog, that there needs to be an equal and healthy balance of beauty and functionality.

  8. Hey Rebecca! I really enjoyed reading your article about the visual aesthetics of a website and how to test its success. I especially liked the graphic showing the balance between usability and aesthetics. Being someone who loves good aesthetics, I think it was very important for me to read about how it is easy to become over invested with the aesthetics and compromise the usability in the process. I thought this image resonated with this concept (https://www.google.com/url?sa=i&url=https%3A%2F%2Fuxdesign.cc%2Faesthetic-vs-function-nailing-the-balance-in-ux-design-bc7e969f9835&psig=AOvVaw0tcYAxoIQckoh0eERULxUP&ust=1602445974426000&source=images&cd=vfe&ved=0CAIQjRxqFwoTCIjKk8vmquwCFQAAAAAdAAAAABBh) because it is easy to think that making a website look good is enough, but art does not equal design. Design seems to encompass usability as much as it does aesthetic, and I never thought about it like that before!

  9. Rebecca,
    I found this to be a very informative post to read through. I had already learned a lot about the basics of conducting usability testing and it’s benefits from the blog post I had written, but I found some of the more specific details concerning usability testing to be extremely interesting. I found the example of icon usability testing to be interesting because it was something I had never quite fully considered before. It was my understanding that, while those icons may appeal to two separate age groups, both of those icons were essentially understood to mean the same thing no matter what age the audience was. This, I think, is still true, but it is also fascinating to think that at some point in time the latter landline icon will fade into obscurity and will no longer be commonly recognized. I think your entire post did a great job of organizing information using easily understandable titles and subtitles. I also found the concept of the aesthetic-usability effect interesting. It seems to me that at some point, making a website TOO aesthetically pleasing could pose a potential issue if the usability is not on par, as it would over time encourage some sort of frustration from the user. https://www.kevinrichard.ch/reconsidering-the-effect-of-aesthetics-on-usability/ I think this is slightly shown in this article, which discusses the effects an aesthetically pleasing website may have on usability testing, encouraging testers to rate a website higher than it potentially deserves simply based on the look of the site and not the actually effectiveness of it. I had never thought about this potential issue before.

Leave a Reply

Close Menu