What Does a UX Researcher Do?

If you have been reading some materials on UX design, like this blog, you might have read that friction is something that needs to be eliminated, as theyslow the usage and annoy users and so on. So, less friction equals better design?

It may be contradictory but, when there are issues in UX, some of them can be solved by removing friction and others… by adding some friction.

As with most things in this world, UX design isn't black and white. Sometimes friction just slows down users, but in some cases, it plays an important function, for example, preventing errors. How? By making the process of committing errors longer and harder.

As a UI/UX design agency we consider it our mission to explain the difference between the good, the bad, and the ugly types of frictions. Let’s start from the beginning.

The story of UX friction

“UX friction” sounds like an advanced UX concept, but “good” friction has been around for a long time. The legendary "Are you sure you want to delete this file" is an example. Or the "agreement and conditions" message that doesn't let you click Agree without even taking a look (which is what we all do).

The friction effect is present in many situations outside of user interfaces. For example, the indie rock band, The Haven, which was popular in the 90s, wrote in  their rider that they needed a bag of M&M's before the show, but all the brown candies had to be taken out. If the condition wasn’t met, they could cancel the concert.

Why would they do it? Because they can, you would think. Rock stars can afford to be demanding and nasty, so why not? But there is a very practical reason to do such a pointless (at first glance) thing.

‍

The objective of this weird demand on the rider was to detect event organizers who are not attentive and professional enough. The logic was as follows: if the organizers didn’t take care of M&Ms, chances are they also didn’t properly read the serious parts of the rider regarding the technical requirements. Such negligence could result in technical problems and even unsafe situations.

This is especially important for the design of dangerous objects, such as weapons or nuclear plants. Here, friction saves people from fatal errors.

This and other awesome stories are from the talk of marketing pro Mehmet Dogan, if you need more insights into the topic of friction in UX design. 

But let’s get back to the history of the term design friction, or UX friction. So, we can’t find who was the first one to use it, but we know who found a good name for it.

Joel Marsh is a UX designer, Founder at Peekerton and author of “UX for Beginners”. He was writing about Anti-UX in his book, and nobody bothered until he posted it on Twitter. People started commenting that anti-UX was not the best name and suggested calling it appropriate friction instead. He decided this name was less controversial, and we can agree with that.

According to Joel

‍UX friction is something that helps beginner UX designer to expand their minds when they start thinking of design as a way to lead people, or change behavior or create behavior rather than showing just visual stuff.

So let’s uncover how friction works in design and serves your needs.

Creating value by waiting

When you feel like spending thousands of dollars on a bag or a dinner, you have to… wait. For example, a dinner at a fancy restaurant in your area would cost you a hundred dollars and you can book a table instantly. However, to get a table at a top-starred Michelin restaurant in Modena, Italy, you can’t just come and book the place. You leave a request, then wait patiently until the restaurant decides whether they accept you or not, and then wait a few months more until there is a table available. 

Why do people who spend a thousand dollars have to wait for more than those who spend one hundred or ten dollars? Because they feel more special knowing that this experience was so exclusive and anticipated it. 

Although the results are very different, both luxury restaurants and not-so-luxurious digital products use the same effect: sometimes waiting time increases value.

In UX design, an artificial “waiting time” is added to create a labor illusion. This psychological effect is used to gain more trust from users. One of the first to use this trick was Kayak, a flight booking service. After entering all the data and clicking the “search” button, Kayak doesn’t show the results immediately. Instead, it shows a message that the website is in the process of checking many sources to find the best connection for you. Even though it didn’t need that much time, the message made users feel like there was a lot of “work done”. So, they valued the service more.

Many other booking services copied the idea, and now we are used to it.

How to detect where design friction is needed?

For that, you need thorough UX research, of course. First of all, detect most common errors. UX research methods that will be helpful:

• In-depth user interviews
• User shadowing
• Usability testing
• Mouse/click tracking
• Surveys
• And so on…

Next, think of the ways of complicating the user flow that leads to the error.

This might be:

• Classical “Are you sure?” pop-up
• Making the button of neutral grey color, not accent
• Hiding the button
• Hiding the button even further…

But of course, this list is not exhaustive. Who knows, maybe you will invent something new?

An alternative to UX friction can be the "cancel" option. This includes the "unsend" button and a good old trash bin that deletes files after 30 days (it’s such a basic thing in the OS, but not the default option in web apps, somehow).

Ok, error prevention is clear, but what about other types of design friction? Often, they are not "essential", and even if the problem is serious, it's not that easy to detect. 

Do users really need that "loading" sign on your website? I'm not sure. Even A/B testing won't always help. In most cases, it's about the UX designer's experience and knowledge of common patterns.

Appropriate friction vs inappropriate friction

Let’s define the main types of appropriate UX friction by objective:

• Preventing errors 
• Increasing perceived value

