Hidden interface controls that affect usability

Only tangentially related, and a seemingly lost old-man battle: stop hiding my scrollbar.

Interesting article. Some points I didn't quite agree entirely with. There's a cost and practically limitation to some things (like a physical knob in a car for zooming in and out on a map - although that was probably just an example of intuitive use).

I just recently switched a toggle on a newly installed app that did the opposite of what it was labelled - I thought the label represented the current state, but it represented the state it would switch to if toggled. It became obvious once changed, but that seems the least helpful execution.

> stop hiding my scrollbar

https://superuser.com/a/1720363

Use Firefox?

I can't recall the app but it was a similar toggle with a label, when you flipped the toggle the label lit up green indicating it was turned on. But the default state was off but how would you know?

Right! If you want it to denote an action, you need to include the verb: "TURN ON" would be entirely clear. It's even clear if you sometimes DO want to show state / not a button "IS ON" is also perfectly clear. There's only a few that might he confused when the verb is shown, like "INCREASE," although I would have to work a little to imagine the UI where it's not clear whether the button is showing the verb or noun.

One of my big beefs with modern UI is two-state controls where it's impossible to determine what the current state actually is. Like a button that says "Music Off" where it's unclear if that means the music is CURRENTLY off, or if clicking the button turns it off.

I hate toggle switches IRL too. They are just as ambiguous there. Checkboxes and pushed-in buttons are far clearer, but have unfortunately been sacrificed at the altar of "modernity".

In macOS you can have the scroll bar always on, globally (using System Settings) or per-app (using Terminal command)

And please support PgUp and PgDn while you're at it.

In the 90's I had this vision that the menu and the scrollbar should be physically separated from the screen.

If you have (next to your monitor on the left side) a narrow physical display with menu entries in it. You get 4 things for "free", the user will expect there to be menu entries, the developer will understand the expectations to have menu entries, there is limited room to go nuts with the layout or shape of the menu and last but most funny, you won't feel part of the screen has been taken away from you.

The physical scrollbar should be a transparent tube with a ball (or ideally a bubble) floating in it.

Usage could be moving the pointer out of the screen. The scrollbar led goes on and you can hold the button to move the page. When using the menu the pointer [also] vanishes and the menu entry at that height is highlighted. (much better usability) Moving the mouse up or down highlights the above or below entries, if there are a lot of entries it may also scroll. It may be a touch screen but the most usuable would be a vertical row of 5 extra wide (3 fingers) keyboard buttons on the left with the top 4 corresponding to the 1st, 2nd, 3rd, 4th menu entry and the 5th one for page down. (scrolling down 4 entries) Ideally these get some kind of texturing so that one can feel which button one is touching.

This way knowledge in the world can smoothly migrate to knowledge in the head until eventually you can smash out combinations of M keys in fractions of a second without looking at the screen or the keyboard. The menu displayed is always in focus, you don't have to examine the view port to use it. Having a row of horizontal F keys is a design fiasco. Instinctively bashing the full row of those might come natural after learning to type, then learning to type numbers, then symbols and only if you frequently use applications that have useful F key functionality. I only really know F5 and F11 but I cant smash them blindly as I pretty much never use them. I just tried F1 in firefox and no help documentation showed up... I think that was what it was suppose to do? Not even sure anymore.

Having the antenna menu (file, edit, etc) at the top of the viewport is also ugly. For example, smashing the second then the top M key could easily become second nature. CTRL+Z is fine of course but it aint knowledge in the world. Does anyone actually use ALT+E+U for undo? Try it on the CTRL+F input area. It's just funny. Type something in the address bar then compare ALT+E+U with using the Edit menu.

A separate display would take many of these "design" privileges away from the clowns.

(note: I think it is ALT+E+U as the Dutch layout is forced on me by windos. Edit is called Bewerken and the shortcut is ALT+W!?! ALT+E does nothing.)

Yeah, a hidden scroll bar makes a UI unusable if you prefer a touch screen, as I do.

> The physical scrollbar should be a transparent tube with a ball (or ideally a bubble) floating in it.

