5 Common UI Mistakes, Explained by a Puppy

UI stands for user interface, which is how a user interacts with the interface you create. This includes menus, navigation, buttons, and more. It’s a part of the overall UX (user experience) that’s focused on the visual aspect of the user’s overall experience on a particular website or app. Good UI involves consistency, simplicity, and clarity. It is crucial to organize complex information in ways that are easy for a user to understand and navigate. You do this by creating a visual hierarchy that is easy to follow, designing clear and concise labels for actions, and ensuring that the layout and design stay consistent among pages. UI designers are very intentional with everything they do. Every action is added only if it’s absolutely necessary to the user’s experience, as designs need to be as intuitive as possible. Simplicity is key; however, simplicity is difficult given the large amount of information on most websites. As UI/UX Designer Pär Almqvist said, “A modern paradox is that it’s simpler to create complex interfaces because it’s so complex to simplify them.” The direction and flow of the website are managed through a clear UI, allowing the user to focus on what is most important. Ironically, the best UI design is invisible; if you don’t notice any usability issues and confusion, then you did your job right. Below are some of the most common UI mistakes that designers make, using illustrations of puppies to help explain the concepts.

 

1. Overly Complex/Cluttered Design

puppy01

UI design needs to be simple so it’s easy for the user to navigate where they want to go. Many designers get overexcited and start adding lots of links, buttons, graphics, gifs, videos, motion graphics, etc. While these features are beneficial in moderation, overusing elements just clutters up the page and confuses the user. It should be simple and straightforward for anyone to navigate your website, and adding a lot of features that are cool but ultimately not useful is a common mistake. Ask yourself if you’re putting something on the page because you need it or because you want it. Adding a photo of the mansion you’re writing about is something you need. Adding a 3D tour of the mansion that the user is forced to navigate through in order to go to the next page might be cool, but it’s not necessary, and it’s just going to confuse or frustrate the user.

 

2. Too Much Text

puppy02

The majority of website reading is done on mobile devices. That means that large blocks of text are not very user friendly. Paragraphs should be short and spaced apart so it’s easy for someone to read them on their phone. Make sure you test out your website on mobile before you publish it. If you’ve got long blocks of text, find logical breaking points to start new paragraphs. Even if the user is looking at your website on their computer, breaking up text into shorter paragraphs still makes text a lot easier to read and comprehend.

 

3. Non-responsive Design

puppy03

Mobile-first design is extremely important now with the prevalence of mobile browsing. Designing for mobile first means you know your site will be responsive and look right in the smallest size, which makes it a lot easier to resize for larger screens. Designing for a computer first and then trying to cram all that information into a mobile device is going to make it look cluttered and disorganized. Make sure your content can adjust to desktop, tablet, and mobile screen sizes, and that you’re taking time to design the website for each. Too many websites have a mobile site that’s exactly the same as their desktop site, just smaller. That means it’s hard for viewers to read and navigate, so they’re going to have a bad experience.

 

4. Lack of Hierarchy

puppy04

When looking at a website, it should be obvious where you want someone to look first, second, third, etc. Otherwise, viewers’ eyes will just wander aimlessly around the page, trying to figure out what’s going on. When you have very prominent elements that lead to somewhat-important elements that lead to less important elements, then the page makes sense to the viewer, and it’s easy for them to figure out what the most important information is. Using size, color, and layout, you can establish a hierarchy that helps your user navigate the page. Plus, if they’re only going to spend a short amount of time on your page, you need to make sure it’s obvious what the main topics are. It’s a good idea to test this out on people and ensure that the hierarchy you’re trying to establish is working the way you want it to.

 

5. Too Many Clicks

puppy05

Good UI designers consolidate similar content on a page, rather than spacing them out through multiple pages that involve clicking and waiting for pages to load. People expect instant gratification now, and if you’re making them click, wait, click, wait, etc., then they’re likely going to get bored and leave your website. Think about what’s best for the user. If you’re looking at a list of ten items, are you more likely to read all ten if all you have to do is scroll down a page, or if you have to click “next” after each item and wait for the subsequent page to refresh and load? Be intentional with your content and think logically about how to display information so it’s optimized for the user.

 

Good luck designing!

Hopefully, these tips help you optimize your UI design for your next project. It’s an important part of web design and the overall user experience. Plus, it’s puppy-approved.