How I failed my brainstormings and what I learnt
Read about our new project, a conversational interface that assists office workers and teams by handling administrative and repetitive tasks.
First impressions matter. People tend to make quick judgements, it is no different in the case of digital
When you hear of “Visual Design”, what is the first thought that pops up? Do you think of something aesthetically pleasing, flashy animations, or do you picture the countless vividly colored screens from inspiration sites, such as Dribbble?
The majority of people tend to associate Visual Design with simply beautifying digital applications, websites, or general interfaces, reducing its scope greatly. Although it does indeed possess this attribute, there is so much more to it than just making something visually appealing.
In this article, we will take a look at what Visual Design actually entails, what its role is within the universe of User Experience, and also dwell shortly on a few cores of its fundamentals.
Let’s first start with a simple definition:
Visual Design is the use of imagery, color, shapes, typography, and form to enhance usability and improve the user experience.
The keywords to pay attention to are “enhance usability” and “Improve user experience”.
Where is Visual Design in the universe of User Experience?
The main goal of visual design is to make the product usable, by drawing the attention of the users to the right functionality and information.
This is achieved by the implementation of text, colors, and images to enhance the overall user experience – this is the core concept of visual design and its place within UX.
Does that mean visual design is unimportant?
Before we answer this question, let's take a look at 2 examples below.
When viewing the two visuals please make a mental note of your first impressions and answer the questions listed below.
A certain impression, be it a good one or a bad one, was created simply by scrolling through a website, without interacting with it nor reading its content.
What does that mean? It means first impressions matter!
Many studies have been conducted to prove this point:
So to answer our question of whether visual design is unimportant would be “No, it is very important when used right with the main goal in mind.”
If you want to attract your users from the first impression, you have to pay attention to how your product looks, not just how it works.
Principles of visual design
Let’s take a look at some attributes which we can recognize and understand how and why they are implemented.
(A great source to refer to for better understanding is ABNUX's Youtube video)
is the distribution of the visual weight of objects, colors, texture, and space to create a stable feeling. In the example below
is a strategy that aims to draw the eye of the user to a specific element by creating a focal point in the design.
The visual arrangement of elements to imply importance and convey the core message.
The reuse of elements in the same or similar fashion throughout the design to create patterns. This creates predictability which makes users comfortable.
The use of whitespace to manipulate design elements into either being grouped as similar or be separated. Whitespace is key to determining and communicating meaningfully using Proximity.
The relationship between two or more elements in a design and how they compare to each other in a certain context.
Now that we have just learned these principles, the big looming question that comes to mind is,
Why are websites like Craigslist successful?
Websites such as Craigslist have notoriously and proudly been labeled as ugly websites that still work. So how are websites like this still around if visual design is important to retain users?
There are many reasons listed below as to why it works. Would you agree or can you think of a different reason?
In short, Usability and familiarity trump visual design.
Usability v/s Visual design: Aaron Walter’s Pyramid
The next question we must tackle is, how do we leverage this decision? How much time should we spend creating a visually appealing website v/s the time we must spend on making the product usable?
Take a look at the diagram of the pyramid by Aaron Walters. He suggests that once we have successfully made a product functional, reliable, and usable ONLY then does it make sense to spend further resources on making it pleasurable by improving the visual design.
A beautiful product that is not functional will not satisfy any user’s needs. It lacks purpose and no matter its aesthetic appeal, the product must first satisfy a need and be usable. On the other hand, if a product is functional but unreliable it will still leave the user unsatisfied.
In the example of Craigslist, the product is functional, it is reliable and usable. Those are the three main needs to be fulfilled before adding on the layer of delight (visual design) to the product.
So, beyond visual design what are we looking for in a decent website or application?
According to the Nielsen Norman Group, a consulting firm that is famous for its research in the user experience field, usability is defined by 5 components:
considers how easy it is for users to accomplish a task the first time they encounter the interface and how many repetitions it takes for them to become efficient at that task.
In order to understand whether your application is learnable, you can ask questions like:
is the speed with which people do tasks after they have learned the interface.
Important note: efficiency ≠ number of clicks.
Many teams tend to measure the efficiency of digital tools by the number of clicks needed to complete the task. This is a dangerous approach that can lead to wrong decisions.
For example, clicks can be substituted by the hover functionality, which is not always intuitive and user-friendly. The number of clicks also depends not only on the design but also on the task complexity — so an absolute number, applicable for all tasks, will not tell you the truth.
Not all clicks are equal: some result in long wait times (if, for example, a new page is loaded) and others are instantaneous — for instance if an accordion is expanded.
Simply counting the number of steps in a process misses out on what users actually do, and the opportunities to provide them with a less frustrating experience.
When users return to the design after a period of not using it, how easily can they re-establish proficiency?
Affordances vs Errors
A design affordance is a clue about how an object should be used, typically provided by the object itself or its context.
False affordance is one where the user expects one thing, and something else happens. In the digital world, this would include things like:
https://userinyerface.com/ is a great example of false affordances. Try it yourself!
If you’re considering an expensive redesign, first consider the usability of your application or website. If your website is highly functional, and is already being used, a fancy redesign has the potential to tank your profits and site growth.