20 ms·

Every pricing page should have GIFs

406 points by trungdq88 5y ago

a3w 5y ago
The website asks me to enable mp4 video. It does not contain gifs. Oh the irony.
- Kye 5y ago
  We might be at a point where tiny looping MP4s have been called GIFs for so long that a whole generation is emerging not knowing what a GIF is.
deleted 5y ago
[deleted]
eb0la 5y ago
This reminds me a useful feature of Lotus Word Pro 96: If you selected a tool and did nothing for 2-3 seconds, the mouse cursor changed into an animation that hinted what you could do. Anything you can do to help people figure out what your software does, and how to use it is 100% worthy.
lunch 5y ago
Maybe first try rendering literally anything when javascript is disabled. Then worry about adding GIFs.
ldoughty 5y ago
This is an interesting idea, and I can see the value... But how does this work for those with disabilities? Will screen readers describe the image in the mouse over as well? (I imagine so, if alt tagged, but I'm not sure and would love to know)
- ludamad 5y ago
  I imagine they can read the text parts with a screen reader. Doubt this is any different than adding an image anywhere else
  - actually_a_dog 5y ago
    Sure, but a screen reader picking up on alt text won't convey the same amount of information as the visual would. Neither would an embedded movie. But, that's all just begging the question: what is the practical, accessible alternative that does serve the needs of the blind and visually impaired?
    - fijiaarone 5y ago
      Blind people can’t see. Alt tags don’t change that. How do you sell paintings to blind people? Maybe the answer is — you don’t. If you’re selling charts to visualize data, blind people aren’t your audience. Just like if you’re selling shovels to dig ditches, you’re not marketing to people in wheelchairs. Just because some people can’t use a product, doesn’t mean you shouldn’t be allowed to sell it.
      - byvirtueof 5y ago
        At risk of sounding like a SJW here, I think it's an interesting point you made that merits further discussion. It seems to me that you're arguing about blind people as a market segment. By virtue of being blind there might always be products that blind people just won't benefit from, I get that. But there's a reason (offline) accessibility is regulated by law and somewhat incorporated into daily life (e.g. wheelchair ramps). If it weren't, blind people (and others with disabilities) would be even more marginalized than they already are. Would it be okay if Walmart made their stores inaccessible to blind people? I guess they already do, it seems pretty difficult to navigate those aisles with product tags. While modern life outside of the internet has been developed for a long time, the internet is still relatively fresh, and making sure those who are blind aren't prevented from participating in the internet is generally a good thing, I think. But perhaps your stance is that the problems of those with disabilities should not be the responsibility of those who do not have those problems, which is a valid argument. Alt tags don't change whether blind people can see and they're not supposed to either, but they do allow people who would otherwise be prevented from being a customer, to be one. You don't have to sell paintings to blind people, but they do buy them; 3D paintings, extra-textured paintings, even paintings with braille. Selling charts to visualize data is a certain way of making data more accessible to certain customers, why not extend that to the visually impaired? >Just because some people can't use a product, doesn't mean you shouldn't be allowed to sell it. You're definitely allowed to sell a product, the question is: should you be allowed to exclude potential customers based on factors they cannot control? Marginalized groups have better lives than they used to in history, but I'd argue a lot of progress can still be made. Whether the onus should be on the people (blind or not) themselves, corporations or the government, is a very different discussion about responsibility and the limits of choice that I'm not gonna go into here. Again, I do see your point as well. Just wanted to point out some things.
ollybee 5y ago
Also in documentation, I always loved the Grafana documentation for being sprinkled with short gifs to demonstrate different features.
randallsquared 5y ago
If I can click elsewhere to get them to go away, maybe they aren't too bad. First reaction was to wonder if this was satirical, though. :)
aloisdg 5y ago
What about using video with control instead? Furthermore what about performance?
- loceng 5y ago
  And he didn't mention a change in conversions - which would be far more convincing.
- spcebar 5y ago
  I think the point is that it autoplays and gives you a very quick rundown on the specifics of the feature/pricing. The way they're using gifs in the demo, it doesn't look like controls would make sense, but I think the message of this article is more about providing meaningful information about services and pricing than the gifs themselves.
  - lol768 5y ago
    Yeah, it's more of an implementation detail. But indeed, if I implemented this myself I wouldn't use GIFs. It's a joke of a format which produces bloated files, very limited colours (slightly less limited if you employ some creative hacks), no proper alpha support. We should put it in the bin and move on. Whether that's <video> elements with no controls using something like AV1 (neat but no alpha AFAIK), APNG or VP9, I don't really care.
    - janekm 5y ago
      For a screen recording of a UI, it's the perfect format unless you're demoing a video/photo editing application. You don't need alpha or many colours and screen recordings are quite efficient in a GIF.
      - chrismorgan 5y ago
        This is just not true.
- fijiaarone 5y ago
deleted 5y ago
[deleted]
elcamino44 5y ago
I think this is neat. It’s probably not always useful for everything, but definitely very cool for many kinds of apps, nice work!
franciscop 5y ago
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.
- janekm 5y ago
  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).
  - oefrha 5y ago
    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.
  - technobabbler 5y ago
    > 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. Take this 2MB GIF (https://blackmagic.so/assets/sidebar/most-engaging-hours.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 https://ezgif.com/gif-to-mp4/ezgif-7-68b177ec1944.gif WebP: 1.64 MB MP4: 300 kB AVIF: 274 kB
    - janekm 5y ago
      Yes indeed all modern video codecs are based on encoding differences between key frames. GIF has the most basic implementation of that (it can update only a window in the image instead of the whole image). The original GIF can actually be compressed losslessly down to just 1.4MB with a better compressor like https://gifcompressor.com https://gifcompressor.com . MP4 (and similar codecs) are not typically very good at compressing regions of constant colour, while GIF is very good at that. However I have to admit that the output of that converter is acceptable in MP4, better than I would have expected (though noticeably worse quality). BTW curiously (likely to better performance on regions of constant colour) the non-lossy WebP does better on this example coming in at just 1.2MB!
ichydkrsrnae 5y ago
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.
- dheera 5y ago
  Also, use WebM, not GIF, for better compression. GIF is obsolete trash from the 1990's internet. You can have a GIF fallback but 99% of browsers don't need it.
  - pineconewarrior 5y ago
    well... 99% perhaps not. mobile safari is pretty important
- kevin_thibedeau 5y ago
  It should be an accordion that opens a detail view.
InsomniacL 5y ago
I like the demo of each feature, but hate the box of text and video hanging off my mouse cursor. There must be a better implementation then that.
- flxy 5y ago
  Maybe a short, abstract svg animation of how a certain feature would look like and behave? Probably a little more work to implement (well) and keep up to date but I've liked that sort of thing on the few sites I've seen it on in the past. Sadly can't think of any right now though. I also remember algolia having some sort of movie search demo as their top banner a few years ago. Including their completion and such. Always struck me as a good way to introduce their service in particular.
- conductr 5y ago
  I feel like this much content needs it's own section. Having the onhover on my cursor that resizes and moves around so much as a move the mouse or page up/down is pretty horrible UX. I'd do something like how MS Excel has Task Panes on the right of the window. Then each thing can have an image/video and a paragraph explaining and showing what it is. The main issue here though is he's trying to explain/list all these tiny little features instead of just simplifying the page which is probably causing analysis paralysis and hurting conversions, so adding more information is probably just salt in the wound. He really just needs to get people to sign up and see the features and they'll be self explanatory, up sale from there.
tambourine_man 5y ago
>It even works on mobile! 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?
- tantalor 5y ago
  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).
