Beeldcarrousels in webdesign - voordelen en beste praktijken

Er is geen tekort aan carrousel functie diavoorstellingen op internet. In feite heeft deze trend niets anders gedaan dan groeien in de afgelopen 5-10 jaar met nu meer browserondersteuning dan ooit tevoren. Maar zijn beeldcirkels echt de moeite waard? Welke soorten voordelen leveren ze op en hoe moeten ze productief worden gebruikt in een lay-out?

Ik zou graag wat willen delen gemeenschappelijke trends, live voorbeelden en ideeën voor webdesigners die geïnteresseerd zijn in beeldcarrousels. Deze dynamische schuifregelaars zijn zwaar besproken, maar ik denk wel dat ze waarde toevoegen wanneer ze in de juiste context worden gemaakt.

Productcarrousels voor e-commerce

De wereld van e-commerce zit vol roterende carrousels op homepagina's en productpagina's. Het doel is om behoud een duidelijke informatiedichtheid met foto's en tekst die vertel een uniek maar waardevol verhaal om producten te verkopen.

Er zijn twee primaire plaatsingen voor een schuifregelaar voor e-commerceproducten:

1. Op de startpagina van een winkel
2. Op een productpagina

Ze werken allebei anders, maar dien hetzelfde doel - om producten op een visuele manier te verkopen.

Voorbeeld 1: Au Lit Fine Linens - startpagina

Kijk eens naar de startpagina voor Au Lit Fine Linens, dat maakt gebruik van een automatisch draaiende carrousel met volledig scherm om te pronken met verschillende producten, zoals dekbedden, kussens en bedovertrekken.

De afbeeldingen neem de volledige breedte in beslag van de startpagina, en zij verschijnen ver boven de vouw. In feite zou deze schuifregelaar het allereerste moeten zijn om uw aandacht te trekken bij het eerste landen op de pagina. Elke dia leidt naar een andere pagina op de site naar begeleid klanten door de winkelervaring.

Deze schuifregelaar kan een beetje intimiderend zijn bij de eerste landing op de pagina, maar bij de knop link en overlay tekst het kan ook heel bemoedigend zijn voor bezoekers die gewoon willen duiken en winkelen.

Voorbeeld 2: Eden-telefoonhoes - productpagina

U kunt een meer specifiek voorbeeld bekijken op de productpagina van de Eden-telefoonhoes. Het gebruikt een automatisch roterende schuifregelaar om te pronken met afbeeldingen van het product.

Ik vind dat deze een beetje zijn “te veel” in de wereld van e-commerce. Als ik naar een product kijk dat ik wil zijn controle over schakelen tussen afbeeldingen.

De betere keuze is om een ​​galerij met afbeeldingen te maken met controle aan de bezoeker. De pagina Design by Humans maakt bijvoorbeeld gebruik van miniaturen voor elke foto dat is veel bemoedigender en geeft meer controle aan de gebruiker.

Web portfolio carrousels

Portfolio's van online websites zijn een beetje anders omdat deze dia's klik niet altijd door naar een andere pagina. Het is waar dat sommigen zullen leiden tot een case study of een project schrijven, maar veel carrousels op portfoliowebsites zijn gewoon bedoeld om pronken met visueel werk.

Voorbeeld 1: Biboun - startpagina

De Franse kunstenaar die werkt onder de naam Biboun heeft een carrousel schuifregelaar op de startpagina met fragmenten van kunstwerken. De afzonderlijke dia's leiden naar interne pagina's in de portfolio die bestrijk een heel project met meerdere foto's.

Dit is waarschijnlijk de beste manier om een ​​schuifregelaar te maken op een portfoliowebsite. Het tonen van een willekeurige lijst met werk is zinloos, tenzij die specifieke werken een reden hebben om te worden getoond.

Alle stukken zijn voortreffelijk in de schuifregelaar van Biboun en zo neemt niet veel ruimte in beslag een van beide. Hoewel ik weet dat sommige mensen de automatisch draaiende diavoorstellingen om een ​​goede reden haten, heb ik het op zo'n minimalistische lay-out moeilijk om te klagen over deze ontwerpfunctie.

Voorbeeld 2: website van Aaron Blaise - startpagina

Ik vind het voorbeeld op de website van Aaron Blaise heel goed omdat hij toont zijn werk als een portfolio, maar meestal gebruikt deze website om verkoop zijn kunstvideo's. Aaron Blaise heeft een paar decennia in Disney gewerkt en hij heeft de vaardigheden om het te bewijzen.

Hoewel de schuifregelaar van de startpagina op zijn site automatisch roteert, vind ik het niet ongelooflijk vervelend of misplaatst. Elke dia heeft een beetje inhoud die relevant is voor de afbeelding, en het helpt Aaron vestig de aandacht op zijn nieuwste videolessen die jonge kunstenaars leren hoe ze specifieke vaardigheden moeten beheersen.

Een geweldige portfoliocarrousel richt zich op visuals, en leidt bezoekers verder naar de website. Als je deze twee dingen kunt krijgen, zou ik niet tegen zo'n functie zijn op een website met een persoonlijke portfolio.

Gemeenschappelijke ontwerptrends

Als u naar enkele van mijn bovenstaande voorbeelden kijkt, ziet u dat er over het algemeen twee verschillende soorten schuifregelaars zijn: volledig scherm en vaste breedte.

Deze stilistische keuzes vaak betrekking hebben op de lay-out en hoeveel inhoud het kan bevatten. Als een lay-out de volledige breedte van de pagina beslaat, is het ook logisch om de schuifregelaar uit te breiden. Maar dit dwingt je ook om vind beelden van hoge kwaliteit dat er nog steeds goed uitzien op het volledige scherm op grote resolutie monitoren.

