User interface (UI) design is about building interfaces with a focus on styling and interactivity. The UI designer’s goal is to create an interface the user finds easy to use and aesthetically pleasing.
"The goal of user interface design is to create a user interface that makes it easy, efficient, and enjoyable for users to interact with a product".
UI design prioritizes the user’s visual experience. A good user interface is functional, reliable, and enjoyable to use. User interface design should minimize the effort that the user has to invest interacting with a product and help users accomplish their goals with ease.
Designers use methods of user-centered design (user interviews, direct observations, etc.) to learn about their target audience and ensure that the visual language they introduce in the UI is well-tailored to them. It’s important to make the UI aesthetically pleasing because interfaces that have great aesthetics are perceived as more usable by end-users, according to the aesthetic–usability effect.
UI Design Mistakes
1. Inconsistent Design
To ensure a smooth and concise app, avoid using too many different styles. This will send mixed signals to your users! The key is repeating patterns and elements any time you can. A consistent-looking design goes a long way in establishing trust with your visitors and in creating an enjoyable experience. Plus, it will help your users learn their way around your app much faster.
To avoid inconsistency, keep an eye on the following elements:
Consistent use of color palette for elements like buttons, text, links, header, footer, hover states, etc.
Consistent font styles for titles, paragraphs, links, etc.
Use either rounded or squared corners for the shapes in your app: Icons, cards, buttons, etc.
Consistent line thickness: for icons, dividers and any other lines you use.
Every element that deviates in any way must have a reason to do so.
2. Poor Use of Colors
Choosing the wrong colors is bad news for a design. But what exactly are the “wrong colors”? This can be quite a vague, subjective topic. After all, colors portray meaning, so you have to consider your client’s brand and audience. You also have to keep visitors with color-blindness in mind. Check out this article about color blindness on usability.gov for some great tips, which are not surprisingly also good points for color usability in general, such as using high contrast colors.
3. Too Many Words
Too much text can hide the website message from visitors. After all, if a reader is bogged down by lots of words and paragraphs, he or she will either immediately leave without trying to read, or make an attempt to read and give up after a valiant effort. Either way, the end result is frustration, a missed message, and a lost prospect.
So, say what you need to say in as few words as possible, or coach your client on this important rule. Use more visuals and less text: a picture is always worth a thousand words when it comes to digital design. And of course, use headings and subheadings and bullets and boxes along with your graphics.
4. Poor touch target on mobile and tablet
Small touch targets are frustrating because they can make it difficult for the user to complete their desired action. We’ve all experienced the frustration of tapping the wrong button on our smartphone and having to wait while the wrong screen loads!
So, when designing clickable elements, remember that users come equipped with different sized fingers:
Create finger-friendly targets by keeping in mind that the average width of an adult index finger is 1.6 to 2cm.
Make your touch target at least 45-57 pixels wide. This will give users enough room to hit the target without having to worry about accuracy.
5. Carousels/ Paginated Lists
A carousel UI (Carousel User Interface) is a website element that displays the information in a set of elements that we can slide, fade or somehow move into view. It can be a slideshow of images, texts, videos, or a combination of all of them.
For example, you may have a product landing website that sells clothes and have a product carousel that slides between each set of clothes, sometimes a limited number like 5 or sometimes infinite.
6. Poor Performance
Poor performance means: slow load time and glitchiness. If any part of your website, any element clicked on, any animation, loads too slowly and is too glitchy…well, it’s bad news for the website owner. Slow-loading websites lose a great many visitors, because, let’s face it, “ain’t nobody got time for that!”
And no one wants to watch animation that just doesn’t move smoothly. Bad animation reminds us that we are interacting digitally, rather than personally, and our trust factor of the website goes way down. Remember, humans want that real-life-like interaction when online, so make it smooth and keep it real.
7. Lack of text hierarchy
Text is the primary unit of informational content, which is exactly the reason why it must always be legible and organized. Properly formatted text facilitates users’ perception of information.
Our job as designers is to organize this in the most digestible and comprehensive way. Here are some things to keep in mind:
Have plenty of contrast between each style title: Use size, weight, and color to separate each style.
For information hierarchy to be clearly visible, always start with a big title which should be the most prominent element of the page. Sub-headers and other text should be considerably smaller, and so on.
Use adequate spacing and kerning.
Separate your blocks of text clearly, use small amounts of space to connect related information and use lots of space to visually separate different blocks of information.
8. Complicated Navigation
Navigation on a website or in an app should not be confusing. I’ve been on some websites before that really made me want to punch the screen in frustration. When users can’t navigate back and forth between pages easily or when they have to search endlessly for the right information or when a design is simply difficult to learn…users will go somewhere else instead of messing with all of that annoyance.
A UI design should make it easy to go back to homepage, easy to find certain pages, easy to just go back one or a few pages, easy to find forms, etc, etc. The entire design should simply flow. You want them to be able to easily, naturally breeze through a website and understand the message and point of the site as quickly as possible.
9. Bad Forms
Poorly designed sign-up or order forms are definitely bad forms. All forms should be easy to fill out and bug-free. Make sure to add numbers or a timeline of sorts to forms with several steps so that users know where they are in the process. And when users hit the “Enter” key on the keyboard, for design’s sake make the Submit button click.
Do go over and over the form to weed out any bugs. For instance, fields shouldn’t disappear if an error message appears for an item incomplete. I have been known to quit a form if I had to fill out fields again after an error message, and I know I’m not the only one. And definitely check for and remove any unnecessary fields that simply waste a user’s time.
10. No Feedback
Let’s say (gasp!) that your design does load a bit more slowly than some. Should you make the user just sit there and watch a circle spin round and round? Certainly not – unless you want to lose a good majority of them. Instead, entertain them! Give them something to read or an interesting animation to watch.
Let’s not forget about the feedback necessary when simply clicking on items too. Anytime a user clicks on something, is waiting for something to load, scrolls down, goes to a bad page, anything…give them feedback to let them know that you know they did something.
11. Using irrelevant or low-quality images
Photos in your interface will help to tell a story, so choose a strong image that will complement the story and the look of your app.
Bear these tips in mind when choosing images:
Avoid irrelevant photos. Show photos related to your service or product.
Use high-quality images only.
Choose creative and realistic photos. Avoid fake or staged stock photos.
12. Bad iconography
Sometimes icons seem to be the “easiest” part of the design. Some designers even see them as an “extra” decorative element, when in fact they are also a fundamental part of modern interfaces. Especially on mobile where icons are the equivalent of buttons (just take a look at Snapchat) you will find an interface that is mostly made of icons.
When it comes to iconography, follow these tips:
Use vectors / SVG for your icons. It’s the easiest way to ensure your icon will look sharp in any device or resolution.
Use a consistent style: First of all, all of your icons should either be outlined or filled. In addition, ensure a consistent line thickness and corner radius.
Ensure the message of your icon is clear.
UI Design Guidelines
Creating a successful user interface requires applying a set of design guidelines and principles.
Visibility of system status: Systems should offer appropriate feedback within reasonable time. For example: when a user clicks on a button, it changes its background color as well as its font.
Match between system and the real world: Use familiar language your target audience can understand. Design your UI using symbols and objects that relate to the real world. For example: add a magnifying glass icon to a search bar.
User control and freedom: Give users space to go back and undo or redo previous actions.
Consistency and standards: Standardize every UI element to guarantee consistency throughout your system.
Error prevention: Reduce any potential errors in your system, and flag them when they happen so the user can fix the issue right away.
Recognition rather than recall: Minimize the amount of information a user needs to remember by offering help within the specific context in which a user is. Avoid giving them long tutorials upfront.
Flexibility and efficiency of use: Let users customize or tailor their interface to suit their needs so that frequent actions can be achieved through shortcuts and touch gestures.
Aesthetic and minimalist design: Keep both your content and visual design simple. The user shouldn't get distracted or confused by unnecessary elements that get in their way.
Help users recognize, diagnose and recover from errors: Highlight your error messages and use plain language that give specific solutions to your user's problems.
Help and documentation: Ensure your documentation is easy to find and understand. Present the documentation in context right at the moment that the user requires it and make it actionable.
Resources: careerfoundry.com, maze.co
The Tech Platform