site banner
PaperclipPerfector  4mo ago (text post)   3684 thread views

Small-Scale Question Sunday for January 7, 2024

Do you have a dumb question that you're kind of embarrassed to ask in the main thread? Is there something you're just not sure about?

This is your opportunity to ask questions. No question too simple or too silly.

Culture war topics are accepted, and proposals for a better intro post are appreciated.

4
Top Bottom Old Controversial Comments
Jump in the discussion.

No email address required.

How do people feel about white space in web design?

There has been this ongoing trend of massive amounts of white space, where it's basically a single sentence per screen. I find the experience awful on desktop. But only mildly annoying on mobile.

I'm also trying to find professional web design blogs or posts that point out how annoying this trend is. Instead all designers seem to have nothing but nice things to say about white space. Rather than making me think I'm wrong for going against all designers I instead just think the whole profession is wrong.

Also, related: round userpics, which waste space. Cut corners aren't filled with any content. (could be buttons or indicators, at least) I abhor modern design. We probably would have much better designs if we had small screens like in past.

Maybe a part of problem is companies want to increase women representation, and women prefer doing design/UI/UX so users have to view needless frequent redesigns.

round userpics, which waste space.

I'm going to defend this a little bit, too. If a profile picture is designed to show one's face, having it be a circle makes sense since that's how faces are generally shaped. With a square box, you're also showing your shoulders in the picture and it's a little more awkward to get the picture framed just right.

Of course, that's assuming you'd prefer to share your face and use your real name, something generally more conducive to the goals of female users than their male counterparts. It is absolutely more inconvenient to have to fit a more generic square picture into a round hole.

If user wants circle, they can replace corners of their userpic with white/gray/whatever. This is always available. But users wishing for square are denied choice by designers. Sometimes website forcefully changes existing square userpic to circle, and the pictures were never framed for circle.

Human faces are more oval than round. Ovals were pretty popular in 19th century (also, it saves expensive silver in mirrors and pictures). I remember oval photos of my classmates in pre-internet time. Handsome male faces look more like rectangle than oval gigachad.jpg

showing your shoulders in the picture

even if it, what is the problem here? Why showing Adam's apple is good but shoulders are a no-no?

little more awkward to get the picture framed just right.

AFAIK none of smartphones/cameras have circular frames for shooting pictures for a circular userpic.

I find the experience awful on desktop. But only mildly annoying on mobile.

Well yeah, that's because it's all designed mobile-first. It's probably also worth noting that sure, people have very high resolution screens now, but if they're over the age of 20 they'll probably be running them at 125 or 150% scaling (if they're over 50 and somehow know enough to touch the slider, even 200%, though other OS UI elements start going fucky at that scaling factor). So your 1920x1080 display at 13" is closer to the old 1366x768 after that scaling.

Also, whitespace provides a clear space where users aren't expecting buttons to be (since mobile design in general necessitates the implicit understanding that if you want to interact with a row, you tap the row- there really isn't space for '90s-style buttons and drop shadows). If you present a list to a user on a phone of information (and this isn't in the "I already know what's in this playlist" sense), you need to provide a place for their non-transparent thumb or fingers to scroll the screen so they can scan the page. Usually this is to the right of the text, but can be placed to the left as well for languages whose words start on the right of the page, if we care about them (and designers are typically, ideologically-speaking, the type of people who will even if they never get any users that do).

Whitespace also provides a space for menus to expand into. For the same reasons as the above (very limited real estate), you can't have a left-side menu any more because if you do you're intruding on the precious space the user has to usefully navigate your app (and you can't have a top-side/bottom-side one because good luck fitting more than 2 words side by side big enough for a user's fat finger to press... and if you failed to impress that you could scroll that menu the functionality to the right might as well not exist). While having whitespace doesn't solve this, it does mean that you can do the cool animations that don't force a total context switch away from the list you were browsing (by showing a sliver of it on the right side, usually).

And you can't go for columns of text unless it's exploring a parent-child relationship (best example being Mail apps), because again, you've run into the "I'm scrolling something I want to read and now my hands are in the way" problem, since 2 columns of text covering half the screen means you're barely reading either of them.