- huhtenberg 5y ago
  > Mobile traffic has been larger than desktop for over a decade. 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.
  - tambourine_man 5y ago
    >For cat videos - most likely. Not at all [1] https://techjury.net/blog/mobile-vs-desktop-usage/#gref https://techjury.net/blog/mobile-vs-desktop-usage/#gref [2] https://www.statista.com/statistics/277125/share-of-website-traffic-coming-from-mobile-devices/ 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_apps/Responsive/Mobile_first https://developer.mozilla.org/en-US/docs/Web/Progressive_web... [4] https://xd.adobe.com/ideas/process/ui-design/what-is-mobile-first-design/ https://xd.adobe.com/ideas/process/ui-design/what-is-mobile-...
    - huhtenberg 5y ago
magicalhippo 5y ago
Amusingly the demo video only showed "this video can't be played" message, thanks to uMatrix blocking the third-party media requests. If he'd made it a GIF it would have worked...
- bhelkey 5y ago
  Elsewhere in this thread: > Don't use GIFs, use audioless mp4s instead.
  - Eelongate 5y ago
    I use uMatrix to block 3rd party image requests by default, so gifs would have the same "problem". Of course it's not actually a problem at all, if the user chooses to block 3rd party images or video, that is their prerogative.
rytcio 5y ago
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
- city41 5y ago
  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)
  - wildrhythms 5y ago
    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.
    - city41 5y ago
      Yeah that's a good point. Clicks might work better here than hovers.
strogonoff 5y ago
A cool way of demonstrating features that are more or less represented by their respective GUI widgets could be by dogfooding the actual React components you use in production (just pass fake demo data in props/context). That said, demonstrating them in action is a bit trickier, since there’s no ready-made solution that could animate a virtual mouse cursor and simulate pointer events in accord.
Kye 5y ago
I imagined this very differently based on the title and expected GIFs all over. This is actually a good idea as presented, but probably won't work well on mobile as another commentor mentioned. Mobile would be better served with something like the expanders Wikipedia uses on the mobile site.
deleted 5y ago
[deleted]
vehemenz 5y ago
What is going on with this Notion site? It doesn't scroll. Notion is kind of a big company now; I find it kind of inexcusable that they've gone out of their way to break the browser's default (working) functionality.
smoldesu 5y ago
Quick sidenote here, if you're on Linux and want to record gifs like this, Peek[0] is what you're looking for. It's a lifesaver! [0] https://github.com/phw/peek https://github.com/phw/peek
apankrat 5y ago
If you are selling an UI option, a screencap is pretty much a must. If you are selling non-UI options, simple click-to-view explainers go a long way too, e.g. https://backup2.com/features https://backup2.com/features
DoneWithAllThat 5y ago
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.
ldng 5y ago
And what about the visually impaired ? You add a soundtrack ? So basically a video. Of course the a transcript is available, right ? So instead of going full circle, how about a good old text in the first place ?
- deleted 5y ago
  [deleted]
- msdrigg 5y ago
  Exactly. And similarly with the charts and graphs, how about just the good old raw csv data
  - wizzwizz4 5y ago
    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.
- oauea 5y ago
  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 ?
  - ggregoire 5y ago
    For your off-topic: Maybe they are French. https://en.wikipedia.org/wiki/Question_mark#Stylistic_variants https://en.wikipedia.org/wiki/Question_mark#Stylistic_varian...
  - cyann 5y ago
    My assumption, as a french-speaking Swiss, where we don't do put spaces before symbols with 2 strokes (;:?!) like they do in France: https://french.stackexchange.com/questions/46/pourquoi-place-t-on-une-espace-avant-les-ponctuations-fortes-why-is-there-a https://french.stackexchange.com/questions/46/pourquoi-place...
