Designing for non-rectangular browser windows

https://shkspr.mobi/blog/2022/05/designing-for-non-rectangular-browser-windows/

by edent • 4 years ago

75 23 4 years ago

If you were to try this with real text that you wanted to read instead of lorem ipsum, you’d figure out pretty quickly why nobody wants text to rewrap like that as you scroll. Your eyes would have to rescan the text every time it moved to figure out where you’re supposed to continue reading, instead of just following it in a continuous line.

a_t48• 4 years ago

What if we squished the size of the text instead?

Retr0id2• 4 years ago

Raserise the text, map each pixel to a particle suspended in a fluid simulation, and let nature take its course. There's a reason they call it text reflow!

tkgally2• 4 years ago

Yes. It reminds me of the bad old days of magazine layout in the 1990s and early 2000s, when graphic designers, armed with the latest desktop publishing software, roundly defeated the conservative forces of authors and readers.

Here’s a 1997 example at the Internet Archive:

https://archive.org/details/Mondo.2000.Issue.17.1997/page/n2...

polypodiopsi• 4 years ago

Oh god this is terrible.

anderskaseorg3• 4 years ago

Whatever you might think of that 1997 example, it’s not the same issue, since it’s just a static page. As the page scrolls vertically by 1 cm, the word you’re focused on predictably moves vertically by 1 cm. I assume your quibble is that you might have to follow an odd shape to find the next word at a line break—but at least you know where the current word is.

Whereas in this post’s animations, as the page scrolls vertically, the word you’re focused on also jumps to an essentially random horizontal position (as a discontinuous function of the scroll-dependent widths of all the previous lines). You can’t scroll without losing the place of your current word.

toqy• 4 years ago

From the author

What would it be like to read text on such a device?
Hell. it would be hell.

Among other similar statements. What’s the value in restating half the point of the article but presenting it as some big brained contrarian take

anderskaseorg3• 4 years ago

The author seems to be suggesting that the reason it’s “hell” and “horrible” is that we’re not “used to” it and it’s “rare”, concluding “it doesn’t have to be that way” and “we can go so far beyond that”. If that wasn’t your takeaway, then great—I wish there were more designers like you.

jhanschoo• 4 years ago

Probably the best usability wise would be text that flowed around the window constraints as in here, but paginated instead of reflowing.

corytheboyd• 4 years ago

You're just _trying_ to start a fight by posting this to HN lol

Retr0id2• 4 years ago

Pre-emptive comment: Yes, of course, the logical solution is to scroll text traditionally within a rectangular sub-region. But it's fun to think about alternatives, even if they're impractical.

shotta• 4 years ago

Is Dunder Mifflin Sabre finally releasing the Pyramid?

https://medium.com/dunder-mifflin-paper/unleashing-the-power...

shepherdjerred• 4 years ago

It’s ergonomic because of the triangular shape!

nyanpasu64• 4 years ago

This is peak /r/badUIbattles material.

svat• 4 years ago

TeX can do something like this, namely typeset paragraphs according to an arbitrary \parshape (a fixed one: it's designed for print after all). There was a question on the TeX StackExchange a while ago about making a "poster" with paragraph shapes chosen according to a certain cut-out image; some people were saying it's not possible, so I ended up doing it: https://tex.stackexchange.com/questions/401604/

(The inspiration for that question was apparently Spineless Classics, who have many good ones: https://spinelessclassics.com/collections/all?sort_by=best-s... )

csense• 4 years ago

Let's take it to the next level.

Any UI designers out there want to tackle the mind-bending task of presenting information on a display that's a Mobius strip, Sierpinski gasket, or Cantor set?

edent• 4 years ago

With CSS's new 3D transforms, I'm pretty sure I could wrap text onto a Klein bottle…

xigoi• 4 years ago

Displaying text on a cylinder would be interesting. You could just have one long line bending slightly downward, endlessly circling around.

zimspy• 4 years ago

The usability on the user's has been addressed by other people quite well.

There is then the issue of developers. Who gets the job of detecting which gimmicky shape a screen is? Web browser developers or website developers? Maybe my viewpoint is from being used to rectangular screens. I'm also not a web developer but mobile. I already hate having to implement portrait and landscape layouts. Please don't add a star shaped phone.

aspyct• 4 years ago

I vote for the star shaped phone. And against. Really, both at the same time. This would be terrifyingly awesome.

biryani_chicken• 4 years ago

I thought this was going to be about the notch in smartphones.

productceo• 4 years ago

Haha. Nice exercise!

Designing for non-rectangular browser windows

Related Stories