Common UI Design Mistakes and How to Avoid Them

User interfaces (UIs) are all about usability. Designing a beautiful UI is great, but all that effort will go to waste if users get frustrated while using it. When outsourcing web design to our own clients, we make sure to avoid the following mistakes and produce visually pleasing and highly functional UIs.

Problematic Copy

Bad copy can ruin even the best designs. We work closely with our writers to make sure they come up with clear, contextual copy for our user interfaces. In a previous blog post, we provided some important tips on creating great microcopy for UIs and calls-to-action:

  • Think like your users – What may sound simple to you might be complicated to your users. Getting to know your users better through usability testing allows you to see if your UI’s microcopy is helpful or not.

  • Context is important – Considering your users’ state of mind and what action they want to take is crucial in creating effective microcopy. Gmail’s login error messages are a good example of contextual microcopy, as the message depending on the mistake the user made (e.g. blank email or password field, incorrect password or username).

Gmail’s different login error messages

  • Don’t depend on wordcount – Keeping UI copy short is ideal, but making sure it’s clear is more important. You may need slightly longer copy to guide users through a process or provide clearer instructions, so don’t let wordcount get in your way.

  • Don’t get too creative – Using creative copy can be a good way to personalize the user experience, but don’t overdo it. When it comes to UI copy, “clear” is always better than “clever”.

Overlooking Blank Slates

When a UI has no data or information to display, it displays a “blank slate”. It’s very easy to forget about the blank state stage, especially when you start previewing and testing your UI with dummy data in place. Displaying a completely empty blank slate might confuse uses. A simple solution would be to include these three important elements in the blank slate:

Wufoo’s blank slate Form Manager

1. Screen or Page Description – Describes what the page or screen is supposed to display

2. Blank Slate Indicator – Tells your users that there is no data to display

3. Actionable Elements – Tells users what to do next or how add data to the blank slate

Not Telling Users They Need to Wait

Don’t forget to add descriptive text and a progress indicator like a bar or spinning animation to indicate that your website is performing an action that requires users to wait. To quote Nathan Barry, the author of “Designing Web Applications”: “Making users wait is sometimes unavoidable. But making users wait – without telling them why – is never unavoidable.”  Not telling users that they need to wait while your website loads data, uploads content, or performs any other action might make them think something went wrong.

Loading progress bar GIF by Dan Monaghan

Progress bar GIF by Dan Monaghan

The web design outsource company you choose to work with should know that UI creation requires much more than just great visuals – you need to plan everything carefully based on your website’s or app’s functions, as well as user behavior and preferences.

Start working with us to see how we develop beautiful and fully-functional websites.

The following two tabs change content below.
Gaia Lising

Gaia Lising

Gaia Lising started her career as a designer for an advertising agency, but has always been fascinated about the web. She delved into web development six years ago, and has not looked back since. She now works as one of TrueLogic’s Project Managers and manages a talented group of developers, designers, and webmasters who share the same passion. She enjoys spending her spare time baking and taking interesting everyday life photos.