Ragnarork 5y ago
I know this is a probably overtly provocative title, but still... This makes the assumption: - That everyone navigate a SaaS website in a particular way - That no-one uses text-to-speech accessibility software when navigating websites - That everyone wants a picture/gif to know more about a feature Basically, a quite inconsiderate approach to UX design.
aasasd 5y ago
We should define a media pseudo-format, or at least attributes for the ‘video’ tag, which would say that the video will play without sound—with it being enforced by the browser and without the option for the user to turn sound on. This way, modern codecs can be used for short animations instead of the format for moving 16x16 icons from '87—while still allowing users to block regular videos. Maybe even force-limit the duration to thirty seconds or so. Right now, it doesn't make much sense that GIFs are allowed to play automatically, but decent codecs aren't—if I want to evade videos, that is. (Though OTOH the size of GIFs might serve a purpose in limiting site-authors' appetites for trashy animation, but I don't see bandwidth being much of a concern for them lately.)
- elondaits 5y ago
  The `muted` attribute of the <video> tag already does that. It's an important attribute because it's necessary for videos to autoplay under Chrome. If you don't mute the video autoplay will only work if some special conditions are met (e.g. the user already played video with sound before on that site, etc.)
  - aasasd 5y ago
    Eh, sites still just play long videos, but muted—expecting that your attention will be inevitably drawn by the movement, and you'll enable sound. It's just part of all the flashy junk immediately distracting the visitor from whatever they wanted to do on the page. Instead, videos shouldn't play unless they have a ‘muted-forever’ attribute, with no way to enable sound. This way they will be the same as GIFs, but with better codecs.
rsync 5y ago
The problem with this kind of UI is that when you scroll the page, you inadvertently mouseover the links as you scroll. So different pieces of the content you are trying to read keep getting hidden in a frustrating way as you're trying to read it. You can see this in the OPs video right at the beginning - after the very first mouseover he moves his mouse out of the colum, to the right, in order to see the column for his first scrolling motion.
- airstrike 5y ago
  I always scroll every page along the whitespace on either side for that very reason
  - jimmygrapes 5y ago
    Wouldn't it be nice if we had always visible scrollbars again? Although maybe this time with a better way to tell how big they are so that we don't have to use weird margin and padding hacks and take a random guess at how the OS renders them.
Benjoin 5y ago
I'd be interested to see if there's any research that would lead you to believe that conversions are increased by this change. It's an interesting proposition, but I wonder if we're really getting to the core of the stakes here. I'm not a huge fan of the hover state tool tips. It feels like this information design here could be more considered. If we're going to think of the GIFs as tool tips, then we're talking about them as non-essential information for motivated users. The thing is, I think that works well when it's used sparingly in context, but not for every single list item on page. It's a bit of a pain and it looks messy to read each header and then hover, one-by-one to get more context. If we made a more firm decision about the role the GIFs play, then we could take a stronger strategic approach to their implementation. If they are essential, they should be part of the displayed design. There are certainly methods to format text and images that make the document easily scannable. That said, I think what might be more applicable here would be a drawer strategy with a section that expands for more information. At the end of the day, I think what's most relevant is that there are 30+ features to highlight and that seems like way too many for a pricing page!
mcintyre1994 5y ago
I do think visuals are a good way to describe features in a lot of products, the examples here definitely benefit from a graphic. "Most engaging hours" doesn't sound nearly as interesting as that graph in the mouseover. But I think for most features of most products you probably don't need a GIF and I'd typically prefer a faster loading image in most cases.
remorses 5y ago
I noticed Notion sites have some problems loading on mobile lately so I made a site from this post using Notaku [0] https://gifthing-69a3.notaku.site/ https://gifthing-69a3.notaku.site/ [0] https://notaku.website https://notaku.website
waynesonfire 5y ago
yeah that's nice, but you only reaally need one gif, https://archive-media-2.nyafuu.org/vp/image/1522/39/1522395239700.png https://archive-media-2.nyafuu.org/vp/image/1522/39/15223952...
onion2k 5y ago
I hope the author is tracking how often those gifs are loaded, and (after the HN hug-of-death dies away) they pay close attention to whether or not users are seeing that they're there at all. I hope it works out, because it's pretty well implemented - it doesn't slow the page down, popups all work (kind of.. it's weird if you don't stop on each item), and it's a nice design. In my experience any feature on a website that isn't really obvious tends to get single-digit-percentage engagement, and sometimes none at all. Users don't explore UIs. They want things to be clear, simple, and obvious. If it isn't then it might as well not exist...
Waterluvian 5y ago
I always assumed that the pricing pages were intentionally vague so that the buyer could take a small set of true words and imagine what they want the feature to be, rather than what it actually is. Of course this can frustrate users. But that's not to say that this ends up being a net positive anyway.
robertoandred 5y ago
What on earth did this site do to scrolling? Spacebar doesn't work, arrow keys work really weirdly...
- EForEndeavour 5y ago
  Spacebar: replaced by GIFs. Arrow keys? Believe it or not, also replaced by GIFs.
- judge2020 5y ago
  It's a Notion-published site, so arrows select "blocks" (pieces of content) on the page.
