Good Design vs Bad Design – 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:

Author/Copyright holder: Jorge Gonzalez. Copyright terms and licence: CC BY-SA 2.0

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.

Author/Copyright holder: Nikki Sylianteng. Copyright terms and licence: CC BY-NC-SA 4.0

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

The Progressive Reveal

I like to provide learners with progressive revelations. This instructional strategy involves slowly revealing information, especially visual information.

I like to start with one part of a visual concept and then build on it. I show one part of a diagram and then slowly complete it. For example, picture a simple hierarchical diagram where only the box at the top is visible. Then as you discuss, you show the next row of boxes, discuss some more and show the next and so on. This can work well interactively too, where the learner reveals the diagram through certain actions.

progressive-reveal

 

It’s Good for Working Memory

Why is this a good way to present information? Because working memory, the online portion of our brain, is limited in capacity. Most people just can’t hold too much more than around four bits of information in working memory at one time. I know they used to say it was seven bits of information, plus or minus two. But the number seems to be shrinking.

By progressively building on a previous concept or rule or principle, we give learners time to retrieve information from long-term storage, so they can comprehend the initial information. Once the initial information is firmly understood, there’s a much better chance they will comprehend the next bit of information than if we sped ahead from the start.

It’s Good for Encoding Information

A progressive build is also a good way to help learners encode information into long-term memory. When a learner holds information associated with the instruction in working memory, it helps the instruction make sense and gives it meaning. When information is meaningful, it’s connected to one’s personal network of knowledge. Well-connected information is more likely to get encoded “deeply” into long-term memory.

A Simple Approach

Sometimes I’ll use the most basic approach to create a progressive revelation, without even creating a Flash animation. Using one of the PowerPoint based authoring tools, I just place a rectangle over a portion of the graphic that I want to progressively reveal. The rectangle is the same color as the background. Over time or over several screens, whichever works best for the learning situation, I’ll slowly move the rectangle away so that it progressively reveals the visual beneath. What could be easier? I don’t want everyone to know how easy it is to do this, so I’m just telling you.