Washing machine UI
I moved to a new flat and there was this washing machine…
It confused me when I was trying to understand how it operates. Let me show the dashboard:
Problems
Problem 1, icons.
First thing that immediately comes to my mind is that there’re bunch of icons that I don’t really understand — those on top of buttons on the right or those on the drawer or those in the column in the far right:
Problem 2, indicators.
Take a look at the picture from user manual:
(On the far right) Wash cycle progress AND delay timer? Bearing in mind that timer goes from bottom to top and wash cycle indicators go from top to bottom. And they use same lights:
Problem 3, priority conflict
Remember the drawer has all the programs and temperatures listed (which is great, although I still have no idea what they mean)? I have a slightly better picture of an older version of the machine:
Here is the question: if I choose program 5 which will heat the water according to the list to 40 degrees and put the temperature knob for 90 degrees, who will win? Same story with spin speed knob. Here’s the part of the manual (don’t read it if you don’t want, jump to the text below):
Ok, so the temperature on the knob could be only set lower than the program temperature. If you choose higher value it will still be 40 degrees. Again, it’s not clear from this interface. The knobs work perfect on microwave ovens, but here they fail to explain the user their purpose.
Problem 4, instruction manual should always be near.
But what about other parameters? What’s the cycle duration and laundry weight? And when can I use bleach? It turned out that there is a huge table regarding each program:
You can’t possibly remember all that, right? So you always have to keep instruction manual near the machine. Even if you’re going to use just one program for all washes and do laundry once a mounth you will still need instruction from time to time.
Solution
I was so frustrated with this machine (sorry, Indesit, but seriously) that I decided to make my own version for this particular machine. I decided to keep all the same functions, use same materials and parts, so no futuristic touchscreens and that kind of stuff. Just white plastic with colour printing, buttons, LED light indicators and knobs.
Problem 1, icons: solved by removing all icons and replacing those with text. Take a look at the drawer (on the left), all the programs fit perfectly fine. Also replaced icons on the main knob for just A and B. Nobody knew what they meant anyways, so whatever. Also EcoTime and Energy saver are now explained in text and pressing each of those will not only be indicated by LED light (as like in vanilla version) but will affect the parameters in the table (like forcing the temperature to be snowflake — that means no heating will be applied to the water during the wash cycle and you’ll be saving energy).
Problem 2, indicators: solved by separating timer (Defer)and time left for the washing cycle (Time).
Problem 3, priority conflict: solved by having an indicator for every value of temperature and spin speed. When you activate program 5 (as on the picture) indicators for 40 degrees and 1000 rpm will go green. And you can decrease those values step by step by pressing buttons with arrows down. After reaching bottom, the value will return back to 40 and 1000 respectively.
Problem 4, instruction manual should always be near: solved by listing all the parameters and supporting those with LED indicators. Now the interface shows temperature, spin speed, weight, cycle duration, whether you can use wash, softener and bleach and also you can defer the wash by 3–12 hours as in the original UI.
Other stuff: I dropped the indicators of steps of the washing cycle, first, because the icons were confusing, second, because users like me are generally interested when the cycle is over rather than what stage it’s on (also some stages could be guessed by the noise). Pausing and opening the machine during the wash is generally not a good idea — but if you really need to do it (I guess it would be an emergency case) you don’t care what stage it’s on you just pause it and open the door if it’s possible.
I also slightly redesigned knobs, which as you might have noticed were quite bad — the direction that they’re pointing was not that obvious. But this is a minor issue for this article.
Update. I’m not saying you won’t need an instruction manual at all, surely you’ll have to read it, I was just trying to modify UI in a way that you don’t have to keep it near the machine all the time.
Further reading:
- Why I chose text over icons, theoretical model with lots of text, references and graphs — Defining environmental (experiantal) graphic design
2. Washing machine for men — great article by Peter Fabor that inspired me.
3. Grades of UI humanity — a small thought on UI.
4. Not UI, but close — Why 5-star rate system is bad?