barrenko 5y ago
No, it should not.
superkuh 5y ago
Every site that's not an application, just a way to display text and media, should progressively enhance it's function with javascript, not require it's execution to see anything at all. This tdinh.notion.site fails that very low bar and is just a blank white page. It both fails to communicate it's desired message about GIFs and communicates that it's not a voice to listen to on this subject regardless.
daralthus 5y ago
Also if you are not doing it yet, demonstrate and announce every new feature in Slack to your team in a dedicated channel. With gifs.
b20000 5y ago
the only thing you need to do is measure your landing page and optimize it for number of qualified leads per day/week/month…
wscott 5y ago
Telegram always uses GIFs very effectively for explaining new features. The animations are always kinda cutesy, but still very good at demonstrating the feature. https://telegram.org/blog/shared-media-scrolling-calendar-join-requests-and-more https://telegram.org/blog/shared-media-scrolling-calendar-jo... https://t.me/s/TelegramTips https://t.me/s/TelegramTips (both look better in Telegram than on the web, but it gets the idea across.
sam1r 5y ago
>> Every pricing page should have GIFs Given that you have a slick UI product with charts. Maybe not every pricing page. Also, mobile.
gherkinnn 5y ago
I like it. Makes complete sense. Sure, this and that could or should be improved. But only ever focussing on those things is depressing.
SimeVidas 5y ago
Why 20 MB of GIFs when you can have 200 KB of videos?
tomcam 5y ago
Neat idea. Couldn't find any evidence whether it helped sales?
SavantIdiot 5y ago
Here to vote on the "please don't do this" option. 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.
- switch007 5y ago
  Agree, an accordion feels like a good use case here
- gennarro 5y ago
  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.
- ziml77 5y ago
  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.
authed 5y ago
GIFs are outdated... https://old.reddit.com/user/anti-gif-bot/ https://old.reddit.com/user/anti-gif-bot/
boomskats 5y ago
So this is how I find out about LICEcap[0]. After years of thinking byzanz-record[1] was the only way to record a decent quality gif. Justin Frankel, you're an awesome dude. [0]:https://www.cockos.com/licecap/ https://www.cockos.com/licecap/ [1]: https://linux.die.net/man/1/byzanz-record https://linux.die.net/man/1/byzanz-record
- eps 5y ago
  On Windows there's also μGiffer - https://iobureau.com/ugiffer https://iobureau.com/ugiffer
- ojame 5y ago
  If you're on MacOS: I used to use LICEcap but then I found myself wanting more (still basic) features, like the ability to trim recordings, export to video formats etc. Now I use Kap, it's the perfect balance of simplicity and features (for me): https://getkap.co/ https://getkap.co/
