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

https://medium.com/@stephenjayakar/frontend-developers-stop-moving-things-that-im-about-to-click-on-5827bc0409b3

by ingve • 4 years ago

839 350 4 years ago

Normille• 4 years ago

Way back when I first started learning to build web pages [when HTML4 was just a glint in Tim Berners-Lees eye], it was conidered bad form not to prvide a 'width' and 'height' attribute for an image you were placing on the page.

Because if you provided these, the browser would know how much space to leave for the image to occupy after it had downloaded [this was back in the dial-up modem days. So images usually loaded gradually after the rest of the page] and so the layout of the page would not change. Conversely, if you didn't provide 'width' and 'height' attributes, the browser would only leave a default small icon sized space for the image and then you'd have the page content move and shuffle about as each image downloaded and the rest of the page content got elbowed out of the way, to accommodate it.

It's funny how such basic concepts of usability seem to have fallen by the wayside in our new modern Web3 [or whatever version buzzword we're on now] in favour of moving content, modal overlays and the like. And, since so many sites these days just aggregate content from countless other external sources, even that basic notion of pre-defining your image sizes is often neglected too.

xeonmc• 4 years ago

Every time I'm reminded of this:

https://i.kym-cdn.com/photos/images/original/001/333/130/835...

deckard1• 4 years ago

basic concepts of usability seem to have fallen by the wayside

Sadly, the tech may have changed but both our ideas on usability and the incentives at play have remained the same. Which is to say, the devs I know of all know that popup videos, banners, modals, etc. are all trash much like the popup ad banners of 1997. But we do them anyway because the people that pay us have financial incentives that have been proven via misguided A/B testing that they work. And by misguided I mean... we're talking about manipulation, right? That's the whole shell game of A/B testing. You're testing your way to what works best for you and not your users. It's Tinder knowing the perfect match for you but not showing you that person because you'll quit the app if you ever met them.

I can't even take a11y or people that advocate a11y seriously today. You built modals and carousels with frustrating timeouts that slide content before I'm done looking at it! You're a circus clown.

nkrisc3• 4 years ago

That's the whole shell game of A/B testing. You're testing your way to what works best for you and not your users.

A/B testing is a tool. Any tool can be misused.

chiph• 4 years ago

I would suggest that the enormous size of today's pages have taken us back to the behavior seen in the dial-up days.

Then: Page was slow because the delivery was via a 56k analog modem.

Today: Page is slow because the average page size is 2.2mb. Plus JavaScript parsing + execution time. Plus asynchronous calls to go load more stuff. Plus time to re-layout around the new stuff.

frereubu4• 4 years ago

This - "Cumulative Layout Shift" - is part of Google's Core Web Vitals - https://support.google.com/webmasters/answer/9205520?hl=en - so if people are doing that, they're going to be penalised by Google. (Although probably only a bit, given the number of other factors that go into search rankings).

Beldin• 4 years ago

Meuh - google does this with youtube. Load video: video centered. Oh there's a side bar, let's shift the video. Oh the contents needs a smaller dimension, let's shift again. Rather annoying if you're used to watching videos at more than default speed - the control for that shifts 2-3 times.

at-fates-hands2• 4 years ago

One of my first jobs as a front-end dev, I was told repeatedly if you released a site and had forgotten to put height, width on images, it was seen as a defect and would affect your year end metrics.

By my second or third job, nobody seemed to care about it and when I brought it up, it was brushed aside as a "browser issue" and not something we devs needed to worry about.

You make a great point, and something I'm seeing a lot more of now that I'm in accessibility.

pulvinar• 4 years ago

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.

ptx• 4 years ago

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.

jspash2• 4 years ago

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

joezydeco• 4 years ago

And stop asking me to do a survey on your website when I've only been there for 5 seconds.

smeej• 4 years ago

Or sign up for your email list.

I don't know if I want to hear from you ever again yet!

bee_rider2• 4 years ago

Would you like to subscribe to this substack before you finish reading literally the first article you’ve ever seen by this author?

wizofaus• 4 years ago

I always assumed it was done deliberately to trick users into clicking on ads...

AdvancedSimian• 4 years ago

It happens so often that I, too, assume it is done for precisely the same reason.

vlad• 4 years ago

A commercial app is just a blend of software bugs that encourages profitability (not too many bugs, not too few).

romellem• 4 years ago

I agree with [this][1] idea:

an autocomplete has one chance to reorder per keystroke. if you got it wrong and you have a better ordering a bit later you must “swallow the sadness” (as per the original author of this wisdom) but never change already displayed items

[1] https://twitter.com/dan_abramov/status/1470751551568363530

fbdab103• 4 years ago

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.

CoastalCoder• 4 years ago

You're the product. I'm not sure they care what you think.

bombcar4• 4 years ago

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

hnick6• 4 years ago

Users are spending more time in the Start Menu, and visit Bing more often: engagement metrics are up!

layer83• 4 years ago

The sane alternative is to use OpenShell.

jve• 4 years ago

One can only hope that this thread finds a way onto some responsible MS employee monitor.

Yeah, MS is not good at search, but I think having one engineer tackle windows search for over all these years would have brought us instant and relevant search results.

How many times I have to find the right keyword to find something I KNOW is there but that satisfies the search engine is more than I want to recount.

devnullbrain2• 4 years ago

I want foo.

- Type 'f'

- foo appears in the search.

- Type 'o', because I type with 10 appendages and getting them to work together requires pipelining.

- foo disappears from the search

This should never happen.

layer83• 4 years ago

This happens all the time on iOS with the “predictive text” feature, it’s maddening.

yxwvut• 4 years ago

Just wanted to comment in agreement and confirm that this exact scenario drives me insane. Adding more information that agrees with the existing top suggestion should never change that top suggestion.

colanderman3• 4 years ago

+1000. I forget which search -- it's probably macOS Spotlight -- drives me batty with this daily.

Firefox has a related misdesign. If you type a word which matches both a search keyword and a history item, the search keyword takes precedence -- which is nonsensical, since I've typed nothing (not even a space) following the search keyword. So e.g. I have a `cpp` keyword to search `en.cppreference.com`; typing `cp`+Enter brings up `en.cppreference.com`, as does `cppr`+Enter, but `cpp`+Enter does a search for an empty string.

Nursie2• 4 years ago

Concrete example from my firefox url bar -

type 'for' - forums.overclockers.co.uk appears, this is where I'm going, I go here once on most days

type 'forums', because my fingers didn't get the memo to stop - forums.samygo.tv appears at the top, a site I haven't visited (on purpose) in almost a decade, mostly because I don't have that tv any more.

Massively annoying.

00deadbeef• 4 years ago

Spotlight on my iPhone does this.

I want my bank, Monzo.

I type Mo

It shows Monzo

But I instinctively type an 'n'

It shows a Google result for "Monica" whoever the hell that is, plus driving directions to somewhere, plus settings, plus results from my emails, plus results from my messages, plus every Easter Monday since the dawn of time from my calendar, plus a whole load of photos it decided were relevant... everything except Monzo.

Now I have to type 'z' to get Monzo to display again

ajjenkins• 4 years ago

I agree that this is extremely annoying. It happens to me all the time with the iOS keyboard suggestions.

For websites, Google calls the Cumulative Layout Shift (CLS) and it’s one of the Core Web Vitals they use for measuring website performance.

https://web.dev/cls/

heavyset_go3• 4 years ago

Which is ironic considering Google search results do exactly this with suggestions after the page finishes loading.

zikohh3• 4 years ago

I came here to check that someone had mentioned this and I’m not the only one. No clue how the article didn’t mention this because I get burned by it daily

bhauer3• 4 years ago

Same here. All the time with the iOS keyboard. It's infuriatingly slow with suggestions. They always refresh well after my finger has already started moving to select one.

mclightning• 4 years ago

Ironically, Android's core UI elements are horrid in this regard.

