There's a UX problem on mobile. I have to click on something to make the GIF appear. What do I click? A link. Expected behavior of a link is to link me elsewhere, not to show a pop-up GIF, so I'm immediately confused when that happens. I also can't figure out how to make the link actually link. Does it link anywhere? Is it even a link or just Jscript onClick thingy? Do I have to click on the GIF to make it link, because that's 2 clicks when precisely one is accepted link practice. Clicking to engage and then clicking again to disappear is super aggravating, especially on mobile screen, especially on such a long list. Click, click, click, click, click click, click, click. Ahhhh!
This works well if I can hover over the links with a mouse to engage the pop-ups, which then disappear when I hover away. If I have to click on the links, like you do on mobile, then click again to dismiss, neither click actually linking to anything, it fails UX.
Also, too much info in too small a space on mobile. Too much being communicated. Too dense. What UX test calls engineeritis. You need drill down pages for these links. If I click one, I expect a page with detailed information, a drill down, not a pop-up summary GIF.
Mixed UX metaphors. Not lethal, but not quite there yet. Very cool, though, especially for the rapidity with which you were able to implement it, but it needs a bit more test on the UX side on mobile.
A button toggle that displays a responsive, inline GIF as a drop-down, not pop-up, is perhaps the better solution, even if it's not quite as neat as what your creativity created. That would work as expected without damaging your intent, but that still involves click click click.
> There's a UX problem on mobile. I have to click on something to make the GIF appear. What do I click? A link. Expected behavior of a link is to link me elsewhere, not to show a pop-up GIF, so I'm immediately confused when that happens.
I'm staring at this conclusion with the most bemused expression on my face. I'm thinking of the lines painted on the highway, wondering what tragedies would result if yellow line, white line, dotted line, and solid line were similarly ambiguous.
The page is a disaster on a desktop, too. It does something weird to the scroll, so I can't use either my arrow keys or my Vimium keys in the normal way. Note to web authors: I'm sure I'm not the only one who left quickly after I saw that my scroll was hijacked. If you want people to read your stuff, try dialing back the user abuse.
I endured the hijacked scroll because I was curious about what he meant.
It looks like a good idea, but in a very user-hostile interface, what wasn't surprising at all. If I had to guess, the author is honestly trying to increase his site's usability by overriding the default behavior, he is just failing spectacularly.
I was surprised when my arrow keys didn't work properly. Now I see you had the same issue. Using an old laptop, I'm often navigating through pages with keyboard track-pad on these old laptops is trash.
It reminds me that we don't see "floating" touchscreens anymore.
The Galaxy S5, and probably other phones had this feature where you could actually trigger hover targets by hovering your finger above the screen. I just tried it on my Galaxy S5 the linked page and it works flawlessly.
It may be one of the gimmicks Samsung loved to put in their phones at the time, but as we can see, it is not completely useless. And it also doesn't look like there is any downside to it, except maybe a very small increase in price.
onHover has always been a psuedoschizo decision. There are places where nothing is more useful, but misuse it and it aggravates the hell out of everyone, not unlike browser frames/iframes/etc 20 years ago.
Mobile devices drove 61% of visits to U.S. websites in 2020, up from 57% in 2019. Desktops were responsible for 35.7% of all visits in 2020, and tablets drove the remaining 3.3% of visitors.
Globally, 68.1% of all website visits in 2020 came from mobile devices—an increase from 63.3% in 2019. Desktops drove 28.9% of visits, while 3.1% of visitors came from tablets. However, desktop devices remain very important, as they drove 53.3% of total time on site in the U.S. and 46.4% of total time on site globally.
>Mixed UX metaphors. Not lethal, but not quite there yet. Very cool, though, especially for the rapidity with which you were able to implement it, but it needs a bit more test on the UX side on mobile.
It's definitely a good idea but agree that it's just a bit off. The videos are small and hard to see and there's no way to share a direct link to a video.
>Expected behavior of a link is to link me elsewhere
That may be true, but I certainly wasn't confused when I tapped it and saw the popup. On mobile, you could make the popup take up the whole screen with an easy X button and perhaps it would solve that issue
(Minor as it may be)
Don't use GIFs, use audioless mp4s instead. They can be made to work in the exact same way as GIFs (autoplay, loop or not, etc) but are a fraction of the bandwidth.
If you do this, please make extra sure there's no audio track at all. (Not just silent audio.)
Browsers use the presence of an audio track as the trigger to decide whether or not to prevent Windows computers from going to sleep while a video is playing.
This is exactly what we do on https://www.soundslice.com/features/ (the minivideos below the main hero section). Would definitely recommend using MP4s instead of GIFs, for the bandwidth savings.
Not for screen recordings, unless you're doing a screen recording of photos or videos a GIF will typically be more bandwidth efficient (as there will be large areas of single colours and few changes between frames which GIF is good at).
Modern video codecs certainly employ the ancient tricks known to gif; they also compress regions of the same color and encode differences between frames. Plus they don't have a limited 256-color palette per frame, so the result doesn't have to look like washed out garbage.
> as there will be large areas of single colours and few changes between frames which GIF is good at
Pretty sure that's how modern video codecs work too. A lot of movies have regions that don't change much between frames (e.g. backgrounds, or some dude's face staring at the camera all dramatically).
What GIF gets you is a lossless video, which is overkill for most applications. Video codecs can achieve a similar perceptual quality at a tiny fraction of the size, which is why services like gyfcat and imgur will often auto-convert gifs to videos for browsers that support it.
Massive gifs of screen recordings embedded in github readme pages is really obnoxious. Gif is a terrible format for these, the files are frequently several megabytes where a modern video format might have it crisp and legible under 100KB.
The problem is mostly the Apple devices which don't support non-proprietary formats. H.264 is probably the most universal codec, but it's proprietary and requires a license for commercial use. The non-proprietary VP8 codec is supported by most browsers, but Safari support (outside of WebRTC) requires version 14.1, which was only released this year. And that's only on Mac OS, not iOS—though we might see WebM support for mobile Apple devices in the next release. And then there are complicating factors like "Edge support for VP8 requires the use of Media Source Extensions" and "Firefox only supports VP8 in MSE when no H.264 hardware decoder is available"[0] which stand in the way of a one-size-fits-all solution.
It's really annoying when I'm browsing a page and my mouse "accidentally" moves over something and a giant thing pops up in front. Terrible UX. End up having to play dodge-the-mines with my mouse
I agree but I think there's a good balance: have a little "hover over me" widget. If you hate popups it's easy to avoid the widget, and it makes the hover experience more consistent as you move from line to line (assuming the widget is at the front so they all line up vertically)
I prefer clicks to hovers for this reason. A simple (Show example) button or (?) clickable question mark that spawns a small modal in-place and takes focus is more accessible, and there is no ambiguity of intent.
Not a bad idea in and of itself, but screw hover effects.
I've come to really hate everything involving hover. On all sorts of websites there's some menu bar at the top or the side where it's way too easy for me to accidentally move my cursor over it and suddenly 1/5 of the page is blocked. I really wish that these things could just be replaced with a click. If I want to view a dropdown or something with dense details, I can jolly well click or tap on it.
EDIT: Interestingly, it appears possible to intercept and nullify mouseover events.
For this kind of thing, I would rather something like the HTML details element where you click the title and it expands the details. You have the chevron to indicate it's expandable, it works on mobile and desktop, and is universally recognized without being obnoxious. I hate sites that make me play the game of "where can I put my mouse where it won't trigger something annoying"
> Not a bad idea in and of itself, but screw hover effects.
Article title implies inline images as a 'preview' but delivers tooltips.
Thumbnails would be better still.
Let me double down by saying: if your selection page has so many entries that thumbnails make the design unworkable, then you have too goddamned many options for people to choose from.
Go re-read The Paradox of Choice, come back and start bundling some of your options up.
Someone linked to a page doing the accordion. I don't like that it shifts the contents of the page. I much prefer the tooltip style, but I would combine it with making a click bring you to the relevant section of a "Features" page.
Strongly agree. Clicking though these, click off to close it, and waiting for pad the gif would have me off the page in seconds. Not to mention accidental clicks.
Seems like all these shiny new ideas completely forget about ADA / accessibility legal requirements. There are real monetary repercussions for neglecting this [1] [2].
Why bother laying out a website? Just send people an email explaining the offer, right? Hell, just tell them in person! That certainly will be accessible.
Off-topic: Why are you putting spaces before your question mark but not your period or comma ?
CSV data? Psh; you're going to have to change it eventually, which means you need historical pricing data… Just have a detailed description of your pricing philosophy, and let the reader determine whatever information they need from that.
I have to admit I absolutely loathe that kind of mouse-cursor-dragging tooltip image. Anything that obscures the very text that I may want to read to decide what to look at next seems crazy to me. You can even see it in the example video, as soon as the overlay shows up you can’t read much of the text in the column it triggered from.
Recently I've been having trouble pinpointing sarcasm on the web. That can't be real, can it? Mobile traffic has been larger than desktop for over a decade. We've been hammering mobile-first for almost that long. If that was a joke, sorry it passed right over my head.
Also, GIFs… in 2021? We've had <video>, <canvas>, <svg> for what, 15 years?
I think the point of this comment was to distinguish the interaction on desktop (hover) versus mobile (click).
Desktop users are used to hovering on stuff to see what happens. You can't do that on mobile so you have to do something else (click) which is kind of counter-intuitive on mobile (clicks are supposed to navigate).
Readit News
This works well if I can hover over the links with a mouse to engage the pop-ups, which then disappear when I hover away. If I have to click on the links, like you do on mobile, then click again to dismiss, neither click actually linking to anything, it fails UX.
Also, too much info in too small a space on mobile. Too much being communicated. Too dense. What UX test calls engineeritis. You need drill down pages for these links. If I click one, I expect a page with detailed information, a drill down, not a pop-up summary GIF.
Mixed UX metaphors. Not lethal, but not quite there yet. Very cool, though, especially for the rapidity with which you were able to implement it, but it needs a bit more test on the UX side on mobile.
A button toggle that displays a responsive, inline GIF as a drop-down, not pop-up, is perhaps the better solution, even if it's not quite as neat as what your creativity created. That would work as expected without damaging your intent, but that still involves click click click.
The underlines being dotted, it's closer to an <abbr> element (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ab...), which does not act as a link.
User will click/tap and the modal of the gif will show
It looks like a good idea, but in a very user-hostile interface, what wasn't surprising at all. If I had to guess, the author is honestly trying to increase his site's usability by overriding the default behavior, he is just failing spectacularly.
The Galaxy S5, and probably other phones had this feature where you could actually trigger hover targets by hovering your finger above the screen. I just tried it on my Galaxy S5 the linked page and it works flawlessly.
It may be one of the gimmicks Samsung loved to put in their phones at the time, but as we can see, it is not completely useless. And it also doesn't look like there is any downside to it, except maybe a very small increase in price.
> You need drill down pages for these links. If I click one, I expect a page with detailed information, a drill down, not a pop-up summary GIF.
I disagree here and much prefer browsing the summary information with a gif to having to click through every single feature into a new page.
Mobile devices drove 61% of visits to U.S. websites in 2020, up from 57% in 2019. Desktops were responsible for 35.7% of all visits in 2020, and tablets drove the remaining 3.3% of visitors.
Globally, 68.1% of all website visits in 2020 came from mobile devices—an increase from 63.3% in 2019. Desktops drove 28.9% of visits, while 3.1% of visitors came from tablets. However, desktop devices remain very important, as they drove 53.3% of total time on site in the U.S. and 46.4% of total time on site globally.
https://www.perficient.com/insights/research-hub/mobile-vs-d...
It's definitely a good idea but agree that it's just a bit off. The videos are small and hard to see and there's no way to share a direct link to a video.
https://twitter.com/tdinh_me/status/1465898179971350528
That may be true, but I certainly wasn't confused when I tapped it and saw the popup. On mobile, you could make the popup take up the whole screen with an easy X button and perhaps it would solve that issue (Minor as it may be)
Deleted Comment
Deleted Comment
The dotted lines indicate ‘click here to see more’ to me. And I can go directly from one to the next item by just tapping the next one.
Deleted Comment
You can have a GIF fallback but 99% of browsers don't need it.
Browsers use the presence of an audio track as the trigger to decide whether or not to prevent Windows computers from going to sleep while a video is playing.
I filed a bug on Firefox, but they consider it to be pretty low priority: https://bugzilla.mozilla.org/show_bug.cgi?id=1684718
Apparently these gifs are loaded along with the other assets and lazy loading them is not simple.
We moved to mp4 and the scores have increased quite a bit.
I believe the user can change the setting to "Never Autoplay" instead of "Stop Media with Sound" but the default only affects with sound.
(I encode as MP4 but i have to say it’s annoying to find it doesn’t work on some version of safari)
I do not think even sites like Dribbble have figured it out. I have a lot of issues there with videos.
It depends on how you configure it. Any option you choose, make sure the first frame is informative.
Pretty sure that's how modern video codecs work too. A lot of movies have regions that don't change much between frames (e.g. backgrounds, or some dude's face staring at the camera all dramatically).
What GIF gets you is a lossless video, which is overkill for most applications. Video codecs can achieve a similar perceptual quality at a tiny fraction of the size, which is why services like gyfcat and imgur will often auto-convert gifs to videos for browsers that support it.
Take this 2MB GIF (https://blackmagic.so/assets/sidebar/most-engaging-hours.gif) and put it through an online converter: https://ezgif.com/gif-to-mp4/ezgif-7-68b177ec1944.gif
WebP: 1.64 MB
MP4: 300 kB
AVIF: 274 kB
[0] https://developer.mozilla.org/en-US/docs/Web/Media/Formats/V...
I've come to really hate everything involving hover. On all sorts of websites there's some menu bar at the top or the side where it's way too easy for me to accidentally move my cursor over it and suddenly 1/5 of the page is blocked. I really wish that these things could just be replaced with a click. If I want to view a dropdown or something with dense details, I can jolly well click or tap on it.
EDIT: Interestingly, it appears possible to intercept and nullify mouseover events.
```
document.addEventListener('mouseover', (e) => e.stopPropagation(), true);
```
Works on wellsfargo.com, making their menus work like I think they should. Obviously it wouldn't work for CSS-based hover.
Maybe I'll make this into an extension.
Article title implies inline images as a 'preview' but delivers tooltips.
Thumbnails would be better still.
Let me double down by saying: if your selection page has so many entries that thumbnails make the design unworkable, then you have too goddamned many options for people to choose from.
Go re-read The Paradox of Choice, come back and start bundling some of your options up.
Can you just accordion the indicators in between the rows so that a user can choose to expand?
I find the popup insanely annoying and un-asked for. If I want something, I'll click it, please don't force it on me.
But that's just me.
So instead of going full circle, how about a good old text in the first place ?
[1]: https://www.cnbc.com/2019/10/07/dominos-supreme-court.html
[2]: https://www.diverseeducation.com/demographics/disabilties/ar...
Off-topic: Why are you putting spaces before your question mark but not your period or comma ?
https://en.wikipedia.org/wiki/Question_mark#Stylistic_varian...
Deleted Comment
Recently I've been having trouble pinpointing sarcasm on the web. That can't be real, can it? Mobile traffic has been larger than desktop for over a decade. We've been hammering mobile-first for almost that long. If that was a joke, sorry it passed right over my head.
Also, GIFs… in 2021? We've had <video>, <canvas>, <svg> for what, 15 years?
For cat videos - most likely.
But for sites selling (enterprise) software and services - almost certainly not.
> We've been hammering mobile-first for almost that long.
Do you work for Google? That's pretty much the only "we" that's been hammering that.
Not at all
[1] https://techjury.net/blog/mobile-vs-desktop-usage/#gref
[2] https://www.statista.com/statistics/277125/share-of-website-...
>Do you work for Google? That's pretty much the only "we" that's been hammering that.
Nope. It's just everyone, really.
[3] https://developer.mozilla.org/en-US/docs/Web/Progressive_web...
[4] https://xd.adobe.com/ideas/process/ui-design/what-is-mobile-...
Apple and Microsoft too. And Microsoft doesn't even have anything competitive to offer there.
But yeah, the rest of the world has been busy ignoring those 3.
Desktop users are used to hovering on stuff to see what happens. You can't do that on mobile so you have to do something else (click) which is kind of counter-intuitive on mobile (clicks are supposed to navigate).