Bring Back Idiomatic Design

In text boxes in some applications, enter submits the entered text, and ctrl-enter forces a newline (not at my computer, but I think Slack does this). In others, it's the other way around (pretty sure GitHub does this for comments).

I don't know how we got here and I don't know how to fix it, but "bring back idiomatic design" doesn't help when we don't have enough idioms. I'm not even sure if those two behaviors are wrong to be inconsistent: you're probably more likely to want fancier formatting in a PR review comment than a chat message. But as a user, it's frustrating to have to keep track of which is which.

Most software is not designed by intelligent and thoughtful people anymore. It is designed by hastily promoted middle manager PM/Product type people who, as has been mentioned elsewhere, simply were not around when thoughtful human interface design was borderline mandatory for efficiency’s sake.

There is incompetence and there is also malevolence in the encouragement of dark patterns by the revenue side of the business.

As the author identifies, the idioms come from the use of system frameworks that steer you towards idiomatic implementations.

The system UI frameworks are tremendously detailed and handle so many corner cases you'd never think of. They allow you to graduate into being a power user over time.

Windows has Win32, and it was easier to use its controls than rolling your own custom ones. (Shame they left the UI side of win32 to rot)

macOS has AppKit, which enforces a ton. You can't change the height of a native button, for example.

iOS has UIKit, similar deal.

The web has nothing. You gotta roll your own, and it'll be half-baked at best. And since building for modern desktop platforms is horrible, the framework-less web is being used there too.

Guys, I found out about this technology called Cascading Style Sheets recently and I think it's the missing piece we've been looking for. It lets you declaratively specify layout in a composable, hierarchical system based on something called the Document Object Model in a way that minimizes both clientside and serverside processing, based on these things called "stylesheets".

The best part is, it's super easy to customize them, read others for inspiration or to see how they did something, or even ship multiple per site to deal with different user preferences. Through this "forms" api, and little-known browser features like url-fragments, target/attribute selector, and style combinators, plus "the checkbox hack" you can build extremely responsive UIs out of it by "cascading" UI updates through your site! When do you think they're going to add it to next.js?

I'm tentatively calling this new UI paradigm "no-framework" or "no package manager", not sure yet https://i.imgur.com/OEMPJA8.png

The behavior science also changed a lot of things. People study behavior, patterns, what can sell more, what looks more intuitive. If something looks a bit different from the others, it will sell better. If something look the same way as the previous one, why should the client buy it? The client needs to see a difference, it can be only a little bit more flashy, but it must be different. 20 years, later, this is the result.

Especially now, in the AI era, where each person can make a relatively working app from the sofa, without any knowledge of UI/UX principles.

> There are hundreds of ways that different websites ask you to pick dates

Ugh, date pickers. So many of these violently throw up when I try to do the obvious thing: type in the damn date. Instead they force me to click through their inane menu, as if the designer wanted to force me into a showcase of their work. Let your power users type. Just call your user’s attention back to the field if they accidentally typed 03/142/026.

> Every single button is clearly visually a button and says exactly what it does. And each one has a little underline to indicate its keyboard shortcut. Isn’t that nice?

Something not mentioned here (that came from the Mac world as I understand it): everywhere that the text ends with an ellipsis, choosing that action will lead to further UI prompts. The actions not written this way can complete immediately when you click the button, as they already have enough information.

UX has really gone downhill. This is particularly true of banking websites.

Also, the trend of hiding scrollbars, huge wasted spaces, making buttons look really flat, confusing icons, confusing ways of using drop downs rather than using the select/option html controls etc have all made the whole experience far inferior to where desktop UI was even decades ago

> Prefer words to icons. Use only icons that are universally understood.

Underrated. Except for dyslexic people, and the most obvious icon forms, I am pretty sure most people are just better and faster at recognising single words at a glance than icons.

We've lost some common features:

* Undo & redo

* Help files & context sensitive F1

* Hints on mouse hover

* Keyboard shortcuts & shortcut customisation

* Main menus

* Files & directories

* ESC to close/back

* Drag n drop

Revelation features when they first became common. Now mostly gone on mobile and websites.

But I'm not convinced the old consistency was purely a design victory... it was also a result of heavy constraints

Much of this is foisted upon us by visual designers who wandered into product design. It's a category error the profession has never quite corrected. (maybe more controversially, it's caused by having anyone with the word "designer" in their title on a project that doesn't need such a person - this category is larger than anyone thinks)

Lately I've occasionally been running into round check boxes that look like radio buttons. Why????

> Suppose you’re logging into a website, and it asks: “do you want to stay logged in?”

