April 11th, 2024, posted in learning
by Adelina
This article is part of the Foundation series of our UFOs UI/UX Framework. The framework is a tool we created based on our 10+ years of experience in building complex software and thousands of hours of design meetings and feedback. Developers, designers and entrepreneurs can use this framework to gain a better grasp of the UI/UX process and build awesome apps as a result. To learn more about the UFOs UI/UX Framework and each framework component, please go here.
This article is part of the “F” from UFOs, the framework component that talks about the backbone of UI/UX design, the elements almost every design relies on.
Have you ever found yourself using an app and realizing you can’t find your way around it? You’re trying to do something but you can’t find the right options? Or whatever you’re trying to find is nested within 15 menus?
Designers are users too and observing these issues can help you improve your own work. After all, it’s your job to make sure users don’t have trouble using the apps you designed. But sometimes it doesn’t happen - we either don’t know our audience well enough or we don’t think about all use case scenarios.
We’ve previously written an article getting into the very basics of human-centered design - a review of Don Norman’s “The Design of Everyday Things”. And this time, we want to apply what we learned in his book into our day to day design work. Since, after all, it’s people we design for, whether we’re making an app or a physical product. They’re still trying to achieve specific goals, and our role is to guide them.
In his book, Don Norman talks about 5 key concepts in human-centered design. And we think they can be applied to UX design as well, since they’re based on day to day human behavior:
- Affordances: the connection between an object’s properties and a person’s ability to figure out how to use it. For instance, a chair affords for support, therefore, sitting.
- Signifiers: any sort of signal that tells you how to use an object: a “pull” sign on a door is a type of signifier, as it tells you how to use it. In UI/UX design, it’s icons and colors. A pencil icon, for instance, makes you think of editing something. Red will tell you you’re doing something wrong.
- Constraints: to make sure an object is used correctly, some actions are restricted, so you don’t ruin or accidentally do something. Like being unable to place an order without entering an address or skipping the payment portion.
- Mappings: the connection between a control and what results from interacting with it. Think light switches and the specific lights they control. A music player’s controls.
- Feedback: error sounds, text, you name it. This concept allows you to know if you’ve used an object right or not.
It all begins with a goal.
The first step you need to take when creating proper user flows is outlining the goals your users want to achieve when using your app. And then figuring out what kind of steps users could take to do that - and the best way to help them.
So let’s begin with a proper example: let’s say the app you’re building is an online news publication with a subscription system. And our user, let’s call him John, wants to update his card information because it expired. First of all, you should have a system in place that notifies John that his card is expiring. He’s probably aware of it already, but he might forget he’s subscribed to your app and his payment will fail. Next, using the concept of affordances, think of the best way to guide him to that setting.
Updating card info is usually in a settings menu, or a payment menu. You can either nest payment settings under a bigger settings menu or turn ‘Settings’ into ‘My account’ and have a standalone ‘Payment/Subscription’ page. Usually, these options go into a profile icon dropdown on the top right side of the screen. Or a 3 dots icon, or a cog icon. Since this is a common design pattern, most users will know that’s where they’ll find their settings.
Next, you can group all possible account settings into a sidebar menu, like Spotify does (in the photo above), or keep a single page with all the settings, divided into sections: profile settings, notification settings, payment settings. Using suggestive icons like Spotify will help guide your users: they might notice a credit card icon faster than the menu title. From then onwards, you need to show your user their current card info and give them an ‘Update’ button. As a bonus, you can include a warning that lets them know the card expires soon, like PayPal does.
There’s another side to this. We, as designers, often assume that the way we sort settings in an app makes sense. And then we ship out our product into the world, and we find out we were wrong. We’ve used car software as an example before and we shall do so again: some cars have a button through which you can avoid getting stuck in snow or mud. But some models took out the button and moved this option in the car’s app. How can you best assist a driver who got stuck in some snow find that option?
First of all, you have to put yourself in the shoes of the driver: he can’t find a physical button, so where would he look within the app? Since this isn’t an option they would use every day, you can nest it within a larger menu. But make sure it belongs to said menu: call it “Special Weather Assistance” or “Additional Features”.
In short, sorting options in a logical way (by putting yourself into the shoes of your user), giving assistance via icons and giving your users alerts when needed can go a long way.
Provide assistance, not confusion.
Not all users will know exactly how to use your app. Some flows might look easy to you - especially since you came up with them. But those who are using your app for the first time might have some trouble.
So here comes in the concept of constraints, mentioned earlier. To make sure people are using your app correctly, limit the actions they can do, so they don’t accidentally make a mistake. Make it impossible to place an order for something that’s out of stock. Give them undo options. Or give them warnings, alerts, and tooltips.
A great example is what MS Word does: when you’re editing a document and you hit Exit, it’ll always ask you if you want to save your changes first, because you’d lose them otherwise. So every time a certain action can interrupt a user’s activity or lead them to lose data, add a warning pop-up like the one in Word. Since first time users might not know that going onto a different page while editing a piece of content will make them lose data, these pop-ups can help avoid that. Plus, they won’t be able to close or leave until they decide if they want to save or not.
Another thing you can do is turning a process into gradual steps. You might have noticed that in online stores: the first step is a cart overview, then order details (which often includes the payment) and then confirmation. This makes it difficult to skip steps or place incomplete orders.
This way, users know they need to complete certain steps to achieve their goal. You can ensure nothing gets left out, and that users fill in all the necessary details. Moreover, in case users accidentally exit, you can give them a pop-up warning that lets them know they’ll lose what they’re doing (just like what I described earlier).
If your app is some complex in nature, don’t assume your users will be able to figure it out immediately. Look at your design through the eyes of a user who’s never seen it before: are there any functions, settings or buttons that need extra details? Give them tooltips and write clear explanations.
Plan for the worst-case scenario.
Users are people after all, and they’re the ones we’re designing for. And people make mistakes, lose track of things, get distracted, or misunderstand instructions. It’s perfectly human, and you, as UI/UX designers, should help them achieve their goals regardless. Don Norman goes very in depth about the mistakes people make, which you can read about in our review.
One great example of the way UI/UX design helps users avoid making mistakes is by giving error messages. The most common place for them is any sort of form: asterisks in input titles let you know they’re mandatory and red messages underneath inputs tell you if you’ve filled them in wrong. Without these signals, people are open to making mistakes - and it’s not their fault. They need to be given all the information.
This is where Don Norman’s concept of feedback comes in: one of the best ways to make sure users don’t make mistakes is by letting them know if they’re using the app right or not. When they submit something successfully, give them an alert that says “Success, your [...] has been submitted”. And if they didn’t get it right, give them an error message.
Design by Venturix Studio
The key here is preparing for the worst type of situation, where users do exactly what they shouldn’t do. After all, if they’re first-time users or they don’t know the app well enough, they’re open to making mistakes. For instance, make “Save” buttons a more intense color, and “Cancel” buttons more toned down, so users don’t accidentally lose data by hitting “Cancel” in a hurry.
The best way to find these issues and correct them is to test the app rigorously once it’s been coded, but before the release. Playing around with it, clicking everything that can be clicked, trying your best to break it. And include people who didn’t work on the design in the testing process: the designers will find differences between what’s been coded and what they intended, while outsiders will find things the designers and developers might have missed. And most of all, those unfamiliar with the app are the best judges in terms of usability: they don’t know all the screens, all the settings. And if they get frustrated completing basic tasks in the app, you know it needs some fixing.
So there you have it, here are some of our tips on improving your user flows. If you’re not a UI/UX designer and you’re looking for some good user flows, a redesign, or a new app altogether, contact us.
