Design can be free (part 2)

My last post was on how ‘smart devices’ create overly complex designs by throwing in too many features and misusing their hardware. It showed how great design doesn’t need to be fancy. Design, in fact, can be free. This post wants to push those assumptions a bit, redesigning a product two ways: a modest improvement using the existing hardware but then talking about how better hardware can help.

Our starting point is this oven from SubZero. I came across it in a rental last year. 

No big surprise, it is a particularly challenging device and I’m excited to show how it could be improved. As the photo is a bit hard to read, here is a mock up that makes the buttons a bit easier to read:

Visual Problems

There are numerous mistakes that makes this complex and hard to use:

  • Heavy borders
    The heavy button borders are visual noise, don’t really help, and make the overall presentation overwhelming.

  • Packed grid
    The buttons are packed like sardines into this space making the button shape dominate the display, which makes the text harder to read. In addition, there is zero whitespace so it’s hard to visually parse how the functionality is organized. It’s just a sea of buttons.

  • Abbreviated text
    Using “Conv” instead of “Convection” is just cruel, especially as the full spelling is at the bottom so it’s hard to know what the abbreviation would even mean unless you read from the bottom first.

  • Wall of text
    I’m not a big fan “icon only” designs but this design is just the opposite: a wall of text. Icons do have a place as they make discovery and repeated use much easier.

  • ALL CAPS
    IT’S REALLY A BAD IDEA TO USE ALL CAPS IN YOUR PRODUCT AS IT JUST MAKES EVERYTHING SO MUCH HARDER TO READ

Interaction problems

The visual problems are bad enough but the interaction problems make this truly horrific. 

  • Turning on
    “Turning the oven on” is a multi-step process. I have to press the type of heating I want, input the temperature and then tap the ENTER button, that’s 5 taps. Of course, the first time I used it, I just did: BAKE + 3 + 5 + 0 and I stood there blinking wondering why the oven didn’t turn on. It took me a second to realize I had to hit the ENTER button.

  • Turning off
    But I was completely shocked when I wanted to turn off the oven.There was no obvious “off” button and I literally had no idea what to do until I ‘reversed’ how I turned on the oven: pressing the BAKE button and then the CLEAR button, which did the trick. That is just crazy.

  • Too many functions
    There are just too many things to do in this display. Functions that are likely used infrequently such as STOP TIME, are right next to much more frequent functions like LIGHT. In addition does anyone even understand how the difference between all 8 heating modes?

Basic Approach

So my approach is to make a range of small fixes. I’ll limit the functionality just a bit, calm down the visual design, clean up the text and use icons a bit more, and aggressively use white space for better grouping.

However the most controversial step I’ll be taking is removing a few of the functions. This usually gets pushback from most product managers as for them “features == sales”. The problem with this thinking is that it assumes a) all features are used and b) extra features has no negative impact. 

Take for example the number of ‘oven modes’. There are 8 and even though I am an avid and frequent baker, a baking power user if you will, I still can’t explain some of them. This seems to be a common problem with ovens. Here is a European model (with 9 modes!) that is trying to use a ‘friendly icon dial’ to make it easier to use:

If you know the hieroglyphic code, it’s possible to decipher but it’s not very approachable. In doing a little research, it’s clear that the majority of recommended usage by manufacturers is TOP+BOTTOM as it provides for better overall even heating, BOTTOM for items that could burn more easily, and BROIL, the top element only, for grilling. Convection is a great technique to ensure more even air movement and heating but it’s clearly got a bit of a marketing problem as so many people don’t seem to understand how to use it. In addition, it’s not at all clear how convection improves either BROIL and BOTTOM heating modes.

My point is that all 8 or 9 modes aren’t understood or likely even needed. Users shouldn’t have to cope with a matrix of MODES x CONVECTION STATE. Restricting the choices will significantly improve learnability and even user satisfaction (as their oven finally ‘makes more sense’). I’d suggest a somewhat aggressive list of 4: Normal (top + bottom), Broil, Bottom only, and Convection. The goal is to guide the user with the name “Normal” to take the guesswork out of how best to start. Of course this reduction needs further discussion and absolutely needs to be user tested! My point is to avoid thinking like an engineer and instead of offering EVERY POSSIBLE OPTION, make an attempt to guide users. But my past experience warns me that this can be tricky and I worry that “Normal” may not test well. My point is to at least try, test, and learn. We’re on the right track.

