11 ms·
Oh wow. This hits hard in the feels. Here's my personal submission for "UI problem that has existed for years on touch interfaces, plus a possible solution, bu
by pmarreck 1y ago
Oh wow. This hits hard in the feels.
Here's my personal submission for "UI problem that has existed for years on touch interfaces, plus a possible solution, but at this point I'm just shouting into the void":
https://medium.com/@pmarreck/the-most-annoying-ui-problem-r3ditm-31773fe6bbd5 https://medium.com/@pmarreck/the-most-annoying-ui-problem-r3...
In short, an interface should not be interactable until a few milliseconds after it has finished (re)rendering, or especially, while it is still in the midst of reflowing or repopulating itself in realtime, or still sliding into view, etc.
Most frustratingly this happens when I accidentally fat-finger a notification that literally just slid down from the top when I went to click a UI element in that vicinity, which then causes me to also lose the notification (since iOS doesn't have a "recently dismissed notifications" UI)
- majewsky 1y agoI have another submission for most annoying UI problem: Trying to read a thing, but it's on medium.com. The sheer amount of popups and overlays I need to click away before I can actually read your thing, geez.
- sevensor 1y agoThe worst is when somebody has a custom domain, but it’s actually medium so I don’t know not to click on the link.
- LeifCarrotson 1y agoThe sheer amount is zero with an ad blocker enabled. I consider UBO basically mandatory for browsing the web in 2025, too many sites are unusable and infuriating without it.
- warp 1y agoI had two popups visiting that medium link with uBlock Origin. Perhaps it is possible to get zero with UBO, but default settings don't seem to be enough.
- ziml77 1y agoI think you need to enable the Easy List Annoyances filters.
- Onawa 1y agoOP might also be using a list like the "Anti-adblock Filter". You also might want to explore the settings of UBO as there are more lists titled "Annoyances" that you can enable to shut out further garbage. https://reek.github.io/anti-adblock-killer/ https://reek.github.io/anti-adblock-killer/
- carlosjobim 1y agoYour browser should be set to open all pages in reader mode.
- SoftTalker 1y agoSome sites seem to be able to disable reader mode. I'm not sure why browsers allow this but it happens often enough, reader mode just isn't an option on some sites. In firefox you used to be able to do something like: about:reader?url=https;//www.example.com But seems that doesn't work anymore.
- carlosjobim 1y agoYou can force reader mode in Safari with Command+Shift+R But results may vary.
- monkeyelite 1y agoSometimes you see reductionist comments about websites just being for displaying text - but for medium it’s true.
- pmarreck 1y agoReader mode is a thing, but if you can suggest a better (ahem) medium to repost it to, I'd be happy to! (Honestly, I'm sort of with you on the medium thing, but I posted this years ago now...)
- kagevf 1y agoMaybe substack?
- emaro 1y agoOr Ghost. The reading experience was so good on Medium a couple of years ago.
- baq 1y agoAnalogy to Dilbert’s/Peter’s law: saas will be enshittified until the marginal revenue gain of next enshittification level is 0.
- pmarreck 1y agoNice! I made my first Ghost post! https://in-the-beginning-was-the-command-line.ghost.io/the-most-annoying-ui-problem-r3ditm/ https://in-the-beginning-was-the-command-line.ghost.io/the-m...
- zzo38computer 1y agoThis is one reason why I prefer keyboard-based UIs that do not automatically change anything that affects the UI while the UI is active (and being able to select things by entering a number or a name also helps, rather than having to use the arrows). (I also dislike touch-screen for many other reasons.)
- kagevf 1y ago> EDIT: It has been brought to my attention that these misclicks/mistaps are a source of ad revenue haha ... looks like "follow the money" applies yet again to get to the root cause ...
- graton 1y agoOne of the reasons I set Kagi to "lower" results from medium for my searching.
- ajot 1y agoI redirect to scribe, though that only works with medium posts https://scribe.rip/@pmarreck/the-most-annoying-ui-problem-r3ditm-31773fe6bbd5 https://scribe.rip/@pmarreck/the-most-annoying-ui-problem-r3...
- evelant 1y agoBrave browser on mobile and desktop. I don’t think I’ve dealt with annoying ads or pops for years.
- deleted 1y ago[deleted]
- zzo38computer 1y agoSometimes you can disable JavaScripts and that works (for that document on Medium, this works for me). Sometimes that doesn't work, but if you disable both JavaScripts and CSS, then it does work. Sometimes that does not work either.
- alias_neo 1y agoI've had this a few times, particularly on mobile, where you're doing something and some pop-up will steal focus, but of course you were tapping or swiping or something the exact instance it popped; it stayed just long enough for the after-image on your retinas to catch a single word and you realise it might have been important, but it's gone now, with no sign. This happened to my just the other day; I was purchasing something online with a slightly complicated process, from my mobile, I didn't want to f* up the process, and I was tapping occasionally to keep the screen awake while it was doing "stuff"; needless to say, something popped up, too fast for me to react, I have no idea which button I tapped if any, or if I just dismissed it, to this day no idea what it wanted but I know it was related to the payment process. I've seen this solved in dialogs/modals with a delay on the dismiss button, but rarely; it would also make sense to delay a modal/dialog of some kind by a couple hundred milliseconds to give you time to react, particularly if tapping outside of it would dismiss it. I find myself using Notification History on Android more and more often, but a lot of the time it's not even notifications, it's some in-app thing that's totally within the developer's control.
- pmarreck 1y agoThe fact that Android even has a notification history is huge. iOS does not!
- aidenn0 1y agoTIL Android has a notification history. I've been using Android phones for over a decade and never new.
- sayamqazi 1y agoYou can use this fact to see deleted messages on whatsapp. Just enable the notificaion history and Now whenver someones sends you somethign regrettable and deletes it you can still see it in notif history. The reason you need the notif history is whatsapp actually live wipes the notifictions for deleted messages.
- robofanatic 1y agoFor me the most annoying one is the cookie consent banner. Very few sites have clearly defined buttons like “Allow all” “Deny all” etc. but majority of them have a (intentionally) convoluted UI so that a lot of users just accept all.
- pmarreck 1y agoI frankly wish the web standards group had released an API for these so they could be handled at the browser level.
- wizzwizz4 1y agoWe've had multiple standards, mostly recently https://www.w3.org/TR/gpc/ https://www.w3.org/TR/gpc/ . They always fail, because they're never mandatory, so surveillance capitalists just decline to implement them – or, worse, quietly sabotage them.
- VladVladikoff 1y agoThis has a name, it’s called CLS (cumulative layout shift) and Google actually penalizes SERP rankings for pages with bad CLS. More info on it on lighthouse.dev (if I recall the domain correctly).
- tdpvb 1y agoGoogle is an annoying example! Especially on mobile the search bar shifts around between mainpage, search field edit-mode, and results page, but shifts only a half second after loading a static version. End up clicking into a blank new search page because the doodle jumps to right under your fingertip.
- VladVladikoff 1y agoRules for thee but not for me! Google also abuses their power of controlling Gmail to do special tricks in their email campaigns which regular senders cannot do. Using these they force white backgrounds on users who have dark mode enabled (because their default auto dark mode CSS is absolutely awful and makes emails look like crap).
- pmarreck 1y agothat domain doesn't work :( I did find this though, and I think I will add it to my medium post: https://web.dev/articles/cls https://web.dev/articles/cls
- mjevans 1y agoIf a user is interacting, DO NOT UPDATE the list / models / etc. If an update is required, rather than just desired, freeze all input so the user knows it's about to update, this might be accompanied by a quick 'fade' or other color shift to indicate an update is about to be pushed and they should release and re-plan actions.
- pmarreck 1y agoIt seems related to "debouncing", where you delay a lookup (to autocomplete, etc.) until a certain delay after a user stops typing
- asoneth 1y agoIf you're curious to learn more, this is often referred to as "layout shift". There are black-hat designers who deliberately use it as a dark pattern -- you might notice a suspicious number of cases where the most common click target is replaced by a click target (or late-arriving popup) for submitting an email address or entering the sales funnel. But typically it's just bad design. In the latter case, you could quietly disable buttons after a layout shift, but this can cause problems when users attempt to interact with an onscreen element only to have it mysteriously ignore them. You could visually indicate the disabled state for a few hundred milliseconds, but this would appear as flicker. If you want to be very clever you could pass a tap/click to the click target that was at that location a few tens/hundreds of milliseconds prior, but now you've got to pick a cutoff based on average human response times which may be too much for some and tool little for others. That also wouldn't help with non-click interactions such as simply attempting to read content -- while not as severe, trying to read a label that suddenly moves can be almost as frustrating. Some products attempt to pause layout shifts that might impact an element that the user is about to interact with, but while this is possible with a mouse cursor to indicate intent it can be harder to predict on mobile. Some of these ideas are even used in cases where a layout shift is necessary such as in a livestream with interactive elements. However, the general consensus is to use content placeholders for late-loading content and avoid rendering visible elements, especially interactive ones, until you have high confidence that they will not continue to move. That's why most browsers provide penalties for websites with "cumulative layout shift", e.g. see https://web.dev/articles/cls https://web.dev/articles/cls
- pmarreck 1y agoI just found that URL independently! I just added it to my medium post. Why do we even show interactable elements when the final layout isn't completed yet?
- asoneth 1y ago> Why do we even show interactable elements when the final layout isn't completed yet? Typically such a product either doesn't have sufficient UX attention, or it has black-hat UX folks. Optimally toolkits and browsers should have handled this since they know the layout dependencies. If an element is still loading and it doesn't have fixed dimensions then all elements whose positions are dependent on that element should not be shown.
- crazygringo 1y agoYes, 1,000%. The one I don't quite know how to solve is when I'm tapping a device to connect to -- whether a WiFi router or an AirPlay speaker or whatever -- and I swear to god, half the time my intended device slides out from under me a newly discovered device enters above and pushes it down. Or sometimes devices disappear and pull it up. Maybe it's because I live in an apartment building with lots of devices. I've seen this solved in prototypes by always adding new devices at the bottom, and graying out when one disappears, with a floating "resort" button so you can find what you're looking for alphabetically. But it's so clunky -- nobody wants a resort button. And you can't use a UX delay on every update or you'd never be able to tap anything at all for the first five seconds. Maybe ensuring there's always 3 seconds of no changes, then gray out everything for 0.5 seconds while sliding in all new devices discovered from the past 3.5 seconds, then re-enabling? I've never seen anything like that attempted.
- riggsdk 1y agoTo me the BIGGEST annoyance is the iOS “End call” button. Just as I’m about to tap it, the other person ends the call and what I’m actually tapping is some other person on my call list that it then immediately calls. Even if I end the call quickly they often call back confused “You called, what did you want?” Apple: PLEASE add a delay to touch input after the call screen closes.
- whizzter 1y agoHappens to me far too frequently as well!
- pmarreck 1y agoMy solution would account for this as well. The solution needs to be global. Literally, if any part of the screen just changed (except for watching videos, which would make them impossible to interact with), add a small interaction delay where taps are no-op'd.
- mikewarot 1y agoVideo shouldn't count as the screen changing, it should just be an area of "media". It's appearance or disappearance could be counted as a change, but not the contents of the area itself. That could be a global rule to save much exception making.
- deleted 1y ago[deleted]
- ziml77 1y agoIt's not just a touch issue. Desktop environments have toast notifications and dialogs that can pop up unexpectedly (neither of which are remotely new problems). You can be trying to click something at the corner of your screen and have it intercepted by a notification or you can be pressing enter and have it activate the default action on a dialog that just popped up. Especially in the dialog case you often just have to hope that it wasn't actually something you needed to see or select a different option on.
- mgoetzke 1y agoOr apps like Skype which popup a dialog while you are typing, and when you where in the middle of pressing space while that happens, then you auto-answer a call you didn't know existed a second earlier.
- prometheus76 1y agoOh man. This makes me want to throw my phone against the nearest brick wall sometimes. The UI is loading, I reach for the button I want to hit, but it moves and a different button takes its place because the app/page is still loading, or worse, an ad has taken the place of the button. This also happens where sometimes the hotbar has three buttons, and sometimes four, and the worst apps are when buttons switch ordinal positions depending on if there are three or four buttons in there. It feels very strange to get so agitated by these small behaviors, but here we are.
- chasd00 1y ago> or worse, an ad has taken the place of the button. this has happened to me and i even clicked on the ad. It actually made me smile a little bit and reminded me of the "clever girl" scene in Jurassic Park.
- pmarreck 1y agoIt's like getting poked hard in its annoyance level, right? > or worse, an ad has taken the place of the button That's actually a dark pattern/perverse incentive I hint at towards the end of my blog post about it.
- munificent 1y ago> In short, an interface should not be interactable until a few milliseconds after it has finished (re)rendering I was a console game developer working on UI for many years so I am deeply familiar with the problem when a UI should be responsive to input while the visuals are changing and when it should not. You might be surprised, but it turns out that blocking input for a while until the UI settles down is not what you want. Yes, in cases where the UI is transitioning to an unfamiliar state, the input has a good chance to be useless or incorrect and would be better dropped on the floor. It's annoying when you think you're going to click X but the UI changes to stick Y under your finger instead. However, there are times where you're tapping on a familiar app whose flow you know intimately and you know exactly where Y is about to appear and you want to tap on it as fast as you can. In those cases, it is absolutely infuriating if the app simply ignores your input and forces you to tap again. I've watched users use software that temporarily disables input like this and what you see is that they either get trained to learn the input delay and time their tap as tightly as possible, or they just get annoying and hammer inputs until it gets processed. And, in practice, it turns out these latter times where a user is interacting with a familiar UI are 100x more common than when they misclick on an unfamiliar UI. So while the latter case is super annoying, it's a better experience in aggregate if the app is as responsive as it can be, as quickly as it can be. Perhaps there is a third way where an app makes a distinction between flows to static context versus dynamically generated content and only puts an input block in for the latter, but I expect the line between "static" and "dynamic" is too fuzzy. People certainly learn to rely on familiar auto-complete suggestions. UI is hard. A box of silicon to a great ape is not an easy connection to engineer.
- pmarreck 1y agoGreat point, and I suspected the problem might not be as easy as it appears at first glance. (Because of course it isn't...) I also considered the case when you're rapidly scrolling through a page- if a naive approach simply made things non-interactable if they've recently moved, that would neuter re-scrolling until the scrolling halted, which is NOT what people want
- cal85 1y agoThese are great points. But I would debate the 100x point a little. And I think there are some cases where ignoring fast taps is clearly preferable. I’m specifically thinking about phone notifications that slide in from the top – ie, from an app other than the one you’re using. So we have two options: ignore taps on these notification banners for ~200ms after the slide-down (risking a ‘failed tap’) or don’t (risking a ‘mis-tap’). I’d argue these are in different leagues of annoyingness, at least for notification banners, so their relative frequency difference is somewhat beside the point. A ‘failed tap’ is an annoying moment of friction - you have to wait and tap it again, which is jarring. Whereas a ‘mis-tap’ can sometimes force you to drop what you were doing and switch contexts - eg because you have now cleared the notification which would have served as a to-do, or because you’ve now marked someone’s message as read and risk appearing rude if you don’t reply immediately. Or sometimes even worse things than that. So I would argue that even if it’s 100x less common, an mis-tap can be 1000x worse of an experience. (Take these numbers with a pinch of salt, obviously.) Also, I’d argue a ‘failed tap’ in a power user workflow is not actually something that gets repeated that many times, as in those situations the user gets to learn (after a few jarring halts) to wait a beat before tapping. All that said, this is all just theory, and if Apple actually implemented this for iOS notifications then it’s always possible I might change my view after trying it! In practice, I have added these post-rendering interactivity periods to UI elements myself a few times, and have found it always needs to be finely tuned to each case. UI is hard, as you say.
- betenoire 1y agocounterpoint, and I know it's not apples to apples, but have you ever used an old terminal app? Buffering the key strokes and then applying them _once_ the menu was ready was awesome. You could move so fast through an app
- IIsi50MHz 1y agoCould often do this in ye olde Macintosh System Software, too. Could fill the event queue with events, and rely on the program to intelligently clear the queue just before an incompatible UI change.
- kmacdough 1y agoI certainly agree in many cases like those you mention, particularly for unprompted popovers like notifications. For desktop professional software, on the other hand, I believe the value of swift muscle memory supercedes this. In this case, input should be buffered and applied to the state of the app after the previous input has been processed. Open a tool window, subsequent keystrokes should be sent to that too window, even if it takes a second to show. The "new/modern" interface on my CNC is both show and doesn't properly buffer input, and its hugely painful. EDIT: I realize you specified touch, which isn't "desktop", but my CNC control is touch based and the same applies.
- zzo38computer 1y ago> In this case, input should be buffered and applied to the state of the app after the previous input has been processed. Yes, and this works best with keyboard-oriented interfaces (which I think is generally much better than touch screens anyways; a lot of software I write is designed for keyboard use because it has this and other benefits). However, it should only be done if the process of the UI is what is expected; if something unexpected occurs then it might be better to discard any pending input. (But, sometimes this "expected" and "unexpected" is not so clear.)
- geocar 1y agoI think the reason this is hard is because your eye only thinks it is seeing the change occur after you touch, but it's just seeing the change occur after the decision to touch which isn't the same thing at all. Maybe not all the time, but more often than you probably think. Since you can't go back in-time, what I suggest to arrange for the event (if it occurs slightly after the redraw) to be applied using the old display model (instead of dropped). If the redraw occurs slightly after the event (and you're right) I'd prefer delaying the redraw instead of delaying the tap.
- otikik 1y agoI am sure Youtube at least relies on this kind of issue in order to inflate ad clicks on their mobile app. Ads pop up at any point and override the in-screen controls.
- Brian_K_White 1y agoI fkn hate that too.
- stronglikedan 1y agoI yell into that very same void at least once each and every day.
- amelius 1y ago> an interface should not be interactable until a few milliseconds after it has finished (re)rendering And should an interface be interactable for a few milliseconds longer, after it has disappeared?
- pmarreck 1y agoah, that's an interesting point!
- evelant 1y agoThe thing that kills me about touch uis is the chance that this problem can happen at all. For some unknown reason designers insist on putting most controls at the top of the screen. I guess because that’s where they usually are on desktop but when you think about it, it makes no sense. All the controls get put exactly in the place where you can’t reach them easily on most devices. Where you’re likely to misclick on notifications because they’re in the same spot. Where your hand will be covering most of the screen when you reach for them. It would make so much more sense to put controls at the bottom, content at the top. You could reach them without stretching, you wouldn’t cover the screen with your hand to reach them, and they wouldn’t conflict with pop down notification systems. Why on earth are all the controls still at the top?!?
- lukan 1y ago"In short, an interface should not be interactable" I think a interface shouldn't be even visible, if the elements will be jumping around until they are done validating and loading.
- drivers99 1y agoI dream of making my own OS that would eliminate this completely. It would use a framework of taking turns with the user. When it's the user's turn to provide input, nothing on the screen would change, ever. After the user completes their input, the computer can do whatever and then provide the output when it's done. Command lines pretty much do this all the time. I think there might be an old IBM terminal type that would send a form for the user to fill out and send back. If there were ever notifications (I would prefer not to have them at all), they would be incorporated into the next set of outputs.
- etherealG 1y agoImagine this as a voice chat interface between 2 human beings. This is basically pretending like the interaction of thought and perception of what is on screen is somehow gated by a “I have fully consciously absorbed everything on screen and decided my next action” perfect modeling where both the human ability to perceive and the computer ability to represent information are prefect. No. That’s not how humans interact with computers. It’s not how humans interact with each other either. Turn based games can be fun. They are not how we want to interact for day to day life. Sorry but your idea comes across as one that makes the job of making the computer good to interact with easier, but not as one that makes the computer better to interact with as a human. Please stop over simplifying a complex system. Humans are complex, the solution is t to be less human. It is for computers to become better at human interaction on human levels.
- deleted 1y ago[deleted]