GUI Settings Menu

Question

So happy to find this forum! First post here, hope I understand the intent:

I am trying to design a settings menu for HVAC control and I just really can't figure out the best way to portray the available options concisely so that the menu looks sleek.

There are some obviously styling tricks I could use to make things look a little nicer initially (like right-indent the options [dropdowns, toggles, etc], and center the buttons at the bottom).

At first I thought it might be a good idea to break them up into category but that hardly helps me since almost every entry is a different category. Below is what it looks like currently:

There is intended to be two settings for allowing simultaneous heat/cooling: Alert or No (hence a toggle switch since I think that looks cleaner)

Also there are two settings for Units (C or F) so I cant tell if a toggle or a dropdown would be better here.

The other option for Override is:

2) "wait until the next scheduled set-point event"

and the other two options for slave disconnect are:

2) "Use last setting"

3) "Do nothing other than attempt reconnect"

I thought about also trying to narrow down the description of each entry to no more than 2 words but then also incorporate an i-button (for information on hover) but this still doesn't solve the lengthy dropdown options.

Eager to hear all thoughts, thanks!

Answer 1

Switches

Use switches for Boolean values when something can be turned on/off, active/inactive, enabled/disabled, etc. Don't use them for two non-opposite values.

For example, the "Allow simultaneous Heating/Cooling" option shows the options "No or ALERT". I'm sure this probably means "No", or "yes, but raise an alert about it," but at first glance, these are not obviously opposite options.

Try instead: You can use radio buttons which will provide more space for elaborating on each option. For example:

Allow simultaneous heating and cooling?
⚫ Do not allow simultaneous heating and cooling
⚪ Allow simultaneous heating and cooling, but also raise an alert

Details

Some options may call for additional elaboration, and that's okay. The user should understand as well as possible what the implications are for these settings.

Try instead: Complicated settings can contain details that help the user understand the impacts of their selections. For example:

Automatically engage heating and cooling devices to meet set point? (⚪ )
This setting may result in slightly higher energy usage, but will be able to maintain the chosen set point more accurately.

Alignment

Providing a bit more consistency in your form will increase readability. If the user sees a consistent structure, it will be much easier for their eye to scan the elements of the page about which they are concerned. As it currently is, there is no discernible alignment for these input elements, so the user's eye is left to process all elements individually and cannot rely on structure to help take cognitive processing shortcuts.

Try instead: Align descriptions on the left with their options on the right, OR indent options on a line below descriptions. The main focus here is just structural consistency to aid the user in visually processing what they're seeing.