throwaway81523• 4 years ago

This. Some of us still remember Punch the Monkey.

naveen99• 4 years ago

gmail does this annoyingly also

ilrwbwrkhv• 4 years ago

I agree. This is the greatest sin of the modern web development sphere. So so irritating.

wkjagt• 4 years ago

Same thing happens when error messages push the whole form down. This is annoying when for example I log in to my bank account using 1Password. When 1Password gets focus (and the login form loses focus), the login form immediately complains with an error message saying the fields are required and pushes the form down. When I select my bank login from the 1Password dropdown, I always immediately try to click on the "Sign in" button, which at that point moves up because the error disappears.

NikkiA• 4 years ago

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.

leetbulb• 4 years ago

I've always wondered, but figured that there must be, others who find this type of UI quirk (and find it humorous). "Self-oscillating" I like it. Thanks.

ianai2• 4 years ago

That sort of stuff is outright user abuse.

pc862• 4 years ago

No, it's just a bug.

Oxidation3• 4 years ago

This can happen in native UIs as well. I've had to add hysteretic behaviours to prevent the appearance of a scroll bar somehow obviating the need for the scroll bar, so it vanishes and now it needs a scroll bar, repeat as fast as the toolkit event loop allows.

esprehn• 4 years ago

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.

bchris4• 4 years ago

Happens to me quite often with searching for apps on iOS, it almost seems perfectly timed to switch the icon you’re tapping on right as you’re tapping it

ptato• 4 years ago

Where is that spot? That has never happened to me, but I'm curious to see what it looks like.

vidanay• 4 years ago

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.

devnullbrain2• 4 years ago

I've noticed this with JIRA, there is not much space to click 'safely' to focus on the window

thewebcount2• 4 years ago

AppleNews on the iPad is like this. I literally can’t touch anything on the screen when reading news on it or I’ll accidentally “subscribe” to something, or open a new article, or worse, put an article into some weird 1/3rd size window that can’t be gotten rid of and sticks to the side of the screen. It’s fucking maddening.

ksherlock• 4 years ago

There is a youtube setting to disable that. Settings -> Playback and Performance -> inline playback.

BLKNSLVR4• 4 years ago

Since Office apps started putting an increasing number things in the title-bar (search, autosave, username, filename) there's limited dead space to use for traditional things like dragging and maximise / restore. I'm never sure where to 'grab' or double click - I don't know if I'm going to start a click-failure cascade if I do it in the arbitrarily, non-obviously 'wrong' place.

rendaw• 4 years ago

And the autoplaying is them wallpapering over the issue that thumbnails are user chosen and now have no relevance to the actual video, right?

racked2• 4 years ago

Netflix is the worst at this. Nearly every time I use it, the UI will piss me right off.

plorg• 4 years ago

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 decides you are selecting text and there is almost no way to dismiss the resulting copy/etc popup without tapping elsewhere on the page - which you cannot do without navigating elsewhere or otherwise causing an unwanted action.

hnick6• 4 years ago

Following the same theme of liminal UI areas, another thing that peeves me is touch screens like my local supermarket self-checkout which respond with a beep (indicating they know I hit the button) but do nothing, because apparently the beep-region and action-region and not the same. Or maybe I dragged my finger, in which case, please don't beep.

soulofmischief6• 4 years ago

I spent half an hour last night resolving this exact class of bug on a padded clickable widget I was making.

No one told me it had to be perfect, but I care about the user and don't ever want the user to be surprised.

That's the difference you get with outsourcing your engineering team vs developing in-house. If you choose a good team, your developers feel directly responsible for the user experience, go beyond stated requirements, and aren't just doing the bare minimum in order to make a paycheck. A good UX professional is constantly testing their work with unexpected input.

wruza2• 4 years ago

Oh, this is close to how Android/Material buttons work. When I had that phone, I wondered at least once a day why a button is visually reacting (material “wave” effect) when I tap it but does nothing.

It may even be the same thing you described, if they somehow managed to attach a sound to an animation instead of a handler.

princevegeta892• 4 years ago

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 all the way to main menu or where I started

Godel_unicode3• 4 years ago

At least on YouTube you can turn that off.

chillfox• 4 years ago

As someone who usually keep the mouse away from what I am looking at (I find it distracting) It's super annoying for random shit that I am not looking at to be activating.

paganel• 4 years ago

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?

soulofmischief6• 4 years ago

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.

zinckiwi3• 4 years ago

At least they have the precisely correct blue, though. https://stopdesign.com/archive/2009/03/20/goodbye-google.htm...

racked2• 4 years ago

They probably employ large teams of both good and bad UX designers, constantly deploying and A/B testing UI changes. If the A/B test says the change wins, it stays.

Sites like Booking.com do this to the umpteenth degree.

ryandrake• 4 years ago

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!

noduerme5• 4 years ago

> 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.

toast0• 4 years ago

Google cloud console does this kind of thing without even needing to have the mouse anywhere in particular. I just close my eyes and click on where I hope the target will remain.

devmor• 4 years ago

Twitter has an issue like this with its video player - clicking on the vertical volume bar to adjust it and moving past the seek bar that it intersects with causes the volume interaction to drop off in favor of the seek interaction.

krautsourced• 4 years ago

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

klazutin• 4 years ago

I've recently come across a perfect example of just that: [1]. Just try to slowly move the mouse over any of the round red year marks at the center of the page.

[1] https://www.computerhistory.org/timeline/ai-robotics/

smitty1e• 4 years ago

How many times have I tapped the lower-left icon in Android and then have the recently-used apps shuffle themselves ahead of opening the desired app?

Copious times.

29athrowaway3• 4 years ago

The gold standard for the web should be: Craigslist

Fast, functional, responsive.

ianai2• 4 years ago

And as far as we know no tracking/propping up anything for attention regardless of ramifications.

29athrowaway3• 4 years ago

I meant in terms of how the frontend is constructed.

Oxidation3• 4 years ago

Or McMaster Carr. RS, with it's laggy backend (I assume, as their recent UI shinification didn't change it: it was bad before) could learn a lot from them.

Then again, McMaster Carr want you to use an app on mobile and the new RS site works on mobile quite well, with the lag more hidden by the inefficiencies of mobile browsing in general.

rjbwork• 4 years ago

McMaster Carr is one of the greatest websites there is. It's incredibly easy to find just about any kind of hardware.

29athrowaway3• 4 years ago

Ah, yes. Another classic.

hnick6• 4 years ago

whirlpool.net.au is so fast here in AU sometimes I refresh and I'm not sure it did anything.

schipplock2• 4 years ago

This website also looks very good (subjective of course).

TheAceOfHearts• 4 years ago

Related to this, here's a pet peeves of mine. When YouTube is buffering a video, it shows a spinner and you can't press play or pause. Usually if something is buffering a lot I'm in a place with spotty internet, so I'd like to pause until I'm somewhere with better Internet. If I say pause, you should not continue playing the video under any condition. I have made my intent clear.

aendruk• 4 years ago

Reminds me of my Dell monitor. Years old muscle memory is:

  1. Unplug laptop from monitor
  2. Power off monitor

but step one triggers some automatic input detection mode for about 10 seconds during which the monitor ignores its power button.

bee_rider2• 4 years ago

That’s so annoying. I’d be tempted to get a power strip or smart plug and so I could revert to: unplug laptop, cut power to device.

Actually — they make those “green” plugs, where power is cut from the majority of the plugs if none if flowing through the control plug. Maybe check those out.

wtallis• 4 years ago

My Samsung monitor has the same kind of problem. It's often quicker to hold down the button for several seconds and force a shutdown of the monitor, than to wait for the monitor to recover enough to be able to display the menu that has the power-off entry.

userbinator2• 4 years ago

