Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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

share|improve this question

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.

share|improve this answer
    
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 '13 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. –  Henrik Ekblom Mar 26 '13 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 '13 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. –  Henrik Ekblom Mar 26 '13 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.

share|improve this answer

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

share|improve this answer
    
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 '13 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 '13 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 ?

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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