wordpress

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.

About the author: Lisa Dzera

I’m a graphic, motion, and UI designer who thrives on finding creative, outside-the-box solutions to design challenges. I have a love for coffee and an eye for design.

22 comments to “5 Common UI Mistakes, Explained by a Puppy”

You can leave a reply or Trackback this post.

  1. Josh Alexander - February 3, 2016 at 3:36 am Reply

    I will always be jealous of your site, I still can’t get mine looking like this. Haha great work and your design prowess demonstrates these concepts perfectly!

  2. King OF Technoogy News - February 16, 2016 at 12:31 am Reply

    I’d like to thank you for the efforts you’ve put
    in penning this site. I really hope to view the same high-grade blog posts from you later on as well.
    In truth, your creative writing abilities has motivated me to get my own, personal site now 😉

  3. graphic design - February 28, 2016 at 1:23 am Reply

    Hi! Someone in my Facebook group shared this website with us
    so I came to take a look. I’m definitely enjoying the information. I’m
    bookmarking and will be tweeting this to my followers!

    Terrific blog and amazing design and style.

  4. home movers - March 2, 2016 at 2:54 pm Reply

    Only wanna state that this is invaluable. Thanks for
    taking your time to write this.

  5. bastcilk doptb - March 3, 2016 at 8:51 pm Reply

    Hello there, You’ve done an incredible job. I will certainly digg it and in my opinion suggest to my friends. I am confident they will be benefited from this site.

  6. go to my site - March 4, 2016 at 10:52 pm Reply

    Superb, what a web site it is! This website provides useful facts
    to us, keep it up.

  7. weblog - March 6, 2016 at 4:29 am Reply

    I’ve been browsing online more than 2 hours today,
    yet I never found any interesting article like yours.
    It’s pretty worth enough for me. In my view, if all website owners and bloggers made good content as you did, the internet
    will be much more useful than ever before.

  8. AffordableMoversUS - March 17, 2016 at 12:20 am Reply

    I think this is one of the most vital info for me.
    And i am glad reading your article. But wanna remark on few general things, The web
    site style is wonderful, the articles is really nice : D. Good job, cheers

  9. Socks Proxies - March 28, 2016 at 5:07 am Reply

    I was able to find good advice from your content.

  10. Water restoration - March 28, 2016 at 5:25 am Reply

    There is certainly a great deal to learn about this
    issue. I like all the points you’ve made.

  11. next - April 3, 2016 at 2:22 pm Reply

    I just want to say I’m beginner to blogs and really savored your blog site. Probably I’m likely to bookmark your site . You really have incredible articles and reviews. Thanks a lot for sharing your blog.

  12. Deloris - April 7, 2016 at 5:02 pm Reply

    Pretty! This was a really wonderful post. Thanks for providing
    this information.

  13. Affordable Local Movers - April 11, 2016 at 9:23 pm Reply

    Woah! I’m really digging the template/theme of this website.
    It’s simple, yet effective. A lot of times it’s hard to get that “perfect balance” between usability and visual appearance.
    I must say that you’ve done a awesome job with this. Also, the blog loads very quick for me on Firefox.
    Outstanding Blog!

  14. leads for water damage - April 23, 2016 at 9:15 am Reply

    This design is incredible! You certainly know how to keep a reader amused.
    Between your wit and your videos, I was almost moved to start
    my own blog (well, almost…HaHa!) Excellent job.
    I really loved what you had to say, and more than that, how you presented it.
    Too cool!

  15. Garcinia Cambogia Como Funciona En El Organismo - April 27, 2016 at 3:58 pm Reply

    Hello my friend! I wish to say that this article is amazing, nice written and come
    with almost all significant infos. I would like to look more
    posts like this .

  16. wwe payback 2016 results - April 29, 2016 at 9:43 pm Reply

    It’s hard to find knowledgeable people about this topic, but you sound like you know what
    you’re talking about! Thanks

  17. me before you reviews - May 5, 2016 at 7:47 pm Reply

    Everything is very open with a very clear explanation of the challenges.
    It was really informative. Your site is very useful.
    Thanks for sharing!

  18. asia global - May 15, 2016 at 11:32 pm Reply

    Your share about UI is very nice and that what I need to redesign again my web. Please give me your contact. Many thanks

  19. Brain - May 21, 2016 at 11:33 am Reply

    Quite fine post, I definitely love this site, keep on it.

  20. IveyQTrigg - June 19, 2016 at 4:53 am Reply

    This design is steller! You most definitely know how to keep a reader amused.
    Between your wit and your videos, I had been almost transferred to start my very
    own blog (well, almost…HaHa!) Great job. I actually loved everything you needed to say,
    and over that, how you presented it. Too cool!

Leave a Reply

Your email address will not be published.