I have my monitors set to always use the same input, but the reponsiveness of the buttons/OSD on some of the newer monitors is noticeably laggy for some reason. At least 100ms if not more between pressing a button and seeing the response. Ironically, I also have some Samsung LCD monitors from around 2 decades ago (they still work, but are rather small) where the OSD response is instantaneous.

colanderman3• 4 years ago

Similarly, my car (Subaru) won't let me turn off the radio for 10 seconds when I start it because it needs to display some ridiculous warning.

uxfail8333• 4 years ago

These fails are everywhere. The lift in my building used to play a 2second ding before opening the door - frustrating as waiting for a lift got longer and longer - however it progressively got slower each month - looks like the dings were stored on a decaying SD card..

thewebcount2• 4 years ago

Oh man, so many video-related websites do this shit. It’s even worse in some cases where if you hit pause, then drag the playhead back to the beginning (say because you want to wait and show the whole thing to someone), it starts playing again as soon as you let up on the playhead. Like, I want to pause, put the playhead somewhere and still be paused. Is that so fucking hard to understand?

Moru4• 4 years ago

Another bad function: You watch a movie and then suddenly have to go to work. That's fine, just put it on pause to continue watching later. You take the bike, fix whatever needed physical presence and in the meantime the spouse jumps out of her skin when the playback suddenly starts again after four-odd hours. Why would I want that function?

kjkjadksj4• 4 years ago

Back in the day you used to be able to buffer the entire video too. So if I had a bad connection, I’d open a dozen youtube links, walk away for 5 mins, then come back and watch whatever with zero hiccup. No longer possible now that content only buffers a portion of the way, not just on youtube either. If you are on a spotty connection its therefore better to just pull the video with youtube-dl.

jiggawatts4• 4 years ago

But what if you don’t watch the video? That bandwidth is wasted.

Someone at Google did the math and figured they can save some single-digit percentage of their annual bandwidth spend.

At their scale thats $millions and that guy got promoted for frustrating every person out there like yourself.

jiggawatts4• 4 years ago

State Machines!

It’s not something you had to learn just to pass a CS exam and then promptly purge from your memory.

The buffering state is a state, not an arrow!

User interface states should respond to inputs, including cancellation, retry, etc…

zestyping2• 4 years ago

This has always bugged me too.

The _desired state_ (playing or pausing) and the _actual state_ are two different things.

Whenever these two things are different, they should have two separate representations.

The problem is that they are mashed into one ambiguous representation.

itronitron• 4 years ago

It would also be nice to have functional scrollbars again, instead of the 3 pixel wide ones we have now which have removed support for clicking to scroll.

Jedd• 4 years ago

Spotify (on Android) is the worst offender for this.

The playlist shortcut shows six playlists, but 2-5 seconds after rendering these, about the same time it takes you scan over them and see if the playlist you want is offered in this set and get your finger into position, it re-renders them with different content & different order.

The full playlist selection does the same thing, using some hybrid and opaque MFU / MRU algorithm -- I'd be delighted with a pure alphabetical ordering, rather than having to visually scan down an unsorted list that's re-ordering itself as I read.

Mind, the Spotify UI can be held up as a shining example for basically every user-hostile anti-pattern, so I guess there's some consistency in their design.

kichik• 4 years ago

For me it's Twitter for Android. It keeps loading new tweets to replace tweets I'm actively reading in the timeline.

bschwindHN• 4 years ago

Yep, Spotify immediately came to mind after reading the title. Happens on iOS too.

andrewflnr• 4 years ago

Interesting, I've encountered a lot of problems with Spotify on Android, but not that one.

I did have to do some work to track down the alphabetical ordering feature for my playlist listing, after they unset it and moved it, but it is possible to set it, at least for the main listing (I find the MRU thing helpful for the "Add to playlist" menu, so I don't mind that I don't know if it's possible to set it there).

krick• 4 years ago

Oh, it gets better. On Android (at least, LG-flavored one — never used any other android phone) I have an issue with inter-app "Share" button popup. It somehow manages to re-shuffle all the suggestions (apps/recipients) exactly in the same amount of time that is natural for me to spend before clicking on the desired contact. Which several times made me send something to a wrong person, which resulted in extremely awkward situations. I don't know how common that is, since it was never fixed after all the updates, but I still have to be very careful and to make an unnatural pause waiting for UI to update every time I use this feature.

brokenmachine4• 4 years ago

I'm on Samsung and it doesn't re-shuffle as you're looking at it, but it's in a different order every time.

It's so irritating if you're doing the same operation many times, ie sending the same picture to multiple people separately.

Also the share menu has a different layout according to what app you're using. I understand that it's up to the app developer to get fancy with it, but it would be really nice if you could have a setting for "use standard share menus", or something like that. Or even better if there was some way you could make it be the same every time, like choose your favorite apps to share to.

It's unbelievable that these billion dollar companies can be satisfied letting this garbage represent their product.

I'd make sure to fix these if it was my hobby project, let alone a "finished" product that's on sale by a giant multinational.

bavell2• 4 years ago

Same here, every time I share something from YouTube --> NewPipe, the icon is in a different place, even when I'm adding multiple videos to my queue one after another. Every. Damn. Time. So frustrating.

brokenmachine4• 4 years ago

The inconsistency of the UI is ridiculous too.

There's countless examples, but the one that really annoys me every day is when the alarms go off.

I have alarms to wake up in the morning, and on the alarm screen you have to swipe to dismiss, but to snooze you have to tap the other button.

Sleepy me has a lot of trouble remembering which one's which, even though I've done it probably a thousand times at this stage.

And even though it's a big 6.7" or whatever it is screen, they make the buttons absolutely microscopic.

Moru4• 4 years ago

I have a similar problem. I can't open the eyes at all that time of the day so I just try to feel my way to the phone. Most of the time I manage to turn off instead of snooze and wake up a lot later. My solution was to put the phone with the screen down and slightly lift it so the screen protector opens upp. When it closes again, it activates snooze. Took me a few times to figure that...

blurbleblurble• 4 years ago

This is so so so so bad. It's always such a risky situation too. The instant-send shortcuts pop up right as I'm about to tap something else, causing me to send something directly to the wrong person with no intermediate step. What if I'm sharing something confidential or sensitive? Way too much room for error.

meibo• 4 years ago

This still happens and it's the absolute worst, it gets worse the more apps you have. It's also just incredibly strange how it choose who to show in the share menu and there's no way to exclude apps.

No, I never want to share anything ever at all to #company-all on Slack. Do not show it in my YouTube share menu when I want to send a dog video to my partner.

rrrrrrrrrrrryan• 4 years ago

The Android share menu was trash for many years, but it's definitely been getting some love lately. (If you don't have a Pixel you might still be rocking an older Android version.)

Perhaps a year ago they drastically improved load times, but the recommendations became much more stupid, and in recent builds I feel they've actually struck a good balance.

zestyping2• 4 years ago

Share is the worst. It is incredibly slow to appear and update.

dredmorbius2• 4 years ago

Also the fact that there are choices presented which I have never selected and never will.

I've seen that share-selection-reordering on numerous devices, including Onyx BOOX, which seem to otherwise mostly provide their own Android interface. So whatever's driving that seems to be deep in the environment.

Eleison232• 4 years ago

Here's the problem: developers cut their teeth on twitch video games and so they have no compunction about forcing users to play a video game at every app and every web page we encounter.

It's funny, I frequent a government-owned website for people with disabilities and receiving public benefits, and one of their UI elements is a marquee message "You have a message!" which scrolls from right to left. If you are deft enough to click on it, you will discover that your password expires soon! (Your password always expires soon) That is actually not the important message section of the site but the system notifications that don't tell you anything about your benefits status or applications. It's a laugh riot every time I see one of those message marquees. I've quit clicking on them because I've figured out they are worse than meaningless.

nathias• 4 years ago

that's more a concern for UX designers, where the chief value should be consistency

pmontra• 4 years ago

