Bildkaruseller i webbdesign - Fördelar och bästa praxis

Det finns ingen brist på karusellen har bildspel på webben. Faktum är att denna trend inte har gjort någonting annat än växa under de senaste 5-10 åren med mer webbläsarsupport nu än någonsin tidigare. Men är bildcaruseller verkligen värda insatsen? Vilka typer av fördelar producerar de, och hur ska de användas produktivt i en layout?

Jag skulle vilja dela några vanliga trender, levande exempel och idéer för webbdesigners intresserade av bildkaruseller. Dessa dynamiska reglage diskuteras kraftigt, men jag tror att de mervärde när de skapas i rätt sammanhang.

Produktkaruseller för e-handel

E-handelens värld är full av roterande karuseller på hemsidor och produktsidor. Målet är att bibehålla en tydlig informationstäthet med foton och text som berätta en unik men ändå värdefull historia att hjälpa till att sälja produkter.

Det finns två primära placeringar för en e-handelsproduktreglage:

1. På en butiks hemsida
2. På en produktsida

De båda arbetar annorlunda men tjäna samma mål - att sälja produkter på ett visuellt sätt.

Exempel 1: Au Ljust Fina Linens - Hemsida

Ta en titt på hemsidan för Au Lit Fine Linens, det använder en auto-roterande karusell med fullskärm att visa upp olika produkter, såsom täcken, kuddar och sängklädnader.

Bilderna ta upp hela bredden på hemsidan, och de ser bra ut över veckan. Faktum är att den här reglaget bör vara den allra första att fånga uppmärksamheten när du landar på sidan först. Varje bild leder till en annan sida på webbplatsen till guida kunder genom shoppingupplevelsen.

Denna skjutreglage kan vara lite irriterande när du landar på sidan, men med knapplänk och överlagringstext Det kan också vara mycket uppmuntrande för besökare som bara vill dyka in och handla.

Exempel 2: Eden telefonväska - produktsida

Du kan se ett mer specifikt exempel på produktsidan för Eden-telefonväska. Det använder en automatisk roterande reglaget för att visa upp bilder av produkten.

Jag tycker att dessa är små “för mycket” i e-handelens värld. När jag tittar på en produkt vill jag vara i kontroll över växling mellan bilder.

Ju bättre val är att göra ett galleri med bilder med kontroll som ges till besökaren. Till exempel använder Design by Humans sidan miniatyrbilder för varje foto vilket är mycket mer uppmuntrande och ger ökad kontroll över användaren.

Webbportfölj karuseller

Onlinewebbplatsportföljer är lite annorlunda eftersom dessa glider klicka inte alltid igenom till en annan sida. Det är sant att vissa kommer att leda till en fallstudie eller skriva om ett projekt, men många karuseller på portföljwebbplatser är bara avsedda att visa visuellt arbete.

Exempel 1: Biboun - hemsida

Den franska konstnären som arbetar under namnet Biboun har en karusellskytten på hemsidan med snippets av konstverk. De enskilda bilderna leder till interna sidor i portföljen som täcka ett helt projekt med flera bilder.

Detta är förmodligen det bästa sättet att göra en skjutreglage på en portföljwebbplats. Att bara visa en slumpmässig lista över arbetet är meningslöst om inte dessa specifika verk har anledning att visas.

Alla bitarna är utsökt i Bibouns reglage, och det tar inte upp mycket utrymme antingen. Även om jag vet att vissa människor hatar de automatiskt roterande bildspelen med god anledning, har jag på så minimalistisk plan en svår tid att klaga på denna designfunktion.

Exempel 2: Aaron Blaises hemsida - hemsida

Jag gillar verkligen det exempel som finns på Aaron Blaises hemsida för att han visar sitt arbete som en portfölj, men brukar använda den här webbplatsen till sälja hans konstvideor. Aaron Blaise arbetade på Disney i några decennier, och han har färdigheter att bevisa det.

Medan startsidan på sin webbplats automatiskt roterar, tycker jag inte att det är oerhört irriterande eller ostört. Varje bild har lite innehåll som är relevant för bilden, och det hjälper Aaron uppmärksamma hans senaste video lektioner som lär unga artister hur man behärskar specifika färdigheter.

En stor portföljkarusell fokuserar på bilder, och leder besökare vidare in på webbplatsen. Om du kan få dessa två saker så skulle jag inte vara emot en sådan funktion på en personlig portföljwebbplats.

Vanliga designtrender

Om du tittar på några av ovanstående exempel kommer du märka att det finns vanligtvis två olika typer av reglage: fullskärm och fast bredd.

Dessa stilistiska val ofta relatera till layouten och hur mycket innehåll det kan hålla. Om en layout sträcker sig över hela sidans bredd så är det meningsfullt att även utöka reglaget. Men det här tvingar dig också hitta högkvalitativa bilder Det ser fortfarande bra ut på helskärmen på skärmar med stor upplösning.

