Text too small to read.

Small light color font content on a white background.

Users not able to see the crucial features snugly located somewhere in the user interface.

These are some of the common issues with UX/UI design in apps and making a lot of mistakes like these would cost you dearly. While planning a software project, it is imperative to identify such mistakes quite early in the designing stage because the aim is to create an intuitive and fast interface that provides seamless user experience.

Here are some deadly mistakes that can spell doom for the app, and how you can eventually avoid them.

1. Deviating from User Expectations

Interestingly, users do have some expectations when it comes to using those basic GUI widgets (radio buttons, checkboxes, scrollbars, command links/buttons, etc.) Trying a revolutionary change on those buttons may not be well received.

Consider this simple example: You have been listening to BBC news all your life. Suddenly, somebody in your family decides to listen to CNN instead, and you get the “fish out of water” feeling. This is exactly what users are going to feel as well when you make heavy modifications in the GUI widgets.

Most of the popular GUI widgets have been perfected and experimented with, for years on end, and there is a reason why users like them. It is not easy to change that feeling of ease and comfort overnight. This is because users have to exert substantial energy and brainpower to do something new; and they may not be receptive on that.

Hence, do not make drastic changes in the appearance of GUI widgets of your app. Your users prefer to have hassle free navigation through the app, so it’s better if you retain the original look and feel of the GUI.

2. Not Knowing What the User Really Needs

When companies fail to realize the actual needs of the user, and come up with something that doesn’t address their needs, it leads to a big blunder. In such cases, you cannot increase the sales and your app fails.

It is important to research and gain deep insights into user interests before deciding on the features that are to be incorporated. For this, do a thorough user and market research.

Understand what your target users expect from your app’s design – instant response time, smooth navigation between controls, easy readability and so on – in short, an intuitive user experience.

Also, do a critical analysis of your competitors – know the usability factor of their apps; what all features they include in their apps, how interactive are their user interfaces, etc.

And first time developers beware: do not overload too many features into the app. The main purpose behind an app is to simplify the activities of your users.

So it would be advisable not to go overboard with features as this would lead to a flurry of activity that would instantly convert it into a mediocre app. Less number of features (prime ones, of course) would do the trick.

3. Poor Touch Targets

Users come equipped with different sized fingers. So the touch has to be configured to cater to the fingers of all the people in the target segment. The average width of an adult index finger is 1.6 to 2cm. Hence, keep that in mind while designing touch based mobile applications.

If users find it hard to touch and activate the features on the app, they might abandon using the app altogether and that would be really tragic. And this applies again to the number of features you have. The more features you have, the smaller tap areas on the app. On the other hand, incorporating a few prime features would lead to larger tap areas.

4. The Scroll Horror

Magazine and newspaper editors and advertisers once lived in the perpetual horror of ‘’the fold”. When mobile applications became popular, the “fold horror” eased a bit because the content was visible on a screen that could be easily scrolled.

But this was only partly true because it became more and more important to create a responsive and longer web layout where the main actions should not go below the fold, or rather, beat a place where people can easily scroll and find it.

Conversions increase only when the relevant buttons are placed “above the fold”, or when users don’t have to scroll. Placing a clear Call to Action in a prominent location would bring in more conversions.

5. Buttons that Mimic the Looks of GUI Control Buttons

Just like having too many GUI controls can be a terrible mistake, the opposite of this can also be deadly. Underlined texts and headlines generate the feeling that they are links that would take the users to a new page.

They click on it, but when they don’t get to the page, they assume the link is broken and exit the app. Users often get confused and sometimes irritated due to this farce and they may not come back again.

Reveal the radio buttons wherever they are absolutely necessary, but don’t give the wrong impression of radio buttons where there are none.

6. Inconsistent GUI Controls

The GUI controls should be consistent. If you are using particular words for Call to Action and similar actions, then use the same words throughout the app. Using different words for the same action could create confusion.

Sometimes actions that the developers assume will be simple for the users, do the exact opposite. If you follow a particular pattern in your app, follow it consistently throughout. Make sure the buttons and the pages appear where the users expect them to come.

7. Skipping the Flowcharts and Getting Down to the Designing

Developers do not save time by skipping the flowcharts and plunging right into the designing part of the app. It is very important to build a flowchart with users in mind, and many developers create these charts with user personas so that they always have the end user in mind.

