Image Carousels in Web Design — Benefits & Best Practices

There’s no necessity of carousel underline slideshows on a web. In fact, this trend has finished zero though grow in a past 5-10 years with some-more browser support now than ever before. But are picture carousels unequivocally value a effort? What sorts of advantages do they produce, and how should they be used productively in a layout?

I’d like to share some common trends, live examples, and ideas for web designers meddlesome in picture carousels. These energetic sliders are heavily debated, though we do cruise they supplement value when crafted in a right context.

Product carousels for e-commerce

The universe of e-commerce is full of rotating carousels on home pages and product pages. The idea is to maintain a transparent information density with photos and calm that tell a singular nonetheless profitable story to assistance sell products.

There are two primary placements for an e-commerce product slider:

  1. On a shop’s home page
  2. On a product page

They both work differently though serve a same goal — to sell products in a visible manner.

Example 1: Au Lit Fine Linens – home page

Take a demeanour during a home page for Au Lit Fine Linens, that uses a fullscreen auto-rotating carousel to uncover off opposite products, such as duvets, pillows, and bed covers.

Au Lit Fine Linens Home PageAu Lit Fine Linens Home Page

The images take adult a full width of a home page, and they appear good above a fold. In fact, this slider should be a unequivocally initial thing to locate your courtesy when initial alighting on a page. Each slip leads to a opposite page on a site to guide business by a selling experience.

This slider can be a tad intimidating when initial alighting on a page, though with a button link and overlay text it can also be unequivocally enlivening to visitors who only wish to dive in and shop.

Example 2: Eden phone box – product page

You can see a some-more specific instance on a Eden phone case product page. It uses an auto-rotating slider to uncover off images of a product.

Eden Boxes Case Product PageEden Boxes Case Product Page

I find these to be a little “too much” in a universe of e-commerce. When looking during a product we wish to be in control of switching between images.

The improved choice is to do a gallery of images with control given to a visitor. For instance, a Design by Humans page uses thumbnails for any photo that is many some-more encouraging, and grants some-more control to a user.

Web portfolio carousels

Online website portfolios are a bit opposite given these slides don’t always click by to another page. It’s loyal that some will lead to a box investigate or write adult about a project, though many carousels on portfolio websites are only meant to show off visible work.

Example 1: Biboun – home page

The French artist operative underneath a name Biboun has a carousel slider on a home page featuring snippets of artwork. The particular slides lead to inner pages in a portfolio that cover an whole project with mixed photos.

Biboun Home PageBiboun Home Page

This is substantially the best ensue to do a slider on a portfolio website. Just showcasing a purposeless list of work is purposeless unless those specific works have a reason to be showcased.

All of a pieces are exquisite in Biboun’s slider, and it doesn’t take adult many room either. Although we know some people hatred a auto-rotating slideshows for good reason, on such a minimalist blueprint we have a formidable time angry about this pattern feature.

Example 2: Aaron Blaise’s website – home page

I unequivocally like a instance found on Aaron Blaise’s website given he showcases his work as a portfolio, though mostly uses this website to sell his art videos. Aaron Blaise worked during Disney for a integrate decades, and he has a skillset to infer it.

Aaron Blaise Art Teacher Home PageAaron Blaise Art Teacher Home Page

While a home page slider on his site does auto-rotate, we don’t find it impossibly irritating or out of place. Each slip has a bit of calm applicable to a image, and it helps Aaron draw courtesy to his latest video lessons that learn immature artists how to master specific skills.

A good portfolio carousel focuses on visuals, and leads visitors further into a website. If we can get these dual things afterwards we wouldn’t be opposite a underline like this in a personal portfolio website.

Common pattern trends

If we demeanour during some of my above examples you’ll notice there’s generally dual opposite forms of sliders: fullscreen and fixed width.

These stylistic choices mostly relate to a layout and to how many calm it can hold. If a blueprint spans a full breadth of a page afterwards it creates clarity to dilate out a slider too. But this also army we to find high-quality images that still demeanour good during full shade on vast fortitude monitors.

