What UI density means and how to design for it

More and more I find myself wondering about the use cases companies imagine when developing websites and apps. My bank is trying to implement a new UI for their online banking and they are trying to mimic the UI of their mobile app.

The issue I have is that the mobile app is already so dumbed down that it's pointless and I don't use it. When you have limited screen space you need to decide what to show first. For my bank it's the status of a MasterCard credit card I don't own on the first screen of the mobile app. Next is some pointless overview of my accounts. I say pointless, because all context has been removed, in favor of massive amounts of white space.

Now they want to replicate this interface, but for larger screens. Most of the screen is white space and you have to click on everything to get details, details that would fit perfectly well, even on a small laptop screen. Also nothing is obviously click-able, because why would you add visual clues that just taints their beautiful white space.

For the most part I think that companies would love to ignore desktops and large screens. In some sense they may also be afraid of presenting users with details overviews, either is to make everything seem more friendly, or to discourage usage.

You have a good point, though I'd say at the heart of it the issue is that design is just complex and there's no one true way to do it.

You point out web vs mobile, but of course as you probably use "web" as a shortcut for "PC", web also applies to mobile. Then on a 27" screen you might have one window full screen or 20 windows overlapping and an actual 7" browser to display the site. And others will be on PC, but with a 13" touch screen. And others on a 10" phone but split in half.

Then some people will increase text size and your design will need to deal with it.

Before you realize it you have dozens of constraints and requirements to think about, start dropping some to satisfy others, and inevitably people will be pissed at the result.

If you want to do both paradigms justice, you need two separate designs altogether.

How do you reconcile this with the fact that you need almost double the effort for 2 separate designs? I'd say you need at least 2x of Designer work and at least 1.5x of front-end Dev work to achieve this.

Where will additional resources to support this come from?

Except that studies show that users expect both similar content and experiences regardless of device. Responsive web design, with progressive enhancement, is the foundational bridge to make this experience work well.

Just because someone experiences a less than ideal experience of RWD in one or more places doesn't mean to group all RWD UI experiences together as bad.

It's more practical spend less time developing and testing one global component than more than one.

I prefer to think that responsive design is still in its relative infancy and as an industry we simply have not completed the shift in mindset that is necessary. When we work stakeholders who are not technical it's clear that they're 1,000 miles away from the mindset, and the average designer is still somewhere from 10-999 miles away. Fluid design is a big step forward and while we still don't have anything near a bible these are some example principles:

* Size elements relative to the size of the viewport, some things should be smaller on little viewports, some things should be a little bigger, the CSS units for this are still just coming together. Use formulas and percentages, not pixels.

* Think about the correct layout direction for everything on a portrait vs landscape orientation, should those items be in a row or a column? This often requires only one CSS property to change

* Hide information density behind an accordion or modal if you need to on small viewports, don't just remove the functionality for all versions of the application. When people strip away functionality, I find design is rarely the true justification -- more commonly they no longer want to pay the maintenance cost of the feature and are using a redesign as an excuse.

Low density UIs were a scourge before mobile. There has always been a kind of designer who privileges "negative space" over everything else and can't imagine any greater luxury than having a 27" screen and devoting 26" of it to whitespace.

I have a 38" curved wide screen with 1600 vertical pixels. It represents the peak of all the monitors I have bought over the last 25 years.

Me in the year 2000 with a 1024x768 17" CRT would be flabbergasted at the amount of wasted/underutilized space that exists today.

Vertical space is precious, and it's why I paid more to have those 1600 pixels. And then Microsoft decides to not only enlarge the taskbar, but to not provide an option to turn it back to normal. I have to resort to hacks to wrangle MS Windows (primarily a Desktop OS the last time I looked) back down to size and reclaim my vertical space.

Somehow mobile-first became mobile-only.

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.

I think it’s actually that designers as a group feel like they should not have to understand the product they are designing. This is why the modern uis are so minimal and lacking in features for people who actually use the product in a way that is deeper than trivial.

Imagine a current era designer trying to design Photoshop without just copying an existing system. It would be useless.

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.

Even the web was already taking a bad direction, too much interactive magazine instead of function/tool paradigm.

This is the reason I don't envy the UI designers on products like MS Office. There are professionals who use products in the MS Office suite every day, but there are other users who only need to create the occasional spreadsheet or powerpoint. Even if you think Microsoft has done a poor job with the UI, one can't deny that reconciling the differences between casual and power users is a difficult job.

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.

My last gig I built a campaign management interface. The designer kept coming back with something that showed 10 lines per "screen". I kept showing them the excel spreadsheet we were replacing that had been configured with 8pt fonts so it showed dozens per screen. It's really hard to switch design patterns from consumer/prosumer to professional.

Knowledge workers who "live" in the tool want as much data as possible, as quickly as possible.

Dense every time! Youtube and Twitter’s UI’s are so sparse they display the same amount of information on my phone (6.1”) and my desktop (24”). And they waste vertical space like their designer only use square/vertical monitors. I’m clicking with a mouse, I’m not touching the screen with a brick.