This would also help in determining where the users are coming from, what their interests are and where they lie. Hence, while designing the flowcharts, it is imperative to decide on the user and business objectives and whether it would be accomplished at the end or not. By creating flow outline, it is possible to go through different options with page flows, and decide on the best one.

8. Not Considering ‘Perceived Affordances’

In layman terms, affordance means all the actions that are physically possible depending on the properties of an object/environment. A staircase allows you to ascend or descend, a bottle cap allows you to screw or unscrew.

Similarly, in a webpage, a slider performs the function of moving up and down, the checkbox allows you to check or uncheck it and the hyperlinked text takes you to another page. Affordance allows a user to do something they can easily understand.

Perception of these affordances will be based on the user’s knowledge of the webpage, experiences, beliefs and goals. While designing user interfaces, it is important for the designer to give correct cues or it could lead to confusion and thus bad user experience.

Designers must use correct visual signifiers through which users can perceive how they observe these UI elements and interact with them. It is also important to remember that all users are not created equal; hence all affordances may not be perceived or interpreted in the same way by all. So back all the visual cues with proper labels and instructions.

9. Absence of the Right Kind of Dialog Boxes

In a web app’s dialog usability, it is mandatory to let the users know of the system’s current state and how their commands have been interpreted. Dialogs are meant to inform users about how their actions are turning out, without taking them away from the current screen.

Silence can keep the users guessing. So while creating a web app, make sure the dialog box doesn’t obscure information from the users. But use it sparingly, because continuous messages can be interruptive.

For example, when the user decides to quit a particular page after typing information, the dialog box can come in with the confirmation box saying “Discard Draft? Cancel or Discard”.

However, bombarding them with subscribe dialog boxes (For example, “Please subscriber to our daily newsletter by typing your email address”) far too many times can be really irritating.

10. Making Common Mistakes with Error Messages

Users spend time and effort to fill out forms, and when there is an error in them, it is mandatory to inform them of what went wrong and where. If there are specific rules for creating a password, then inform the users before hand, so they don’t have to do the same thing twice.

Or, if there is a promo code to be applied, just inform them beforehand what kind of promos apply and why. Not informing them on time can build up anxiety and frustration in the user. Remember not to make these mistakes while creating error messages:

1. Ambiguity- Not being clear about the mistake made by the user.
2. Blaming the user – It is better to be humble, even when the user makes the mistake. Point out the mistake gently, so they will be prompted to attempt again.
3. Poor placement of error messages – It is advisable not to place the errors on a bulleted list because that really turns them off. Place the error messages right on top of the errors so the users can see what’s wrong instantly.
4. Not using microcopy to prevent errors – Small bits of explanatory text near the blanks can actually instruct the user what to fill, so they can get it the first time round.

11. Absence of Smart Defaults

Having an extra field in the form filling page of your app can be a deterrent. So if that extra field is an absolute necessity, then make sure you put in default values in form input fields. People scan forms quickly to check how much time it will take them to fill the form, and if there is already a default value in the form, they are likely to go ahead and fill the others.

Not having smart defaults could make it time consuming and frustrating to the user, and that’s a grave mistake. It is also advisable not to put in defaults for inputs fields that require user attention. Don’t assume what the user is going to click, and even if it was a well-researched default, users might want something else.

12. Ignoring Accent Colors for the Call-to-Action Buttons

It is very important to incorporate good accent colors to draw attention to buttons like “Buy now”, “Start a free tutorial”, “Enroll now” etc. Use a different color for the buttons so it will stand apart, especially for those very crucial Call-to-Action buttons.

The accent color has to be bright enough to attract attention, but not irritating and distracting. Make sure the accent color complements with the rest of the color theme in the app. Also reserve a specific color for the call to action and do not use it elsewhere in the page.

Conclusion

These are some of the most commonly found mistakes in UI/UX design. And remember, whenever you make any design changes, make sure to test it thoroughly to see how effective it would be.

App design is a differentiator for success, and with thousands of apps that get released each day, only a handful of them get approval. Poor practices can lead to deadly mistakes in UX/UI design, and all the efforts of so many people go down the drain.

A final reminder:

While designing your app, remember to design for multiple platforms, unless you are targeting a particular one. This is how you get a Minimum Viable Product (MVP) right into the store.