Billedkaroereller i webdesign - fordele og bedste praksis

Der er ingen mangel på karrusel har slideshows på nettet. Faktisk har denne tendens ikke gjort andet end vokse i de sidste 5-10 år med mere browser support nu end nogensinde før. Men er billedkarusseller virkelig værd at gøre? Hvilke slags ydelser producerer de, og hvordan skal de bruges produktivt i et layout?

Jeg vil gerne dele nogle fælles tendenser, levende eksempler og ideer til webdesignere interesseret i billedkarusser. Disse dynamiske skydere er stærkt debatterede, men jeg tror, ​​at de giver værdi, når de udformes i den rigtige sammenhæng.

Produktkaruseller til e-handel

E-handelens verden er fuld af roterende karruseller på hjemmesider og produktsider. Målet er at opretholde en klar informationstæthed med billeder og tekst som fortælle en unik, men værdifuld historie at hjælpe med at sælge produkter.

Der er to primære placeringer for en e-handels produkt skyder:

1. På en butiks hjemmeside
2. På en produktside

De arbejder begge anderledes end tjene det samme mål - at sælge produkter på en visuel måde.

Eksempel 1: Au Lit Fine Linens - Hjemmeside

Se på hjemmesiden for Au Lit Fine Linens, det bruger en fuldskærm automatisk roterende karrusel at vise frem forskellige produkter, såsom dyner, puder og sengetæpper.

Billederne tag hele bredden op af hjemmesiden, og de vises godt over folden. Faktisk bør denne skyder være den allerførste ting at fange din opmærksomhed, når du lander først på siden. Hvert dias fører til en anden side på webstedet til guide kunderne gennem shopping oplevelsen.

Denne skyder kan være en smule skræmmende, når du lander først på siden, men med knap link og overlejringstekst Det kan også være meget opmuntrende for besøgende, der bare vil dykke ind og handle.

Eksempel 2: Eden telefon sag - produkt side

Du kan se et mere specifikt eksempel på Eden-telefonens produktside. Det bruger en automatisk roterende skyderen at vise billeder af produktet.

Jeg finder disse til at være lidt “for meget” i e-handelens verden. Når jeg kigger på et produkt, vil jeg være i styring af skift mellem billeder.

Det bedre valg er at lave et galleri af billeder med kontrol givet til den besøgende. For eksempel bruger Design by Humans-siden miniaturer for hvert billede hvilket er meget mere opmuntrende, og giver mere kontrol til brugeren.

Webportefølje karruseller

Online website porteføljer er lidt forskellige, fordi disse slides Klik ikke altid på en anden side. Det er rigtigt, at nogle vil føre til en casestudie eller skrive om et projekt, men mange karruseller på porteføljesider er kun ment at vise visuelt arbejde.

Eksempel 1: Biboun - startside

Den franske kunstner, der arbejder under navnet Biboun, har en karrusel skyderen på hjemmesiden med uddrag af kunstværker. De enkelte dias fører til interne sider i porteføljen som dække et helt projekt med flere fotos.

Dette er nok den bedste måde at lave en skyder på på en porteføljes hjemmeside. Bare at fremvise en tilfældig liste over arbejde er meningsløst, medmindre disse specifikke værker har en grund til at blive fremvist.

Alle stykkerne er udsøgt i Bibouns skyder, og det tager ikke meget plads enten. Selvom jeg ved, at nogle mennesker hader de automatiske slideshows med god grund, har jeg på et så minimalistisk layout en vanskelig tid at klage over denne designfunktion.

Eksempel 2: Aaron Blaises hjemmeside - hjemmesiden

Jeg kan godt lide eksemplet på Aaron Blaises hjemmeside, fordi han viser sit arbejde som en portefølje, men bruger hovedsagelig denne hjemmeside til sælge hans kunstvideoer. Aaron Blaise arbejdede på Disney i et par årtier, og han har færdigheder til at bevise det.

Mens glideren på hjemmesiden automatisk roterer, finder jeg det ikke så irriterende eller ude af sted. Hvert dias har en smule indhold relevant for billedet, og det hjælper Aaron gøre opmærksom på hans seneste video lektioner der lærer unge kunstnere hvordan man behersker specifikke færdigheder.

En stor portefølje karrusel fokuserer på billeder, og fører besøgende videre ind på hjemmesiden. Hvis du kan få disse to ting, så ville jeg ikke være imod en funktion som denne på en personlig porteføljes hjemmeside.

Fælles designtendenser

Hvis du ser på nogle af mine ovenstående eksempler, vil du bemærke, at der generelt er to forskellige typer skydere: Fuld skærm og fast bredde.

Disse stilistiske valg ofte vedrører layoutet og til hvor meget indhold det kan holde. Hvis et layout spænder over den fulde bredde af siden, er det også fornuftigt at udvide skyderen også. Men det tvinger dig også til find billeder af høj kvalitet Det ser stadig godt ud på fuld skærm på monitorer med stor opløsning.

