I'm working on some test infrastructure stuff in my company and developing a web front-end meant for comparing the results of different UI tests (automatic ones running in the background mostly).

These test results come with a huge amount of information (most of it text of wildly varying lenths) including the software version they were performed on, the test suite chosen, the specs of the machine the test was performed on, the date the test was performed (the list goes on).

The web frontend is supposed to allow the user to filter from a select number of the bits of information provided with each test as well as by date ranges, finally displaying the resulting tests in some form and allowing the user to select from them from INSIDE that table like so:

enter image description here

While testing, I very quickly realized that a scrollable table wasnt the right way to display this data. There was too much information to parse and it was condensed too much into one element of the UI, which made individual tests hard to differentiate. Lots of text on one row, and varying length of the text was the main problem in that. It was hard to parse the information and select the tests even when using all search paramaters (there were simply too many results).

I wasn't able to fix the issue by simply adding a layer of nice css to the table and am now a bit stumped on how to replace the table. Displaying search results as tiles with borders to easily tell them apart is one thing I'm thinking about, or increasing the number of search parameters, but I'm unsure.

Has anyone got any wisdom to share on displaying large amounts of data as search results while keeping the data easy to differentiate and select from?

1 Answer 1


When you have an overabundance of data you first have to determine what data is useful for the user and which is not. The data that is useful should then be structured in hierarchy of importance. So in your case, it sounds like this data is being viewed in a "Search Results" format. To solve this problem you can potentially follow this visual formatting for your results...

Search Results Title
Version: 1.2 | OS: Windows XP | Test Date: 01/01/2020     View More...

I would show what is the most pertinent information that the user needs to see, with the less important data hidden but easily accessed and expanded when clicking on "View More". Accordions provide a great way to easily tackle this issue when you have lots of data to display but want to keep your users from experiencing "analysis paralysis" when engaging with your UI. Hope this helps.

  • Combining Ryan's Answer, above, and your own schematic, above that, what results do you really want to see? Apr 12, 2023 at 23:36

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.