Geek Culture
Published in

Geek Culture

3 Key Components for Effortless UX

Does using your app feel strenuous and disorienting? You might be missing one of these. Keep in mind these aren’t the ONLY 3 criteria, but they’re 3 big ones.

Scrabble tiles spell the word “simple.”
Photo by Pablo Arroyo on Unsplash.

Introduction

“Screw this!” Brad exclaims, as he heaves his arms into the air, exasperated. He slumps back in his chair. “It’s too hard. I don’t know what to click on, and I’m afraid that clicking the wrong thing will take me to the wrong place and I’ll get lost or break the website.”

We’re about 5 minutes into a user testing session for a web application I designed. Brad and a group of his colleagues had graciously volunteered to test the software and provide feedback. I notice that many other volunteers in the room share Brad’s frustration. In fact, I could feel the tension building about four and a half minutes prior to Brad’s outburst.

The problem with this particular web app constitutes a problem I encounter (and create) far too frequently: it’s not easy to use. The application offers too many features, and each feature takes too long to learn. The app contains too much jargon and insider knowledge as pre-requisites to its use. Despite the “handy” FAQ section — which defines all the jargon and offers a step-by-step explanation for accessing every aspect of the product — this app is utterly unusable.

As a UX designer, I think it can prove relatively easy to get caught up in designing features and preemptively solving problems. It’s easy to lose sight of a UX designer’s primary objective: an effortless user experience.

A designer takes notes on a piece of paper while a user tests an app on a mobile device.
As UX Designers, it’s easy to lose sight of our primary objective: an effortless user experience. Photo by UX Indonesia on Unsplash

What is “Effortless UX”?

“Effortless UX” isn’t a real term. I just made it up like five minutes ago. But you know exactly what I mean by it. Good applications are straightforward and easy to use. Essentially, we shouldn’t force our users to think about how to use our products. We want our UX to feel so natural that even first-time users can intuitively access every feature.

To me, “Effortless UX” refers to a user experience that minimizes cognitive load at every step. Nick Babich penned a stellar article a while back, in which he discusses the importance of maintaining minimal cognitive load. Babich defines “cognitive load” as “the amount of mental effort required to use a product.”

“Generally,” Babich clarifies, “the more effort required to use a product the less desirable it becomes.” In other words, if there’s a learning curve to my app, my app is more trouble than it’s worth.

Cognitive load is an amount of mental effort required to use a product. Cognitive load has a direct effect on how easily users interact with your app. Generally, the more effort required to use a product the less desirable it becomes. — Nick Babich, Editor-in-chief of UX Planet

In the book, Don’t Make Me Think, usability expert Steve Krug reinforces Babich’s argument by asserting that users spend very little time learning how to use an application. According to Krug, “we don’t figure out how things work. We muddle through.” He explains that users would much rather click around haphazardly until they arrive at their desired screen than read a single sentence in a user guide or FAQ section.

If Krug is right, and users prefer “muddling through,” then we want to design our products in a way that allows users to muddle through relatively easily. If users won’t take the time to learn the nuances of our products, then we should design products without nuance. We should design products with effortless UX.

A picture of Steve Krug’s book, Don’t Make Me Think
“[Users] don’t figure out how things work. We muddle through.” — Steve Krug

So how can we build effortless user experiences? In my relatively short design career, I’ve found that three ideas comprise the core of effortless UX: (1) Consistency, (2) Simplicity, and (3) Simulating Human Interaction. In the following paragraphs, we’ll take a look at how some of the most successful brands in the industry apply these three ideas in their products. We’ll also explore how UX designers of any skill level and background can incorporate these components in our own designs.

1. Consistency

What is consistency?

Consistency constitutes the first key component for building effortless UX. Lots of folks have written about consistency in the past, but for our purposes, “consistency” refers to the process of presenting similar types of information in the same manner, effectively creating patterns throughout our apps. Consistency holds immense importance because the human brain instinctually picks up on patterns. We’re uniquely good at it.

