How To Optimize Your SaaS Site’s UI To Showcase Your Product
Without a visual representation of your UI, people don’t feel like they know enough about your product. So even if your site has text describing how your software works, they won’t necessarily feel confident about moving forward.
That’s because users most value UI representations in the form of images, GIFs, videos, and demos. Take note—we listed those in descending order of importance. Images come first.
Why not videos?
Videos take longer to load and require more user effort. (Users first need to decide to watch a video, then click “play” and adjust their audio volume.) In other words, a video is a lot more demanding than a screenshot. The same goes for demos, which feel like extra commitment compared to images and GIFs.
This is actually good news for optimizing your SaaS site, since creating images requires less effort. Here are five tips for better representing your product:
Prioritize showing images of your product’s UI. Take screenshots of key screens, like your main dashboard and most important product features. Example: Clearscope displays a screenshot of its text optimizer on its homepage.
Show more concrete images of your product than abstract ones. Abstract graphics show only an interpretation of your product. The online counseling platform BetterHelp could do better here. Instead of using abstract illustrations, it could show its app’s scheduling and messaging functions, plus other features.
If you do use videos, make them short and loop them. The idea is to make your videos mimic GIFs, which often sacrifice image quality. Take a look at the looping six-second video on HelpDesk’s homepage for some inspiration.
Make sure non-looped videos load quickly and have scrubbing previews. This is best for longer video walkthroughs with audio. Scrubbing previews show what’ll happen in a video when you move your cursor across a video’s timeline—they give users an idea of what to expect.
If your demos are self-guided, make that clear. A CTA button that says “Try a demo” feels much more inviting and low-effort than one that says “Book a demo.”