Users confused about status indicators vs. action buttons

Question

Recently we did some user testing on our current method of displaying data. We had a list of items in a table (yeah, I know. Our software currently uses tables heavily), with icons on one side that people could use to turn things off or on. Above, we had text that told them what to do (something like, "Click on the icon to activate!"). We tested 3 users, and all 3 thought the icons were status indicators rather than something they had to activate.

I asked the tester whether or not they used the mouse to hover over the icons, thinking that maybe if we made them more obvious with some sort of hover state that they would click on them, but they did not. Apparently, they just looked at the table and didn't try to do anything at all, they just looked at the icons and saw things as being 'on' or 'off'.

I'm not really sure what to do with this. I initially thought we could make it even more obvious with some larger, friendlier text and an arrow pointing out what to do. Or maybe even some sort of javascript overlay on their first visit to guide them, or maybe highlighting the icons in some other way. But I'm not sure if that's just a bandaid and if there's a deeper problem.

Answer 1

I think this is an interesting UX problem.

The classic example in my mind is the difference between Play/Pause and Mute/Unmute buttons. These buttons are both actions and status indicators. But they behave in opposite ways. When video is playing the button shows 'pause'. When audio is muted the icon indicates it's muted.

So already we have some inconsistency in expectations.

My recommendation is to not use those icons as actions at all. Keep actions in their own (more obvious) bit of UI. Like a drop down menu. So the user sees there is a set of actions available for each item and can still reference the quick icons for data like status. Here is what I mean:

^{download bmml source – Wireframes created with Balsamiq Mockups}

Answer 2

Which icon are you using for your activate icon? You can use an on/off slider or a power switch. You don't want to rely solely on color though to represent activated/deactivated (considering color blind users), so the two icons need more than color differences to show the different states. The first icon is clear because it has the words "On" and "Off." You could customize yours with "Activate" and "De-Activate" labels.

If the users still aren't getting the concept, you could add a checkbox at the start of each row and then offer activate/deactivate buttons at the top of the table. Or you could add the icons to the actual button with text that says Activate/Deactivate, like this:

^{download bmml source – Wireframes created with Balsamiq Mockups}

Answer 3

A screenshot would be much helpful, but I will take a shot nonetheless.

There are couple of factors when you are trying to set up icons/images are action items. One is affordance which tells the user that this item is actionable. This is easier when the icons used are part of user's icon vocabulary. viz, undo, redo, save, trash icons. Looking at these you get the cue that this is actionable.

Another important aspect, if you have created something new as actionable icons, would be what precise steps have you taken to educate users of the behavior? This does not always involve training, but visually, contextually you can help user understand if there are new elements in the system.

The design patterns and tone of your application / web site plays a big role in what users expect. For an enterprise application, users tend to expect standard icons and actions. For a more creative website, users might wish to explore. So you would need to consider the domain if you wish to diverge from the standard expectations.

If you could add screenshots or some more information, I'd be able to further clarify my answer making it more concrete.

Answer 4

It could be many different things. For example, it could be that:

• the color of your icons are making them look like a static indicator of something instead of something they can interact with
• the icons don't seem to indicate an "action"

You should probably try a mockup with different UI options and test again with different users.

If you have to keep trying to explain via text or a "help overlay" that the users can interact with the icons, then there seems to be a problem.

Sharing a screenshot with us might also be helpful so we can see the layout.

Answer 5

I am designing a software with heavily use of table as well.you can see i use icon in some stage as well, even for edit i use icons, and user understood action is required. sort of icon and where to use it is really important. I suggest if you use your icons inside table in columns or on the top of table it would help but if your icon sit next to table or at bottom, it wouldn't be understandable at all. I got rid of data as they are confidential.

http://www.telerik.com/

Answer 6

This is a question I wish more designers would ask themselves when creating an interface. The User constantly encounters elements on a page that make them think "can... can I click this?" and thus the discovery process begins. There are several things you can do to distinguish what is a status indicator verse what is a button that does a thing:

1. Design:

   This can mean ensuring a button has a color background while a status indicator has a transparent background. You can also play around with borders, box-shadows, or anything else to create a visual standard that differs between the two items.

2. Vocabulary:

   Buttons should always tell you what is going to happen if you click them. Status indicators should tell you what already happened. This means using words like "edited" for an indicator, and words like "edit record" for a button.

3. Placement:

   Create a set of rules for where status indicators will be found. Now, do the same for buttons. If the User finds everything where they expect to, there won't be much question as to what something is.

4. Behavior:

   There is little need for status indicators to have hover or focus effects. This is not the same for buttons. A User will hover over something when first trying to figure out what it is. They expect a button to have some sort of hover effect and include more interactivity than a status indicator.