It's not only buttons, sometimes the whole UI moves. Many mobile websites use sticky headers and footers that stick or unstick, appear or hide according to the position of the users in the document, how long since they touched the screen, scrolled, etc. I either switch to reader mode or savagely use uBO's element picker to select and permanently hide those elements. At the end of the treatment either the header displays only when I scroll to the top and the footer when I scroll to the end or they never display. I really don't care because what I want to read is the content in between.

etothet• 4 years ago

The current version of the Amazon Prime Video app (and maybe also the HBO Max app?) on Apple TV has one of the worst examples of this I’ve ever experienced. In their featured listings, they should cards of shows/movies in what is basically a portrait view. When one of the cards becomes active, after a second or two it becomes wider and its content and background image changes and the cards to its right are pushed out further to the right. So as you’re looking at a card and you begin to read it, its entire contents is modified! It’s so maddening.

bombcar4• 4 years ago

I HATE all the video apps I use - the one that drives me up the wall the most is that I know they have a horizontal UI - I can see it on my TV - but on the phone you HAVE to browse in vertical, and play videos in horizontal.

WHYYYYYYYYY

fleddr• 4 years ago

All the examples are a case of unfortunate timing: asynchronous things doing late UI replacement that happen to conflict with the time window in which you click.

That's amateur stuff. Our car does this intentionally. As your finger is in mid-air, on its way to hit something on the touch screen, it's detecting this motion and then shows a context bar in the top and bottom by the time you land your finger. Which often overlays whatever you were going to touch.

It's so comically bad that I think a team of engineers is laughing back at the factory: "look! he's trying to touch something again!".

The other prank they included is traffic alerts. You're sitting in a traffic jam for 10 minutes already and then my music stops, only to hear: slow traffic ahead.

WaxProlix• 4 years ago

Some phones are great at this - if you're on a call and want to look up your account number to give to a service rep, getting close enough to tap an app button turns off your screen, even in speakerphone mode. Pull back your hand to tap the power button to turn on the screen? Well the screen detected your finger left and turned on just as you were hitting it. Now you're in a third state, intentionally off screen, and just moving your finger around the sensors won't change that. You have to tap the same power button again, and then start the process all over.

Don't forget you've been talking to a service rep this whole time, or more likely sitting going "uhhhhhhmmm..." like a dipshit.

Eleison232• 4 years ago

A great one lately is Wikipedia's new search with suggestions. If I'm typing in the search bar, I may type a complete query and then press "Enter". Well, if my mouse happened to be hovering over a suggestion, then "Enter" will choose that suggestion instead of completing my chosen query instead.

pull_my_finger• 4 years ago

Honestly, everyone knows this. If you're creating sites that do this in 202X you're just being willfully ignorant/lazy. There are plenty of component libraries for rendering placeholder components in the popular frameworks, react has the suspense API etc etc for exactly problems like this.

Tiddles-the2nd• 4 years ago

When it comes to ad links I've always wondered if it's ignorance or done deliberately to make you click on the ad.

keltex• 4 years ago

It also has to do with the ad networks. For example with Google adsense, they really encourage you to use responsive ads:

"You can use responsive ads to provide a great user experience on your pages. They look good on desktop, tablet, and mobile devices. "

But when you use a responsive ad, google can dynamically decide the height of the ad. They don't want you use use a fixed height container:

"The parent container has fixed or limited height. Responsive ads should not be placed inside containers with a fixed or limited height, as they may be taller on some devices or browsers. If you need to limit the height of your responsive ads, you’ll need to modify your code and use CSS media queries to set the height of the parent container."

https://support.google.com/adsense/answer/9183362?hl=en&ref_...

https://support.google.com/adsense/answer/9183362?visit_id=6...

frereubu4• 4 years ago

It could well be naive A/B testing. "Oh, this configuration has really increased our click-through rates", not realising that it's because people are trying to click on something, and an ad jumps into the space that they're just about to click.

layer83• 4 years ago

Still delay-inserted content like the Wikipedia donation banners are a regular occurrence.

kjkjadksj4• 4 years ago

I love delay insert content when it comes to paywalled news at least. These devs are so lazy. Many paywalls I encounter are avoided entirely by just hitting the stop button on my browser since they have the content rendering before the paywall.

bondarchuk• 4 years ago

I have googled the letter "n" countless times just trying to visit news.ycombinator on firefox android...

bombcar4• 4 years ago

And now you're the world's leading expert on n

delecti• 4 years ago

I've likewise googled "i" countless times trying to go to imgur on firefox windows for the same reason.

zinckiwi3• 4 years ago

There's probably a bit of the algorithm that is dutifully noting your long-time, consistent interest in n, and making sure to reward you for your dependability by canonising it ever-stronger in your profile.

AndrewDucker• 4 years ago

Latest one to catch me out on is when receiving calls on my Pixel phone it will pop up "screen call" as an option where the "accept call" button had been half a second earlier, and not let you override it to actually accept the call.

derekp7• 4 years ago

That one caught me the other day (shortly after an Android OS update). I only saw it once, with the button down at the bottom of the screen. I can't seem to get it to do that again when I try calling my phone from another phone.

Also, your report is the only instance I've seen to confirm that this happens -- for whatever reason no one believes me when I post something about this to any Android group. Just like I seem to be alone in trying to figure out how to get the Contacts (when launched from the dialer) to show only specific groups (such as contacts with phone numbers). I can do this from the Contacts app, but not the Contacts tab inside the call dialer app.

bombcar4• 4 years ago

I swear some of these are intentional results of bad A/B testing (or active maliciousness) - especially as it often seems that what you want to click moves out of the way for an ad.

yonrg• 4 years ago

Yes, just please ...

graycat2• 4 years ago

I agree and don't like Web pages that are complicated, require time, clicks, and effort to learn to use, have page content jumping around, cover the page with images requiring the user to stop what they are trying to do, change the window size and magnification, find a way to get rid of the image and do so, return the window size and screen magnification to what they were, and get back to the reason they came to the Web site.

In my startup, uh, I'm on good terms with our front end developer and we agree on Web page design techniques:

So, no popups, pull downs, overlays. Nothing on the screen jumps around or moves. Large, relatively bold fonts and high contrast.

Always have both vertical and horizontal scroll bars.

No warnings or requests to permit the site to use cookies -- the site makes no use of cookies.

Hmm, maybe someone somewhere, maybe the EU, will make a big stink that we have not asked users to let us use cookies. Sounds like a good source of publicity until finally we end the stink explaining that we use no cookies and are not required to get approval for NOT using cookies!

The site HTML makes nearly no use of JavaScript.

Users don't login.

Users are not asked to spend money or up click on some popularity counter.

The server cores generate each Web page quickly, and each page sends for only about 40,000 bytes. When we convert the storage for our SQL database from rotating disk to solid state memory, the page generation will be significantly faster. Net, the site is responsive.

The pages and user interface are based on just the HTML controls with one line text boxes, push buttons, links where each link is a single word in the Roman alphabet in English with a simple meaning -- page design techniques very familiar to likely 2+ billion people.

Ah, we don't expect 2 billion devoted users right away and will be pleased with 1+ billion!

jodrellblank• 4 years ago

"Hmm, maybe someone somewhere, maybe the EU, will make a big stink that we have not asked users to let us use cookies. Sounds like a good source of publicity until finally we end the stink explaining that we use no cookies and are not required to get approval for NOT using cookies!"

The EU does not require you to ask permission to use cookies if you do not use cookies. Encouraging web developers to not use cookies, and as a consequence have no banners, is one of the positive incentives of the cookie legislation.

InCityDreams• 4 years ago

You're doing everything right regarding cookies, but have somehow managed to either not understand how the EU would regard your non-use of them, or your site does not exist.

graycat2• 4 years ago

What I wrote is just a guess and partly a joke: Cookies and requests to permit them are now so pervasive on the Internet that NOT making such a request might cause some people to assume the site WAS using cookies WITHOUT permission and make a "stink". I still suspect that there might be some such "stink".

