Insights is a collection of resources created and curated by BinarySwan.


Insight 3 | May 07, 2018

Bad Design vs. Good Design: 5 Examples We can Learn From

by Adishri

Looking at examples of bad design alongside counter-examples of good design is not only fun but also draws important lessons for designers. They highlight pitfalls for designers to avoid and let us understand how to translate design theories into solutions that work in the real world. Jared Spool, the American writer, researcher and usability expert, once said: “Good design, when it’s done well, becomes invisible. It’s only when it’s done poorly that we notice it.” So, let’s look at five examples of obviously bad designs, shine the light on how good design makes it work, and distil some lessons so we can all create great and invisible experiences for our users.


1

Information overload

The Bad: Parking Signs in Los Angeles

Parking signs in Los Angeles (LA) have been the epitome of information overload for decades. They’ve always been notoriously hard to understand, because the traffic rules are complex, resulting in the need to convey a lot of information in a small area.

 

How confusing are these signs? Traditionally, very—look at this example from the 2010s:

 

As LA parking signs go, this example is already a pretty simple one.

 

Imagine you are a driver along this road on a Tuesday morning at 9 a.m. Can you park at this spot? What sounds like a simple question takes a lot of mental processing to answer.

 

As designers, we’re often faced with situations where we have to design for a lot of information to be displayed in a small space. The parking signs in LA might be an extreme case, but many times designing for mobile apps means facing the same problems. Is there a way out—for both the parking signs and designers in general?

 

The Good: Nikki Sylianteng’s Parking Sign

Designing a sign to display all the information, while being easy to understand, sounds like an impossible task. But that’s exactly what Brooklyn designer Nikki Sylianteng did.

 

Nikki’s proposed parking sign was eventually used in LA as part of a trial run.

 

Part of why Nikki’s design1 works well is that it is user-centred: Nikki realised drivers simply want to know whether they can park at a spot. Yes or no—that’s all drivers needed, and that’s all the parking sign shows.

 

Her design also made use of visuals, rather than text, to convey information. The result is incredibly intuitive: green for OK, red for No Parking. It’s even designed for the colour blind, with stripes for No Parking.

 

Now when you look at the sign, you’ll know that on Tuesday at 9 a.m., parking is not allowed. The bars show what’s what at a glance—simple.

 

Lessons Learnt: Best Practice

Understand what your users need, then design based on that. This helps reduce information overload.

Have lots of information to convey to your users? Try using visuals instead of text. Learn more about data visualisation here.

 


2

Mystery Meat Navigation

The Bad: LazorOffice.com

Coined in 1998 by Vincent Flanders of Web Pages That Suck2, the Mystery Meat Navigation (MMN) refers to cases where the destination of a link is not visible until the user clicks on it or points the cursor at it. The term “mystery meat” was a reference to meat served in American public school cafeterias that are so processed that their exact type is no longer discernible.

 

MMN is bad because it reduces the discoverability of navigation elements. This adds cognitive load to users, because they now have to guess how to navigate or what clicking something does.

 

While most MMN are found in older websites, they’re surprisingly prevalent in modern websites. Take Lazor Office, a design firm that creates pre-fabricated homes, for example.

 

LazorOffice.com has a grid of MMN images on its home page. As you can see, this tableau gives precious little indication as to where to go. Instead, nine images just sit, leaving some of us pondering an enigma rather than interacting with a page.

 

Below the fold of their home page, a grid of image thumbnails lie waiting. Are they clickable? Well, yes—if you move your mouse cursor over an image, it changes to a pointer. But what happens when you click on an image?

 

“Click to find out!” is never a good User Experience (UX) solution. Chances are, your users are going to abandon their navigation and find an alternative solution in a competitor’s site.

The Good: Course Cards on Interaction Design Foundation’s website

Thankfully, MMN problems are easy to solve. The key is to be aware that you must clearly label links. Simply adding “View project” that appears on mouse hover will improve the usability of Lazor Office’s page above.


Our course cards are as un-mysterious as links go.


For the Interaction Design Foundation’s course cards, we not only have “View Course” at the bottom of each card to indicate the action that will happen, but we also have a hover state with the text “Go to course”. Many websites follow a similar convention, and you should too, to maximise the usability of your website.




Lesson Learnt: Best Practice

Always label your links! You wouldn’t like to eat mystery meat—and similarly, your users wouldn’t like to click on mystery links.

Final Thoughts

isn’t it fun looking at examples of bad design? Thankfully, it’s educational as well. Here are the key lessons and best practices from the five examples of good and bad designs:

Understand what your users need, then deliver that information.

If you’ve got lots of information to convey, try using visuals instead of text.

Always label your links! Users don’t like mystery links.

Avoid adding any kind of friction to user actions, unless they’re meant to dissuade the action.

Test your clever designs and include them cautiously.

Animation is like cursing. If you overuse it, it loses all its impact.4

The next time you frown at an instance of bad design, stop to think: understand why the design failed, find examples of designs that did things right, and make a mental note of the lesson you’ve learnt. And then share the love: share your lesson with other designers in our discussions forum!

 

Adishri

Previous Insights

Insight 6 | September 15, 2018
Trendy Ways of Enhancing Website Homepages
by Adishri

Looking at examples of bad design alongside counter-examples of good design is not only fun but also draws important lessons for designers. They highlight pitfalls for designers to avoid and let us understand how to translate design theories into solutions that work in the real world. Jared Spool, the American writer, researcher and usability expert, once said: “Good design, when it’s done well, becomes invisible. It’s only when it’s done poorly that we notice it.” So, let’s look ...

Read Now
Insight 4 | June 30, 2018
20 Things Your Website Should Do and 5 Things It Shouldn’t
by Adishri

Looking at examples of bad design alongside counter-examples of good design is not only fun but also draws important lessons for designers. They highlight pitfalls for designers to avoid and let us understand how to translate design theories into solutions that work in the real world. Jared Spool, the American writer, researcher and usability expert, once said: “Good design, when it’s done well, becomes invisible. It’s only when it’s done poorly that we notice it.” So, let’s look ...

Read Now
Insight 5 | June 19, 2018
12 Common Reasons Why You're Not Attracting Customers to Your Website
by Adishri

Looking at examples of bad design alongside counter-examples of good design is not only fun but also draws important lessons for designers. They highlight pitfalls for designers to avoid and let us understand how to translate design theories into solutions that work in the real world. Jared Spool, the American writer, researcher and usability expert, once said: “Good design, when it’s done well, becomes invisible. It’s only when it’s done poorly that we notice it.” So, let’s look ...

Read Now
Insight 2 | May 12, 2018
The 10 Most Common Mobile App Development Questions Answered
by Adishri

Looking at examples of bad design alongside counter-examples of good design is not only fun but also draws important lessons for designers. They highlight pitfalls for designers to avoid and let us understand how to translate design theories into solutions that work in the real world. Jared Spool, the American writer, researcher and usability expert, once said: “Good design, when it’s done well, becomes invisible. It’s only when it’s done poorly that we notice it.” So, let’s look ...

Read Now
Work with Us