This is the second part of my UI lessons from the real world article. It has more funny examples of what (not) to do with your UIs.

You guessed it, folks. After the huge success of my first article Ten UI Lessons from the Real World, I decided to write the second part with more examples. Again, the idea is to teach UI lessons based on real world images that are funny and interesting for this type of discussion.

Lesson 11 – Don’t redefine concepts

Please look at the image on the left. Why on earth would someone call a banana a “curved yellow fruit”?! OK, it is curved, it is yellow and it is a fruit, but WTF?

If you don’t know how to call a certain thing, please ask the business analyst. Don’t try to create a name that is meaningful to you but meaningless to the user. Applications should have standardized concepts and the whole team should understand them. FYI: this field of research is called ontology and it is a great domain analysis tool.

Lesson 12 – UIs should never surprise the user

The UI should never surprise the user. If it does, then the designer has failed to do a good job. One example of this problem is a link that doesn’t look clickable. This is actually conflicting with the idea that UIs should be clear and intuitive. How can something be surprising and intuitive at the same time?

Joel Spolsky has explained this lesson on his bookUser Interface Design for Programmers. Refer to the book if you want to see more examples on this problem.

Lesson 13 – UIs should never scare the user

Users shouldn’t be scared by the UI. If they are, they won’t use the system correctly and you will fail as a software engineer. If something can go wrong, it is your responsibility to create restrictions that will prevent wrong actions (unless the business itself is risky – e.g., trade market).

Lesson 14 – Don’t ask users to do stupid things

The UI should never indirectly imply that something stupid can be done. You somehow tease the imagination of those people that have low IQ scores and have nothing else to do in life:

Lesson 15 – UIs should be easy to read

One of the ideas behind simplicity is that UIs should be understandable and easy to read. The clock on the left is an example of how things can get critical if you must read it immediately. Of course you know the position of the numbers, but imagine different situations where you must read them (e.g., the clock is rotated 90 degrees). Since you need some seconds to calculate the numbers, this will distract (and even disturb) you more than needed. By the way, what time does the clock show right now?

Lesson 16 – Users should never ask “What is this?”

Which animal is this? Is this a cat? A bunny? Some people say it is a small camel! Use your imagination 😛

Users should never ask questions like “What is this?” when it comes to your UI. If they do, the designer has failed to create a good intuitive interface. UAT (User Acceptance Tests) is a great tool to find problems in this sense and you should talk to your team about this. Watch how your friends use the software application and ask them to do certain tasks (e.g., open a new document; create a new invoice, etc). You should also talk to the support team and see what people have been complaining about. You will learn a lot from that, trust me.

Lesson 17 – Don’t distract users with obvious messages

Please look at the next two signs and think. Are they useful in your opinion? What is the chance that you won’t see the stairs, but will see the sign? Or what is the real value of the second sign and its warning?

Please don’t add obvious messages to your UIs because they will distract (and probably disturb) your users. UIs should guide the user, not force them to look at every detail on the screen. Their eyes should do this job seamlessly.

Lesson 18 – Accessibility should work in practice

We all know that accessibility features (in general) are used by just a small group of users. But if you decide to implement them, please make sure they are really useful in practice. If you don’t know what I mean, please look at the image on the left.

Look, there are nice toilets on the second floor! Yes, but you need a crane if you are on a wheelchair.

 

Lesson 19 – Know your users

You can’t create good interfaces if you don’t know your users. Things can get more difficult if they are aliens, but it is always possible to figure out what they really want. Talk to your users (maybe using a translator helmet) and try to understand how the see the world (not only our world, but also their world).

 

Lesson 20 – Creativity Again

The last lesson of my previous article was about creativity and its powerful effects on our brains. I will keep creativity again as the last lesson of this second part because it is really worth doing so. Please look at the AXE marketing signs displayed at shopping centers and malls… they are simple, easy to understand and – most important – have a real marketing message.

Conclusion

This was the second part of my article about user interfaces and their lessons from the real world. What is most fascinating is the fact that we can take lessons from almost anything visual. All we need is to think about our problems and create a bridge to real world signs and objects. Stay tuned for the next articles.

Learn UI concepts from real world pictures. Signs can teach valuable lessons in this regard and you should pay attention to them.

User interface isn’t a subject specific to computers. Every object in the real world has an interface and understanding it is crucial for a correct usage. Some objects are well designed and can offer different types of good reactions when we interact with them. Others aren’t that good and the designer might have missed the point.

Today I am going to teach some UI lessons based on signs and pictures of the real world. If you pay careful attention, you can realize that they do have lessons to be learned and you can use that knowledge to improve your UIs. This is a valid approach because we – as humans – have a common way of looking at things, be it a system UI, a coffee machine, a vacuum cleaner or signs on the roads. Signs on a road are my favorites because they guide the driver pretty much like icons guide users on a system interface. Let’s start our lessons.

Lesson 1 – Review your Icons

Please look carefully at the sign on the left. What is the meaning of that sign? Are there cows that bite and eat cars?!?

Actually, if you add an icon to your application, make sure it is understandable. Don’t try to create your own if you are not prepared for this task. UI designers should handle that. The biggest issue behind this problem is the fact that users have fear of clicking on things they don’t understand. This can get even worse if their money is involved in the action.

Another problem related to icons is best explained when we look at the image on the right. At first glance, you might see a dentist with a patient. But if you look closer, you might note a dirty second meaning. Would you let your wife go to that dentist? I don’t think so…

 

