"Realistic" Thermostat Interface vs Minimalist

Question

I am developing a Web Interface for Temperature control of certain rooms/zones. Every time the + icon is clicked, a new card appears as shown. The large number will be the temperature based on a sensor and the two smaller numbers are the lower and upper bounds of the temperature set-point.

I am battling with myself as to which design is more UI/X friendly. From a coding perspective the latter is easier and less work (but the first is still already coded). I would be willing to merge the two somehow per suggestion.

This method allows the temperature to be selected using the mouse scroll wheel (Demo Here) and I planned to add the up/down carets (as shown in the minimalist design) later for mobile support.

This design would feature only up/down button selection of temperature set-points. (I still need to add the ability to chose the lower or upper limit before changing its value with the carets)

Specific items on which I would appreciate feedback:

1. Aesthetics
2. Usability (and implied intuition therein)
3. Readability

Thanks in advance for any/all feedback!

Answer 1

For the first skeuomorphic example, until I read your description, I had no idea how I was supposed to change the set point. I happened to notice the little edit icon and was worried that was the only way to change the temperature.

Tying this functionality to the scroll event is risky.

• Some computer mice don't have scroll wheels
• Some people don't use scroll wheels
• Scrolling is not a common method of data input/editing
• Not mobile-friendly
• People may accidentally trigger this when trying to scroll past
• The feature is not discoverable

In your second design, the up and down buttons make the method of adjustment much more apparent. A click interaction is a much more common method of input.

• Allows for simple input without making the user transition to a different interaction method, like typing
• Mobile friendly
• The interaction is less error prone (will not accidentally trigger by users trying to scroll past it)
• The feature is discoverable

Also, how often does a user need to change the temperature more than a few degrees at a time? Probably not too often, so the small +1/-1 adjustments will likely be sufficient for normal use.

Considering these usability differences, the second design would likely be a bit more intuitive.

Answer 2

Keep in mind that a lot of people use a mouse that doesn't have a wheel. The first example unfortunately doesn't have any immediate signifiers for how to adjust the temperature by clicking. I'm going to assume that the outer gray "bands" are clickable -- adding carets to them would definitely help.

It sounds from the mouse wheel support like you want users to be able to quickly change a temperature without having to click several times. Consider using something similar to fast forward/rewind gestures (a press-and-hold or double-click tells the system to speed through increment/decrement.)

The second concept is more intuitive, though the very thin, light temperature font is a little hard to read. Again, you might want a way for the user to accelerate up or down without individual clicks.

In both concepts, the "edit" button made me think that you can "edit" the temperature by clicking the icon. If that's for settings, consider using a cog icon instead.

Answer 3

My feedback for this determines that minimal is better:

1. Aesthetics. There is a calming/comforting mood that comes with minimalism that is suitable for temperature.

2. Usability. Minimal is better because it is clear what can be touched for input, and that is more important when it is part of a more complex function (multiple rooms/zones). The realistic one has many grooves that clutter the function.

3. Readability. Minimal wins here as the temperature is nice and large. People of any age can read this. It can be adjusted easily for accessibility (color blindness), too.

Answer 4

TLDR

The design itself could look aesthetically appealing, but only to someone for who it has no complications. Since it's not a work of art but a tool with usability requirements, any impediment can have a negative impact on the appreciation of the design.

---

The bigger picture

I noticed your curiosity about what the aesthetics of the thermostat design (example 1) would do to UX, so let's focus a bit more on that.

The thing with this thermostat design is that it is a tool that is part of a certain task the user tries to fulfill. Just a few pretty colors and shapes would make it a work of art and would have other requirements than what this tool was designed for. It can only be appealing to someone if it meets other qualifications first:

1. It has to be discovered and recognized as a thermostat. It's good to know that the eye scans for recognizable objects in the context of their current task, other objects are simply ignored or not even noticed. A good guess here is that the 72º is probably the first aspect that is noticed which is important for the task and kept in visual memory. After that other objects are gathered and put together to form something that is useful for the task. So hopefully people are familiar with this design of a thermostat and recognize it as such.*

2. Assuming that it is recognized as a thermostat there can be a short appreciation of the design. But that would soon make place for concentration on the usage of it. First there is the translation of the real life object to a 2D object on a screen controlled with mouse, finger or keyboard. If it isn't clear what to do with the control or if it can't be done because it isn't accessible, the once appreciated design could now be cursed.

3. A good guess would be that people tend to click or touch the knob and then turn it into the desired direction, just like grabbing the knob of a real thermostat. Hijacking the scroll function for this is probably not such a good idea (left aside how well it works). The experience that comes closest to the real life thermostat is most likely the touch and drag operation on a mobile device. Clicking and dragging with a mouse will most likely result in a lesser experience, which can have a negative impact on the appreciation of the design overall.

*To me the design looked more like an accelerometer of a car and it wasn't immediately clear that the white circle in the middle is the knob that turns.

Answer 5

Disclaimer: I'm the DIY Zoning project maintainer, take the following with a grain of salt.

---

Long story short: The picture here represents the summary of 20 years of usability research in a context of an Open Source project. The design goal was maximum usability with minimalist style.

Full description of the interface is here:

https://www.homeclimatecontrol.com/hcc-core

Summary: Swipe up/down changes the temperature, swipe left/right changes the zone, so does click/touch on the top bar. Click/touch on the setpoint shuts off the zone or turns it back on, long press returns settings to schedule. Click/touch on "hold" and "voting" toggles those settings. Background gradient represents cooling/heating trend, chart color represents how close the unit is to turn on/off, and horizontal yellow line is the setpoint.

One of DIY Zoning users had successfully introduced his 4 year old kids to this interface back when I released it back in 2011.

Hope this helps your research.

Answer 6

The second one is simple and obvious. I would suggest a couple of refinements, though:

1. Put the edit icon in the top-left or top-right corner, not the middle. You should also include space for naming each one if there are going to be multiple in the window. Actually editing the name isn't going to be done often and thus doesn't need to be done from this window, so would be fine to put in a separate configuration window with the rest of the zone properties.

2. Don't make the text a light colour if using a light background. When in doubt, go for contrast. Makes it easier to read, which is especially important if you're using a thin font. If you want to add some colour, you could do it in the background with black text on a light-orange background.

Answer 7

I like the basic idea of the first one. But restricting to the mouse wheel does not work in many cases, including some touchpads.

You should take a look at the interfaces that are used in the music world. They use manly rotary controllers with graphical and numerical feedback. Such controllers are usually dragged to the right position. There seems no established standard whether to drag up/down or right/left or circular. My personal experience is that it is more intuitive to drag up/down than circular dragging. Even when you don't understand how it is exactly working, you can easiliy learn it while you are playing around with it. Another benefit of linear movement is that you can play with the precisition of your control as you chang the direction of the mouse movement. As the orthogonal component is discarded, you may achieve a much finer control with diagonal movement of your mouse.

I'd suggest to put two small controllers (maybe coupled with up/down buttons left and right to the display) for the limits just below the numeric display of them. The displayed number should be editable so that the users can enter exact values.

However, on touch enabled devices sliders are more commen to input data, than rotary controls.