The final polish- color, typography, and animation in UX design

In our last articles on UX design, The Art and Science of User Experience Design and UX design: Exploring user behaviors for design success, we explored the planning and prototyping stages of building a user-centered product, and touched on the topic of UX laws that are deeply rooted in human behavior. Now it’s time to breathe life into our functional prototype using on-brand color and typography. We will also look at how animation can enhance the user’s experience to make it more delightful and fun to use.

Final polish and handoff

Now that you’ve stated exactly what the solution does and clearly defined flows of action users take to achieve their goal, it’s time to polish those wireframes with a clean user interface. Note that prototyping can happen even after the graphical elements like buttons, fonts, and colors are defined. This is because a lot of digital products are offered as a service and are constantly updated with new features, thus requiring iterations of different functions.

First, we’ll look at how color theory can aid us in crafting beautiful UIs and thus enhancing the user’s experience.

Impact of color

Color psychology in UX is important in convincing the user to make a purchase and also in establishing brand communication towards users. Since color is considered as the easiest element to remember, this element is applied in UX as well as marketing.

Color is a visual stimulus that immediately provokes emotions and reactions. Psychologists suggested that color impression accounts for 60% of the acceptance or rejection of a product. Thus, a bad color combination can greatly affect the whole user experience, with the same effect as a bad copy or a slow page loading time. 

We all have color preferences, however, there are similarities of preferences among same age groups, between genders, and cultures. For example, research shows that bright colors like yellow and red are favored within a younger age group, while shorter wavelength colors like blue, violet, and green are preferred by adults and the elderly.  Color meanings can also vary from cultures: in the West, white means innocence, aspiration, and hope. In Asia, however, white color is for death, mourning, and bad luck. As a UX designer, you need to be aware of these cultural connotations, especially if you are marketing for a specific location or culture group.

It is also important to factor in the number of colors used. We usually only stick to a few (one or two colors), and tend to use a lot of white space with accents of vibrant color to attract the eye to that particular element, usually in a way of a call to action (CTA). If you do use too many colors, especially if they’re all super bright, you’ll lose hierarchy with everything fighting for attention. 82% of all companies only use up to two colors incorporated in their logos.
 
The ‘60/30/10’ rule is that you have a primary color, which takes up a 60% ratio, and then a secondary color which takes up 30% and lastly an accent or touch of color which takes up 10%. Note the colors used in Instagram’s onboarding flow:

Parts of Instagram’s onboarding flow

Type

Typography in UX/UI design should increase the legibility of the message, increase engagement rates, complement the copy, and bring the overall user experience to a higher level. Good typography will capture attention and encourage users to start reading. That’s why UX and UI designers, UX writers, copywriters, and other marketing specialists often work together – to deliver enticing and captivating content that will look as good as it sounds.

Good fonts, proper spacing, and intelligent choices of colors and contrasts will make users engage more with the text of your digital product. Additionally, focusing on typography in UX/UI design also builds the image of your business. When the overall typography matches the brand identity, it leaves the impression that a company has its affairs in order. Such an impression immediately elevates users’ trust levels and builds recognition.

• You should use a maximum of two typefaces in your digital product. More than that will cause noise and disruption the readability.
• In case you don’t have a copywriter or UX writer in your team, always choose to make your text simple and sweet.
• Test the scales, animations if you have them, colors, and whitespaces; see what works best within your preferred users.

Animation

UX and UI designers use animation to guide them around the interface, alert users of a change, influence users’ decisions, and indicate a relationship between elements—among other uses. UI animation also reduces the mechanical feel of a website or app, creating a much more natural and intuitive experience.

In UI design, animation can be functional or decorative. Functional animation guides and informs the user in real-time, whereas decorative animation is an essential storytelling and branding tool. The most common UI animation types tend to fall into these four groups:

• Micro-interactions
• Loading and progress
• Navigation
• Storytelling and branding

Example of micro-interaction animation that informs and delights the user in real-time

Final thoughts

We learned that while some people prefer certain colors to others, color plays an important role in perceiving and experiencing the product, and we should use it sparingly and in a way that guides the user to a specific action. Typography is also an important factor when perceiving the brand and tone at which something is presented – above all, make it legible and easy to read! Lastly, we learned that animation can aid in experiencing our interface in a more fluid and dynamic way as opposed to a static transition. All these should be taken into consideration if we want to create unique and delightful user experiences.