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.

enter image description here

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.

enter image description here

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 -).

4 Answers 4


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).

Hover and clicked 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.

  • Maybe I can improve on the graphics but right now the ✓ (ok), ! (problem/warning) and - (not present) symbols will do. I have also checked the colors I use against color blindness using colorschemedesigner.com and they all provide enough contrast with all types color blindness to be distinguishable. Can I do more than that?
    – Patrik B
    Mar 26, 2013 at 8:46
  • I didn't notice that you also used icons - that is good. And good work checking out color schemes for color blindness, it's often a good idea! The way you plan to implement the different state visual cues sounds fine to me! A general tip: when you show an icon to the user that indicates a state, be sure to explain the state to the user (with a text explaning why there's a red "!" showing up for example). Unexplaned states tends to lead to irritation amongst the users. Even better is a suggestion on how to fix the problematic state. Mar 26, 2013 at 8:54
  • Regarding the arrows - do you think I should provide them on every column or only the first column?
    – Patrik B
    Mar 26, 2013 at 9:50
  • On every column if each cell is by it self expandable. Only one if a click on a cell expands the entire row. You can experiment with low contrast arrows (which might get higher contrast on hover) if there are lots of cells so the interface doesn't feels cluttered. Mar 26, 2013 at 16:43

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.


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

  • You mean that I should add an edit symbol for each cell for all of the device columns? I actually tried something similar, I added a "configure" hyperlink in each cell to indictate that you could click it. It actually made the grid really messy as there can be many cells. But it might make it easier to understand. Do you have any links to good examples/images?
    – Patrik B
    Mar 26, 2013 at 11:09
  • Yes. Commonly a [+] sign if you want to open a box in line with the current record or an arrow. If you plan to open a new page you can use an edit icon
    – Vincent
    Mar 27, 2013 at 14:19

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 ?

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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