Ik geef persoonlijk de voorkeur aan de stijl met vaste breedte, zoals je zult zien in de twee voorbeelden uit de kunstportfolio. Dit zijn veel gemakkelijker te controleren, en dat zijn ze vaak niet zo lang - het voor bezoekers gemakkelijker maken negeer ze gewoon als ze dat willen.

Overweeg ook de waarde van automatisch bewegende dia's, en hoe moeilijk het kan zijn voor gebruikers om deze inhoud te vangen. Er is een geweldige case study van de Nielsen Norman Group waaruit blijkt dat het beter is geen automatische schuifregelaars hebben.

Ik ben aan boord met deze benadering in de zin dat het zo is minder intensief op geheugen met minder animaties en beweging in de browser, en de meeste mensen houden ook niet van auto-roterende carrousels - en dat zou je altijd moeten doen tegemoet te komen aan uw publiek.

Ik kan echter niet zeggen dat het nooit de moeite waard is om een ​​automatische schuifregelaar toe te voegen, vooral omdat je met statische schuiven je krijg niet zoveel meningen, en je moet ook maak je eerste dia het belangrijkste zoveel gebruikers gaan niet door naar de volgende dia. De beslissing om een ​​slider automatisch te laten draaien of niet, is helaas een gebied van vallen en opstaan.

Wat te vermijden ten koste van alles

Hier is een belangrijk ding dat ik persoonlijk denk valt onder “koste wat het kost vermijden”. Bekijk of klik op de onderstaande schermafbeelding en probeer te raden wat het kan zijn.

De website van Yozenn cafe gebruikt een schuifregelaar voor het volledige scherm. Het roteert niet automatisch wat geweldig is, maar de dia's ook geen ander doel dienen dan decoratie.

De afbeeldingen link nergens, en ze laten een handjevol producten zien. Ze kunnen allemaal gewoon zijn toegevoegd aan de achtergrond van de startpagina zonder de schuifregelaar om verwarring en extra kilobytes JavaScript te besparen.

Ik zou beweren dat deze achtergrond-schuiffunctie niet veel waarde toevoegt aan een al te krappe website. Als de afbeeldingen koppelingen of begeleidende tekst bevatten, zouden ze op zijn minst relevanter zijn.

Voel je vrij om afbeeldingen in je koptekstgedeelte te gebruiken die de volledige pagina beslaan, maar als ze dat wel zijn koppel nergens heen en bied geen echte informatie aan verander ze dan niet in een carrousel.

Interactieve functies

De manier waarop gebruikers een carrousel navigeren beïnvloedt het ontwerp zelf. Er zijn een verschillende navigatiestijlen, maar deze zijn het populairst:

• Dot-gebaseerde navigatie
• Pijl navigatie
• Miniatuurnavigatie
• Lijst met links of kopitems

De meest voorkomende is de punt navigatie die je op honderden moderne websites vindt.

Voorbeeld 1: Chic at Home - startpagina

Chic at Home is een goed voorbeeld van gebruik drie kleine stippen onder de schuif om navigatie aan te duiden. Elke afbeelding wordt automatisch doorlopen en de bijbehorende punt in de reeks wordt gevuld met zwart. De andere twee lege stippen duiden potentiële dia's aan voor gebruikers om te bladeren.

Dit is een populair ontwerppatroon dat veel gebruikers al herkennen. Het valt in dezelfde categorie als het hamburgermenu dat veel ontwerpers niet leuk vinden, maar gebruikers herkennen het al, en instinctief weten hoe het te gebruiken.

Voorbeeld 2: Pure Cycles - startpagina

De startpagina van Pure Cycles maakt gebruik van een combinatie van punt- en pijlnavigatie. Op deze manier hebben gebruikers de navigatie vooruit & achteruit, maar zie ook de “globaal” navigatie via punt links onderaan.

Ik vind de punt links in dit voorbeeld eigenlijk moeilijk te zien. De moeilijkheid met visuele dia's is dat veel elementen niet gemakkelijk te onderscheiden zijn, dus pijlen en punten kunnen dat wel gemakkelijk opgaan in de achtergrond.

Voorbeeld 3: IGN - startpagina

Op de startpagina van IGN vind je een andere automatisch draaiende carrousel dat gebruikt titelkoppelingen voor de navigatie. Dit is heel gebruikelijk voor uitgevers die dat willen verkoop krantenkoppen in plaats van producten. Elke link gaat uiteindelijk naar de individuele dia leidt naar de artikelpagina.

Deze links kunnen worden vervangen door miniaturen, of zelfs thumbnails van elk verhaal opnemen - hoe dan ook visueel aspect wordt getoond in de carrousel, Het weglaten van de thumbnail bespaart dus ruimte.

Verschillende websites gebruiken verschillende navigatiestijlen om verschillende redenen. Overweeg het doel (de doelen) van uw bezoekers, en ontwerp voor de beste gebruikerservaring.

Belangrijkste afhaalrestaurants

Je zou moeten streven naar echte waarde of extra informatie produceren met een carrousel. Dit kan informatie zijn die de bezoeker niet eerder had, of het kan leiden tot pagina's die de bezoeker anders misschien niet heeft gevonden.

Probeer auto-roterende carrousels te vermijden, en gebruik ze alleen op de belangrijkste bestemmingspagina's (waarbij de startpagina een voorbeeld is). Zolang de carrousel heeft een doel, en lijkt niet op een advertentie, je ontwerp zou het goed moeten doen.

Als u op zoek bent naar meer informatie over webcarrousels, bekijk dan een aantal van de volgende berichten:

• Carrousels van Brad Frost
• 8 UX-vereisten voor het ontwerpen van een gebruiksvriendelijke homepagescarrousel
• Carousel Usability: een effectieve gebruikersinterface ontwerpen voor websites met contentoverbelasting