Jag föredrar personligen den fasta breddstilen som du ser i de två exemplen på konstportföljen. Dessa är mycket lättare att kontrollera, och de är ofta inte så lång - vilket gör det lättare för besökare att helt enkelt ignorera dem om de önskar.

Också överväga värdet av bildrutor med automatisk framkallning, och hur svårt det kan vara för användare att fånga detta innehåll. Det finns en bra fallstudie av Nielsen Norman Group som visar att det är bättre att inte ha automatisk framskjutande reglage.

Jag är ombord med detta tillvägagångssätt i den meningen att det är mindre intensiv på minnet med mindre animeringar och rörelse i webbläsaren, och de flesta tycker inte om automatisk roterande karuseller - och du borde alltid tillgodose din publik.

Men jag kan inte säga att det aldrig är värt att lägga till en automatisk framskjutande reglage, speciellt eftersom med statisk glider du får inte så många åsikter, och du behöver också gör din första bildruta den viktigaste så många användare går inte vidare till nästa bild. Att bestämma om man vill göra en skjutreglage automatiskt roterande eller inte är tyvärr en område med prov-och-fel.

Vad som ska undvikas till varje pris

Här är en viktig sak som jag personligen tror faller under “undvika för varje pris”. Titta på eller klicka på skärmdumpen nedan och försök gissa vad det kan vara.

Yozenns kaféwebbplats använder en helskärmshoppare. Det roterar inte automatiskt vilket är bra, men glidningarna också tjäna ingen annan form än dekoration.

Bilderna länka inte någonstans, och de visar upp en liten handfull produkt. De kunde bara vara läggas till på hemsidan bakgrunden utan skjutreglaget för att spara förvirring och extra kilobytes av JavaScript.

Jag skulle argumentera att den här bakgrundsskyddsfunktionen inte lägger till mycket värde på en redan trångt hemsida. Om bilderna hade länkar eller åtföljande text skulle de åtminstone vara mer relevanta.

Använd gärna bilder i huvudrubriken som tar upp hela sidan, men om de länka inte någonstans eller ge någon genuin information vänd sedan inte dem till en karusell.

Interaktiva funktioner

Hur användarna navigerar på en karusell påverkar själva konstruktionen. Det är en olika navigationsstilar, men dessa är de mest populära:

• Dotbaserad navigering
• Pilnavigering
• Miniatyrnavigering
• Lista länkar eller rubrikobjekt

Det vanligaste är dotnavigering som du hittar på hundratals moderna webbplatser.

Exempel 1: Chic hemma - hemsida

Chic at Home är ett bra exempel med tre små prickar under skjutreglaget att beteckna navigering. Varje bild roterar automatiskt och den relaterade punkten i serien blir fylld med svart. De andra två tomma prickarna beteckna potentiella bilder för användare att bläddra.

Det här är en populärt designmönster som många användare redan känner igen. Det faller i samma kategori som hamburgermenyn som många designers inte gillar, men Användare känner igen det redan, och instinktivt vet hur man använder den.

Exempel 2: Rena cykler - hemsida

Hemsidan för rena cykler använder a kombination av punkt- och pilnavigering. På så sätt kan användarna ha fram och tillbaka navigering, men se även “övergripande” navigering genom punktlänkar i botten.

Jag hittar faktiskt punktlänkarna i det här exemplet tufft att se. Svårigheten med visuella bilder är att många element inte är lätta att skilja, så pilar och prickar kan smälter lätt in i bakgrunden.

Exempel 3: IGN - hemsida

På IGN: s hemsida hittar du en annan automatisk roterande karusell som använder titel länkar för navigeringen. Detta är mycket vanligt för utgivare som vill sälja rubriker snarare än produkter. Varje länk går till den enskilda bilden som så småningom leder till artikelns sida.

Dessa länkar kan ersättas med miniatyrbilder, eller till och med inkludera miniatyrbilder från varje historia - dock Visuell aspekt visas i karusellen, så utesluter miniatyrbilden faktiskt utrymme.

Olika webbplatser använder olika navigationsstilar av olika skäl. Tänk på dina besökares mål (er), och design för bästa användarupplevelse.

Viktiga takeaways

Du borde sikta på producera äkta värde eller extra information med en karusell. Det kan vara information som besökaren inte hade förut, eller det kan leda till sidor som besökaren kanske inte har hittat på annat sätt.

Försök att undvika auto-roterande karuseller, och Använd bara dem på stora målsidor (hemsidan är ett exempel). Så länge karusellen har en avsikt, och Ser inte ut som en annons, Din design ska fungera bra.

Om du letar efter mer information om webkaruseller, kolla in några av följande inlägg:

• Karuseller av Brad Frost
• 8 UX-krav för utformning av en användarvänlig hemsida karusell
• Karusell användbarhet: Designa ett effektivt gränssnitt för webbplatser med överbelastning av innehåll