Need suggestion on simplifying a Checkbox Grid UI (shown in below image left side) as it is not scale-able due to number items count (Varies from 100 - 240).

I had plans to go with the two column approach (right side of the image), but the only problem here is that user need to select the individual item to view its connections. As per user feedback, the UI needs to have better of ease of use to easily check their connections.

Let me know, whether there are any alternate solution.

enter image description here

  • Are these rows and columns ordered in an obvious way? For instance, would a user know that the column they're looking for is near the beginning, versus near the end? I'm wondering if you could freeze the first row and first column and scroll the internal grid, similar to how Microsoft Excel handles this problem. May 22, 2018 at 17:43
  • Yes, They will be in order as shown in the figure. What I am trying to solve is ease of use and real estate used... even if we freeze the column, the user needs to scroll all the way vertically/horizontally. May 23, 2018 at 3:27
  • Do the columns or rows represent items that can be grouped in certain ways? Are there qualities that these column or row objects have that the user could filter on to reduce their view to a more manageable size? For example, if your grid represented which airports have flights to which other airports, that would be a huge amount of checkboxes. However, if you allowed the user to just view North American airports to European airports, then that would be a much more manageable size. May 23, 2018 at 13:43
  • are you users happy with displaying connections in the original table format?
    – Xinchao
    May 23, 2018 at 17:28
  • @Xinchao Yes, they feel that is more easy to use. And we are retaining the old design itself Jun 28, 2018 at 8:24

2 Answers 2


From the info you have provided, I have done a simple wireframe.

But this is on the condition that your users know what they are looking for. So they can just pick the items that they need to see and compare.

The upper example will allow users to see all relations of A with others (including null ones). The lower example will exclude the null ones.

Really depends on the nature of the UI you are actually doing...

enter image description here


Take a look at graph as visualization for your task. I used such technology in several projects and it worked well.

As an example see this link to sample graph. You can manipulate it say to filter single element from your items or items group, or implement search, etc. Also it's scaling well.

  • To view it is fine, but User also needs to perform action. Jun 28, 2018 at 8:26
  • @symbiote_sam User can click at a node to access actions menu like location mark at a map. Or he can click on node or nodes to make selection and choose action from side actions menu.
    – Serg
    Jun 28, 2018 at 9:33

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.