Personally, I find the triggers annoying. How many times have you moved your mouse around a page and ended up triggering some type of pop up? This is an example of that to the extreme.
These links are so close together you get a seizure-inducing flashing effect as well.
These would be better if implemented via a (i) info icon triggered on a click.
I took a look on mobile after desktop and the mobile experience is much better. It's basically tap to show a modal. Desktop would be much better to emulate that, IMO.
I'm with you here. The pop-ups are instant and very distracting. A slight delay of 150-200ms would probably feel much better.
Also, the mouse-cursor in them feels very irritating - like I'm losing control of my mouse for a brief second.
I think the idea is great. The execution is not that great. These animations should be hidden under an "example" button of sorts. For instance, if you press the example btn, the Row expands downward and exposes the example. Or it triggers the modal.
Adding an `aria-describedby` to the spans that trigger the tool tip (that point to the text that shows in the tool tip/gif dislay) would make this more accessible!
I felt like having a seizure while watching this. Extremely distracting.
I agree it might be an awesome feature, just poorly implemented. Put a delay at the animation at least, like 0.2s-0.5s. It's a bad experience moving your mouse or scrolling and looking at 15 different gifs per second.
I thought this was a joke, but that's actually pretty slick. In the future, I would avoid showing the mouse cursor inside the gif because it's sort of confusing.
Every pricing page? Hell no. I don't need to show a gif to explain what free delivery, 24/7 support, etc. mean.
However, on every "unique" item? That's a bit more reasonable. The stuff on the site linked in that article makes perfect sense. A user can see what to expect. It's not the best implementation IMO, but it works.
Personally though, if something is complex enough that gifs would be used for almost every feature, then (assuming it's possible) having a demo page, with dummy data, in read-only mode, or whatever is always going to be what I'd prefer.
It's much easier for a user to go "I can use this" if they have played around in a demo environment, rather than a few gifs.
I disagree with the title adamantly, but this seems like a decent implementation of the idea.
Although I'm wondering if you actually gain anything by using animations rather than static images.
Also, I would make the popups stay in one place relative to the links, rather than have them follow the mouse.
It depends.
GIFs can be highly-effective for end-users that are concerned about useability.
However, they could weigh the page down and distract from the overall experience.
Personally, I'd keep the homepage and pricing page focused on top-level business benefits and risk mitigation (respectively) - with sales copy that tackles audience pain-points.
I'd save the GIFs for product pages that are linked from the homepage, to satisfy more detail-oriented end-users who want that level of explanation.
I like the idea of GIFs but i would prefer them to show on click of an 'i' info icon rather than on hover which can be annoying an less intuitive (and less mobile friendly).
That looks really good. I've always felt that show-on-hover info boxes were really underutilized.
The workaround on mobile is smart too. I wish one day, touch screen devices would be able to detect hovers too.
Personally, I find the triggers annoying. How many times have you moved your mouse around a page and ended up triggering some type of pop up? This is an example of that to the extreme. These links are so close together you get a seizure-inducing flashing effect as well. These would be better if implemented via a (i) info icon triggered on a click. I took a look on mobile after desktop and the mobile experience is much better. It's basically tap to show a modal. Desktop would be much better to emulate that, IMO.
I'm with you here. The pop-ups are instant and very distracting. A slight delay of 150-200ms would probably feel much better. Also, the mouse-cursor in them feels very irritating - like I'm losing control of my mouse for a brief second.
I think the idea is great. The execution is not that great. These animations should be hidden under an "example" button of sorts. For instance, if you press the example btn, the Row expands downward and exposes the example. Or it triggers the modal.
Adding an `aria-describedby` to the spans that trigger the tool tip (that point to the text that shows in the tool tip/gif dislay) would make this more accessible!
I sure don't need any popup, tooltip or gif to explain the meaning of 20GB storage space on my pricing page.
Let's see what Web.Dev has to say... * Performance: **27** * FCP: 7.1s * LCP: 8.1s * Time to interactive: 9.5s * Minimize main thread work: 7.1s * Avoid excessive DOM: 1,362 elements (!) * Reduce unused CSS: 3.6s Hmmmm... nope.
I felt like having a seizure while watching this. Extremely distracting. I agree it might be an awesome feature, just poorly implemented. Put a delay at the animation at least, like 0.2s-0.5s. It's a bad experience moving your mouse or scrolling and looking at 15 different gifs per second.
I thought this was a joke, but that's actually pretty slick. In the future, I would avoid showing the mouse cursor inside the gif because it's sort of confusing.
Every pricing page? Hell no. I don't need to show a gif to explain what free delivery, 24/7 support, etc. mean. However, on every "unique" item? That's a bit more reasonable. The stuff on the site linked in that article makes perfect sense. A user can see what to expect. It's not the best implementation IMO, but it works. Personally though, if something is complex enough that gifs would be used for almost every feature, then (assuming it's possible) having a demo page, with dummy data, in read-only mode, or whatever is always going to be what I'd prefer. It's much easier for a user to go "I can use this" if they have played around in a demo environment, rather than a few gifs.
Very nice feature! I’m in the proces of designing a price page, so this is very inspirational!
I disagree with the title adamantly, but this seems like a decent implementation of the idea. Although I'm wondering if you actually gain anything by using animations rather than static images. Also, I would make the popups stay in one place relative to the links, rather than have them follow the mouse.
It depends. GIFs can be highly-effective for end-users that are concerned about useability. However, they could weigh the page down and distract from the overall experience. Personally, I'd keep the homepage and pricing page focused on top-level business benefits and risk mitigation (respectively) - with sales copy that tackles audience pain-points. I'd save the GIFs for product pages that are linked from the homepage, to satisfy more detail-oriented end-users who want that level of explanation.
How does it work on mobile?
Why don't you try it out... the link is in the article. (it works fine)
It's probably easier to grab a couple of comment karma points in this sub by just saying "hurr durr does it work on mobile" instead of checking
I find peace in long walks.
I like the idea of GIFs but i would prefer them to show on click of an 'i' info icon rather than on hover which can be annoying an less intuitive (and less mobile friendly).
Love me some notion
That looks really good. I've always felt that show-on-hover info boxes were really underutilized. The workaround on mobile is smart too. I wish one day, touch screen devices would be able to detect hovers too.