(no subject)

[arethinn]

Things that are not cute and make your website harder to use #383: UI elements that only appear on hover. Bad enough on desktop where at least I can flail my mouse around looking for something to interact with (although my increased default zoom can sometimes make the appear/disappear bevavior produce weird flickering effects); sometimes just about impossible to deal with on tablet.

Comments

[digitalsidhe]

Oh, yikes. This sounds bad. Can you tell me more? Or tell me what site, so I can go look for myself? This might give me grist for a bit of online writing about UX (probably on my public/professional Twitter account).

[arethinn]

Hmmm, I'm not 100% sure what I was looking at at around 10 AM yesterday that prompted this post. The thing right before "Dreamwidth - post an entry" in my iPad browser history from then is Deviantart, so it might have been that. For example:







The white title, comments balloon, etc. on the thumbnail and the select/dismiss elements I circled in red on the second one don't appear until you hover, so it's not immediately apparent how to delete a notification or select more than one at once. They do at least appear on single tap, but that took detective work to figure out when the site was recently redesigned. (It also annoys me that the text "Yesterday" is actually a link, while looking nothing like one. There also didn't use to be any visual feedback like a change in color or words when you clicked "decline" or "accept", leaving you wondering if the desired action was actually being sent. They fixed that one at least.)

Ex Libris's patron-facing catalog interface Primo VE also does it - Go to https://caccl-deanza.primo.exlibrisgroup.com/discovery/search?vid=01CACCL_DEANZA:DEANZA and do any search you like, and then look at the list on the left. The checkbox that actually does the faceting action doesn't appear until you hover the mouse cursor within a certain distance of an item in the list, so it's not necessarily obvious that they even are facets at a first look.

I don't have an example handy for flickering. It's most common with menus, where my zoom can cause the text to flow in ways a designer may not have anticipated and take up more room on the screen, overlay other elements that weren't intended to touch, etc. So the browser can sometimes wig out a bit trying to decide what's in front of what or flipping back and forth when a dynamically revealed div is pushing another to a different relative position, things like that. But if the element revealed on hover has a slight mismatch in size vs the empty space - e.g. if it's not a fixed-size image but something affected by text scaling - similar things can happen. It's dependent on cursor position, not just happening constantly (thankfully), so in normal use I will only see one or two cycles as I pass the mouse over UI elements, but there are usually "trigger points" where if you place the cursor just so and leave it there, you can provoke a strobing effect. Sometimes elements clash in ways that mean I can't actually "touch" one that's (unintentionally) behind another. Although that said, this is easier for me to cope with on the fly these days than it used to be, now that there are built-in settings to zoom only text and not images; I can just zoom out to do whatever I need to do and then reset. (I used to have a homemade extension that let me set two "default" font sizes and then toggle between them if I encountered a website where my preferred-larger default broke the UI. Don't need it anymore.)

I forget exactly what it was now, because it was attached to some feature I don't regularly use, but this version of the DA site design ("Eclipse") also has/had a peculiar bug where I could interact with one of the menus while the cursor was actually some distance away visually. It was like a detection area was scaling larger while the actual button wasn't, or something.

While I have you on the phone, so to speak, minor irritation #1 for me anywhere is probably unnecessary animations. I want only the amount of animation needed to provide useful feedback to my inputs. Checkmarks that fade in rather than just ticking the box are a daily pain in the rear when I work with the corresponding staff back-end to Primo (Alma). Most of the time I would be a lot happier if things just appeared when I interacted with them rather than sliding or fading.

[digitalsidhe]

Wow, that's some awful stuff. I tried out the Ex Libris link you sent, and holy shit I don't think I would ever have discovered those checkboxes if you hadn't told me how! Also, I was able to provoke — honestly, more like "unable to avoid" — a nasty bug with the scrolling on the two different panes: scroll actions in one would keep on affecting the other in ways that led to the layout looking really messed-up. Yuck! And this was on a desktop (well, laptop), using a dedicated mouse with scroll wheel, which I'd consider the "most standard" design situation (although I'd strongly counsel web designers and developers at this point to design for phones first and only add full-sized-screen features later).

Yuck! Thank you.

As for animations, I recently learned that there's a CSS @media rule for prefers-reduced-motion, which I'm going to try to make part of my usual practice, but I don't get the impression that's what you're talking about. Do you dislike the distraction of the motion, or is it that the time required to animate slows down what you're doing?

Thanks for all this feedback!

[arethinn]

Mostly that it slows me down, yeah. It's not a sensory processing thing like how some people will get overstimulated/migraines/nausea/whatever. Sliding motions, especially if they have a little "bounce", can make it harder to build a muscle memory of where interactable elements are. A few ms delay while a checkmark fades in can trick me into thinking I didn't actually succeed in targeting the box, so I'll unintentionally UNcheck it while trying to fix that.