For the EU, I was poking fun at what appears to be some heavy bureaucracy in the EU. Also I was referring to the EU as a geographic region and not necessarily a government. I was guessing a "stink" might come from some person, maybe in the media or some small organization; I didn't say or believe that my site would actually be violating some EU law.

No request to permit cookies is one more way to save the users from botheration and more quickly get to the purpose of the Web site.

your site does not exist

The code runs as intended, and site exists and is on the way to being available to the public.

The site seems to be by a wide margin the best solution for a problem.

The problem the site solves is one part of a quite general problem. There should be opportunities for more startups to solve other parts of the general problem. The general problem should be good for 2 billion users, but the part being solved by my startup might be 1% to 5% of that, that is, 20 million to 100 million. That is the site has a focused audience. The focus stands to make the audience smaller but easier to please.

dredmorbius2• 4 years ago

Thank you, in case you don't hear that enough.

zikohh3• 4 years ago

Google search result suggestions beneath hyperlinks is one of the worst at this. Was happy to see this article

s-xyz• 4 years ago

Hear hear. I am always amazed by this. Often linked to Cookies popups as well.

jtode• 4 years ago

Of all the things web designers do, this is the one that makes me want to reach through the wires and ju

ldjb2• 4 years ago

Something that really frustrates me is when an alert pops up on my screen just as I'm about to tap something, so my tapping then dismisses the alert before I've had a chance to read what it said.

Hopefully the contents of said alert weren't important, but in most cases I'll never know…

kadoban• 4 years ago

If this is for Android, there's a notification history you can look in. You may have to turn it on first, can't remember if it defaults on or off.

ldjb2• 4 years ago

I love Notification History. Before that feature became available, I relied on a third party app to log my notifications so I could check them if I accidentally dismiss any.

However, that unfortunately doesn't help with in-app notifications/alerts.

ceejayoz• 4 years ago

Yes; I've long wished there'd be a 500ms or so "no interaction" delay on these.

colanderman3• 4 years ago

In addition to this, macOS has the following bizarre behavior with notifications.

If any one application emits multiple notifications (say, several new calendar items), they pop up in a group -- but this is hard to see, since they're all stacked on top of one another. There is an X at the top-left corner, just like all other notifications. When you go to click the X, the group suddenly expands, and the X changes into a "Clear All" button!! 80% of the time this results in me closing a large stack of notifications without realizing they even existed.

kjkjadksj4• 4 years ago

I have do not disturb set on my mac, and once it goes off I get like a dozen completely inane notifications that had been brewing during the do not disturb period, like reminders to upgrade my icloud account.

kylehotchkiss• 4 years ago

* open instagram

* see cool photo

* go to interact with it

* photo is gone, replaced with something else

lnauta• 4 years ago

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

ricardo81• 4 years ago

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

smcl2• 4 years ago

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

drewbeck• 4 years ago

Instagram search is my daily frustration. 100% of the time I search I’m looking for a user’s account. Type type type, see the user come up in results, go to tap but now they’ve loaded in 10 possible autocomplete options for my search, pushing the thing I want off the screen. And of course now I’m in the “explore” page with a search term I don’t want, taking a bunch more taps to get where I need to go.

I agree with others that I think the incentives are against the user here. In the IG case they don’t care if I find my friend quickly. It does not help them in any way. But hey they got a click on the autocomplete suggestions (win for that PM) AND another view on the explore page. Clearly I love these features!

lame-robot-hoax• 4 years ago

This pisses me off more than it should. I’ve slowly gotten better at not immediately clicking on the account (which ends up with me clicking on the search result that shows there instead) but every time I forget I get unreasonably mad.

h0l0cube2• 4 years ago

Anyone else try peeping the chat in Zoom?

low_key• 4 years ago

It's awful. I absolutely hate it. First click: show chat. Second click: record meeting.

h0l0cube2• 4 years ago

I'm glad I'm not alone

schipplock2• 4 years ago

Also: someone sends you a direct message, you reply, but you send the message to everyone :).

etothepii• 4 years ago

VSCode LiveShare

neilv• 4 years ago

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. When, in a sense, they finally did take control of the Web, HCI (usability in service of user) had evolved into "UX" (advertising-like graphic design in service of non-users).

There's often disincentive for things like "user can understand what the controls are and what the state is", "user can focus on the information they want", etc. UX won't care about these things until some time after users are so aware of the problems that it affects engagement metrics and eventually A/B testing figures out why.

I'm imagining a eureka moment, during which a UX researcher, trying to find a new, improved dark pattern, to screw over hapless users harder, accidentally lets slip in some old-school good usability, which wasn't even supposed to be in the test sets, but discovers that this strangely resonates with users.

solardev4• 4 years ago

In my experience, it was usually higher-ups and not the UX people who wanted to implement dark patterns. The UX people and devs wanted to make the enduser experience better (believe it or not), but were frequently overridden by some higher business priority (we NEED this popup as soon as the page loads! opt them in to all the newsletters by default! highlight the highest-margin products).

Some companies just don't respect their users or customers, and/or try to optimize for short-term metrics that make some individual or agency or department look good at the expense of long-term loyalty. But I've never seen a UX person willingly suggest a dark pattern... all the ones I've worked with were forced to implement them, despite much protest, because some manager wanted it there.

tartoran• 4 years ago

Both front end and backend devs are the eqivalent of workhorses who implement whatever the business wants. Few can afford to keep their record spotless and while I struggle to point out my own blemishes I sure as hell worked on things I didn’t believe in or things I wouldn’t do if I didn’t have to earn a wage.

seer2• 4 years ago

It’s not so hopeless though. Not sure about UX, but for devs there are plenty of jobs, so you are free to switch whenever you see people doing or worse, demand you to do, dark patterns.

I’ve literally quit a job out of protest, where I started reading user emails complaining about the service we were building.

Stuff like “put the unsubscribe button at the far end, gray on a gray background, so it will be harder to find”. People were actually closing their bank accounts as they couldn’t find a way to unsubscribe from the service…

We had a few hard talks about it and when the company kept up with it I just up and quit.

And I got a job for a lot more money almost immediately. Turned out people who would do that to users, were underpaying their employees quite a bit too, who would have thought…

notjoemama• 4 years ago

it was usually higher-ups

lol, it was the product department, they like to think of themselves as higher ups, they see the VPs and execs galavanting around with business dinners and cocktail lunches and they want in, so they tell everyone light grey "unsubscribe" in 3em smaller font on a white background is a great idea, besides...the un-skipable FAQ splash screen will redirect them to solving their problem on their own which makes them feel accomplished and keeps them on the system while reducing support costs, see how awesome they are?

i've heard this circular corporate self righteousness too many times

noduerme5• 4 years ago

It would be really nice if modern browsers just waited to load all the images (or at least their sizes) before rendering any text on a page. Yeah, it would be slow as hell! It would force web designers to start compressing their images again and specifying sizes in the layouts. Obviously this isn't really possible anymore because of the range of screens we're dealing with. Okay, then here's an alternative:

A browser plugin that reads the image heights and page heights on each page you visit, along with your window size, and reports that back. Then pre-sizes the height of the window and the elements for other users with the same plugin based on what it recorded.

nyanpasu64• 4 years ago

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.

_nalply• 4 years ago

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.

DonHopkins• 4 years ago

Sun's tragic X11/XView based "xbugtool" pioneered a lot of this misbehavior and worse in the early 90's, especially when you foolishly tried to use it to file a bug against itself, which triggered some extremely dark patterns indeed, like scrollbar spoofing, passive-aggressive input queue blocking, and keyboard focus locking:

http://www.art.net/~hopkins/Don/unix-haters/x-windows/xbugto...

For a more philosophical approach to user interface design, see "Jojo on UI":

http://www.art.net/~hopkins/Don/unix-haters/x-windows/jojo-o...