I privately cite a bound breadth character like you’ll see in a dual art portfolio examples. These are much easier to control, and they’re mostly not as tall — creation it easier for visitors to simply omit them if they wish.

Also cruise a value of auto-advancing slides, and how formidable it can be for users to locate this content. There’s a good case study by a Nielsen Norman Group display that it’s improved not to have auto-advancing sliders.

I’m on house with this ensue in a clarity that it’s less complete on memory with reduction animations and suit in a browser, and many people don’t like auto-rotating carousels possibly — and we should always cater to your audience.

However we can’t contend that it’s never value adding an auto-advancing slider, generally given with immobile sliders we don’t get as many views, and we also need to make your initial slip a many important as many users won’t ensue to a subsequent slide. Deciding either to make a slider auto-rotating or not is unfortunately an area of trial-and-error.

What to equivocate during all costs

Here’s an critical thing that we privately cruise falls underneath “avoid during all costs”. Have a demeanour during or click on a screenshot below, and try to theory what it might be.

Yozenn Cafe Home PageYozenn Cafe Home Page

The Yozenn cafe website uses a fullscreen header slider. It does not auto-rotate that is great, however a slides also serve no purpose other than decoration.

The images don’t couple anywhere, and they uncover off a little handful of products. They could all only be added to a home page background though a slider to save problem and additional kilobytes of JavaScript.

I’d disagree this credentials shifting underline doesn’t supplement many value to an already-cramped website. If a images had links or concomitant calm they’d during slightest be some-more relevant.

Feel giveaway to use images in your header territory that take adult a full page, however if they don’t couple anywhere or offer any genuine information afterwards don’t spin them into a carousel.

Interactive features

The ensue users navigate a carousel affects a pattern itself. There are a variety of navigation styles, though these are a many popular:

  • Dot-based navigation
  • Arrow navigation
  • Thumbnail navigation
  • List links or title items

The many common is a dot navigation that you’ll find on hundreds of complicated websites.

Example 1: Chic during Home – home page

Chic during Home is a good instance regulating three little dots underneath a slider to imply navigation. Each picture rotates by automatically, and a associated dot in a array gets filled with black. The other dual dull dots denote intensity slides for users to browse.

Chic during Home CarouselChic during Home Carousel

This is a popular pattern pattern that many users already recognize. It falls into a same problem as a hamburger menu that many designers do not like, though users already commend it, and instinctively know how to use it.

Example 2: Pure Cycles – home page

The home page of Pure Cycles uses a combination of dot and arrow navigation. This ensue users have a forwardback navigation, though also see a “overall” navigation by dot links in a bottom.

Pure Cycles Carousel DesignPure Cycles Carousel Design

I indeed find a dot links in this instance tough to see. The problem with visible slides is that many elements aren’t easy to distinguish, so arrows and dots can easily mix into a background.

Example 3: IGN – home page

On a homepage of IGN you’ll find another auto-rotating carousel that uses title links for a navigation. This is unequivocally common for publishers who wish to sell headlines rather than products. Each couple goes to a particular slip that eventually leads to a essay page.

IGN Carousel Home PageIGN Carousel Home Page

These links could be transposed with thumbnails, or even embody thumbnails from any story — however a visual aspect is shown in a carousel, so omission a thumbnail indeed saves space.

Different websites use opposite navigation styles for opposite reasons. Consider a goal(s) of your visitors, and pattern for a best user experience.

Key takeaways

You should aim to produce genuine value, or additional information with a carousel. This might be information a caller did not have before, or it might lead to pages that a caller might not have found otherwise.

Try to equivocate auto-rotating carousels, and only use them on vital alighting pages (the home page being one example). As prolonged as a carousel has a purpose, and doesn’t demeanour like an ad, your pattern should do well.

If you’re looking for some-more info on web carousels, check out some of a following posts:

Add Comment