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?
You 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.
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...
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
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.
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:
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].
2: https://victimofleisure.github.io/WaveShop/
3: http://www.catb.org/esr/writings/taoup/html/ch06s01.html#aud...
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...
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.
- 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.
<meta name="robots" content="noindex, noarchive, noimageindex" />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.
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.
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.
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/
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.
I like the simple table view of RPiLocator. Only a few columns, but lots of rows, no unneeded clutter. https://rpilocator.com/
Not as compact as possible, but at least shows quite some information: GSMArena. It could fit more phones into the comparison table with less whitespace/greyspace though. https://www.gsmarena.com/compare.php3?idPhone1=10386&idPhone...
All sites as viewed on desktop, on mobile this would likely not work out.
I also want to echo the command line tools mention in another comment. GDB's TUI is reasonable for my use, but after some experience this recently posted terminal debugger might be better: https://github.com/al13n321/nnd via https://news.ycombinator.com/item?id=43905185
Also the hex editor I am currently using, despite some problems: https://github.com/WerWolv/ImHex
An example of an information dense GUI that might be a bit overwhelming is Ghidra: https://en.wikipedia.org/wiki/Ghidra (page includes a basic screenshot, you can fill your screen(s) with as many sub windows and information panes as you want)
As a side note, while trying to find examples I realized just how few websites there are (any more?) that show a lot of information at the same time. Worst recent offender is YouTube's redesign with only 3 video tiles in a row on a 1440p screen, luckily easily fixed via a ublock rule.
He has strong opinions strongly held but as someone who's designed industrial strength UIs for over 20 years (networking CLIs & UIs, CAD modeling/simulation, Devops dashboards, cybersecurity tooling) I've read all his books, attended his lectures... he's a king with no clothes
Here is a blog post talking about the different ui elements http://nenadmilosevic.co/ableton-live-redesign/
https://d33v4339jhl8k0.cloudfront.net/docs/assets/5be07d872c...
https://www.scotiaitrade.com/content/dam/slf/images/HowToAcc...
- Mixx: https://mixxx.org/screenshots/
- darktable: https://www.darktable.org/about/screenshots/
I worked there as a product designer for a couple of years, I now work on even more data dense UI in the cyber security domain, e.g. https://elastio.com/blog/cyber-recovery/three-clicks-to-rans...
As with almost all UI design the answer is "It Depends". If you could provide a little more context around the domain you're working in I'm sure I could point you at some specific examples
We used to have an even denser display, but they sadly got rid of it. It was the original reddit mobile interface (served as a webpage, not an app).
There is a screenshot on this blog post (by one of the guys who worked on it): https://pdx.su/blog/2023-04-06-rip-reddit-compact/
It is absolutely my preferred UI for consuming large amounts of information quickly.
They migrated from that React SPA to Lit web components and the UX still sucks
I still use old reddit with RES. It's a bit ugly but perfectly functional. Tried the newer web versions a couple of times over the years and just hate the whole experience.
A couple of years ago I considered building a web client for Reddit but then the whole API thing happened.
Maybe it's time to build a new Reddit? :)
Alexis and Kevin are already trying to do that with the new Digg. ;)
Lemmy is serving my former reddit needs quite well.
[0] https://assets.bbhub.io/image/v1/resize?width=auto&type=webp...
Each of those icons is a full year of weather data. Left to right is Jan to Dec. Bottom to top is the hours of the day. The pixel color tells you cold vs hot.
--
(If anyone from Datadog reads this, please 1) introduce a hobbyist tier so I can afford to use DD on my Pi bramble, 2) consider hiring me, or 3) both)
More: https://www.google.com/search?udm=2&q=outlook+calendar
It has has one of (if not) the best tagging systems of any website and between the tags and search filters you can find anything you like.
Each page has a header with useful links, a list of tags to the left, and a grid of paginated images with basic stats on the rest of the page. Click an image and you get a bigger version of it with download options, all of the tags that apply to it specifically, and comments from users.
It's basically as good as it can be.
"Pro" trading websites, for stocks or cryptocurrencies (e.g. Kraken and Coinbase have different interfaces for regular and "pro" users)
[0] https://www.researchgate.net/profile/Panagiotis-Zaharias/pub...
[1] https://mtthwx.com/wp-content/uploads/2018/11/wowow.jpg (silly example)
For mobile, look for UX patterns that don't hinge on my big thumb hitting a tiny patch of screen. For example, gestures like swipe to either side to expose actions for item.
Most of the things talked about in this thread are not mobile UIs, and are not limited by such concerns.
And finally, information density can be separate from available action density.
My podcast app shows a list of episodes etc as just rows with only subtle horizontal lines separating them (no "cards"). There's 3-4 lines of text with just a little bit of whitespace inside each block, a button on the right, and dragging the row left/right shows more buttons. Below the Android-global-convention top nav there's room for 7 episodes on my phone's screen size. I genuinely wouldn't want the text to be any smaller. The screen is not wide enough to use a multi-column grid without wrapping episode title text like crazy. Thus, the only way to compact that more vertically would be not showing as much metadata (date, download size etc seem unnecessary; maybe pinch-zoom to expand details of a single row when wanted). I could accept that, but even then given my not-great eyesight, the icon and episode title take up as much vertical space as the button. As long as it displays a recognizable icon, a two-line title, and duration and current offset, the button will fit just fine.
Mobile just has inherent limitations, both because of small screen size and because of inaccurate pointing.
However, the books are old and specifically call out the low resolution computer displays at the time. Does anyone have an updated list of references for high density visual information?
Bret Victor's https://worrydream.com/MagicInk/ was a good starting point for me.
especially the opcode tables
Take mouser.com, digikey.com, grainger.com rockauto.com or mcmaster.com. They all have a bit of a "landing page" but once you go to search for parts you've got something that was really designed to be an intuitive parts search. Compare that with jameco.com which competes with mouser/digikey but has a more classic webshop search system. It’s a bit more frustrating to use.
Some news sites also do a great job of presenting headlines and highlights well in a small area. I think semafor.com is probably my current favorite, but I'll readily admit that it's not the most information dense.
CAD software also tends to be good at this, but that might be just because the UI has chugged along since the 90's. AutoCAD/Inventor/Solidworks/SolidEdge/KiCAD/Altium/Virtuoso are all great examples where if you've got prior experience with them (or even similar software) you can sit down and quickly get up to speed on a project and see what's been done. I think the distinction is that a lot of software/websites are designed to keep the average user focused on a single aspect and so they are designed to either remove or hide the complexity but for more “professional” level tools you need all that data and information. You can probably blame (for better or for worse) material UI for a lot of this spaced-out thing. In my mind that was the first mobile first UI scheme that really took off and it's basically influenced everything that's come sense then. Computer first software might be your best bet to get some examples. Because a lot of the web is mobile first/mobile forward now you probably aren't going to find a lot of examples on that. I would love to see examples of information dense mobile first sites.
A few other examples I just wanted to brain dump:
- labgopher.com
- tld-list.com
- The Bloomberg Terminal
- Ghidra
- Most plane cockpits, especially modern fighter planes if you ever get to see/sit on one.
- A lot of “professional level creative software” – Reaper, Affinity
- Train control and monitoring systems
There's a myriad of other ones as well, they all have similar UIs, with the primary goals being to never hide any important info from the user, and to let the user take important actions quickly. That naturally leads to high density. Nevertheless it needs to be reasonably intuitive, since doctors and nurses tend to not be very tech-savvy, which leads to some interesting design constraints.
(Conversely, most staff hated new EMRs, because it enforced doing things the hospital wants its staff to do for liability and billing, but the staff doesn't want to do - for example, asking Maternity nurses to talk to new mothers about smoking cessation.)
None of them have anything good to say about Epic.
I used it to build a merge conflict tool: https://codeinput.com and while it required a much deeper understanding than just reading the docs (tons of bugs), it is by far the most comprehensive UI framework out there. Most UIs either lack lots of components or are made by a couple front-end/react/css guys. This inevitably means that they lack research into things like typography, accessibility, patterns, etc..
> but unfortunately it gives me extreme IBM cloud ptsd
Sure. It did give me some of that PTSD but then every UI framework I struggled with had lacking that gave me severe headaches. At some point I realized that Carbon is not that bad after all.
I haven't did a Show HN yet but I'd love to get some feedback on it first.
It's got a lot of configurable views and can be made extremely dense (dense mode on + columns: auto). The aesthetic itself was made to deviate as little from the HN frontpage as possible.
It's got a lot of filtering knick knacks like being able to view by top comments/points, view hn as a timeline of top stories by comments or stories or view hn by top n over day/week/month/year/custom.
The timeline view can get wonky when it's like 12AM-2AM when there are relatively few stories in "today".
Misc:
1) it doesn't filter out flagged stories
2) second-chance pooled items, should they rise in ranks, will be shown on the day the item was originally submitted, not the day it got popular.
Is there any chance https://hcker.news is related to https://hckrnews.com? The dense layout feels similar.
(hckrnews.com credit in footer because I also found it helpful)
regarding controls, one of the dumb reasons i wanted to remake hckernews is i don’t like the two taps to change the view.. im happy with the brutalist settings panel up top.
My own news-page rewrite includes several paragraphs of lede context, which is probably a bit on the overkill side. But a hundred characters or so should help.
I'm also wrestling with the sort-order aspect. Current cut is time-ordered within sections (another thing I wish HN had), but I'm going to be extending the article count in the next iteration.
That said, your design is clean and light, I like it.
You should sign up for paper trading and see these UIs feel like.
Back in the day, we sold accounting systems.
Now the beauty of accounting is that everyone needs accounting, the fundamentals are all quite solid and common, but even still, everyone does accounting differently. Matter of taste of the Controller, industry specific bits, etc. While everyone has a chart of accounts, no two chart of accounts are the same.
So, anyway, we ate our own dog food, we used our own accounting system in house for, you know, accounting stuff.
But the funny thing is that when you opened up the Accounts Receivable Invoice screen, and this is on an 80x25 color terminal, I would say it was 60%+ a collection of fields regarding the invoice. Customer, dates, terms, etc. Probably 20 fields on that screen, all crammed together, because real estate was always an issue on 80x25 terminals.
But, we were a simple business, and the bulk of those fields are optional for specific use cases, and those options are based on the customer.
So, when you entered in the customer for the invoice, 80% of the fields just vanished from the screen. Feature of the system. But it made a very busy screen into something quite stark. It doesn't resize, it just makes the field go away. The top half of the screen was, essentially, blank.
I always found it amusing to see all of that information vanish.
Unfortunately I don't really know how to get screenshots or examples for you, given the nature of healthcare data privacy and such
But I would suggest searching around and seeing what you can find for clinic software. I bet you can turn something up
In the UK, most GPs use SystmOne. Some screenshots:
https://support-s1.ardens.org.uk/support/solutions/articles/...
<https://toot.cat/@dredmorbius/114356066459105122> and <https://diaspora.glasswings.com/posts/e919db600cb8013eb7b844...> show screenshots and describe the interface.
It's a locally-hosted, personal system, updated manually via shell scripts. The prototype is based off of CNN's "lite" headlines page (<https://lite.cnn.com/>), which presents 100 headlines in an unorganised fashion without context.
My first cut simply organised the headlines by section and date. The version linked above includes several lede 'graphs for each article, along with some other formatting. It runs about 15 or so screens on either my desktop or mobile (large-format tablet) devices.
I'm looking at extending the concept to other / additional news sources, largely as CNN's article offerings are disappointingly irrelevant. (Discussed in the Diaspora* thread.)
Features I'm thinking of adding include:
- Bayesian ordering by significance. (This will be based on my own article judgements used as training data.)
- A "best of the interval" capability.
- Adding in articles from several alternative sources. The Guardian will likely be the baseline given its well-structured nature, reasonably comprehensive news, and lack of a paywall. There are likely a few other sources I'll add. I'd like to include weather and perhaps some business ticker data as well. I've had previous ideas about a "news dashboard" which tracks significant indicators, and would like to try applying several of those concepts, if my coding chops are up to it.
- Possibly a bit of visual flash, though from what I'm observing, virtually all graphics used on news sites are more distraction than value.
- Incorporating eInk-Mode: <https://news.ycombinator.com/item?id=43690828>
https://rockwellautomation.scene7.com/is/image/rockwellautom...
Not only is this showing details for every tank, valve, pump etc in the system, it's also highlighting those which have warnings or alarms against them, so the operator knows which values are nominal and which ones need action to be taken. Depending on the system, you may also be able to tap on each value to pop up a dialog which shows that value on a graph, lets you set alarm thresholds, or lets you switch a piece of equipment from automatic to manual control (from the operator station) or local control (from physical buttons on the equipment) or maintenance mode (safely locked out).
I'm not claiming that all of these SCADA/PLC HMIs are good, but they're really interesting examples of what a user interface can look like when information density and usability matters more than being pretty, and where you can require your end users to have training to use the system.
- Portmaster
Url: https://safing.io/
Screenshot: https://camo.githubusercontent.com/2f95620e28c8369cdcf94020e...
- UnigetUI https://www.marticliment.com/unigetui/#screenshots
- Mixxx https://mixxx.org/screenshots/
- VMware Workstation
Url: https://www.vmware.com/products/desktop-hypervisor/workstati...
Screenshot: https://blogs.vmware.com/wp-content/uploads/sites/42/2018/09...
- Pi-hole (scroll down for screenshots) https://pi-hole.net/
- The Movie Database https://www.themoviedb.org
- Steam https://store.steampowered.com/
Articles:
- Density and Audition: https://www.nngroup.com/articles/windows-8-disappointing-usa...
- Density is Cultural: https://www.nngroup.com/articles/china-website-complexity/
- Conventions: https://www.nngroup.com/articles/breaking-web-conventions/
- Information per cm² https://www.nngroup.com/articles/designing-effective-infogra...
High density can and often is done wrong, but it is often the hallmark of interfaces for professional users, an intricate tool designed to be used as quick as passable for hours on end, to accomplish this you try and reduce intermediate steps. this means putting everything up front, redundant panels(to do the same thing from different viewpoints), no overlap(why obscure information?) etc.
The end product usually ends up being intimidating as hell for new users. But is much more ergonomic for experienced ones.
> What are good high-information density UIs (screenshots, apps, sites)?
They have also been victimized by the designers wanting a ton of whitespace, but those are both spaces where the customers push back.
I have been working on Buckaroo, a table UI for dataframes that runs in jupyter notebooks. It's much more TraderUI, with sparkline size histograms, and decent baked in formatting for numeric columns.
[0]: https://www.native-instruments.com/en/products/komplete/synt...
MrCoffee7•5h ago