Oh, and even if your users' monitors are big, and they're still using reasonable scaling factors, the website still has to be responsive if it's resized- the cheapest way to do that is to just be in mobile mode always. Besides, if the users all of a sudden snaps your site to the side of the screen, even though the means of scrolling doesn't block the screen itself, the viewport has shrunk so much that you might as well be on a mobile device now anyway.

I don't think the trend is going away until mobile VT-100s stop being the dominant way people use the Web, and as such and I think this problem is going to be with us for a long, long time. (Or until we have an AI that just magically desktopifies the site so you don't have to spend money maintaining two versions, but y'know.)

there really isn't space for '90s-style buttons and drop shadows

My greatest complaint for modern UI is that there absolutely is space for 1 pixel of grey on two sides of every button. Modern designers wrongly choose to make "flat" buttons that you can't always tell are buttons.

We've regressed from clear consistent ways to show what can be interacted with to a flat obscure aesthetic.

there really isn't space for '90s-style buttons and drop shadows

There is.

Well yeah, that's because it's all designed mobile-first.

I frequently play an online game which is desktop-first (they kinda partially support mobile, but it renders awfully), but it looks to me that it shares many flaws. One data point.

There is.

There's barely space on a mobile device to show 2 buttons with some text side by side on screen at the same time. Maybe 3 can fit comfortably if you're using a phablet. The border is taking up valuable space that you sometimes can't afford to go without should the button's text actually need to be that long... and sometimes that is indeed the case.

I frequently play an online game which is desktop-first (they kinda partially support, but it renders awfully), but it looks to me that it shares many flaws.

The problem with the minimalist mobile design philosophy is that it leaks into places it doesn't belong. There's really no reason that, say, the modern Hitman series of games needs to be all Metro'd up like MS wanted Windows 8 to be, and yet... it is.

Also, it's very cheap to do- you just need to set the color of the box and be done, no color matching the shadows, no problems with color when the button is pressed in, etc. Hell, half the time you just color the text or place the icon and expect the user to guess that it's even a button in the first place; sure, design languages are slowly moving away from that shit because... it's awful, but it's even less work than placing a button is.

I'm not saying discoverability in flat UIs isn't plain awful, because it absolutely is, but given the constraints of the hardware and interface (fat fingers and hand) to work with I'm not that surprised this kind of design is what the industry moved towards. Now if only they'd make it easier for me to obviously show that yes, there's more to this scroll view other than "just hope the text is cut off in a manner that suggests you should scroll down"...

I was trying to convince some devs at an up-and-coming twitter-esque platform to do away with whitespace and their only argument was that people viewing on a wider screen don't want an entire sentence to span across horizontally. So they kept their design, where on even a regular desktop 50% of the website is white space.

I countered with the fact that no one needs to maximize their browser to fill the entire width of their monitor.. and alternatively they can just as easily zoom in.

It seems as though, either for monetary reasons tied to continued engagement, or possibly genuine preference from enough people, the extra-white-space design is here to stay for a bit longer.

If it wasn't obvious I'm not a fan of it. But for a website that is following the numbers, we can see that extra whitespace is beyond an experimental stage as the style has been, and continues to be, adopted by many websites.

I was trying to convince some devs at an up-and-coming twitter-esque platform to do away with whitespace and their only argument was that people viewing on a wider screen don't want an entire sentence to span across horizontally.

I wish that these people would get it into their heads that some people do, in fact, want that. I want it very badly! But nobody will give it to me, and it drives me crazy.

It's awful. We truly live in a dark (or too bright) time.

Consider New Reddit:

  • This is the default. I'm only getting 2 posts per massive browser screen. After browsing a bit, it does fill some of that space with a "recently viewed" list, but the massive bars on the side are still there. I'm convinced these design choices have dumbed down participation on reddit such that people now only posts pics and simple questions rather than longer discussions.
  • This is if you change it to "Classic" view, but that still only shows 7 posts compared to old reddit 's 13. These aren't so bad. The whitespace would be filled by longer post titles, so it doesn't feel like a waste. Personal preference, but I still think old reddit is much cleaner, despite displaying more.
  • This is "Compact" - dropping the thumbnails, shrinking even further, and new reddit still only gets 12 posts on screen. In an effort to shrink things, they've moved the comment button way off to the right, which looks awkward when the post title is short. And for what? Now I have to trace along that whitespace with my eyes to find the comment info.

