15

Given a dialog with two grid-style tables, what's the best approach to visually showing that the selected row of the left table is what populates the right table? The best I can think of is an arrow between the tables, but the problem that is the divider between the tables is drag-able (tables re-size to fill the space they're given), so I feel like an arrow says "drag this way" or "collapse this side."

I've considered an arrow that always stays next to the selected row, but typically there will be many more rows than are visible, and it seems like calculating the placement of the arrow could be a bit of a pain.

Is there an obvious solution anyone else sees, or should I bite the bullet and go with the arrow?

Improve this question

7 Answers 7

Reset to default
15

You don't need the arrow, you can just play with colors, like follows (this is just a proof of concept, you can change the gray colors with whatever colors you like that matches your theme):

enter image description here

Another simpler way:

enter image description here

Improve this answer
1
  • Your second example is what I had in mind when I said use a caret as an indicator in my response.
    – Michael Brown
    Commented Mar 23, 2012 at 13:35
6

Windows Explorer and Macintosh Finder use this sort of pattern since years and its well established. So it might be a good way to use this as well.

A small arrow indicates further content at OSX. Last row on right is a detail view of properties of last marked item or if its a folder, you see content of this folder.

At Windows 7 detail view is at bottom and on right side is a preview of a selected image. Notice how windows has a active selection (middle row/ dark blue) and a inactive selection (left row/ in middle at item "Bilder"). Thus you always know to which your detail view is related.

I think the mental trick is the scrollbar. And a blank second row at beginning. The scrollbar makes every row an own entity, where a click on a item let switch the content of next row on right. This shows you a dependence.

enter image description here

source http://www.ovalnets.de/

enter image description here

source: http://www.tippscout.de

Improve this answer
1
5

Highlight the row and the right side table in the same color.

table selecting table

The arrow that stays right next to the row that is selected, that you describe, would also work, although it is a little less obvious than these graphical examples you get in several answers here.

For the dragable divider: I would use the area in between the tables here for changing the cursor or displaying a dragable "handle" in that area, on mouseover.

Edit: If you already use a certain color or frame for selections around the gui, which you should, then try to make this kind of a selection into an extension of that selection model. For example, if selecting a button adds a green frame to it, then in my sketch here the blue row would not only turn blue but also get that green frame. That way the items to the right can also get a green frame when selected. Vice versa, if your gui items turn blue when selected, then mark the table relations with a the frame.

Improve this answer
2
  • but taking same color as a selected item on left could be misleading in a way, that a user thinks all right items are selected. What color would indicate a selection on right table?
    – FrankL
    Commented Mar 22, 2012 at 19:23
  • Yes, you are right. The answer to that is not a color, but a design of applying the color in borders, shades, gradients and so on. I am adding something about that in my answer.
    – JOG
    Commented Mar 22, 2012 at 20:43
3

Whether an arrow or not, I think you're going to have to bite the bullet and use some sort of visual indicator of the linkage. This is easier if the tables can scroll independently of one another, so you can always keep the "parent" item on the screen.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

Can you give us more details about the application? Maybe there's a better solution than a two-table setup.

Edit: Given what you explained about use case, I reiterate that a two-table view might not be the most appropriate. Take a look at 'Contacts' on iPad and OS X Lion -- it's a two-pane set-up, with a list view on the left and a linked pane on the right with all the details about that selection on the list view (although, personally, I think the link between the left and the right could be made clearer):

iOS Contacts App

The most important thing is to test the interface (or prototypes of it) with actual users. Especially if this is an app that users will interact with on a daily or hourly basis, there are going to be strong opinions about the usability & 'ergonomics' of the application.

Improve this answer
2
  • I'm not opposed to visual indicators, I'm just looking for something that will be clear and obvious. As for the table->table approach, I can't think of many other ways to do it. It's slightly more complicated than this, but the easiest way to think of the program is an HR assistant application - the left table is a list of individuals, and the right table is a list of documents pertaining to that individual (which all show the date of creation, name, document status, type, etc.) Expected that each user will track lots of individuals with lots of documents each.
    – trycatch
    Commented Mar 22, 2012 at 18:55
  • @trycatch Just updated my answer with more thoughts.
    – Daniel Newman
    Commented Mar 22, 2012 at 21:42
2

You have the second grid appears as a pop-up with a nice animation inside the same form while bluring the first one on the background.

Improve this answer
2

Here is an approach that I used for showing a preview of search results.

enter image description here

The advantage of this method is that this scales well with which ever result value is selected and is clean as well

Improve this answer
1
  • this is exactly the same as my suggestion
    – Mohammed A. Fadil
    Commented Mar 24, 2012 at 8:34
0

I'm not a big fan of grids to begin with. I think they get abused and truth be told, you can usually provide more information density by using a formatted list. That being said, either way I would use some kind of caret indicator along with placement to show that what you're seeing over here is related to what you selected over there.

Improve this answer
1
  • 1
    You know I just love it when people perform a "drive-by criticism" of an answer. Perhaps I could address concerns and make a better answer if you bothered to comment on why you felt so negatively about my answer as to vote it down.
    – Michael Brown
    Commented Mar 24, 2012 at 20:59

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.