amelius• 4 years ago

In any case, when the browser decides that it has to move something and you click, then the browser should remember the state of the screen say 100ms ago, and use that to determine what you wanted to click on.

teawrecks• 4 years ago

Steam does this to me. Some games use an Invite button to open a special steam invite menu. This shows all my friends with an invite button next to them. It also insists on dynamically sorting the list based on the person's current status (ex. Starting/stopping a game). So if I hover over the invite button for someone, and someone higher than them in the list moves lower (or vice versa) right before I click, suddenly I'm inviting whoever happened to be adjacent to them in the list. This has only led to an awkward "actually I didn't mean to invite you" conversation once.

cm21873• 4 years ago

The signal desktop app does that. I often open it to read a message I just received. But by the time I click on the top contact it is replaced by an update signal button. Very frustrating.

hnick6• 4 years ago

Would it be possible on the rendering engine side to detect if an item re-flowed and discard the user event if it happened within some time e.g. ~200ms ago? Something sites could opt out of for HTML games or things where it is intended behaviour. It's probably a bad idea, but it might help.

Side note about the first example, I wonder if Lyft is having chats about "Users really want to set up group rides, but always back out of the funnel - we have to make it easier for them!"

cloudking• 4 years ago

Twitter does this too on the algorithm timeline, open the mobile app, try to tap a tweet and it gets replaced after network update.

neeh0• 4 years ago

Why developers? In most cases I know this is responsibility of product people who explicitly want that.

actionfromafar• 4 years ago

How many times I haven't called the wrong number on iPhone. It somehow rearranges last called list exactly as my finger travels down to touch the screen.

togaen• 4 years ago

jfc yes

shitloadofbooks• 4 years ago

Steam does this when you're going through the discovery queue and land on page with a "stream" or whatever going. You're about to click Next and then the Stream element loads and shifts the whole page down ~500px and then you click on something else.

It's absolutely infuriating!

mcv3• 4 years ago

My biggest frustration for this is the typing completion on Android. I'm typing, and while I'm typing another character for the word, I see the word I want listed above the keyboard. But just as I hit the word, the suggestions update and my word is replaced by another. And often my word is still listed, but in a different place, which js incredibly annoying. Or sometimes the word disappears, despite it still being a valid completion for the word I'm typing. Why suggest it and then remove it?

bhauer3• 4 years ago

Same thing happens all the time to me on the iOS virtual keyboard. The root problem, in my opinion, is that word suggestions lag far too much. They are refreshed at least a few hundred milliseconds after your last keystroke.

I know Windows Phone is long dead, but its virtual keyboard was consistently superior at providing suggestions that were well-aligned with user intent and not awkwardly delayed such that options shifted while the user's finger was in-flight.

rightbyte• 4 years ago

I guess the suggestion engine was local and no spyware BS?

butz• 4 years ago

My personal favorite is finding a place to put cursor, so animations would get stuck into endless hover/normal state.

oraphalous• 4 years ago

Aww bless - OP thinks FE devs get to choose what they implement.

sli• 4 years ago

I would, if I had literally any agency in these decisions. I can explain the problem, it will get nods, and I'll get told to do it anyway. Folks need to really adjust the focus of their criticism where it belongs.

linsomniac• 4 years ago

A lot of the responses are talking about how apps should fix this, which I agree with, but I'd also like to see it at a higher level...

I'd like to see frontends (browsers, Android, iOS?) remember their widget hit points for ~400ms, and if you've touched somewhere that had a different widget hit point within that time, use the old widget.

Godel_unicode3• 4 years ago

Or at a minimum don’t go to the new widget but just have a UI indication that you registered the touch/click.

rasapetter• 4 years ago

Or simply ignore clicks on elements that haven't been visible for longer than a few hundred milliseconds. I'd be happy to click again.

jdswain• 4 years ago

You know what would help with this, if the click rectangle updates were delayed, maybe by 1 second, after the UI updates. Then if you were already aiming for a button when it moves, you'd still tap it.

boosteri• 4 years ago

Related, on Android the Mobile wallet seem to went through an A/B testing of some sort, alternating between 'Google Pay' and 'Wallet' app couple of times. The icons would automatically disappear, replaced by the other option. Que me standing in front of the POS desperately scrabbling around my mobile screen, feeling like an idiot the first time it happened.

a1371• 4 years ago

AliExpress had this annoying thing that an ad bar would appear at the top of the screen about a second after page load. The ad bar would shift down the search bar just as you wanted to click to search something. So you'd accidentally click on the ad instead.

This was (is?) the issue for quite some time. I always wondered if the analytics people knew about it or they thought that ad just gets a lot of hits. It was always some AliExpress promotion.

postalrat• 4 years ago

OS developers: stop opening a window I didn't open on top of the window I was just interacting with.

zinckiwi3• 4 years ago

I don't know how they did it -- probably a highly sophisticated combination of machine learning and focus groups -- but YouTube will reliably dismiss the video controls brought up by a tap pricely 60ms before I reach the moment in the video that I wanted to pause on.

nilslindemann• 4 years ago

I doubt that the reason for the suddenly appearing banner in the first example is a slow internet connection. The app checks if the mouse is near the button and then the banner is loaded. A form of clickjacking.

timnetworks• 4 years ago

Microsoft Teams is terrible with this. People are constantly responding with accidental and unrelated emoji reactions when trying to interact with a post.

Nothing better than trying to reply to a death in the family of a coworker with a LMAO smiley.

[edit] Microsoft Teams is just generally terrible. It's likely the worst piece of 'competent' software I have ever ever used. [/edit]

exabrial• 4 years ago

While we’re at it… Front end developers: stop using JavaScript for _fucking everything _.

jspash2• 4 years ago

At $dayjob we have a pretty simple product page (e-commerce site) that has the requirement of 2 or 3 dropdown controls. In the early stages of the build I suggested we use the native browser <select> boxes. The idea was widely panned but I did it anyhow because we were short of time. It took me about 3 1/2 minutes to implement and another 2 hours to join it up with the back-end and write a few simple specs.

Fast forward to 6 months after launch. We've now replaced the native control with an "all singing/all dancing" javascript version written in Vue. Thing is, it doesn't know all the lyrics and it couldn't do a box-step if it was stepping off a box. We get bug reports literally every few days because it doesn't act like the native control. And we'll _never_ actually stop the bug reports because people on different systems expect it to act like the native one. Something that is literally impossible to do when writing it on your own.

So now, even with all the evidence pointing to it being a bad idea, nobody want to rip it out because the integration is too muddy and could cause further bugs.

:facepalm

Sohcahtoa82• 4 years ago

I'd settle for them to stop fucking with scrolling.

Scrolling behavior is user-configurable. There's no need to decide "Fuck your preferences, one scroll-wheel click is going to be 1 line of text" and override my configuration. There's no need to implement "momentum" to scrolling, or make it bounce, or try to implement smooth scrolling since my browser does it anyways.

resonious• 4 years ago

I think this kind of thing is super easy to introduce with the modern practice of async everything.

When I visit a modern webpage, it feels like I'm watching a golem take form from the debris around it. It starts out as this weird ugly contentless frame, and then things start popping in one at a time. It's quite hard to know when it's done.

Makes me miss the days when servers would serve me a full webpage. Browser shows me that it's loading, and once it's done it's done. It's also easier to develop sites like that, as you don't have to code your own loading spinners or make those weird "empty placeholder content" boxes that kind of show you how the site is laid out.

seer2• 4 years ago

What an apt analogy! I always thought of it as a transformer unspooling from its compressed “car” form.

But thats what we get when multiple teams are responsible for the same web real estate.

userbinator2• 4 years ago

Front end developers: Stop making SPAs.

99% of the time I'm forced to use a site that turns out to be a horribly bloated SPA that I only get to see after enabling JS, and which will do irritating things like what is described in the article, among others, it's to do something that could've easily been done with a simple HTML form and perhaps a bit of JS enhancement.

