Wednesday, January 24, 2024

In Praise of Buttons

Niko Kitsakis:

In graphical user interfaces, we have seen an increase in buttons recently that consist merely of text or icons, without a clear, visible button shape being present. This insipid, uninspired mediocrity, exemplified by Google’s “Material Design” or – even worse – IBM’s “Carbon Design System”, was popularised by Apple’s iOS 7 and its equally miserable “Flat Design” aesthetics. This lazy minimalism is often considered modern and streamlined, but we must ask: Is it also user-friendly?

[…]

A button in a graphical user interface that has no button shape will likely give you no feedback either. While it might actually have an alternative state that gets activated when you touch it (a change of colour for instance), you are probably going to obstruct that with your finger. This is another advantage of buttons that look like buttons.

Update (2024-01-30): Nick Heer:

One objective of the visual interface language introduced in MacOS Big Sur was, according to Alan Dye, to “[reduce] visual complexity to keep the focus on users’ content” which meant, for example, that “buttons and controls appear when you need them, and they recede when you don’t”.

In practice, it means interfaces become ambiguously interactive. A design system of line art glyphs floating in detail-free window chrome makes it easier to create light and dark themes, but it also turns everything into a flavourless smear of grey tones.

[…]

This is not specifically an argument in favour of decorated, glossy, detailed user interface elements — though I do like those — but it is an argument in favour of craft. Of heart and soul.

Previously:

Update (2024-02-21): Niko Kitsakis:

Now let’s have a look at physical buttons in product (or industrial) design and what’s happened to those in recent years. If you are strictly a UI/UX designer in the context of design for screens, you should still read this article. In my view, the importance of the experiences of the physical world should not be underestimated when designing for screens. We use the same brain to make sense of both worlds after all.

[…]

What really happened here, I think, is that the marketing department got blinded by the idea of “touch = good” and forced the product people to build something along those lines. Probably saying things like “good enough” and “we don’t have the budget” a lot during the process. What they ended up with is much worse than what could have been achieved with a clearly labeled mechanical dial and a latching start/stop button.

[…]

Contrast this with the touch surface of the tumble dryer: It offers no advantages whatsoever but actually combines the disadvantages of both worlds: A physical appearance that is fixed (since there is no bitmapped screen but just a lamp that lights up under each button) and a touch surface which, by definition, isn’t tactile (and therefore ambiguous and unsatisfying to use). Again, you cannot copy what you don’t understand.

17 Comments RSS · Twitter · Mastodon


An article after my own heart. For years now I've been bemoaning the degradation of user interfaces, most of all Apple's, who have completely forgotten their own research and design language and lead the charge in ruining modern UI. All modern UIs, including modern macOS, are confusing and difficult to use compared to, say, Mac OS X 10.6 or 10.9, where there was still just enough consistency that things made sense, and just enough skeuomorphism to not be tacky but clearly communicate what you needed to know about UI elements: their function, their logical grouping, and even their function. I miss it so much.

So while we're bringing back buttons, how about we also do the following:

- Bring back scroll bars, or *something*, so we actually know when something can be scrolled!

- Bring back borders on *everything*, not just buttons

- Bring back shadows, so that the different layers, levels and groupings of UI are clear. Our eyes evolved to instantly and effortlessly recognize space according to shadow, so let's make use of that. Sometimes skeuomorphism isn't just an esthetic choice, but an incredibly important functional choice.

- For the love of all that is holy, get rid of hover zones and never, ever, ever bring them back

- Stop having UI move around after it's been displayed to the user, unless the change was explicitly triggered by user action. I don't care if there's more content to load. Don't display anything until it's loaded.

- Have every user action come from some kind of visual, audio, or tactile feedback, always, so you always know when you triggered an action

I strongly suspect that everyone, most of all the non-tech savvy, will think "my phone / computer hates me" a whole let less if designers consistently adhered to these rules. And this isn't even an exhaustive lift of what needs to be improved.

