Design mistakes you must avoid

Photo by Sarah Kilian on Unsplash

Mistakes in the design phases are common and often lead to a cycle of rework in the product development process. So, we should always try our best to avoid and take care of the mistakes that might happen.

So today, I am going to talk about 3 UI/UX design mistakes we should avoid while designing the UI/UX of products.

1. Test your UI with an actual web browser/ Phone user interface.

Most of the time, we design UI screens leaving some of the UI design hiding under the first scroll (below the fold). This might not be the problem for every screen, but for the screens which have high priority data, it is definitely a major problem.

The reason why we happen to make this mistake is we always choose the default artboard size in the design tool and starts designing, without considering the actual browser or phone screen height.

And later, when the development teams start building the actual designs, we get a lot of design tickets of important data moving under the scroll. And then, we designers have to make adjustments to our design to make it work and to show the high priority data above the scroll, which again creates a cycle of design explorations.

So, being a UI designer, we can ask our clients to give us the browser or device metrics where the product is mostly going to be used.

2. Cross-check your design with real data before giving it to the development team.

Having the real data at the start of the product design phase might be difficult or in some cases, we would not have it. But not having it should not be a reason to not test your design with actual data. You can always have tested your UI with some dummy data, but one which resonates with your future data. (Say no to Loren Ipsum).

Testing your UI screens with real data will always help in deciding the spacing and margin for the components. Even in some cases, when certain data is mandatory or necessary to show, we can decide how much to show or hide without compromising the usability of the product.

For example,

You have designed a table with some random data without considering the actual characters of data or what might come in the rows, then there might be chances that when you put the real content, your content might float outside the table or you have to adjust your spacing to accommodate them or even in bad scenarios, you have to reconsider the whole designs.

So, it is always best to apply or add real data to your designs, and if you find some early issues, it is best to make a decision there to make your design scalable.

3. Not considering all the states of a flow or Experience

It’s going to be a rarity that you create a screen in your interface that has only 1 state. The reality is that the world in which we live in isn’t perfect, and things go wrong. Servers take time to respond. And your users won’t always use your product the way in which you intended them to use.

Therefore, When you are designing the experiences, you must always think about the complete experience, from the start to the end, also in-between states, edge cases like what will happen when there will be an error, or how would the UI look like the first time or if something is partially available.

Let’s consider that you are designing a search feature for your product, then ideally you would think of the following states,

1. Search Input box,
2. Search Results.
3. Selecting a search
4. No results found (Empty State)

But if you think of a searching entity as an experience and you go step by step, then you would realize that you have actually missed a lot of states.

So, let’s us consider all the states that might appear in your product’s search experience,

1. Input Box.
2. Hover state.
3. When you click on the search box, there will be some recent search or there might not be.
4. How you will show when users start typing the search.
5. When you select an option, how would the search loading look like (skeleton screen)
6. How would be the empty state screen if there are no search results (Empty State)
7. What will happen when the user clears the search
8. What will happen if there are server errors or system errors (Error State)
9. What will be the ideal state (showing search results)
10. What will be the partial state (Between empty state and ideal state, when there are 2 or 1 search results)

All of these states(cases) are part of what the users might experience. And leaving any of these will leave a gap in the overall user experience of the product. So, being a good UXer, always try to think and design all the states or edge cases that your product feature might go through in reality.

Conclusion

The above mistakes are such mistakes that you might make unintentionally, but making them might result in continuous design requests from your client development teams, eventually increasing your design work. So, before reaching to the final designs, always confirm and make sure whether you are making these mistakes or not, if you are, just take a step back and think about them.

Thanks for reading and happy designing.