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.

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

share|improve this question
    
What is the content of the cell? –  Alexey Kolchenko Nov 28 '13 at 10:10
    
It's just a product name with a price. –  Urbycoz Nov 28 '13 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. –  Alexey Kolchenko Nov 28 '13 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 '13 at 10:55

7 Answers 7

up vote 1 down vote accepted

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

share|improve this answer
    
What if there are several similar products? Would there be multiple numbers. –  Urbycoz Nov 28 '13 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 '13 at 10:38
    
Oh I see. The link shows the number of similar products. Oooh this is getting an upvote. –  Urbycoz Nov 28 '13 at 10:40
1  
Sorry, but I think that this solution will confuse the users into think that the number stands for products available. –  Tony Bolero Nov 29 '13 at 20:22

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

share|improve this answer
    
The 1st example (1st line) was for edit, and sorry for mixing it up, but I'm a little bit tired. –  Ciprian Pălici Nov 28 '13 at 10:54

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.

share|improve this answer

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.
share|improve this answer
    
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 '13 at 10:39
    
Yes my answer is wrong, it's more for editable than clickable –  ColdCat Nov 28 '13 at 10:50
    
There is some overlap though. Thanks for the suggestions. –  Urbycoz Nov 28 '13 at 10:57

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

share|improve this answer

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

share|improve this answer
  • 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

share|improve this answer
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 '13 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? –  Igor K Nov 28 '13 at 18:02

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.