The 10 most common mistakes made by UI designers, see if you have made any

Editor's note: It is inevitable to make mistakes when designing. Some mistakes are really just unknown before, and they are suddenly realized after knowing it. And there are many mistakes that everyone knows, but they are ignored for various reasons and accidentally made. But no matter which one it is, we have to correct and improve it after all. The following are 10 common mistakes of UI designers summarized by designer Danny Sapio. Let's sort them out and see how many of you and I have made~

1. Ignoring the product’s functional scope

Sometimes designers introduce features into a product that complicate the development process without adding any value to the product. It is important to prioritize design features while keeping in mind business goals, the scope of the project, the product timeline, and the development approach.

For example, we are designing a feature option for users to upload their personal profile pictures. However, if we add functions such as cropping, scaling, and rotating in addition to the "upload" function, this in itself will complicate the original function.

Maybe it is very convenient to add "rotate" and "crop" buttons in the design, but it is hard to say in the specific development and implementation. Should we call existing functions, add open source components or write code from scratch? These will be problems and full of unknowns. From the perspective of the product and the team, the safe choice is to avoid adding features as much as possible unless they are determined to be extremely high priority and essential to the entire application. Always put business goals and user goals at the forefront of the design process.

2. Not preparing for the handover

[[340579]]

In the modern product design industry, your design or materials may be used by upstream and downstream. When designing, we should consider who else will use our work. Whether it is to be handed over to developers or other designers, we must try to organize the relevant content and materials as reasonably as possible.

Taking the design file of UI design as an example, each artboard should be correctly named and arranged horizontally so that it can be opened by clicking in a logical order.

We should have a well-organized design file that contains icons in SVG format, and other graphic assets that should have high-quality versions.

In my daily work, Zeplin is my preferred collaboration tool. With Zeplin, developers can easily get code snippets, size parameters, spacing data, font sizes, SVG materials, and more.

Such seamless switching can make the entire process smoother and greatly improve team collaboration efficiency.

3. Ignoring the user’s usage scenario

When designing interface interactions, it is very important to consider the user's environment, because there are many environmental factors that affect interaction decisions. Considering the user's location when using our app, how much time they have to operate, and their emotional state is the basis for designing interactions.

A sleep cycle app is a very typical example. This app uses a relaxing dark interface, which is especially suitable for users who set alarms before going to bed.

You can see good and bad examples in all sorts of places: navigation apps should require as few clicks as possible, Kindles should try to make sure they are glaringly readable in sunlight, note-taking apps can be used offline, and so on.

4. Pursue high-fidelity effects

[[340580]]

When validating ideas and exploring solutions, it is best not to rush for high-resolution visual effects. This is the easiest mistake to make.

In fact, rather than being a mistake, it is usually a waste of time.

When we want to combine different ideas together and explore layouts and layers, it is best to use a tool like Whimsical to draw wireframes, which is faster and lighter. When it is just a wireframe, it looks really rough and may be difficult for people to love it, but we can receive feedback and explore functions more easily.

5. Ignoring users with behavioral disorders

When designing a digital product, it is like creating a public building like a library or a school. It must be accessible to everyone, including users with physical disabilities, color blindness, and visual impairments.

Domino was once sued by a blind user because he could not access the Domino website. In fact, in today's product design, it is completely feasible to take blind and color-blind users into consideration.

Usually, we try to make the product look very good to ordinary people, thus ignoring the relatively small number of users with behavioral disorders who have different interaction patterns from ordinary users.

Scaling down text to 8px or using a very light grey can make a design visually rich and expressive, but it leaves the design with minimal accessibility for visually impaired users.

On Dribbble, we can see many designs with accessibility barriers. If they are directly copied to real products, there will definitely be problems.

For example, the Web Content Accessibility Guidelines (WCAG) requires a contrast ratio of 4.5:1, which many designs cannot meet. In addition, there are detailed indicator requirements for movement, hearing, and cognitive impairments.

Of course, you can also use Stark to check whether your design meets these accessibility standards.

6. Plagiarizing others’ work or blindly following trends

[[340581]]

For designers, trends are a bit like junk food. Following trends indiscriminately can give you some "obvious but very cheap" solutions that will bring rewards in the short term, but are worthless in the long run. Designers who follow trends will soon taste the bitter fruit. What kind of feedback do you get from following other people's designs in the end? The only feedback is emptiness. - Designer Micah Bowers

It can be easy to get caught up in the world of Dribbble, soaring through beautiful animations and gorgeous gradients, and quickly forget the original design goal.

We are indeed fascinated by discovering special interactions and design styles on platforms like Dribbble, and try to apply them to our designs. However, there is a difference between being inspired by novelty and blindly copying. Learn from them reasonably, apply them flexibly, and don't plagiarize.

7. Ignore the conventional design language

[[340582]]

Any time you break the routine, users will need to spend more time processing the information. Designers need to take into account the limitations of human cognition and limited memory capacity. - Joanna Ngai

After so many years and the cultivation of so many digital products, users actually have relatively clear expectations for apps, websites, and software. If the functions and experience do not meet their expectations and are not "intuitive" enough, they may be frustrated.

The most typical example is icon design. People have very clear expectations for icons corresponding to functions such as "search", "home", and "favorites". If your design deviates too far from cognition, users will definitely be the most troubled - they don't know what your icon represents.

8. Focusing on visuals rather than actual mechanics

One of the things every UI designer hates most is breaking the designs they created.

The most common situation of breaking the design is that it is necessary to input information and adjust the layout for daily use and application. However, if you want the product and design to be flexible, scalable, and user-friendly, the "perfect design" that only exists in an ideal state must be broken.

When I was designing an APP interface, if the user entered a name of only a dozen letters, it would look simple and elegant, but when a user named Hubert Blaine Wolfeschlegelsteinhausenbergerdorff Sr. entered his full name...what would happen?

When testing the entire design, it is reasonable to take a step back and make sure that the entire interface can take into account the actual situation.

9. Lack of complete and effective status presentation

In actual design and development, different states of UI controls represent different meanings and directions. If any one of them is missing, the experience and even the function will be very different. At this time, developers may come to supplement it, but usually such supplements will make the design lack uniformity and bring more problems later.

Taking buttons as an example, we have to take into account different states, such as error, activated, disabled, hover, empty state, filled state, loading state, etc.

When I was designing a wish list app, I needed to prioritize the empty state when the user hasn’t filled anything out yet. Without this, the whole experience would be far worse.

10. Redesign native UI components

By using existing components on the original platform, UI designers can quickly create an experience that is familiar to users and avoid input errors.

No matter how good a designer we are, it is difficult to design a date picker for iOS from scratch. Even if you design an objectively better date picker, on the one hand, users need to relearn how to use new components, and on the other hand, it is unknown whether you need to match more things to this new design, and how much the developer's work will expand.

Making good use of existing native UI components can save a lot of trouble, help the entire team save time and energy, and reduce the user experience.