alvah• 4 years ago

What is a SPA? It's not as if Googling this word will enlighten me.

e63f67dd-065b• 4 years ago

Single-page app. Basically JS takes over most browser functions and you have your application running in a single "page", so to speak. For example, clicking on a link is a state transition in the app, so instead of telling the browser to go to the new link, the app will push new history to the browser history stack and do the transition itself.

Think youtube.

verelo• 4 years ago

Couldn’t agree more with this. Search results that auto complete but pull from two sources that get unioned in the UI are my major gripe. Initial return is great, i go to click but then boom the second dataset comes in and i click the wrong click by accident.

Drives me insane.

Cameri• 4 years ago

ProtonMail does this a lot on mobile. It's so infuriating.

rounakdatta• 4 years ago

Even the most UX-sensitive apps like Google Dialer (Phone) does this bad behaviour. The Speaker button moves as soon as the call gets connected.

yieldcrv2• 4 years ago

All the product teams think your accidental clicks on their broken UI are “engagement”, validating the continued use of that layout

And they also think your frustration is “longer engagement”, validating their KPI and job security and companies ability to sell shares

pixel_tracing• 4 years ago

I thought this would be about frontend websites with ads, to me that is much worse problem than these mobile apps. At least mobile apps (native ones) provide a unified UI and framework, front end sites insult the user by ads which move the html around on the fly.

Anyone know what I mean? Can anyone relate to my frustration?

saberworks2• 4 years ago

Apple maps enrages me for doing this. When you first open the app it like shows a screenshot of what you were looking at last time while it loads. Sometimes that screenshot is retained as the active view (for example if I have a search up), but other times after a couple of seconds the whole app just resets. This causes me to hit the "dictation" button quite often instead of the X button that was on screen when I start tapping (X button to close previous search result is replaced with a view reset and now the dictation button is under my thumb).

A screenshot of the app shouldn't be a loading screen!! It seems to depend on how long it's been since the app was last opened and/or how the internet connection is at the time. Bank apps show a proper loading screen.

techsupporter• 4 years ago

Apple maps enrages me for doing this. When you first open the app it like shows a screenshot of what you were looking at last time while it loads.

This has started to really irritate me since it feels like every application in Apple's mobile ecosystem does this. My device has SIX GIGABYTES OF MEMORY[0]. Why do you need to swap everything out of RAM almost instantaneously?

What grinds my gears the most is that state isn't preserved. Apple Maps and Music are the absolute worst for this. Music will show the same screenshot and then just unceremoniously dump me to the "Listen Now" or "Browse" screen (it seems random which) and completely disregard whatever playlist or album I was in. The last song I played and track position are kept but good damn luck getting back to the spot I was in--particularly which playlist--before the app got put on ice.

That screenshot is just a point of "hahaha nope" frustration.

0 - Yes, I mean actual Random Access Memory, not "storage capacity."

saberworks2• 4 years ago

Yes, as a music app both apple music and youtube music are completely worthless. Why can't they remember where I was at when I get back into my car and the bluetooth connects. It can't be that hard right? I get that apple's stupid policy kills the active process if I haven't used it in a while, but it can't be that difficult to just store where I was so next time I hit play, it's in the same place? Oh, amazon music can't remember my place either. I never had this problem with an ipod, a creative labs music player, a cassette tape, or even a cd (in my car where they will pick up where it left off).

yieldcrv2• 4 years ago

Instagram’s search screen is the worst for this

You start typing and at first it shows you best matched accounts - things you recently visited or you follow - and then it loads in search suggestions on top of them, pushing the whole layout down

when in reality you already saw the thing you were going to click on and now you misclicked on one of the suggestions

kevmo314• 4 years ago

The one that aggravated me the most was https://cloud.google.com/

The "Console" button on the top right shifts just at the right point in time for me to see it but miss clicking it.

I trained myself to start typing con to autocomplete console.cloud.google.com instead.

markdown• 4 years ago

Twitter is the biggest offender on the internet. Tweets suddenly disappear just as you go to engage with them.

bhauer3• 4 years ago

The iOS keyboard's suggestions are the worst offender here. They always lag more than other virtual keyboards I've used, and I routinely end up selecting a different suggested word than I intended because they change from beneath my finger. I can't tell you how infuriating the iOS keyboard is.

girafffe_i• 4 years ago

Thank you

computerfriend• 4 years ago

This joke UI for the Hawaii nuclear missile alert system is my favourite depiction of this.

https://gfycat.com/queasygrandiriomotecat

chrislan815• 4 years ago

loool this is a serious problem

smcl2• 4 years ago

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

nonameiguess• 4 years ago

Even funnier that there is a control bar for gfycat itself that gets covered by a cookie acceptance popup that shows up after a second or so. Try to pause this and you'll get blocked halfway through your own click.

track16• 4 years ago

That was a very scary day in Honolulu for all of us who live here. Ads will really be the death of us all, someday...

stuart78• 4 years ago

I don’t disagree with the points here, certainly have my own list of this category of pet peeve. One other peeve is “do better” as a linguistic device which we’ve see flourish in the last few years. To me, it consistently reads as arrogant and condescending towards the person in need of correction. Rather than this simplistic mandate, perhaps a more specifically helpful call to attention.

josefrichter• 4 years ago

This is often a deliberate grey hat design.

Sateeshm• 4 years ago

You.com does this too. I've been using it as default search engine on my phone and the constant layout shift as things load is super annoying

johncoltrane• 4 years ago

Random technology bloggers: stop assuming that the developer as a say on every feature.

sunjester• 4 years ago

This is a problem for people who are very proficient when using the internet, "computer experts", and not for many others.

