1

We have a series of buttons in our administrative interface, for turning systems online or offline (context-sensitive). Currently these buttons are simply either blue "Online" buttons to bring a system online or red "Offline" buttons to bring a system offline.

However, I find the buttons a bit ambiguous; does a blue "Online" button mean it's Online and the button will turn it off, or does it mean clicking the button will bring it online? The matter is made worse by the fact that there are a large number of systems, so the individual lines are small, and the text is difficult to read. Compounding this, one of my coworkers is colorblind, and the somewhat distinguishable (to me) red and blue is lost on him and he's left to squint at the small text.

There is also an online/offline status column (which helps somewhat) to clarify the button's meaning, but then there's the issue of "which is the button and which is the indicator again?". This indicator suffered a similar problem, just stating "Online" or "Offline", using a green/red color scheme (which is even worse for my colorblind coworker).

I used TamperMonkey to fix the indicator, which now presents a very obvious dark green checkmark on light background for "online", or a white "X" in a filled bright red circle for "offline" (so it's using shape, background reversal, color, and intensity to differentiate). However, I'd like to change the buttons so their meaning is just as unambiguous and easy to determine at a glance.

Is there any sort of "standard" means of indicating the action of turning something on or off, or can someone recommend something that's easily intuitive and immediately distinguishable? I'd like something that conveys a change of state, perhaps with an arrow or the like.

Here are the original indicators (pre-userscript):

Old, bad indicators

Here's the current state of our indicators, as a reference (post-userscript, with the check and "X" being my modifications):

Fixed indicators

(Note that I screenshotted a different set of indicators, so they appear reversed between the two screenshots. In both shots, the line that has the blue "Online" button is currently offline, and the line that has the red "Offline" button is currently online)

Improve this question
3
  • Show both states and the toggle in the middle. -- ux.stackexchange.com/a/40954
    – DaveAlger
    Jan 23, 2015 at 1:17
  • Why not use the "in-Flight-Mode" sign like in Android?
    – keuleJ
    Nov 29, 2017 at 7:13
  • @keuleJ well I've since moved on from this job (and thankfully, the UI has been improved since I asked this question), but an airplane icon (I think that's what you're suggesting?) would be confusing, as our service/interface has nothing to do with airplanes or wireless connections.
    – Doktor J
    Nov 29, 2017 at 18:51

2 Answers 2

Reset to default
2

You guys have a major UX issue, since buttons are being used interchangeably for both as buttons and as "status messages".

You have already improved the situation for the better by replacing the button with icons (tick and X). Now just need to modify the text on the button clearer. You could use "Turn ON" and "Turn OFF" on the other action buttons accordingly. Because "online" and "offline" labels on the buttons are just a statement and it's not calling the user for action.

Here is my take: (you could replace my turn on and turn off text links with your buttons).

mockup

download bmml source – Wireframes created with Balsamiq Mockups

Improve this answer
3
  • We use "Offline" and "Online" as verbs in day-to-day speech, so I'd like to use those as the action titles. I do think that perhaps doing away with the button backgrounds might be the right direction. As a sort of graphic indicator for the state, I was think perhaps the Unicode curved arrows, e.g. "Online ⤴" (U+2934) and "Offline ⤵" (U+2935)? Since onlining a system can be considered "bringing it up" and offlining "bringing it down", I think these arrows convey that action. Do you folks think this adds constructively, or just adds clutter?
    – Doktor J
    Jan 23, 2015 at 4:41
  • @DoktorJ It's never too late to start enforcing "best practices". Another option would be to add a word to to the buttons/action links to make it verbs e.g; "Make Online", "Offline It" etc. I think arrows might not be the best icons for the statuses, since "down arrow" might also mean server is experiencing difficulty and going down rather than totally offline.
    – Ades
    Jan 23, 2015 at 7:19
  • I like the idea of adding a verb... still trying to find a graphical indicator though, as space on the screen is limited. In case you couldn't tell from the screenshot, the admin interface was designed by engineers :P
    – Doktor J
    Feb 1, 2015 at 4:54
0

Another option would be to use sliders like on a tablet computer interface. The text could simply say "Online" and if the switch is green and slid say to the left, the system is online. When the slider or text is clicked, the slider moves to the right and goes red (or maybe grey, as it doesn't imply danger so much), then the system is offline, and vice versa when clicked in the offline state. This wouldn't be too radical a change for the users, but would clarify it greatly.

Edit: If you're looking for a quick fix, you could add clarifying verbs. Where you have "offline" in the post user-script, you could change the text to "take offline", and change "online" to "bring online", etc.

Improve this answer

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.