main display

The traditional thermostat itself contributes to clutter of the whole room; I reasoned that displaying the time as a default served a better purpose than a simple display that only showed room temperature.

A black background with white or bright font was intended for the main displays, including the thermostat display, so that it doesn’t direct attention away from the room. With that in mind, a 180-pt font was used for the clock (1) to provide easier-viewing and to guide the users’ attention to it first. For the inside (3) and outside (4) temperatures, a smaller-sized font was utilized, but they are both saliently-different from the characteristics of the clock.

Colors provide more information through orthogonal dimensions for the temperature readings. In the example display above, the green color depicts a temperature within proximity to the automatic temperature set. If it is above or below the range, it will show red or blue, respectively. The clock and temperature are in the form of digits rather than analog because the space is too small for an analog display and users may have to extremely closely to determine the approximate time; digits also benefit more for point-estimation tasks.

Using the proximity compatibility principle, the indicator is set directly above the inside room temperature so that the user can quickly determine if the temperature is within range, and if he or she needs to turn on a specific thermostat function. Instead of displaying configurable buttons and introducing clutter to the main display, all the functions where the user has to interact with the automation system can be done by pressing the menu button (5).

menu display

temperature controls display

A spectrum in the shape of a half-circle is shown, with blue on the left, transitioning in a gradient from blue to red. Following the SEEV model for predicting focus of attention, the red and blue colors are meant to be cues for hot and cold; and the oval is designed as a hybrid analog display so users can look at it and easily understand if the temperature indicated (1) is within a comfortable range. Otherwise, they can refer to (7) for a point-specific current temperature.

The (1) indicator provides two functions: to show the current room temperature or, if the user drags the indicator forwards or backwards, he or she is actually setting the desired temperature for automatic mode. By sliding (1), the black indicator marked with an “A” follows the user’s finger and locates to the point where the user sets the desired temperature. After release, (1) reverts back to the current room temperature and “A” remains at the new set temperature. (7) also changes to reveal the temperature the user is exploring and also reverts back after user sets the new temperature. These functions provide a easy way for users to set automatic temperatures - simply drag the indicator to what temperature you want.

The heat/cool set points (2) only reveal themselves when the system is on heat mode or cool mode only. Users can also set the desired temperature one degree at a time by tapping (6). The use of triangles and red/blue colors are correlated dimensions that remind the user to press up for hotter, and down for cooler. These arrows follow the principle of pictorial realism, where up means a higher temperature and lower is colder.

Because turning on and then setting a specific mode is redundant and more stress for the user, we set Firewerx to turn on automatic mode if the user presses the power button. The other buttons to the left of the power button (4) are perpetually available and the appropriate modes will be activated and will override the current mode if the user presses them, with the exception of the program button. This avoids the information access cost by providing less categories of information and allow users to avoid mode error.

The program button will reveal a pop-up card-based display where users can view and edit programmed temperature settings. The pop-up separates the function of the program mode because more information and details are needed in this mode.

program mode: the list

I realized there were a lot of confusion surrounding the current thermostat offerings; and the confusion usually lies in program mode. It’s easy enough to just toggle on and off for heat, cool, fan, or even turn on automatic mode; but when it comes to setting programs, many people rely on user manuals.

This is very much a design problem. Traditional thermostats are limited in this way because of hardware constraints. There is also a bit of a learning curve with understanding how programs work; I sought to eliminate these issues by providing lists and instruction within the display.

I divided the program menu into two separate areas: the list of programs (seen above) and creating the programs. This program list will be displayed when the user presses the program button in the Temperature Controls page. 2D buttons (1) are placed on the left that toggle the programs on or off. Colors are used to add dimension and depict the operations; the whole row is faded if that schedule is determined to be off to avoid confusion.

program mode: scheduling

Again, there is much we can do to simplify the operations of creating a new program compared with the operations of traditional thermostats. If we break down what users truly need, they are: to choose day(s) of the week (1), choose the time you want to turn on temperature controls (3), and the desired temperature for the selected day(s) and time (4).

We can add more functions such as time ranges or both heat/cool points; but this would add more categories and delay user decision-making. For times and temperature, a gradient is added to the top and bottom to imply that you can scroll through the numbers with your fingers, per pictorial realism. The word “Select” is included into each step to guide and direct the users on what to do for each of the three categories. Saving the program creates a new row and automatically turns it on in the Program List page.