Jeg foretrækker personligt den faste bredde stil som du vil se i de to kunstportefølje eksempler. Disse er meget nemmere at kontrollere, og de er ofte ikke så høj - hvilket gør det lettere for besøgende at simpelthen ignorere dem hvis de ønsker det.

Overvej også værdien af ​​automatisk fremrykning dias, og hvor svært det kan være for brugere at fange dette indhold. Der er en stor case study af Nielsen Norman Group, der viser, at det er bedre ikke at have automatiske skydere.

Jeg er ombord med denne tilgang i den forstand, at det er mindre intensive på hukommelsen med mindre animationer og bevægelse i browseren, og de fleste mennesker kan heller ikke lide automatisk roterende karruseller enten - og du skal altid imødekomme dit publikum.

Men jeg kan ikke sige, at det aldrig er værd at tilføje en automatisk fremadskridende skyder, især da statisk skyder dig Få ikke så mange visninger, og du skal også gøre dit første lysbilde det vigtigste så mange brugere vil ikke gå videre til næste dias. Det er desværre en beslutning om at beslutte, om man skal gøre en skyder automatisk roterende eller ej område med prøve-og-fejl.

Hvad skal man undgå for enhver pris

Her er en vigtig ting, som jeg personligt tror falder under “undgå for enhver pris”. Se på eller klik på skærmbilledet nedenfor, og prøv at gætte hvad det kan være.

Yozenn cafe hjemmeside bruger en fuldskærms header skyder. Det roterer ikke automatisk, hvilket er godt, men gliderne også tjener intet andet formål end dekoration.

Billederne Forbind ikke nogen steder, og de viser en lille håndfuld produkter. De kunne alle bare være tilføjet til startsiden baggrunden uden skyderen for at gemme forvirring og ekstra kilobytes af JavaScript.

Jeg vil argumentere for, at denne baggrunds glidende funktion ikke tilføjer megen værdi til et allerede trangt websted. Hvis billederne havde links eller tilhørende tekst, ville de i det mindste være mere relevante.

Du er velkommen til at bruge billeder i dit overskriftsafsnit, der optager hele siden, men hvis de Du må ikke forbinde nogen steder eller tilbyde ægte information Derefter skal du ikke omdanne dem til en karrusel.

Interaktive funktioner

Den måde brugerne navigerer på på en karrusel påvirker selve designet. Der er en forskellige navigationsstile, men disse er de mest populære:

• Dot-baseret navigation
• Pil navigation
• Miniaturenavigation
• Liste links eller overskrift

Det mest almindelige er dot navigation som du finder på hundredvis af moderne hjemmesider.

Eksempel 1: Elegant derhjemme - startside

Chic at Home er et godt eksempel ved at bruge tre små prikker under skyderen at betegne navigation. Hvert billede roterer automatisk, og den relaterede prik i serien bliver fyldt med sort. De to andre tomme prikker betegner potentielle dias for brugere at gennemse.

Dette er en populært designmønster som mange brugere allerede anerkender. Det falder ind i samme kategori som hamburgermenuen, som mange designere ikke kan lide, men brugerne genkender det allerede, og instinktivt ved, hvordan man bruger det.

Eksempel 2: Rene cykler - startside

Hjemmesiden for rene cykler bruger a kombination af punkt og pil navigation. På denne måde har brugerne frem og tilbage navigation, men se også “samlet set” navigation gennem prikforbindelser i bunden.

Jeg finder faktisk punkterne i dette eksempel svært at se. Problemet med visuelle slides er, at mange elementer ikke er lette at skelne, så pilene og prikkene kan blandes let ind i baggrunden.

Eksempel 3: IGN - startside

På IGN's hjemmeside finder du en anden automatisk roterende karrusel der bruger titel links til navigationen. Dette er meget almindeligt for udgivere, der vil Sælg overskrifter snarere end produkter. Hvert link går til den enkelte dias, som i sidste ende fører til artikelsiden.

Disse links kan erstattes med miniaturebilleder, eller endda inkludere miniaturebilleder fra hver historie - dog visuelt aspekt er vist i karrusellen, så udeladelse af miniaturebilledet sparer faktisk plads.

Forskellige websteder bruger forskellige navigeringsstile af forskellige årsager. Overvej målene for dine besøgende, og design for den bedste brugeroplevelse.

Nøgleaftagelser

Du skal sigte mod producere ægte værdi eller ekstra information med en karrusel. Det kan være information, som den besøgende ikke havde før, eller det kan føre til sider, som den besøgende måske ikke har fundet ellers.

Prøv at undgå automatisk roterende karruseller, og brug dem kun på større destinationssider (hjemmesiden er et eksempel). Så længe karrusellen har en hensigt, og ligner ikke en annonce, dit design skal gøre det godt.

Hvis du leder efter mere information om webkarruseller, skal du tjekke nogle af følgende indlæg:

• Karruseller af Brad Frost
• 8 UX Krav til udformning af en brugervenlig Hjemmeside karrusel
• Carousel Brugbarhed: Design et effektivt brugergrænseflade til websteder med indhold overbelastning