Substack is even worse:

  • Just look at this shit! We are approaching 80% whitespace here, and half of it is Substack pushing their stupid twitter clone.
  • This page should be the home screen instead, and it's still half blank.
  • Another sin: If you accidentally hover over a username, it pops up a giant box like this full of yet more whitespace, covering your view of what you were looking at. On mobile, this happens if you thumb the screen to scroll down and accidentally press anywhere near a name.

Can anyone familiar with design explain why we can't have stuff like the old slatestarcodex blog back? It worked just fine on mobile. If the text is too small, you just pinch zoom the screen a bit.

It's 80% white space if you only count wide open space. It's more like 95% or more when you consider how much space there is around everything. For example, look at the ridiculously large orange shape around the New note button. There's no reason for it to be that big. There's no reason for the items on the menu above it to be spaced so far apart.

I agree the old Slate Star Codex website was a really well designed.

This is a website I built, and mostly designed:

https://www.mpsbrettonwoods.org/

My disdain for empty space has probably created the opposite problem of things being too cramped. But the audience is monetary economists. The kind of people that read books, and write books.

A book is nothing but a wall of text and it's a design that has endured for hundreds of years. I think as long as a design isn't more dense than a book then it's fine.

I don't think things are too cramped at all and I would prefer even less white space. I don't even like the big title page that makes you have to scroll down to where the content starts. I would rather have the "It is our pleasure ..." start the top left of the page, with a narrower top banner.

I think Gwern probably one of the best designed websites I've ever seen, though I'd be tempted to reduce the font size a bit.

This is the kind of design I'd argue against:

https://duckduckgo.com/?q=beck+and+stone&atb=v390-1&ia=web

The throughlink to a search engine is intentional. Please don't direct link.

I "mostly designed" it. I did operate on concessions to other parties, and things that "look good" that "most website do" are hard to argue against.

Part of my original question is looking for a design group that says "obscene amounts of white space is stupid" because I constantly have to have these arguments.

Gwern's website is closer to my preference.

Chrome on Android is kind enough to save me from the worst of it by suggesting I enable reader mode, though I wish it was possible to easily force it like on Safari (without fiddling with flags).

I prefer density quite heavily, and all the times I notice white space (selection bias, I know), it only detracts from my experience.

