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?

  • 1
    This is a very broad question especially without any visual elements. Could you provide some screenshots and questions related to specific concerns.
    – Mayo
    Oct 15, 2015 at 17:19
  • Thanks for updating your question. I'm afraid we still need more info. One of the rule of thumbs for UX is grouping related info together. You're showing a grid example using A-Z/1-10 coordinate system. Is this coordinate system in fact meaningful for the user? E.g. These are coordinates on a map. The toggle controls lights at every intersection. Otherwise we need to see example content to help answer the question.
    – nightning
    Oct 15, 2015 at 19:20
  • Why do your users want to toggle intersections? What is their task? How do they think about the task? What other representations have you tried? Oct 15, 2015 at 19:21
  • Unless you provide more details on what kind of state one should be expected to manage in this UI and what the grid actually does it is possible that no one who didn't have this problem before will be able to give any kind of hint or tip on how to improve the current situation as it is really hard to figure out a way to improve something you do not understand the reasons and objectives to justify it's existence.
    – tucaz
    Oct 15, 2015 at 19:24
  • @nightning - sorry for the simple example, I put together on the train from phone, the labels I chose were for simplification only. Users actually see region names at the top and names of the regional members on the left. Currently there is an implied grouping by regional members, they're not actually grouped in the layout though, so you can imagine rows 1, 5 and 9 all belonging to the same region. The predefined filters I mentioned in my original post at least let you filter by region members.
    – kdavie
    Oct 15, 2015 at 19:34

1 Answer 1


You want to be organizing the info in the way that your users think about the problem.

The 2 cases below are examples to illustrate how user perception can affect the layout.

Case 1 - Most members only subscribe to 1 Region. Each Regional Manager strictly manages everything related to their specific region.

  • This representation assumes the Region is the easiest way for the Staff User to identify the Member.


download bmml source – Wireframes created with Balsamiq Mockups

Case 2 - Members often freely subscribe to more than 1 Main Region. Managers manages everything for their individual group of Members across Regions.

  • This representation assumes the Manager is the easiest way to identify a Member


download bmml source

  • Thanks for the detailed answer and the mockups! I like the approach you outlined in case 2. Following this guideline I can make the Manager name a free-text filter and can also include a free-text region filter. This will allow our users to specify either a manager or region (or both for extra granularity). The initial view can just hold the empty input boxes for the filters and some placeholder text where the table will eventually render post-filter. I think this will work :)
    – kdavie
    Oct 15, 2015 at 22:40

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.