The Good, the Bad and the Ugly: A Story About Design and Friction
mins to read
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?
- In-depth user interviews
- User shadowing
- Usability testing
- Mouse/click tracking
- 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?
- When friction appears at the main user goals, like registering, completing the purchase, and so on.
- The navigation/search/filtering is not designed properly so it takes forever to find some essential info, such as customer service or email.
- User flow is overcomplicated and causes too many errors.
- 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).
- 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.
How to Create a Strong Product Vision (Examples and Templates Included)
We all know the Johnson & Johnson company that sells pharmaceuticals and consumer packaged goods. In the early 1980s, their best-selling product was Tylenol, a painkiller that brought around 19% of the company’s profit.
But a terrible accident has happened and 7 people were reported dead after consuming Tylenol. As it occurred later, an unknown suspect put cyanide capsules in some of the Tylenol bottles. Johnson & Johnson did not wait for further escalation and immediately called back all Tylenol. They have lost 100 million dollars, but saved more people from risk.
For Johnson & Johnson, it was a tremendous hit that could end the story of a hundred years of success. However, the company’s reaction was immediate and brilliant. And thanks to their precise actions taken, they quickly won back the users’ trust and still remain the leader in their niche.
How did the company know how to react and how they so quickly took the decision of withdrawing the dangerous product without proof that all Tylenol was poisoned and knowing it will cause a huge loss of money?
The answer is that in times of crisis Johnson &Johnson has turned to their vision statement, which clearly indicated that their responsibility towards customers is their highest priority. All their actions were aligned with their vision and it let them survive the crisis.
This is one of many examples showing how a short vision statement can define your success and even save the company. This small and often underestimated document is, in fact, one of the crucial pillars for your product development. A well-defined product vision provides direction, focus, and organizational clarity.
As a digital design agency working mostly with SaaS businesses, we also have noticed that teams with clear product vision are more motivated towards a common goal and, as a result, more successful.
In this article, we would like to talk about how to create a good product vision for your product or startup. And we have prepared some solid examples and product vision templates as a helping hand, so keep reading.
What is product vision?
There is no universal definition of product vision. It can be a statement or a short document. But most important a product vision should describe the purpose of your product, highlighting what problem it solves and whom it serves. A well-crafted product vision reflects what direction you want to go in and how people will benefit from your product.
We can categorize product visions in two groups: functional and aspirational. As the names suggest, these groups represent different types of goals that are designed to push teams in different directions. We will give examples of both later, but it is up to you what type of product vision represents your goals better. You can also combine both in a product vision document.
The product vision statement/document represents your product’s end goal. It’s what you want to accomplish, how you want users to think of your product, and the position you want to be in. That is why product vision is a great filter for all your further decisions should go through. And with the help of such a filter, you can always estimate if the product is meeting its objectives.
Why do you need a product vision?
If you are a startup founder or a company’s product owner, you are the first person to understand the importance of product vision. It's what gives you focus and energy. A clear vision allows you to identify the opportunities in any market and take action with confidence.
It also helps you to lay out your goals and keeps your team heading in the right direction.
The product vision provides employees with a common goal. It helps them understand the purpose of their jobs and motivates them to work harder. A solid vision aligns people, keeps everyone on the same page, and as a result, reduces potential conflicts.
If you fancy the agile methods then you’ll definitely want to have a product vision as a North Star for your team.
Product vision also improves productivity. No kidding. The alignment between stakeholders and within the team leads to:
- shorter prioritization meetings
- simpler agreements on implementation details
- faster minimum viable product (MVP) delivery
Last but not the least, product vision is one of the most powerful tools in your marketing arsenal. The product vision is the most important tool for any company selling a solution. It is used to articulate your product's mission. Product vision gives customers an understanding of what to expect from the company and its products.
We hope that by this point you are already convinced that product vision is worth investing your time and effort. But how to craft a strong vision for your product? Let’s find out.
What makes a good product vision?
The main problem with product visions is that they often get lost in the process of new feature releases, bug fixes, and changing requirements from stakeholders. It's like this big whiteboard full of hopes and dreams getting dusty over time. How can you make sure that your product vision withstands time and challenges? Here is what makes a strong product vision:
- It highlights your single main goal.
- It is short, precise and accessible.
- It does not turn into requirement specifications.
- It captures the team's excitement and shares a sense of purpose.
- It remains valid even if the product slightly changes direction. As the father of Lean Startup Eric Ries said in his book "A pivot is a change in strategy, not vision".
If you have ideas of where you want to take your business, now is the time to write them down and create your product vision.
How to create a product vision that rocks
For starters, let’s agree that a good product vision is not something that a product owner crafts in a vacuum. Even if you are a solo founder, it still makes sense to invite people who can validate your ideas and can help you with creating a product vision.
For bigger teams, relevant stakeholders, key team players should be involved in the co-creation of a vision. Gather the team for more creative brainstorming and make sure that everyone takes this meeting seriously. Motivated brainstorming group will deliver the best results.
Clear agenda for the meeting will help to keep everyone focused and get a product vision draft ready by the end of this strategic meeting. We would recommend several techniques that can help you define a product vision.
One effective technique is to ask everyone in the group to write what is their vision for the product. Then participants hand the note to the person next to them and everyone edits the statement they received. Repeat the procedure several times. Compare the statements the group has created and see what they have in common.
Contrast your ideas with other viewpoints or perspectives. Think of what you want to accomplish but also of what you won’t be doing on this path. For example, ‘What areas of the product will we develop?’ vs ‘What areas we will not focus on?’. Such practice is very useful in solidifying the vision.
Here are a few more questions you can ask to figure out what your product vision is:
- What's your first impression of this product?
- What do people need and want from this product?
- How many people out there have the problem that our product solves?
- Where is your product in the current market?
- Does the technology exist to make this work?
- Who is the ideal customer for your company's product?
- Why will they buy this specific solution instead of another one?
Another helpful technique is to use an empathy map. It’s one of the design thinking practices that deepens your understanding of your users and aligns the team around a common idea. That brings you clarity and results in a more meaningful product vision.
To have better results from the empathy map, conduct simple user surveys in advance. The data collected leads to a deeper understanding of potential customers and as a result, a stronger and moe realistic product vision. The research you do for your product vision will help you later with your product design, so it makes sense to invest your time in understanding your users.
You can write the product vision from scratch or use the special tools that can help you to shape the vision. For example, Mural offers templates for product vision.
When it comes to style, use the customer language for your product vision. Don’t overwhelm users with technical jargon. Explain your idea in very simple human words and write from the heart.Some outstanding examples of product vision
Every product vision is unique to the product being created. Remember we talked about functional and aspirational visions? A typical functional product vision answers the most important questions about your product in a simple and structured way.
Your public version of product vision may be less straightforward and sound more like an inspiring intention. Here are some product vision examples from world’s best tech companies that should give you a good sense of how it can sound like.
Roblox is an online game platform and game creation system.
Here’s what the company says: “Roblox’s mission is to bring the world together through play. We enable anyone to imagine, create, and have fun with friends as they explore millions of immersive 3D experiences, all built by a global community of developers”. It’s a simple, yet a crystal-clear statement that explains how and for whom Roblox is developing its product.
Hardware startup Camtouch builds a solution that turns any screen into an interactive one.
Their vision is to “Make the world interactive with accessible solutions”. This statement reveals the company's intentions for the global market. And they do change the game-based learning field for the good.
When Zoom entered the market, there were well-established competitors like Skype and Google Hangouts. But Zoom’s vision was to “Make video communication frictionless”. And that’s exactly what they did and how they won millions of clients over the world.
Who hasn’t heard about Falcon 9? You know, the first orbital-class rocket capable of reflight. Here’s how SpaceX presents its vision for this product. While Zoom and Camtouch were examples of more aspirational ones, Falcon 9 vision is a great example of a functional approach.
In 2007 Steve Jobs a great visionary presented iPhone. Smartphones were already on the market. However, Jobs started his keynote by saying, “Every once in a while, a revolutionary product comes along that changes everything”.
This was Apple’s vision for the first iPhone: “A revolutionary phone, an iPod, and an internet communicator together in one product. Apple reinvents the phone”. And they did. The touchscreen and access to the internet have forever changed the way we use phones. It also influenced the the design industry setting up a demand for responsive design. And it all started with a vision.
Product vision statement template for you
After such great product vision examples from world-known companies, it’s natural to feel pressure to craft your own one. To help you overcome the fear of the blank page, we have collected some product vision templates.
Product vision template
It’s okay to eliminate the part about the competitors’ products in your public vision statement. But having that defined for yourself armors you with awareness.
A product vision statement is a short version of a product vision and focuses more on a final goal. It can go like this:
(Our product) is designed to (achieve these goals)
current solutions are not meeting (these goals)
These examples of product vision templates should help you remain laconic and won’t let you miss an important point.
A solid product vision is a strong strategic tool that you want to have in your product arsenal. It can be a document, a statement or even a video that sets out who the product is for, what problem it solves and where it adds value to the users. It is essential to always keep your product vision statement in front of you to remind yourself why you began this journey.
We hope that our guide was helpful and you are ready to begin building your product. Eleken team is there for you to create the design that would reflect your vision. Don’t hesitate to contact us.
To learn more about strategic development of a product read our other article on product roadmap.
How Not to Design One More Product That Would Look the Same as the Competitors?
Well, just make something different, hello? Why do we even write an article to answer this simple question? Because there’s more to it. If making something novel was that simple, there wouldn’t be so many similar projects around.
For years of experience in product design, the question of “how to make a product stand out” has been one of the most interesting challenges to date (and we have lots of interesting challenges). This article is dedicated to summing up our experience and showing some ways of how to make an original product.
Why do products look the same?
Let’s look at the very beginning of work on the product. As UI/UX designers, we know well that competitive research is a very important stage in the design process. Knowing the market is essential to build a successful product. The downside that this knowledge brings is the rush to match competitors.
When a founder sees that other products have something that their product doesn’t have, they hurry to get the same feature. So instead of focusing on their strengths, they try to race on many tracks at the same time. Where does it lead them?
The term “featurism” appeared in the 1960s to describe weird architecture, and later made its way into racism studies and, finally, product design, known as featuritis or creeping featurism.
It describes a situation when a product grows by adding new features constantly to keep up with the competitors. On one hand, it often comes from active listening to users requests (which is highly praised in the field of user experience). One the other hand, it may end up in a bloated software where numerous features overwhelm users and negatively affect the overall product design. As a result, a feature creep is born.
If you haven’t got enough weird terms in this paragraph, here is one more: feeping creaturism that is used to describe the feelings that developers have when they are tasked with creeping another feature into an already bloated product.
And now, the last weird term: feature karma. It is a rule: when you add a new feature that makes the product more complex, you have to take away one of the previous ones. Easier said than done, though. Later we will give you some tips on how to avoid creeping featurism.
Here is an example from Victor Papanek book, “Design for the real world”. Back in the 60s and 70s when people used slide projectors, Kodak was leading the market with a new invention: slide projectors with gravity feed systems.
It was produced by both Kodak USA and Kodak Germany, but with some differences. US projector had several models ranging from $60 to $1,500. Each one had various features added, like remote control or extra lenses. Also, each one had an advanced version for professional use, called Ektagraphic (+$10 to 20). They were more resistant to short circuits due to special insulated wiring (why wasn’t it a default feature for all the models?).
At the same time, projectors produced in Germany had just one simple model, Kodak Carousel ‘S’ which included the safety feature and sold for $75. All the additional features could be bought separately and attached to the basic model. The difference in approach was so big, that some people in the US ended up buying their projectors from German Kodak (although back then the shipping wasn’t as easy as it is now). Long story short, US projectors were feature creeps.
Modularity is one of the ways of addressing the issue. When talking about software products, it means making a basic product with the essential set of features and adding the new ones that can be downloaded and used by those who need them.
Another familiar case of a feature creep is Facebook. They have been trying to redesign the main page to make it less cluttered, but there is still a much work to do. To learn more on design for simplicity, we have some tips from our UI/UX experts in the related article.
It scrolls a few pages down…
When less is more
If you think of two products working in the same niche, one of them has way more features that the other, which one has more competitive advantage? The former one. But what if the second one is much easier to use and is cheaper? Now it’s more complicated.
An example can be Canva. For graphic editors, it’s hard to compete with Adobe in terms of features. So, Canva did the opposite. They provided very basic features that allow for lower quality graphic editing. Yet they have a clear competitive advantage: price and ease of using.
To use Canva, there is no need to pass a learning course like with some Adobe products. Plus it saves time with numerous royalty free images and templates. And the quality is good enough for social media materials. By the way, many images on this blog are created with Canva — and it works great for this purpose.
Users who need less features than a product is offering are called “overserved”, and they might as well switch to a more basic alternative.
How to deal with creeping featurism?
First two methods are modularity and targeting overserved users, as described above. Another one is making the simple features visible and understandable for users who use the product on the basic level, while “hiding” more complex features further in navigation. Advanced users will find them with one click, while newbies will not be scared off with a complicated look.
Here’s an example. One of our clients, AdvanResearch, had a product for foot tracking analytics. It was used mostly by professional analysts who usually dealt with complex features set. At some point, the company decided to widen their pool of users and include business owners who were new to this kind of tool.
The objective of redesign was to make a product more accessible to the new audience. Here is what we did to address this:
- added tips behind question marks
- simplified navigation with fewer sections
- split the reports into “standard” (presets for new users) and “custom” (for those who know well what pieces of data they need and can assemble report to fit their needs).
When more is necessary
As designers, we often prioritize simplicity, clean visuals, and minimalism. But we also understand product managers who have to satisfy the users and can’t prioritize “clean design look”.
“Some things just have to be complex”, says our lead designer Maksym. If you scroll through the list of our case studies, you’ll see that we often work on sophisticated tools for professionals in such fields as code security, geo-mapping data analysis, and others. It’s not the same as creating niche lifestyle apps. There has to be many things on the screen and it’s not always possible to just put away some of them.
And whenever you see a product that looks and feels simple, remember that you don’t know the amount of work behind this simplicity. To have a glimpse on the secrets behind minimal-looking products, read our article “Complexity of simplicity”.
When clients come to us and explain what they want to get, they often give references. Often it sounds like “we want something like Stripe”. When designers go through initial research and start working on visual style, they also show some of the references to client. It allows the team to align their image of visual direction to make sure the final result will match the expectations.
We like Stripe design, too, and we understand why product owners want their products to look like Stripe. Yet our designers don’t just copy-paste their style. There are some ways of responding to clients’ wishes and avoid copycats.
For example, when our designer Alexandra was working on Spoonfed, a food logistics product, she created icons inspired by the ones that Stripe uses. This subtle detail added a little spark to otherwise minimal and classic design.
It’s hard to draw the lines between copying references and syncing the visual mood of the team. Experienced designers have a sense of it, so the basic advice we can give here is “pick a good designer and trust them”.
How to experiment with design
Product owners often prefer to play safe and go for neutral design. They say, “it is a B2B product, our clients are serious analysts, we don’t want it to be acid purple”. That’s the position that we always respect.
Behind the fear of experiments is often a fear of lost time and money in case the users don’t appreciate an “out-of-the-crowd” design. We argue, however, that the risk can be minimized.
What is the smart way of experimenting with design? Ask a designer to make a few versions of visual styles and ask users what they think of it. We often do this task for our trial (which lasts for three days), and then it’s up to the client whether they want to dare or play safe.
Once they do dare, their product won’t look like “everyone else’s”. Is it your objective? Then let’s schedule a call and start a trial one week from today.