In today’s lesson we’ll learn how the Science of Great UI can help us create better symbols.

Take a look at the sample symbols on the doors below:

9h-hollow-symbols

This picture is from a hotel located in a Tokyo airport. Symbols appear on the doors to the left and right of the hotel lobby, representing men and women.

What’s wrong with these two symbols?

Let’s take a closer look at the symbol on the left. It looks like this:

current-symbol

In the Science of Great UI course, we learn our minds can separate foreground from background through closure, or tracing around the shape. But because this shape is a thick outline, it has two perimeters our minds must trace to reach closure – the inside, and the outside:

 

insideclosure      outsideclosure

In these images, the length of the inside perimeter is 980 pixels and the length of the outside perimeter is 1298 pixels, for a total perimeter of 2,278 pixels. Whenever your use an outline for a symbol, you almost double the graphic complexity, which is likely to slightly increase cognitive load when this outlined symbol appears in the visual field.

So we can simplify this symbol, reducing its complexity by 1/2 (and shortening its parse time), by filling in the symbol. Here are the original and corrected symbols, side by side:

current-symbol              current-symbol-filled

 

That’s a step in the right direction. However, using the guidelines from the course we can go even further to improve these designs.

sgui-case-studies-thumbnail-ws

 

Speaking of which, if you purchase the Science of Great UI design course you’ll also get access to my Science of Great UI Case Studies e-book, which reveals two more common symbol design mistakes and how to fix them. This e-book also includes my complete fix to the symbols in this hotel lobby, showing how we can make our symbols even easier to read and faster to recognize.