My personal list of UX tasks

I asked myself about my current tasks, so I put this list together. I will update it from time to time. Anyway, I would love to hear some feedback.

Table with a laptop and pen & paper to write a list
Green Joe’s Coffee Company, Greensboro, United States

Define

☐ Discuss UX-Requirements
What is the goal of the initiative, the new service, product, or feature?
(Involved roles: Stakeholders, Product Owner, Developers, Conversion Analysts, UI Designer)

☐ Ensure that you (and your teammates working on this matter) will be invited to all critical and relevant meetings.

☐ Stakeholder Mapping
Which stakeholders are part of the initiative?
How often should you invite stakeholders for discussions and meetings?

Analysis and Research

☐ Aggregating existing data like Adobe Analytics data, Mouseflow sessions, heatmaps, user feedback, previous UX-Tests, market research, personas, etc.
(Involved roles: UX Researcher, Conversion Analysts, UI Designer)

☐ Perform a Competitor Analysis

☐ Apply Usability Heuristics to your existing interface designs.
(Involved roles: UI Designer)

☐ Create/Ask for Personas and Customer-Segments
(Involved roles: UX Researcher, Conversion Analysts)

☐ Aligning UX with user psychology
E.g., task-positive vs. task-negative
(Involved roles: UX Researcher)

Concept

☐ Find User Needs

☐ Create User Flows

☐ Create Wireframes

☐ Define an MVP with stakeholders
(Involved roles: Product Owner, Developers, Conversion Analysts)

☐ Define testing-KPIs for AB-Testing
(Involved roles: Product Owner, Developers, Conversion Analysts)

Design

☐ UX-Writing (Set tone & voice, check for legal guidelines, etc.…)
(Involved roles: UX Writer)

☐ Layout & Design (e.g., UI pattern, icons, logos, illustrations, animations)
(Involved roles: UI Designer)

☐ Accessibility Testing
(Involved roles: UI Designer)

☐ Prototyping
(Involved roles: UI Designer)

Validation

☐ Usability Tests: UX Test, Friendly UX Test, Hallway Test, Guerilla Test, etc.
The format has to be selected based on time and budget.
(Involved roles: UX Researcher, UI Designer, UX Writer)

☐ Conduct an online research community
(Involved roles: UX Researcher)

☐ Set up AB-Testing with testing-engineers and conversion analysts
(Involved roles: Product Owner, Developers, Conversion Analysts)

Discussion & Handover

☐ Visualize insights

☐ Gather open questions for stakeholders or product owner & developers

☐ Optimize UI assets
(Involved roles: UI Designer)

☐ Share code examples. (If needed and/or wanted)
(Involved roles: UI Designer)

☐ Share accessibility guidelines. (Inform about WCAG standards)
(Involved roles: UI Designer)

Featured

Accessible colors for user interfaces

This post was originally published on medium.com

WCAG Color Contrast

As a designer, you should use high contrast colors. It will help users of websites and apps to perceive the content, regardless of visual impariments, technical restrictions, and external influences. WCAG is a standard that should help designers defining a distinct contrast ratio.

Three levels can be reached:

“A” for large text and UI elements, which require a contrast ratio of 3: 1.

“AA” is required for regular text. It requires a contrast ratio of 4.5: 1.

“AAA” requires a contrast ratio of 7: 1.

WCAG contrast ratio of white on HSB colors. Brightness from 100% to 30%; All colors with 100% saturation
WCAG contrast ratio of white on HSB colors. Brightness from 100% to 30%; All colors with 100% saturation

Hue, Saturation, and Brightness

We are searching for colors that can suit our products requirements.
For that reason, we need to understand which colors are available and how they behave.

To get an overview of all colors, we look at the whole color wheel using the HSB color space. With 10°-steps, we move around the entire range of colors. In gradations of 10%, these colors become darker and, therefore, more contrasting. All colors stay at 100% saturation. I measured the WCAG contrast ratio for white text on each color varian and brightness gradation.