ravenstine 5y ago
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. ``` 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.
- Gigachad 5y ago
  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"
- hinkley 5y ago
  > 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.
throwaway81523 5y ago
I don't understand this article at all. It says every pricing page should have gifs, but doesn't say why. Maybe it says in the images, but they don't load at least under my current adblock configuration. For that matter, JS and gifs of any sort on a web page are effectively another annoying captcha when I just want the information. For pricing, please just post a CSV or equivalent, and get out of the way.
- nhumrich 5y ago
  The video demo makes the article make a little more sense. But essentially there is a GIF tooltip for every feature listed on the pricing page so that you know what the listed feature in the comparison matrix, it's talking about.
  - throwaway81523 5y ago
    Ah thanks. Is the GIF tooltip somehow better than a plain HTML table with a header over each column saying what it is? Video, ugh ;).
    - nhumrich 5y ago
      I mean an image is worth a 1000 words, and a GIF is multiple images spliced together.
- MrStonedOne 5y ago
  yes they do, in the very first few paragraphs. >When evaluating a SaaS, I often just skip the landing page and all of its marketing fancy words and go straight to Pricing page. >Usually, I will find what I need there: what features does the SaaS has, and how much do I have to pay to get what features. >For that reason, I added GIFs to every single feature of my SaaS pricing page: They just didn't spell out the connection between the two premises, that because they tend to ignore the demo/about/landingpages, and jump straight to the pricing page, other people likely do so as well, and you should turn said pricing page into your demo page/landing page to target such people with that info since they won't get it from the normal page thats dedicated to conveying that info.
imwillofficial 5y ago
The loading lag in the example is ugly and confusing.
gtsop 5y ago
Am I the only one who thinks the actual essence of the article is not the technical detail of using GIFs on hover, but the fact that you see a quick visual demo of yhe thing you are paying for on a pricing page? On that matter, great idea sir! Will have it in mind
- sak5sk 5y ago
  No you are not the only one. Seems half the comments here miss the point. It's a clever addition!
keithnz 5y ago
I like the idea of explaining what features are, I don't like this method of doing it, as many others have commented, it's super annoying. Just provide clickable things to get descriptions
ljm 5y ago
This isn't good UX and it's not accessible or web-friendly either.
robot 5y ago
Pricing page is to make the user make a quick buying decision, not distract the user with a features tour. You do that elsewhere. But the tooltips and small gifs are an awesome idea!
futhey 5y ago
I saw this on blackmagic.so a few days ago, was super impressed. Works very well in this limited use-case, especially targeting desktop. Uses text decoration dashed as an indicator that something is going to happen on hover. It's probably worth just disabling this behavior on mobile, mostly because tooltip direction gets awkward on small screens. Nice tap to toggle on iPad, though. Could be improved a bit by using video tags, these are 300k-500k each. Pretty large. But, then you have to create multiple versions of each to target multiple platforms, I can see why you might skip this.
registeredcorn 5y ago
I can see the desire to visualize a benefit to the service easily, but I feel like having an GIF start on hover is an unexpected behavior and might be a turnoff to some users. It seems very much like something that could easily be overused/abused without much effort. Maybe a better solution would be to contain the GIFs to a single page that is linked from the pricing page?
mvkel 5y ago
But does it convert?

406 points by trungdq88 5y ago

a3w 5y ago

The website asks me to enable mp4 video. It does not contain gifs. Oh the irony.

Kye 5y ago
We might be at a point where tiny looping MP4s have been called GIFs for so long that a whole generation is emerging not knowing what a GIF is.

deleted 5y ago

[deleted]

eb0la 5y ago

This reminds me a useful feature of Lotus Word Pro 96: If you selected a tool and did nothing for 2-3 seconds, the mouse cursor changed into an animation that hinted what you could do. Anything you can do to help people figure out what your software does, and how to use it is 100% worthy.

lunch 5y ago

Maybe first try rendering literally anything when javascript is disabled. Then worry about adding GIFs.

ldoughty 5y ago

This is an interesting idea, and I can see the value... But how does this work for those with disabilities? Will screen readers describe the image in the mouse over as well? (I imagine so, if alt tagged, but I'm not sure and would love to know)

ludamad 5y ago
I imagine they can read the text parts with a screen reader. Doubt this is any different than adding an image anywhere else
- actually_a_dog 5y ago
  Sure, but a screen reader picking up on alt text won't convey the same amount of information as the visual would. Neither would an embedded movie. But, that's all just begging the question: what is the practical, accessible alternative that does serve the needs of the blind and visually impaired?
  - fijiaarone 5y ago
    Blind people can’t see. Alt tags don’t change that. How do you sell paintings to blind people? Maybe the answer is — you don’t. If you’re selling charts to visualize data, blind people aren’t your audience. Just like if you’re selling shovels to dig ditches, you’re not marketing to people in wheelchairs. Just because some people can’t use a product, doesn’t mean you shouldn’t be allowed to sell it.
    - byvirtueof 5y ago
      At risk of sounding like a SJW here, I think it's an interesting point you made that merits further discussion. It seems to me that you're arguing about blind people as a market segment. By virtue of being blind there might always be products that blind people just won't benefit from, I get that. But there's a reason (offline) accessibility is regulated by law and somewhat incorporated into daily life (e.g. wheelchair ramps). If it weren't, blind people (and others with disabilities) would be even more marginalized than they already are. Would it be okay if Walmart made their stores inaccessible to blind people? I guess they already do, it seems pretty difficult to navigate those aisles with product tags. While modern life outside of the internet has been developed for a long time, the internet is still relatively fresh, and making sure those who are blind aren't prevented from participating in the internet is generally a good thing, I think. But perhaps your stance is that the problems of those with disabilities should not be the responsibility of those who do not have those problems, which is a valid argument. Alt tags don't change whether blind people can see and they're not supposed to either, but they do allow people who would otherwise be prevented from being a customer, to be one. You don't have to sell paintings to blind people, but they do buy them; 3D paintings, extra-textured paintings, even paintings with braille. Selling charts to visualize data is a certain way of making data more accessible to certain customers, why not extend that to the visually impaired? >Just because some people can't use a product, doesn't mean you shouldn't be allowed to sell it. You're definitely allowed to sell a product, the question is: should you be allowed to exclude potential customers based on factors they cannot control? Marginalized groups have better lives than they used to in history, but I'd argue a lot of progress can still be made. Whether the onus should be on the people (blind or not) themselves, corporations or the government, is a very different discussion about responsibility and the limits of choice that I'm not gonna go into here. Again, I do see your point as well. Just wanted to point out some things.

ollybee 5y ago

Also in documentation, I always loved the Grafana documentation for being sprinkled with short gifs to demonstrate different features.

randallsquared 5y ago

If I can click elsewhere to get them to go away, maybe they aren't too bad. First reaction was to wonder if this was satirical, though. :)

aloisdg 5y ago

What about using video with control instead? Furthermore what about performance?

loceng 5y ago
And he didn't mention a change in conversions - which would be far more convincing.
spcebar 5y ago
I think the point is that it autoplays and gives you a very quick rundown on the specifics of the feature/pricing. The way they're using gifs in the demo, it doesn't look like controls would make sense, but I think the message of this article is more about providing meaningful information about services and pricing than the gifs themselves.
- lol768 5y ago
  Yeah, it's more of an implementation detail. But indeed, if I implemented this myself I wouldn't use GIFs. It's a joke of a format which produces bloated files, very limited colours (slightly less limited if you employ some creative hacks), no proper alpha support. We should put it in the bin and move on. Whether that's <video> elements with no controls using something like AV1 (neat but no alpha AFAIK), APNG or VP9, I don't really care.
  - janekm 5y ago
    For a screen recording of a UI, it's the perfect format unless you're demoing a video/photo editing application. You don't need alpha or many colours and screen recordings are quite efficient in a GIF.
    - chrismorgan 5y ago
      This is just not true.
fijiaarone 5y ago

deleted 5y ago

[deleted]

elcamino44 5y ago

I think this is neat. It’s probably not always useful for everything, but definitely very cool for many kinds of apps, nice work!

franciscop 5y ago

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.

janekm 5y ago
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).
- oefrha 5y ago
  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.
- technobabbler 5y ago
  > 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. Take this 2MB GIF (https://blackmagic.so/assets/sidebar/most-engaging-hours.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 https://ezgif.com/gif-to-mp4/ezgif-7-68b177ec1944.gif WebP: 1.64 MB MP4: 300 kB AVIF: 274 kB
  - janekm 5y ago
    Yes indeed all modern video codecs are based on encoding differences between key frames. GIF has the most basic implementation of that (it can update only a window in the image instead of the whole image). The original GIF can actually be compressed losslessly down to just 1.4MB with a better compressor like https://gifcompressor.com https://gifcompressor.com . MP4 (and similar codecs) are not typically very good at compressing regions of constant colour, while GIF is very good at that. However I have to admit that the output of that converter is acceptable in MP4, better than I would have expected (though noticeably worse quality). BTW curiously (likely to better performance on regions of constant colour) the non-lossy WebP does better on this example coming in at just 1.2MB!

ichydkrsrnae 5y ago

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.

dheera 5y ago
Also, use WebM, not GIF, for better compression. GIF is obsolete trash from the 1990's internet. You can have a GIF fallback but 99% of browsers don't need it.
- pineconewarrior 5y ago
  well... 99% perhaps not. mobile safari is pretty important
kevin_thibedeau 5y ago
It should be an accordion that opens a detail view.

InsomniacL 5y ago

I like the demo of each feature, but hate the box of text and video hanging off my mouse cursor. There must be a better implementation then that.

flxy 5y ago
Maybe a short, abstract svg animation of how a certain feature would look like and behave? Probably a little more work to implement (well) and keep up to date but I've liked that sort of thing on the few sites I've seen it on in the past. Sadly can't think of any right now though. I also remember algolia having some sort of movie search demo as their top banner a few years ago. Including their completion and such. Always struck me as a good way to introduce their service in particular.
conductr 5y ago
I feel like this much content needs it's own section. Having the onhover on my cursor that resizes and moves around so much as a move the mouse or page up/down is pretty horrible UX. I'd do something like how MS Excel has Task Panes on the right of the window. Then each thing can have an image/video and a paragraph explaining and showing what it is. The main issue here though is he's trying to explain/list all these tiny little features instead of just simplifying the page which is probably causing analysis paralysis and hurting conversions, so adding more information is probably just salt in the wound. He really just needs to get people to sign up and see the features and they'll be self explanatory, up sale from there.

tambourine_man 5y ago

>It even works on mobile! 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?

tantalor 5y ago
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).
huhtenberg 5y ago
> Mobile traffic has been larger than desktop for over a decade. 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.
- tambourine_man 5y ago
  >For cat videos - most likely. Not at all [1] https://techjury.net/blog/mobile-vs-desktop-usage/#gref https://techjury.net/blog/mobile-vs-desktop-usage/#gref [2] https://www.statista.com/statistics/277125/share-of-website-traffic-coming-from-mobile-devices/ 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_apps/Responsive/Mobile_first https://developer.mozilla.org/en-US/docs/Web/Progressive_web... [4] https://xd.adobe.com/ideas/process/ui-design/what-is-mobile-first-design/ https://xd.adobe.com/ideas/process/ui-design/what-is-mobile-...
  - huhtenberg 5y ago

magicalhippo 5y ago

Amusingly the demo video only showed "this video can't be played" message, thanks to uMatrix blocking the third-party media requests. If he'd made it a GIF it would have worked...

bhelkey 5y ago
Elsewhere in this thread: > Don't use GIFs, use audioless mp4s instead.
- Eelongate 5y ago
  I use uMatrix to block 3rd party image requests by default, so gifs would have the same "problem". Of course it's not actually a problem at all, if the user chooses to block 3rd party images or video, that is their prerogative.

rytcio 5y ago

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

city41 5y ago
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)
- wildrhythms 5y ago
  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.
  - city41 5y ago
    Yeah that's a good point. Clicks might work better here than hovers.

strogonoff 5y ago

A cool way of demonstrating features that are more or less represented by their respective GUI widgets could be by dogfooding the actual React components you use in production (just pass fake demo data in props/context). That said, demonstrating them in action is a bit trickier, since there’s no ready-made solution that could animate a virtual mouse cursor and simulate pointer events in accord.

Kye 5y ago

I imagined this very differently based on the title and expected GIFs all over. This is actually a good idea as presented, but probably won't work well on mobile as another commentor mentioned. Mobile would be better served with something like the expanders Wikipedia uses on the mobile site.

deleted 5y ago

[deleted]

vehemenz 5y ago

What is going on with this Notion site? It doesn't scroll. Notion is kind of a big company now; I find it kind of inexcusable that they've gone out of their way to break the browser's default (working) functionality.

smoldesu 5y ago

Quick sidenote here, if you're on Linux and want to record gifs like this, Peek[0] is what you're looking for. It's a lifesaver! [0] https://github.com/phw/peek https://github.com/phw/peek

apankrat 5y ago

If you are selling an UI option, a screencap is pretty much a must. If you are selling non-UI options, simple click-to-view explainers go a long way too, e.g. https://backup2.com/features https://backup2.com/features

DoneWithAllThat 5y ago

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.

ldng 5y ago

And what about the visually impaired ? You add a soundtrack ? So basically a video. Of course the a transcript is available, right ? So instead of going full circle, how about a good old text in the first place ?

deleted 5y ago
[deleted]
msdrigg 5y ago
Exactly. And similarly with the charts and graphs, how about just the good old raw csv data
- wizzwizz4 5y ago
  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.
oauea 5y ago
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 ?
- ggregoire 5y ago
  For your off-topic: Maybe they are French. https://en.wikipedia.org/wiki/Question_mark#Stylistic_variants https://en.wikipedia.org/wiki/Question_mark#Stylistic_varian...
- cyann 5y ago
  My assumption, as a french-speaking Swiss, where we don't do put spaces before symbols with 2 strokes (;:?!) like they do in France: https://french.stackexchange.com/questions/46/pourquoi-place-t-on-une-espace-avant-les-ponctuations-fortes-why-is-there-a https://french.stackexchange.com/questions/46/pourquoi-place...

Ragnarork 5y ago

I know this is a probably overtly provocative title, but still... This makes the assumption: - That everyone navigate a SaaS website in a particular way - That no-one uses text-to-speech accessibility software when navigating websites - That everyone wants a picture/gif to know more about a feature Basically, a quite inconsiderate approach to UX design.

aasasd 5y ago

We should define a media pseudo-format, or at least attributes for the ‘video’ tag, which would say that the video will play without sound—with it being enforced by the browser and without the option for the user to turn sound on. This way, modern codecs can be used for short animations instead of the format for moving 16x16 icons from '87—while still allowing users to block regular videos. Maybe even force-limit the duration to thirty seconds or so. Right now, it doesn't make much sense that GIFs are allowed to play automatically, but decent codecs aren't—if I want to evade videos, that is. (Though OTOH the size of GIFs might serve a purpose in limiting site-authors' appetites for trashy animation, but I don't see bandwidth being much of a concern for them lately.)

elondaits 5y ago
The `muted` attribute of the <video> tag already does that. It's an important attribute because it's necessary for videos to autoplay under Chrome. If you don't mute the video autoplay will only work if some special conditions are met (e.g. the user already played video with sound before on that site, etc.)
- aasasd 5y ago
  Eh, sites still just play long videos, but muted—expecting that your attention will be inevitably drawn by the movement, and you'll enable sound. It's just part of all the flashy junk immediately distracting the visitor from whatever they wanted to do on the page. Instead, videos shouldn't play unless they have a ‘muted-forever’ attribute, with no way to enable sound. This way they will be the same as GIFs, but with better codecs.

rsync 5y ago

The problem with this kind of UI is that when you scroll the page, you inadvertently mouseover the links as you scroll. So different pieces of the content you are trying to read keep getting hidden in a frustrating way as you're trying to read it. You can see this in the OPs video right at the beginning - after the very first mouseover he moves his mouse out of the colum, to the right, in order to see the column for his first scrolling motion.

airstrike 5y ago
I always scroll every page along the whitespace on either side for that very reason
- jimmygrapes 5y ago
  Wouldn't it be nice if we had always visible scrollbars again? Although maybe this time with a better way to tell how big they are so that we don't have to use weird margin and padding hacks and take a random guess at how the OS renders them.

Benjoin 5y ago

I'd be interested to see if there's any research that would lead you to believe that conversions are increased by this change. It's an interesting proposition, but I wonder if we're really getting to the core of the stakes here. I'm not a huge fan of the hover state tool tips. It feels like this information design here could be more considered. If we're going to think of the GIFs as tool tips, then we're talking about them as non-essential information for motivated users. The thing is, I think that works well when it's used sparingly in context, but not for every single list item on page. It's a bit of a pain and it looks messy to read each header and then hover, one-by-one to get more context. If we made a more firm decision about the role the GIFs play, then we could take a stronger strategic approach to their implementation. If they are essential, they should be part of the displayed design. There are certainly methods to format text and images that make the document easily scannable. That said, I think what might be more applicable here would be a drawer strategy with a section that expands for more information. At the end of the day, I think what's most relevant is that there are 30+ features to highlight and that seems like way too many for a pricing page!

mcintyre1994 5y ago

I do think visuals are a good way to describe features in a lot of products, the examples here definitely benefit from a graphic. "Most engaging hours" doesn't sound nearly as interesting as that graph in the mouseover. But I think for most features of most products you probably don't need a GIF and I'd typically prefer a faster loading image in most cases.

remorses 5y ago

I noticed Notion sites have some problems loading on mobile lately so I made a site from this post using Notaku [0] https://gifthing-69a3.notaku.site/ https://gifthing-69a3.notaku.site/ [0] https://notaku.website https://notaku.website

waynesonfire 5y ago

yeah that's nice, but you only reaally need one gif, https://archive-media-2.nyafuu.org/vp/image/1522/39/1522395239700.png https://archive-media-2.nyafuu.org/vp/image/1522/39/15223952...

onion2k 5y ago

I hope the author is tracking how often those gifs are loaded, and (after the HN hug-of-death dies away) they pay close attention to whether or not users are seeing that they're there at all. I hope it works out, because it's pretty well implemented - it doesn't slow the page down, popups all work (kind of.. it's weird if you don't stop on each item), and it's a nice design. In my experience any feature on a website that isn't really obvious tends to get single-digit-percentage engagement, and sometimes none at all. Users don't explore UIs. They want things to be clear, simple, and obvious. If it isn't then it might as well not exist...

Waterluvian 5y ago

I always assumed that the pricing pages were intentionally vague so that the buyer could take a small set of true words and imagine what they want the feature to be, rather than what it actually is. Of course this can frustrate users. But that's not to say that this ends up being a net positive anyway.

robertoandred 5y ago

What on earth did this site do to scrolling? Spacebar doesn't work, arrow keys work really weirdly...

EForEndeavour 5y ago
Spacebar: replaced by GIFs. Arrow keys? Believe it or not, also replaced by GIFs.
judge2020 5y ago
It's a Notion-published site, so arrows select "blocks" (pieces of content) on the page.

barrenko 5y ago

No, it should not.

superkuh 5y ago

Every site that's not an application, just a way to display text and media, should progressively enhance it's function with javascript, not require it's execution to see anything at all. This tdinh.notion.site fails that very low bar and is just a blank white page. It both fails to communicate it's desired message about GIFs and communicates that it's not a voice to listen to on this subject regardless.

daralthus 5y ago

Also if you are not doing it yet, demonstrate and announce every new feature in Slack to your team in a dedicated channel. With gifs.

b20000 5y ago

the only thing you need to do is measure your landing page and optimize it for number of qualified leads per day/week/month…

wscott 5y ago

Telegram always uses GIFs very effectively for explaining new features. The animations are always kinda cutesy, but still very good at demonstrating the feature. https://telegram.org/blog/shared-media-scrolling-calendar-join-requests-and-more https://telegram.org/blog/shared-media-scrolling-calendar-jo... https://t.me/s/TelegramTips https://t.me/s/TelegramTips (both look better in Telegram than on the web, but it gets the idea across.

sam1r 5y ago

>> Every pricing page should have GIFs Given that you have a slick UI product with charts. Maybe not every pricing page. Also, mobile.

gherkinnn 5y ago

I like it. Makes complete sense. Sure, this and that could or should be improved. But only ever focussing on those things is depressing.

SimeVidas 5y ago

Why 20 MB of GIFs when you can have 200 KB of videos?

tomcam 5y ago

Neat idea. Couldn't find any evidence whether it helped sales?

SavantIdiot 5y ago

Here to vote on the "please don't do this" option. 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.

switch007 5y ago
Agree, an accordion feels like a good use case here
gennarro 5y ago
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.
ziml77 5y ago
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.

authed 5y ago

GIFs are outdated... https://old.reddit.com/user/anti-gif-bot/ https://old.reddit.com/user/anti-gif-bot/

boomskats 5y ago

So this is how I find out about LICEcap[0]. After years of thinking byzanz-record[1] was the only way to record a decent quality gif. Justin Frankel, you're an awesome dude. [0]:https://www.cockos.com/licecap/ https://www.cockos.com/licecap/ [1]: https://linux.die.net/man/1/byzanz-record https://linux.die.net/man/1/byzanz-record

eps 5y ago
On Windows there's also μGiffer - https://iobureau.com/ugiffer https://iobureau.com/ugiffer
ojame 5y ago
If you're on MacOS: I used to use LICEcap but then I found myself wanting more (still basic) features, like the ability to trim recordings, export to video formats etc. Now I use Kap, it's the perfect balance of simplicity and features (for me): https://getkap.co/ https://getkap.co/

ravenstine 5y ago

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. ``` 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.

