6

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.

enter image description here

4
  • What is the content of the cell? Nov 28, 2013 at 10:10
  • It's just a product name with a price.
    – Urbycoz
    Nov 28, 2013 at 10:30
  • So do you want clicking on a product will open similar products? It's rather confusing action which breaks user's mental model. Probably screenshot could bring more clearance to the question. Nov 28, 2013 at 10:39
  • Yes I agree- it's not ideal. Needless to say the design has been influenced significantly by industry politics. I'll put a screenshot together.
    – Urbycoz
    Nov 28, 2013 at 10:55

7 Answers 7

2

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.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

4
  • What if there are several similar products? Would there be multiple numbers.
    – Urbycoz
    Nov 28, 2013 at 10:29
  • I am not sure to understand your question. The number will increase according to the number of similar products
    – Renaud
    Nov 28, 2013 at 10:38
  • Oh I see. The link shows the number of similar products. Oooh this is getting an upvote.
    – Urbycoz
    Nov 28, 2013 at 10:40
  • 1
    Sorry, but I think that this solution will confuse the users into think that the number stands for products available. Nov 29, 2013 at 20:22
3

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)

Link in a product table

2
  • The 1st example (1st line) was for edit, and sorry for mixing it up, but I'm a little bit tired. Nov 28, 2013 at 10:54
  • Very nice idea. Jan 30, 2017 at 22:36
0

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,

transparent button shape

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.

0

mockup

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.
3
  • Can't use second technique, because the user might be using a touch-screen device. Third technique doesn't seem right because it involves greying-out potentially important products, simply because they have no similar products. First technique might work though.
    – Urbycoz
    Nov 28, 2013 at 10:39
  • Yes my answer is wrong, it's more for editable than clickable
    – ColdCat
    Nov 28, 2013 at 10:50
  • There is some overlap though. Thanks for the suggestions.
    – Urbycoz
    Nov 28, 2013 at 10:57
0

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.
enter image description here


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.
enter image description here

0

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

0
  • 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

second option example

2
  • 1
    You've not really provided a useful answer here, you've just critiqued the existing design. OP as asking how to show a cell is clickable. The only part of your answer that deals with this is saying that a preview displays on hover. Well how would the user know they can hover over it? That is the hub of the question, and you seem to have focused on the existing design issues and not the problem at hand.
    – JonW
    Nov 28, 2013 at 16:19
  • "Well how would the user know they can hover over it?" In this use case we are talking about desktop experience. That cell has action to "buy". Row by itself looks like it can be interacted with given that button. Would you disagree?
    – Igorek
    Nov 28, 2013 at 18:02

Your Answer

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

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