36 colors that reach the WCAG AA requirements and a second line of the same colors with improved brightness
36 colors that reach the WCAG AA requirements and a second line of the same colors with improved brightness
36 colors that reach the WCAG AA requirements arranged based on their brightness
36 colors that reach the WCAG AA requirements arranged based on their brightness

Colors for AA contrast ratio

With this method, we have now selected colors, which approximates ​​how specific colors behave. Afterward, I improved the colors’ brightness until we come as close as possible to the target contrast ratio of 4.5: 1 to keep the colors bright and clear.

Talking about colors

Red remains fairly bright (B90%) with a contrast ratio of 4.5: 1. Yellow is immediately no longer recognizable as yellow. It is not particulary suitable for digital use since this color cannot be reproduced in RGB very well. On the other hand, Green provides very diverse tones and is easy to recognize but relatively dark for WCAG AA (B50%). Blue, Purple, and Violet are particularly suitable for high-contrast text and UI elements, as they already offer good contrast and so appear exceptionally pure and bright.

36 colors that reach the WCAG AAA requirements and a second line of the same colors with improved brightness
36 colors that reach the WCAG AAA requirements and a second line of the same colors with improved brightness
36 colors that reach the WCAG AA requirements arranged based on their brightness
36 colors that reach the WCAG AA requirements arranged based on their brightness

Colors for AAA contrast ratio

When looking for an even more apparent contrast, it becomes more difficult. The method proves to be even more imprecise here, and again we can set the colors significantly brighter by a few percent.

Talking about colors

Like the AA contrast colors, Red, Violet, and Purple remain relatively bright (B70%) with high contrast and are easily recognizable. Green is already very dark (B40%) and is no longer very apparent. The most transparent colors are the Blue tones, which can be recognized most clearly with almost constant brightness (B100%).

12 colors that fit either AA or AAA contrast requirements
12 colors that fit either AA or AAA contrast requirements

A good starting point

Based on our approach, we found a couple of very suitable colors. However, it will not be sufficient to adopt them. When choosing colors, we have to use the colors in context and test them to decide. If there is already a brand color, the colors should be adjusted. Also, the accessibility for color-blind users must be checked. To find the right colors based on the colors we saw, the 10°-Hue steps can be broken up to look for more suitable colors between these color tones. The saturation does not have to stay at 100% either. It can be matched to an existing color to achieve a harmonious appearance.

Scouting for accessible colors

Post was initially published on medium.com

Designers are looking for recognizable, distinguishable, and in the form of text legible colors for all of our users. The aim is for all users to perceive a page’s content, regardless of visual impairments, technical restrictions, and external influences. To achieve this goal, we want to look for a role model, a website that already uses accessible colors. A good starting point is to reach the WCAG requirements.

Start with the contrast ratio.

WCAG can be measured easily. For example, if you use Google Chrome, you can use the “View Page Source” tool to select every single element of a website and check the contrast ratio. So when we look for examples, we’re looking for websites that already match the WCAG-AA requirements. This means that the contrast ratio is at least 4.5: 1 for regular texts and 3: 1 for large texts. UI elements must also have a contrast ratio of 3: 1.

Role-Model Ecommerce

For our example, let’s look at a high-turnover website that is more challenging than a simple landing page due to its complexity. This mostly meets the requirements of WCAG AA. To make it simple to understand the use of colors, I have abstracted the visual elements and replaced the font and icons. This will help us focus on the colors on the page.

A visualized summary of all colors used on zalando.de with a focus on color contrast ratios
colors — zalando.de

Let’s talk about the colors

