A user can manage relations for an object within a modal window, which lists every other object as rows in a table.

Relation direction toggles

For each of these, a user can toggle the relationship status by clicking the appropriate arrow icon. When I say 'appropriate', the direction of the arrow marks the direction of the relationship.

For example, object A can relate to object B, vice versa, both or neither.

Arrow toggles in the table heading apply a select all/none to the corresponding column.

My question is, does this technique seem intuitive? And does anyone have any suggestions for improving, or have seen this done similarly before and could point me a demo? All feedback welcome.

  • What kind of relationship between objects? Is there one object and list of related to it objects? Please be more specific... I think you overcomplicate things. Jul 5 '11 at 5:30
  • "Is there one object and list of related to it objects?" Pretty much, but it certainly doesn't have to be constrained to this. It's more of an API to establish relations, which can then be manipulated and queried for various purposes. "I think you overcomplicate things" What should I change or re-think? Jul 5 '11 at 11:15
  • 1
    Where do you have an explanation what does these arrows mean? The main problem here is that we don't see the title of column with arrows, so we don't know what do they mean. But I still don't understand the nature of this app... and for a what these relations are done. Jul 5 '11 at 12:19
  • "Where do you have an explanation what does these arrows mean" That was what I was asking - having invoked a modal window from something like "Manage Relations for X", is it clear enough about what the arrows represent? Jul 5 '11 at 13:29
  • I think Dmitry has a good point here. I don't understand what Object A relates to Object B means because of the generic way you've described it. It sounds like a database relation, but without context it's hard to come up with an intuitive solution.
    – ghoppe
    Jul 6 '11 at 1:26

Sticking with the same data structure that you have, how about re-instating a vertical relationship between each item and the title item as in the pic below.

The top up and down arrows have the same global setting for the column. The first column of check boxes (which is essentially all your arrows are) indicates title has a relationship with the item. The second column of check boxes indicates that the item has a relationship to the title. Plus users are familiar with check boxes and so they have more affordance than your arrows which do not say 'click on me'.

enter image description here

  • Liking this very much :) Agreed with the checkboxes - the arrows are simply placeholders that map to hidden ones with JavaScript ( for which the handlers are a bit of a mess, so it'd be nice to KISS and go back to basics ). Jul 5 '11 at 13:24
  • And to boot, I'd probably add row highlighting for each state; related to, related from and related both ways. Jul 5 '11 at 13:30

In your proposed solution the arrows pointing right clearly indicate the objects they belong with, but the arrows to the left point at nothing.

As you describe it the possible values are "A to B", "B to A", "both", "neither". It's the relationship as a whole that you describe here, and I expect that to be congruent with your user's mental model as well. Two separate buttons indicate two separate choices: a boolean for incoming and another one for outgoing. In case you have enough space, why not tie the arrows together and show object A as well? Something like this (clicking on an arrow half will toggle that part):

object relationships

  • Thanks for the feedback @Marielle, but this seems awful similar to what @usercoffee suggested. I completely see where you're coming from with the 'merged' arrow solution, but I'm still leaning on @Roger's suggestion. I'll post back with an update on where I'm now at :) Jul 6 '11 at 14:16
  • Yes, I see the similiraties with what usercoffee came up with, the interaction is precisely the same. My main point is in the lines connecting the different objects, staying close to visual conventions from directed graphs.
    – Marielle
    Jul 6 '11 at 14:34

I guess that the main object's name is the "Title" of the table.

In my opinion, since you are using right/left arrows, the object, its name or a symbol of it should be placed on the left of the table. In this way, "Title" should be replace by "All" to fit with the "select all/none" feature.

Something like this :

enter image description here

  • Appreciate the feedback. Whilst I like the idea of the object on the left, screen real-estate is precious, and the table is much wider than the screenshot. I think it's clear to the user which object they're operating on, given the previous action required to invoke the window. Also using 'All' in the heading could be misleading, as it describes the column beneath it. For example, there's also 'Date', 'Author' etc. Jul 5 '11 at 11:10

I think you have to add small infopanel on top of the table, but with ability to close it.
I disagree with Roger that it's better to use checkboxes instead of arrows. Arrows explain themselves what do they mean inline. Maybe adding hover effect to them will give them more "clickability".

enter image description here

  • I like the idea, but I was aiming to devoid the need for a reference chart. It should be clear what they imply already - if that's not the case, I need to re-evaluate the current UI. Jul 5 '11 at 15:16

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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