“What a cool looking website!” you think, as the screen loads. There are video clips auto-playing in the background, while text fades in and out over the top. There’s a sleek navigation menu in the upper left corner, but also an extra “hamburger” navigation button in the upper right. There are buttons in the middle of the page that change every so often, independent of the video clips. As you scroll down, photos zip in from the sides, and text blocks pop up from below. There’s so much cool stuff going on, you don’t even know what you should click on first.
But that’s the problem: you don’t know where to click.
Good design is all about communication, not flash. A great website gets its main message across clearly and quickly, then shows the user exactly what they should do next. I’m not saying this can’t involve video and movement; however, if the flash clouds the message, or makes it unclear what the next step is, you’ll lose your audience. Meaning, you won’t get that newsletter sign-up, that item added to cart, or that request for a free consultation.
Converting your audience is (typically) the point of a website. Wowing them is great, but it should be looked at as a means to that end, not the end in itself. When used properly, visual effects can be powerful tools to guide users through your website.
Here are four ways visual effects help, not hinder, a conversion.
Buttons That Prompt
It goes without saying that you want to make places to click obvious. But adding some directional movement, like this example from SwigCo.com, works as an enticing invitation, telling the user, “There’s more… let’s go see it.” The motion of the underline and arrow work almost as a lure. The effect is also subtle enough that having multiple buttons on a page won’t feel busy.
Video That Enhances, Not Distracts
Many people tend to have strong opinions when it comes to video on websites, and I’m solidly in the “love it” category. We aren’t in the dial-up age anymore — let’s use that bandwidth to showcase what a static photo can’t.
This example from Centoni.com is the perfect introduction to the company’s portfolio of home renovations. The video starts with glass doors opening onto a recently renovated deck with vast San Francisco views, and this is an incredibly powerful statement. The doors opening is a wonderful metaphor for entering the portfolio, while the images of San Francisco tell the user where the company is based. And of course, the quality of their work is unmissable. Placing this video on the portfolio page, instead of the home page, is a pleasant surprise as the user clicks through the site, and underscores the reason most of Centoni’s website visitors are there: for the eye candy.
The video is also not cluttered with text or buttons, keeping the effect sophisticated and simple, like the rest of the website.
Bold Color that Draws You In
Great use of color is such a visual treat. When done right, a boldly colorful website draws you in and makes you part of the brand. A perfect example of this is SammysBeachBarRum.com. From the first paint, your eyes are flooded with bright greens, oranges, and “island vibes.”
The “safe” design choice would have been to use neutrals and white as the base, while the colorful product images popped. But design firm meatoes.com — with whom we have partnered on several projects — knows how to make bold design choices work. Multiple photos paired with color blocking both reinforce the brand, and create a party atmosphere. Color is fun, and when your website can immerse your user in it, your user has fun too.
Subtle movement for sophistication
While a site with too much movement feels cluttered and juvenile, a site without any movement can feel flat. The trick is striking the right balance to give a sophisticated vibe that keeps the user interested and feels modern, not gimmicky.
McLaughlinLuxury.com does just that. As the user scrolls down the pages, blocks of content move up and fade into view. The effect is just enough of a “reveal” to be interesting without being distracting, and the user never has to wait for the content. Slight movement on mouseovers piques interest for clicking deeper into the site. It doesn’t take much to create a high-end, fluid feel.
The great thing about visual effects is that they can be tailored to your brand, your message, and your conversion path. When you think about your website’s purpose and what you ultimately want your user to do, you can craft the visuals around it, creating a cohesive statement that’s more likely to end in conversions. To learn more about how WebSight Design can help create an effective visual interface for your website, contact us. We’d love to help.