Ten UI Lessons from the Real World

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

cow
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.

dentistaAnother 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

nohuntingLook 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

dieselIsn’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

scheduleThis 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.

golf

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.

conflicting

Lesson 6 – Hide unnecessary precision

precisionSometimes 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.

typos

Lesson 8 – Sentences with the right meaning

churchA 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

alignmentAlignment 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

creativityAt 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.

One thought on “Ten UI Lessons from the Real World

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s