In a 2008 paper titled, Theory of Cognitive Pattern Recognition, scholars Youguo Pi, Wenzhi Liao, Mingyou Liu and Jianping Lu write extensively about humans’ incredible ability to detect patterns. The authors argue that “pattern recognition is the fundamental human cognition or intelligence.” THE fundamental human intelligence. According to this research, our ability to find — and more importantly, learn from — patterns provides a foundation for all other human intelligence. Effortless UX capitalizes on this innate human ability.

A person with brown eyes looks into the distance.
Our ability to find and learn from patterns provides a foundation for all other human intelligence.

If the core functions of our software utilize a small set of fundamental patterns, users will find it easier to become familiar with our software. Once they’ve learned the set of fundamental patterns, they’ve learned the basics of the entire app. To better understand consistency, let’s examine the concept in action.

How do successful brands apply consistency?

Microsoft successfully exemplifies consistency within their Office family of products. Although Word and PowerPoint constitute strikingly different tools, if you know the basic functions of one, you know the basic functions of the other. The tool bar at the top, the menus for file, edit, view, insert, format, etc, are all basically the same for nearly every product within the Office suite. There’s design consistency across the suite. Once you’ve spent 15 minutes with Word you can probably left-align some text in PowerPoint or print a document in Excel.

An image of the toolbars from Microsoft Word, Excel, and PowerPoint.
Microsoft shows consistency with the toolbar across their Office suite of products.

The Facebook mobile app provides another excellent example of consistency. Let’s focus solely on their homepage for now. Every post resides on its own separate card. On each card a user can view who made the post, the poster’s profile picture, when they made the post, and what they posted. The profile picture is the same size on every card, the post is the same font and size on every card, the name and post date are the same distance from the profile picture on every card. Every card offers the same actions: liking the post or commenting on the post. Each post also contains ellipses that open a menu with more actions. Tapping the person’s name or profile picture will take the user to the poster’s personal profile page. Every post behaves the exact same way. Once a user interacts with a single post, they understand how the rest of the homepage works. That’s consistency.

A screenshot of the Facebook mobile app.

Consistency, when applied correctly, can be so subtle you hardly notice it. But when an app lacks consistency, a user will immediately feel that something is wrong. Imagine if every post on Facebook’s homepage contained a different set of actions. Imagine if fonts and font sizes were different on each card. Facebook would become virtually unusable at that point.

How can I apply consistency to my own designs?

Start small. Begin by ensuring consistency across your UI components and then move on to addressing the UX. Do all your buttons have the same padding? Are all H2’s the same font size across the design? After tackling the visual consistency of your designs, you can move on to more abstract interpretations of consistency. Let’s look at an example below.

Two screens from a list-making mobile app.

In the image above, we can see two screens within the same list-making app. On the left, a user can add a new list item by tapping on the floating action button. On the right, a user must tap a stationary “add new” button at the top of the list. Although these screens maintain a sense of visual consistency (on both screens the list items are the same height, width, color, etc.), the screens lack consistency in button placement and button type. Consistency dictates that the designer should choose either the floating action button or the stationary top button and apply that concept to every instance that a user can add a list item. Let’s dissect one more example to drive this point home.

A Graphic Image File depicting a user editing tabular data in a modal.
A Graphic Image File of a user editing tabular data in-line.

In the GIFs above (which are heavily inspired by a real product I worked on recently), we see two tables in separate parts of the same app. In the first GIF, clicking the edit button launches a modal. In the second GIF, clicking the edit button allows the user to edit the table data in-line. This is an example of poor UX because it forces the user to learn two separate processes for taking similar actions. Consistency dictates that the designer should choose only one editing behavior and apply that concept to every instance that a user can edit table data.

Consistency can prove tremendously important because much of human intelligence relies on our propensity for pattern recognition. By establishing patterns and maintaining consistency across our designs, we reduce our designs’ cognitive load, leading to a smoother and more effortless UX.

2. Simplicity

What is simplicity?

