Design work is complex business. It’s far too easy to mess up.
To create high-quality products, all of the small details are crucially important. Each detail must be taken into account. It can be easy to get lost in the details and lose sight of the big picture. That’s why there are several incredibly common user interface (UI) design mistakes and weaknesses.
So how can you avoid these common mistakes? Read on for some tips and suggestions focused on helping you avoid these too-prevalent pitfalls.
1. Lack of Planning for Edge Cases (Say No to Lorem Ipsum)
Using lorem ipsum and stock photos, you can easily create a beautiful, harmonic design… that will quickly be irrelevant to reality. Your beautiful design will be broken once it’s been filled by the real content.
To prevent this situation and avoid clients’ frustration about final products that look nothing like you intended, you need to get information. Gather the most information possible about the content that already exists or the content that will be produced.
Specifically, before you start working on a UI design, you need to know what kind of content will be shown in each and every section of the page. You also need to know the minimum and maximum sizes of the content (i.e., how many lines of text, image sizes). These turning points are called edge cases because they show when and how the interface will change.
Selecting Images
You’ll also want to investigate image limitations. If your client doesn’t have any custom photos or isn’t going to purchase any, there’s no sense in using beautiful but pointless photos from Unsplash.
Why? Photos tend to be conceptual. It’s not enough to use something pretty. Instead, you need to select images that create a narrative or imply a deeper meaning.
Whatever you do, don’t use photos that don’t need to be there. These days, people become overwhelmed by huge amounts of information. One extra bit of useless visual information will only irritate them.
Understanding Repeating Blocks
Another edge case is related to repeating blocks — for example, image + text, icon + text, number + text, and so on. You should think about how these blocks will look with two lines of text and with ten, as well as if they’ll stand one by one.
For small text blocks that describe features, you can easily use a three-column layout. However, if you have more than five lines of text and you need to show it all without ellipses, you have to come up with another visual solution. Why? Because reading long columns of text is good only for newspapers, and not convenient for the web. Possible solutions could include using slides with horizontal scrolling or a two-column layout.
Planning for Scaling
Knowing your content’s edge cases will help you use screen space more efficiently and choose the right UI treatment for each piece of the interface. But keep in mind that edge cases aren’t only about what you have currently. A good designer should always think proactively, allowing for the possibility clients may need to scale the UI in the future.
2. Inadequate Screen Annotations
The next big mistake that’s better to avoid is a lack of annotation in your designs.
Your whole team — the project manager, QA specialists, and frontend and backend developers — sees your design screens in their static forms, like a set of beautiful images. They can’t know what behavior you suppose for each interface element. They can’t predict how you designed it in your mind. What might be obvious to you and your fellow designers won’t be obvious to all team members.
That’s why it’s crucially important to include annotations about each element’s behavior, links’ addresses, animations, and screen interactions. When you skip this step, you risk misunderstandings. You also risk a lot of unnecessary after-the-fact confusion, when a lot of work has been done in exactly the wrong way.
It’s easy to see how a small thing like a screen annotation can waste a lot of development time. It can even impact the entire project scope and increase development costs.
3. Frustrating Error States
When you’re designing a user interface, don’t forget the main purpose of any user interface: to provide as smooth as possible an interaction between the user and the service. Interfaces are no place for doubts, questions without answers, or any kind of uncertainty.
Designers should provide clear feedback to users about states, especially in the case of error states. Accordingly, error notifications should satisfy the following simple rules:
- They should be recognizable and noticeable (e.g., the color red is a common UI pattern indicating an error).
- They should clearly explain what has happened and how users can fix the error.
- They should be contextual. It’s better to show error messages near the element they relate to.
- They should not be irritative. Isn’t your user already irritated enough by the error?
Designers should also take care of unexpected errors (e.g. server errors, page not found). Any error message is an obstacle to the user’s flow. That’s why we need to help the user handle it, provide any possible solutions, and try to smooth out a bad experience — especially if it’s not the user’s mistake. For example, a good solution may be to design illustrations or animations for 404 and 500 pages.
Being Careful with Form Checks
When designing error states, try your best not to annoy your users. In particular, be careful with all possible kinds of form checks.
For example, imagine you have a form with required fields. That means developers have a corresponding check, “All required fields shouldn’t be empty.” Let’s say the user tries to fill in the form, but in random order. When the first required field loses the focus state, it returns an error: “Please fill in this field. It is required!”
Our poor user is exclaiming, “Hold on, mate, I’m just clicking between the form fields and haven’t even clicked on ‘Submit’!” And things can even get worse. For example, let’s say you have another check, and the “Submit” button will become disabled until all required fields are no longer empty.
Just think about it for a second. Your poor user didn’t do anything and isn’t able to submit the form, but you’ve already blamed several mistakes on him. This will definitely piss off anybody, so it’s best to avoid such situations.
Weighing Cost and Value
Don’t listen to developers who try to tell you it will cost a high level of effort to implement in the way you want. Remember: NOT avoiding this problem will cost you customers! Nobody needs a service or product without customers. Even if it was cheap to develop.
4. Too-empty Empty States
This topic relates to the previous one — error states — and is also connected with edge cases. An empty state is the absolute edge case, so you need to think proactively about avoiding them.
How will your UI look when there’s no data on every page or section? Will it be friendly or frustrating? Will it look good, or will it look broken? Will users understand where they are and what the state means?
The best practice here is to provide a nice visual that includes informative content. It could be an illustration, an icon, or simply a text block with nice typography explaining the situation.
5. Lack of Typography Hierarchy
Next, another topic that causes many design mistakes better avoided — typography.
Text is the primary unit of informational content. That’s why it must be readable, recognizable, and well-organized. Properly formatted text facilitates users’ perception of information, keeping them focused on what’s really important.
Using Fonts and Font Styles
Playing with fonts may be fun. But if someone’s trying to read something that changes fonts ten times in a paragraph, it quickly gets tiring and annoying.
To avoid this kind of font fatigue, I suggest using no more than three fonts in any single layout. That said, remember the difference between fonts and font styles. Every font has its own set of styles: regular, medium, bold, black, italic, bold italic, and so on. When you combine all of these font styles with uppercase and lowercase, two or three fonts are more than sufficient for creating an attractive system of typography.
Paying Attention to Kerning
When thinking about typography, don’t forget about kerning. If you’ve never heard of kerning before, don’t worry; it’s very simple. Kerning is the process in typography by which the space between characters is adjusted either manually or automatically.
Kerning is important because, in some situations, adjusting the space between characters can make typography more legible and pleasing to the eye. However, misusing kerning — or not paying close attention to it — can cause major problems. It could cause misinterpretations or unintentionally destroy a design’s cohesiveness.
Maintaining Visual Hierarchy
Always try to maintain visual hierarchy between the font styles on your page. Use contrasting typography to visually divide different levels of text and establish a strict hierarchy. For information hierarchy to be clearly visible on a page, the main headings should be most prominent on the page. Subheads should be considerably smaller, but still clearly visible.
The same principle applies to visual hierarchy within a logical block. The headline should be the largest design element on the page, followed by a smaller, less prominent subhead. Next, any feature titles that follow should be noticeably smaller than the heading, and of the same weight. The smallest fonts should be used for descriptions of features, and so on. This visual hierarchy helps site visitors to distinguish between more and less important information.
6. Inadequate Padding and Spacing
Proper padding and spacing keep your layout looking clean and orderly while making it easier for readers to read and understand information.
Same-size spaces should be set around logical blocks (e.g., at the top and bottom, and on the left and right sides). If the spaces are uneven, your page will look messy, and users may not give equal consideration to each section.
Padding that’s too small means users can’t break down content into logical blocks. To keep logical parts from blending together, keep them separate and insert a large space between them.
An easy way to maintain visual hierarchy is to follow this simple rule: The padding between different logical blocks should be larger than the padding between the heading and text inside of each block. For example, say you have a long block of text that includes headings, subheads, and paragraphs:
- Set the heading padding-bottom to 40px, then follow it with a paragraph of text.
- Set the paragraph padding-bottom to 10px.
- If there’s a subhead after the paragraph, give it 30px for padding-top (i.e., the space between the paragraph and the top of the subhead will be 30px) and 20px for padding-bottom (i.e., the space between the subhead bottom and paragraph will be 20px, which is larger than the space between the paragraphs).
That will put the desired emphasis on the most important and biggest elements. The largest text — the heading — has the larger space around it. But this space should be closer to the related elements that follow it.
7. Messy Iconography
Icons are incredibly useful when you need to express meaning via a small symbol or to briefly illustrate a description. They’re also a fundamental part of modern interfaces, especially on mobile.
In applications, icons are often the equivalent of buttons. Just check out Instagram: You’ll see only icons and text.
That’s why it’s very important to select the right visual image to correspond to an element’s meaning. Sounds simple, right? Nope. Every designer in the world knows how painful it can be to find exactly the right icon.
You need to tell the story using very simple and common images that will be understandable to everyone. And you need to match these icons with the overall style of the UI. Then, you need to provide them to developers in SVG format.
Maybe you’ve searched for free icons, and you were thrilled when you found a nice image for each element. You think, how perfectly they correspond to each other! They will be understandable to everyone! Sadly, somehow, the overall impression of the icon set you’ve selected feels rather messy and untidy. How can you avoid this kind of messiness? Here’s a short checklist for you:
- Line width — After resizing, all of your icons should have equal line width. Otherwise, it will be very noticeable that they don’t.
- Corner radius — If your icons include some rectangular shapes, compare the corner radius of every icon in your set. If it’s different for different icons, you’d better fix it.
- Line cap shape (for outlined icons) — It can be rectangular or rounded.
- Corners join shape (for outlined icons) — It can be rectangular or rounded.
It’s true that unsophisticated users may not specifically notice different line widths or corner radiuses. Still, the overall impression will be wrong, and the users will feel it.
In other words, while it’s not wrong to use free icons, it’s best to go easy on them. Using free icons makes a project look cheap and, in some cases, unprofessional. Plus, there are plenty of free icons out there that people will recognize instantly. Why? They’ve already seen them used everywhere.
That’s why my advice is to be strictly selective with free icons or — even better — design icons yourself. Custom icons always provide a superior experience.
8. Low Contrast
Contrast a fundamental principle of graphic design. Our eyes like contrast. Contrast is an instrument which designers use to manage users’ attention.
Contrast occurs when two elements on a page are different. For example, contrast could come from using different colors for the text and the background color. It could be a heading set in a big, bold, grungy font used alongside an elegant sans-serif font for the body text. It could be the difference between a large graphic and a small graphic, or it could be a rough texture combined with a smooth texture.
The important thing about contrast is that the contrasting elements should be completely different. Not just a little bit different — a noticeable, bold difference.
Using White Space
That said, if you place two completely different elements very close to each other, the user won’t understand which element is the “main” one. That’s why we can say that contrast isn’t just about applying different visual styles to elements, but also about the art of using the white space. This is because, sometimes, to make elements contrast, you need to separate them with blank space.
White space is important to make your content easy for users to read. Of course, white space can be used improperly: having too much blank space or cramming too much content into a small area. Many websites with excessive advertisements also lack sufficient white space.
Ensuring Sufficient Contrast Between Text and Images
Avoid low contrast for text copy placed on an image. There should be sufficient contrast between the text and the background. To make copy prominent, place a contrasting filter over the image. Black is a popular color, but you can also use bright colors, mixing and matching them.
Another option is to use a contrasting image from the start. In this case, you can place the copy on top of a dark section of the photograph or image.
Avoiding Contrast Overdose
Avoid using too many styles on one page. Too many typographic and design styles on a single page make it look unprofessional — and also make it hard to read. To avoid this, limit yourself to a single font and two options for saturation (e.g., normal and bold).
Avoid emphasizing narrow page elements with color. It just doesn’t look good. For example, headings are already well-marked thanks to their size, type saturation, and paddings. Would you like to highlight a particular point on a page? Use a color background for the entire block, including a related heading and text copy.
9. Failing to Think Cross-platform
Yes, ideally, this should no longer be a problem in today’s world. We all know that most users access web services from mobile devices. Unfortunately, many designers still have a tendency to forget that fact. (Or maybe it’s that clients don’t want to fork over the money to create mobile-optimized designs?)
For design professionals, however, the problem of not optimizing for multiple devices shouldn’t occur. When creating a UI, you always should keep in mind the widely lauded “mobile first” approach. Concentrate on the content that every type of user will see on each page. Then, ask yourself, “Is the UI control I selected for displaying this particular content convenient or not?”
You may choose a nice UI element that will work perfectly on desktop devices — but it won’t be great for smartphone users. Or vice versa. That’s why it’s important to always keep in mind the wide variety of devices we must design for nowadays.
10. Too Much Design
Just because you can add something to your design doesn’t mean you should. Simplicity offers plenty of perks. So be careful about going crazy with styles. While over-designing isn’t a major mistake, it can cause some serious problems.
For example, using too many colors on a page is confusing; it becomes unclear which bits are more important. One or two colors are enough to give visual prominence to what’s really important.
We can say the same about font styles. It’s enough to emphasize headlines and subheads and use contrast for key phrases.
The more “stuff” you cram into your design, the harder a user needs to think to extract the information it presents. A design needs to breathe and live on its own. So remember: Having blank space isn’t necessarily bad. In many cases, it’s better than filling every square inch of blank space.
Does your design have mistakes that need fixing? Let us know! Our top-notch design team can help you avoid design madness while communicating more clearly and beautifully.