I hate it with a burning passion. (This is, unironically, what a website should look like: https://motherfuckingwebsite.com/) I guess they want things to look nice and clean, but for practical reasons, I want as much information to fit on the screen at one time as possible. I can understand limiting clutter, but they have gone way too far. I don't like clicking through menus, especially if I don't know where to find what I'm looking for, and I really really don't like scrolling.

For the same reason, I abhor the trend of making things too big. I really don't like that if I open YouTube on my 27" monitor, I can only see 8 videos at a time (or just 1 or 2 on my Pixel 6 XL). My bank used to have a nice website that they ruined by replacing with the design from their app. I have five accounts and only two fit on the screen because they're using 24 point font with huge chunks of white space between them. They can't fit 5 numbers on a 312 square inch screen! I'm seriously considering switching banks over it and I only hesitate because the others will probably do the same.

I have to resist going on a rant about this, so I'll just conclude by saying I also dislike the trend of replacing text with symbols that I have to decode, and by saying that if God is just, there is a special place in hell for whoever is responsible for pushing this.

For some reason I hadn’t seen that site before.

Not only was there good information density screenwise, it practically gave me a jumpscare by how quickly it loaded.

I find it very sad that websites load more slowly than they did 30 years ago or whenever it was when my parents first got high speed internet.

motherfuckingwebsite.com is unironically better than 95% of sites on the Internet today. I know that the author is like "this is satire", but I would far rather read that website than the vast majority of what people put out.

Agreed, except for the font.

http://bettermotherfuckingwebsite.com/ is my preference. I don't care if my screen fits a lot of information when it doesn't fit into my eye focus.

No, I much prefer the other one. This one has a narrow column that wastes two thirds of my screen. That's the main problem with modern websites.

What he referred to as "a grotesque pile of shit" was perfectly fine. Text should hit the side of the browser. It should be small and packed together.

As for line width, the priority in my view should be not wasting space so that less scrolling has to be done. I don't have any trouble tracking my eye back to the left side of the screen, but for those who do, maybe they can use multiple columns. But only using a narrow column is not good.

I don't care if my screen fits a lot of information when it doesn't fit into my eye focus.

What do you mean?

I mean it's easier for me to scroll down than scroll left to right and back to left with my eyes. I don't get the "use ALL of my screen" demands, especially as screens only ever get bigger. Different physical widths have different purposes.

It seems obviously easier to move your eyes than to use a scroll wheel.

And yet it is not, in my case. Perhaps I am but a young grasshopper and will speak differently once I acquire mouse-related hand fatigue.

I’m not so sure. Mostly because of the failure mode I observe when tired or otherwise impaired, where my eyes lose the line on wrapping around. I suspect that correlates with line width and especially with text density.

It's awful. I'm sick and tired of web pages which are about two inches wide on my 24" monitor. Like @Astranagant said, a lot of this is because stuff increasingly gets designed to fit the vastly inferior capabilities of phones. The justification about reading comfort is weak nonsense, imo. I have a much easier time reading text all the way across my monitor than in a tiny column. And really, if some people prefer small columns of text then the right thing to do is let them adjust their browser width to fit their desires. But when the text is artificially limited, I can't expand it to fit my preference.

And as you have noted, basically the entire design profession is dead ass wrong about this. But unfortunately, that's not too surprising. UI design in software is absolute garbage compared to 20 years ago. Everyone is chasing the same stupid trends, or worse, is trying to optimize everything to squeeze out one more marginal user (without any regard for the experience of the users they already have). There's very little quality software interface design being done these days.

But when the text is artificially limited, I can't expand it to fit my preference.

You can modify the CSS—by right-clicking and choosing "Inspect", or by using a browser extension like Stylus.

There has been this ongoing trend of massive amounts of white space, where it's basically a single sentence per screen. I find the experience awful on desktop. But only mildly annoying on mobile.

My theory is that this is just the struggle between the Berners-Lee Web (a vast network of intellectual interaction) and the Consumer Web (a powerful tool for buying and selling). (Social media arguably sits between these, as it is primarily concerned with buying and selling human interactions.) Whitespace is mayonnaise: it helps you swallow whatever you're being fed. Phones (and to a lesser degree, tablets) are not Berners-Lee devices; they are consumption devices, which may explain why you find web mayo more palatable when you're on your phone.

I don't understand this. I can consume better if the information is there. If I have to click and scroll to find it, I will consume less of it. Whitespace isn't mayonaise, it's the two thirds of empty space in the chip back or the child-safe lid on the medication bottle.

or two thirds of air nitrogen in pack of chips

I like this description, it's also one of myain complaints when being asked to implement that type of design. It's vacuous and looks best when there is very little content.

It's an anti-content type of design.

Everything should be horizontally expanded to fit its container at all times. Empty space is wasted space.

This is probably a symptom of the ongoing "app-ification" of webpages, whereby mobile and desktop layouts are merging increasingly to make less work for the designers and maintainers. The mass amounts of white space are usually there because that space doesn't exist on portrait mobile screens.

Everything should be horizontally expanded to fit its container at all times.

There are some legitimate concerns about readability and column width on widescreen monitors. The old school 80 column wide text terminal is a decent width, but a bit wider is fine too. That said, there are definitely designer-driven layouts that are way too narrow, but manually adjusting my browser window would be a PITA to do frequently.

Some width limit is reasonable, although maybe allowing sites to specify it might have been a poor design choice.

manually adjusting my browser window would be a PITA to do frequently.

I don't see how you would need to do it frequently. In the glorious world where every site fills your browser window, you would set your browser width once and then it would be correct for every site you visited.

The problem is that text isn't the only thing we view in a browser. When I view a video or just an image, I often - usually - want that taking up a lot of width. And it's not always a matter of just maximizing it, since I might want it to take up 70% of my monitor width rather than 100%, while I want 30% of my monitor width when reading. Ideally, I could just keep my browser at 70% width, and the text would take up 3/7 of the browser width when I read.

I personally think there should be some sort of default "text width" setting in browsers that force text to start wrapping if it goes beyond a certain width in terms of characters/percentage/pixels/units, much like how we can set a minimum font size in our browser.

Not really, no. For a multi-column design that has several chunks of content, I want them all at the same time filling my screen. For a single-column website like an article or a book, I prefer the text filling no more than 50% of my screen so that I do not forget where the beginning of the line was by the time I've gotten to the end of it.

I think you've missed part of the point, which is that in the ideal world we wouldn't have disparate setups like that. Every site would just be a single column, taking up the whole browser, and you size the browser accordingly (once).

But a single column is not always the best presentation.

I disagree with that. I think it is the best.

But if I want half-monitor-width columns of text, do I size my browser to half a screen (I've done this before)? When I want to view images, videos, or even tabular data (calendars, for example) though, I frequently want full-screen, widescreen presentation. The "multi-media" nature of web pages makes this difficult generally.

Although, I think the web would have developed very differently if the browser were allowed to specify maximum column width like it can text sizes or accessibility features. Not certain if that'd be better (light/dark theming is only now starting to work tolerably), but certainly different.

I don't think that's true, because then the eye needs to track back and forth over a further distance at line breaks. It's why Bibles and newspapers (which use all their spaces) break up the text into columns.

Quoting works published in years 1996 and 1929, Wikipedia says:

Traditional line-length research, limited to print-based text, gave a variety of results, but generally for printed text it is widely accepted that line lengths fall between 45 and 75 characters per line (cpl), though the ideal is 66 cpl (including letters and spaces). For conventional books, line lengths tend to be 30 times the size of the type, but between 20 and 40 times is considered acceptable (e. g., 30 characters × 10-pt font = 300-pt line). Early studies considered line lengths of 59–97 mm (about 57 cpl) optimum for 10-point font. For printed works with multiple columns, 40–50 cpl is often better. For justified, English-language text, the minimum number of characters per line is 40; anything less than 38–40 characters often results in splotches of white spaces (or rivers) or too many hyphenations in the block of text. Longer lines (85–90 cpl) may be acceptable for discontinuous text such as in bibliographies or footnotes, but for continuous text lines with more than 80 characters may be too long. Short text, such as ragged marginal notes, may be as little as 12–15 characters per line.

Desktop browsers generally set the default text size at 16 pixels, leading to a "widely accepted" line length of 720–1200 pixels, or around half of the width of a standard 1920×1080 screen. Presumably, web designers think that more people would be annoyed by extremely long lines of text than by large expanses of empty space.

On my own desktop computer, I typically browse the Internet using a half-width 960×1080 window rather than a full-width 1920×1080 window. Alternatively, you can buy a monitor that can be rotated into 1080×1920 portrait orientation.

This problem was solved at least three hundred years ago by newspaper publishers when they started printing multiple columns on a single page.

What is this place?

This website is a place for people who want to move past shady thinking and test their ideas in a court of people who don't all share the same biases. Our goal is to optimize for light, not heat; this is a group effort, and all commentators are asked to do their part.

The weekly Culture War threads host the most controversial topics and are the most visible aspect of The Motte. However, many other topics are appropriate here. We encourage people to post anything related to science, politics, or philosophy; if in doubt, post!

Check out The Vault for an archive of old quality posts. You are encouraged to crosspost these elsewhere.


Why are you called The Motte?

A motte is a stone keep on a raised earthwork common in early medieval fortifications. More pertinently, it's an element in a rhetorical move called a "Motte-and-Bailey", originally identified by philosopher Nicholas Shackel. It describes the tendency in discourse for people to move from a controversial but high value claim to a defensible but less exciting one upon any resistance to the former. He likens this to the medieval fortification, where a desirable land (the bailey) is abandoned when in danger for the more easily defended motte. In Shackel's words, "The Motte represents the defensible but undesired propositions to which one retreats when hard pressed."

On The Motte, always attempt to remain inside your defensible territory, even if you are not being pressed.


New post guidelines

If you're posting something that isn't related to the culture war, we encourage you to post a thread for it. A submission statement is highly appreciated, but isn't necessary for text posts or links to largely-text posts such as blogs or news articles; if we're unsure of the value of your post, we might remove it until you add a submission statement. A submission statement is required for non-text sources (videos, podcasts, images).

Culture war posts go in the culture war thread; all links must either include a submission statement or significant commentary. Bare links without those will be removed.

If in doubt, please post it!


Rules


Recommended Posts And Communities

Recommended Realtime Chats