42 ms·

What UI density means and how to design for it

• olalonde 2y ago
  Surprised that this article doesn't mention Chinese UIs, which are notoriously dense. e.g.: https://i0.wp.com/technode.com/wp-content/uploads/2020/03/Collage_Fotor-scaled.jpg?resize=780%2C634&ssl=1 https://i0.wp.com/technode.com/wp-content/uploads/2020/03/Co...
• stephane-klein 2y ago
  I wonder if the constraints of text-based user interfaces (TUIs) generally allow for higher information density.
• deleted 2y ago
  [deleted]
• sensanaty 2y ago
  I despise the direction the Jetbrains editors are headed towards. Even with the so-called "Compact Mode", the sidebars take up double the space of the old sidebars, while containing less information contained within them and requiring more clicks than before to get to some menus. Icons everywhere, no actual label text anywhere, and the labeling option they begrudgingly added back would be gut-bustingly hilarious if it weren't so depressing, see [1] for what it looks like. This modern trend of gigantic paddings/whitespace everywhere and abstract flat icons everywhere is horrible to me, and I don't think it even really looks better than the older interfaces they're usually replacing. [1] https://youtrack.jetbrains.com/issue/IJPL-59808/Tool-windows-new-buttons-on-the-sidebar-are-harder-to-distinguish#focus=Comments-27-9007768.0-0 https://youtrack.jetbrains.com/issue/IJPL-59808/Tool-windows...
• samsquire 2y ago
  I enjoyed Namecheap before the redesign. It was a dense GUI and had small icons. I like old style Windows 95 GUIs and "portlets" I prefer dense GUIs. I know Japan has a different design aesthetic than the rest of the world. It's similar.
• arresin 2y ago
  I was using a Chinese website recently based on the “ant design” [^1] library / philosophy. It’s a really UI dense way of doing things and I enjoyed having everything there without having to go hunting into menus. [1]: https://ant.design/ https://ant.design/
  • pjc50 2y ago
    On the face of it, this looks no different from average Google documentation pages; do you have a better example? It's certainly not as dense as the bloomberg terminal.
• ricardobayes 2y ago
  I don't think it's fair to put an equation sign between a company valuation and its perceived "UI density". I believe Google would have been just as successful with a really busy home page too.
• aj_nikhil 2y ago
  After talking to many users I have realized , most of them want a Single page app. They want to get their work done. They don't multiple pages, just one simple page to do everything and finish their work. Good UIs(mostly dense) try to enable it and they are loved by users.
