Sentinel: Your Web-Performance Watchman

Usability in everyday items

Written by on CSS Wizardry.

Table of Contents
  1. The shampoo lid
  2. The vacuum cleaner
    1. The lesson?

Yesterday when being dragged around shops by out shopping with my girlfriend Suzanna, we were walking down a shampoo/haircare isle when I asked ‘Is it shampoo or conditioner where the lid is on the bottom of the bottle, as opposed to the top?’ Suze answered my question with ‘Conditioner has the lid on the bottom, shampoo on the top, but I don’t know why’. I knew why…

The shampoo lid

A photograph of matching bottles of shampoo and conditioner, illustrating lid differences

Imagine the scenario, you’re a girl with long hair and you’re washing it in the shower. Your hair is in your eyes, and covered in shampoo. Opening your eyes would lead to some serious stinging! You reach down and below you, by your feet, you have two identical bottles–except they’re not identical… One has its lid on the top and the the other has its lid on the bottom. As long as you’ve learnt which one’s which, as my girlfriend clearly has, you know without having to open your eyes which bottle you have hold of. This is a really ingenious piece of usability, yet so so simple.

The vacuum cleaner

Another great bit of usability I saw was in Suzanna’s vacuum cleaner. It has a retractable cable which rests inside the body of the cleaner when it’s being stored. When pulling the cable out to plug it in, when you are roughly a metre away from reaching its furthest limit of extension, you see a yellow marker on it. This indicates that something must be about to happen, and then when you pull that extra metre out, there is a red marker to signify that this is a far as the cable will extend. This means that there’s no chance of accidentally pulling the cable out too far and damaging it if under the impression that there’s more wire in there. Simple, but so helpful.

The lesson?

A lot of the time, the best way to make something usable is to imagine yourself using it–what would you want out of it? Because nine times out-of ten someone else would appreciate that feature too.

Did this help? We can do way more!

Hi there, I’m Harry Roberts. I am an award-winning Consultant Web Performance Engineer, designer, developer, writer, and speaker from the UK. I write, Tweet, speak, and share code about measuring and improving site-speed. You should hire me.

You can now find me on Mastodon.

Suffering? Fix It Fast!


  • inuitcss
  • ITCSS – coming soon…
  • CSS Guidelines

Next Appearance

  • Talk & Workshop

    WebExpo: Prague (Czech Republic), May 2024


I am available for hire to consult, advise, and develop with passionate product teams across the globe.

I specialise in large, product-based projects where performance, scalability, and maintainability are paramount.