The Beginners Guide to Bad UI Design_870x220

A short look at several key things to avoid in order to create an effective user interface.

Creating an effective user interface is not really all that hard. Delivering a good user experience is not “rocket science.” And yet... time and time again we run into examples in the wild of bad UI. Really bad. Horrible, in fact. Here is a list of just a few examples that I have actually run into on real web sites. Avoiding these common mistakes might not make your UI fabulous, but it will certainly be a step in the right direction. More importantly, it will make me happy.

These are all things I have seen recently. I won’t call out the actual websites, but you know who you are!

Number 1: Be Consistent

I realize that large sites are developed by different teams over different time periods, but really that’s not my problem. It is annoying to use one type of component on one screen and then a different one on another. For example, if I select a date using one date picker to schedule a payment, it’s annoying to then use a different date picker later to pick a range to show transactions. Yes, I know, it’s a small thing but it’s irritating and there is no reason for it.

Please – wherever you get your components please maintain a site-wide library and stick with it. Of course, if you use a library like Kendo UI across your apps then you won’t have to worry about it. Standardization comes for along with the package. Kendo UI comes with all the components you need for any UI, and you can apply standard or custom themes to all of your components at once. Take a look at the list of components Kendo UI includes.

Number 2: Update Your Code, or Let Someone Else Do It!

The world changes. Your UI needs to change with it. Especially when you cleverly added all that checking to your UI in the first place.

Here’s a good example. My personal email is john@savix.net. Savix.net is my own domain. I’ve used it for a while and came up with it after I was too slow and missed out on Willoughby.com and johnwilloughby.com. The later is actually available right now but for a price higher than I want to pay. Imagine my delight when they opened up all those new TLDs and I was able to grab Willoughby.email. Yeah! Now I’m moving my email to john@willoughby.email.

Well, in some places at least. Because in a bunch of places when I try to enter that email address I’m told that it isn’t a valid email address because no domain is of the form xxx@yyy.email and I can’t use that. Which means that the code is pretty old and was written before they opened up all those new TLDs that are no longer just two or three characters. Having finally managed to get a domain with my actual name in it I’m more than a little miffed when I run into this. And I’ve run into this more than once. It has been several years now since the new TLDs were released, and they were in planning longer. Wake up people!

Want to find out how to do easy validation? Take a look at this example of the Kendo UI Validator.

Number 3: Don’t Present Bad Options

Here’s one that really annoyed me. Whoever did this reservation system just used two pull-downs with numbers. Pick a number between 1 and 31 for the day, 1 and 12 for the month. Oh my, where to even begin? For starters, would it really have been so hard to use names for the months instead of numbers? Second, you could pick a date that doesn’t exist like February 31. Finally, picking two numbers instead of picking from a calendar is just awkward. Just don’t.

Want to find out more about using datepickers? Check out this blog on “How to Use a jQuery DatePicker UI Component in Your Web App.”

Number 4: Don’t Be Lazy

This is a round-up of some other things that drive me crazy and most fall under the heading of not making the user do things you can do instead.

If you are going to give me a long list of choices – like my country – and 90% of people use one or two selections, then bring those up to the top of the list. If most of your customers are in the USA, don’t make me scroll down through 50 countries to find it. If it’s not one country but 3 or 4 then fine, bring those up to the top of the list. For extra credit, find out where I am logged in from and pre-select that country.

You can find out more about effectively using dropdown lists in the blog “How to Use a jQuery DropDownList UI Component in Your Web App.”

Date formats – if it’s really too much for you to use an actual date picker that lets me select from a calendar, then at least go to some effort to let me enter the date anyway I want. Nothing makes me crazier than when a computer makes me enter leading zeroes. Be flexible, do the work for me. And beyond leading zeroes, if Google can figure out that “Aug” means “August” so can you.

Want to know more about how to add autocomplete features to your forms? Check out this blog on “How to Use a jQuery Autocomplete UI Component in Your Web App”.

Lastly, don’t make me enter redundant information. I hear angels singing every time some site has me enter my zip code and the populates the city and state for me. Sure, let me change it if I want – and let me see the city and state in case I made a typo on the zip, but don’t ask me to enter city, state and zip. That’s just mean.

All Better Now?

There you have my top four pet peeves of bad user interface design, along with links to components that can help you avoid these mistakes. Remember: the app is supposed to work to make life easier for the user, not the other way around. I’ve given links to jQuery examples but remember that Kendo UI also comes in Angular, React, and Vue versions too, so you can take advantage of it in the framework of your choice.

What are your biggest UI pet peeves, or alternatively, your favorite examples of when UI was implemented the right way? Feel free to share your own thoughts in the comments.


John Willoughby
About the Author

John Willoughby

John Willoughby is a product marketing manager and a software developer based in the Boston area. He is passionate about helping to give other developers better tools which is why he loves working with Kendo UI.

Related Posts

Comments

Comments are disabled in preview mode.