5

We have a UI on a web-page, where relationships between users can be defined by admins. Users are divided to two roles, in this case "Lorem" and "Lorem ipsum".

enter image description here

enter image description here

Right now a relationship between two users can be chosen from 3 options: - no relation - with notif - without notif

Our current solution was designed for maximum 25 users, the "Lorem"-group users are displayed in the first column, while the "Lorem ipsum"-group users are displayed in the first row.

The specific intersecting cell displays the current relationship between the relevant 2 users.

When the mouse is hovered over a cell, a dialog appears displaying the 2 users, and their current relationship-type, and also the possibility to change this type.

My problems/questions:

As you can see, for 25 users this is getting to be hard to overview. We also have a request to allow more users (let's assume 50 or even more!), so displaying 50 or more columns will be really hard to handle via this UI.

This is the same, if there were 50 rows, and the admin wants to define relationship of the user in the last row, she wouldn't be able to see the header of the table (in this case the users from the other, "lorem ipsum" group), because she would be scrolled down!

The main idea behind this concept was to be fast, simple, and easy to overview the whole relationship-matrix.

Any advices to handle much more users?

Improve this question
2
  • 1
    Is there any reason why you need to be able to see all the connections at once?
    – fredley
    Apr 12, 2012 at 9:45
  • The reason behind this was to be quite simple, to require as less user interaction as possible and to provide easy overview. These requirements might change due to the fact that higher number of users have to be supported.
    – Csabi
    Apr 12, 2012 at 11:35

3 Answers 3

Reset to default
2

I like the question. Handling unlimited numbers of relationships between objects can be approached in many ways.

Overview versus Edit view

The main idea behind this concept was to be fast, simple, and easy to overview the whole relationship-matrix.

You are realizing that an Overview is not always the best place to Edit.

There are many ways to make large lists of relations work friendly:

  • Consider keeping the grid as an overview only,
  • Create a drilldown view or inspector view for each user that focuses on giving an overview of a users relations, as a complement to the giant grid that gives an overview for everything.
  • A filter or search box,
  • Favourites or Recents,
  • For a long list where headers disappear, why not make the header static so that it does not scroll out of scope.

If you keep the overview editable, remember that as n grows in your n*n grid, the more you have to do to make it work friendly.

Good luck and please feel free to post the results later on :)

Improve this answer
2
  • Thx JOG for the answer, I'm gonna google for drilldown-view and inspector-view terms :) The 'static header' is not enough, a 'static first-column' would be required also, and I'm not sure whether it's possible to do that with a web/html frontend... similar how Excel works (displays rownumbers and column-headers always)...
    – Csabi
    Apr 12, 2012 at 11:41
  • With "drilldown" or "inspector" I just meant some other view that focuses on only one object/user.
    – JOG
    Apr 12, 2012 at 12:16
2

With a 50x50 grid, ensuring you are accessing the correct relationship as you select a cell is a tedious and error prone activity. The actual edit process is fine; it is your UI for the relationships that needs to be modified.

In almost all cases, relationships are a sparse mapping... 90% or more of that grid will be blank, because most people have no significant relationship with each other. Because of this, a better user interface would focus on one individual at a time, and list the relationships relevant to that user.

enter image description here

I did not do this in the image above, but each of the items listed (including the User 1 cell at the top) would be a combo box, where you can type the name or the role, and it will find the correct match from the list, or click a drop down arrow to select the choice from a list instead.

Additional relationships would be created by adding rows to the list, one for each person that the top name has a relationship with.

In this example, if you chose User 4 at the top, then User 1 would be listed below with a relationship of Lorem Ipsum

You may choose to have an interface such as you indicate in the question, but I believe that interface is best used for scanning the relationships rather than actually modifying them.

Improve this answer
0

As others have mentioned the matrix does satisfy your goal of making it simple to view the relationships at a glance. For editing relationships you probably want to provide a dialog that lets you focus on one user and his relationships at a time

Improve this answer

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.