However, this has been a problem in Google search results for a while now (and you know what I mean, I don't even have to say it), I figured they have would fixed it by now... I have even made a custom Chrome Extension that kills these annoying ads and shifty DIV's. It would be nice to see a big list of these crappy shift DIV's and UX fails.

djaychela• 4 years ago

This is a problem for people who are very proficient when using the internet, "computer experts", and not for many others.

I'd disagree. My mum is 83 and has complained about this in apps on her phone and when using websites.

mattlondon• 4 years ago

This is where you use loading skeletons or ghosts, where there is a blanked out section that gets replaced by the real content when it is loaded in.

cmod• 4 years ago

The worst is airdrop which will shift and shimmy drop targets as they're discovered …

rajasimon• 4 years ago

Happend to me lot of times on when I search something on Twitter web. Every time I search it shows relevant results immediately but after the network request it will reorder or position the incoming results on the top. Resulting wtf moment...

keepquestioning• 4 years ago

The absolute fucking worst offender here is iPhone search.

bmitc• 4 years ago

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 as fast as me clicking something on the screen, it seems updating the list is the very last thing they do.

jer0me• 4 years ago

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.

grishka2• 4 years ago

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.

TulliusCicero• 4 years ago

Alternatively, if the list is actually updated with new information, block input to the list for 300ms or so.

gwd• 4 years ago

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.

antihero• 4 years ago

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

FollowingTheDao• 4 years ago

Right? Just click on Safari's address bar to see this in action!

mns• 4 years ago

This isn't even just affecting the web. In the macOS Ventura in Safari they added a new option in the context menu when "right" clicking on an image, something like "Copy subject" or whatever that means. The problem is that that option isn't there from the beginning, but it pops up 1-2 seconds after, as if they are doing some processing on the image. Now if you are in a shop for example with a list of products, or an article or whatever, anywhere where an image is linked to something else and try to open the context menu for opening in a new tab (yeah I do that more often than using the CMD click), if the image is towards the bottom and the context menu doesn't have enough room at the bottom and is rendered a bit higher than your click so that it fits in your viewport, you wait 1-2 seconds and Apple adds right at the end of the context menu another option that just moves all other options one slot higher, making you always click for example Open in new window instead of a new tab or whatever option was right under your intended click, as everything in the context gets shifted. I don't know how Apple didn't see this and I don't know who thought that adding another entry in the context menu after it's rendered initially is a good idea.

thinkingemote• 4 years ago

just in case someone from Amazon owned Twitch.tv reads this in the future

First issue is that it shows the controls for the video, and allows you to click on them and shows you them as clicked or changed, but when the video loads it resets them.

So if you want to reduce VOLUME or mute things before video loaded. Give it a try, looks like it works, nope, too bad, it's reset. Same with the PAUSE button. Nope, it will fool you into thinking you have paused it but it will actually autoplay the video. Basic essential functionality in a video player rendered useless.

Secondly is the Setting menu to reduce / change quality or speed up the video. Here menu items load in after the menu is first open, even after the video has loaded. So you go to change something useful but nope you accidentally click the report button or something. You literally have to open the menu, wait a couple of seconds and then you can click on the option you want.

Now there was a similar issue with stuff not loaded, underneath the video player, where the user would click something near the follow/unfollow but they would accidentally unfollow the user. Now they added a confirm dialog, so at least that's an improvement.

vba616• 4 years ago

This increases accidental clicks on ads, so I would think there is a definite incentive not to fix it.

Even if you can't find anyone who specifically can be blamed or had a conscious plan, it seems like something that would be an emergent phenomenon.

"Invisible hand" as they say.

Havoc• 4 years ago

Yep. Every morning the play button on my FT podcast jumps due to variable sized slow banner ad. It’s still jarring even if you known it’s coming

prennert• 4 years ago

I think this comes from the idea that progressive loading makes for a faster user experience. But in practice it makes the user experience not only worse but also slower. So lose-lose.

I noticed it a lot on Google products where it annoys me quite a bit. It does this in search where it expands a bubble thing with irrelevant carousel content just after the first results (cannot even recall what the content is because it is not helpful). That pushes the entire list of results down making me either click the wrong search result or waiting before clicking. Both probably good for OKRs but horrendous user experience.

Worst one is though on (Pixel) Android where it does this in the notification when receiving a call. It starts with bubbles for "decline", and "accept" but then after a second it inserts "screen call" in the middle, replacing "accept". Screen call is a accessibility feature that breaks the expectation how the call works (no voice). It made itself used the first time for when trying to take an important call. A completely unnecessary move, as the list of options could just be appended... This again makes me wait for all options to come up before clicking.

nikolay• 4 years ago

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 the wrong button underneath your mouse pointer!

climb_stealth2• 4 years ago

This! If anyone has a solution against the window popping up in the foreground on MacOS please speak up.

I think one of the build-an-OS-from-scratch projects had this as a feature. You create a window first for a program before starting it and it is not able to pop up outside of that or change its focus. Don't remember which project it was but it always stuck in my mind as an awesome feature.

tacker2000• 4 years ago

Same issue: when im typing something and then a popup appears out of nowhere and then I accidentaly hit “OK” or whatever the default button is by pressing space on MacOS! Wtf!?!?

lewantmontreal• 4 years ago

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?”

snazz01• 4 years ago

I once clicked into a corporate login window and typed my domain password, it completely ignored my click and I ended up typing my password to a coworker in Slack.

krumbie• 4 years ago

This is not only about things moving away from where they were, but also popup windows appearing above a thing you wanted to click on. You cannot always avoid that, so I think the solution is to ignore clicks on things that have recently (in the last 500ms or so) appeared or shifted.

Neil44• 4 years ago

Ha. Installing Adobe reader, afterwards you open it and have to go through an awkward semi manual step to set it as default because Microsoft would prefer you to use Edge. They pop the dialogue in one place then it moves up and to the left a few inches. It’s a little game now to try and have the cursor in the right place to click already. Remind me when IT is going to start getting easy please? :)

shultays• 4 years ago

God I hate this, even the biggest players are doing that like google. If you want to show something additional either make it like a pop up, or don't disturb the page's flow

If it is impossible to fix then we should at least make buttons not clickable for ~100ms if their bounding boxes changed significantly (or just popped up on your screen)

mcv3• 4 years ago

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?

simulation_2• 4 years ago

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.

grishka2• 4 years ago

There's no confirmation?...

simulation_2• 4 years ago

The loan button was sending you to the screen with slider where you were able to choose amount of money to loan. So it wasn't causing you to take loan by accident, but just clicking it was noted somewhere as being interested in taking and loan, and caused bank to call to you about it.

hbossy• 4 years ago

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.

xpil• 4 years ago

Kia Sorento suffers from a similar problem: after powering on, it shows a list of (up to three) profiles with the "accept" button at the bottom of the screen. Frequently the "accept" button is initially disabled (for whatever reason) and the correct profile is pre-selected so you simply wait 3-4 seconds for the "accept" button to become enabled so that you can touch it. But the millisecond the "accept" button becomes enabled, the profile switches from the one you want to a randomly selected - and you register the fact too late because you have already pressed the "accept" button. Now you either drive on a different profile, or you have to go to the settings menu and select the right profile. Worst case, it takes up to 35 seconds from when you power on the car to when you can actually drive it on the right profile. Very annoying.

amsterdorn• 4 years ago

This problem has been solved with "skeleton" loading placeholders. It takes a low amount of effort to implement, the issue is just carelessness/lack of empathy for the end user.

deafpolygon• 4 years ago

I daresay that the modern versions are designed as a dark pattern to get people to click on things they otherwise wouldn't have.

bheadmaster• 4 years ago

Google used to do this for me a lot. I'd search for a phrase, click on the first result - and while I'm clicking it, an ad would appear in its place and push the first result down, directing my click on an ad instead.

I have some suspicions that it was done that way on purpose.

epalm• 4 years ago

My current pet peeve with a shifting UI is Visual Studio's Git Changes view, which adds status/response messages to the top of the view after performing some actions, shifting everything down by the height of the message.

plaidisdoomed• 4 years ago

Seriously stop spending time doing this clout chasing on social media.

It would sad if your employer did layoffs and your lazy ass was top oned because your idea of impact was stuff like this

Ambolia• 4 years ago

Some websites also eat text if you type too fast, or eat text if the page is not 100% loaded. Despite all the nice features websites still feel like half broken 90s desktop applications.

aanthracite• 4 years ago

I would rather blame designers for such poor UX. Front-end devs these days are told to do something and their opinion is not respected :(

BrandoElFollito• 4 years ago

I was always wondering if the ads that take some time to load and take over places where some useful links were previously are coded like this purposefully.

This is particularly visible on mobiles where I need to be really careful where I click and usually wait for the whole page to load, or have a muscle memory on where to click what (for pages I visit often)

AtNightWeCode• 4 years ago

My favorite hate in this field is youtube.com. You go to the site, it loads the nonsense background with the items outlined, that they claimed is important for transitions, pop effects and other buzzwords that they don't understand. Proof, when the page finishes loading some hero garbage pops up and pushes all the crap down 1/3 of the page.

mawise• 4 years ago

My pet peeve is when the app moves focus after rendering useful content.

On Outlook 365, I'll start typing an email, and then as page load finishes(?) it moves my cursor off the email field and my keystrokes get interpreted as keyboard shortcuts. I've probably never accidentally deleted an email but who knows!

MacOS on login will similarly let me start typing my password, and then decide it's actually done loading the screen and erase the password characters I've typed, and the prompt only gets the last 2/3 of my password.

wackycat• 4 years ago

Delivery apps often have a rating where it will list the dishes with the option to thumbs or thumbs down. My instinct is always to click each item going down the list down the list but after clicking the first thumbs up a text box asking what you like pops up. It's terrible. The workaround: thumbs up each item moving up from the bottom of the list so that the text box popping up doesn't interfere. Bottomline, if users are working around your UI instead of through it; your UX is terrible.

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

Related Stories