Simplicity comprises the second key component for effortless UX. It’s perhaps the most-used buzzword thrown around in my client meetings, and there’s quite a bit of literature on how to implement simplicity in design. But what does it mean? There are several competing definitions of “simplicity,” so I want to defer to author and designer Tom Krcha, who I think best defined the term. Krcha wrote a though-provoking article for Web Designer Depot several years ago in which he defines “simplicity” as “serving users what they need, when they need it in the most straightforward way possible. On any given screen and in any given user journey, a user should be able to accomplish their most important goal in the smallest amount of time with the smallest amount of decision-making as possible.

Good UX serves users what they need, when they need it in the most straightforward way possible. Photo by Isabella and Zsa Fischer on Unsplash.

The most effortless user experiences are lean, mean, problem-solving machines. They’re lean because they lack excess. Like I mentioned earlier, we want to reduce cognitive load in every step of a user’s experience. If superfluous design elements clutter a screen or if extra unnecessary steps muddy up a user flow, we’re making things more difficult than they need to be. To better understand simplicity, let’s examine the concept in action.

How do successful brands apply simplicity?

Toggl successfully exemplifies simplicity with Track, their time-tracking software. Their product allows users not only to track the time they spend on their own projects, but also see how their teammates spend their time.

A screenshot of the time-tracking software, Toggl Track.
Toggl Track successfully exemplifies simplicity.

When using this software, a user’s main goal is probably to track the time they spend on a specific project. Thus, at the top of the screen in big letters, we see “What are you doing?” Brilliant. Using the app is really as simple as typing in the name of the project you’re working on and clicking the “start” button. Down below, a user can see — in both list form and timeline form — what projects they’ve worked on recently. So technically, the app does provide more information than needed on this screen. But the excess stays out of the way. It doesn’t distract the user from the most important information on the page and it doesn’t hinder the user from accomplishing their main goal on this page. If needed, a user can go back to previously tracked entries and add certain tags or project categories, but those actions also don’t distract from the main goal of tracking time.

How can I apply simplicity to my own designs?

Start small. Begin by taking a single screen or user journey you’ve designed and ask yourself, “what is the user’s main goal here?” Is that goal immediately clear when you look at your designs? How many steps does it take a user to accomplish that goal? Can you reduce the number of steps? Is there anything on any screen that visually distracts a user from accomplishing that goal?

I think it’s relatively easy — even for non-designers — to notice when a design lacks simplicity. A screen might feel too “busy,” or a user journey might contain extra steps that don’t add value to the user’s experience. Let’s practice applying simplicity to a screen I designed several years ago that definitely lacks simplicity. Take a look:

A screenshot of an affordable-housing search tool.
This design fails the simplicity test.

This screen has too much going on. I designed this for a web app similar to Rent.com or Appartments.com, but specifically for finding affordable housing in a given area. I failed to achieve simplicity in this design for a few reasons.

First, the user’s main goal on this screen is not immediately clear. Is a user’s main goal on this page to view pictures of the listed apartment? Is it to read an overview of the listing’s location, amenities, price, etc.? Is it to check the listing’s availability? Is it to see whether the user qualifies for affordable housing? At first glance it could be any of the above, which means the design isn’t simple enough.

Second, there are too many calls to action and too much information displayed, all providing distractions for whatever a user wants to accomplish. If the goal is simply to view pictures of the apartment and get an overview, then the “qualify now” CTA and “check availability” form distract from the goal. If the goal is to get qualified for affordable housing, then the apartment images, informational overview tabs and “check availability” forms distract from accomplishing that goal. Also, why can we still see the map in the background? It’s clear this is a modal of some sort, but the map behind the modal serves no purpose right now. I could go on, but I think you get the point.

Simplicity can prove instrumental to an effortless user experience because it reduces cognitive load. As I mentioned earlier, the more effort required to use a product, the less desirable it becomes. If a user has to parse through visual clutter to use your app, or if any given process within your app contains superfluous steps, it’s time to simplify.

3. Simulating Human Interaction”

What is simulating human interaction?

Finally, effortless UX simulates human interaction. If you look at some of the most successful apps in the US, you’ll notice a trend. Many of them provide a UX that feels as though a user is communicating with a person instead of a piece of software. That’s what comes most natural to people. Even many folks who struggle with social anxiety like I do generally have at least one person with whom they can converse freely. We’ve been communicating in person for hundreds of thousands of years; it’s the most instinctual form of communication we have. Effortless UX capitalizes on this instinct.

