Hacker News Reader

Comment by bee_rider | Hacker News Reader

RIP Checkbox, 1990-2009, you were perfect and unambiguous but for some reason smartphone designers hated you.

This is extra silly because you can make what's effectively a checkbox look really nice and toggle-y. Although this is a bad example it shows that it doesn't have to be a square with a check mark in it: https://www.ranecommercial.com/legacy/hal/MobileHelp/Advance...

Switches are already ubiquitous on mobile UIs:

https://developer.apple.com/design/human-interface-guideline...

But checkboxes and switches don't always make sense. You don't always have room for e.g. "Light mode <switch>". Every component that you give more room to takes room away from other UI.

Rather than look at the obvious cases, the hard part is the periphery of what's obvious.

Issue is that modern UX designed moved away from this type of 3D buttons. There was a big transition from UIs using heavy skeuomorphism to a more flat and digital look.

To achieve hat you're showing you need some depth to the button. Hard to accomplish with today's design trends.

It's things like this that make me think the way to make a good UI is to look at what modern UIs do and do the exact opposite.

1. No spacing.

2. Information-heavy cluttered screens.

3. No auto-save. You have to click the save button to save.

4. Colored icons. Colored interfaces. Not "tinted" a hue of black or white. Actual vibrant colors. And not just one color either! Two colors, at least.

5. 3d.

6. Main menus.

7. border-style: ridge;

Sounds kind of hard to use on mobile, which is indisputably a popular set of platforms.

No need to throw the baby out with the bathwater. Big (resizable) UI elements with poke-ability are fine. Auto-saving can be great depending on the application. Let’s just ditch the false simplicity and flatness.

Every single time I'm on desktop and I see a GUI that sucks, I know it's mobile's fault. Why this button so big? Mobile. Why spacing? Mobile. Why this list of 6 clickable items with one line of text each takes up my whole screen's vertical space? Mobile. Why no more status bars and tooltips? Because you can't hover on mobile. Why is the filter of this table below the table instead of above the table's headers? Because the thumbs won't reach the top on mobile. Why the headerbar buttons have no labels? Because they wouldn't fit in the horizontal space in mobile.

I'm really not a fan of mobile. If possible, I'd rather ignore it completely and just let mobile users rotate their screens.

Screen size isn’t the problem for mobile, it’s tap targets

As someone using a pinephone (and thus running desktop apps on a phone screen), this is why I often leave the screen scaling at 200%...

Peak UX design was the WinAmp and Windows media player skins of the Windows XP era.

They exhibit almost all of these properties, and they were glorious to use.

Absolutely. I have a theory that "windows" are called "windows" because of the 3D ridges at the borders. The moment we stopped doing ridges, everything went the wrong direction.

This translucent, rounded, acrylic, material, whatever, it's just not fun. We had the technology for making glorious media players in the year 2000. Where did our technology go?

I'm on linux right now and I checked a bunch of desktop environments and every single one I checked the themes for (the theme browser sucks, by the way) what I see is dark theme with a blue tint, light theme with a blue tint, dark theme with a green tint, light theme with a green tint. A Windows 95, XP, and 7 clone. And that's it?

It just blows my mind. I don't know if it's because the theme browser sucks (the websites to browse the themes also suck, by the way), but I can not find one theme like XP but not XP. I'm left wondering where did all those people who made so many beautiful, glorious, amazing WinAmp themes go to. Did they become extinct? Are the theming APIs too limited today to go all out? Is the technology not there yet to have border-image in your windows borders?

This is just so depressing. I'm hoping the pendulum swings back in the next 10-20 years, and hopefully I'm still alive by then to see some cooler GUIs.

I remember modifying the UI of Virtual DJ 6 for friends that wanted their logo on it. It was all bitmaps. And I guess the different skins were 3D renders on existing DJ decks. But they were beautiful, although there was a period there were some issue when laptops were moving to a wider ratio.

>> To achieve hat you're showing you need some depth to the button. Hard to accomplish with today's design trends.

This why some people complain about UI design "trends". They elevate an aesthetic choice over clarity, usability, or function (not sure which word is best here). Or in this case it seems part of the push was to reduce the screen space taken by a control.

A medical video conference / telehealth system my provider uses has broken the checkbox. In their direct message interface they change the checkbox field label based on whether the box is checked. Unchecked has the label as "Not Urgent" and checked is "Urgent". On multiple occasions I have quickly checked the box, to indicated as not urgent, then clicked send.

At some point bad design becomes almost an art form

I agree that checkboxes are perfect; but that's because I never try to fill forms on a smartphone. Native browser checkboxes are often unusable on smartphones; too small to hit with a thumb.

True.

It seems like an odd historical problem though. We could just render checkboxes bigger or with more white space around them, and make the touch area bigger in any case.

Sure, you clould just fix checkboxes. But then you have to deal with select boxes, which also work badly on smartphones.

Then you have the modern smartphone-driven practice of using multipart forms, with one field on each part. You can't see the whole form at once; you eventually find out that the very last field is a date-field with three badly-behaved drop-downs that you can't interact with.

I just don't try to fill forms on my smartphone. In fact I only use it as a (shock!) phone.

The checkbox label is often my thumb’s target. A pox on the house of any dev who doesn’t properly use a _for_ attribute.

Properly designed, the tapping/clicking the text should also trigger the checkbox.

> Properly designed

It shouldn't need designing; but I have a suspicion that an unstyled HTML checkbox input doesn't behave like that.

It does as long as you mark the label as being for the checkbox or put the checkbox inside the label, which you are supposed to do.

Then it triggers when I scroll - there's no place to click/tap safely. And worse, it can toggle and then scroll off the screen before I notice. Then I end up signed up for their marketing emails! :)

Seriously, why not bigger checkboxes?

Who created the checkbox widget? System 1 (1984) had check marks on the menu and "x boxes", which are equivalent, but not checkboxes afaik

I actually have no idea, I made up 1990 completely, I bet it is way too late. In any case, I guess it is just the digitization of an existing UI element from paper forms, right?

> System 1 (1984) had check marks on the menu and "x boxes", which are equivalent, but not checkboxes afaik

I think it had (https://andymatuschak.org/files/papers/Apple%20Human%20Inter..., page 56)

I don’t know whether those were the first, but https://skeuomorphic.design/p/from-paper-ballots-to-pixels-t... claims they were, in the sense that the Mac made radio buttons different from toggle buttons.

Does anybody know in what cultures a checkmark would be inappropriate, as that page claims?

Thanks, that's a nice pdf: so what I called "x boxes" were actually named "check boxes" (although they didn't use the check mark symbol)

Here are some samples from 1987... (CUA standard)

http://toastytech.com/guis/cua1987.html

Is Jony Ive the Thomas Midgley Jr of the design world? Jony is responsible for iOS 7 which popularized low-usability flat design, as well as the circular iMac mouse and the Macbook's fragile keyboards.

Yes obviously, because checkboxes need accompanying text, otherwise it’s just a mystery fidget. Text on a small screen is a problem for obvious reasons.

The you have the second problem: checkboxes were part of web forms, where you have a submit button. So a whole generation of users were taught the abstraction of “saving” your settings as an explicit gotcha step. The checkbox didn’t do anything on its own.

Very likely, Apple wanted to start over with an element that was independent and immediate, in their preference panes. But checkboxes would have worked too, in preferences – but does not solve the in-app problem:

The icon toggle buttons are not mobile designers faults – they existed way earlier, primarily known from text editors (think the bold/italics toggles). Who messed them up so badly, I don’t know..

Right, or use a 3D look or colour or backlight effect to indicate when a toggle is active.

Reply on news.ycombinator.com