• BugsJustFindMe 2y ago
  They contort themselves to redefine the word density, when what they should have said is that a good interface for humans maximizes information without losing visual salience (http://www.scholarpedia.org/article/Visual_salience http://www.scholarpedia.org/article/Visual_salience). That is, local density BUT ALSO clear-to-the-human-eye boundaries between information sets. See the famous (still? hopefully?) Kadir&Brady paper "Saliency, Scale and Image Description" from 2000 for an explanation of how encapsulating information in something visibly distinct, like whitespace, increases the visual saliency of that information: https://www.robots.ox.ac.uk/~timork/Saliency/ijcv_SalScale.pdf https://www.robots.ox.ac.uk/~timork/Saliency/ijcv_SalScale.p...
  • The_Colonel 2y ago
    You can also encapsulate information with e. g. frames which is what UIs used to do in the 90s. This provides both higher density and saliency.
    • bqmjjx0kac 2y ago
      Frames are out, whitespace is in. I wonder if the 30-year fashion cycle applies and it will be cool/retro to have compact, discoverable UIs in the 2030s.
      • deleted 2y ago
        [deleted]
      • arjonagelhout 2y ago
        The type of visually dense user interface is still around where it’s unavoidable due to the complexity of the data model, e.g. DAWs, game engines and photo editing software. But for simple consumer facing apps or websites, I don’t see it making a comeback, as it is more aesthetically pleasing and more usable to have simpler / sparser user interfaces for less tech savvy people.
        • The_Colonel 2y ago
• abeisgreat 2y ago
  This is a really good discussion of density in different forms. I’ve always thought mobile UIs could have a density renaissance, would love to see folks questioning some assumptions of these devices - especially when the trend with LLMs is “wait a long time for a potentially incredibly wrong output” it feels like we’re going the wrong way.
  • sebastiennight 2y ago
    When we first released our Chat+RAG feature, users had to wait up to 20 seconds for the response to show. (with only a loading animation). And then we fake-streamed the response (so you're still, technically, waiting 20 seconds for first token, but now you're also waiting maybe 10 additional seconds for the stream of text to be "typed")... And, to my enormous surprise, it felt faster to users. (Of course after several iterations, it's actually much faster now, but the effect still applies: streaming feels faster than getting results right away)
  • david_allison 2y ago
    Mobile apps are constrained by accessibility (touch target minimum size), so you probably won't see the density renaissance you're hoping for.
• Signez 2y ago
  A rather disappointing read. I was expecting an analysis explaining why there is this trend towards very sparse interfaces, or practical ways of designing interfaces that are denser in the face of design trends that are pushing all product teams to do ever more spacing out. Instead, what I found was a reminder of the ‘laws of design’, which are certainly interesting, but which are only tangentially linked to this drift (in my opinion); and to take the most extreme example of sparse interfaces (the Bloomberg Terminal), without really any concrete elements that could help bring a little density back to our user interfaces. ...not to mention what ends the article, a lunar explanation along the lines of ‘Google's very high stock market valuation compared to Yahoo can be explained by the lack of density of its home page interface’ - really? Come on.
  • BehindBlueEyes 2y ago
    Agreed. Seems like a long winded lead up to what reads to me like a mildly condescending Gestalt 101, followed with the same examples I've seen in countless other blog posts over the last 15 years and very little in terms of actually discussing design trends.
• nolongerthere 2y ago
  > There’s an upper limit to information density, which means you can subtract too much ink, or add too much information. The audience matters, too: A bond trader at their 4-monitor desk will have a pretty high threshold; a 2nd grader reading a textbook will have a low one. I think this is the most important line: when taken with the axiom “design for your lowest common denominator” and the general advice given to lawyers in a jury trial “speak, explain at a 3rd grade level” The upper limit for information density has lowered significantly for the vast majority of general users, so unless you can fix that we’re not gonna get our high density UIs back. At least not for general purpose widely distributed applications.
  • shadowgovt 2y ago
    And where resources can be afforded to do it, there's a lot to be said for allowing complexity to be added, even if that is done on only one axis (a simple slider to go from "basic" to "advanced" display mode). Customization is also useful for power users, but even one axis of scaling up information density can be super useful for "easing in" to an unfamiliar tool.
• sebastiennight 2y ago
  This article is invaluable. We've done the trick of "short animations for delays <1sec", and "indeterminate loader for under 10sec", but one thing that's not mention is that the "determinate loader for waits between 10sec and 1min" is a huge marketing opportunity. This is where you get to show the value of the product by listing "how much work" is getting done. Similar to how travel sites will tell you, while you're waiting for results, how many airlines they're comparing on your behalf.
  • bluGill 2y ago
    > while you're waiting for results, how many airlines they're comparing on your behalf. Of course as someone in computers I know that the computer can do all of the actually work faster than my screen can refresh. Even accounting for network latency, all the work is done in less than 1 second - everything else is either inefficient code, or intentional delays to make the problem seem harder than it really is. Both of them are things that anyone with computer training should object to.
    • sebastiennight 2y ago
      Aha, yes of course I'm only talking about cases where the actual processing time is over 1 second and you can't help but make the user wait (or do something else in app in the meanwhile)... Delaying a 1 sec process to show me 10 sec of ads is one of the many definitions of evil
      • bluGill 2y ago
        Sometimes the ads are subtle. Tax software isn't showing ads directly - they are just trying to give the idea that taxes are hard and so you should be glad to pay a lot of money for it - even though all the calculations are a few ms for any modern computer once it has the data. However if you think taxes are easy the whole industry goes away.
    • calderwoodra 2y ago
      I'm not sure you're right here. I used to work with the hipmunk founders and I recall them mentioning that the comparison/flight search is actually pretty computationally expensive. Even Google flights takes special consideration to show loading indicators here, and I'm sure they've put a lot of resources behind making it fast.
• marginalia_nu 2y ago
  Almost everything wrong with modern web UIs is arguably down to the contradiction of designing for both web and mobile at the same time. These two paradigms are not compatible. If you try to build a responsive UI that caters to both, you'll throw one or more of the groups under the bus. If you want to do both paradigms justice, you need two separate designs altogether. Low density UIs specifically happen when you attempt to present the amount of information a 7" screen can display onto a 27" screen.
  • balder1991 2y ago
    What happens nowadays is that the big screens suffer and get a design made for mobile phones, with giant buttons and a lot of empty space.
  • pupppet 2y ago
    Somehow mobile-first became mobile-only.
    • malfist 2y ago
      My large company just launched a project to encourage previous employees to come back and apply to jobs again. Business decided it would be mobile only, web support is 2 years away at least. There's been a lot of issues because, A, nobody wants to install their previous employeer's spyware app, B, nobody wants to do job applications on a tiny screen, and C, a lot of the step up authentication requires the web browser, but is explicitly disabled for these folks meaning lots of them can't complete login. It's completely bonkers. The worst part of it all is the mobile app requires authentication for everything, including resolving tracking links and shortened urls. These people HAVE to go to the webpage to sign up and get the mobile app, but then can never visit the webpage again.
  • gedy 2y ago
    I actually support responsive UIs that work for small and large screen sizes - however, in past ~10 years this has been in vogue, I've rarely seen UX, product, or devs who really "get it". I.e. columns that wrap or resize, buttons that have labels and icons on desktop, etc.
• aurareturn 2y ago
  I have 1 rule: If you're building an app that people use for work and open every day, you should make it dense. People want to get work done, fast. They don't care about how pretty it is. Otherwise, you should make it sparse.
  • duxup 2y ago
    Generally that's my experience as well. Business apps that my customers want, crazy dense. Some of these I look at and I'm "man this is a lot of stuff" but ... then you get used to it and it works.
  • delichon 2y ago
    Two basic strategies: Design for the median user or the least common denominator. At web scale we are often driven to least common denominator out of self defense, because lower power users squawk more about confusion than median power users do about efficiency.
    • Lutzb 2y ago
      I think about this quite often when creating new applications. Four hypotheses why standard users are often the primary target of design: (1) Power Users are louder but mostly ignored due statistically being not relevant. (2) During design sessions the teams empathize with a standard user, not the power user. I've seen this pattern over and over again. (3) Current web technology makes it difficult to build high density UIs that work well. (4) Mobile UI first. If it works on mobile, we can just use the same UI for the web. All this leads to another problem: Your standard users never become high power users on your platform. In the end platforms become interchangeable.
      • rocqua 2y ago
        I think its all about new user acquisition. If your design is very dense, then a new user will be scared away. If you NEED growth, you can't afford to scare away users. You need to cater to them as much as possible. You need them to tell their friends "yes its very easy to get started with". It leaves no room for a learning curve. And this is also something we have come to expect. So anything with a learning curve feels like a massive investment, and we feel dumb whilst using it and not knowing how, because everything else is so dumbed down that it is instantly intuitive. This has made computers and software very popular and widely used. And I am happy for my (grand) parents that they can use these things now. But it has come at a great cost of productivity for everyone. Because even the designs where we would have invested the learning time to get faster, can't invest that time, because the interface is so simple it becomes limiting.
• magicalhippo 2y ago
  Our "oldschool" Windows B2B application is quite UI dense. Without looking overly busy, we've got information that can be viewed at a glance that other web-based systems use 6+ pages to contain. I've seen users struggle to flip between many views in some SPA to figure out if things are right or not in their other system, then come to our system to correlate and looking at one or two windows they see all the same data. I guess it's just the designers, though it seems CSS and HTML lends itself very well to information-sparse pages. As we're transitioning to the web, due to customer demand, this is one aspect which I very strongly want to keep. We'll see how it goes.
  • tracker1 2y ago
    You can be every bit as dense in a web based application... you can make it look the same pixel perfect if you want to go that far. I've never been a fan over overly dense applications, unless they are purpose built tools. There's a big difference between PhotoShop and Grubhub. Likewise there should be differences depending on display size and UX... If you're going to have users with finger/touch input, then you don't want things too close.. if it's mostly Desktop/Laptop, you can go much more dense with less issues. Do keep accessibility in mind, some of us zoom up a couple steps on many sites.
    • jimbokun 2y ago
      > There's a big difference between PhotoShop and Grubhub. Others in this thread have already pointed out the massive difference in information density of a printed menu over most menus rendered on a mobile device.
    • magicalhippo 2y ago
      > I've never been a fan over overly dense applications, unless they are purpose built tools. Thing is it doesn't look super-dense. It's just space efficient let's say. Our UI components, based on Win32, makes it quite easy to have relatively dense UIs that's don't look cluttered or busy. Like I said I'm sure you can do it using HTML and CSS, it just seems not to be done often. That said it's absolutely a specialized application. At least 99% of our windows/views would make zero sense on a mobile or tablet. > Do keep accessibility in mind, some of us zoom up a couple steps on many sites. Yeah we had to manually implement font scaling, before Microsoft added it to Windows. Certainly something we will support going to the web.
• divbzero 2y ago
  In addition to varying over time, UI density also varies across cultures. Currently, East Asian websites tend to have higher UI density than Western websites. See, for example, Rakuten’s home page in Japan vs. its home page in the US: https://www.rakuten.co.jp/ https://www.rakuten.co.jp/ https://www.rakuten.com/ https://www.rakuten.com/
• ChrisMarshallNY 2y ago
  This is a great article. Presenting information is an art form. A lot of it depends on what the information is, and also, who the information is for. One of my basic philosophies, is that the UI needs to get out of the way. This means not always using sexy little animations, everywhere (but still using them, if they also work as useful indicators of state transitions), proper contrast, minimizing overhead, like frames and controls, etc. Also, not crowding the display too much. That said, sometimes, we need a dense display, if we have been trained for it. That Bloomberg terminal is probably fine, for many folks, because they have been trained for it, and it's a daily tool. A lot of Tufte's designs need to be presented to experienced users. I remember the first time I looked at the train maps in the Shinagawa Station, in Tokyo. They were confusing AF. After just a couple of days, however, I had them down, and appreciated all that information. I tried using a fancy paid Git client, once, because it was just so pretty. After just a few minutes, though, I nuked it, wrote off the purchase, and went back to ugly old SourceTree.
  • User23 2y ago
    One fascinating thing about attending a Tufte seminar is after 2 days of a rigorous run through of, so far as I know, the only really rigorous attempt to create a science of design, the Q&A session was 80% people asking something along the lines of "Yeah, but I should still keep doing what I've been doing, because of these reasons that I want you to say are good." Frankly I was impressed that the man didn't literally face-palm, although judging by his expression he was in his mind. Sadly, so far as I know he's stopped doing live courses.
  • eitally 2y ago
    There's also a huge difference between "presenting information" and "presenting actionable information". If a display is required to complete a task it doesn't really matter what it [aesthetically] looks like.
  • jimbokun 2y ago
    > I remember the first time I looked at the train maps in the Shinagawa Station, in Tokyo. For an example like that, were they confusing because the complexity of all the train routes were inherently confusing to a newcomer, or because it was a poor visualization?
• carlosjobim 2y ago
  Set your browser to open every page in reader view by default and you never have to mind this crap again. Nor ads, nor cookie banners, nor auto-playing video, nor AI chatbot, nor newsletter popups. Hint: You can also force reader mode by pressing CMD+Shift+R
• tiffanyh 2y ago
  Slightly OT: seeing those screenshots of Bloomberg Terminal makes me wonder why they haven't picked a better (more readable) monospace font.
  • thrdbndndn 2y ago
    I'm not even sure if it's just how that font/typeface looks like, or the whole image is stretched horizontally.
    • mrob 2y ago
      Agreed. Squash the image back to 4:3 aspect ratio and it looks completely normal.
    • tiffanyh 2y ago
      Based on these two video demos, the font seems to be distorted (normally) https://www.youtube.com/watch?v=2ee-x6IXWK8 https://www.youtube.com/watch?v=2ee-x6IXWK8 https://www.youtube.com/watch?v=BqgqwO11abk&list=PLmUXemGpYYDBc89VxnVp7BV1-1yLyCetR https://www.youtube.com/watch?v=BqgqwO11abk&list=PLmUXemGpYY...
  • cptcobalt 2y ago
    Their users would revolt, it's a point of pride for B-unit holders to show off how well they can use seemingly inscrutable UIs.
  • frutiger 2y ago
    The Bloomberg Terminal has evolved from an 80x25 hardware terminal where the application layout was done remotely in our data centers. (Note, users and insiders refer to these as "functions" instead of "apps", but I'll use "app" throughout as it's likely more familiar to the HN audience). When we ported it to a Win32/GDI program, the client was kept intentionally "dumb" and so resizing the window led to distorted text rendering. This was necessary to keep the 80x25 cells aligned, as the layout was meaningful. Fast forward to the 2010s and we started offering our app developers a way to implement "more content" when resizing rather than just stretching it. Note also that there are plenty of "form"-style or "calculator"-style apps where there is no more content to show; in those cases resizing just adds more negative space around the UI. Now we are in the 2020s, and most of the apps have adapted to either "more content" or "more negative space" as needed. There are ~1000 apps on the terminal and they all have their own roadmaps and business deliverables, so UI upkeep cannot always be a priority. Opinions my own, etc. EDIT: the above information is still correct, even if the <img> tag in the OP article is distorted.
• croes 2y ago
  I hate it if I need to scroll horizontally just because the content only occupies a third of the page in the middle with great white spaces to the left and to the right of it. I have a wide display for a reason.
  • tavavex 2y ago
    Just because you have a wide display doesn't mean that all of it can or should be used. For example, lines of text not taking up the whole width is a good thing - if you have to turn your head to read across the screen, it's more straining and takes more time. It's the same reason why newspapers are printed in columns and not across the page. Now, depending on what kind of content you deliver, that empty edge space can be filled with something else (like what Wikipedia does) or just be blank if there's nothing useful you can put there.
    • calfuris 2y ago
      In general, I agree, but there are some things that should be allowed to go wider when the space is present. In particular, horizontal scrolling is evil. Sometimes it is a necessary evil, but forcing it because the wide content doesn't fit in the width that you are using for reflowable text is bad.
    • filleduchaos 2y ago
      > It's the same reason why newspapers are printed in columns and not across the page. In fact, arguably the point of a wide display is to create your own columns i.e. putting more windows on the screen, or more panels within a single window in an application like a code editor. What's the point of the real estate if you just put one browser window on there? I only go fullscreen to watch movies or play games, which is somewhat analogous to full-page media spreads in newspapers.
    • croes 2y ago
      If I have to horizontally scroll forth and back line by line to read the whole text I'm a lot slower.
• kstenerud 2y ago
  > The UI was much less visually dense, but more value-dense by orders of magnitude. The results speak for themselves: Google went from a $23B valuation in 2004 to being worth over $2T today — closing in on a 100x increase. Yahoo went from being worth $125B in 2000 to being sold for $4.8B — less than 3% of its peak value. Wait what??? THAT'S how you explain the differences in how their businesses fared - by the density of their UI?
  • stevage 2y ago
    Yeah it's such a dumb way to end the article. Google in 2004 was a search company. Google in 2024 is an advertising company.
    • tavavex 2y ago
      Google in 2004 was also an advertising company - it's not like there was a point where you paid for searching directly. 2024 Google is more of an everything company that's primarily funded by advertising - they tap into search and every kind of content imaginable, make hardware, do research. It's about the number of services - in 2004, Google had barely launched Gmail yet.
  • eviks 2y ago
    If all you've got is a high density hammer, everything looks like a low density nail
  • MetaWhirledPeas 2y ago
    > THAT'S how you explain the differences in how their businesses fared - by the density of their UI? Well it's a silly statement to make of course, BUT there is some truth behind it. Their search pages are a microcosm of their approaches to business. In 1999, the search page was THE reason Google was able to make traction. And you can still see the influence of that minimal design in their stuff today. It's kinda their thing. Yahoo! could have copied them. When they felt Google breathing down their neck that would have been the obvious thing to do (or preferably, way before it got that far). But to this very day they are stuck in their old ways! Amazing.
• whimsicalism 2y ago
  This trend seems to be a western trend. Here is somewhere where I think we could learn from the apps in Japan and especially China. I frequently feel for any app that I use frequently, i would prefer for it to have many options that I could use to customize its behavior. For instance, Uber
  • deleted 2y ago
    [deleted]
  • firexcy 2y ago
    > learn from the apps in […] China. Please don’t. Most mobile apps made by Chinese developers, esp. big techs, do employ grid, paged layouts everywhere as though multiple iOS home screens were squeezed into the app. However, most grids in such layouts are useless, distracting, and even malicious from a UX perspective, their mere reason to exist being to steer users into endless rabbit holes of the devs’ multiple lines of businesses for KPI purposes, and thus subject to constant and arbitrary changes. As such, you can find an icon for personal financing in a cloud storage app, or find an icon for groceries in a ride hailing app, only to be replaced with icons for online dating and hotel booking and something something a week later. This density of user-adversarial features is to be avoid by all means.
  • Analemma_ 2y ago
    As someone who reads Japanese passably well and uses a handful of Japanese apps and websites, I don't actually agree with this. Japanese apps certainly look more crowded than western ones, but it's mostly with irrelevant garbage, I don't think the density of useful info is actually all that much higher.
    • whimsicalism 2y ago
      I mostly was thinking of chinese apps, I’m not very familiar with japanese ones but saw others mentioning it so I put it here. In Chinese apps, I can post photos, message my friends, order food, call an uber, pay transactions, all from the same app
• stevage 2y ago
  >The UI was much less visually dense, but more value-dense by orders of magnitude. The results speak for themselves: Google went from a $23B valuation in 2004 to being worth over $2T today — closing in on a 100x increase. Yahoo went from being worth $125B in 2000 to being sold for $4.8B — less than 3% of its peak value. I liked the rest of the article until this nonsense statement.
• flobosg 2y ago
  > Tufte's examples of graphics with a low data-ink ratio (left) and a high one (right). Isn't it the other way around? High on the left and low on the right? EDIT: Based on the alt text both images should be swapped.
  • jiehong 2y ago
    And on mobile those are stacked so left and right don’t make sense…
  • ilikescience 2y ago
    oh, you're totally right. good catch! i'll fix it in a minute.
    • flobosg 2y ago
      Thank you for the write-up! I also caught a small typo: > You can form an opinion about the density of these websites simply by looking at an image for a franction of a second.
      • ilikescience 2y ago
        fixed that one too! thanks!
  • roenxi 2y ago
    I was sad about the Tufte example because it looks really interesting and didn't get the much treatment about the trade offs to density (I'm sure Tufte went in to all of it extensively even if he came down on one side). I suppose the author didn't consider it relevant. Those little + make the left graph much more expert user friendly. A chemist isn't looking at the graph to see that there are peaks (they know that, they're chemists), they want to find actual points on the line and the + are enabling a level of eyeballing on the low-density graph that isn't possible on the right. If I'm a heavy graph user, I want the low density one. The high density one isn't for daily use - it is for appreciating as a one-off or learning about periodicity of elements.
• gonzo41 2y ago
  This is a good article. I always try and articulate these point by talking about how useful and quick and dense phone books where when they existed. And as for fast load times. Might I say that server side rendering may just have a reason to exist again!
• graypegg 2y ago
  I really like the distinction of "density in time". JIRA is a really visually dense application, but it's speed, as well as the number of different screens you normally need to click on makes it feel really sparse despite the dense visuals.
  • w10-1 2y ago
    > the number of different screens Differance - the difference that makes a difference. It's not just more, or density: you need to sum the cost of context switches, which depends on context size and continuity with prior, i.e., delta size, which in turn depends in part on relevance i.e., which parts really matter. Design by committee (including one person over time) loses the natural continuity and integrity of an initial idea.
    • sph 2y ago
      > Differance - the difference that makes a difference. The first derivative of difference?
  • naravara 2y ago
    The places where Jira is dense it is extremely cluttered and difficult to parse. And then places where I’d like Jira to be dense, it’s inexplicably not. I’m looking at a Kanban board right now. I have a 41 inch display and I can see a total of 9 issues at a time across three columns. And that’s with basically doing everything I can to maximize the space for the board and minimize how much chrome goes around it. I have no idea how anyone uses this thing on a laptop display. It’s awful.
  • guhidalg 2y ago
    Call it what it is: slow. Slow software is bad software.
    • swalling 2y ago
      It's not just performance, it's also that the number of clicks to perform common actions is way too high because of feature bloat, extreme levels of customizability, and just plain bad design.
• mrob 2y ago
  100ms is much too long to feel instantaneous. Open a low latency terminal such as xterm (ideally also with a high refresh rate gaming monitor and gaming keyboard), and compare "sleep 0" with "sleep 0.05".
• burntalmonds 2y ago
  That Yahoo screenshot really took me back.
• jrd259 2y ago
  You might also want to discuss Fitt’s law. Difference between a diagram (Tufte) and a GUI is that we only look at a diagram, but a GUI we interact with, which means we need to ensure people can actually click/tap/select the element of interest. Higher density makes that harder.
  • mbishop 2y ago
    I was with you until the last sentence. Removing borders makes it harder. Not being able to see the actual area of a clickable target makes it harder. I never had trouble knowing what to click in the early 2000’s, when UI was ostensibly more dense.
• breadwinner 2y ago
  Here's a particularly bad example of lack of density: https://investor.vanguard.com/investment-products/mutual-funds/profile/vtmsx https://investor.vanguard.com/investment-products/mutual-fun...
  • switch007 2y ago
    The vanguard (UK) control panel is a hot mess too. I don't find it intuitive at all. I never know where to find important information.
    • Ylpertnodi 2y ago
      ...it's a feature.
  • robertoandred 2y ago
    And a particularly buggy sticky nav there
    • 8organicbits 2y ago
      I've been on a JavaScript purge recently. One of the underlying concerns is that giant companies can't even build the basics right, like this sticky nav. Front end developers can get JavaScript when they can build reliably. It's not like you need a sticky nav either, it's just extra page load time. Plain HTML just works.
  • KaiMagnus 2y ago
    Wow, the headline is so large, I'm having trouble reading it. Then there's the sticky header, on my screen it takes up 1/5th of the available space. Or the headings, subheadings and tabs that float away (proximity principle from the blog post) and the column of text, that becomes hard to read because of small line length. It clearly looks designed, but they should take a look at this post.
  • while_true_ 2y ago
    At the other end of the spectrum, I've always appreciated the density of FINVIZ: https://finviz.com/# https://finviz.com/#
• jrd259 2y ago
  The example of low and high data-ink (from Tufte) is switched. I wrote the author to suggest it be fixed
• pants2 2y ago
  This explains exactly why physical restaurant menus are so much better vs mobile site menus. If I'm viewing the menu of a restaurant on my phone, I always look in Google Maps for someone who took a picture of the menu, because it's a dense UI. Every "mobile friendly" menu site is able to show maybe 5 items on the page at once, so it takes many pages of scrolling to see everything.
  • marcosdumay 2y ago
    I love how "mobile friendly" seems to just mean it will waste some space your phone screen can't afford.
    • fbdab103 2y ago
      Plus, if there is wasted space, you can jam an ad in there.
      • deleted 2y ago
        [deleted]
    • anal_reactor 2y ago
      I permanently use desktop mode on my phone browser
      • psnehanshu 2y ago
        Why on Earth?
        • nofunsir 2y ago
          Because it's objectively better. I also exclusively use desktop mode, and I can tell when a site's designer can't comprehend this choice.
          • unclebucknasty 2y ago
• dugmartin 2y ago
  I'm dealing with this now on an accounting app I'm building that runs on both mobile and desktop. I've come to the conclusion that the mobile app and desktop app will need two very different designs. I want the mobile app to be useful for quickly checking a dashboard view and to easily enter transactions while the desktop app needs to be very dense with the choice of a compact view to reduce padding ala Gmail.
• ivanjermakov 2y ago
  > Actions less than 100 milliseconds apart will feel simultaneous This is not true for some things and people. I would not call those simultaneous, rather bearable. Most users wouldn't mind it. Input delay though is very noticeable. If keyboard or mouse have 100ms delay the user might consider that their device is doing something heavy. And people who got used to fast software, e.g. optimized code editors or games, are even harder to please.
  • deleted 2y ago
    [deleted]
• onemoresoop 2y ago
  Related to UI but not exactly on density. Even Refilling a prescriptions from Wallgreen's seems to have become impossible from a smaller phone such mine - IPhone SE2020 - since the control to choose the pharmacy or add a zip code for searching one is not actionable, the interface automatically scrolls down and when I drag the page I can see that it's there but there's no way to access it. It appears to be some kind of React garbage optimized for larger screens but completely and utterly broken on slightly smaller ones. It's not that I have anything against the technology itself but it broke basic functionality of yesteryear that just worked. And to what avail? All seems broken and ugly these days. And this isn't even about looking under the hood and analyzing the waste this wave of technology has brought. Where are we heading to? Is everything about to get worse and worse? Who is benefitting from all this because the user isn't...
  • tracker1 2y ago
    I'm with you... I use a 5.9" phone, but have accessibility/font settings maxed out. There are a lot of sites with limited or broken functionality. Modal dialogs are the absolute worst... they should be configured to just take over the screen on smaller displays, with the region as scrollable. It's easy enough to do, and has been my approach for menus and modals for a long while now.
  • jakubmazanec 2y ago
    I'm sorry, but what does poorly implemented responsive design have to with React? I agree with you that most websites are very poorly made, but that's not React's fault (as much as it is being constantly shitted on here on HN, which I really don't like), only developers' (and their managers'). Please stop blaming frameworks.
    • tshaddox 2y ago
      It's true that React almost certainly wouldn't be responsible for what sounds like a blatant layout bug on a narrow smartphone viewport. React has almost no opinions on things like web page layout or touch interactions. I have to imagine the commenter invoked "React" as a sort of scapegoat for the prevalence of low-quality web pages.
