69

I am really concerned about the effects of visual design on user experience, but as this may seem too broad, let me clarify it a little.

My statement is that, if the user can find the information he or she needs, because of thoughtful information design, then he or she would be satisfied, despite of the quality of visual design. I mean that we continue using an interface even though the visual design is not so well thought out as long as we are satisfied with its functionality. However, the opposite is rarely the case.

So to narrow down my question. Does (good or bad) visual design really affect UX when other design considerations have been thought off?

  1. Do you have any case study or research that can support this?
  2. Do you have any personal experience in support of this?
  • 19
    Does one need really research to point out that the look of the UI is, of course, going to affect the experience? Ultimately, humans do judge books by their cover. :) – DA01 Jun 2 '15 at 16:37
  • 3
    Very good question. To emphasize a point that some answers have missed -- the question concerns UX, not just usability. The two are interconnected and related things, but not the same. – Evil Closet Monkey Jun 2 '15 at 20:04
  • 5
    The short answer is that visual design affects one or more aspects of the overall user experience. It may not necessarily be the most important part in the context of helping the user achieve their goals, but it is inevitably tied to the perception of the user. Another way to think about the question would be to ask: "Does good/bad visual design really affect UX?" And I think you'll agree that the answer is YES, but in what way? That's the $64,000 question. – Michael Lai Jun 3 '15 at 1:10
  • 1
    Devil's advocate response: If visual design matters then how do you explain the amazing success of Microsoft's crappy products? I've been using Outlook for almost 20 years and it seems to me it's never the same interface twice (no, I'm not an idiot). And yet it has a consistently high market share! So I think Michael is on to something with his response. – Dave Kanter Jun 5 '15 at 19:01
  • 1
    Worth noting that in some cases, visual design does not have an effect on the user experience. People with limited sight or no sight who interact with an interface still have a user experience, just one that doesn't rely on sight. That said, people who do experience the visual portion can have an enhanced experience if the visual design follows conventions designed to convey information. – lunchmeat317 Jun 8 '15 at 0:04

12 Answers 12

83

Don Norman's "Why we Love (or Hate) Everyday Things" opens with an account of a famous study on this, conducted by N. Tractinsky in 1999. He tested four different designs of an ATM machine, where each could have either good or bad usability, and good or bad aesthetics (a 2x2 research design). He reported that

the degree of system's aesthetics affected the post-use perceptions of both aesthetics and usability, whereas the degree of actual usability had no such effect.

The original paper is available here: What is Beautiful is Usable.

This was later replicated and expanded by Tractinsky and colleagues, his website offers a brief review of the different studies.

  • 1
    I didn't expect that, especially the highlighted part of your answer! By aesthetics we mean good use of typography, colors, spacing etc, right? By the way, I am still somewhat sceptical until I read the whole research, but this seems like a great starting point! – gpelelis Jun 2 '15 at 9:41
  • 14
    -1 for ATM Machine (just kidding) – landonz Jun 2 '15 at 22:23
  • It's also known as the "Aesthetic-usability effect", there's a good short summary of it and the evidence in the book Universal Principles of Design (but I can't see any way of linking to that online) – user568458 Jun 3 '15 at 8:28
  • @user568458 could you mention the author of it? – gpelelis Jun 3 '15 at 18:45
  • 1
    @user568458 Here's a link: goodreads.com/book/show/130730.Universal_Principles_of_Design – obelia Jun 4 '15 at 1:17
72

Yes, visual design affects user experience

Here's a common meal with only one visual difference. It's enough to drive a dramatically different user experience:

enter image description here

There is more formal literature on this topic, but since others have already provided citations, I will add one more a simple illustration. The following two forms are almost identical except for visual design:

enter image description here

The form on the left is generally more readable than the form on the right:

  • The text has consistent color (black)
  • The contrast ratio between text and background is higher (vector distance in color space between black and purple is higher than between light grey and white)
  • The form fields are delineated with more contrast
  • The centered labels provide a clear indication of workflow

Yet, most users will report a better user experience with the form on the right, because it has better visual design:

  • It has better grid alignment (labels are left aligned with fields)
  • It has better layout consistency (fields and button are same size)
  • It has a calmer color palette with less surprising/conflicting colors
  • It has a more familiar appearance as a form
  • 3
    Is your final sentence supported by any actual studies or is it only your personal opinion (valuable though that might be). I'd love for you to be right but I'd prefer objective measurement. – RedGrittyBrick Jun 2 '15 at 14:18
  • 6
    The right actually follows a consistent design that other websites employ, making it familiar. Familiar designs are easier to use because users recognize more quickly what they need to do. – Resorath Jun 2 '15 at 18:37
  • 2
    @plainclothes while the design attributes and guidelines are subjectively termed, the results are not subjective: they can be measured. For example, I'm certain that if you A/B test these two forms on a set of random web pages, the measured results will be starkly unambiguous on which one users prefer. Therefore, good UX design is not only informed by facts and precision, but also by experience, intuition and heuristics around what users are likely to prefer. – tohster Jun 2 '15 at 22:40
  • 2
    @Tonny well, if a person can't read it, that is a UX problem. – DA01 Jun 4 '15 at 19:06
  • 2
    @Tonny that's not correct. The left form has been designed so there is enough contrast and shadow between the colors that even someone who is totally color blind (ie sees monochromatically) can read it. Moreover, for users who have visual acuity problems, the left form is still more readable because the font weight and contrast are greater than the right. – tohster Jun 4 '15 at 19:48
24

You could start by reading interaction-design.org's entry, by Noam Tractinsky, on visual aesthetics. Remember also to read Jeffrey Bardzell's comments on the entry.

Then you could check out Tractinsky's seminal What is beautiful is usable:

A multivariate analysis of covariance revealed that the degree of system's aesthetics affected the post-use perceptions of both aesthetics and usability, whereas the degree of actual usability had no such effect.

and Is Beautiful Really Usable? Toward Understanding the Relation Between Usability, Aesthetics, and Affect in HCI by Tuch, Roth, Hornbæk, Opwis and Bargas-Avila:

Results show that aesthetics does not affect perceived usability. In contrast, usability has an effect on post-use perceived aesthetics. Our findings show that the "what is beautiful is usable" notion, which assumes that aesthetics enhances the perception of usability can be reversed under certain conditions (here: strong usability manipulation combined with a medium to large aesthetics manipulation).

Whether designer thinks that usability in itself is sufficient enough for good user experience or that good user experience is a sum multiple aspects including look, feel and functionality, I always think it in terms of Nielsen-Norman scale.

17

There were scientific studies in aviation, that show, that visual aesthetics of control dashboards in plane's cockpit affects effectiveness of flight operations.

So visually appealing design affects usability. But what was interesting, that when the system was too beautiful for operators, they perceived it as too intelligent and ideal, so the effectiveness was decreasing (because of loosing control over system).

To get more, please check the book "Aviation Human Factors, 2nd edition", Chapter 16, "Flight Deck Aesthetics and Pilot Performance"

  • 1
    Do you have more information about the "too beatiful for operators"? How did that affect the effectiveness? – gpelelis Jun 2 '15 at 14:19
  • 3
    @gpelelis As it was told in the study, when the user percieves the system as beautiful and stunning, he also perceives that the internal part of the system — it's content and functionality — is also "beautiful" (highly intelligent and more self-dependent). So, users can pay not enough attention to the system, what can lead to errors. Also, if content/functionality is not so good as "extra-stuning" design — it decreases motivation and loyalty. – Alex Ovtcharenko Jun 2 '15 at 17:20
  • 1
    This is a discussed topic in social robotics. When the robot is 'over-designed', users tend to think it is more intelligent than it is. This could be a positive, if people are pleased with it, but it can be bad, if someone assumes the robot knows what it is doing so they don't stop something bad from happening. – user-2147482637 Jun 3 '15 at 9:35
  • 1
    @AlexOvtcharenko: I think that's more due to the Peltzman_effect rather than just having a stunning design. – Lie Ryan Jun 3 '15 at 17:27
17

I agree with most of the points that have been made so far, so I'll just add one that hasn't been touched on yet.

One of the things often overlooked about visual design is the impact that it has on the user's trust. If you've ever gone to a small-business website that has been constructed using one of the many. template-based, cheap, hosting websites, you'll know what I mean . . . the pages are generally completely functional and you are able to get done what you need to get done, but sub-conciously, there is often a feeling of "Is their product/service going to be the same quality as their website? Can I even trust that I will get what I purchased?"

Fair or unfair, the quality and effort put in to constructing a website or application to make it look good and perform well (in addition to be functional), has an impact on how the user percieves the owner's overall opinions of/approach to quality. Attention to detail and going out of the way to provide a good UX implies that the owner of the business/app is going to pay attention to the details and overall experience of the transaction, delivery, product, service, etc.

I know of people who won't submit personal data (for purchases, registering, etc.) through a website if they don't think it looks professional . . . they will seek an alernate provider.

3

User gets either comfortable or otherwise in a very short time frame - how user perceives is very important. Also, User forms an opinion based on previous experiences (that's one reason why part of the design has to follow history) and when mixed right triggers placed at right points (that's where eye trackers help a bit) aids user experience. So, yes, visual design is important.

3

Only can answer on point 2):

After 5 years of mobile UI design I can tell you function > design. Small screens ask detailed information where less is more. Colors however (visual design) can optimize the UX.

One of my projects was an mobile app for farmers (they never used a smartphone before). With the right colors (red for cancel / green for ok etc) they managed to understand what would happen after they tap on a button. Icons also help instead of using text. So yes, visual design can optimize UX when using in a valid way.

  • So you suggest that when design is directed by usability theory, it can optimize UX? – gpelelis Jun 2 '15 at 9:21
  • 1
    How about function <-> design? Function without design is a command line. Anything that uses a form of GUI (or NUI as some imagine mobile) has been designed. The question is how thoughtful and successful that design is. – plainclothes Jun 5 '15 at 22:28
2

I pointed this out in a comment, but there is an element of “answer” to it as well …

Fuzzy logic

Studies on how “visual” design effects user experience are hard to nail down. Even Don Norman’s great writing on the subject has an element of mystery or art. You won’t find anything that says,

“This was undesigned and this was designed and here’s the results.”

That’s not possible, is it? Somewhere in there it was designed, even if it was just a bunch of fields assembled according to the whims of an engineer. Can you call it un-visual? Of course not. It’s a fuzzy continuum of bad to good, which is inherently a matter of personal and cultural preference in the first place.

Fuzzy measurement

So how do you measure something with fuzzy edges? Strictly speaking, you can’t with any degree of accuracy. So you rely on your brain to fill in the gaps and interpret human responses to different solutions — visual solutions that are made up of various sub-disciplines of design.

  • It's not about designed vs. "undesigned". It's about well designed vs. poorly designed. – Paul Groke Jun 6 '15 at 13:44
1

A lot of good discussion here already, but I just thought I would add a reference as the OP seems to be wanting case studies to support the UI and UX link.

I reference this every now and then when thinking of design aesthetics and have seen it in action. Users (myself included) seem to not be as fussed about minor UX annoyances as they (including myself) are impressed with the design aesthetics.

https://www.nngroup.com/articles/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.

  • Your answer would be more useful if you quoted the relevant text from the link because links can get broken or moved. – RobbyReindeer May 3 '18 at 6:32
0

I'll use a simple example to show how visual design can impact user experience, particularly usability. The science behind it has to do with how you are driving the end-user's eye down the page. One of the best things you can do with sites or applications that display large amounts of data is to use Gestalt Principles to create groups of data. Done properly, the brain will no longer perceive the information as one large data set, but chunks of data which is much easier to process.

It's easy enough to create 2-3 large chunks the user can bounce to while ignoring the others. An example of this might be a site with a header, left nav, and content area. The user can very quickly bounce to the content if they are confident in the current location on the site, but what happens when the content needs to be broken down into more chunks.

At this point we're reaching a point where we're nesting chunks inside of other chunks. If we simply use white space, we might wind up with too much white space and that won't work. If we use borders, we'll wind up with a visually noisy page that will almost destroy all of the hard work we're trying to do to make the visual search task easier for the user. You're brain will processes visual noise, whether you're directly attending to the information or not. Less brain process effort = higher performance, so it's always good to reduce noise.

So if we've determined our chunks, what do we do to solve the problem? Depth and color add additional dimensions that can create Gestalt groups just as effectively as borders and white space without all of the messiness. By using a different background color on a certain group, or by triggering a text color based the state of items, suddenly all of the chunks we want to represent are present. The user's eye can freely bounce around based on their personal intent, and the items that aren't of interest are easier to ignore. "I'm interested in all active list items in my queue" - they're colored green, "I need to find a certain item in this list" - all list heading backgrounds are light blue.

The "art" part comes into play when you chose where and what kind of color or depth you want to apply where. Applying it properly mainly comes from experience right now as most of this stuff isn't documented (as far as I can tell). However, google's materials design language does a good job of explaining how they apply there visual design and why. I recommend it if you're interested in this topic. However, and in all honesty, visual design is really the product of research and engineering. The science comes from neuroscience, cognitive psychology, experimental psychology, and the like. The research comes from end-user research, activities like persona building, task analysis, and A/B tests. The engineering comes from the application of the previous to to user interfaces.

After several years, I've found that all parts of UX, including visual design, have very little to do with personal preference. The design should present itself based on your research and understanding of the domain, just like any other field.

-1

From the Norman study:

... post-use perceptions of both aesthetics and usability

Be wary of subjective assessments. They have a place, but always try to get some objective data too (speed, accuracy etc).

  • 3
    I'm not sure I follow how this answers the question though. Visual design is not only subjective. Can you expand on this answer? – JonW Jun 4 '15 at 9:41
-2

What's "usability"? If you are measuring productivity, you're going to have a hard time beating extremely basic, low-information, high-performance UI. Examples: "greenscreen" mainframe systems and craigslist. If you are measuring user satisfaction or engagement metrics, probably the opposite.

So if you want your users to get a lot done with less chance of error, focus on "usability" (aka calls-per-hour). If you want your users to feel good about the app's value, focus on design.

  • 1
    Notice that the question is about how VisD impacts UX, not just usability. It's an important distinction. – plainclothes Jun 2 '15 at 19:55
  • 1
    This assumes usability and visual design are mutually exclusive concepts. – DA01 Jun 4 '15 at 19:07

protected by Benny Skogberg Jun 6 '15 at 4:59

Thank you for your interest in this question. Because it has attracted low-quality or spam answers that had to be removed, posting an answer now requires 10 reputation on this site (the association bonus does not count).

Would you like to answer one of these unanswered questions instead?

Not the answer you're looking for? Browse other questions tagged or ask your own question.