One of the primary things that I’ve been learning from iterating on my thermostat design using wireframes is that the user testing that we’ve been using, called Think Aloud Testing (read my previous post for more info here) really only allows me to observe the ways in which my design functions or doesn’t function. It very well identifies Critical Incidents, which are areas in which the user actually fails to be able to complete the goal at hand. Critical Incidents are the identification of what actually went wrong in allowing the user to reach that goal. Were they unable to figure out how to actually turn the temperature up and down? Did my controls read as a button and not as a switch and therefore didn’t help the user achieve the assigned goal because they couldn’t use them properly? All of these things are extremely helpful in giving me information about how my interface design actually functions. This is great, this is information that I need.
However, it doesn’t really give me any information about whether or not my design is actually good or not. I learned this after the first iteration and user testing session. My interface actually tested pretty well, users were successful in reaching goals. However, I thought that the design was garbage. How did I know that? I don’t want to scroll through that many screens! I didn’t really want to use my own interface. But my paths to complete tasks within the interface were fairly well defined and completed, so it was a little bit confusing to fall on the bad design conclusion.
After my first iteration, I felt like I learned through observation that more screens to scroll through means loss of orientation. Having information easily accessible at hand and close to the home screen allows the user to feel more control over the tasks they are trying to achieve using the interface. From my own use of my crumby home thermostat, I wanted more direct control over scheduling – I wanted to be able to see and touch what I was scheduling. My cell phone is 7000 times smarter than my thermostat. The thing that controls the climate in my house and the comfort of my waking and sleeping hours. This is really important that I understand this and know how to control it!
In thinking about taking control over the minutiae of something, I reflected on the interface of curves in Photoshop. I teach college students photography, and when teaching them Photoshop, I preach the control that curves allows over the image adjustments and how you can make tiny adjustments to very specific parts of an image. It’s the most specific and yet versatile part of Photoshop. Check out Curves below:
Each dot on the line is plotted by the user. It relates to a specific tone or color in the image. The curve is moved up or down, left or right to affect that very specific color or tone.
I decided to try and use the control and specificity in curves in my thermostat interface. The temperature would be the y axis, and the hour of day would be the x axis. The user would be able to manually, through touch, pull the temperature up or down according to the time they wanted to change it on the schedule. At current time, they could just pull the current temp up or down and the number would change as the line moved.
I really liked the idea of how this would work in terms of how much control the user would feel that they would have. One could see where the temperature is, when it is changing, what it is changing to, and wouldn’t have to leave the screen to do any of it.
The big problem with this wonderful idea is that it lacked the mental model of a thermostat. My users looked at the screen and were just confused. They didn’t take the time to figure out what each axis was, understandably. Generally, one looks at a thermostat and the easiest, fastest thing to do is change the temperature up or down. Usually with arrows! There is no mental model for how to interact with my interface.
There’s no point of entry for how to navigate this strange and foreign thermostat. How do you even change the temperature! None of my users were able to accurately change the temperature up or down. One user actually pulled the temperature dot to the right to raise the temp. Massive Critical Incident!
I did have some success with the redesign of buttons. My previous iteration had these icons as buttons, which really didn’t scream out Press me!!! It isn’t visually clear that these are press-able buttons. So, the new iteration above features circles and highlighting to indicate that the button is press-able and which one is activated.
What are my next moves in this redesign? Well, I’m going to iterate on my curves idea. How do I make this interface reference the mental model of a thermostat while still appropriating the control and ease of the curve?
Stay tuned. Iteration 5 is cooking.
Link to full PDF of Wireframes here