Discussion: Possible Confusion between State and Action on Devices

(Rei Vilo) #1

On the dashboard below, there are two devices: one says ON, the other OFF.


Are ON and OFF the actual states of the devices, or the commands to change their states? How to remove this uncertainty?

(Kathy Giori) #2

The “on” property of the Web Thing Type spec is a boolean variable in the current scope of thing types:

An action such as “toggle” of the onOffSwitch type will toggle the state of the on property. But depending on the device, it might also be possible to set the “on” property state to true or false, which may or may not toggle the device state (dependent on current state).

This probably doesn’t answer your question but at least gives you more to ponder. :slight_smile:

(Ben Francis) #3

It represents the current state.

(Rei Vilo) #4

Ok, so how to know a device offers an action?

In the example below, Button 18 offers no actions while LED 17 can be turned on. Both look identical.


(Ben Francis) #5

By tapping it :slight_smile:

But seriously, yes, it could be a bit confusing. Tappable buttons don’t have visual affordances to differentiate them from read-only sensors. Do you have a suggestion of how to improve it?

(Rei Vilo) #6

One first suggestion: removing the white circle for devices with no actions.

A device with a white circle offers interactivity. The LED 17 device has been changed to show the white circle.

(Ben Francis) #7

Hmm, interesting idea to differentiate thing icons you can tap by adding a border. It is quite a subtle distinction though and I’m not sure if the “affordance” would be immediately obvious to users. We could put this through some quick user testing to compare the two designs.

(Ben Francis) #8

Note that an alternative design I previously explored was to have an on/off button inside the circle which is the button you actually press, but space inside the circle is quite constrained.

(Rei Vilo) #9

Another option would consist on changing the background colour of the devices featuring an action when the mouse is hovering.

Devices with no actions stay unchanged.

See https://www.w3schools.com/css/tryit.asp?filename=trycss_buttons_hover

(Ben Francis) #10

Note that touch-based devices do not have a hover state.

(Rei Vilo) #11

Nothing is perfect! :slight_smile:

(Dave Hylands) #12

It would also be good to have a menu item like “Help” or a quick overview of how to use the UI that answered questions like these.

(Rei Vilo) #13

Or inactive devices are in light grey.