Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Front end developers: stop moving things that I’m about to click on

medium.com

Post reply on HN
Print view View original

281–290 of 365 posts

Re: Front end developers: stop moving things that I’m about to click on

#281

Post by noduerme »

soulofmischief wrote: post #128
NikkiA wrote: post #15

A particular bane of mine is the self-oscillating UIs, youtube is particularly bad at it these days - if the mouse pointer is in 'just the right place' (which is bigger than it sounds) then you get the seek-bar preview frames popup, which moves things just enough that the mouse pointer is no longer over the area that triggers it, so it vanishes, and the whole thing starts again.

A general golden UX rule is to never cause layout shifts on hover events, preventing this sort of thrashing. Unfortunately, Google/YouTube and others have lost the plot and no longer employ good UX professionals in their flagship products.

>> thrashing

This was such a common thing to test for in fluid layouts under AIR/AS3/Flex, or any previous lingua franca where you had to design and code your own rollover effects or web components. So much is elided in mouseout and mouseover. Really, unless you've coded those events in a stack from movements, you don't understand what they mean. In any UI, it's the #1 thing you have to watch out for (along with stuck hovers, accidental focus and things like that). Mouseover/out depend on the entire screen graph as well as timing to establish user intent. Thrashing the whole UI off that because you shift the layout is the worst example of how to do it wrong. Amateur hour.

Re: Front end developers: stop moving things that I’m about to click on

#282

Post by noduerme »

ryandrake wrote: post #182
soulofmischief wrote: post #128

Earlier quoted context omitted.

A general golden UX rule is to never cause layout shifts on hover events, preventing this sort of thrashing. Unfortunately, Google/YouTube and others have lost the plot and no longer employ good UX professionals in their flagship products.

I really wish UIs would stop doing things on hover events altogether. Just because I stop my mouse doesn't mean I intend to do anything, let alone auto-play a video or have some pop-up explain something to me. Let me rest my goddamn hand for a second!

Nothing should ever autoplay because of a hover. The only acceptable use of hovering is to change the color of something to highlight it, without changing any layout. The only exception is if you've already clicked and are engaging with a game or simulation inside a defined area.

Re: Front end developers: stop moving things that I’m about to click on

#283

Post by biorach »

bombcar wrote: post #50
fbdab103 wrote: post #24

Earlier quoted context omitted.

Can someone please tell the Windows Start Menu designers? Have completely ruined the experience as it constantly juggles items as its heuristics are seemingly updated. I especially enjoy how Bing results get prioritized over local applications and files.

I cannot figure out how "upd" shows Windows Update but "update" does not.

> I cannot figure out how "upd" shows Windows Update but "update" does not.

This drives me crazy.

Re: Front end developers: stop moving things that I’m about to click on

#284

Post by lewantmontreal »

nikolay wrote: post #271

Same with Windows, macOS, and Linux - when an input has the focus, new windows popping up should not steal it from it (unless it's a child window) - I often have parts of my password entered somewhere else as while I'm typing, another window steals the focus and my input with it! Not only is this annoying, but it's a security flaw as well! Regarding web apps, you can also do destructive actions if the scroll moves th…

Sometimes I chuckle to myself wondering why people pay 36 bucks a year for 1Password. Then I launch my $10/year Bitwarden desktop app. I’m halfway through typing my master password and a popup launches capturing the rest of my keystrokes: ”Would you like to update Bitwarden?”

Re: Front end developers: stop moving things that I’m about to click on

#285

Post by nyanpasu64 »

neilv wrote: post #80

This problem first occurred in the mid-'90s, and people saw it was a problem, and that's why we specified the image dimensions in HTML (before the GIF or JPEG header was loaded), so the layout wouldn't shift during load, when people were already reading and navigating. Since almost the beginning, graphic designers were trying to layout Web pages like an advertising brochure, lots of bad ways, rather than as hypertext…

Imagine if the people designing the Discord, Windows 10+, Telegram, and Amazon Prime cancellation UI to manipulate you into paying for services, were in charge of designing airliner cockpits and industrial plants. User interfaces can and should do better in preventing unintentional user error, and people should refuse to implement, use, or accept dark patterns.

Re: Front end developers: stop moving things that I’m about to click on

#286

Post by actualwitch »

BLKNSLVR wrote: post #151
esprehn wrote: post #115

Earlier quoted context omitted.

This is why everyone switched to overlay scroll bars. It's also better for performance because you don't need to do layout on a screen worth of content only to realize you need to reserve 16px and do layout again.

Yep, another vote for always scroll bar here. And an additional complaint about those tiny-thin scroll bars that some idiot-designer though were slick because they so minimally interfere with the rest of 1920px-width display, which also makes them a giant pain-in-the-wrist to click on because the width to make it appear is so thin, and then clicking on the scroller is another challenge whereby it's much easier to acc…

I think you misread op, they explained why the overlay scrollbars (aka "tiny-thin scroll bars that some idiot-designer though were slick because they so minimally interfere with the rest of 1920px-width display") are used instead of the old ones that cause layout to trigger again.

Re: Front end developers: stop moving things that I’m about to click on

#287

Post by lodovic »

plorg wrote: post #201
vidanay wrote: post #68

Earlier quoted context omitted.

YouTube also has the problem that there is almost no dead space to "park" your cursor. You have to carefully place it in between autoplaying previews.

Relatedly, many websites have nowhere to tap that doesn't do anything. If you try to select some text then want to tap away (to clear the copy/select all/etc popup) you can't do so without navigating away from the page or causing something else unwanted to happen. This gets doubly frustrating when navigational elements don't contain actual anchor links. If you long-tap on mobile to open in a new tab, the browser deci…

Twitter is guilty of this as well

Re: Front end developers: stop moving things that I’m about to click on

#288

Post by mcv »

I just had this same issue with MS Teams on my Macbook. I had it maximised, meeting ended, wanted to click the Leave button in the top right corner, and just as I moved the mouse there, the button disappeared! There was no Leave button anymore. Unmaximised it instead, Leave button appears again, I try to click it, and the Leave button moves.

What kind of idiot designed this?

Re: Front end developers: stop moving things that I’m about to click on

#289

Post by krautsourced »

NikkiA wrote: post #15

A particular bane of mine is the self-oscillating UIs, youtube is particularly bad at it these days - if the mouse pointer is in 'just the right place' (which is bigger than it sounds) then you get the seek-bar preview frames popup, which moves things just enough that the mouse pointer is no longer over the area that triggers it, so it vanishes, and the whole thing starts again.

Netflix did that for a long time with the very right item in the suggestion list where I could never see the details because it would instead scroll to the next page, making the item I was interested in disappear to the left :) Seems like they fixed that though

Re: Front end developers: stop moving things that I’m about to click on

#290

Post by simulation_ »

My favourite example of this is bank app I use very often, which comes with a VERY annoying twist. The most used button (one-time payment code) sometimes switches with "Take a loan" button, and after clicking loan button, someone from bank will call you in a near future to talk about it.
Post reply on HN