Gigachad 5y ago
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"
hinkley 5y ago
> 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.

throwaway81523 5y ago

I don't understand this article at all. It says every pricing page should have gifs, but doesn't say why. Maybe it says in the images, but they don't load at least under my current adblock configuration. For that matter, JS and gifs of any sort on a web page are effectively another annoying captcha when I just want the information. For pricing, please just post a CSV or equivalent, and get out of the way.

nhumrich 5y ago
The video demo makes the article make a little more sense. But essentially there is a GIF tooltip for every feature listed on the pricing page so that you know what the listed feature in the comparison matrix, it's talking about.
- throwaway81523 5y ago
  Ah thanks. Is the GIF tooltip somehow better than a plain HTML table with a header over each column saying what it is? Video, ugh ;).
  - nhumrich 5y ago
    I mean an image is worth a 1000 words, and a GIF is multiple images spliced together.
MrStonedOne 5y ago
yes they do, in the very first few paragraphs. >When evaluating a SaaS, I often just skip the landing page and all of its marketing fancy words and go straight to Pricing page. >Usually, I will find what I need there: what features does the SaaS has, and how much do I have to pay to get what features. >For that reason, I added GIFs to every single feature of my SaaS pricing page: They just didn't spell out the connection between the two premises, that because they tend to ignore the demo/about/landingpages, and jump straight to the pricing page, other people likely do so as well, and you should turn said pricing page into your demo page/landing page to target such people with that info since they won't get it from the normal page thats dedicated to conveying that info.

