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?
rockauto.com
[1] https://www.mcmaster.com/
- 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)
> 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).
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.
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/
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.
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.
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.
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?!
If there is a UI design award somewhere, they should definitely get it.
example: https://uk.rs-online.com/web/c/?searchTerm=zync+7010
https://github.com/ethanniser/NextFaster
Absolutely no BS. It dumps you right onto the list of car makes.
- 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
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.
(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...
https://www.renoise.com/products/renoise
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...
[1] https://github.com/smola/wine-rhino3d
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 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.
https://github.com/paddymul/buckaroo
So many SaaS business tools have ego-driven UI, where it's all about keeping you in the tool, increasing engagement, etc. The problem is that people buy business tools to improve their productivity, the best tool for a business is one that requires zero time to use and provides some value. You want to get in, get value, and get out as quickly as possible so you can move on to delivering value to your business.
Slack used to be good at this when it was just about IM, but then they became all about replacing other forms of communication... the problem is they weren't as good, some email does need to be email. Engagement went up, but "managing Slack" was a big time sink. My old company trialled Facebook Workplace, and probably because it was built with a social network mindset instead of a productivity tool mindset, it was an immediate time sink with very little value.
There are lots of examples of the flip side, UI that gets out of the way, but they're usually pretty boring.
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.
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)
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.
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.
Does that help?
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.
Great way to present a large amount of data though
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...
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.
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.
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.
Somebody forked it and was trying to do just that; I don't know the status of that project.
https://github.com/aurelienpierreeng/ansel
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.
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/
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.
It is absolutely my preferred UI for consuming large amounts of information quickly.
[1] https://greasyfork.org/en/scripts/371490-reddit-multi-column
They migrated from that React SPA to Lit web components and the UX still sucks
https://github.com/ClementTsang/bottom
[0] https://youtu.be/h0hYYIGryJ4?si=LkBtTVWyomvyEjlM&t=69
https://youtu.be/vi8pyS076a8
You should sign up for paper trading and see these UIs feel like.
The TOS mobile app is also not too bad. A couple of years ago they tried to add some less data-dense info to the main screen and the they got a review riot which caused them to make the view optional and untouched sense then.
I've got a lot of respect for them being able to keep that UI stable for so long.
Those widgets can be resized and moved around on a grid and I can create different tabs with separate layout for each.
Here is a blog post talking about the different ui elements http://nenadmilosevic.co/ableton-live-redesign/
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...
In one component you can see temp highs/lows, precipitation, cloud cover, humidity, wind speed, etc. by the hour, for the next week.
Full disclosure: I worked on this as a junior engineer, the lead engineer was fantastic. The code hasn't changed in 10+ years.
[0]https://www.wunderground.com/forecast/us/ca/san-francisco/37...
Yours has a much smoother aesthetic, though I could go for either
[1] https://forecast.weather.gov/MapClick.php?lat=44.2705&lon=-7...
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
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.
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.
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.
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.
The new EMR software was highly configurable, so lots of this happened. Staff teams signed off on it, and had training from the implementation team.
Fewer screens? Check! …Wellll, sorta: some very long scrolling views…which didn't play nice with mousewheels. It would seem like the page randomly and mysteriously stoppe scrolling, then suddenly scroll normally. There were lots of weird data entry errors, from all staff, regardless of prior reputation for accuracy. They were just getting used to new software, right? Nope. I tracked this down to the dropdown lists scattered on the long scrolling pages. As a page scrolled, random lists ate scroll events, changed the list item to either the first or last item, then permitted scrolling to continue.
Fonts worked mostly great…except some of the typefaces follow the should-be-criminal design of allowing various characters to to look identical. Font sizing worked as expected. I think Pre-cert desk liked Candara, for the way numbers stood out.
Notes fields…these were our downfall, sometimes multiple times per day. Anything put into them was inserted as raw text into SQL:
Patient said xxxxxxx -- ESR
…or…
something-something 'quoted thing'
…would mean the database locked up, no exams savable or queryable, no patient intake, no checkout until I.T. admin could fix it. The implementation team was gone, and non-responsive, so sticky notes with a list of forbidden characters seemed to be everywhere.
I believe some contracts for referrals were lost, due to delays and errors. Some staff quit, after months of no fixes. But I later heard from one of the most affected staffers that the same EMR software was installed at our biggest competitor, and no issues at all.
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.
"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)
https://hcker.news
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.
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.
Is there any chance https://hcker.news is related to https://hckrnews.com? The dense layout feels similar.
https://hnr.app
(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.
The timeline view can get wonky when it's like 12AM-2AM when there are relatively few stories in "today".
I may do to a "rising" type of view but I'm curious about what others want to see first.It would be perfect(for me) if it had some more (light)themes, with yellow-brownish background, like 'manila paper', or something like that.
Will continue trying it out.
Anyways, thumbs up so far...
Thank You!
Edit: After a few minutes I'm thinking its better than both hckrnews.com, because that has too bright BG, and less disturbing than HN, because no jump between grey borders and that pale yellow they use. MUCH LESS annoyance/eyestrain.
Also, I'll also have to fix the fact that I've been misspelling "manila". Feel free to email me (in the about page) if there are any other features you'd like to see.
--
1: https://www.youtube.com/watch?v=N1CBDTgGtOU
2: https://rerun.io/viewer
[1] https://www.bulkrenameutility.co.uk/assets/img-bru/darkmode....
Here is another utility that I use every day: https://www.mythicsoft.com/agentransack/information/#screens...
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.
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
- Mixx: https://mixxx.org/screenshots/
- darktable: https://www.darktable.org/about/screenshots/
[0] https://assets.bbhub.io/image/v1/resize?width=auto&type=webp...
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...
They have also been victimized by the designers wanting a ton of whitespace, but those are both spaces where the customers push back.
I made this UI for realtime ham radio signal spotting a couple of years ago, which was an interesting challenge in that regard: https://ft8.live
I used Ant Design and Deck.gl for this which are both quite good for building dense UIs and data visualisation platforms
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/...
This one 3-1/8" inch instrument displays more than 15 pieces of information, is somehow perfectly legible even in turbulent flight, _and_ is more reliable and accurate than a whole 6-pack[1]. Synthetic vision unlock is only $500. This is all without switching different pages.
Get two of them, and the FAA considers the possiblities of both of them failing at the same time so low, that you can cover one of them to satisfy partial panel failures in a checkride - well, all you do is to switch the "working" one to the PFD page, and you haven't really lost any capabilities!
[1]: https://pilotinstitute.com/six-pack-instruments/
The densest UI is a direct democratic simulated multiverse: imagine a long exposure photo as a 3D scene, in which you can walk or fly.
“Point and scroll the mouse wheel” to focus on a particular moment of time, make it crisp, or “scroll back” to see billions of years of time as a hazy long exposure scene.
Example: 14 bln years of our planet look like a hazy ocean (our planet was a water-world most of the time), with the Sun arcs static in the bright sky.
https://news.ycombinator.com/item?id=23702560
- 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/
Christitus Winutil https://github.com/ChrisTitusTech/winutil
https://i.imgur.com/v9RiOUI.png
Windows MMC consoles like Computer management, Cert manager etc.
https://i.imgur.com/MqbpdBe.jpeg
Windows ADUC Attribute Editor and ADUC in general
https://i.imgur.com/VWrONfD.png
Anything for Windows 2000s server admins before 2012 destroyed the UI
https://engdata.com/
[1] https://ibb.co/VYQpcz9Z
[0]: https://www.native-instruments.com/en/products/komplete/synt...
[1]: https://www.bitwig.com/overview/
[1] https://www.tradingview.com/
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.
In addition practically every Chinese app is extremely dense, look at Taobao, Meituan Waimai, Eleme, Alipay, Xianyu
Redfin search: https://www.redfin.com/zipcode/94110 Redfin listing: https://www.redfin.com/CA/San-Francisco/3000-3006-26th-St-94...
(Figure-ground is how we perceive three-dimensionality in a 2D space.)
This is one of the best arguments for skeuomorphism I've read. It doesn't address the _look_ (ie, brushed metal) but it absolutely addresses the _style_ (looks like a real toggle switch, a real button, etc.)
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.
[0] https://www.commentcastles.org
[1] https://www.commentcastles.org/settings
An artist page: https://rateyourmusic.com/artist/stereolab
An album page: https://rateyourmusic.com/release/album/stereolab/dots-and-l...
I personally adore it - RYM is permanently open on my 3rd monitor throughout the work day as I churn through new music.
https://d33v4339jhl8k0.cloudfront.net/docs/assets/5be07d872c...
https://www.scotiaitrade.com/content/dam/slf/images/HowToAcc...
https://github.com/ocornut/imgui/issues?q=label%3Agallery
So you don't have to dig, 3 examples
https://camo.githubusercontent.com/6f62b5ca8579543a1f59eceed...
https://private-user-images.githubusercontent.com/13691253/4...
https://private-user-images.githubusercontent.com/14961870/4...
URL 3: https://private-user-images.githubusercontent.com/13691253/4...
shortened: https://www.naturl.link/mDBwyX
URL 4: https://private-user-images.githubusercontent.com/14961870/4...
shortened: https://www.naturl.link/sOVcsG
Or maybe it's better to link to the post in the issue
#3 https://github.com/ocornut/imgui/issues/8333#issuecomment-26...
#4 https://github.com/ocornut/imgui/issues/8333#issuecomment-28...
In any case, you can follow the first link and browse the galleries.
https://www.discogs.com/release/26194-Prodigy-The-Fat-Of-The...
* Deluge Torrent Client
* Gimp before they changed the toolbox icons
* InkScape
* Blender
* Bless (Merge tool)
* htop
Something you'll find in both ableton and after effects are smart, adaptable panel abstractions/conventions. Both have fairly rigid application frames and large distinct sections where discrete types of work happen. But they also have panels where things can get nearly to a free for all. Think custom video effect controls, or individual midi instruments. There are norms (knobs look and work similarly), but things can get totally custom as well (custom graphs, etc). Lastly, at the very edge (~1% of use cases), there are ways to escape the constraints of UI entirely. AE has a code editor for things like custom wiggle animations. Ableton has M4L (which subsequently supports JS and possibly some C, IIRC). You can get yourself into trouble here in ways you normally couldn't: it's possible to straight up break things.
Greedy whitespace nonwithstanding, the most pernicious modern UI trend you'll need to buck is the idea that your UI should be simple because it is for simple people. Sometime UI is cluttered because of sloppy design or bad abstractions. Sometimes UI is cluttered because it's meant to empower people who think and care about multiple things simultaneously. Modern UI trends will tell you not to serve a man a steak because a baby can't chew it. Serve steak, babies be damned.
I guess that was mostly about functionality, and only adjacent to density. For actual density: vintage (2016ish?) 538 tables, vintage (pre 2010?) stockkeeping and cashier UI. These are basically TUIs with just a hair more polish. * Much less text heirarchy. This means even line heights, which means easy dense grid layouts. Achieve contrast with boldness rather than size, side borders, inverted backgrounds, etc. * The opposite extreme: very big items for very big tasks. Wide touch areas for each food item that a server can rapidfire tap through, everything else tucked to the side. * Thoughtful truncation: grid layouts often ask that things overflow. Do they elipsis at the end? Do they drop the middle? Do they condense 3 pieces of information into 3 smaller pieces of information? Etc. * Prefer text to icons for all buttons, menus, etc. A tab menu of just text is easy to parse. Icons add noise, and non-text buttons force users to speculate instead of read. * Intentionally non-responsive panels. Having fixed sizes for sidebars, panels, etc makes it easier to reason about how subcomponents snap to grid, and greatly shrinks the workload created by having to allow for fluid item reflow.
https://www.discogs.com/sell/list?genre=Electronic
https://media.ccc.de/c/38c3
(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
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
https://ont.fyi/entity/Q6109517
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.
https://arngren.net/
It's extremely dense, but not very good
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.
https://imgur.com/a/TtruELg
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.
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/
very old and not optimized for modern screens, but the density always was impressive to me
<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://aviation.stackexchange.com/questions/16808/why-was-c...
imho the UI is the monitor, mouse and keyboard with the later two being the most important.
Also of interest here is the amount of conditioning the user enjoyed/suffered. If they cant get their things done elsewhere they will have to learn how to use the proverbial Blender. If the interface gradually got more complicated the long term user wont even notice how crowded it got.
If you put a form in front of someone with fields like name and address when they are requesting a quote you don't go put "personal info" at the top... in a red font?? If it is important you use a larger font, red is for drama. We have bullshit draining the attention.
The same goes for "Address correction", the user is not to stupid to see the form is returned to them.
It gets worse from there....
"We could not find the address you entered"
If it was an IRL person to person interaction this is all you would say. No screaming or drama required.
Some elaboration would be nice. If you do that properly there is no need to vaguely talk about the address in general.
"Entered street name was not found"
Imagine that, ask yourself, would it be useful to also say you couldn't find the address?
But we have stuff between those two things to further confuse the user. I don't know the situation but if they may continue despite not finding the address you should probably just accept the address.
It gets even worse from here... We've told them we cant find the street name but the house number is also incorrect??? wha how?
I haven't the slightest what "Directional incorrect" means, maybe and/or works differently in the US.
We don't know what St means in a street name?
If one may make changes or continue with the address provided. How will the user know his changes are correct? If they want to continue as~is they cant be presented with "Address correction" again. You would need two submit buttons.
And finally, the truly most terrible part is that the "errors(?)" are not described above or below the form field they apply to.
We get this wall of complicated text where a few lines should have been enough.
As this is page 1 out of 8 the odds people will run away from the computer screaming are greatly improved.
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.
(If you want information-dense designs, find someone who benefits from them, and ask them.)
https://www.popsci.com/747-cockpit-tour-mark-vanhoenacker/
I have adhd searched for an image I have save of Classic Windows XP theme with cmd windows and old Firefox with old unknown web ui. Peak. But cant find it.
*Edit - I found it
This is the peak UI - LOOK. Just everything. Windows XP? with classic theme and some multi workspace swicther in the corner. Small icons, no combine taskbar. SSH/console. Classic Firefox. Unknown encoder web UI "BEAST". DENSE.
https://i.imgur.com/Sdy3Z5o.jpeg
This is also a collection
https://imgur.com/a/gvnf8jf
Adding Wireshark
https://i.imgur.com/VLSspTw.png
Adding Qbittorrent
https://preview.redd.it/0yukk4ligh5a1.jpg?width=1907&format=...
especially the opcode tables
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
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.