5 User Interface Mistakes that Drive Customers Away

This article first appeared on CMS Wire.

When it comes to website and app design, user interface (UI) is king. After all, your users see the UI first and they will continue to interact with it on a regular basis. Website users value the user interface so much, a typical visitor will form an opinion about your website within 50 milliseconds — and you can guarantee that level of expectation translates to apps, too.

And yet it’s common to see websites and apps launch with glaring UI mistakes that drastically degrade the user experience. In this article, we will discuss five of the most common (and therefore most frustrating) UI mistakes found in websites and native mobile applications. But first, let’s look at the differences and similarities between user interface (UI) and user experience (UX).

UI vs. UX: What’s the Difference?

It’s easy to confuse user interface and user experience. After all, the former dictates much of the latter. But it’s important to know the difference:

User Interface Definition: UI is the means by which a human interacts with a computer system. It’s a way to guide a user through visual representations through the interface. So background colors, fonts, buttons and icons all fall under the user interface.

User Experience Definition: UX is all about how people interact with your brand, which includes how they interact with your website and app design (also known as the UI, remember?). However, UX isn’t limited to that — it also encompasses a user’s interactions with your products, services, sales reps and so forth.

Amit Bhaiya, the co-founder and CEO of DotcomWeavers, provided some extra context on the key differences between UI and UX: “UI design focuses on the various elements of the site. Think, ‘what happens when I hover over this button?’” he said. In contrast, UX design focuses on, “delivering a smooth and cohesive experience that the user of the site can effortlessly navigate. This involves thinking through how all elements can come together to deliver a seamless, elegant experience for the users. UX design also decides where to place the call-to-action buttons and messages, in order to ensure it is visible and intuitive.”

UI Mistake #1: Font Fiascos

You often see this mistake in older app pages, although modern apps can also suffer from this mistake, especially if the developer is using an app builder. App builders require little technical skill since app pages and components are pre-fabricated and easy to customize, which means the developer will not be as knowledgeable about app design (and UI) as he or she should be.

Bhaiya said fonts play an important role when constructing a user interface that delights and converts: “If there are too many fonts on a site or application, the development team will have more difficulty implementing a flawless design. This leads to a higher chance of bugs or design inconsistencies. Additionally, having a limited and consistent use of fonts helps to underscore a strong brand identity,” Bhaiya said.

Here are a few commonly made font-related mistakes:

Too Many Fonts

Try to limit your fonts to less than five different but similar styles. Too often, you see apps and pages where Times New Roman is used alongside Comic Sans, which may be used alongside Roboto. These styles do not complement each other. Your font choice needs to make sense to the viewer. Pick a style and stick with it.

Off-brand & Off-story Fonts

Like a character in a play, your font tells your users a lot about your app. Each font has its own character and feeling. Using the wrong font can reduce the effectiveness of your app. For example, a children’s educational app will not use Times New Roman because it will look lifeless and unappealing to young kids.

Overpowering Fonts

Fonts should compliment other UI elements and should never interfere with the app’s functionality. If a font overpowers your website or app page, it can be distracting. Whatever font you pick, it needs to work well with the intended mission you have set for each page. Context, as always, is key.

UI Mistake #2: Congested Elements

Planning out an app or website is a major part of the design process. For some businesses, this may be the only part of the design process they ever engage in. When it comes to app development, you’ll want to plan out all of the design elements before you ever write the first line of code. Many times, app pages appear cluttered, which can confuse visitors. From a UI perspective, a cluttered app page is a no-no.

“Congested elements can make unrelated elements of a page feel related due to a lack of proximity. The downfall to this UI mistake is that congested elements could potentially break a user’s workflow if they lose focus from their original task at hand,” said Aviana Parker, product manager and UX designer at Austin, Texas-based Zilliant.

Here are some of the most common causes for a cluttered UI:

Too Much Information (TMI)

Brands regularly believe their website or app needs to display every piece of information as soon as possible. This often results in walls of text and clunky buttons leading users to different pages which are also filled with mind-numbing information that users don’t need to see in order to convert. Step into your visitor’s shoes and consider whether the information you display on your app pages is actually needed by your user. If not, cut it out.

No Planning

The app developer/designer did not carefully plan out the app page’s UI when creating the page. Not planning in advance means the design process will take longer and be more frustrating and complex. Do the hard work up front to make future updates a lot easier to complete.

Designing for Desktops First

Eighty-five percent of adults expect a company’s website to provide a reliable mobile experience. But the problem enters when a website or app is designed with the larger screen in mind. The issue with designing for larger screens first is you have to remove elements as the screens get smaller. It is much easier to add elements as the screens get bigger.

Keep in mind two things when addressing congested elements on an app or web page:

What is the purpose of the app page? What essential bits of information and page elements are needed to meet that goal?

