How best can I indicate a table cell is clickable?

Question

I have a table with lots of cells, containing products to buy. Certain cells will open a popup when clicked, which shows similar products. The rest will not (because no similar products exist).

How best can I indicate which cells can be clicked? I'm keen to make it as intuitive as possible. However I should also mention that space is limited in the cells.

Here's a (heavily-edited) screenshot of how it currently works. Users have to click on the cell in the basic grid to see all the similar items. But often they don't realise they can.

Answer 1

If the link is on the product name, users will suppose that the link is about the product but it is not.

If the purpose is to show similar products, the link should be on a "smiliar-product information" like the number of these.

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

Answer 2

I've done this a lot in the past few months, and the best solution would be to just change the color of the link to blue (link color but not underline), change the mouse cursor on hover + highlight the cell. (bottom line in the picture).

The idea is to keep the table light and make actions look like buttons more than links, links usually have external actions. (You can also add count indicators or a small corner mark which will trigger a tooltip)

Answer 3

Indications of clickability can be given by adding an unobtrusive 3D effect, for example as a button. For example, overlaying a transparent image on the clickable area, such as this,

shouldn't take up too much room in your cell. If the cell is small you could overlay the whole cell, otherwise you could just put the overlay on top of a portion of it, e.g. the title of an item to purchase.

If you don't want the effect of seeing at a glance everything that is/isn't clickable, then the overlay could be displayed on a mouseover effect.

Answer 4

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

Here is 3 different solutions

• First replace the editable field by combo box or button inside the grid. It works well but it looks better if only a few field are editable. Every row with a combo seems overkill
  
• Second use the same technique only on mouse over, it can solve some performance/readability issue but it dont give you the hint on first sight which is editable.
  
• Third you grayed out the non editable row/col and let the editable row clear/bright. It's not the most beautiful, so you maybe need to work a lot on that, but it's very effective.

Answer 5

I think you could try the following ideas. The point is to use familiar and explicit controls for interaction. The responsive areas are also rather large for the touch interactions.

---

Also using different color backgrounds (and angle types #2 vs #3, too) creates too much distinct visual elements, which looks a bit noisy. Try to minimize visual noise in data-intensive interface.

Answer 6

Make it look like a button through 3d effect or use shadow effect in cell. That way it'll look like a button.

Answer 7

• Removed design critique...

My first recommendation would be to add quick preview to each cell (you have probably seen product preview features on catalog pages in some e-commerce websites. On mouse over or click (mobile and tablet) you could overlay that cell with a larger block which would contain more detailed information of the product (including a link to see "X similar items").

Second option is to do the same interaction (on hover and click) but do cell animation similar to what you see on (http://www.neweggflash.com/ scroll where you see 4 products per row and when you mouse over the content changes). At that point you can place your "X similar products" link in the "on hover state". The way I would split up the information is as follows:

1. State Regular (A)
   • Product name
   • some visual queue (for example: "+more" link)
   • Price
2. State Hover (B) - when no similar products found
   • Product Name
   • "Buy" button
   • Price
3. State Hover (C) - when similar products are found
   • "X similar items" link
   • "Buy button"
   • Price