Yeah, some tools are built for complex, niche workflows and as a result need to have information and control density. You can't design away the learning curve in these cases and probably shouldn't try to or you'll harm the pro-end of the userbase's UX, meaning someone can't do their job quickly/efficiently enough.

I'm 100% with you. I ran an Enterprise Apps org within corporate IT for about 15 years and the #1 rule is that the tools must be functional.

Unfortunately, this frequently results in technical debt because "functional" often means "complies with whatever business logic the current sponsoring org (Finance, HR, Supply Chain/Procurement, Ops, etc) wants that week, and the result of that is that many internal enterprise apps get wholesale rewrites every 4-5 years because it's easier than refactoring.

This set of phenomena is completely foreign to SWEs and PMs who have only ever worked in big tech, on consumer products especially, and the reality is that while some engineering teams in some companies are sometimes doing hard and creative work, the majority of big tech SWEs "moving protobufs" is much easier and less complicated than the kind of crap faced by enterprise IT.

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.

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.

I've seen a lot of React interfaces that don't scale well - and even worse don't allow you to scroll to the bit you can't see!

As I assume it's possible to have scalable interfaces in React - what's the common mistake people are doing?

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.

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.

Yeah, but it's beautiful. I guess that's the main goal of a page like this.

IMO, that's a huge red flag. If the sales information puts beauty before functionality, that's an insurmountably amount of contempt they are showing for you before you even become a customer.

On an investment company it's even worse, because contempt is less likely than they just wanting to actively select dumb customers. That's a very strong indication they'll try to steal my money (I have no idea what this one site is tough, it's not my opinion on them, it's what their design choice makes me think).

But hey, it's very beautiful!

At the other end of the spectrum, I've always appreciated the density of FINVIZ: https://finviz.com/#

Font Size vs Density

There's a trend of using larger fonts sizes due to Accessibility, but it comes at the cost of reducing density.

And a particularly buggy sticky nav there

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.

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.

Related: Why Japanese Websites Look So Different – https://news.ycombinator.com/item?id=37722348

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

The problem is that the era of zero interest rates and (mostly unprofitable) advertising-based business models means the tech industry shifted from making tools to benefit the user to "tools" that waste the user's time. Company targets are often measured in "engagement" such as screen time, DAU/MAU or pointless metrics about how many times some button was clicked.

The zero interest rate era is mostly behind us, but the mentality remains and company targets are still often based on that, so employees are not incentivized to make products more efficient for the user since doing so will reduce the DAU/MAU or whatever metric they're judged on.

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.

Another thing not mentioned in the article is for delays >10s, a loading bar that fills slower at the beginning and faster towards the end feels faster than one filling linearly or accurately reflecting progression.

Using load times to convey something while users wait is fair however I would bet shorter loads times always beats however good a filler, unless your business is to trap users in load times to feed them more ads of course, in which case that's a whole other problem.

Meh. This is a prescient vision of websites that deliberately take as long as a YouTube video to load because of an ad.

I find those sorts of fake delays to be infuriating. Depending on my mood, and where else I think I can get equivalent information, there is a pretty decent chance that about halfway through the BS progress sequence I'm going to navigate to a different site.

At best it makes me think the site was designed an implemented by incompetent people. Not a great look.

I'm not even sure if it's just how that font/typeface looks like, or the whole image is stretched horizontally.

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.

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.

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.

I think the best infographics are kinda like that indeed.

And even then it's user/domain specific. What is salient for a user who's an occasional user of your software vs someone who uses your software professionally every day is very different. You stop having to tune for a visual language that's universal-ish and instead have the ability to build-out a denser set of metaphors.

The "design needs to be understandable by the person writing the check who will never use it" problem is all over enterprise sales leading to software that doesn't need to look like $trendy_consumer_app but has to anyway to get the sale.

I love how "mobile friendly" seems to just mean it will waste some space your phone screen can't afford.

Yea I still don't get how little the mobile web takes advantage of pinch to zoom.

Definitely understand the tradeoffs here but you could set your default text size in your OS settings to be smaller to get more volume on your screen.

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.

Keep in mind if you're selling to new customers, they may find your web app "dated". The new customers likely won't compare the web app to your desktop app, but to other competitors web apps. And these days the expectation for better or worse is that web apps look and feel a certain way (favor whitespace). I'm sure a dense UI can still look clean and modern, but it will take more effort.

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.

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.

...relatively fat and inaccurate.

A succinct summary of my high school coach's review of me.

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.

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?

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.

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.

If all you've got is a high density hammer, everything looks like a low density nail

oh, you're totally right. good catch! i'll fix it in a minute.

Call it what it is: slow. Slow software is bad software.

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)

Mobile apps are constrained by accessibility (touch target minimum size), so you probably won't see the density renaissance you're hoping for.

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.