Users don't understand how to interact with my grid

Question

The problem

The users that I have tested my application on don't see that clicking individual cells in the grid gives them the possibility to configure the content of that cell. Basically they all interact with the grid as if it was a simple list.

Any ideas on how I can make it clear to the user that they can interact with each cell?

The background:

I have a view in my application that consists of a list of applications. Each application can be configured or removed by the user. So the first implementation was just a simple list with "Configure" and "Remove" buttons underneath.

Now I'm adding the possibility to deploy the applications to different devices. A requirement is to give the user a good overview of what applications a device has (and vice versa) and if there are any problems with the installation.

So I transformed the list into a grid where I added a column for each device where the intersection shows the relationship status between an application and a device.

In this example I have put the panel for management of the relationship inside the grid (accordion style). I have also tried putting the panel underneath the grid alongside the "Configure" and "Remove" buttons but the users prefer the accordion style.

One thing that I know might be confusing is that I only show the accordian with the panel if you select a cell that contains a relationship. So if the user clicks the first column with the application name the panel isn't displayed.

I should also add that I'm trying to keep the information in each cell to a minimum as this will make it possible to see more devices and applications at once. Right now the content consistsof a background color (green for Ok, yellow for problems and light gray for not present on device) and a simple text (✓, ! and -).

Answer 1

A few thoughts. To tell the user that each cell is expandable you could use the standardised triangle that turns downwards after click. Further, you can enhance the feeling of "clickability" by changing cursor and add a hover effect (change the appearance of the hovered cell).

Your idea to only use colors to indicate states (like green for OK) might be a problem for color blind people. I suggest that you combine colors with an icon, text label or other visual cues that doesn't depend only on colors.

If you have the action buttons below all cells or inside each cell depends on your user scenario. If the user might want to say, select 5 item and delete all at once, you could add checkboxes for select purpose, and one delete button at the bottom (or top) of the page.

Answer 2

People tend to treat wire frames like flat visuals they cannot interact with. I believe everyone has to deal with this problem from time time, especially when working with marketing departments that care for the results and often don't want to go too deeply into details how it works.

The best solution I have come up with so far is:

• Use a special color to indicate all the elements in the wireframe user can interact with. I use dark orange for that, as it's not used elsewhere (red, green, yellow have another meaning, like false/ok/attention). I put these in a b&w wireframe, so these are pretty much visible and welcome users to click on them.

• Start your wireframe from "How to" view, explaining at least this special color and - if really inevitable - also how to interact with the wireframe or what kind of simplifications of the final mechanism you needed to implement. For example, the latter is very much important to describe the swipe action on mobile, because the wireframe will be most probably viewed on desktop. The more minimalistic you will go I'm these descriptions, the better.

• Don't hide views behind states not directly accessible from the structural map of your wireframe if not necessary. For example, my wireframing app has a feature of 'dynamic panels' that change their states upon some conditions being met (usually user interaction) - as you are not sure that user will interact with it, there is a huge possibility that the state not visible at start will never be seen by him. I sometimes provide also special row of buttons on a side of the wireframe saying "See this view switched to xyz state", but as I said - only if dynamic panels are necessary.

Answer 3

I looks at your image before reading the post. I did this on purpose to get a clean impression on what you are presenting the users.

Due to having the 2 buttons below the "List" people automatically assume that your "Grid" as you call it is a list, and that is what it is. It is a list that has the possibility to react on user actions. But you don't give the users any clues that they can do something with the "Grid". Adding an "Edit" icon or [+] sign in front of each option will make the users click on the icon and make the action you want to happen

Make also clear what the buttons below the list are meant for

Answer 4

Add a header : Select Application
And grey out the buttons/ Deactivate them. Make the buttons active only if one of the applications is selected. Does this help ?