Hi there! I’m Yura Turivny, a product interface designer with over 12 years of experience under my belt. Throughout my career, I have honed numerous techniques for crafting effective interfaces. However, keeping track of them all can be challenging. To make things easier, I have compiled this straightforward guide titled “7 Qualities of a Conversion Interface”. Here they are:
- High benefit ratio;
- Low logic ratio;
- Familiarity;
- Transparency;
- Farsightedness;
- Legibility;
- Comfortability.
I’ve selected these terms for their simplicity and ease of application in your daily work. Additionally, I’ve provided examples and a redesign of the main search page for the travel guide Localie.co to illustrate each quality.
Rest assured, I will keep things brief and engaging without overwhelming you with excessive definitions. Moreover, I will share insights on how I incorporate these qualities in practice. So, let’s get started!
Why any Interface is a Pain in the Butt
Before delving into the qualities, let’s address the concept of “interface resistance” and its impact on a product’s metrics.
A seemingly perfect interface is ultimately futile if the product itself lacks value for the user. Consider a faucet — if it doesn’t provide water, it’s simply a useless piece of metal. The value of a product is defined by its positive and measurable impact on someone’s life, whereas the interface simply facilitates interaction with the product to obtain that value.
An interface cannot hold value on its own.
Users must overcome the obstacles presented by the interface to access the product’s value — this is known as “interface resistance”. Fortunately, the “7 qualities” outlined in this guide can help mitigate this resistance and ultimately enhance conversion rates.
Now, let’s delve into the first quality: “High Benefit Ratio”.
—Hey, there’s a bunch of stuff on the screen that’s not really helping us out. Let’s tidy it up to boost that benefit ratio, shall we?
The “benefit ratio” refers to the proportion of helpful to unhelpful information displayed on a screen. Any content that doesn’t guide users towards making a decision or taking action reduces the benefit ratio.
The objective is to minimize the amount of information needed for users to make a decision, ideally narrowing it down to three or four key elements. For example, on IMDB movie cards, they only display the movie poster, title, and rating. Keep in mind, images matter too!
Grasping your product’s value is crucial when working on the benefit ratio. When I collaborated with Localie, we began with a workshop to create a “Hero Face” and formulated a job story based on that:
When I travel to a completely unfamiliar country, I want to have someone who can help me with any questions, so I feel safer, less lonely, learn more about the place, and create more memorable experiences.
A job story serves as an excellent template to encapsulate your product’s value. It’s worth noting that 34% of startups fail due to lack of demand for their product. So, if you struggle to create an honest job story, it might be time to reconsider working on the interface. That’s why the benefit ratio tops the quality checklist.
Now, let’s move on to the next quality and dive into some practical tips!
—How about we keep things breezy and reduce the logic ratio? It’ll help our users stay focused and engaged!
The “logic ratio” refers to the balance between essential and non-essential actions on a screen. Prioritizing crucial actions that contribute to the core value of a product is vital.
For example, many users favor Apple interfaces for their low logic ratio, while they may perceive Windows interfaces as more complex. To illustrate, MacOS Monterey’s Finder header features 14 controls, whereas Windows 11’s contains 26.
Despite their simplicity, MacOS interfaces are not functionally inferior to Windows. Apple designers employ the “progressive disclosure” principle, showcasing only primary actions and concealing secondary ones. Aiming for a set of three or four actions can help reduce “interface resistance”.
Take a look at the button layout in YouTube Music below:
- Shuffle and Radio take center stage, as they play music and deliver the main value of the product.
- Subscribe is a secondary function but can enhance the listening experience.
- Share is discreetly tucked away under the three-dot button.
It’s intriguing to see how groups of three elements frequently appear in everyday interfaces. For instance, each email in Gmail’s list displays only three actions and three informational objects.
Now, let’s examine how the “logic ratio” and “benefit ratio” operate in real-world scenarios. I’ll redesign Localie’s main page in a prototype to emphasize its essential elements, and then progressively refine it.
Benefit Ratio Improvements:
- Increased the number of cities, the list is raised above;
- Reduced the amount of text in the main screen and description block;
- Reduced amount of information in the feedback and people cards;
- Stories block removed;
- Redesigned the how it works block.
Logic Ratio Improvements:
- Duplicate search in the main screen is removed;
- Repetitive Search buttons removed;
- Sliders and tabs removed.
Next we will move on to the next three qualities and continue to work on the interface.
—A bit too out there, huh? Let’s make it a bit more familiar so people can relate and feel at ease!
People often resist change and may feel uneasy about the unfamiliar. Adapting to something new demands effort. The more familiar an interface is, the more intuitive and “invisible” it becomes.
Imagine a well-organized kitchen: everything is easy to find and in its proper place. You don’t need to waste time searching for items, as everything is arranged. And now remember how long it take to find something in a new kitchen. That’s why a familiar, easy-to-use interface is so crucial.
“Users spend most of their time on other sites. This means that users prefer your site to work the same way as all the other sites they already know.” Jacob’s Law
Consider the now-defunct Hipmunk flight search. It aspired to be “convenient” and “unique” but shut down in 2020. While other factors likely contributed, its departure from familiarity may have played a role in its demise.
Familiarity in interface design can be categorized into two types: external and internal.
External Familiarity Encompasses:
- Common industry interaction patterns;
- Global interaction patterns;
- Familiar terminology;
- Established mental models.
For example, the tabs on the Dutch government website appears as a series of links, deviating from the familiar design. This divergence can confuse and disorient users.
Internal Familiarity
Internal familiarity, or consistency, focuses on maintaining uniform interaction patterns, controls, terminology, and so on within a single product. Design systems are excellent tools for achieving consistency, which can help increase conversion rates.
Experiment with familiarity if you’re an experienced designer. Introducing a new design pattern can be challenging, but if it simplifies a task, users may find it difficult to switch back to a less efficient product.
Let’s go over two more qualities and get back to practice.
—Hey, what if we make that icon more transparent? Adding a label should clear things up!
A transparent interface ensures that nothing is hidden from the user, providing maximum responsiveness. It’s akin to a conversation between close friends: each friend communicates honestly and clearly, enabling the other to easily comprehend the message and its intention.
To assess an interface’s transparency, view it as if encountering it for the first time. If every aspect is comprehensible — from the interface states to the meanings of icons and terms — then it has achieved transparency.
Consider the following poor example, where the Ecovacs robot vacuum interface conceals functions behind ambiguous icons:
Transparency is particularly crucial when a system encounters errors. Avoid using obscure jargon like “Error 550” — instead, explain the issue in plain language and offer guidance on the next steps.
Additionally, the interface should clearly convey what’s happening on the other side of the screen in response to user actions. This can be achieved through methods such as using animations to explain screen changes, responding to hover actions, or displaying loaders during loading processes.
Failing to provide feedback within 400 milliseconds surpasses the Doherty threshold, potentially resulting in user churn.
Next, we will delve into the concept of “farsightedness” and examine how it can enhance the experience.
—Ever accidentally deleted something and wished for a comeback? That’s where farsightedness saves the day.
Farsightedness, at its core, involves thinking ahead and anticipating user needs or actions. A foresightful interface saves users time and effort by proactively offering helpful suggestions or options.
Imagine you’re on a road, encountering a series of road signs that inform you about upcoming exits, rest areas, gas stations, and restaurants. Similarly, a foresightful interface guides you towards your goal and makes you feel safer.
A prime example of a foresightful interface is the search form for booking flights. It guides you through the process, nudging you toward the next step, providing suggestions, and correcting errors.
A farsightedness in an interface not only streamlines the path to the main value but also addresses secondary scenarios. Observe the numerous additional features that Airbnb’s designers thoughtfully incorporated into the booking page:
Moreover, it’s essential to avoid straining users’ memory. Displaying search histories and highlighting visited links can help. Finally, designers should protect users from making mistakes, such as inadvertently deleting an item from their cart.
Now that we’ve explored the qualities of familiarity, transparency, and farsightedness, let’s see how they come together in practice.
Familiarity Improvements:
- Header controls are organised according to industry standards;
- Key sections are highlighted in the header.
Transparency Improvements:
- Labels have been added to the icons in the header;
- The main heading has been changed to a more understandable one.
Foresight Improvements:
- Date selection has been added to the search form;
- Price information has been added;
- Links to secondary cases have been added at the bottom of the page.
Only two more qualities to go! Let’s move on.
—Hey, the font’s a bit tough to read, right? How about we boost that legibility with some contrast and a larger size?
Attaining clarity in visual elements revolves around “legibility”. This factor depends on the contrast with the background and the contrast and position of objects in relation to each other. Let’s delve deeper incrementally.
Background Contrast
As we cannot anticipate where, how, or with what eyesight users will engage with our product, it’s essential to optimise the contrast of the interface graphics.
Consider Uber’s interface, for example. Although the typography and controls may seem somewhat coarse, they fulfill a purpose: imagine trying to request a taxi on a bright day with a smeared screen.
Object Contrast and Position
Users typically scan interfaces for vital information instead of reading them like books. Consequently, high-priority objects should be more contrasting and eye-catching compared to other content.
Take Amazon’s product page, for instance. It has numerous layers of information with weak contrast, resulting in a cluttered appearance and making it difficult to skim through quickly:
Aligning objects relative to each other also affects legibility. Bear these three fundamental principles in mind:
- Proximity Rule — objects positioned closer together are perceived as more closely related in meaning.
- Continuity Rule — objects on a single visual line are perceived as more closely related in meaning.
- Hierarchy Rule — objects of greater importance should be positioned above or appear more prominent than secondary objects.
In short, the arrangement of objects should correspond with the semantic structure of the information.
Yay, we’re almost done! Let’s proceed to the final quality — comfortability.
— How about we amp up the button size for some extra comfort?
“Comfortability” focuses on creating interfaces that are physically easy and comfortable to use. Here’s how you can enhance this aspect of your design:
Applying Fitts’ Law
Fitts’ Law suggests that the smaller and farther away an element is, the more challenging it is to click on it. Therefore, when designing interfaces for desktop or mobile devices, place important buttons closer where fingers naturally rest, and make them larger for easier interaction.
Optimising for Focus
Furthermore, ensure that the actions you want users to take are easy to focus on and comfortably located:
- For example, position the primary action in the most prominent spot on the home page;
- Or place the button to access all list items next to the slider buttons, as demonstrated in the Youtube Music example below.
The “More” button is foresightedly and comfortably positioned in focus if the user has not found satisfactory artists by clicking through the slider.
Inclusivity for Users with Disabilities
Don’t overlook the importance of enhancing comfortability for users with disabilities:
- Ensure that all interface elements can be accessed using only the keyboard;
- Provide a clear visual indication of focus on the current element to assist those with visual impairments;
- Offer alternative text descriptions for all non-text elements, such as images or videos.
The UK government portal serves as an excellent example of an ergonomic interface.
Congratulations! You’ve now covered all the essential aspects of reducing interface resistance. Take a moment to review the latest improvements and compare the before and after.
Legibility Improvements:
- Removed small text in the logo;
- Removed background image behind the form;
- Added graphics to the benefits section;
- Expanded the section about how the service works.
Comfortability Improvements:
- Enlarged the search form;
- Moved cities closer to the search form;
- Combined Locales and review section;
- Added a search button after the section about how the service works.
Complete before and after:
As a designer, I frequently use the “7 Qualities” as a checklist throughout my design process, consistently identifying areas for improvement. For example, I utilize Miro tables to pinpoint and outline any errors related to each quality in detail. This comprehensive analysis significantly reduces the need for expensive usability tests, delivering outstanding outcomes in a short time.
The “7 Qualities” can also benefit product managers and art directors by enabling them to provide more constructive feedback on a designer’s work. Furthermore, programmers can develop more user-friendly interfaces even without a designer’s guidance.
I hope that the “7 Qualities” will contribute to interfaces requiring less time and energy from users, allowing for more real-life experiences. That’s the product value of this article, while the article itself serves as the interface for that.
Read the full article here
