Concept clarity

In the physical world, it's easy to tell different things apart. You instinctively know the difference between...a fork and a mug. This is because the two objects are so clearly different. Their attributes — weight, shape, color, texture, temperature, placement — sets them apart.

A close up of a fork and a photo of a mug

The mug and the fork have "concept clarity". To you, the user, they are two very distinct things. Easy to identify, hard to confuse.

Clear concepts are easy on the brain. That's why they make great tools. If you're busy cooking and doing 100 things at the same time, you can reach for a fork and instantly know it's a fork without even looking or thinking.

The concept clarity of the fork makes it easy to find

This is because every single time you've encountered a fork in your life, it has had the same properties. It's tall. It's pointy. It lives near food. These properties are repeated over and over, every day, and voila — now your brain can tell a fork apart without even looking at it. That's concept clarity.

This clarity allows your brain to run on autopilot. You don't have to think when you use these objects. When a mug has behaved like a mug the last 10 000 times you used it, your brain can skip the mug analysis and focus on more important problems.

You're out of coffee.

UIs often lack concept clarity.

In the name of "clean design", we often end up representing unique things in very similar ways.

When different things look the same, the brain must work much harder. We squint to read text. We double and triple check everything. We dread pressing submit.

As UI designers, we can fix the situation by bringing back some of the concept clarity that we saw in the physical world.

In good UIs, concepts are equally clear and distinct.

Use different shapes to represent different objects. You instantly give the brain something to enjoy.

Track

Album

Playlist

Use color to separate concepts. Even more interesting stuff for your brain to chew on. Nom nom.

Crashed

Busy

Online

Offline

Give the concept consistent properties. You decide what these are for your app. Come up with anything, but be consistent.

Little Italian Diner
Star icon
Star icon
Star icon
Star icon
Star icon

"A business always has a rating"

Main

Building

"A build always has a status"

Mohammed

🌴 On vacation

"A user always has a status"

Use consistent words for the concept. Don't use different words to refer to the same concept.

Ride

  • Car
  • Taxi
  • Vehicle
A person steps into a taxi on a busy street

Driver

  • Chauffeur
  • Owner
  • Service provider
A person steps into a taxi on a busy street

Pick-up spot

  • Starting point
  • Origin
  • From
A person steps into a taxi on a busy street

Represent your concepts consistently in any size. You don't want designers and developers yoloing this.

Properties

  • Icon
  • Name
  • Open right now
  • Distance
  • Rating
  • Map
  • Photos
  • Reviews
Little Italian Diner
Star icon
Star icon
Star icon
Star icon
Star icon
850 meters awayOpen until 22.00
Close up of patsa on a plate
Close up of patsa on a plate
Close up of patsa on a plate
Star icon
Star icon
Star icon
Star icon
Star icon

Great food, friendly staff. I love this place with my whole heart. Warmly recommended!

Star icon
Star icon
Star icon
Star icon

One of my favorite spots in the city.

Star icon
Star icon
Star icon
Star icon

Food is amazing. I always order the pasta bolognese with extra parmegianno on the side. It's pretty hard to get a table, so make sure you book well in advance.

Little Italian Diner
Star icon
Star icon
Star icon
Star icon
Star icon
850 meters awayOpen until 22.00
Close up of patsa on a plate
Close up of patsa on a plate
Close up of patsa on a plate
Star icon
Star icon
Star icon
Star icon
Star icon

Great food, friendly staff. I love this place with my whole heart. Warmly recommended!

Star icon
Star icon
Star icon
Star icon

One of my favorite spots in the city.

Star icon
Star icon
Star icon
Star icon

Food is amazing. I always order the pasta bolognese with extra parmegianno on the side. It's pretty hard to get a table, so make sure you book well in advance.

Little Italian Diner
Star icon
Star icon
Star icon
Star icon
Star icon
850 meters awayOpen until 22.00
Close up of patsa on a plate
Close up of patsa on a plate
Close up of patsa on a plate
Star icon
Star icon
Star icon
Star icon
Star icon

Great food, friendly staff. I love this place with my whole heart. Warmly recommended!

Star icon
Star icon
Star icon
Star icon

One of my favorite spots in the city.

Star icon
Star icon
Star icon
Star icon

Food is amazing. I always order the pasta bolognese with extra parmegianno on the side. It's pretty hard to get a table, so make sure you book well in advance.

Little Italian Diner
Star icon
Star icon
Star icon
Star icon
Star icon
850 meters awayOpen until 22.00
Close up of patsa on a plate
Close up of patsa on a plate
Close up of patsa on a plate
Star icon
Star icon
Star icon
Star icon
Star icon

Great food, friendly staff. I love this place with my whole heart. Warmly recommended!

Star icon
Star icon
Star icon
Star icon

One of my favorite spots in the city.

Star icon
Star icon
Star icon
Star icon

Food is amazing. I always order the pasta bolognese with extra parmegianno on the side. It's pretty hard to get a table, so make sure you book well in advance.

Little Italian Diner
Star icon
Star icon
Star icon
Star icon
Star icon
850 meters awayOpen until 22.00
Close up of patsa on a plate
Close up of patsa on a plate
Close up of patsa on a plate
Star icon
Star icon
Star icon
Star icon
Star icon

Great food, friendly staff. I love this place with my whole heart. Warmly recommended!

Star icon
Star icon
Star icon
Star icon

One of my favorite spots in the city.

Star icon
Star icon
Star icon
Star icon

Food is amazing. I always order the pasta bolognese with extra parmegianno on the side. It's pretty hard to get a table, so make sure you book well in advance.

Little Italian Diner
Star icon
Star icon
Star icon
Star icon
Star icon
850 meters awayOpen until 22.00
Close up of patsa on a plate
Close up of patsa on a plate
Close up of patsa on a plate
Star icon
Star icon
Star icon
Star icon
Star icon

Great food, friendly staff. I love this place with my whole heart. Warmly recommended!

Star icon
Star icon
Star icon
Star icon

One of my favorite spots in the city.

Star icon
Star icon
Star icon
Star icon

Food is amazing. I always order the pasta bolognese with extra parmegianno on the side. It's pretty hard to get a table, so make sure you book well in advance.

Little Italian Diner
Star icon
Star icon
Star icon
Star icon
Star icon
850 meters awayOpen until 22.00
Close up of patsa on a plate
Close up of patsa on a plate
Close up of patsa on a plate
Star icon
Star icon
Star icon
Star icon
Star icon

Great food, friendly staff. I love this place with my whole heart. Warmly recommended!

Star icon
Star icon
Star icon
Star icon

One of my favorite spots in the city.

Star icon
Star icon
Star icon
Star icon

Food is amazing. I always order the pasta bolognese with extra parmegianno on the side. It's pretty hard to get a table, so make sure you book well in advance.

That's concept clarity. Clear and distinct properties for the most important entities in your UI.

Not every concept in a UI needs the same level of concept clarity. You can divide your concepts up into groups and decide how detailed you want to be for each concept.

Linear's menu provides clear hover states that just feel good. Interestingly, they chose not to change the cursor to a pointer.

Local, semi local vs global.