Oh, god, the Touch Bar was already a frustrating enough piece of UI, don't give Apple more ideas.

Similarly, I can’t tell which state the control is in until I touch it.

There was such a confusing toggle at the ticket machines for the train here in Austria many years ago. It was for immediately validating your ticket, which is a potentially costly mistake.

About the scroll bars: Also stop making them so thin that I have to have FPS skills to hit them! Looking at you, Firefox! (And possibly what standard CSS allows?) Yeah, I can scroll, but horizontally the scrollbar would be more convenient than pressing shift with my other hand.

Stop making my scrollbar so impossible thin, Firefox!

The green / red is at least a half decent indicator (questionable for the colour blind folks though), but the current trend of very slightly different shades of grey is the pinnacle of utterly fucking stupid design; perfect for a non-interactive set piece in a gallery, just dumb for use for by human beings.

I have to believe in the case of cookie banners it is intentional.

Amen. Good riddance to Jony Ive and his embarrassing emoji bar.

I’ve never known until this moment that shift makes you scroll horizontally, because I’ve always either used a mouse with horizontal scrolling built into the scroll wheel, or a touchpad.

No one wants or needs an entire seperate device just to handle scrollbars that work absolutely fine currently…

It was just a vision from long ago. But okay, for sake of argument. It doesn't need to be ultra hd in a billion colors, it can go on the bezel and be screen height so that you don't have to aim to hit it. No need for it to glow intensely, perhaps not at all, perhaps simple single color LCD would do the trick.

I don't agree scrollbars work fine, they use to work fine, now they are to tiny to click on.

There also was/is the issue where the view port width needs to be adjusted when page state grows beyond the screen height then word wrap makes the content shift down. Is the solution to have one so tiny it is hard to use or should one always display a scrollbar? The one outside the screen is always there :)

I like things that do only one thing, do it well and in a simple way.

You could also go the other direction and put everything on the screen. Huawei just made a horrifying laptop where the keyboard is also a screen.

Gnome enjoys the impossibly thin scrollbars too even when you do manage to find them.

touch screens cant match physical buttons. This one is extra funny by taking keys away and giving you unknown things in return. Finally one can once again look down at the keys wondering which is which. After moving your hands away.

If I was on the design team they would have fired me for screaming at everyone. Screaming is good UI tho.

I absolutely despise switches. I'm also constantly asking myself if the label represents the current state or the state it would switch to.

> I thought the label represented the current state, but it represented the state it would switch to if toggled. It became obvious once changed, but that seems the least helpful execution.

Such ambiguous switches are often associated with "opt out" misfeatures.

> In the 90's I had this vision that the menu and the scrollbar should be physically separated from the screen.

Buttons alongside, above, or below screens appear now and then. Some early terminals had them. Now that seems to be confined to aircraft cockpits and gasoline dispensers.

But can I make them wider? I don't have the precision to hit something that narrow.

(Most of the time I use the scroll gesture on the trackpad to get round this)

Yep the best example. Especially if the result is not immediately obvious. Am I commanding "system on" or are you telling me "system on"

Toggle switches in real life can and often are labeled. A toggle pointing to OFF means it’s off. Moving it to on turns it on.

They’re still too thin, and they look awful to boot.

on MacOS you can use Fn+Up and Fn+Down

BTW. The technical term for such a button is a "soft key", vs a "hard key" that has a single function.

I would have been fine with the Touch Bar, if they hadn't sacrificed the function/escape keys to put it there.

It enabled a neat set of affordances, but not worth losing core functionality over.

Reading through the responses of your comment, I came to the conclusion that the topic is on point. There are many complains about people missing things (please add ...), and people responding with a solution because it's already there - just hidden.

you can get the same issue with icons too. The one that gives me anxiety is the microphone with a line through on a button. I _am_ muted or I should click to _mute_. If my kids are arguing in the background and it's an important call it can feel like a high stakes thing to get wrong and often times it only becomes clear what state I'm in by toggling a few times. Does the icon change to a mic without a line when I click or does the previously shown mic with a line now get coloured in, what does _that_ mean?

You might be able to set a different scrollbar style in about:config.