(Yes, I'm salty about this, and have given it an inordinate amount of thought.)


Beatrix Willius

@Bri: well said. FFS fire the children on crack who are responsible for abominations like Music on macOS.


This x1000


Old Unix Geek

Stop having UI move around after it's been displayed to the user, unless the change was explicitly triggered by user action

And do not gratuitously move the UI around, even then.

I often hit a button to show some additional information and then click the same place to get rid of it, but the window reorganized itself to show the additional information and my second click did something else I didn't want. Keeps happening with Zoom.


Thanks for the comments. To Bri especially. Ranting is good, if it has substance! I agree with bringing back scroll bars and all the other stuff. The buttons were used by me as a stand-in of sorts for all of those things. Mind you, that I called the piece “Part One” for a reason, so be prepared for more. I’m writing Part Two right now but that might still take a little time and will go into another area altogether… Stay tuned if you will and keep on commenting. I like to hear what people think…


Agree with all of it. I don’t know why Apple abandoned their principles on this.

I think a big part of it is that it makes it easier to design “dark patterns” or “deceptive design.” With so many intrusive pop-ups and other invasive notifications and web pages these days, the option you really want (the one that doesn’t instantly give the service more money) is very often a plain text link that doesn’t look like an interactive button.


@Niko I look forward to reading part two!

I have a text document on my computer somewhere called something like "software cardinal sins" where I listed out all of the patterns I keep seeing in modern software that wear me down. I think the idea was to someday compile of list of software design commandments, some "thou shall" and "thou shall not" rules, to try and encourage people to stop making the same mistakes over and over. I'd love to read some more of the same from other people, and seeing where there's overlap or disagreement.

I wish that there wasn't this continuing desire to have UIs that look and feel different from the ones that came before, in this shallow pursuit to make something feel like it's fresh and new. (As Niko points out.) It's gotta be marketers behind that, because everyone else ought to know it's a bad idea. Designers keeps throwing away the stuff that we *know* works and reinventing ideas that we *know* suck. There's certainly still room for new ideas and improvements to how software design works, but so much is already known. It's not just sentimentality for what used to be, but just noticing that things are legitimately worse now compared to back then.


Great article and comments here. Bri's post was especially cathartic, as it's all stuff I've been saying for years. I remember filing a bug report when iCal was introduced to the AppleSeed program with calendar item text fields that looked like disabled label text, and somehow users were supposed to click on stuff until it was editable. I was worried when my bug report was rejected, but I never imagined how bad it would get, and Apple is one of the leading offenders.

When I was actively involved in BibDesk development ~15 years ago, users would nitpick us all the time over button sizes and positions that were a few points off, and start quoting chapter and verse of the Aqua HIG, or complaining about keyview loops. As annoying as that could be, it absolutely improved the user experience to have our UI look consistent with other applications and behave in a very predictable way.


Explicit beats implicit


+1 Making buttons look like labels was pretty dumb. I guess they think if they tint them blue it's sort of like a hyperlink and that's how you tell. I don't like it. Worse is how they like to hide buttons on macOS (for no particular reason) until on hover (see the Notification Center). That's just awful. We've been stuck with this nonsense for years.


+1 on everything here. Just scrolled through the 1995 HIG; good times.


@CowMonkey Then you should read another older piece of mine… :-)

https://www.nubero.ch/blog/004/


Apple’s current iPad OS Safari has the close tab ‘X’ ‘button’ at top-left in regular browsing mode but when you go into expanded tabs view, it switches to top-right!

This confounds me as, how can it be an accident but also how can it be deliberate?

Sorry to say, I suspect a lot of software degradation is the result of engineers having to justify their continued employment by working on changing things even though they really don’t need changing and in reality they are making things worse for the user.


A friend of mine is a graphical designer. He makes cool looking things such as logos and t-shirts. He is designing web sites - where he uses the same visual ideas, which means he also does not make it obvious where buttons and other interactive items are - when asked about that, he didn't even understand the problem - he's all about the looks, and when I tell him that that the UI is difficult to grasp, he (a) believe it's still obvious or (b) thinks it's okay to take some time to figure it out - I guess he thinks that his design is to great that people should be forced to admire it some extra time.

¯\_(ツ)_/¯


Warren Nagourney

I couldn't agree more with the thrust of this thread. Since the person who was responsible for the abomination which was iOS 7 has left the company, I see no reason why some of his disastrous decisions couldn't be reversed in the interest of greater ease of use. Unfortunately, some of these terrible UI choices appear in macOS, which is by far the most important Apple OS for me.

Another thing I hate is the use of long touches to overload various touch commands. Apple had a great approach to this with 3D touch - why couldn't they just continue with that? I am frequently making accidental spurious touches which send me to undesired places.

Along the lines of spurious touch problems, the FAA has allowed iPads to be used in place of paper charts in an airplane cockpit. Unfortunately, the iPad has no global undo. As a pilot, I have had some potentially dangerous situations during instrument approaches in bad weather where one doesn't have time to correct a mistaken touch. Perhaps a global undo is something Apple should copy from Android, though I have no idea how well it works in the latter OS.


@warren

> Since the person who was responsible for the abomination which was iOS 7 has left the company, I see no reason why some of his disastrous decisions couldn't be reversed in the interest of greater ease of use.

The issue is that the person responsible for the dumb and ugly icons in iOS and macOS is still there and was given even more responsibilities.


Warren Nagourney

@someone I can guess who that person is - he seemed to be responsible for the serious usability issues which started with Big Sur. At least macOS has some standard menus unlike the free-for-all in iOS. But, alas, my favorite OS has indeed been damaged by a person responsible for the iOS 7 mess. At least my M3 Pro MBP is very capable and I seem to be one of the few people who actually likes Stage Manager, which helps make sense of the numerous windows I keep on screen.

Leave a Comment