Two friends sit at a table, talking.
Effortless UX simulates human interaction. Photo by Christina @ wocintechchat.com on Unsplash.

I don’t mean that your software must necessarily include a social component. Rather, I mean that the logical foundation on which your app rests should follow the natural flow of human interaction. Too often, I see apps designed around the way a computer works, rather than the way the human brain works. Stop doing that.

How do successful brands simulate human interaction?

Many successful apps do a great job of simulating human interaction. I’d like to analyze Slack specifically. Let’s examine their onboarding flow, because creating a new Slack account feels like talking to a person.

A screenshot of the first step in Slack’s onboarding process.

This onboarding flow uses every day language. There’s not a long complicated form with technical jargon. In plain English, Slack asks, “What’s your work email?”

The 2nd step in Slack’s onboarding process

As the user moves to step two in the onboarding process, they’re guided very simply to enter a confirmation code. I’ve seen many other products handle this step rather poorly. Either there’s no explanation about where to find the confirmation code, or there’s no remedy for if you never received the code, or even both. But Slack continues to hold the user’s hand every step of the way. I feel like I’ve already made my point here, so I’ll just show you the rest of the Slack onboarding process and let you make your own analysis. Pay particular attention to how much this process feels like a pleasant personal conversation.

The 3rd step in Slack’s onboarding process
The 4th step in Slack’s onboarding process
The 5th step in Slack’s onboarding process
The 6th step in Slack’s onboarding process
The 7th step in Slack’s onboarding process

How can I simulate Human Interaction in my own designs?

I once read a post on Reddit that said “Unintelligent people often try to explain simple concepts with big words to make themselves appear smarter. Intelligent people try to explain complex concepts with small words to make those around them feel smarter.” If you want to simulate human interaction with your designs, take the “intelligent people” approach. Use small, simple interactions to help your users accomplish larger, complex goals on the app.

Referring back to the Slack example, setting up a Slack account is actually quite a complex process. There’s a lot of information a user needs to provide before they can use the app. But they broke the process up into an organically flowing conversation. What are some of the most complex processes in your app? How would you explain them to someone who’s never used the app before? How would that conversation play out? What kinds of questions and answers would you encounter during that process?

Two professional women stand in front of a computer while having a conversation.
Test your app with current users, co-workers, family members, or friends. Photo by LinkedIn Sales Solutions on Unsplash.

You don’t have to guess the answer to any of the above questions. You can test your app with current users, co-workers, family members, and friends. Start small. Take one screen or user flow and think about a user’s main goal on that screen or in that journey. Ask someone who’s never used the product before to look at this screen or journey and try to accomplish that goal. Encourage them to ask questions if they have them. Offer helpful tips if you need to. Take note of the questions your test users ask during the process and the answers you give. Then adjust the screen or user journey to mirror that conversation.

Simulating human interaction can tremendously improve UX because human interaction is the most instinctual form of communication we have. By designing our applications around the way the human brain works, rather than the way a computer works, we’ll build a more seamless experience for the user and make using our apps feel effortless.

Conclusion

Ultimately, the research shows that users would much rather click around haphazardly until they arrive at their desired screen than read a single sentence in a user guide or FAQ section. They prefer muddling through our products. As a result, we want to design our products in a way that allows users to muddle through relatively easily. If users won’t take the time to learn the nuances of our products, then we should design products without nuance. We should design products with effortless UX.

What do you think? Are there other strategies for creating Effortless UX? What have you learned along your design journey that you think would contribute to this discussion? I’d love to hear your thoughts and tips.

Do you have an app that’s difficult to use or lacking in the UX department? I run a boutique design agency and I’d love to chat with you about possible ways to improve your product! Whether you’re a designer looking for advice or a business owner interested design services, I’m always happy answer emails or hop on a video call. Send me a note: codey @ codey(dot)design.

If you’re interested in seeing more examples of Effortless UX in action: check me out on my socials. I post there far more often than I do here.

Instagram // Twitter // LinkedIn // Website

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store