Then the website has made its first mistake, and should delete that checkbox entirely, because the correct answer is always "yes". If you don't want to be logged in, either hit the logout button, or use private browsing. It is not the responsibility of individual websites to deal with this.

Interesting that Apple is praised.

> that a link? Maybe!

When Apple transitioned from skeuomorphic to flat design this was a huge issue. It was difficult to determine what was a button on iOS and whether you tapped it (and the removal of loading gifs across platforms further aggravated problems like double submits).

Another absurdity with iOS is the number of ways you can gesture. It started simply, now it is complex to the point where the OS can confuse one gesture for another.

Yall remember https://en.wikipedia.org/wiki/Mystery_meat_navigation? Back in 2004-ish era, there was an explosion of very creative interaction methods due to flash and browser performance improvements, and general hardware improvements which led to "mystery meat navigation" and the community's pushback.

Since then, the "idiomatic design" seems to have been completely lost.

At some point UX became a synonym of manipulating users into doing things, and I wonder if it can ever go back.

It might have started in an innocent way, all those A/B tests about call-to-action button color, etc. But it became a full scale race between products and product managers (Whose landing page is best at converting users?, etc.) and somewhere in this race we just lost the sense of why UX exists. Product success is measured in conversion rates, net promoter score, bounce rates, etc. (all pretty much short-term metrics, by the way), and are optimized with disregard to the end-user experience. I mean, what was originally meant by UX. It is now completely turned on its head.

Like I said, I wonder if there is way back of if we are stuck in the rat race. The question is how to quit it.

designers are creatives and will always believe the visual elements of a design need to be updated, refreshed, modernized etc.. then we get flavour of the month nand new trends in visual language and ui design that things must be updated to.

As soon as UI design became a creative visual thing rather than a functional thing , everything started to go crazy in UI land..

One of my pet peeves is that increasingly frequently, pressing Enter to submit a web form doesn’t even universally work anymore. Instead you have to tab to the submit button, and (depending on the web page) have to press Space or Enter to actuate it.

Another annoyance is that many web forms (and desktop apps based on web tech) don’t automatically place the keyboard focus in an input field anymore when first displayed. This is also an antipattern on mobile, that even on screens that only have one or two text inputs, and where the previous action clearly expressed that you want to perform a step that requires entering something, you first have to tap on the input field for the keyboard to appear, so that you can start entering the requested information.

>using GMail is nothing like using GSuites is nothing like using Google Docs

G Suite (no s) was the old name for Google Workspace. Google Workspace includes GMail, Google Docs, Google Sheets, Google Calendar, etc., so it doesn't really make sense to say that Google Workspace has a different UX than Google Docs, if Google Docs is part of Google Workspace.

Disclosure: I work at Google, but not one of the listed products.

> You don’t want to have to remember to use CTRL + Shift + C in certain circumstances or right-click → copy in others, that’d be annoying.

laughs in linux wouldn’t that be nice.

My hope is that since tools like Google Stitch have made fancy looking design free that it will become obvious how functionally worthless fancy looking design always was. It used to signal that a site paid a lot of money and was therefore legitimate. Now it signals nothing.

I had to laugh when I read this:

> Avoid JavaScript reimplementations of HTML basics, e.g. React Button components instead of styled <button> elements.

I've been hearing that for the entire Internet era yet people continue to reinvent scrollbars, text boxes, buttons, checkboxes and, well, every input element. And I don't know why.

What this article is really talking about is conventions not idioms (IMHO). You see a button and you know how it works. A standard button will behave in predictable ways across devices and support accessibility and not require loading third-party JS libraries.

Also:

> Notwithstanding that, there are fashion cycles in visual design. We had skeuomorphic design in the late 2000s and early 2010s, material design in the mid 2010s, those colorful 2D vector illustrations in the late 2010s, etc.

I'm glad the author brought this up. Flat design (often called "material design" as it is here) has usability issues and this has been discussed a lot eg [1].

The concept here is called affordances [2], which is where the presentation of a UI element suggests how it's used, like being pressed or grabbed or dragged. Flat design and other kinds of minimalism tend to hide affordances.

It seems like this is a fundamental flaw in human nature that crops up everywhere: people feel like they have to do something different because it's different, not because it's better. It's almost like people have this need to make their mark. I see this all the time in game sequels that ruin what was liked by the original, like they're trying to keep it "fresh".

[1]: https://www.nngroup.com/articles/flat-design/

[2]: https://geekyants.com/blog/affordances-in-ui-design

This kinda hurt. The world is in a rush to be the ASAP, so nobodys interest is to do design good, it needs to be fast. And now we have this sh*tshow.

With some irony, one thing Substack doesn't afford is zooming in to images on mobile.

The web needs a HIG.

