General UI design question

WEB TMS WEB Core
1

I've got a general UI design question and I'd love to hear some different ideas. I'm curious how others might have addressed it -- especially if you've SEEN something that might work nicely. It's not specific to WEB Core, but I'd probably build it with WEB Core.

Just for context, I went through and made a list of everything I could find that could be called a "Podcast Mixer" and made a list of all of the features I found. There are about 20 such products and I threw in a few that don't quite qualify but are worth comparing (eg., a regular mixer, a couple of similar things that don't quite fit, etc.) for a total of 25.

The list of features I identified came to around 100 in four main categories with several sub-categories in each one. A TreeView would work to view individual devices.

But I'd like a way for someone to compare multiple devices side-by-side. Amazon has displays like this, but i tend to find them to be mostly useless -- like how much the device weighs and its physical dimensions, without a word about any of its technical specs.

Here, I'm looking at things like: what the A2D conversion options are -- bit size (16, 24, 32), frequencies (44.1, 48, 88.2, 96, 192); dynamic range (92 ... 114 dB); preamp gain levels per channel; number of channels; etc.

Vendors want to emphasize certain features and ignore others to make theirs stand out from their competitors, and they always show a subset of features in their comparison charts that make their look clearly better than their competitors.

What I'm wondering is this: what's the best way to make data like this useful for visitors to use?

The obvious thing is a big grid set up to work like a multi-column TreeView where you can expand and collapse rows of data while including or excluding different products.

With 25 products, I don't think it's helpful to simply put up a big grid with 100 (collapsible) rows and 25 columns (that can be individually hidden).

Does it make sense to start by selecting some key features and ranges you're looking for to give a starting point for models to compare? This is similar to what eBay does in a lot of their search pages now. Amazon does it much simpler. But they're both constantly throwing in irrelevant crap from "sponsors" that don't fit the selected criteria.

Have you seen large collections of data like this that are designed to compare multiple things that's better?

As an aside, what's the best way to set this up so it's easy to add or remove new devices? Would you prefer a bunch of JSON or CSV data in some .dat files? Or use some kind of database -- although a DB seems like overkill for this small amount of data, but it might make things easier if it uses a DB-aware grid or something similar.

2

Not ideal but maybe a way to generate ideas for you would be to look at how various diff tools work, like https://jsondiff.com/ where they present a list of something (JSON in this case) and highlight what is different, along with a cursor of some kind so you can see what is selected on one side and what it matches on the other. Most diff tools are an eyesore, to be sure, but the concept is there - lists that can be adjusted or filtered, and then showing a comparison. With a general treeview, syncing up the expand/collapse events in the same way might not be fun or any better in the UI/UX department. Having quick filters at the top for the main categories might work better so that you're never showing a tree that needs to be expanded or collapsed but rather just the subtree directly.

As for the data, I'm partial to JSON everywhere, particularly due to the nesting aspects you're considering in this context. There are JavaScript JSON editors you can integrate directly into your TMS WEB Core app as well which can be handy at times.

3

I keep getting things from TMS about their fancy new grid -- it seems to be getting half of their marketing bandwidth. Maybe it could help in this situation?