Just yesterday I tried to find examples of good high information density UIs... and seems to be an impossible task.
Search engines are full to the brim with vague articles repeating each other's talking points, and exception being this blog post by Matthew Ström:
Search engines are full to the brim with vague articles repeating each other's talking points, and exception being this blog post by Matthew Ström: https://matthewstrom.com/writing/ui-density/
Image search is no better, with largely irrelevant results.
In the age when everything is spaced out and zoned out gray on gray, what are your go-to examples of UIs that pack a lot of info?
I didn't see anyone mention the McMaster-Carr website [1]. It may not be the "densest" out there, but it's clean, functional, and nicely presents a lot of information at once.
There is (was?) an absolutely fabulous answer on quora.com which detailed how this site came to be --- from memory:
- initial ecommerce site was a mess (basically a page-by-page recreation of the catalog?) which saw minimal usage
- the redesign, which focused on usability --- notably reduced cognitive load --- resulted in an immediate uptick in orders which grew markedly for a long while until it represented the vast majority of their business EDIT: and also optimized for repeat orders on a schedule
If someone could find that, or a better writeup, I'd be grateful (it's _not_ the Medium.com article) and this page: https://iacollaborative.com/work/mcmaster-carr/ is just a mentioning by the company which did the underpinnings, not the overall architect. This link is decent: https://www.bedelstein.com/post/mcmaster-carr
There was of course previous discussion of this here:
https://news.ycombinator.com/item?id=34000502
Video on why the site loads so fast:
https://www.youtube.com/watch?v=-Ln-8QM8KhQ
(which is from the Medium.com article)
I did some searching and I'm not sure the answer you remember exists. All I can find after a bunch of keyword + date-restricted searches in Google, Quora, & HN is Ibrahim Bashir (https://www.quora.com/Who-designed-UI-UX-and-developed-the-w...) who worked there 2003-2005 (https://www.quora.com/How-many-people-work-for-McMaster-Carr...) and who writes:
> McMaster-Carr has a Systems department which handles internal software development, including the website. I actually worked on a lot of the front-end functionality (among other things) during my tenure there and we had 1 person who was essentially the UX lead (I'm sure the team / function has expanded since then). > > The design philosophy for the website was heavily influence by Edward Tufte and myself and several folks from my engineering team were enrolled in his course to familiarize ourselves with key concepts. > > When I interviewed with McMaster-Carr I distinctly remember a Director who told me about building the first version of the website himself and not realizing it would become "a real thing" one day. I cannot for the life of me remember his name, but he was a sharp guy and I'm sure he's off doing great things. We walked into work one Monday morning, and his desk was empty and his whiteboard said "poof".
Given the timing and his description of what he did, it seems unlikely any other McMaster-Carr insider would have been writing about it, and this has to be what you are remembering, if anything.
(And https://iacollaborative.com/work/mcmaster-carr/ seems useless here.)
This suggests having your front-end and design staff take Tufte's trainings would not be a bad investment.
Absolutely agree --- they are _amazing_ sessions, and if you can't make it, the books are highly recommended:
Are the classes still offered? I was looking to take it a few years ago, but couldn't figure out how to sign up. It seems like only video lectures are available now.
Still seems worth it, just wondering
Good question.
Now that I think on it, I haven't seen an ad for them since before the pandemic, so I guess not (in person).
I guess it was inevitable given his age.
You still get all his books included in the price of taking the course: https://www.edwardtufte.com/online-course/
Tufte's books should be essential reading for UX designers.
That's it! Thanks!
I wonder how much additional traffic, links, seo benefit and general brand awareness this site has generated simply off doing things to this standard.
A fly wheel of benefits.
Actually, I'm pretty sure I've never seen a McMaster link in any search engine. Even if you google a direct McMaster part number, like "91251A449", McMaster will not be among the results. While the url to that product is just https://www.mcmaster.com/91251A449/
No idea if intentional or not, but the reason is this noindex directive:
<meta name="robots" content="noindex, noarchive, noimageindex" />
If you have a lot of product pages (millions) it can make sense to not have all of them indexed by a search engine. If you have pages that are more profitable and might hit more keywords than some very specific product SKU it makes sense to index these primarily.
"Black oxide screw" on the other hand appears.
Those numbers could be anywhere, on completely unrelated things. They are not a good search query.
Maybe, but I never seem to have trouble searching for even further incomprehensible part numbers on other items. Give me a DigiKey part number like "WM7610CT-ND" and google finds it first thing. Digikey is also the first result for the manufacturer part number "0533980671".
For my McMaster example, google gives 9 results, none of which are the McMaster site. That not specific enough? To be fair, I believe McMaster to be fairly protective of their catalog.
At least their part numbers are fairly recognizable - they are usually about 10 characters long, all numbers, with an "A" near the end. That's usually enough to get me to check the McMaster site first.
There's an interesting dynamic here: if McMaster part numbers are searchable on Google, people are going to use Google to search for McMaster part numbers, rather than the McMaster site itself. Which gives all its competitors a chance to bid on those long-tail keywords, or optimize for them.
On the other hand, if you train people that if you want to use McMaster part numbers, you have to use the McMaster site... once you have a customer, as long as your site and inventory don't frustrate them, you have a customer for life.
You're sacrificing inbound for retention, in a highly measurable and testable way, for your unique audience and/or subsets of that audience. I have no doubt this is by design.
This… is brilliant. Google and Facebook are highly lucrative because they designed a system where your profit margins (as a business) are largely sucked up by Google and Facebook by making you bid against your competitors at higher and higher values until someone is willing to give up almost all of their margins to be the top bidder for the favored “top spot”.
Hypothetically, if you make $1 in profit on your product, theory says that some competitor will bid up to $0.99 to secure that sale and if you don’t bid this amount also, your sales will suffer.
The end result is that Google and Facebook end up consuming all the profits for a large number of businesses online that have to survive by advertising, which explains Google’s immense profit margins.
Assuming what you say is true, this is truly a ballsy move by McMaster. Betting that their website is unassailable by their competition and thus such a value-add that they can forgo playing the losing game that Google and Facebook has setup is brilliant. I have such respect for that.
Great post very interesting thanks
I am not here to shill for Google, but I cannot believe that Google doesn't have a special arrangement with McMaster to index all of their part numbers! The advertising potential is very good. As a related point, I am almost sure they have special handling for programming searches to prefer StackOverflow over other sources. A few times, SO.com has made some incredibly tiny change to their webpages that made them virtually invisible to Google. After some internal email exchanges, SO.com was "fixed", and again, dominated Google programming searches. (Of course, this was 2010s... long before the AI slop era!)
Relevant: https://twitter.com/mcmasterdaily
If you don't care about SEO, Single-page Applications usually reach the same feeling? when the components are well designed, and clicking something just fetches the parameters for the components that are primarily loaded on the initial render. But usually the implementations are poor or there is additional bloat so we don't see them as fast.
I'm going to go against the crowd and say that I prefer DigiKey and Mouser's sites over McMaster. The filter/apply pattern they use when trying to narrow things down is a lot quicker than waiting for Mcmaster's auto updating window. Usually, when I'm looking for something, it's not for an exact specific item, but to know what options are even there in the first place. Selecting ranges of things in McMaster has always felt a little cumbersome, but Digikey has always had it right.
The other thing McMaster does that's kind of annoying, but also kind of funny, is that they go out of their way to purge the branding of the items they stock. Very understandable why they do that, but sometimes they do it when it doesn't make sense. Want to buy a generic "graphing calculator" for $126 which is definitely not a Texas Instruments TI-83 Plus? Here you go! [1]. Look, you're not fooling anybody here.
The calculator is an extreme example, but I've wondered in the past if the reason they scrub everything is so you can't take the manufacturer part number to buy elsewhere. McMaster is undoubtedly more expensive in many cases, but the service they offer is consolidating a million parts into one catalog with CAD drawings, specs, etc. Hiding branding prevents you from taking advantage of that without making a purchase.
I spoke to a McMaster web team member at a bar. They told me that the real reason there's usually no brand information is that they buy the same bolt (for example) from many different suppliers to guarantee availability.
They will only put a brand on a product (example: 3M DP420) when it truly comes from a single source and has special meaning/implications.
That said, I order tens of thousands of dollars of McMaster Carr items each year. They almost always come in packages from the OEM with OEM part numbers. So if I want more bolts like that, I just look at the box they were delivered in. The info is just not on the web interface.
It's pretty much the same business model invented by the Sears Roebuck Catalog. For many years everything was pretty much unbranded, then they created "White Label brands" like Craftsman (and a few others) which grew to become standalone consumer brands which have outlived the parent.
I think everything McMaster dates to it being a physical book first. They still operate on that same business model, but we have the internet now. The supplied product might change, but it still meets whatever specification is in the catalog that is released yearly. If they could guarantee a TI-83 Plus was what you were going to get they would have put it in the catalog, but they couldn't so they don't. And they STILL operate out of that physical book for some customers, so the website has to match it too. That's my take.
Oh yeah, the books are impressive in their own right. However many items you think they sell looking at the website, the book reveals you were a couple orders of magnitudes off. 1000+ bible-thin pages of well laid out tables and product photos. It's pretty much what the website would look without any filtering of the items.
The books are fun to leaf through on occasion, or if you need to take up an extra 3 inches on your bookshelf with something yellow. If you have one, it makes you feel like a real engineer. But I greatly prefer the website.
The old grainger catalogs were like that. Uline is similar but not even 1/4 the number of products.
I kind of like how they genericize everything. It reduces the cognitive load of making decisions, and presents all of the options in the most uniform way, based on their hard specs, and not marketing BS.
It's ok most of the time, but it's not like they sell McMaster branded stuff in McMaster packaging. They are a supplier, and might want to obfuscate to keep you from buying direct from the actual manufacturers.
On the other hand, on my desk right now is a bag of springs, the info printed on it says it was made by WB Jones, part number 4011. We ordered it from McMaster. Why not? They stock the item and ship super quick. If I want another bag of the same springs, it's not like I can go to McMaster, type in "springs 4011" and expect to find it. Instead, I'll have to search up purchasing requests I've made, maybe ask a coworker if they ordered them, etc. to find the mcmaster number again. If I didn't know Mcmaster sold it to us, I'd have no idea they sold it at all.
To be fair, if they sell things that are interchangeable, like screws, it would be a lot to list every manufacturer they use. They have 5 locations, and probably stock from a different manufacturer or multiple manufacturers at each one.
Buying from McMaster is like ordering mil spec part numbers. You don't really care who makes it or what vendor-specific p/n they give it, you just want the part built to spec for the cheapest price and soonest delivery date.
What you're looking for is rockauto.com but for your industry.
In my opinion it is superior to McMaster
Well, on McMaster you don’t really need to know the brand because they only have good stuff that meets spec.
On RockAuto, watch out, because they stock some hot garbage.
IMO digikey has a better search than McMaster, but McMaster has a much better interface for filtering categories to find what you want.
McMaster serves a different market than Digikey/Mouser...
It’s one of the first examples in the link the OP shared. It’s a high quality post!
And there's something utilitarian in its internal and external design. No flashy, no fancy.. 99% informational and low lag.
The low lag part is especially impressive. Here is Wes Bos taking a deeper dive into the intricacies of technologies used to accomplish this: https://www.youtube.com/watch?v=-Ln-8QM8KhQ
I've always assumed that making a fast and responsive website isn't a technical problem, but a social/political one.
It's easy to create a website where interactions simply fetch the necessary resources and update the DOM as required. But managers then insist on adding 20 trackers so every little click and interaction gets logged somewhere for analytics.
Or are frameworks REALLY that slow?
> Or are frameworks REALLY that slow?
Of course they are. There's a significant overhead from a virtual DOM and reconciliation with the real DOM. Then there's the larger overhead from relying on JavaScript for everything. The JS VM in modern browsers is very performant, but it can't optimize poorly written code, whether that's from frameworks, the gazillion libraries modern web sites depend on for analytics, trackers, ads, shims, helpers, etc., and, of course, any custom JS specifically written for the web site.
Browsers can enable very rich and responsive interfaces, but web development is bogged down by the insane state of popular frontend stacks. There's a recent trend of rejecting this insanity (htmx, Nue, Datastar), which I hope gets us on a track where we optimize for user experience using native web technologies.
I remember people digging into this because it used good sense over vanilla js instead of complicated stack.
tl;dw - ASP.net, image sprites, yui, jquery, preloading, and caching
the also use asp.net
Similarly good, but small mechanical component specific: https://shop.sdp-si.com/
I have written a couple internal parts databases and this was my starting point as far as design/UI/UX.
I love McMaster but the multi-tab experience could really be better. Search filters don't carry through opening a link in a new tab (try searching M3 screw then ctrl-click socket head screws). Sometimes ctrl-clicking product numbers/product detail doesn't work at all. IIRC the back button sometimes breaks too. Pretty annoying since 80% of the time I'm researching the best component and want to backtrack easily.
Part of its pleasure is the way it reduces an intrinsically dense catalog of parts to such a consistent and sensibly-structured interface.
Even though it’s never failed to connect me with precisely the part I’m seeking, to this day their interface spooks me a little: where are they hiding the endless walls of text and part numbers, the kaleidoscopic wall of bins?!
Absolutely! Every time I see it mentioned, I end up browsing it just marveling what a nice job they did. It's laid well very well, has just the right information, it's lightning fast, I like the color scheme.
If there is a UI design award somewhere, they should definitely get it.
of of course, RockAuto.com
one of the most unconventional websites ever for sure
Very ext.js looking.
RS is similar though was better in the past
example: https://uk.rs-online.com/web/c/?searchTerm=zync+7010
There is a project that implements the site in Next.js https://github.com/ethanniser/NextFaster
Wow that’s beautiful. The grayscale works surprisingly well with high fidelity. Thanks for sharing
It’s one of the most purest Web adaptations of an existing product catalog I think there is.
This was absolutely amazing to navigate on mobile! Very fast. Instant response. Loved it.
And here is a knock-off of the McMaster Carr UI built with Next.js:
This is incredible. Almost feels like another world.
I particularly enjoy Rock Auto’s website as well.
Absolutely no BS. It dumps you right onto the list of car makes.
Look for tracing/profiling/binary analysis UIs:
- https://superuser.com/questions/1117466/using-windows-perfor...
- https://github.com/wolfpld/tracy
- https://github.com/WerWolv/ImHex
3D modeling / CAD software:
- Blender/Rhino etc
- Similar for audio you can search for 'DAWs' (https://blog.landr.com/best-daw/)
Many examples on https://x.com/usgraphics/media only some software.
Not on the data side but can be useful just for contrast from todays software:
Agree on DAWs. Even though I'm familiar with the general concepts, every time I try out a new one (Logic, Reaper, Ableton), it's quite overwhelming at first. You have a pretty good idea about what's supposed to be there, but the sheer amount of knobs and buttons... But once you get in the flow, you quickly find out it has all the information you need, nothing more nothing less, it becomes second nature.
(Notable omission: GarbageBand. It has the opposite effect, it instantly puts you into action, but becomes more frustrating the more you use it.)
Ardour has really good default settings.
Another, maybe forgotten one is Wavosaur on Windows [1]. Great modularity, one can quickly remove cruft that's not needed, or add a lot of data on waveforms when necessary. I admit being a fan of the Classic Windows era UIs, though. :)
A third, also forgotten one from the Win2k/9x GUI era is maybe Waveshop [2], also a great example of keeping things simple.
Funny thing: I used Reaper for years (occasional pro-level radio production), then had to switch to Pro Tools because of studio demands. Afterwards tried going with Reaper again, but got really overwhelmed with all those endless possibilities for customization. So... I ended up using Ardour, which was easiest to grasp from day one. Really well thought out and polished GUI. Possibly a great example of why it makes sense to have a subscription/payment based, non-free open source project.
Oh, and Audacity up to version 1.26 was also great. After 2.x, it started to add bloat IMO. I remember Eric S. Raymond highlighted it as a great example of modular, unix-y design in "The Art of Unix Programming" [3].
2: https://victimofleisure.github.io/WaveShop/
3: http://www.catb.org/esr/writings/taoup/html/ch06s01.html#aud...
Logic Pro X really impressed me with its accessible UI. Yes, there are a lot of functions, but they don't get in the way, and the important ones are fairly discoverable. Reaper, OTOH, not so much. Its routing is ... flexible, but unfortunately also in places where it doesn't matter, or even gets in the way.
I like that the U.S. Graphics Company link has a bunch of TUI examples.
htop came to mind.
Here's a gallery of a bunch of TUI apps.
https://www.linuxlinks.com/100-awesome-must-have-tui-linux-a...
DAWs and audio plugins are a good example. Digital audio workstations can be somewhat varied in UI, but plugins can be vastly different from each other even for two of the same tools.
Creating intuitive interfaces for complex technical controls is challenging. Fabfilter has been a popular developer for years. Oeksound and Denise Audio are great examples too. Newfangled Audio makes good stuff and their limiter elevate handles multiple pages well. They all pack parameters into tight, cohesive UIs that look good and remain intuitive.
Fabfilter often uses submenus that can feel convoluted, but they're arguably necessary given their plugin's depth. Denise Audio takes a different approach with standard, simple UIs across their product line. Everything is visible with no submenus, though they may offer fewer controls overall.
Deciding what controls to expose and how to organize them intuitively presents a unique challenge. Multiple pages like how Newfangled does it works well. I don't find Fabfilter's submenus to be the best but that's often because they are unlabeled and use small, unique icons that are hard to grok. The overall UI for primary features is usually quite good though.
https://ui.perfetto.dev/ is also good in this line.
heh, I worked on that one so I didn't feel like I should put it. I'm happy you thought of it though.
Renoise is a DAW with a very high density tracker UI that I think works well. It is a bit friendlier to new users than any oldschool tracker I have tried to use.
I love Rhino's CLI-focused UI. Too bad it is nearly impossible to run it on Linux with Wine [1]
have to agree with you on the DAWs. The first time I opened FL Studio I felt like I was looking at an aircraft's control panel.
The zachtronics website is completely broken on mobile with constant full-screening images, had to re-open my browser to exit..
Great idea. From Java there is Java VisualVM and “JDK Mission Control”.
As someone who recently tried to use Blender for an extremely simple task... Blender's UI is absolutely terrible and should not be used as an example of anything except how to design an unintuitive UI.
Professional tools are often made for the efficiency of a professional user and are hard to grok at first glance. Other examples from the parent, like DAWs, suffer from this and Blender is no exception. By all accounts it used to be a lot worse.
I think intuitiveness and density are orthogonal properties (although often both desirable).
Regarding Blender specifically:
Do you have a background in 3D modeling?
I am genuinely curious.
I don't come from an digital art background and I bounced off Blenders UI several times but after doing a tutorial or two now I find I can use it for simple things. I have always wondered how much it was 3D modeling in general vs. Blender specifically.
In a similar case I have used both Inkscape and Illustrator as an amateur and, much as I love open source, there is no comparison. Illustrator was significantly easier to use and worked better.
I definitely get that. When I did 3D modeling, my start in Blender was very rough. After I got used to it and did some tutorials it got much easier to navigate. That was probably a decade ago, so I’m sure it’s only gotten more complex since
It is geared towards keyboard use, but I agree, the UI is not structured very well - too much mystery meat!
Sometimes I watch HOWTOs with Blender and it says stuff like "Hit NumPad +" and it makes me think, damn they going to tell me to start using the META key next?
I am developing this project, which replaces product lists with what I call "product charts":
The idea is to sort products not by one parameter (like price or release date) but by two - which creates an x/y chart. The product info is displayed dynamically - by default only the image is show. On hover, more info is displayed in a tooltip. And when you click "details", all data is shown.
This way, 300 products easily fit on the screen.
You need to watch it on a monitor to see the chart interface. On mobile, I just display a normal list.
Nice idea. I worked for a while on a "computer blue book", e.g. to answer the question how much a laptop of given specs should cost.
For something like laptops, I recommend providing the option to look at a CPU benchmark score. A list a CPU models isn't super helpful, and even then a "intel i5" can mean something very different depending on the generation.
To me there seems to be a vast overemphasis on screen specs (7 spec lines)
You made some other projects too to search movies for example right? I can't remember the name at the moment.
edit: found them.
https://www.gnovies.com/ and https://www.movie-map.com/
There are other projects to find music and art too. I have only used movies one a number of times.
Yes, these are also projects of mine.
I wonder if you can help the user move between a 'must have' filter (like on the left) and a looser 'pefer' filter, like choosing an area of the chart (like Select in paint apps.) Maybe it could be as simple as changing the checkmark/slider options to have 3 values: null, must, prefer. For example, check a few CPUs as your required spec, but also a few others as the prefered.
Like/dislike might be a better description. Then make the chart show color or size to indicate the preferences.
Good idea, but wow, the popup mechanism is obnoxious. It needs to be off to the side in a fixed location that doesn't obscure what you're looking at, or make you chase the 'Hide' button with your mouse.
Hmm... the way I use it is that when I put the mouse on an item, that is the one I am looking at. So it is fine that some others are hidden. And when I want to see all items again, I move the mouse into an empty area (usually right next to the item I just looked at) so the popup goes away.
Also, I usually use the filters first. Say for laptops, I set the screen size to >=12inch and the weight to <=3pounds. So there ain't that many items left on the screen.
Do you use it differently?
Assumptions about how users will interact with your UX always end up badly.
I saw the "big grid" and was curious, so I hovered on the icons, moving along a line, just to get an idea of what the thing does. Doing that, I kept accidentally moving the mouse pointer off-axis so it went into the popup, and was "stuck" there, until I dragged it outside the popup again, and promptly lost track of what I had already glanced at.
This makes sense. One suggestion would be to add a "Click to hold" button, which will push the dialog pop-up into a corner, maybe in a condensed view, and allow you to select more items. Then you can do a selective comparison of multiple items at once.
"Click to hold" isn't a good name for the feature, but hopefully the idea makes sense.
Have you seen the "compare" button in the popup when you hover an item? It lets you highlight multiple items and compare them later.
I did, it just seems to highlight the items in the view? I was hoping to see all of the dialog boxes at once, somewhere. I'm using a laptop FYI so have plenty of screen real estate for that
It highlights the items, and the highlighted items are than offered as a comparison when you hover other items.
Great website, the monitor section does not easily cover the use case of macOS users. We want Retina grade displays (5K at 27-inches, 6K at 32-inches). I don't think you even have Apple's monitors?
Yes, product selection is not perfect yet. I originally set out to display the 300 most relevant products in each category. It is probably better to have a larger set of products in each category.
I will tackle that. Not sure yet how hard / easy it will be. Because more than 300 items on the screen initially might make them too small. And adding more as one uses the filters might be confusing.
Oh and that drive (https://www.productchart.com/ssd_drives/22778) is marked as 20$ per GB, when it's a 1 TB drive for 50$. Many drives have the same problem.
Oh hell, I was parsing it backwards.
I like your project. If I may suggest a feature, DPI option in the side panel would be valuable to me. I won't consider any products that have a screen with less than 220 DPI (e.g. laptops, tablets, monitors etc).
All categories with screens (laptops, tablets, phones, monitors) have the option to switch the axis to "pixels per inch". Hover one of the axis arrows with the mouse to select it.
Does that help?
I like it. I wish the larger image would immediately vanish after I scroll off rather than take a few seconds.
Great way to present a large amount of data though
This is good. The users this caters to are also higher than normal earners. Hate to ask, but what is the monetization plan?
this is great!