Designing complex applications which can support complicated tasks and be intuitive and straightforward at the same time is no easy feat. As such, mistakes inevitably get made, with some being more common or more serious than others.
Making general recommendations about widespread mistakes in application design is difficult because many of these mistakes are domain specific. As such, the first thing you should do is conduct user research within your target audience:
- start off with task analysis and field studies so you can have a better understanding of what your users need and their workflows
- prototype and then test low-fidelity ideas to get a clearer picture of your app’s essential structure and its features, but don’t commit too many resources to ideas that will be revised or even abandoned as you learn more about your users
- make small, iterative changes, and test them each time with a small number of your users. The more iterations you make, the better your final product will be.
Despite most of the mistakes which can be made being domain-specific, let’s take a look at some of the most common mistakes seen in applications across industries so that you can ensure you’re not making them in your own designs.
- Poor feedback
A basic guideline for improving usability is to provide users with clear feedback:
- what the system’s current state is
- how their actions are interpreted
- what’s happening
If users are left guessing what’s happening, you’re not providing them with enough feedback and you clearly don’t want users questioning whether their actions were correctly registered or whether the app is doing anything. That can understandably make for a frustrating user experience.
An example of extremely important feedback is the progress indicator. When an action on the server-end is taking longer than usual to complete, users should always be notified that something is actually happening and they’re not just staring at a blank screen because the application isn’t working correctly.
If things are taking a bit longer to load, always use a progress indicator. Depending on how long it’s taking, you can use one of two types of progress indicators:
- if the task takes between 2 and 10 seconds to complete, a typical, non-descriptive animation will do, such as a spinner.
- If the task takes over 10 seconds to complete, display a more explicit progress bar, such as a percent-complete indicator (unless you really can’t predict how long it will take)
The human mind craves consistency, so if users have expectations about how something should behave or where they can access it, it’s best to keep those expectations in mind when designing your application and not cause them confusion or frustration by needlessly switching things around.
Here are some examples of the most common inconsistencies in complex applications which can cause even more seasoned users to become confused:
- different words/commands for a common action
- placing controls for the same feature in various places
- controls that seem similar to the user but are accessed from different places
- similar workflow patterns that require the user to interact with very different sections within the interface
- inconsistent rules for legitimate data input (e.g. sometimes a value is allowed, while other times it isn’t, without any feedback as to why)
- features sometimes being available and other times not without a clear explanation
- UI elements or controls moving around with no regard for spatial consistency
- visual inconsistencies such as buttons or icons with different design styles
- Poorly written error messages
Error messages are also a form of feedback. Their sole purpose is to tell people that something isn’t working as it should be. Best practices have been in place for many years, and yet many applications still don’t take them into account.
One of the most common mistakes is simply telling the user that something went wrong, without actually telling them what happened and what they can do to fix the situation. This has become more and more frequent with web apps growing in popularity.
Another mistake is giving users useless information that only confuses them more than anything else, such as including nondescript error codes in error messages.
Informative error messages help users fix their current issue while also teaching them how to use your application. If they don’t invest time in reading about the app and learning to use it, they will make efforts to understand problem situations if you explain them because they want to move past the error.
- Missing default values
Default values can help your users in many ways, such as:
- speeding up interactions with the app if the default value is acceptable and they don’t have to input anything
- save users effort in repetitive tasks
- inform them of the type of input appropriate
- help novice users get to a safe outcome if they don’t know what value to input
Having default values in place can help users save a lot of effort when doing repetitive tasks, such as filling in the same form multiple times. Identifying key values for your fields can help reduce user frustration and increase their productivity. Make use of analytics to help you uncover what the most often used option is for each specific form field.
Default values are particularly useful in dropdown menus. While many apps provide a “Choose” as the default value, forcing users to interact with the menu, preselecting the most commonly used value can save them a time and effort.
In numeric form fields where users are expected to deviate very little from the most common default, a stepper can be added which can allow them to increase or decrease the value without having to type anything – with typing still being an option. Steppers reduce the interaction cost and give novice users a reasonable starting point.
- Icons with no labels
While a few icons are universally used and understood (e.g. save icons), most of them aren’t always able to stand on their own without a label. Things can get even more difficult when an application has unique icons and the likelihood that users will understand their meaning without labels is very low.
Using labels on icons has several benefits:
- it increases the target size, meaning users have a larger area that they can click or tap on
- it decreases the time needed to recognize a command as users have two memory cues, both icon and text
- labels can help with learning the interface by having multiple associations with the same command
- labels can help with visually differentiating between multiple commands that are placed next to each other
- Difficult to acquire targets
Anything that can be clicked or tapped on is called a “target”, so every active UI element that users can interact with are targets. For a user to acquire a target, they must be able to identify it and click on the target reliably, which in modern app interfaces can be problematic.
Acquiring targets can be difficult because of two reasons:
- weak signifiers – “affordance” refers to what you can do to an object. For example, checkboxes can be checked or unchecked, and sliders can be moved up or down. A signifier is a visual element which helps users understand an object’s affordance simply by looking at it.
Signifiers are particularly important in designing user interfaces because every pixel on the screen affords clicking, regardless of whether something happens or not when you do. There are many things on computer screens and users can’t afford to waste time hunting for actionable items, which is why signifiers are crucial to UIs and UX.
One of the worst offenders in modern applications are ultra-flat designs. The reason for this is because this design style tends to have weak signifiers, such as when people have a hard time distinguishing text from buttons because the buttons lack traditional 3D visual cues.
Common consequences of weak signifiers include:
- users asking themselves what they’re supposed to do
- users not using a feature which would help them
- a lot of text trying to overcome the two problems above
- small click targets – these can be problematic because users can try to click or tap on them and accidentally miss their active area. Things get worse when users don’t realize this and believe that something isn’t actionable because they think nothing happened when they interacted with it.
- Using too many modals
Modal windows are frequently used to implement interactions with data – editing existing items, adding or deleting items, etc. Modals appear on top of the UI, with the background usually dimming to both avoid distractions and to signal to the user that it can’t be interacted with while the modal is on top.
The problem with modals is that sometimes they may reduce context for users by covering up information which they may want to refer to while interacting with the modal.
- Using terms that your users aren’t familiar with
It’s a given that you want the users you are targeting to be able to use your app successfully, so using jargon that is unfamiliar to them will only confuse them.
Simple and clear communication is always preferred. Avoid using acronyms, brand-specific terms, or technical terms which your users might not be familiar with.
- Crowding users with meaningless information
Strings of letters and numbers are often used to identify items in an application. While they are important on the back end, they are meaningless to users and shouldn’t be the primary piece of information that they refer to. This is especially true with high-information-density screens, where information that is readable by humans should be the main anchor point, with IDs to a much less prominent position.
While a code may be easier to fit in a small area, they put a higher cognitive load on users and require them to translate that coded information into something meaningful.
- Junk-drawer menus
A complex app with hundreds or thousands of features needs somewhere to put all the controls for those features. Additionally, they need to be prioritized and organized in such a way that they are easily discoverable and accessible to users. A consequence of this is typically an overflow menu; the most important actions are displayed in a toolbar, while everything else that didn’t fit is behind a menu labeled “More” or something else along these lines.
These are essentially just junk drawers that contain everything that the developer can’t categorize but also can’t throw away. The problem with these overflow menus is that you can’t know what’s in there until you go combing through everything. This limits discoverability and can make for a frustrating user experience.
- Placing confirmation and destructive actions in proximity
Placing actions such as Save next to Delete is a common design decision which inevitably leads to frustration for some users. While the placement makes sense, the proximity of the two completely opposite actions can lead to users mistakenly selecting one over the other, especially Delete instead of Save, for example.
This can happen either because the users are in a rush completing repetitive actions, or simply have motor difficulties.
- Poor navigation
A good user experience first and foremost means a good navigational experience. Users must be able to quickly and easily find everything they’re looking for, even if they are first-time users, which also means navigation should be intuitive and consistent with their expectations.
The navigation should be smoothly integrated in the app and not draw users’ focus away from the content. Additionally, the user should always be able to tell where they are in their user journey and be able to easily navigate to wherever it is they are trying to go.
Applications are very domain-specific, meaning that something that is efficient and pleasant in one industry might be horrible in another. As such, designing a usable application with user experience in mind requires researching your target audience to understand their workflow and their needs.
However, the mistakes described above are commonly seen as mistakes regardless of industry and are a good starting point for avoiding UX mistakes.