I have inherited a code base that needs some UX love. One of the worst offenders is a matrix of toggle buttons with several hundred rows and columns. Although there is some basic filtering available to limit the elements, the filters are predefined.
I'm looking for some ideas to improve the experience of toggling the state at intersecting dimensions. In the perfect world I can expose the intersections through a completely different presentation. Whatever the presentation is it needs to require a minimal amount of interaction to drill down and set desired state.
My apologies if I wasn't clear, let me try to illustrate. Imagine a huge table on a page where every cell within the table contains a single button to toggle state on/off. There are 418 rows and 153 columns in this table; that's just shy of 64K buttons in the table! It looks something like this (the ellipses indicate the elements continue in both directions):
The labels presented here are an example only. The actual view contains Region names for the X axis and Regional Member Names on the Y axis. The matrix is used internally to enable/disable fees for specific members of a region. Users of the system are notified by regional managers through phone or email when a member needs to have the fee turned on/off.
A B C D E F G H I J ... 1 [x] [ ] [x] [ ] [ ] [ ] [x] [ ] [x] [ ] 2 [ ] [x] [ ] [ ] [ ] [ ] [ ] [ ] [ ] [ ] 3 [ ] [ ] [ ] [x] [ ] [ ] [x] [ ] [ ] [x] 4 [x] [ ] [ ] [ ] [ ] [x] [ ] [ ] [ ] [ ] 5 [ ] [ ] [ ] [x] [ ] [ ] [ ] [x] [ ] [x] 6 [ ] [x] [ ] [ ] [ ] [ ] [ ] [ ] [ ] [ ] 6 [ ] [ ] [ ] [ ] [ ] [x] [ ] [ ] [ ] [ ] 8 [x] [ ] [ ] [ ] [ ] [ ] [ ] [ ] [x] [ ] 9 [ ] [ ] [x] [ ] [ ] [ ] [ ] [ ] [ ] [ ] 10 [ ] [x] [ ] [ ] [ ] [ ] [x] [ ] [ ] [ ] . . .
The number of regions and members are expected to grow over time. Although there is an upper limit on the growth, we're not certain yet what that limit is. For perspective, the total number of contexts has grown by 3000% in the past year. My best guess is it may double over the next 12 months but then should stay steady.
The requirement is to be able to toggle state at any given intersection, so A1 is on, E4 is off, etc.
The specific problem is that the page is completely unusable for reasons obvious enough that it seems uneccessary to elaborate more on. Suffice it to say the horizontal and vertical scrolling required to pinpoint a specific intersection is disorienting at best; not to mention the performance implications of rendering that much content.
I am interested in gaining some insight on how some UX professionals and/or designers may go about improving this usablity of this page with the requirment of having to be able to toggle state on one or more of the 64K contexts. I'm just looking for some general feedback. Perhaps someone knows of a useful widget or UI pattern for this kind of workflow or has some general advice based on their experiences dealing with a similar feature?