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.
I really wish UIs would stop doing things on hover events altogether. Just because I stop my mouse doesn't mean I intend to do anything, let alone auto-play a video or have some pop-up explain something to me. Let me rest my goddamn hand for a second!
I'm totally fine with tooltips on hover. In fact, quite often they should appear quicker. And sometimes they don't appear at all when I really want them to. No idea what's going on with that.
But yeah, hover is just for info about the thing you're about to click, not pretending I've already clicked it when I haven't.
The stupid thing about Youtube is that sometimes a video starts playing on hover, in the thumbnail and without sound, and then I actually do click it because indeed it is something I want to watch, and then I miss the first couple of seconds because it's already shown those, with the sound off. It's just the most bizarrely stupid UI decision I can think of.
I'm sorry to inform you that, by hovering over the video, you have Engaged with the Algorithm and thus demonstrated that the auto-play is Good, Actually.
Short-sighted optimization for engagement is the cause of an overwhelming majority of the problems on the Internet.
I agree. There are sites and apps where I need to make a conscious effort to put my mouse pointer in that one place where it does not trigger any hover actions, so I can just read the text. Incredibly annoying.
Nothing should ever autoplay because of a hover.
The only acceptable use of hovering is to change the color of something to highlight it, without changing any layout. The only exception is if you've already clicked and are engaging with a game or simulation inside a defined area.
I think that's okay as long as they don't enlarge or anything when you're hovering over them. And as long as they don't start playing audio or downloading an entire video.
For me, hover events should not be able to modify the size & font size of the element in question: Only the element's colors (text & background), & text formatting (underline, bold, italic) should be modifiable.
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.
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.
Yeah. Any position or size change is almost always a no-no. Even if you don't thrash the layout, you could shift your event targets and get caught in a thrash.
I weep for this new generation of web developers. So much more complexity, leaving little time for studying and nailing well-established HCI principles, which used to be less of an issue when web was simpler.
What vexes me is that I learned these principles from companies like Google in the first place.
I learned them the hard way by designing reflow typography layouts in the late 90s and early 00's, mixed with interactive elements; and later thinking out whole sites with layouts that weren't reliant on a particular DOM or browser. It's a bit stunning to me that Google taught any of these principles at any point beyond eliminating all the art. Which to me was the beautiful part of the early web.
I have literally no idea what people are learning now in academies before being set loose to do front-end work, but obviously it's mediated through so many libraries that they haven't had much time to consider what's going on behind low-level user interactions and load sequences.
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
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.
> 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.
It used to be accurate and much better at the time they had ratings for their content, but I think it all changed when they removed that feature since they wanted all their content to be consumed, they then would present even low relevancy results on the top during the search.
Holy cow, I had no idea. This is how to do it: when on the youtube page, click on the profile button in the top right -> settings -> playback and performance on the left -> disable inline playback.
/edit: It still plays videos on hover after changing it. Only now there is no player popup anymore.
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.
The Reddit redesign is a classic example of this. Click or tap somewhere accidentally and you'll probably cause something annoying to happen. The most obvious is around the modal thread view.
I can't stand this. When I have data entered into an app like that, it kind of feels like handling a live bomb. God forbid you palm the edge of the screen or fumble your phone.
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.
Even the blank spaces in jira can cause things to happen!
Accidentally click on some white space? Well too bad, we’ve closed whatever you’re looking at, even though you’re not in a modal. Oh and also, you’ll need to wait 30-seconds for this new page to load, and you can’t just bail out and go back a page, because your browser can’t hold the previous page in cache/memory properly because it’s some overly-complicated JS app.
Azure DevOps is the same if not worse. I'm forever expanding or contracting the Description and Acceptance Criteria as there are no colour shades differentiating the sections - you have to watch the cursor change.
Then I wonder where the Description and Acceptance Criteria are for the next User Story, because it remembers that you (accidentally) contracted the Description for User Story X therefore you obviously don't want to see it for any others...
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.
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.
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.
I personally think that was a decent use of time - 30 minutes vs a product-lifetime of not pissing off users that little bit will give a lot of goodwill payoff. But I have worked at a place with in-house developers where they probably wouldn't have showed the initiative to do it themselves, and if brought up later as an annoyance I'd be asked for a "business case" which is a complete non-starter, because how do you even begin to quantify this in a way everyone can agree on?
I value polish for its own sake highly as I think you do too, a well made tool is more rewarding to use. But the ones forecasting developer effort need a concrete justification. So it's best to just sneak this in if you can and hope other people you work with feel the same, after all it's much quicker to do it up front than to lose context and revisit it later. Asking permission will cost far more than your 30 minutes.
Agreed. Just make the best product you can, minding deadlines. If you think your deadlines are too short for the level of polish you prefer, discuss it with your manager and/or decide what is more important to you: polish, or pay. Whether that means putting up with it, finding a better-aligned organization, or starting your own product.
I disagree that this is an invariant of outsourcing; I have worked plenty of places where the contractors/vendors cared more than the FTEs. Conversely, the pressure for dark patterns has generally come from the inside.
This isn't a dark pattern, it's a combination of incompetent designer-developers and a lack of robust specification (on account of assuming competence in your designer-developers)
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.
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.
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.
And an additional complaint about those tiny-thin scroll bars that some idiot-designer though were slick because they so minimally interfere with the rest of 1920px-width display, which also makes them a giant pain-in-the-wrist to click on because the width to make it appear is so thin, and then clicking on the scroller is another challenge whereby it's much easier to accidentally make the scroll bar disappear. Rinse and repeat.
I used to be half-decent at railgun in Q3A, but I now struggle to hit scroll bars. That's a fucking design problem.
I think you misread op, they explained why the overlay scrollbars (aka "tiny-thin scroll bars that some idiot-designer though were slick because they so minimally interfere with the rest of 1920px-width display") are used instead of the old ones that cause layout to trigger again.
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
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.
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.
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
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.
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.
