Contrasting bad design with good design is very interesting, and designers can get important experience from them. This contrast highlights the pitfalls to be avoided in design, and enables us to understand how to transform design theories into real-life solutions.
Jared Spool, an American writer, researcher and usability expert, once said:
Good design is invisible when it works well. Only when it works badly will it be noticed.
So, by showing 5 obvious bad designs, it’s better to look back on how good design works and to extract some experience to create a good stealth experience for our users.
1. Information overload
Bad design: a parking sign in Losangeles
The parking sign in Losangeles (LA) can be regarded as a typical representative of information overload in the past ten years. They are difficult to understand because the traffic rules are very complicated, so they convey a lot of information in a small area.
How puzzling are these signs?
Generally speaking, they have typical styles since 2010:
Author / copyright owner: Jorge Gonzalez. Copyright Clause and license: CC BY-SA 2
From the history of LA stop sign, this style is quite simple. Imagine driving on this road at 9 a.m. on Tuesday morning. Can you stop here?
Such a simple question should cost a lot of cognitive resources to answer.
As designers, we often face design problems that need to convey a lot of information in a small area. LA’s parking sign may be one of the most extreme examples, but many times it will also face the same problem in mobile terminal application design.
Is there a general way to solve parking signs and similar design problems?
Good design: Nikki Sylianteng parking indicator design
Designing a sign that shows all information and easy to understand sounds an impossible task, but this is exactly what Brooklyn designer Nikki Sylianteng has done.
Author / copyright owner: Nikki Sylianteng. Copyright Clause and license: CC BY-SA 4
The design and experiment of Nikki are applied to the design of LA logo. One of the reasons why Nikki’s design is effective is because it is user centered: Nikki realizes that the driver really wants to know if they can stop here now.
Yes or no, this is what all drivers need, so the sign only needs to show this information.
In her design, she uses vision to convey information instead of words. The result is that the design is very intuitive — green representatives can park, and red represents not. At the same time, the color blindness problem is also considered in the design, so slash is used in the time domain that can not be stopped.
Now, when you see this sign, you know you can’t park at 9 on Tuesday morning, so you can understand this sign at a glance.
The best practice we have learned:
- Knowing what your users need, and then based on this design, can help reduce information load.
- There is a lot of information to convey to your users. Try to replace text with visual elements. Click on the links below to learn more about data visualization.
Two mysterious meat type navigation
Bad design: LazorOffice.com
According to the web page The Suck created by Vincent Flanders in 1998, mystical meat navigation (MMN) is used to refer to the design that requires users to click on links or to link the mouse over to the target.
The phrase “mysterious meat” originated from the meat provided by cafeteria in American public schools because it was too processed to distinguish it.
MMN is not good because it reduces the visibility of navigation elements. Because users have to guess the destination of navigation, or have to click operation, thus increasing the user’s cognitive load. At present, MMN can also be seen in the old webpage design, which has rarely been seen in modern webpage design.
Let’s take Lazor Office as an example – a website of a design company that provides prefabricated housing.
Author / copyright owner: Lazor Office company. Copyright Clause and license: reasonable use
On the front page of the official website of LazorOffice, there are such a group of MMN pictures, and as you can see, there is only a very small clue to the place where we are going to go. On the contrary, these 9 pictures are placed so that some users are confused rather than interact with each other.
At the bottom of their homepage, a group of picture thumbnails are placed quietly. Are they clickable?
Yes, they can click. If you move the mouse to these pictures, it will change the appearance of the pointer. But what happens when you click?
“Click after view” is not a good user experience solution. The change that this design will bring is that your users will abandon these navigation and get alternative solutions from your competitors.
Good design: course card for Interaction Design Foundation webpage
Fortunately, the MMN problem is easy to solve. The key is to realize that you must clearly link the links. Just increasing the pop-up hints of “view items” on mouse hover can enhance the usability of Lazor Office home page.
Author / copyright owner: Interaction Design Foundation. Copyright Clause and license: fair use
Our course cards clearly label the whereabouts of the link, the course cards on our Interaction Design Foundation, not only at the bottom of each card with the “view course” entrance to prompt action results, while the mouse hover on the card will also pop up the “enter the course” hint. Many websites follow the same rules, so you have to obey the maximization of the usability of your website.
The best practice we have learned:
Always mark the point of a clear link! You don’t like mystical meat. Similarly, your users do not like to click on unknown links.