News and blog posts from our students and faculty

Adding Edge Cases to User Flows for Thermostat Wireframes

Wednesday, December 18th, 2013 | Posted by James Lewis

This is the latest installment of posts about the iterative design and user testing process I’ve conducted for designing a thermostat user interface (UI) - Read my last update about my latest redesign here.

A Twist! Professor Matt Franks, who has teaching our class wire-framing and iteration design skills, added a twist to our thermostat designs. Edge cases! What are edge cases you ask? Well, in designing our thermostat we created hero flows; hero flows are the ideal paths a user will take to achieve a goal. Hero flows are the main functions we as designers plan for. Through user testing we’ve learned that sometimes users don’t behave in the way we anticipate, and then we adjust accordingly.

But edge cases are those behaviors we don’t anticipate or plan for. Matt gave us the following edge case: what happens when it is very cold inside say 38°F and user sets the temperature to 68°F. But, say the user has a bunch of friends over for a party – hooray! But, uh oh, everyone starts dancing and the temperature rises to 76°F inside above what the heat was set for. Some users might just turn the temperature down – something we as budding interaction designers might plan for.

However, some users might turn the air conditioning on. They want it to get to a nice 68° quickly and don’t want to wait. That makes sense – thermostats are all about temperature regulation. BUT, turning on the air conditioning on when it’s 38°F would brake your air conditioning equipment. Rather than letting our user break the equipment, we need to add a check or balance to the system to prevent them from making a mistake.

I proposed this: Adding a warning message written in conversational language – not technical jaron or a confusing error code – letting the user know the consequences of their actions.

Warning message with suggestion to turn off the heat

I also wanted to add a prompt, asking the user if they would like to turn off the heat instead. This gives them context about what the system is doing and offers a solution to their problem. Clicking “Yes” would automatically turn off the heat without the user having to do it themselves. Clicking on “No” would revert the system back to it’s original state – in heating mode. Cooling mode is no longer an option, but the user will understand why rather than assume it’s broken.

Matt also asked us to add the ability of connecting our thermostat to a local WiFi network – a common feature among newer thermostats like the Nest.

The system tab has a WiFi sub tab added to the thermostat interface

The WiFi sub tab has a short series of screens to allow the user to easily select WiFi networks and type in a password

I designed the thermostat UI to be flexible enough to add sub sections to the respective system areas – or tabs – like the system, fan, temperature and schedule screens. To view all the annotated screens including the edge case and adding the WiFi screen, you may download the full PDF here.

No Comments »