When planning out an app page, or any task, pen and paper can be an ally. Being able to draw out simple diagrams of app pages ensures they stay simple in design, easy to navigate, and they don’t become cluttered. If it is cluttered, return to pen and paper, list all the elements on the page, and consider the value of each of them.

Also, when considering congested elements, front-end developers need to think about “above the fold” content. Above the fold content is content that’s visible at the top of the page or app, and is seen before the user does any scrolling. Assessing the value of each element of your app or website will help you decide what content to place above the fold, and which content can live beneath it. One simple rule will help here: People will scroll, so you don’t have to squash every ‘important’ button or piece of text above the fold.

UI Mistake #3: Ignoring OS & Designing a One-Size-Fits-All App

“iOS and Android have completely different UI architectures,” Bhaiya said. “One has rounded buttons, while the other has rectangular ones. The list, tab, collapsible section and headline styles are all very different. Any app built today must be designed with portability in mind. So, if you use direct iOS design tools, then porting those design elements onto Android will be extremely difficult.” He went on to say how developers should avoid native design themes and use custom design elements that can be made to work on both device platforms.

“Another important aspect is that iOS has limited device sets and sizes while android devices are HUGE in number. When porting an app from iOS to Android, the varied device dimensions must be kept in mind. The content must adjust to different screen sizes without looking too congested,” he said.

When designing an application for a particular operating system (OS), keep in mind the strengths and limitations of that OS. While you can port apps from one OS to another, nothing compares to the native experience you get when an app is purpose-built for one OS. Also, different strategies work well for different phones because not all phones are created equally.

For example, almost all Apple devices have different screen sizes than Android devices. By porting apps over, you’re pushing out your app through a screen size it wasn’t designed for. Furthermore, iOS and Android have small but hugely significant interaction design pattern differences, like the location of the “back” button within the iOS. So, if you build an app for Android and then port it over to iOS, your lack of a “back” button in the top-left hand corner will seriously damage your user experience.

Many of the major platforms provide resources for developers to create apps specific to their devices or interfaces, such as Apple and Firefox.

Thus, if you have the time and resources, it is better to create separate apps for each OS. This way, the app is fully optimized for each operating system — and your users will be able to tell. Hybrid apps may be faster to develop, but there will always be a compromise, whether in speed, accessibility, features or the overall quality of the user experience.

If you do have to port your app, make at least the basic changes needed to ensure users on all operating systems can use the app as it was intended to be used. Otherwise, get ready for some bad reviews and some hefty brand reputation damage.

UI Mistake #4: Long, Unnecessary Forms

Forms are a major issue for many apps. Developers have to strike a fine balance between including enough information, auto-saving features, and whatever is needed to ensure the form accomplishes what it was created to do.

“One of the most common UI mistakes found on web forms is when there is no error input field state to serve as an indicator to a user that a required input field has not filled out. Adding an error state to a required input field helps users quickly understand where they need to backtrack in order for to complete a task,” said Parker.

According to Katie Sherwin, a senior user experience specialist with Nielsen Norman Group, many forms on apps and websites that contain placeholder text are actually harming their UI. In most cases, it is better to use labels as they are less distracting.

When it comes to web forms, here are come common UI issues:

The size of the form can dwarf other elements on the app page. The form can be inaccessible by the user’s keyboard. The form can be difficult to scroll down, or to select specific options. The form can collect too much information, especially information which serves no purpose at the time.

Creating well-designed forms requires an understanding of what visitors to your app or website want. You really need to get into their shoes and consider the effects of your form from a third-party perspective. For instance, many users:

Do not like handing out inessential information. Want to control the data they do hand out. Want to be able to easily navigate app forms. Want to avoid forms if they can.

UI Mistake #5: Color Carnage

Color clashes often occur when inexperienced developers are tasked with creating a functional UI. But you don’t need to be an art major to know which colors work well together and which ones do not — but the nuances of this issue go far beyond taste.

While the psychology behind color is an extremely important factor, accessibility for the color blind and visually impaired should also be a major consideration. “For colors, it’s important to keep in mind visually impaired users. Sometimes sites use similar colors, like orange and yellow, or contrasting colors, like blue and green, close together. This makes it hard for colorblind users to differentiate between the colors. If you’re a government body guilty of this, this is in direct conflict with ADA regulations,” said Keri Lindenmuth, marketing manager at Allentown, Penn.-based KDG.

To create a better UI experience for visitors, ensure your app is as accessible as possible to a wide range of audiences. This means you’ll need to consider edge cases as well (edge cases are the worst-case scenarios that may occur).

Tools are available to help you build user interfaces that are not only visually pleasing, but are also visually accessible, such as:

Contrast Ratio WebAIM Paletton

To Deliver Better Customer Experiences, Start With UI

A strong UI does not end when your app looks good. UI affects far more than just looks, it affects sales, online reviews and user happiness. So, it is crucial for developers and designer to invest in more time in getting the UI right so they can support their brand in achieving long-term gains.