[HN Gopher] Front end developers: stop moving things that I'm ab...
___________________________________________________________________
Front end developers: stop moving things that I'm about to click on
Author : ingve
Score : 125 points
Date : 2022-11-27 18:47 UTC (4 hours ago)
(HTM) web link (medium.com)
(TXT) w3m dump (medium.com)
| pulvinar wrote:
| 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.
| throwaway81523 wrote:
| This. Some of us still remember Punch the Monkey.
| Eleison23 wrote:
| 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.
| smitty1e wrote:
| 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.
| nathias wrote:
| that's more a concern for UX designers, where the chief value
| should be consistency
| joezydeco wrote:
| And stop asking me to do a survey on your website when I've only
| been there for 5 seconds.
| pmontra wrote:
| 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 wrote:
| 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.
| bombcar wrote:
| 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
| wizofaus wrote:
| I always assumed it was done deliberately to trick users into
| clicking on ads...
| AdvancedSimian wrote:
| It happens so often that I, too, assume it is done for
| precisely the same reason.
| vlad wrote:
| A commercial app is just a blend of software bugs that
| encourages profitability (not too many bugs, not too few).
| 29athrowaway wrote:
| The gold standard for the web should be: Craigslist
|
| Fast, functional, responsive.
| Oxidation wrote:
| 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 wrote:
| McMaster Carr is one of the greatest websites there is. It's
| incredibly easy to find just about any kind of hardware.
| Oxidation wrote:
| One of the greatest features: when you download a 3D model
| file, you get the file, not a zip file containing the
| (single) file.
| ianai wrote:
| And as far as we know no tracking/propping up anything for
| attention regardless of ramifications.
| 29athrowaway wrote:
| I meant in terms of how the frontend is constructed.
| ilrwbwrkhv wrote:
| I agree. This is the greatest sin of the modern web development
| sphere. So so irritating.
| fleddr wrote:
| 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 wrote:
| 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.
| Normille wrote:
| 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 wrote:
| Every time I'm reminded of this:
|
| https://i.kym-cdn.com/photos/images/original/001/333/130/835...
| deckard1 wrote:
| > 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.
| nkrisc wrote:
| > 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.
| Eleison23 wrote:
| 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.
| TheAceOfHearts wrote:
| 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.
| pull_my_finger wrote:
| 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 wrote:
| 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 wrote:
| 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.
| ..
| draw_down wrote:
| bondarchuk wrote:
| I have googled the letter "n" countless times just trying to
| visit news.ycombinator on firefox android...
| bombcar wrote:
| And now you're the world's leading expert on n
| AndrewDucker wrote:
| 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.
| itronitron wrote:
| 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.
| bombcar wrote:
| 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.
| Jedd wrote:
| 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 wrote:
| For me it's Twitter for Android. It keeps loading new tweets to
| replace tweets I'm actively reading in the timeline.
| yonrg wrote:
| Yes, just please ...
| graycat wrote:
| I agree and don't like Web pages that are complicated, require
| effort to _learn_ to use, have things jumping around, cover the
| page 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, get rid of the image, 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.
|
| No warnings or requests to permit the site to use _cookies_ --
| the site makes no use of cookies.
|
| The site HTML makes nearly no use of JavaScript.
|
| 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!
| romellem wrote:
| 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 wrote:
| 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 wrote:
| You're the product. I'm not sure they care what you think.
| bombcar wrote:
| I cannot figure out how "upd" shows Windows Update but
| "update" does not.
| krick wrote:
| 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.
| rurtrack wrote:
| You are not alone. I blame Linux having me used to instant UI
| response.
| ajjenkins wrote:
| 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_go wrote:
| Which is ironic considering Google search results do exactly
| this with suggestions after the page finishes loading.
| zikohh wrote:
| 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
| wkjagt wrote:
| 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 wrote:
| 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.
| Oxidation wrote:
| 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.
| leetbulb wrote:
| 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.
| ianai wrote:
| That sort of stuff is outright user abuse.
| ptato wrote:
| Where is that spot? That has never happened to me, but I'm
| curious to see what it looks like.
| naveen99 wrote:
| gmail does this annoyingly also
| zikohh wrote:
| Google search result suggestions beneath hyperlinks is one of the
| worst at this. Was happy to see this article
___________________________________________________________________
(page generated 2022-11-27 23:00 UTC)