All of these people who keep saying that webapps can replace desktop applications were simply never desktop power users. They don’t know what they don’t know.

And while we're at it, stop with the popups and notifications.

I don't care about the new features in a browser update. Ideally, nothing at all has changed.

I don't want a "tour" of the software I just installed. I, presumably, installed it to do something, and I just want to do that thing.

I don't want to have to select a preference for how a specific action is performed in your software. If it's not what I expected, I will learn it.

And for the love of GOD, nobody wants to subscribe to your newsletter.

Day-to-day usability doesn't bring much "wow" factor to a sales pitch.

Not sure how you can put the genie back in the bottle, every app wants to have its own design so how can you enforce them to all obey the same design principles? You simply can't.

Am I the only one who doesn't know what that "Keep me signed in" checkbox is for? I mean, I was a web developer for many years and I rarely encountered this checkbox in the wild, don't remember implementing it even once. I mean the choice itself is very ambiguous. It is supposed to mean that the login session will only live for the duration of the current browser session if I uncheck it. But for a user (and for me too) that does not mean much, what is the duration of the session if my browser runs open for weeks, what if we are on mobile where tabs never close and tabs and history is basically the same thing (UX-wise). If I decide to uncheck it for security reasons (for example when I'm on someone else's device) I want to at least know when exactly or after what action the session will be cleared out, and as a user I have zero awareness or control there.

I don't advocate for removal of this checkbox but I would at least re-consider if that pattern is truly a common knowledge or not :)

Worked at Figma for 5 years. The author uses Figma as an example, but I think misses the point. They're so close though. Note these quotes:

> Both are very well-designed from first principles, but do not conform to what other interfaces the user might be familiar with

> The lack of homogeneous interfaces means that I spend most of my digital time not in a state of productive flow

There are generally two types of apps - general apps and professional tools. While I highly agree with the author that general apps should align with trends, from a pure time-spent PoV Figma is a professional tool. The design editor in particular is designed for users who are in it every day for multiple hours a day. In this scenario, small delays in common actions stack up significantly.

I'll use the Variables project in Figma as an example (mainly because that was my baby while I was there). Variables were used on the order of magnitude of billions. An increase in 1s in the time it took to pick a variable was a net loss of around 100 human years in aggregate. We could have used more standardized patterns for picking them (ie illustrator's palette approach), or unified patterns for picking them (making styles and variables the same thing), but in the end we picked slightly different behavior because at the end of the day it was faster.

In the end it's about minimizing friction of an experience. Sometimes minimizing friction for one audience impacts another - in the case of Figma minimizing it for pro users increased the friction for casual users, but that's the nature of pro tools. Blender shouldn't try and adopt idiomatic patterns - it doesn't make sense for it, as it would negatively impact their core audience despite lowering friction for casual users. You have to look at net friction as a whole.

This is a really huge and a fundamental flaw in AI-driven design. AI-driven design is completely inconsistent. If you re-ran an AI generated layout, even with the same prompt, the output for a user interface will look completely different between two runs.

Apple was doing a pretty good job until whatever happened with v 26.

On the web, the rise of component libraries and consistent theming is promising.

That windows 2000/win 95 interface was peak windows design.

Shows a picture of Office 2000 and says "The visuals feel a little ugly and dated: it’s blocky, the font isn’t great, and the colors are dull."

Are you serious? Nothing has come close to it. Yeah we have higher resolution screens, but everything else is much less legible and accessible than that screenshot.

UIs are inconsistent even in the same app. Nevermind plugins or suites. It would be great if menus were customizable so you could plug in your own template.

... and please stop doing paralax...

(2023)

Idiomatic design will never come back. The reason being companies believe (correctly) that they design language is part of their brand. The uniqueness is, basically, the point.

[dead]

"Avoid JavaScript reimplementations of HTML basics, e.g. React Button components instead of styled <button> elements."

Tell me you know nothing about web development without saying you know nothing about web dev ...

1. React is an irrelevant implementation detail. You can have a plain HTML button in a button component, or you can have an image or whatever else. React has nothing to do with the design choices.

2. React is also how you get consistent design across a major web app. Can you imagine if every button on every site was the same Windows button gray color, regardless of the site's color? It'd be awful! React components (with CSS classes) are a way for a site like Amazon to make all their buttons orange (although I don't actually know if Amazon uses React specifically). But again, whether they look and act like standard buttons comes down to Amazon's design choices ... not whether their tech stack includes React or not.

Look idiomatic design is incredibly important to web design. One of the most popular web design/usability books, Don't Make Me Think, is all about idiomatic design!

But ultimately it's a design choice, which has very little, if anything at all, to do with which development tools you use.