Lesson 2 – Unrelated information shouldn’t be displayed together

Look at this second example. By placing both signs together, it is inevitable to imagine people hunting children. When the worker placed the second sign, he probably saw the problem, but he didn’t care. He might have thought that the problem was with him, not with other people.

Trust me, this also happens on your UI. Please keep unrelated information clearly separated from other types of information.

 

Lesson 3 – Use the right punctuation or appropriate separators

Isn’t that yummy? This might be good for your cholesterol levels.

Note that a missing separator clearly creates a misleading scenario that can ruin your business. Your interface can also suffer from that if you don’t pay careful attention. If you are not fully convinced, remember that when you read the same sentence several times, your brain starts to ignore or misinterpret it.

Lesson 4 – Redundancy increases complexity

This sign is in Portuguese, but I don’t think we need a translation here. The problem is right ahead and it is difficult to understand why people keep repeating the same information again and again. What worries me is the fact that they do that too often.

Redundancy might be important in some cases (especially when it comes to security), but it can be avoided in most situations. Note that when we remove redundancy we improve simplicity.

Another type of redundancy is in the meaning of words. The next sign provides a good example of how bad this can be. Maybe they are really telling the whole truth…

 

 

Lesson 5 – Identify and remove conflicting ideas

Conflicting ideas can be deadly critical. Look at the three pictures below and think about their explanations: an ant that goes to the opposite direction of the sign, police that can’t turn right while normal people can do so, or a land full of poison just to protect living animals. What could be stranger than that?

The same concepts apply to user interfaces. It is very easy to think that you wouldn’t do such mistakes, but people do that and we have to admit. So look carefully at your UIs and search for conflicting ideas.

Lesson 6 – Hide unnecessary precision

Sometimes too much precision can be useless. Take a closer look at the next sign and let me know if that extra half mile is important to you. Information like that is inappropriate for the situation and only adds noise and clutter. Drivers usually have just a few seconds to read a sign and the more information you add, the worse it will be. The same applies to software UI.

Lesson 7 – Fix typos

Typos happen in every corner of the world (see pictures below) and it is your responsibility to fix them. It is quite common nowadays to have non-native speakers in the development team. So, besides typos, people can simply write wrong words because they don’t master the UI language.

Lesson 8 – Sentences with the right meaning

A sentence with a wrong meaning is worse than a typo. That’s the case of our next sign: If your worries aren’t strong enough to kill you, the church can give *them* a hand.

Sentences in the UI can also be misleading, mainly when the system tries to explain more than needed. Your UI – and its sentences – should be simple, small and clear enough to guide the users.

Lesson 9 – Alignment

Alignment is important because users don’t read text on the UI. They scan it. So, well aligned text and controls can help dividing the screen into digestible pieces of information. Unfortunately this isn’t the case of our next picture. After reading the first sign, I wonder if people hire cats to make burgers with their flesh.

Lesson 10 – Creativity saves the day

At last, remember that your creativity can connect the user with a whole new experience. Let your imagination fly when you build user interfaces, as it happens with the guys from the last picture. Good interfaces make users forget their computers pretty much like readers forget their books when they read good stories.

 

Conclusion

This article was an attempt to show my different point of view on user interfaces. The idea of showing real signs is just a funny way to teach concepts that can make applications more usable. Remember that everything around us can teach lessons, but only those that really pay attention can take advantage of that. This is a daily exercise that you should execute when you drive or walk on the streets. It is worth trying, trust me.

Learn the screen scratch technique to easily identify visual clutter and noise in user interfaces.

There is an easy technique to identify visual clutter in GUIs that I would like to share with you. It is so simple that everybody can apply it quickly and everywhere. The technique is called Screen Scratch.

As you might have noticed, UI toolkits like Swing, AWT and SWT (among others) paint their components using colors that emulate a pseudo-3D image and produces a depth impression on the screen. This is exactly what we explore with this technique.

Imagine that your fingers could feel these 3D levels while you move them along the screen: how deep would your fingers vibrate? If you could “feel” a high degree of vibration, chances are that the screen is cluttered and needs to be revised. On the other hand, if you could notice just a few levels of depth, the screen is probably well designed and there is no visual noise.

It is important to remember that the goal of this technique is to identify components, borders and lines that should not stay together and were added by some developer without UI design skills. As a first example, take a look at a software tool called wGetGUI. Its screen is so cluttered that we would feel it as a piece of sandpaper.

Figure 1: Two possible arrangements of the same panel

With this technique we can easily spot the clutter on the UI due to the excessive number of borders and nested panels.

In general, the only borders that should be left on the GUI are component borders, since they bring important information to the users. Therefore, don’t try to change or remove them unless you know what you are doing.

Another point to which we have to pay attention is the emerging GUI styles available everywhere. Have you ever seen those beautiful shiny and glossy components that bring a soft and elegant UI to almost any software?

Figure 2: Elegant Look-and-Feel with glossy components.

Components like the ones above would make our nails slide smoothly on the screen and this could be a problem to this technique. In this case, pay special attention to borders and other lines that are too close to each other. In fact, this is something that cannot be easily disguised even when the appearance of the components are well designed. Take a look at the nested borders of the JTabbedPane components above. Okay, this is just a demo app, but it should be clear to everyone that it contains lots of clutter.