These two types of friction are more complex, as described above, but there are two other types we’d like to discuss more in detail.

• Entertaining users while they have to wait

Entertaining users is a different kind of objective. It appears in the spots where the friction (waiting) is already present. It makes users learn something new or smile. At the same time, it may prolong the waiting time and distract them, but the overall user experience is improved due to positive emotions and the feeling of personal touch.

For example, Duolingo offers small witty quotes or interesting facts while loading the next lesson, so users feel they are entertained and do not notice the friction. 

• Getting users familiar with the product

It includes all those pop-up tips and contextual onboarding that are very common nowadays. These tips draw attention, create friction, and experienced users might be annoyed by them. On the other side, people who open the app for the first time will benefit from such friction as it familiarises them with the product.

For example, for a data-science product MVP we designed a small onboarding in a form of a walkthrough that would get users started. We used pop-up messages that engage users. When you ask users to make an action instead of just showing how the app works, they learn faster.

It is important to make the walkthrough as short as possible. Users often get frustrated by long onboarding sequences that can’t be skipped. That’s why we added numbers for each pop-up so that users know how far they are until the finish.

Each of these cases needs a certain amount of friction. Too much would ruin the user experience. So, when is friction bad?

1. When friction appears at the main user goals, like registering, completing the purchase, and so on.
2. The navigation/search/filtering is not designed properly so it takes forever to find some essential info, such as customer service or email.
3. User flow is overcomplicated and causes too many errors.
4. People spend more time than expected and get annoyed (e.g. loading bars and waiting circles that take way too much time and annoy users).
5. When a product becomes too obnoxious trying to get user’s attention (pop-ups show up every time you open the page and the “unsubscribe” takes longer than blacklisting an email address).

And, to make things even more interesting, there are “ugly friction” cases when friction is “bad” from user’s view but helps to reach some business goals. For example, the websites that make it extremely hard to reach customer support officers. Users might hate it, but from the business point of view, it helps them minimize the number of support tickets (and the number of customers, in some cases…).

Our experience working with UX friction

At Eleken, we mostly deal with B2B SaaS products, where there is little space for sophisticated friction, as the products are typically complex. Still, appropriate friction is important in our work as it prevents users from making big errors.

Let’s take our client Ricochet360 as an example. We were hired to make a redesign for this marketing platform. The lead management screen had a flaw: after selecting items on the list, the accented red button was “Delete all”. It means that users were quite likely to press it accidentally. However, “Delete all” is not the most common command.

To prevent them from making that error and stressing out later on, we hid the “delete” function behind the three dots menu. It would make the process a bit longer, as the user has to find it and then click twice instead of just once. This is appropriate friction.

What does design friction teach us?

Friction is not always good or bad. It can be appropriate, it can be annoying, it can be unnecessary, and can be essential. The situation is what makes friction good, bad, or ugly.

The main lesson is: users are not perfect, and when we design we have to keep that in mind. We can’t work with success only, we have to think of errors and imperfections. Because our design shouldn’t be “perfect” for designers, it has to be comfortable for users in the first place.

If you feel that your product doesn’t fit into common design patterns and could some expert help, contact us – we’ll be glad to help you.

Designing the great looking user interfaces is only half the battle for grabbing and keeping users’ attention. Your design must also be readable and legible. You can have the most visually appealing user interface in the world but if users have to struggle to read or understand it, they'll quickly become frustrated and leave. ‍

Eleken designers are passionate about flawless user experiences. That’s why we know a bit about good UX readability and would like to share some tips on how to improve it in this article. But first, let’s briefly recap what we mean by UX readability.

What is UX readability? 

In a nutshell, readability in UX answers the question whether your website elements are easy to follow, understand, and clearly recognized by all users.

But when diving into this topic it’s important to understand the difference between readability and legibility. Legibility defines how typeface characters are easy to distinguish and read, or in other words, a visual text clarity . Meanwhile readability refers to the complexity of words in written content.

From a UX designer's standpoint, however, the readability definition  is broader and applies to the clarity of both text and graphics on the page, how they work together and look on the page. With better readability, design has the power to keep users engaged or scare them away. 

The purpose of UX readability was best caught by Typographica:
The term readability doesn't ask simply “Can you read it?” or “How fast can you read it?” It also asks “Do you want to read it?”

A good UX readability also means that the content of your product is accessible to different groups of users equally. For example, color blindness affects 4.5% of the population and 2.2 billion people live with impaired vision. Every designer realizing the importance of readability should be aware of these issues when creating user interfaces. The ability to distinguish good and bad readability is also an important skill. 

How to know if the UI is unreadable?

We strongly advise testing your prototype for readability before moving on to designing the actual product. Usually experienced designers can point out fonts or graphics that look repulsive right away. And sometimes it’s so obvious that anyone can tell that a website readability could be better. For example, take a look at the image below - do you want to read it? I personally have doubts.

