App Designs You Should Avoid Like the Plague

Postado em - Última vez Modificado em

Design and usability is one of the most important aspects of any kind of software. Regardless of what a program does – it doesn't matter if it's badly designed, unintuitive, and hard to use. From the beginning of software development, even in the terminal era, people still added some nice eye candy to their software, like some ASCII art:

ascii bear

As the IT Industry and the Internet gained so much traction over the past decade, and now that it's being used by over three billion Internet users, the importance of User eXperience (UX) has become very important.

There is a golden rule in software development – NEVER LET SOFTWARE ENGINEERS DESIGN THE USER INTERFACE. The aim of this article is to present some instances where software developers have been allowed to design the user interface of an application, and the common guidelines that they forgot to follow.

Unintuitive Usage

UX experts say that software is considered well-designed if the users don’t have to read a 200-page document in order to use it. While designing intuitive user interfaces seems easy, it's one of the most challenging tasks for UX people. Here are some examples of unintuitive software design.

Mac OS X Rename Feature

Mac OS X is a great operating system; everybody knows that. It's based on Unix and is more stable than Windows (or at least that was the situation in the days of Windows Vista), but it still has its share of unintuitive features. For example, pressing the Enter key in Finder will try to rename the file instead of opening it with the default application:

If you take a look at any other OS—whether BSD, Unix, Windows, or Linux—pressing the enter key on the keyboard when a file is selected will launch the default app assigned to that file.

Overuse of Icons

In the screenshot below you can see that we have the M icon on every tab. Besides the overindulgent use of icons, there's also the question of having so many tabs for functions that should have been grouped into logical categories. Less tabs would make a user more comfortable using it. 

Choose the Right Wording

In some cases, the same functionality has multiple names on the UI (see image below). This, again, is very unintuitive since the users would expect all these functions to do the same thing. For instance, what would be the difference between Search, Find and Lookup?

Meaningful Error Messages

Once in a while, users run into software errors. Sometimes the error was caused because it lost Internet connection, or it ran out of storage space, or some Web API was not online and data could not be saved remotely. From the UX point of view, the error messages should be detailed but in a way that does not confuse the user. Below you can see some “very meaningful” and well-thought-out error messages:

The error message on Windows Phone installation on Lumia 920:

Things start to get interesting when you read the error messages. They say that we should insert our installation disc and we should restart our computer – the question is where to insert the installation disc on a smartphone?

Another example would be from AVG, where something apparently went wrong. It seems the user in this case was lost while time-traveling, because he wanted to execute a test that "already does not exist."

There was a bug in Windows 2000 that generated this error message when the user wanted to change the password on the machine. This again is a great example of an unintuitive error message.

The last interesting error message comes from a product called Microsoft Money. This error message was generated because of some bugs in the software:

Less is More

Intimidating the User

I am sure you all heard the saying "sometimes less is more", and this is especially true when it comes to software user interface development. If we take a look at the screenshot below, you'll see how confusing this window can get. The window shows predefined values selected, so it's not clear why the other options are still visible. If there are preselected values, like Reject gif and exe files, then we could have a button saying Configure Accept Reject and pressing that would open up a smaller window with all the options from the Accept/Reject groupbox.

Another important thing is the number of buttons. In this frame we can see only 8 buttons at the bottom, but there are 13 in total. This only confuses the user and could be the cause of other errors, since users might click around even if they don't know what the actual button does.

Another example of confusing UX can be seen in the next screenshot. I had to stare at the window a couple of minutes just to figure out what the application does. Luckily, the header shows the name of the software, which was a good choice. That might be the most intuitive UX component of this particular screen. 

Mega Forms

There are some use cases where the user has to specify a lot of data. Buying an airplane ticket or signing up for an e-commerce website usually involves specifying a lot of information, and that's considered normal. There are good and bad ways to ask for necessary user information. One of the best ways to do it is to avoid asking for all the necessary data at once. For example, when users create an account on an online store, it doesn't mean they want to make a purchase right now. The request for shipping details can be postponed for when the users confirm their first order.

Another good way to request information involves the use of workflows or registration steps. For instance, the registration process for an online store can be presented in 3 steps: choosing the email address and password, then adding the shipping details—which is optional at this point. Any options for extra services, such as a sign-up fields for newsletters and notifications can be set on the last part, and is optional as well.

Below you can see some Web and desktop application forms that are overblown and would make the user want to avoid the software.

This form could have been at least grouped into 3 sections; one related to personal information, the next related to billing information, and last one for entering payment information. Notice that the fields are marked as optional and required using a string at the end of each line. A better alternative is to define the minimum set of required information and mark only those fields somehow (usually this is done with an asterisk, or highlighted with bold or colored fonts).


Keyboard-friendly Apps

Since we are using mouse or touchpad on our machines, developers sometimes tend to forget that some users prefer to use only the keyboard to navigate faster. So in the case of forms, it would be more convenient if pressing TAB jumps to the next field, while Shit+TAB jumps back to the previously completed form element.

In the same light, when users are on the login page of a website, they complete the username and password fields and they press the Enter button by instinct to log in, simply because that is closer and faster than taking the mouse, navigating to the Login button and clicking it. However, many websites don’t do anything.

Colors and Fonts

Colors are very important in any software design. If you were asked what you thought of the website seen on the following image, what would you say?

First of all, the selected colors make it difficult to read the menu. The variety of colors used also make it frustrating and annoying for some people. The background chosen also makes it too busy and confusing, and definitely not a pleasant sight.

The font selected for the menu is not ideal, because the characters are too close together, making it harder to read. There are some golden rules for choosing the font for your website. Try to avoid handwritten fonts and only use those if the theme of your website needs it—like for an online journal—but otherwise please avoid it.

Fonts like Arial and Courier New, which are really old and are used in old (programming and mathematical) books, are not a good choice either. Before choosing fonts, always keep in mind that those have to be easily readable on all platforms (mobile and desktop).

In this article I presented a lot of UI designs and prectices which should be avoided, sadly we have a lof of software applications which have aweful UX so we have bad examples to learn from. When you are designing your website's or your mobile application's user interface please try to be a UX engineer too, not only a software engineer :) 

Inscreva-se Agora para Atualizações Semanais

Mantenha-se atualizado com os melhores artigos na Comunidade do Freelancer. Subscreva agora para o melhor Design, Desenvolvimento, e conteúdo Freelance a cada semana.

Postado 17 fevereiro, 2016

Greg Bogdan

Software Engineer, Blogger, Tech Enthusiast

I am a Software Engineer with over 7 years of experience in different domains(ERP, Financial Products and Alerting Systems). My main expertise is .NET, Java, Python and JavaScript. I like technical writing and have good experience in creating tutorials and how to technical articles. I am passionate about technology and I love what I do and I always intend to 100% fulfill the project which I am ...

Próximo Artigo

9 Mobile Apps to Help You Work With Freelancers