0

I have a tab control in a c# application with a number of tabs along the top. One of the tab is named services (As you can see in the screenshot below).

Tabbed UI with buttons ..

For services the user should be able to start or stop the service, or uninstall or re-install the service.

The challenge I'm facing is how to separate them and make them distinctive enough so that a user doesn't accidentally click on uninstall when he/she really wanted stop.

I've tried stacking the buttons, arranging them horizontally. Nothing seems completely satisfactory. Does anyone have any suggestions?

Thanks Brad

1

The UI implements the conceptual model in unclear way. You need to convey the state of the services (Running, Stopped), and allow user to operate with multiple items (Start, Stop, ...).

You have checkbox for the each item, but it's unclear, is it for State, or for Selection before action.

I suggest more clear way to convey the state, and the actions:

enter image description here

Also to reduce information overload, you can display secondary actions (Re-install, Uninstall) on mouse over, or remove these at all. The reason for removing is these actions aren't what user need. She either need to run service, or to stop it. If for some reason a service cannot be started, the system should to re-install it automatically. Then the mental model will be more simple, and the UI will be more clear.

Update
Having limitation in UI controls, it's possible to use standard checkboxes only:
enter image description here
Pay attention, Re-installing and Uninstalling are removed: when running a service for a first time, or when it cannot be statred for some reason, the system is trying to re-install it automatically. See the Starting... status for Service 3 on the picture. After successful starting, the status is changed to Running.

  • This looks really nifty and very intuitive. What sort of visual studio control would support this though? – Brad Mar 26 '16 at 13:09
  • Also this UI seems to lacks a way to stop/stop all services, or uninstall/reinstall all services at once. The application is a deployment tool so when its run those sorts of operations would be common - i.e. I frequently would want to stop everything at once vs having to click stop/start many different times, – Brad Mar 26 '16 at 13:23
  • Hmm maybe a datagrid....I wonder. – Brad Mar 26 '16 at 13:24
  • @Brad please see Updete section. – Alexey Kolchenko Mar 26 '16 at 14:32
0

Buttons that create binary states should be one button

Presumably if a user hits "Start", the "Start" button now becomes inactive because the services are running and "Stop" is the only option, so you don't want both Start and Stop always present. In one way or another it would be beneficial to combine these things. Consider what browser do when you download a file "Pause" and "Resume" are the same button and they just change based on state. Or when watching a video, "Play" and "Pause"

Group actions near the things they act on

Position buttons near the things they acts on. I wasn't sure whether uninstall and reinstall do so for all the checkboxed services. If that's the case then placing them in the lower right makes them feel global. Similarly, you can position the Start/Stop feature above the checkboxed services it acts on. This creates a clear hierarchy that communicates, "this button acts on the below." Let me know which one of the two below is more appropriate based on what all these buttons do.

Words are important so these services may be more of "On" and "Off" states in which case you might want a toggle switch. Notice the services are disabled in an Off state. (Again, not sure if this could make more sense since it's not clear from your description). enter image description here

Alternatively, if that doesn't feel right, "Start" and "Stop" or perhaps "Run" and "Stop" makes more sense. enter image description here

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.