Here are a few UX mistakes we commonly see in 2016. About the author: Nick Babich (blogs.adobe.com) is a developer, tech enthusiast, and UX lover. He has spent the last 10 years working in the software industry with a specialized focus on development. He counts advertising, psychology, and cinema among his myriad interests. Image courtesy of Dundanim via Bigstockphoto. 

---

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.

Light font in Apple Weather app for iOS

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.

Text is difficult to read against the background

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.

Light fonts used with small or medium text sizes aren’t going to be good for readability. Image credit: usertesting

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.

YouTube presents so much data that sometimes it leaves the user confused and/or unable to make a decision what to watch.

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.

Previous version of Macy’s app for iOS. Cluttered, busy page that doesn’t make users want to read the content.

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.

Generous whitespace creates an essential breathing room and makes UI that looks less cluttered. Image credits: cocolabs

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.

Rise, an alarm clock app for iOS, has a gesture-driven interface. Image credit: Thenextweb

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?

Did you know that to zoom in/out in Google Map you need to double tap the screen with your thumb and on the second tap, hold your finger down and slide your finger up and down to zoom in/zoom out? Image credit: Gizmodo

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.

Pudding Monsters showcases a scenario with animation and it immediately becomes clear for users what to do.

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.

Unlabeled icons in Airbnb app for iOS.

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.

Icons in the bottom tab might be confusing for first-time Bloom.fm app users.

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.

Easily recognizable icons. Image credits: icons8

However, complex and abstract features should always be displayed with a proper text label.

Use textual labels to describe complex options.

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.

An example of static intro screens. Image credit: Behance

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.

Onboarding in Hopper app for iOS. Many users will simply skip this intro; they just want to get started with the app.

• 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.

If you use static screens as a tutorial or walkthrough, then you’re not doing a good job of communicating with your users. Image credit: Smashin Magazine

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.

Progressive Onboarding presents information to users as they use the app.

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.