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

291–300 of 365 posts

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

#291

Post by mcv »

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!

I'm totally fine with tooltips on hover. In fact, quite often they should appear quicker. And sometimes they don't appear at all when I really want them to. No idea what's going on with that.

But yeah, hover is just for info about the thing you're about to click, not pretending I've already clicked it when I haven't.

The stupid thing about Youtube is that sometimes a video starts playing on hover, in the thumbnail and without sound, and then I actually do click it because indeed it is something I want to watch, and then I miss the first couple of seconds because it's already shown those, with the sound off. It's just the most bizarrely stupid UI decision I can think of.

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

#292

Post by _nalply »

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…

This problem is even older, but was not as prevalent as now.

Early 1990 I experimented with Mosaic, and I experienced it the first time: I wanted to click on something but in the few hundreds of milliseconds between my decision to click and really clicking an alert popped up and I accidentally dismissed the alert and couldn't read the message.

This does not only happen on the web. All GUI software suffer from this problem. I know that Office products also have caused me to misclick because something just appeared or disappeared.

I have been thinking about a tweak to the GUI: Let things appear or disappear but still accept click events for about 200 milliseconds longer. As if the change did not happen yet. Perhaps combine this tweak with a soft but quick blending-in of the change, and only enable the new GUI after the blending-in finished.

This is different from the problem that GUI buttons move but at least related. Perhaps with this tweak moving GUI buttons won't annoy as much, because we can react. This is not ideal, but not as bad.

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

#293

Post by jspash »

ptx wrote: post #63
pulvinar wrote: post #4

This is also a problem with seemingly stationary UIs, where a button is only shown when the pointer gets close to it. Especially when that button is within a clickable area, such as a thumbnail image. The ideal solution to all of these would be for the UI to keep track of drawing events and disable any click that occurs in proximity to a just-redrawn area, and beep instead.

The recently redesigned Gmail UI is a good example of this: Chats now show up as minimized icons, and moving the mouse pointer over the icon to click it causes a close button to materialize under the pointer.

If I had a nickel for every time I accidentally deleted the wrong email using Gmail...

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

#294

Post by paganel »

princevegeta89 wrote: post #119
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.

Slightly unrelated, but all these media streaming apps and services like Netflix/Prime Video/Youtube etc. are so horrible by automatically playing whatever the fuck I am currently focused on, although I am just scrolling to somewhere to find my content. There is no way for users to focus "out" of the thumbnails, other than focusing on a different thumbnail, and it keeps playing the nonsense. All I would do is go back…

> Slightly unrelated, but all these media streaming apps and services like Netflix/Prime Video/Youtube e

Slightly related, but does anyone know how come Netflix's search algorithm (for lack of a better word) and its general search-related UI is so bad? A specific use-case that I had a few days ago was that I wanted to watch a nice comedy movie, preferably not from the last few years.

There was no easy filter on time periods, nor a filter on the country where that movie was made (I was thinking of filtering on France or Italy at some point), no way to tell Netflix "show me all the movies employing this actor" that you have in your catalogue, nothing of the sorts. In the end I think I searched for "Belmondo comedy" or something asinine like that, which, sure enough, after some horizontal scrolling (?!?!) ended up by recommending me a Tom Hanks comedy from the 1980s. I did not watch Netflix that evening.

How do people find stuff on this platform?

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

#295

Post by grishka »

jer0me wrote: post #269
bmitc wrote: post #251

Apple does this, a lot. The number of times I have incorrectly called somebody on FaceTime because I clicked on a contact at the same time FaceTime decided to update the list should be embarrassing for them. I have zero idea how this doesn't get fixed. It should be a trivial change to make sure the list is updated however they'd like before showing it to the user. As it is right now, given that it's slower or about a…

I’m always nervous about AirDropping things—the list shuffles around in real-time and there’s no confirmation or way to rescind a file.

I was thinking about this problem in the context of Telegram. I have a lot of chats and they constantly jump around. Way too often I misclick because the list has updated in the split second between me stopping my mouse/finger and actually clicking/tapping. It's not really doable on phones, but at least on computers one could pause the updating while the user is moving the mouse over the list.

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

#296

Post by medstrom »

antihero wrote: post #278
gwd wrote: post #274

Earlier quoted context omitted.

I came here to complain about Apple's autocompletion feature: probably 30% of the time when I start to type a long word, the exact word I want comes up in the suggestion box at the top; only by the time I click the box, the word has changed to something else. It would have been faster to type all 7 characters out with my thumbs than to delete and re-type everything again.

Also Apple’s various search across products (music, spotlight, ios) is so damn slow it exacerbates this issue hugely

Yes, my trick is to avoid the global search and go for a specific search, e.g. on the iPhone I go to the apps library and only then swipe down to get the search. That search is for apps only, so it's instant & responsive.

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

#297

Post by grishka »

simulation_ wrote: post #290

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.

There's no confirmation?...

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

#298

Post by hbossy »

My banking app takes this to extreme - it loads loan ads directly in place of "show payment authorization code" button, replacing it. Clicking it is not only loads chrome overlay with advertisement, but results with marketing phone call a few minutes after you close it.

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

#299

Post by smcl »

computerfriend wrote: post #208

This joke UI for the Hawaii nuclear missile alert system is my favourite depiction of this. https://gfycat.com/queasygrandiriomotecat

This is what The Guardian suffers from. It is slightly less-bad than it used to be, scrolling through an article on mobile would send you jumping around as new adverts spawned where you were reading - for the time being it appears to be within the first ~N seconds of load.

Steam suffers from it too - while clicking through your "Discovery Queue" it often displays a link to a video of someone streaming the game it recommended. Not that it matters now, Discovery Queue is hopelessly broken for me - only shows some very low-quality games i'm not interested in

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

#300

Post by smcl »

ricardo81 wrote: post #243
lnauta wrote: post #73

Google with its 'related searches' that pops up because I clicked on a link and I am almost never interested in this extra information. When trying to filter the relevant javascript it breaks some other stuff on the page (last time I tried a few years ago). Grrmbl

Yes. Has to be the dumbest injection of "stuff" onto a page ever. I wonder if anyone non-accidentally clicks on that stuff.

The team that implemented the feature will likely have cited its "popularity" in their promotion packets :)
Post reply on HN