• kazinator 2y ago
  user-density x ui-density = constant
• btbuildem 2y ago
  A good read; it captures a lot of the key points. I'd like to mention consistency -- especially for complex UIs. An expert user who has taken the time to learn the ins and outs of menus and keyboard shortcuts will RESENT you for making what seem like (and often are) superfluous changes to their workflows.
• picture 2y ago
  Looks like the author draws a lot from Edward Tufte's The Visual Display of Quantitative Information - I would recommend it to anyone interested in design, it's a very interesting read with a lot of neat visuals. Some complain that it might be a bit heavy on map related examples, but I say that's no problem since maps have pretty much the same goals as effective UX, that being organizing and presenting information to the user accessibly.
• DeathArrow 2y ago
  High or low density, what matters to me most is how easy is for me to gather all the information I need and how fast I can act on it.
• DrScientist 2y ago
  Surely some of the reasons for more sparse interfaces is that on mobile: - Peoples fingers are relatively fat and inaccurate. - They are slower that desktop - so you'd break the load into parts - The vertical scroll form factor and screen size limits what you can do. - Things which are massively useful on desktop - like searching in a page or visually scanning a large doc are much harder on mobile.
  • ourmandave 2y ago
    ...relatively fat and inaccurate. A succinct summary of my high school coach's review of me.
  • bbminner 2y ago
    > Things which are massively useful on desktop - like searching in a page or visually scanning a large doc are much harder on mobile Interesting, am I the only one who almost always uses "search on page" and glimpses/scrolls over the entire page before reading both on mobile and desktop? Especially if I just came from a search engine, I search for the "highlighted" phrase.
  • zozbot234 2y ago
    > Peoples fingers are relatively fat and inaccurate. They're accurate enough to tap on a single OSK key and get it right most of the time. Regardless, tap targets are only a very limited factor in UX design, so there should be plenty of scope for enhancing information density after accounting for that.
    • __float 2y ago
      It's important to note though that the _actual_ touch targets for keys are influenced by what you've already written. You can miss the key from a visual perspective but still end up with the right letter as a result.
      • TeMPOraL 2y ago
        Are you saying some keyboards are gaslighting users and screwing up their ability to improve their typing accuracy over time?
