How to Fix Common UI Mistakes With a Few Lines of Code

“The devil is in the details,” people tend to say. When it comes to designing a product, it is often very true. The more attention you’ll pay to all the little things, the more pleasing your product will be.
Here’s a list of common UI mistakes that can be easily fixed with 3 lines of CSS or JavaScript code.

Be smart when truncating long content

Any software using dynamic content must be prepared that the content does not fit into its containers.

Tip #1: Truncating long text

Too often automatic algorithms used for truncating words work like this:

if (myText.length > 140) {
    myText = myText.substring(0, 140) + "..."
}

Essentially, it does its job. If there’s not enough room for the content, it displays as much of it as it can.

But think about that. If your container fits only 140 characters, you truncate all words longer than 140 chars and add an ellipsis (”…”) to indicate it has been truncated. So, if your text is 142 characters long, you’ll end up truncating it to… 143 characters.

Who’s making this mistake? Almost everyone. See how the original title of this post was truncated by Wordpress:

Common UI Mistakes There’s no need to truncate these few letters here.

Here’s how you should do this:

if (myText.length > **145**) {
    myText = myText.substring(0, 140) + "..."
}

We simply changed the limit of 140 characters to 145. Now the words are truncated only if we really can’t display content that long.

Tip #2: Truncating long lists

Our product, LiveChat, displays agents filter in its Reports section. Many customers have lots of agents, so we truncate the list and display only 15 of them. If you want to see more, you need to click the “show X more…” link.

We show this link only if there are more than 3 agents above the limit. If we need to display 16 or 17 agents, it will take the same amount of space as the “show 1 more…” link.

Common UI Mistakes Don’t truncate the list if the “show 1 more…” link takes the same space as the hidden item.

Make it easier for the users

Always minimise the amount of work your users need to perform to accomplish a given task. Make the computers serve the people, not the other way around.

Tip #3: Provide users with information that’s helpful in a given context

LiveChat offers a security feature that allows you to enter the IP addresses located in your office. It prevents agents from signing into their accounts from outside the office. In most cases, you’d want to append your current IP address to the list. This is why we give you an easy way to do that.

Common UI Mistakes Help your users with most common actions.

Tip #4: Make all user’s interactions deadly simple

Customers using our ticketing system can send internal comments to their colleagues.

Originally, when a user clicked the “internal comment” icon by mistake and wanted to quickly switch back to the previous screen, clicking a mouse button for the second time didn’t work. It worked like that because the “close” link had smaller dimensions than the previous icon and the user had to move the pointer by a few pixels to perform the task.

Common UI Mistakes Clicking the link requires you to move the mouse pointer by a few pixels.

I stumbled upon this case myself and quickly fixed the problem by enlarging the “close” link clickable area.

Choose simplicity over consistency

Some UI components are designed to help you with repetitive tasks. However, implementing them can lead to a cluttered interface. Just remember to use them wisely.

Tip #5: Display UI components only when necessary

It seems natural to display an “Enable all” component when there’s more than one available checkbox in a form. However, is that natural for the end-user to see this component when there are just two of them?

Let’s take a quick look at the Postmark application:

Choosing simplicity over consistency in UI Are “Enable all” and “Disable all” options necessary to deal with just 2 checkboxes?

When I saw this screen for the first time, I had a feeling that I can do something more than just select the checkboxes. Sure, I understood it right away, but my initial confusion could be easily prevented.

Choosing simplicity over consistency in UI Removing useless components makes the interface easier to use.

I’d suggest displaying the “Enable all” and “Disable all” components when there are more than 3 checkboxes. Otherwise, it causes confusion instead of helping the user.

Final notes

From a developer’s perspective, it’s easy to take a commonly used pattern, implement it and move forward. However, some use-cases can be easily overlooked.

Presented examples are just the tip of the iceberg. Always try to consider what your end-users are planning to do on a given page. Strive to make their lives easier.