12

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.

enter image description here

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.

enter image description here

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!

14
  • 2
    Just noticed the tiny numbers on each interface -- what do those represent?
    – Izquierdo
    Apr 8, 2020 at 15:35
  • 1
    @StacyH "the two smaller numbers are the lower and upper bounds of the temperature set-point" Apr 8, 2020 at 15:56
  • 7
    Just as a quick feedback on your demo of the first concept: I am on a Mac and am currently using a Magic Mouse, which has a "virtual scroll wheel". While it kind of works, due to the scroll acceleration/smoothing features, controlling the temperature is very hard to control and nigh impossible to set precise/small increments. Also, it took a while to find out that you have to click on the gray "things" on the left and right side to change anything. So I think this concept is really to complicated and flawed for the purpose. Apr 9, 2020 at 9:07
  • 8
    Everyone seems to have forgotten the most basic usability issue: only one country uses these weird temperature units, so you are excluding about 97% of the world population. If I set your app to a nice comfortable 21 or 22 (Celsius), I am not going to be pleased with the result!
    – alephzero
    Apr 9, 2020 at 16:34
  • 1
    @alephzero, that seems like a first time setup or personal setting issue, it is probably pretty rare for someone to want to change that. That said, being an F person and having traveled to C countries, I would love the option to switch between systems!
    – Chris Haas
    Apr 9, 2020 at 22:27

7 Answers 7

41

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.

5
  • Thank you for your answer! Do you have a stance on the aesthetic appeal of each? Or would you say that the usability in this case trumps that aspect? Apr 8, 2020 at 15:30
  • 1
    @SterlingButters I think this community is better geared to provide feedback on the usability aspects of the design. If you'd like to solicit more insightful critique on the aesthetics, you can ask at Graphic Design. However, I do think they both look perfectly fine to me. Apr 8, 2020 at 15:42
  • 9
    Also, for what it's worth, every thermostat in any house or apartment I've lived in has been digital, with +1/-1 buttons. Considering this, the second design reinforces this pattern by matching more closely with my real world experience. Apr 8, 2020 at 15:49
  • 2
    I'd tend to agree with @maxathousand on this, the second design is actually more consistent with what a lot of people (especially younger ones) are likely to expect for a thermostat. It's becoming increasingly uncommon in many parts of the world to find the old circular rheostat based ones that you actually turn a big knob on to change the temperature outside of historical buildings. Apr 9, 2020 at 16:55
  • Another disadvantage of the circular scroll-wheel version is that it requires a fairly "ordinary" mouse. It is almost impossible to use this control with my MX Master (with the settings I have, at least). Apr 10, 2020 at 13:06
5

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.

5

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.

3

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.

3

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.

enter image description here

2
  • 2
    the blue on red hurts my eyes, and may be unreadable to colourblind users. always use brightness contrast.
    – Jasen
    Apr 10, 2020 at 12:36
  • 1
    Put this into perspective: you usually see the picture above on your cell phone, the surroundings being unpredictable and often noisy. Subtlety doesn't really work there. Here, the picture does indeed look like an eyesore. It's Open Source, so feel free to submit a PR or fork. Render: github.com/home-climate-control/dz/tree/master/dz3-master/… Color scheme: github.com/home-climate-control/dz/blob/…
    – vt.
    Apr 10, 2020 at 17:40
1

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.

0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.