• galina700 2y ago
  [dead]
• interloxia 2y ago
  I like the term value density in this context. Continuing on from the Google/Yahoo example, I would be interested in the author's analysis of not just the landing page, but also the results pages. The search "value density" on google, bing, youtube, hn, chat.openai.com etc. are quite different these days.
• AlienRobot 2y ago
  I love dense UIs, but in my experience they're very hard to design. You can easily make an OK design if you add a lot of space and padding, but to make a dense UI look good you need custom borders and textures, and you need a permanent vision so you can add more widgets later that won't look weird. It's sadly not a paradigm that works in many scenarios.
• Gbotex 2y ago
  theres so much i dont know
• hgyjnbdet 2y ago
  So is dense information good or bad? I can't work out what the conclusion is from the article, is it a case of context? I don't understand :(
• pquki4 2y ago
  Missed opportunity to use hacker news as an example
• qwertox 2y ago
  I love dense UIs. Yesterday I upgraded Chrome on Windows and they replaced the folder icons in the bookmarks bar. They changed it about a year ago, but there was a flag which allowed to revert it to the "old" interface. This flag is no longer effective. Now two folder icons (ridiculous outlines of folders) side by side take up the space of three old yellow folders, and the menu item entries are all bold and super spaced, so I need to scroll a lot. In every Google product I first set everything to compact mode. What is it what makes these designers think "let's make this item take up a lot of space"? Don't they think that people also want as much on screen as possible? To me this is a dark vs. light UI discussion: compact vs. spaced.
  • skydhash 2y ago
    The one reason I loathe to use Dropbox web app was the big buttons. It's like they were designed to be projected for training and not to be used with a desktop. The main important view (the files list) only got 60% or so of the physical space.
  • david422 2y ago
    Uggh, Chrome on Linux did the same thing. It honestly looks like someone updated Chrome but forgot to test on linux. Why are popup menus all bold and twice the size of system popup menus now?!?!??!
• _9hey 2y ago
  Density is spatial, Frequency is temporal I wouldn’t combine them into a single metric because that combined metric is less useful
• thehoneybadger 2y ago
  The Visual Display of Quantitative Information is one of my favorite coffee table books. Props for a Tufte reference!
• dgreensp 2y ago
  The author doesn’t deliver on the promise made early on the essay to examine the question: Why have UIs gotten so sparse? It’s like entire web design world decided more whitespace is better, and won’t hear anything about it. And now some desktop apps are being designed like web apps. Or take Hulu on my Roku, it will literally only show the first three lines of a four-line movie synopsis, surrounded by tons of space, and make you expand it, via multiple button presses on the remote. I once implemented a file list view for a start-up I was working for, off of a mock from the designer, similar to what you see when you are browsing Google Drive or Dropbox in a web browser, but with only one view, a list view with very large icons. The amount of whitespace was massive; use of screen real estate extremely poor. But then, these web UIs never look like the Finder, or Outlook, do they? They could. They could feel almost as snappy, too, with some allowance for network roundtrips. The Finder is actually pretty slow these days, even on a high-end MacBook browsing local files. There are lots of pauses and stutters. There’s an unspoken rule against labeling things, too, if you can use a row of inscrutable icons instead. There will always be designers experimenting with taking things away. Apple has done it plenty. What if there were no scrollbars, no ports, no home button or menu bar (just swipe from the edge of the screen), no keyboard, no headphone jack. Sometimes it’s a bold direction, occasionally a clear net negative. But minimalism is a thing, it just has to be tempered. Often, design “trends” are just trends, in my (admittedly cynical) view; there isn’t necessarily any merit at the core, or the people propagating them seem more interested in conforming to trends than asking what is good. The dynamics of fashion are easy to underestimate as an engineer. People love to copy things. People who grow up watching action movies and become action movie directors just want to make an action movie with all the action movie tropes. That’s the main thing, not necessarily picking the things that work well in action movies and bringing in some things that just work well, period, that are original or timeless, like good directors or writers do. Besides people loving to copy, people sometimes think following trends is why something will sell. If you’re making clothing and you aren’t hip to this year’s styles and colors, no one is going to buy your stuff, is the sentiment I presume. It can easily become overwhelmingly about conforming to trends. Designers also tend to put famous people and sources of influence on pedestals and think they will never be 1/10 of the genius of, say, the person who decided that some famous building should look like a pile of mashed potatoes, or that an Apple billboard should just be black text centered on a plain white background. In art, as in philosophy, there is so much pressure to agree that certain people are good, regardless of any objectivity or lay opinions—so much focus on status—that to even think of what you are doing as potentially-good-in-others’-eyes, you need to copy someone or some brand with high status, or somehow attain your own status, is how I think people sometimes feel. In other words, designers of UIs might falsely think the customer cares about trends and fads, and that their work will be evaluated through a system of reference points and status divorced from actual merit, as can happen in the design world and adjacent spheres (art, fashion, etc).
• shibel 2y ago
  Off topic: I’m halfway through the article and can’t help but notice the relatively high number of times a word is erroneously repeated twice; wondering if it was “edited” by AI.
• shepherdjerred 2y ago
  On one hand, we want the web to be accessible and weird: for anyone to make a webpage and share their thoughts. On the other hand, your site better be perfect, even if you aren't a professional web developer. If you are a professional web developer, you probably still won't meet the bar (though you will probably use fancier tools). It's a funny dichotomy. What is anyone supposed to do?
• physicsguy 2y ago
  One thing that really frustrated me with some designers in the software industry is that they seem to want to instinctively do very sparse designs akin to Twitter, etc... I've typically worked on engineering/scientific software where the audience want to see a lot of information and have many controls on the screen at once, often with customisation to make their workflows easier.
  • vundercind 2y ago
    They do it while claiming it’s easier for the users, too. I call bullshit. I want to see the studies. I very much doubt they exist. One of the only sites my elderly father who can barely use a computer at all can navigate unassisted with any amount of confidence is craigslist. The “friendlier” and more “modern” the site (or app), the greater chance he’ll get lost and confused in it.
    • JohnMakin 2y ago
      I think it's provably bullshit with a simple thought experiment - what happens when you make a site "sparse" (removing controls, more whitespace, less information density)? Things that used to take 1-2 clicks to do take many many more clicks, as menus get buried under sub-sub-sub menus now to accommodate all the space you just wasted. When I'm designing a UI for personal use, I design by how many clicks it takes me to do a common task. Any design implementation that increases that metric is a hard no to me. It's a very provable, easy metric. More clicks = less usability. Full stop. Especially when the clicks are hidden behind confusing and inconsistent icons that you usually have to guess the meaning of.
    • FridgeSeal 2y ago
      I bet the study, if there is one would be something like “some degree of white space can be helpful for delineating sections” and that conclusion has just been wrung to the ends of the earth, producing todays pointlessly sparse UI’s.
  • skydhash 2y ago
    People can read. What no ones like to do is deciphering icons or hunting for elements because every updates keep moving them around. And relayout, because SPAs. In the old days, you learn what a button does and you can expect it to stay where it was for years.
• ProxCoques 2y ago
  This is of course a great, well-written post, clearly summarising various important and even immutable principles that have been part of information design for over 25 years. Too bad the vast majority of designers being paid to create UIs today not only won't read it, but wouldn't understand how to even use it. UI design today is utterly full of fail because the people doing it are so far away from the type of thinking in this post that they wouldn't know a well-designed information space if it exploded in their custard.
• fagrobot 2y ago
  much enjoyed
• gmiller123456 2y ago
  When I hear of the preference of form over function for data, I think about the sinking of the SS El Faro. The captain relied on weather data from a Comercial service because they were pretty. On the "black box" one member of the bridge had said something about the weather stats and another person mocked "oh, but that's not a pretty graphic" (the captain was below sleeping). They had tried to get the captain to agree to change course many times, but he always refused telling them to come back if things got worse, unaware of how bad it already was since he was below deck. He had never bothered to notice the data his service provided was several hours old, and ended up sailing right into the eyeball of a hurricane.
  • escot 2y ago
    Interesting, do you have a source?
    • gmiller123456 2y ago
      There's a lot out there, it is considered one of the worst US marine disasters in modern times. This seems to be a good overview: https://apnews.com/article/technology-business-storms-only-on-ap-9d5904f83f6a4cf784828107fa7d038d https://apnews.com/article/technology-business-storms-only-o... Wikipedia is a good place to dig deeper, the article has over 60 references. https://en.wikipedia.org/wiki/SS_El_Faro https://en.wikipedia.org/wiki/SS_El_Faro The NTSB report is over 300 pages, I have not read it: https://www.ntsb.gov/investigations/AccidentReports/Reports/MAR1701.pdf https://www.ntsb.gov/investigations/AccidentReports/Reports/... There have also been several HN discussions, this has the most votes (477): https://news.ycombinator.com/item?id=16757343 https://news.ycombinator.com/item?id=16757343
• beryilma 2y ago
  Information density in many areas are out of whack these days. Reminds me of people taking pictures of my presentation slides at conferences where four bullet points with short phrases (say, 50 words in total) turn into a full 12 megapixel photograph. Similarly, my entire PhD thesis written in LaTeX is a 4MB PDF file, whereas my wife's is a 700MB MS Word monstrosity. Both are mostly text, math, line plots, and tables...
• causality0 2y ago
  The vomitous waste of screen space in UI these days feels like the digital equivalent of inflation. My phone has four times the screen area of my first smartphone yet it shows the exact same number of notification when I drag the bar down.
• mhh__ 2y ago
  Bloomberg is kind of a funny one in that on the hand it's extremely dense but the density is very local. Lots of numbers in Bloomberg should really be a clever chart rather than a bunch of numbers. There's a reason why traders have so many screens, often so they can build their own visual equivalent of the pile of numbers e.g. it's nice to have a chart where you left it. Speaking of numbers in finance: A problem I have using what I'll call "big tech data" tools in finance is that I often need to care very deeply about fractions of a percent whereas these tools are basically made for terabytes of sloppy data for use in a machine learning model.
• karaterobot 2y ago
  Dense UIs certainly have a place. But, simple UIs are not a fad, as it seems some people in this thread see it. The goal is as simple as possible, but no simpler. The majority of applications and websites you interact with should be simple, and a few should be complex and dense. The reason is that you aren't an expert at most applications and websites, and you want them to be simple, so you can do the thing you want to do without investing much effort. But for applications you know really well, and use all the time, you want them to be more dense, so you can get more things done with fewer steps. Because there is no easy, cost-effective, or even feasible way to scale the same application's UI complexity smoothly from newbie to expert, the designer almost always has to try to thread a path between the two extremes. This path has to make sense for the use cases they know about, and the largest share of the users they want to serve. This is extremely hard, not extremely simple, as it may seem from an observer's position.
  • ajmurmann 2y ago
    I think you are correlating "simple" and "sparse". Sparse looks simple but in practice might be harder to use. Mobile restaurant menus, as discussed here a lot, are an example where this doesn't align. In general having to scroll a lot when I could see all information needed at once makes things harder, not simpler.
  • oneeyedpigeon 2y ago
    Maybe we need a new CSS relative measure? Call it something like the `tem` - time spent interacting with the interface...
• pilgrim0 2y ago
  Most apps and sites don’t have much to show for, especially institutional ones. So you’re left with a whole lot of space to fill with… something. Even if you have text, most text is pure noise, also made to fill space, that goes for images too: you just have to render stuff to convey that you’re unique, insightful, trustworthy and so on; that goes for brands and individuals. I do feel the heavy preference of users of this site towards low whitespace (they’re users, after all), and I don’t personally like it, not because it’s distasteful, but because it makes me do a lot of mistakes and confuses me a lot, so I waste some time compensating for the lack of adaptation towards my ergonomic and cognitive needs. But I won’t hate on it. I embrace it because it serves me well. The same goes for whatever style you wish to shape your content. I think we start to see design when what’s contained in it offer little to no value (considering it’s minimally usable). So I think good content is what we should primarily strive for, whatever style we package it in. It’s funny how most clients get visibly uncomfortable when you make a design that’s direct. Don’t hate on designers; most just do as they’re told, or they’re selected based on the traits the higher levels expect. It’s an illusion to think most professional designers own their work and can reasonably be blamed, if anything, blame the market’s invisible hands.
• oneeyedpigeon 2y ago
  Many people overlook the most obvious gain: remove unnecessary content. This includes words.
• constantcrying 2y ago
  I think what is also important is "searching with your eyes" vs "searching with your fingers". If you have a lot of information to present, you can either have it hidden away or try to present as much of it as possible all at once. In the first case the user has to search for it by clicking into submenus or scrolling in the later he can search by just moving his eyes. I do think that searching with your eyes is often preferable. It is all around faster, especially if you realize you have been mistaken and need to search again.