The purple (# 6328e0) is, so far, an unusual choice. It has a high saturation (S82%) and is not dark (B88%). It is a very noticeable color that stands out due to its high saturation. This color is easy to read despite the high brightness in combination with white.

The color ratio of white on purple (7.21: 1) and purple on grey (6.27 :1) both meet WCAG requirements.
Color contrast #6328e0

The green (# 00875a), which is labeling sustainability products, is also highly saturated (S99%). Compared to the purple, it is much darker (B53%). This is no surprise because most colors have to be relatively dark to achieve a sufficient contrast ratio. To keep the color clear, the darkness was compensated with the high saturation. For a color that is supposed to stand for “sustainability,” the green shade is astonishingly blue, and therefore, it looks less natural.

White on green (4.55: 1) meets the WCAG requirements. White on orange (3.32 :1) doesn’t meet the WCAG requirements.
Color contrast green (#00875a) and orange (#ff4e00e)

Orange (# ff4e00) is the brand color of the website. It is used very rarely and serves, for example, to mark the number of products in the shopping cart and as part of sub-brands and services. This color only partially meets the contrast requirements. The combination of white text and orange background would only be rich in contrast if large font-sizes were used.

A word about the “Myth.”

We might notice a phenomenon looking at the orange. Subjectively, this color combination will appear quite legible to many. Of course, WCAG AA is a good starting point for choosing colors. But we still have to check the selection of colors subjectively. Conversely to this example, there are also color contrasts that are sufficient according to the contrast value but are subjectively rather challenging to read. There is a good article on the subject that illustrates the problems with WCAG. However, I would advise against understanding WCAG as “not working.” It is a guideline that should technically show us how good contrast is between text and background. We should see it as a good anchor in discussing accessible color rather than an ultimate recommendation. A decision for or against a color should be made by testing our content with people.

Check color conflicts with Adobe Color.

We now know that the color of this website could mostly be considered accessible due to its contrast. Before we follow this interpretation, we still have to check to what extent these colors offer sufficient distinguishability for all forms of color blindness. This can be found out quickly using the Adobe Accessibility Tool. The colors are readable and there are no conflicts. All colors can be displayed simultaneously on one screen and remain distinguishable for all users. One of the most familiar visual impairments is the red-green weakness. The more yellowish orange (# ff4e00) and the blue-tending green (# 00875a) are not a problem in this case.

The primary colors used color checked with the Adobe Accessibility Tool — no issue for color-blind users.
https://color.adobe.com/create/color-accessibility

Use Stark Accessibility Software

With the Stark extension for Figma and Sketch, you can already simulate how specific colors work together while working in the design tool and whether these remain distinguishable for the different types of color blindness. This means that you can immediately see how distinguishable the colors stay in their appearance.

What’s next?

We discovered a good role model in our search for a website with accessible colors and want to create our own accessible color palette next. To do this, it is essential to determine what requirements we have for our colors. Further, we want to use these colors in context and then finally check them in a test.

If you’re wondering why does someone write about colors, there are several reasons. On the one hand, there is the European Accessibility Act. This will be incorporated into German law (and any other European, national law) by 2025. That makes it a necessary task to make the Internet more accessible. Planning phases and implementation can be tedious, and, especially when it comes to colors, the discussion is often wholly subjective. However, the subject of colors can be approached very methodically, which would make this subject less emotional. You can study color design, and that was also part of my studies. That is one of the reasons why I feel called to promote this topic in my circles.

Soft UI is fun but not very practical.

This post was initially published on medium.com

Soft UI, which reminds us of skeuomorphic design, is a trend we observed recently in 2020. We tried it out ourselves and found out it’s fun to use, but you have to be careful with it. We want to approach this trend by applying the current trend to our app.

left: REWE App | mid: Soft UI | right: Skeuomorphic Design (both by Heiner Henrichs)

A trend called “Soft UI.”

Last year, the small, more or less hidden trend, Soft UI, appeared between all the already known trends on Dribbble. As we studied it carefully, we found many notable characteristics that we also find within current flat user interface designs. It seems that flat user interfaces have regained new three-dimensionality over the years. With more and more shadows or variants of card-styles that indicate interactions, our Flat Designs are becoming increasingly plastically. That’s something where today’s Flat Design and the new soft UI trend have something in common.

iOS Calculator App | left: Skeuomorphic | right: Flat-Design | Ressource: https://belitsoft.com/…/android-design-vs-ios-design

It reminds us of Skeuomorphic Design.

Before we test to design or app in Soft UI, we were looking back at Skeuomorphic Design. If you think of the old, last known Skeuomorphic Design of the iOS calculator, we are pretty sure that this design doesn’t fit in today’s flat design world. After looking at the frequently shared new interpretation of this old design trend and putting aside our doubts, we started experimenting with design elements in the skeuomorphic style. After that, we come across a surprising insight: The skeuomorphic design had something very characteristic that we haven’t seen for too long. It starts to please us very quickly.

Skeuomorphism but on higher resolution screens

While experimenting with skeuomorphic and Soft UI, we saw this trend getting more popular. Michal Malewicz about “Neumorphism in user interfaces,” videos about Neumorphism by Gary Simon, or tutorials about Soft UI by Caler Edwards, brought us closer to this trend.

Skeuomorphic-Design by Heiner Henrichs

After a few experiments with buttons in the Skeuomorpic design style and other designs in the form of the so-called Soft UI and a redesigned version of the flat design screens of the REWE app, it quickly becomes clear to us:
The Skeuomorphic or Soft UI plastically appearance of elements like buttons created for today’s devices and resolutions (e.g., iPhone 11) is different from that on old phones. It sounds like an unabashed thesis that is initially just a feeling. But then we realized that these elements’ appearance is different — an even more realistic one than before.

Our first attempts were not perfect, but something seems to work very well on it. It feels satisfying to design elements in the Soft UI style, and it produces the “I want to press it”-impulse, much more than a flat button does.
But what is the reason for that feeling?

Soft UI-Design elements by Heiner Henrichs

Soft UI has something honest and also wonderfully complicated.

Our impressions on Soft UI

Compared to classic Skeuomorphic design, Soft UI is like an approach from both sides. It is a further development of flat design, but it is still apparent: it borrows its style from Skeuomorphism. And that is precisely what makes it a fascinating and valuable trend. Soft UI is simpler and more manageable to use but supports this intensified impulse to press a button. But it also shares the limitations of Skeuomorphic design because it is also restricted in its nature. It is not as flexible as a flat design. The impression on our devices during prototyping is a strong and almost inviting visual design. As designers, it triggers a feeling of satisfaction because this type of design (even more when recreating Skeuomorphic Design) is fun to create. This design has something honest and also wonderfully complicated. Trying to recreate reality on a screen and abstracting it straight away to make it more applicable was worthwhile for the experiment alone.

Soft UI-Design by Heiner Henrichs

Conclusion

A word about the cons of using Soft UI.

It’s hard to compete against the flexibility of flat design. With Soft UI, we are limited to a less variable style, more complex, and certainly not always suitable for everything. You have to stay at specific rules to achieve a plastic appearance. That may sound like we aren’t good designers, but you come up against the limits quickly when you try it yourself, which makes you question the style for production use. When converting a design to Soft UI, it might be necessary to rethink your whole concept. It isn’t effortless and takes time to adapt all elements accordingly.
The use of colors requires much creativity. Colors of buttons on identical background colors do not work per se. Button colors and similar shadow- or gradient colors do not always support clickable elements’ three-dimensional appearance.

And a sentence about the positive sites of Soft UI.

It is a fun and unusual challenge to design our already favorite products differently. Recreating Skeuomorphic in 2020 or using Soft UI and seeing it on modern devices is fun. The discussion about the visual impression of a Soft UI made us reflect on our current designs.

The impression is different. We don’t feel like reintroducing an old design language, but it feels like something new. And that is the most important thing. It shouldn’t be about adapting all elements of our design and displaying them in Soft UI. It should be about to use it in individual cases, possibly for more minimalistic applications, to emphasize some elements that should have a highlighted click intention.