Web App Development

Usability of the Tubby Custard machine

Say you want to make Tubby Custard. It's a four-step process:
  1. Switch on the Tubby Custard machine
  2. Get bowl
  3. Lower custard tap
  4. Turn on custard dispenser

This is the control panel. Would you know what buttons to press and in what order?

You wouldn't. Tinky Winky also struggles, as the mapping between the buttons and machine's behavior is unclear.

Although the machine is technically advanced - for example, it automatically detects when you take away the tubby custard bowl - it requires a lot of attention from its operator.

Possible improvements

Here are some suggestions. Note that they don't consider possible other functions of the machine as well as maintenance and accessibility requirements.
  1. Arrange the buttons in chronological order from left to right
  2. Prevent the dispenser from working if it hasn't been lowered over the bowl
  3. Communicate button functionality through the appearance of the buttons
For example, the second button from the left looks like the head of the tap. But it actually retrieves a bowl from the machine. To communicate this, the bowl should be depicted on the button.

The second button from the right lowers and raises the tap. Implementing it as a toggle would allow it to represent the two possible states the tap can be in.

(Ideally there'd only be one button for filling a bowl with Tubby Custard, which is presumably the main purpose of the machine. Toggle buttons could be used configure the recipe and bowl volume if required.)

Follow me on Twitter
I'm building monitoring tool for site speed and Core Web Vitals.
➔ Start monitoring your website or run a free site speed test