And a toggle colored/glowing red & green, for off & on, is clear.

Boggles my mind how badly many interfaces manage to be.

Firefox nonobviousity: Type in about:config in your address bar Search for widget.non-native-theme.scrollbar.size.override Edit it to whatever number you want You can also edit widget.non-native-theme.scrollbar.style to change the shape of it, set it to 4 for a nice chonk rectangle Finally, turn on “Always show scrollbars” in the normal settings window about:settings if you want them always on.

Unless you're red/green colour-blind, of course ;)

> If I was on the design team they would have fired me for screaming at everyone.

Oh man. I really do start screaming sometimes.

At user interfaces, too often. At unbelievably bad product choices of all kinds.

The simpler & dumber the issue the louder I get.

Someone creates a quality flat tine garden rake with about 40 metal tines, and charges accordingly. The person who manages stickers, because everything needs stickers, creates huge stickers they glue across all the tines. You try to peel it off and now you have over two dozen tines with long streaks of shredded paper glued hard to them.

Screaming is an appropriate place to put the high spin WTF-a-tons that might otherwise feed the universe’s dark energy.

And that, dear reader, is my theory of dark energy.

And then the second factor: has this change been applied immediately or do I need to scroll around to find a SAVE CHANGES button?

Perhaps chartreuse and teal?

More seriously, my understanding is that the octopus retina does not have color receptors, just aggregate light, I.e. brightness.

But the octopus practically has a sub-brain behind each respective eye, and the eye brains can extract color from the slight lensing differences across frequencies.

They are amazing magical creatures.

Taking that approach, and some sort of ocular lathe, and we can fix this.

We can always use more chartreuse.

Other applications ...

Some ATMs have unmarked physical buttons next the screen and tge text displayed on the screen next to those buttons defines what the key does.

TV remotes have A/B/C/D (red/blue/green/yellow) physical buttons whose function is dynamically defined by your context or which setting / function / menu you are currently inside.

I guess this goes back to video game controllers that have A/B X/Y buttons that can have different Functions in different contexts.

And even WORSE are the services that use different variations on those depending on the platform you're using! Yes, I am looking directly at you, Amazon Chime.

And thankfully you won’t be looking at it much longer

The name sounds nice, but it's just a muddy green.

>"Always show scrollbars” This is missing from my version (140.0.2)

New location is: about:config

layout.testing.overlay-scrollbars.always-visible

GTK+ used to be a decent widget toolkit.

> Taking that approach, and some sort of ocular lathe, and we can fix this.

Well, you can also just give people different coloured lenses for their two eyes. Eg one that filters out red and one that filters out green.

...And how should this work for the case where you have more than one window on the screen?

Yes, and please retain the behavior of clicking in the non-thumb areas to page up and down (with a modifier key to jump instead of paging).

It's been a standard Windows feature for quite some time! I don't think people need to scroll horizontally as much now that most screens are no longer rectangular, but this feature goes back to the dialup era and very few people seem to know about it.

Speak for yourself. Id love this as a monitor attachment!

Hidden options tend to degrade. Defaults are important.

I recently used the washroom at a Starbucks. The one where you have to enter a code to get in. Once I was inside, there were no knobs or any mechanical way to lock the door - just one circular button with a lock icon on it. I pressed it, and the button lit up as green. Pressed it again, it lit up as red. No indication on what light colour meant what. Does red mean it's unlocked? Or does it mean it is locked, since red usually indicates no entry.

It made for the quickest pee break ever.

And Ctrl is used for the third dimension.

What do you know?

Thanks a lot! This finally did what I want:

widget.non-native-theme.scrollbar.style = 4

widget.non-native-theme.scrollbar.size.override = 20

Though I'm not sure if I maybe want:

widget.non-native-theme.scrollbar.style = 3

widget.non-native-theme.scrollbar.size.override = 30

Plus of course that, which I had found earlier and did nothing on it's own:

widget.gtk.overlay-scrollbars.enabled = false

layout.css.scrollbar-width-thin.disabled = true

Thank you and all the others that told me about different about:config settings! I use this now:

widget.gtk.overlay-scrollbars.enabled = false

layout.css.scrollbar-width-thin.disabled = true

widget.non-native-theme.scrollbar.style = 3

widget.non-native-theme.scrollbar.size.override = 30

You start with something that works but is obviously wrong for reasons unknown. Then you think you've unraveled one of the wrong doings and think you've found a solution to make it better. Both are most likely wrong and your solution made things worse. This becomes obvious later on when you have a whole list of imaginary improvements. You keep at it and slowly the stupid simple truth comes out or so you think. Hey, at least it improved over what it was? You then have people use it, dumb people are best so that you can feel dumb together when it becomes obvious that obvious wasn't what you thought it was. You fix everything until it is good enough to alienate existing users. More effort goes in and finally you allow yourself to add one new button. This is it? Everyone asks. YES, this is it. But what about... and you tell them why that is not going to happen or they come up with one more something that sounds actually good but most likely isn't.

The analogy is probably to start with a 5G wifi HD camera doorbell with cloud hosting, night vision, human body motion detection zones and you end with a heavy duty cast iron door knocker that has one moving part and instantly reveals something personal about the person at the door. A small art work depicting something about you. They come as dragons, goats, unicorns, vikings, snakes, Bumble bees, Longhorns, Moose, Neptune, Bacchus, all kinds of tools and all kinds of symbols. Build to last many times longer than the house.

And then people cant find the bell...

The liqueur is nicer :)

we have that case well researched :) You paint a scrollbar on the screen. Boring technology.

That's a weird example where a higher level of technology is applied in a scenario where much lower technology, a physical lock, is both much cheaper and more practical.

Who makes these decisions?

Surely this one is near universal. At the very least a clarifying tooltip of the verb would be helpful!

Fair enough, not sure there’s enough interest for a general product but sounds like a fun weekend project if you have an old display lying around

Why are you trying to actually click on a scroll bar? That’s my biggest question, the reason they’re small and out of the way is because 99% of people don’t use them 99% of the time. I can’t even remember the last time I actually clicked on one. That’s what scroll wheels/gestures are for.

You ok man?

On further thought this is an idea for a bygone era. I liked the idea of it being on the monitor bezel...Most monitors dont have bezels, or bezels big enough for it, nowadays.

It does a few things.

If you are reading (top to bottom) the wheel is really useful. It scrolls in chunks tho. A touch pad is more accurate but I always attach a mouse to my laptops. Not sure why but it feels less convenient than the scroll wheel.

If you need to travel slightly further dragging the middle mouse "button" is great. I have no idea how to do that with a touch pad but one can also use page up and page down (or [shift+]space when available)

If pages or documents are really long it isn't fast enough. I might roughly know where the thing I'm looking for is. Holding down the mouse button on that offset. Is faster.

The scrollbar does both extremely fast and fine scrolling. I rarely start reading a page of code from the top. The larger sections are usually the most relevant. Here I hold the scroll bar and move it up and down quickly and accurately while reading.

But the real trick is that it doesn't affect the cursor position. You can scroll then continue typing and it will jump to the cursor. [say] inline ccs, I'm typing some html but need to lookup what some class name was called. I can scroll to it, read and continue typing. Same for the name of functions and variables defined elsewhere in the same file. Or [say] I don't recall how to write someones name eventho I've already used it in the same article.

You make some good points, but for contrast I thought I’d share my workflow in those same situations. For scrolling in chunks, this isn’t the case with many mice and is OS dependent too - Magic Mouse on the Mac is a good example of a smooth scrolling experience with a mouse, but on my windows machine I use a Logitech g502 which had the ability to toggle between a clicked and unlclicked mouse wheel state, which I can use both for precision and for speed scrolling to the top or bottom (unclick, spin with wild abandon, click in again).

As for the text editor example I use the preview scroll pane on the right and drag that for that use case, it’s a huge grab target and a great example of a situation where this is relevant but it has its own solution.

Either way, if you really want scrollbars to always stay visible in your browser there are solutions to force show it all the time, but I’d say you were a rare user in actually wanting that.