Don’t be Fooled by the Website “Wow” Factor

So you want a website with the so-called “Wow” factor.

The home page must open with stunning visuals that catch the eye right away. Your goal is to impress well-to-do clients with your striking, colorful design.

But how?

You figure that a carousel image slider or full-screen background image would give you that massive visual impact you’re looking for. You already have incredible, high-quality product images, so it seems like a no-brainer.

You’re not alone.

A business owner once remarked about a competitor’s site:

“That website has that “Wow” factor we’re looking for. You can tell. They obviously know what they’re doing.”

The website they were referring to had a full-screen image slider greeting users the moment they reached the home page.

The slider, was without a doubt, attention-grabbing. But it was also visible on page load, contained large images and probably some hefty JavaScript files to make it work, three factors affecting page load time.

Page Load Time

Unfortunately, focusing too much on visuals can create an initial “wow” reaction that ends up crippling user experience in the end. A website must, first and foremost, be user-friendly, mobile-friendly and accessible to impress well-to-do clients, mobile users and any other visitors that stop by. The pages must load quickly and provide a seamless experience.

Shiny Objects, Sliders & Seashells

Large, gorgeous images in a slider are dazzling… just like seashells and other “shiny objects” that wash up on a beach.

But for how long?

Does your “Shiny Object” hurt or help User Experience?

Think about how you use the web. You’re probably searching for information, not looking to be dazzled. If you can’t find it on one website… or if you’re waiting those few extra agonizing seconds for a page to load, you click away and go elsewhere.

If that shiny slider is hurting your page speed, it’s also increasing your bounce rate and hurting your search engine rankings.

Online Site Optimization Tools

Fortunately, there are online tools you can use to better judge a website, instead of drawing conclusions from your initial impression alone.

You can check to see if a page has speed issues by visiting GTmetrix or Google’s PageSpeed Insights. Enter any URL to see if a page has speed issues.

At GTmetrix, you can analyze the waterfall chart to see how long each page element takes to load. (This includes image sliders.) Waterfall charts visualize page-loading behavior.

Responsible Image Sliders

If you’re still considering a carousel slider, add it responsibly.

First, be sure to optimize your images.
Choose images with plain, uncluttered, non-distracting backgrounds.
Keep in mind that most visitors will only view a couple of slides. Resist the temptation to add that sixth slide. No one is going to wait for it.
Remove other unnecessary elements from your pages. Minimize the “bells and whistles.”
Choose a slider that utilizes lazy loading (only loading the first slide right away, then letting the rest load after the page is visible.)
Learn about page caching and how to leverage it.

Image Optimization

Did you know that most RAW photos that come from a camera have huge file sizes, which will add to the load time of your web page? They must be optimized for the web (whether you have an image slider or not).

File Format, File Size and Dimensions

File Format: Save your photos and upload them as JPGs. Save other graphics, such as illustrations, that have large, flat areas of color as PNGs or GIFs.
File Size: Also consider the file size of your saved images. A 5MB (megabyte) image is huge. A 125KB (kilobyte) image is much better for the web. (NOTE: If you have five 200KB photos in one image slider, that’s 1MB of images weighing down your page.)
Image Dimensions: On the web, the height and width of images are measured in pixels. A blog post typical image might be 700×300 pixels. If your image is 2000×900 pixels, it’s huge.

Image Compression Tools

You can compress images in Photoshop or an online compressing tool. Image Optimizer is a free online tool. You can use it to resize, compress and optimize your image files. It’s as easy as clicking a button! Optimizilla and TinyPNG can compress JPEG and PNG files with the lowest file size possible.

WordPress Images

If you have a WordPress site, you should optimize the images you upload.

You can also check the images that have already been uploaded to your Media Library to find out their file sizes and image dimensions.
You can also use a WordPress plugin such as Smush to optimize your images, resize and compress them to improve your Google PageSpeed score.

See WordPress Media Library Hidden Features to learn more ways to optimize images in it. It explains everything from image uploading to compression to the effects of image cropping.

The Hero Image Alternative

Second-guessing your visual impact approach?

How about a Hero Image? A Hero Image is typically a background image with text or other design elements in the foreground. A Hero Image can be lightweight and beautiful, plus there’s no need for bulky Javascript files to make it work.

The hero image is a web design trend — The Hero Image is a popular Web Design Trend.

Choosing a Hero Image

Similar to sliders, you’ll want to avoid images with busy backgrounds in your Hero Images.
Try using photos (1,200 pixels wide) that have a single main subject with a simple, uncluttered background.
Choose an image that entices users to interact with your site.
Check it on large screens. Check it on a cell phone. Make sure it looks good on both.

The Illustration Alternative

If photos are weighing down your site, try replacing some of them with illustrations. Illustrations tend to have a smaller file size. They are not as detailed as photos, so they load faster. Illustrations can also be used as Hero Images. Need someone to help you create images for your site? Try Fiverr.com.

Illustration used for image optimization — Illustrations tend to have smaller file sizes than photos do.

“Wow” Them with Subtle Animations

With the arrival of HTML5 and CSS3, web designers can now utilize CSS animations in web pages. This is an easy way to add personality to your site, enhance the emotional experience and give visual cues so visitors don’t have to guess where to go next.

CSS can also be combined with simple Javascript files to add subtle effects to logos and icons. There are ways to combine your CSS and your JS files, minify them and link to them in efficient ways. Be sure to check your page speed in GTMetrix afterwards.

See Subtle Animations with CSS & JavaScript: Intro.

This subtle animation GROWS on HOVER with pure CSS.

Website Usability

Everything you add to your site, including subtle animations, should add value for your visitors. Do they help them complete a task, provide answers to their questions or entertain them?

People need to be able to use your website, above all else.

If your site is confusing and visitors can’t find their way around it or complete the task they came there for, they will get discouraged and turn to “less shiny” websites.

Other Ways to Engage Users

Provide useful content that is also easy to read. Use meaningful titles, headlines and subheadings. Keep your sentences and paragraphs short. Use whitespace.
Add optimized, relevant images to your articles.
Add captions under images (captions are read, on average, 300% more than body copy).
Include a simple and well-structured navigation structure.
Keep your mobile users happy by limiting the number of huge, striking visuals in your designs.
Show your personality.

Summary

In the end, you need to find a balance between creating a visual impact that “wows” and providing a website that “satisfies” your visitors with a successful, pleasurable and memorable experience.