Live data from Hacker News

Ask HN: What are good high-information density UIs (screenshots, apps, sites)?

news.ycombinator.com

231–240 of 392 posts

Re: Ask HN: What are good high-information density UIs (screenshots, apps, sites)?

#231
post #9

I am developing this project, which replaces product lists with what I call "product charts": 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. Th…

I like it. I wish the larger image would immediately vanish after I scroll off rather than take a few seconds.

Great way to present a large amount of data though

Re: Ask HN: What are good high-information density UIs (screenshots, apps, sites)?

#232

Earlier quoted context omitted.

The 48x48px touch target is estimated to be ~9mm. That's tiny for touching by finger, since you can't see through your finger to aim (styluses could do it). 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…

Yeah, I have really big fingers as well. However for web forms, this rule really does make everything look too big IMHO. There are cascading impacts of these decisions as well, a field which is 48px tall must have a significant amount of padding around it as well, to look balanced with the field size. Typically the rule of thumb i've seen designers use is 50% of the field height. When you factor in field label sittin…

> There are cascading impacts of these decisions as well, a field which is 48px tall must have a significant amount of padding around it as well, to look balanced with the field size.

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.

Re: Ask HN: What are good high-information density UIs (screenshots, apps, sites)?

#234

I call it Trader UI vs VC UI. Traders want as much info jammed onto the screen as possible. VC backed companies use bootstrap, and want rounded corners on a pricing page with little actual information. 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…

Chinese end user UIs tend to all be high-density per local user preference. Take a look at any of the mini-apps on WeChat or AliPay or pretty much any Chinese local app. Almost everything is linked within about 1-2 taps of the front page.

Re: Ask HN: What are good high-information density UIs (screenshots, apps, sites)?

#236

I’ve been on a similar journey, and I haven’t found any good resources. 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 sh…

How did Tailwind contribute to the low-density trend? I use it a lot and don't really find myself forced to create "low-density" sites based on any decision by the library-makers.

I should’ve specified Tailwind UI. The book Refactoring UI explicitly says “use more whitespace than you think you need”, and that bit of advice is evident in all the components that Tailwind UI offers. They do look nice, but it’s become so heavily used that designers lean on it reflexively, rather than considering whether it makes sense in that context.

Re: Ask HN: What are good high-information density UIs (screenshots, apps, sites)?

#237
post #159
post #144

Earlier quoted context omitted.

I am still hoping that one day we get an open source image editing application to the level of Photoshop (and for Darktable to become as good as Aperture / Lightroom). 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. Meanwhi…

What the heck happened to Photoshop and Illustrator (and the whole Adobe suite)? They monochromed all of their icons and removed most of their text and tooltips. As a casual user, I used to be able to use their tools fairly proficiently, but now I find them virtually unusable.

Affinity designer went the opposite way and colorized them in 2.0

Re: Ask HN: What are good high-information density UIs (screenshots, apps, sites)?

#238
post #144
post #33

Programs used by pro creatives. Some people regularly spend 8h/day using a single such product as their primary work tool. 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_…

I am still hoping that one day we get an open source image editing application to the level of Photoshop (and for Darktable to become as good as Aperture / Lightroom). 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. Meanwhi…

Don't hold your breath for Darktable; the devs are hellbent on being as user-hostile as possible. It needs to be forked or replaced to make any progress.

Somebody forked it and was trying to do just that; I don't know the status of that project.

https://github.com/aurelienpierreeng/ansel

Re: Ask HN: What are good high-information density UIs (screenshots, apps, sites)?

#239
post #21

I didn't see anyone mention the McMaster-Carr website [1]. It may not be the "densest" out there, but it's clean, functional, and nicely presents a lot of information at once. [1] https://www.mcmaster.com/

I love McMaster but the multi-tab experience could really be better. Search filters don't carry through opening a link in a new tab (try searching M3 screw then ctrl-click socket head screws). Sometimes ctrl-clicking product numbers/product detail doesn't work at all. IIRC the back button sometimes breaks too. Pretty annoying since 80% of the time I'm researching the best component and want to backtrack easily.

Re: Ask HN: What are good high-information density UIs (screenshots, apps, sites)?

#240
post #7

Command line system monitoring tools like htop, atop, btop, etc: https://static.linuxblog.io/wp-content/uploads/2021/11/btop....

Wow btop looks fantastic out-of-the-box. I spent a long time configuring htop and still don't really like how it displays info (although it is an improvement over plain-old top)

Bottom is also great. I switched from btop because I preferred the config format.

https://github.com/ClementTsang/bottom

Post reply on HN