> 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.
I am pretty sure icons are easier and faster to recognize, except when you make them (too) small. In particular, they probably are easier in the long run, as long as they don't change position. But in a context where things change or you need a lot of buttons, words probably win.
This is not true. Just today for example, in android at least, I went to whatsapp, selected a chat with long tap, I want to archive the chat. I have a download like button. Apparently that is the archive button. I had no idea.
If it was the opening to the alternate dimension, I wouldn't still know. If it was something harmful like backup and delete, I wouldnt know. I just took the plunge and hoped it wasn't gonna be harmful. Luckily it was archive.
These kind of stupid things are there now in their calling screen and other places. Absolutely ridiculous and hard for me. Now imagine my parents who are 60+!!
Easier has more than one dimension (speed, error rate, recall, precision, cognitive load), but the baseline for generic statements is not one particular, very rare task. That's anecdote.
And in this case, the statement was about recognition, not intuition. Otherwise there are counter arguments: there are enough words in UIs which do not have an intuitive meaning either. "New" would be one. New what? File and folder are others, especially with decreasing awareness of the file system under young generations.
I'd say that you recognized the button fast enough, but the wrong function was attached to it. It's as if they would have had a menu item called "Download" which would archive.
I'm somewhat dubious about that for icons with actual recognizable pictures, but a lot of icon attempts today are stylized to death, with just a line, bent and broken in a couple places and maybe if you're lucky juxtaposed with the occasional dot.
If there's no text description even on mouseover (or touchscreen, with no cursor...) discovery is more or less trial and error (or perhaps more akin to Russian Roulette if the permissions involve being able to do real damage).
Scratch your head and hope there are existing support questions searchable about what on Earth the programmer could have meant to convey...
It varies, some applications - the ones that people spend their workday in - have specific iconography that is domain specific for that application.
A difference needs to be made between general public applications and domain specific employee applications. SAP is a great example of this. Of domain specific icons I mean, not of good UX design.
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
i think material ui kicked design in the face in a broad multiple-industry-capturing way. it's gotta be the worst design language to interface with and it just unreasonably requires effort to navigate around gcp and lots of other google tooling. i'm glad it feels dated now and people are moving away to input boxes that are enclosed in, you know, a box... but i cannot stand what it brought to ux/ui.
For group chats in Microsoft Teams with more than seven participants, if you click on "View and add participants" (an icon with two people and a plus sign) you see a list of seven participants. At first I didn't know that you could scroll in this list.
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.
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.
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.
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.
> 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.
No no, I find that having to click back through almost 40 years’ worth of months to get to my birthday allows for a nice pause to consider the fleeting and ever-accelerating nature of life.
There's a small rental car company I use sometimes whos date picker is meant for phones and you have to "grab" the wheel and push it up / down do get to your date
Date pickers are the absolute worst. It blows my mind we don't have a clean standard by now.
The best is when a site uses the exact same date picker for birthdate as for some date in the future. Yes, I'd love to click backward 50 years to get to my birthdate. Thank you for reminding me how old I am.
Relatedly, scrolling time pickers are also a toss up on mobile. Sometimes a single swipe on the minutes gets you from 12:00pm to 11:50am, sometimes it doesn’t.
I wish the analog clock picker where two quick taps set the hours and minutes (and one more tap for am/pm) was more common.
I actually might want to subscribe to your newsletter, provided I read & enjoy your article. So why does the pop-up always interrupt me before the page has even finished loading?
If you inset an unobtrusive newsletter button 60% of the way through the article, perhaps I'll actually click it (or, more realistically, follow your RSS feed).
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.
It’s amazing how many blank stares I get when I, as mobile engineer, tell stakeholders that we shouldn’t just implement some random interface idea they thought up in the shower and we instead need design input!
“But why can’t you just do it?” Because I recognise the importance of consistent UX and an IA that can actually be followed.
Just like developers, (proper) designers solve problems, an we need to stop asking them for faster bikes.
Cybernetic natural selection should take care of this over time, but the rate of random mutations in software systems is much higher than in biological systems. Would be interested in modeling the equilibrium dynamics of this
This is reductionist and myopic. I've personally been through building forms online and it's hell to try to find consensus on perhaps the most common forms used online.
Let's take a credit card form:
- Do I let the user copy and paste values in?
- Do I let them use IE6?
- Do I need to test for the user using an esotoric browser (Brave) with an esoteric password manager (KeePassXC)?
- Do I make it accessible for someone's OpenClaw bot to use it?
- Do I make it inaccessible to a nefarious actor who uses OpenClaw to use it?
Yep, there's some bad incentives and some rushed work, but calling it mostly incompetence or malice kind of ignores how much the underlying system has changed
Also, in the 2010s a lot of old guard UX designers got circulated out in favor of designers who either had backgrounds in other mediums (e.g. print) or were generalists with little understanding of user interfaces or technical capabilities. This didn't help matters.
>It is designed by hastily promoted middle manager PM/Product type people
As someone in the middle of arguing about API design and service boundaries in a complex system with a product manager right now, who has redesigned our full system's architecture and release roadmap himself, I wish it weren't true.
> Most software is not designed by intelligent and thoughtful people anymore.
Eh nostalgia/survivorship bias. Not saying that you're wrong about the shift to shoving it out door for a PM, but "nerd who is adamant THEIR layout is the only one" wasn't exactly the heyday of software design either.
I'm still of the opinion most people should get more comfortable with layers and smaller keyboards, but I've also met the linux nerds who swear the world NEEDS insert.
I’m a decade+ linux power user and I still do insane things like pipe outputs into vim so I can copy paste without having to remember tmux copy paste modes when I have vertical panes open.
Terminal UX existed before the CUA guidelines from IBM. People complains about Ctrl + Shift + C behavior when it exists only in one category of application, terminal emulators.
"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.
> Tell me you know nothing about web development without saying you know nothing about web dev
This Twitterism really bugs me.
You took the time to write a really detailed response (much appreciated, you convinced me). There’s no need to explicitly dunk on the OP. Though if you really want to be a little mean (a little bit is fair imo), I think it should be closer to level of creativity of the rest of your comment. Call them ignorant and say you can’t take them seriously or something. The twitterism wouldn’t really stand on its own as a comment.
> 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).
I don't understand this point specifically. I make all buttons on a site have the same theme without needing a framework, library or build-step!
Why is React (or any other framework) needed? I mean, you say specifically "React is also how you get consistent design across a major web app.", but that ain't true.
> 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!
As it happens, this is how it was for years and years, actually, for most of the existence of the Web. The basic appearance of form elements used to be un-styleable, locked to the OS UI-appearance, for general usability concerns.
Why do I care about their choice of a screaming color for my buttons?
> same Windows button gray
We don't need to go the other extreme, can there be no middle ground of letting users pick between the boring gray and the bright orange?
You know, a good system could even offer you a choice of palette that takes the website color into account...
> Can you imagine if every button on every site was the same Windows button gray color, regardless of the site's color?
Imagine how cool would it be if we had a pure, logical language where we could set properties in a page based on the properties of the objects around 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..
That is because they know the users. Users are very sensitive to this: if the outside wasn't changed then the internals cannot be much improved. You see this with cars, cars need a new design otherwise customer will think nothing much changed. Customer will usually buy newer over better because they think newer must have improvements, and styling signals new. Same with computers, all the disappointments when apple releases a new macbook without changing the exterior....
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.
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.
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.
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.
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.
>"bring back idiomatic design" doesn't help when we don't have enough idioms
One must always research and find the dominant or most applicable idioms for whatever they're doing. Are you building a command line tool? For which platform? What other similar tools are you basing its design on? You have to check yourself and see whether your software conforms to the idioms of the platforms, communities, etc that you're targeting.
It's even worse on some websites. For example, Grok sends on enter. Even on mobile. Where you can't even press ctrl+enter, because mobile software keyboards don't have a control key. So you can't include line breaks at all when talking to Grok. You can merely accidentally send a message prematurely. (Maybe they have fixed it by now.)
> In text boxes in some applications, enter submits the entered text...
On Mac it's also not unusual that the Enter key is linked to the outer window's Ok button even when an a text input field is active (for instance in the "new" settings panel when trying to enter a DNS server address - pressing Enter closes the entire DNS panel, infuriating if you want to add more than one DNS server).
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)
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.
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.
121 comments
[ 5.2 ms ] story [ 105 ms ] thread[1] https://en.wikipedia.org/wiki/Squircle
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.
If it was the opening to the alternate dimension, I wouldn't still know. If it was something harmful like backup and delete, I wouldnt know. I just took the plunge and hoped it wasn't gonna be harmful. Luckily it was archive.
These kind of stupid things are there now in their calling screen and other places. Absolutely ridiculous and hard for me. Now imagine my parents who are 60+!!
And in this case, the statement was about recognition, not intuition. Otherwise there are counter arguments: there are enough words in UIs which do not have an intuitive meaning either. "New" would be one. New what? File and folder are others, especially with decreasing awareness of the file system under young generations.
I'd say that you recognized the button fast enough, but the wrong function was attached to it. It's as if they would have had a menu item called "Download" which would archive.
> Now imagine my parents who are 60+!!
I can, because I am too.
A difference needs to be made between general public applications and domain specific employee applications. SAP is a great example of this. Of domain specific icons I mean, not of good UX design.
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
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.
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.
The best is when a site uses the exact same date picker for birthdate as for some date in the future. Yes, I'd love to click backward 50 years to get to my birthdate. Thank you for reminding me how old I am.
I wish the analog clock picker where two quick taps set the hours and minutes (and one more tap for am/pm) was more common.
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.
If you inset an unobtrusive newsletter button 60% of the way through the article, perhaps I'll actually click it (or, more realistically, follow your RSS feed).
There is incompetence and there is also malevolence in the encouragement of dark patterns by the revenue side of the business.
“But why can’t you just do it?” Because I recognise the importance of consistent UX and an IA that can actually be followed.
Just like developers, (proper) designers solve problems, an we need to stop asking them for faster bikes.
Let's take a credit card form:
- Do I let the user copy and paste values in?
- Do I let them use IE6?
- Do I need to test for the user using an esotoric browser (Brave) with an esoteric password manager (KeePassXC)?
- Do I make it accessible for someone's OpenClaw bot to use it?
- Do I make it inaccessible to a nefarious actor who uses OpenClaw to use it?
I could go on...
Balancing accessibility and usability is hard.[0]
[0] Steve Yegge's platform rant - https://gist.github.com/chitchcock/1281611
As someone in the middle of arguing about API design and service boundaries in a complex system with a product manager right now, who has redesigned our full system's architecture and release roadmap himself, I wish it weren't true.
Eh nostalgia/survivorship bias. Not saying that you're wrong about the shift to shoving it out door for a PM, but "nerd who is adamant THEIR layout is the only one" wasn't exactly the heyday of software design either.
I'm still of the opinion most people should get more comfortable with layers and smaller keyboards, but I've also met the linux nerds who swear the world NEEDS insert.
laughs in linux wouldn’t that be nice.
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.
Not a webdev, but can't you just use CSS on the <button> element for that?
This Twitterism really bugs me.
You took the time to write a really detailed response (much appreciated, you convinced me). There’s no need to explicitly dunk on the OP. Though if you really want to be a little mean (a little bit is fair imo), I think it should be closer to level of creativity of the rest of your comment. Call them ignorant and say you can’t take them seriously or something. The twitterism wouldn’t really stand on its own as a comment.
Sorry for the nitpicky rant.
Speaking as a user not a developer, it'd be lovely.
I don't understand this point specifically. I make all buttons on a site have the same theme without needing a framework, library or build-step!
Why is React (or any other framework) needed? I mean, you say specifically "React is also how you get consistent design across a major web app.", but that ain't true.
As it happens, this is how it was for years and years, actually, for most of the existence of the Web. The basic appearance of form elements used to be un-styleable, locked to the OS UI-appearance, for general usability concerns.
> It'd be awful!
Why do I care about their choice of a screaming color for my buttons?
> same Windows button gray
We don't need to go the other extreme, can there be no middle ground of letting users pick between the boring gray and the bright orange? You know, a good system could even offer you a choice of palette that takes the website color into account...
Imagine how cool would it be if we had a pure, logical language where we could set properties in a page based on the properties of the objects around it!
As soon as UI design became a creative visual thing rather than a functional thing , everything started to go crazy in UI land..
Since then, the "idiomatic design" seems to have been completely lost.
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.
On the web, the rise of component libraries and consistent theming is promising.
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.
One must always research and find the dominant or most applicable idioms for whatever they're doing. Are you building a command line tool? For which platform? What other similar tools are you basing its design on? You have to check yourself and see whether your software conforms to the idioms of the platforms, communities, etc that you're targeting.
ChatGPT does it.
Claude does it.
Nextdoor does it.
And none of those give you the courtesy of being able to turn it off.
Slack does it, but if you dig through the settings you may find the way to switch it.
How on earth did so many "designers" fixate on this idea that we must want to share our thought immediately instead of allowing a calmer interaction?
On Mac it's also not unusual that the Enter key is linked to the outer window's Ok button even when an a text input field is active (for instance in the "new" settings panel when trying to enter a DNS server address - pressing Enter closes the entire DNS panel, infuriating if you want to add more than one DNS server).
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.
> 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.