Redesign

The first thing to point out is the visual layout and presentation. Much stronger use of white space, icons + text on the labels. This naturally groups the buttons in a more ‘parse-able’ format:

  1. Power and Light
    Power was completely missing on the original design. This gives a clear button to turn everything off. The Light button isn’t as critical but it is a high frequency button and putting it here makes it easy to find.

  2. Baking Modes
    As discussed above, a smaller set of the modes needed by (I hope) >95% of all users. Notice the use of icons to reinforce how the heating works with a fan blade for convection. I don’t expect this to be 100% effective but it should help repeated use and remind users of how they work.

  3. Temperature input
    Very close to the original design but notice the CLEAR and ENTER buttons are gone. Once you pick a baking mode, it defaults to something reasonable (e.g. 350F or 175C) so input isn’t even needed. However, if the user wants a different temperature, they tap it in. After a pause, the number is automatically accepted. This is how many ovens work today so it isn’t really that crazy or even innovative, it’s just killing that horrible ENTER button.

  4. Secondary buttons
    These are the functions that are less likely to be used but are still important. Notice that I’ve collapsed START/STOP time into Delay. Like the baking modes discussion, I’m trying to simplify, assuming that the majority of the time, users just want to delay the start and will be there for the completion. Just like the baking modes, this needs to be discussed, I’m making a point here to simplify and test if it’s appropriate.

This design is significantly calmer and guides the user into a more natural left to right sweep, making it clear that the most important buttons are on the left, with default temperature values so even inputting a temperature is optional. In addition, as a forgiving shortcut, it shouldn’t be necessary to tap the POWER button first. Just tapping NORMAL should be enough to immediately turn on the oven while selecting the baking mode. As the previous temperature is remembered, this means that using the oven is literally just a single button press for both on and off. We’ve just invented a new “feature” to brag about on the packaging.

One more push

This new version is certainly easier to approach and use without a manual. However, the temperature setting is still a bit wonky. The “timeout after a few seconds” trick is a bit problematic and programming it to handle edge cases is tricky. A much better solution would be to NOT rely on push buttons but replace them with a physical dial.

This is far superior as the ‘default’ value is permanently on display. It’s exactly what you did last time. It’s also MUCH easier to change, just a quick flick of your wrist. As a final value, it completely eliminates any input tricks needed with the ambiguous number buttons. No longer do you need timeouts or an ENTER button. You just turn to the value you want. It’s clear, fast, unambiguous, and 100% error free. Your programmers will thank you profusely for adding this.  Of course, adding a dial is likely a bit more expensive than push buttons, but I’d argue it makes things significantly better.

Justification

While a design like this will reduce errors and improve satisfaction, these are often seen as a bit vague and hard to quantify. Unfortunately, removing functionality is VERY measurable and likely to create significant push back. This “vague positive, obvious negative” will always be a tension in making better designs. However, we’ve done so much more than just ‘remove things.’ We’ve also added significant value. So much so that you could replace some of your marketing speak that previously talked about ‘features’ and discuss the ease of use, e.g. “one button start” or “Easy temperature dial”. The point here isn’t to see this as tweaking the visual design to be pretty but instead a process that adds significant value to brag about and make a core part of how to sell the device and build brand loyalty.

Conclusion

Note: I intentionally ignored the display panel in this redesign. That was just to keep the discussion focused on the core issues of visual layout and UX improvements. A proper design would of course have to include how to use the display (Delay would clearly need it) but I’ll argue that it wouldn’t significantly change the approach or many of the decisions here.

I want to stress yet again that this design isn’t final, it’s an exercise in how I approach problems like this. If you feel I went too far in reducing the heating modes, that’s a reasonable critique but my point is to avoid mindlessly splattering all the functionality onto the panel. You must think about it, consider it from the user’s perspective, and have a story as to why each is required. Do the hard work to organize and prioritize how the user sees in your product. 

The costs involved with this type of rework are not expensive. The first version used nearly the exact same hardware so should have literally zero impact on the overall cost of the product. Design can be free. The dial I added at the end is a push, I’ll admit, but one which adds value that can be sold and can even motivate sales.

PS: I’ll repeat my offer from my previous post. Any smart device maker out there, I’m happy, for no cost what-so-ever, to give your product a review as well as brainstorm ways to improve the flow and layout of your product. I’m retired, I don’t want to sell you anything. I just want devices to be better.