One of our regular UX (user experience) observation tasks is to look at areas of frustration our users might be having when using our digital signage software. Once we identify one, we attempt to reduce or remove it. It’s a healthy way of reviewing past design decisions, revisiting assumptions and adjusting as necessary.

A recent area of user frustration was a frequent ‘dead click’ we noticed in our logs. Users were clicking on a disabled Save button in our editors, expecting it to… do what? Why were so many users clicking on a disabled button?

After homing in on the event and further observation, our UX team surmised that users were looking to use the Save button to close the editor (which it does, when it’s active). But prior to any edits, the Save button is disabled. Voila! La clique est morte. (French for: “Oops.”)

Also important (maybe?): there was a handy ‘Close’ button to the left of the Title input. That would have done the job. Its position followed a pattern well-established in other popular apps (Google Docs et al). But on hi-rez screens it’s a yawning 1000+ pixels away from the Save button, way off to the corner, its ‘X’ icon was small and hard to notice. Meanwhile we were training users to hit the Save button to achieve closure the other 80% of the time, when there were edits to be saved.

On hi-rez screens the Close button was a yawning 1000+ pixels away from the Save button. Meanwhile the icon was small and hard to notice.

As in many things UX, straight answers are rare. There are countless assumptions packed into any observation, a seeming infinite number of proposable solutions, with a ton of guesswork stacked into each proposal. It seemed users were launching the editor to get an animated preview, then trying to ‘close’ it with the Save button – should we add that preview feature elsewhere? The Save button is controversial – should we change the data model and get rid of Save altogether? Activate the Save button under all conditions (removing other features)?

We opted for a simpler (we think) middle path:

  • The ‘X’ icon was eliminated
  • A ‘Close’ text button was docked to the left of the ‘Save’ button.
  • The Close button has a secondary style applied, for low emphasis compared to the Save button.
  • On Edit, the Close button is updated to ‘Cancel’ indicating a loss of current data when selected. To the immediate right, the Save button becomes active.

revised digital signage interface for screenscape 5

The new design was tested last week and pushed to Prod on Friday. We’ll be watching closely to observe how the updated design affects user actions in the real world. Stay tuned!