imwillofficial 5y ago

The loading lag in the example is ugly and confusing.

gtsop 5y ago

Am I the only one who thinks the actual essence of the article is not the technical detail of using GIFs on hover, but the fact that you see a quick visual demo of yhe thing you are paying for on a pricing page? On that matter, great idea sir! Will have it in mind

sak5sk 5y ago
No you are not the only one. Seems half the comments here miss the point. It's a clever addition!

keithnz 5y ago

I like the idea of explaining what features are, I don't like this method of doing it, as many others have commented, it's super annoying. Just provide clickable things to get descriptions

ljm 5y ago

This isn't good UX and it's not accessible or web-friendly either.

robot 5y ago

Pricing page is to make the user make a quick buying decision, not distract the user with a features tour. You do that elsewhere. But the tooltips and small gifs are an awesome idea!

futhey 5y ago

I saw this on blackmagic.so a few days ago, was super impressed. Works very well in this limited use-case, especially targeting desktop. Uses text decoration dashed as an indicator that something is going to happen on hover. It's probably worth just disabling this behavior on mobile, mostly because tooltip direction gets awkward on small screens. Nice tap to toggle on iPad, though. Could be improved a bit by using video tags, these are 300k-500k each. Pretty large. But, then you have to create multiple versions of each to target multiple platforms, I can see why you might skip this.

registeredcorn 5y ago

I can see the desire to visualize a benefit to the service easily, but I feel like having an GIF start on hover is an unexpected behavior and might be a turnoff to some users. It seems very much like something that could easily be overused/abused without much effort. Maybe a better solution would be to contain the GIFs to a single page that is linked from the pricing page?

mvkel 5y ago

But does it convert?