You can go through five checkpoints to spot bad readability:

• Size and width of the font. Imbalance in fonts is the first sign of bad readability.
• Height and width of the line. Too long lines, or those that require scrolling, or extra effort lead to bad readability.
• Case type. It’s best to mix capitalized or lower-case letters for better readability. 
• Color of the text. Poor color choice or colors that mismatch the background instantly ruin the readability.
• Contrast. High contrast between font and background colors make the text unreadable.
  

If the readability is poor it makes sense to reconsider the design. Changes depend on the screen size, screen technology, screen contrast, font size, color, and style of the text. Such optimizations can improve readability and user experience in general. But before that, let’s talk about typography.

The crucial role of fonts in readability

Fonts are one of the most important factors influencing readability. Typography is an art of arranging letters of the text in order to make written content readable and visually appealing. It is the whole big field in design so, unfortunately, there’s no single recipe on which fonts to use for great readability. 

Some fonts are good for longreads, others are good for titles and headings. Some work better in small or big font sizes, in printed or digital format, and some are just outdated. Skilled designers always keep the subtle balance between modern trends and user needs.

But it’s not just fonts that make your product readable. We have prepared some tips that will help you create a better experience for your users. 

10 tips on how you can improve UX readability of your product or website

These are some tips that will definitely help you increase readability and legibility. Ironically enough, we illustrate them with examples of how readable interfaces should NOT look like. Ready? ‍

1. Use fonts wisely. Remember that different fonts work better in different sizes. Avoid too complex fonts or too popular fonts, as they are everywhere and annoy users. For example, once popular gothic fonts or Comic Sans are way out of fashion today and easily spotted by users.

2. Use fonts that are easy to read on your users’ screens. This is especially true for mobile devices, where screens are much smaller than those on desktop computers, and you have a lot less room to present information, so you need to pick a font carefully.

3. Choose colors that are distinct from the background, but avoid too high contrast. Color choice is important since it allows us to highlight certain information while de-emphasizing other things.

4. Keep visual hierarchy. Break up text within each screen with headings and subheadings, as well as pictures and graphics to ease the reading experience.

5. Keep line length short enough so that users don't need to scroll horizontally across the page when reading a line of text (ideally, no more than 70 characters per line).

6. Don't use too many fonts within each screen - stick to one or two at most.

7. Choose a font with both uppercase (capital) and lowercase letters and avoid capitals lock effect.

8. Noisy backgrounds can make even the best font illegible. Be very careful with video backgrounds as they can have the same noisy effect.

For example, check out the image above. It’s a Single Earth website that overall has great readability. But on this webpage, the text accidentally overlapped with the text on the speaker's hoodie creating such a noisy background and decreasing readability.

9. Spacing around text blocks is equally important. Cluttered blocks of content frustrate users. Give them some space to better digest information you are presenting.

10. Keep your users in mind. Take into account their background, reading skills, level of interest, an environment they read in. And don’t forget about accessibility-make sure the designs of your product can be perceived not just through color alone, that text can be read by users with imperfect vision and is accessible to senior users as well as to other groups.

In short, keep things distinct, mind spacing around text, use legible fonts and font sizes and match them with the most suitable backgrounds. You’ll know the readability is good once you see it. 

Great UX readability examples

After all those examples of bad readability in the previous paragraph let your eyes rest. Enjoy examples of good user interface readability and get inspired for your own projects.

Refera

Recently our team made a redesign for Refera, a dental management platform. The medical management digital product has quite complex functionality, so readability here is extremely important and helps users navigate the platform. 

We used delicate light green shading to highlight the buttons. Text blocks are organized with frames which helps to distinguish interface elements easier.

Eleken designers have chosen Plus Jakarta Sans font for both landing page and the platform. The test hierarchy and separate text blocks create a spacious effect. All these aspects do not overwhelm, but comfort users of the product and provide great readability. 

Mindist.io

Young startup Mindist.io has built an app for mindfulness creators. Pay attention to the application’s Start page. To create a more relaxing mood, it has a nature photo in the background. The subtle dimming effect in the picture and well-chosen legible font in bright white provide perfect readability and effortless user experience as a result. 

Readable

Readable is an online tool for readability testing that works with Nasa, Netflix, Harvard University and others. No wonder their website readability is flawless. Structured, spacious, and appealing to users, starting from blocks of content to fonts and color choice, hats off to their designers!  

Conclusion

In the modern digital era, when written and graphic content are more mixed and users are overwhelmed with the number of interfaces they interact every day, good UX readability is more important than ever. 

Readability is just a part of the equation for a successful product. But it’s what your users will see first. Make everything else work in its favor. 

Our designers compromise neither readability nor aesthetics. We will help you create readable interfaces and design a product your users will love. Drop us a line and let’s discuss details.