Ask HN: What are good high-information density UIs (screenshots, apps, sites)?
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: 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?
391 comments
[ 4.2 ms ] story [ 267 ms ] threadYou just described the modern search experience on any topic.
As much as I hate it, i'd suggest asking a few "AI"s and trying Kagi.
[0] https://youtu.be/h0hYYIGryJ4?si=LkBtTVWyomvyEjlM&t=69
https://youtu.be/vi8pyS076a8
It is an extremely well-designed and effective high-information density UI designed to be very efficient to use but requiring some skills to get the most out of it.
I'm also reminded of World of Warcraft; in my role as a "healer", keeping track of changes to the health levels of maybe 20 other players in a raid (in addition to all the health / spells / weapons / maps / etc for my own avatar's immediate needs) required an impressively info-dense UI.
https://commons.wikimedia.org/wiki/File:Bloomberg_Terminal_M...
https://github.com/ClementTsang/bottom
https://www.productchart.com
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.
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?
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.
"Click to hold" isn't a good name for the feature, but hopefully the idea makes sense.
Does that help?
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.
Like/dislike might be a better description. Then make the chart show color or size to indicate the preferences.
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.
Great way to present a large amount of data though
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)
After that Visual Studio while debugging. In general, I think graphical debuggers and profiling tools do a relatively good job of packing lots of information into many, small windows.
[1] https://github.com/wolfpld/tracy
[2] https://github.com/baldurk/renderdoc
[1] https://www.tradingview.com/
Audio DAW or video production apps jam tiny buttons and indicators all over the place. A mixing console is the epitome of this. Shit, the cockpit of a plane. AutoCAD. Stock trading apps. These aren’t great in the web UI sense - the pattern that emerges is that dense UIs are for experts or people who dedicate a lot of time to learning the UI and appreciate the long-term efficiency that short term inefficient brings.
- 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:
- https://www.zachtronics.com/wmp-skins/
- https://cari.institute/aesthetics
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.
(Notable omission: GarbageBand. It has the opposite effect, it instantly puts you into action, but becomes more frustrating the more you use it.)
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].
1: https://www.wavosaur.com/
2: https://victimofleisure.github.io/WaveShop/
3: http://www.catb.org/esr/writings/taoup/html/ch06s01.html#aud...
[1] https://github.com/smola/wine-rhino3d
htop came to mind.
https://htop.dev/
Here's a gallery of a bunch of TUI apps.
https://www.linuxlinks.com/100-awesome-must-have-tui-linux-a...
https://www.renoise.com/products/renoise
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.
With some exceptions and edge cases (like trading or aviation where you have to see a lot of information at once, density is the product in itself) I argue that by "good" UI most UI users really mean "well structured and carefully prioritized information that doesn't overwhelm you" (aka "low information density").
It is really hard to find good UI in that sense. Apple is doing okay job in their iOS and macOS UI in general. Modern car makers (some of them at least) reached a pretty good point when a lot of complexity is hidden behind a very intuitive UI.
Btw, Apple was expected to be good at UIs because of its history of _inheriting_ xerox's military UI research achievements.
Which contrasts to the typical online news article which is littered with advertisements and "Related" links (which are not in fact related), as well as multiple calls-to-action for newsletters, registrations, donations, and all the rest (WaPo, NPR, PBS, and others all come to mind). Not to mention autoplay video and audio, dickbars, etc., etc.
My front page is information dense. Its job is to convey what current breaking news is. It is text-only, partly because incorporating images from upstream is complicated, but mostly because those images convey no useful information.
"Information appropriate" is probably a better overall term, where for survey or multiple-element presentation should have many discrete items, but where detailed presentation focuses on one and only one item, which can be read in depth without distraction.
That said, not having shit that moves in either case is a huge improvement over Web defaults these days.
[1] https://www.mcmaster.com/
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?
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.
- 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)
A fly wheel of benefits.
Those numbers could be anywhere, on completely unrelated things. They are not a good search query.
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.
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.
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.
> 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.)
https://www.goodreads.com/author/list/10775.Edward_R_Tufte
Still seems worth it, just wondering
Now that I think on it, I haven't seen an ad for them since before the pandemic, so I guess not (in person).
You still get all his books included in the price of taking the course: https://www.edwardtufte.com/online-course/
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?!
example: https://uk.rs-online.com/web/c/?searchTerm=zync+7010
If there is a UI design award somewhere, they should definitely get it.
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.
[1] https://www.mcmaster.com/8392T11/
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.
In my opinion it is superior to McMaster
On RockAuto, watch out, because they stock some hot garbage.
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.
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.
Absolutely no BS. It dumps you right onto the list of car makes.
https://github.com/ethanniser/NextFaster
Much of the low-density trend can be traced back to Tailwind. I love the library, but I do find it frustrating that pretty much all designers lean towards low-density by default.
The problem is that it only works well for casual/consumer applications. Once you start building for professional, productivity-driven products, you need density.
One shining example I can think of is: https://usgraphics.com/
https://www.popsci.com/747-cockpit-tour-mark-vanhoenacker/
E.g. pro desktop versions of photo, print, video, sound, etc editing software usually feature good UX and high information density.
One well known example of that is Blender - here is a chapter from their manual about its user interface: https://docs.blender.org/manual/en/latest/interface/window_s...
In addition to creative software, look at professional stock/crypto trading platforms, EHRs, POS systems, CRMs, or any software targeted at a vertical—veterinarians, fleet management software, etc. Many of them will run counter to "good UI" best practices. But if you interview their users, you might be surprised by what they love about these interfaces.
One of the things that Blender did right is adhering to industry standards, especially keybinds. When Blender did their huge UI rework they decided to normalize to the keybinds of its closed-source competitors, along with some of the workflows.
Meanwhile open source image editors go out of their way to have keybinds, workflows and button placement that deviate significantly from Photoshop. Smells strongly of NIH.
As a casual user, I used to be able to use their tools fairly proficiently, but now I find them virtually unusable.
Bless Irfanview and Inkscape for having color icons still...
One reason I heard is that color needed to be removed to not alter your color perception when editing a photo.
I am only an occasional blender user, but I have been using it a long time. since 1.7
the main key binds I have always used have not changed. tab, g, r s, e, b, A, f, ctl-click to add points.
Are you telling me those are the industry standard keybinds (surprised pikachu face)
One thing I always felt blender did better than the "industry standard tools" was it's quick/natural workflow. I have not used Maya since collage in 2000 but back then it was very clunky compared to blender for quick vertex based editing. My theory is more that the "industry standard tools" caught up to blender. but by then blender had a bad reputation as being quirky, so the "big redesign" was more a press-release. Give it a menu bar make it dark mode and most importantly got to cure that bad-reputation so tell everyone it is completely different now.
Somebody forked it and was trying to do just that; I don't know the status of that project.
https://github.com/aurelienpierreeng/ansel