The 5 Most Common Mistakes UX Designers Made During 2016
Design is a constantly evolving field. If we look back to the 2016, a number of popular design trends come to mind: microinteractions, minimalist design, dramatic typography, vibrant colors, and onboarding. But trends aren’t always a good thing — for digital marketers, jumping on the latest design trend can hurt UX. Designers often opt to create something trendy and visually appealing, but the can easily sacrifice usability in the process.
It pretty much goes without saying that user experience is extremely important to keep in mind when designing a product, and when it comes to design trends, it’s key to find a balance between what looks nice and what works. Here are some of the most common UX fumbles designers made by following trends during 2016, as well as tips on how you can avoid making the same mistakes in your future projects.
Mistake #1: Light Fonts Together With Low Contrast
There’s a typeface that is currently trending and a lot of websites and apps have been using lately, light fonts.
Light fonts are elegant, fresh, and fashionable. Using them in your design is one of the most popular ways to show users that your app or site is modern and up-to-date.
However, light fonts can cause usability problems — the combination of thin type with low color contrast can make text copy almost unreadable.
Why It’s a Problem
When light fonts are used for small body text, it’s a disaster. As you can see it in example below — while text looks elegant and contributes to an aesthetically pleasing user interface, it’s difficult to read, especially for users who have poor eyesight.
The problem becomes even more relevant on mobile screens, because with a smaller device comes more readability issues. Also, users might be outdoors which creates low contrast on the screen due to natural lighting.
How To Avoid
Fonts shouldn’t only look good. First and foremost, they should be legible. As Apple stated in their iOS Human Interface Guidelines:
“If users can’t read the words in your app, it doesn’t matter how beautiful the typography is.”
Make sure your fonts provide are good for usability by following these simple rules:
- Ensure sufficient contrast between text and its background.WC3’s Web Content Accessibility Guidelines are a good place to start. According to the WC3, the contrast ratio between text and a text’s background should be at least 4.5 to 1. This guideline helps users with low vision see and read the text on your screen.
- Consider user testing. Find out if your real users are happy with the typography on all major devices: desktop computers, laptops, tablets and mobile phones.
Mistake #2: Overwhelming Users With Information
Screen real estate is a valuable resource — it’s limited and must be used carefully. In an attempt to take advantage of this valuable space, designers often fill up what’s available with information or features. However, if a user visits a site, or tries out an app that has too much information to easily retain, they will simply get frustrated and abandon the experience.
Why It’s a Problem
Overloaded pages are filled with items competing for users’ attention. Every added button, image, and line of text makes the screen more complicated. But like screen real estate, a user’s attention is a limited resource. When the content is too complex and the layout too dense and cluttered, the user might not be able to process the information presented effectively.
How To Avoid
In order to avoid cognitive overload you need to (1) audit all of your content and remove anything that isn’t absolutely necessary for your user to realize their goal and (2) present information in an easily understandable way to users by:
- _Writing for scanning, not reading._Use short sentences and paragraphs, bulleted lists, headings, and bolded keywords.
- Using a whitespace. Whitespace referring to the empty space between and around elements of a design or page layout. Whitespace is more than an empty space, for designers, it’s often as important as the content itself — not only whitespace is responsible for readability and content prioritization, it also plays an important role in the visual layout.
Mistake #3: Actions and Options Hidden Behind Non-obvious Gestures
As we discussed, cluttering your interface can overload your user with too much information. In order to avoid visual clutter, many designers remove visible controls by making them gestural.
However when you hide key interface elements and options, you might be making the interface cleaner, but at the same time you might also be making it harder for your users to understand.
Why It’s a Problem
Gestures may be awesome, but they do have a downside — they are hidden controls, so unless users have prior knowledge that a gesture exists, they won’t try. If you hide an option, less people will use it. For example, did you know that Google Map has a simple way to zoom in and out with one hand?
How To Avoid
One of the basic rules of good UX is to reduce the effort users have to put in to get what they want. That’s why visibility is still a very important principle to consider when designing modern apps or sites. If you want to use gesture in your UI, you have to make them obvious for your users by including visual cues in your interface. These hints can guide your users towards gestures. You can find some great practical solutions from Luke Wroblewski on how to build visual cues into your interface to direct users towards gestures.
Mistake #4: Unlabeled Abstract Icons
Due to the limited screen real estate, it’s very tempting to save space by replacing text labels with icons wherever possible. Pictograms are take less space, they don’t have to be translated, and they make good targets. Last but not least, icons enhance the aesthetic appeal of a design.
Despite these potential advantages, icons often cause usability problems, especially when designers hide key functionality behind icons that are actually pretty hard to recognize.
Why It’s a Problem
It’s a common mistake to assume that your users are either familiar with abstract icons or they’re willing to spend extra time exploring and learning them. In reality, users are often intimidated by unfamiliar interfaces. What users really want is a clear idea of what will happen before they take an action in an unfamiliar app.
How To Avoid
Icons need to set clear expectations for users before they click or tap on them. There are a few icons that enjoy mostly universal recognition from users. The icons for home, print, and the shopping cart are such instances.
However, complex and abstract features should always be displayed with a proper text label.
Mistake #5: Static Intro Screens as Onboarding
Onboarding refers to the first encounter between the user and the app. It supposed to give users a great sense of value for an app and at the same time make sure they know all they can do with it. However, tutorials are often full of excessive information, and a new user is bombarded with an app’s “value” or instructions before they even try it.
Why It’s a Problem
Two of the most common situations when static onboarding simply doesn’t work:
- When your users are already familiar with the core value proposition of the app and simply want to get started using it as soon as possible.
- When designers use static screens as a tutorial, the tutorial looks and feels like an instruction manual. If a user interface requires a lot of tuts to clarify it’s functionality, it definitely requires additional attention. Even if user will finish such tutorial, they usually forget everything as soon as they complete it.
How To Avoid
The onboarding flow can be designed in ways that might be more useful to your users. An interactive way to engage first time users is through progressive onboarding. Progressive onboarding makes the user remember functionality when prompted contextually to their needs.
Duolingo is a great example of progressive onboarding. Onboarding doesn’t explain how the app works, instead users are encouraged to jump in and do a quick test in the selected language (even without signing up) because people learn best by doing.
Conclusion
Design patterns and aesthetics are constantly changing, but underlying user needs remain the same — users want to accomplish their tasks without spending too much effort or brainpower. Sometimes design is confused with decoration, but design is actually about helping your users do what they need to do and responding to their problems. Design isn’t for designers — it’s for users. Ultimately, we all design for our users and the easier a product we create for them is to use, the more likely they’ll use it.