Grupp 6 – Campus

Vad är det?

En carousel är bilder som ska vara unika till utseende och lätta att känna igen. Dessa bilder visas i ett horisontellt ark eller strip som användaren kan scrolla eller svepa igenom. Bilden i mitten kan göras större om det känns lämpligt.

När används det?

En carousel används när varje artikel kan vara av intresse för användaren och att och när denne inte söker efter något specifikt utan bläddrar igenom utbudet utan någon större brådska (alltså finns inget behov av att göra det lättöverskådligt). Bilderna har liknande form och stil samt visas i form av logotyper, beskurna foton, skärmklipp osv. Tillsammans med bilderna så kan det finnas lite extra information i form av namn och datum, men bilderna ska utgöra den större delen av varje ruta och det ska inte förekomma kategorier eller behållare någonstans i bilden. Bilderna ordnas ofta antingen i kronologisk ordning eller att man lägger bilderna som kan vara av störst intresse först.

En carousel kan användas istället för en thumbnail grid om det finns ont om utrymme vertikalt, detta eftersom att en carousel kan göras väldigt kompakt om så behövs (bilderna ligger tätt inpå varandra). En annan anledning till att använda carousel kan vara när det inte är möjligt att visa alla artiklar på en gång. Kan med fördel användas när man har väldigt visuella bilder som tex omslag till album eller filmposters (netflix).

Hur används det?

• Använd inte gärna fler än fem bildrutor per carousel eftersom användare lätt kan bli uttråkade om de behöver scrolla för länge. Det gör det även lättare att komma ihåg vilket utbud som fanns i denna så att de vid ett senare tillfälle kunna hitta tillbaka.
• Extra information som visas på varje enskild bild ska vara liten till mängd och storlek för att bilden ska vara märkbar och central.
• Indikera hur många bilder det finns i din carousel och med fördel vart de befinner sig just nu. Användarna känner mer kontroll över situationen om de enkelt kan orientera sig.
• Använd ikoner eller bilder som är tydliga och lätta att förstå.
• Användare scrollar upp och ner på en sida och har inte “tid” att läsa för mycket information i en carousel. Se därför till att inte ha för mycket information i varje sekvens.
• När användaren har kommit till sista bilden så är det viktigt att det inte tar stopp där utan den börjar om från början igen.
• Se till att ge användaren kontroll över din carousel så att hen kan växla mellan bilderna på egen hand.
• Om du skapar en automatisk carousel så är det viktigt att tänka på att anpassa sekvensen så att den inte sker för fort. Man ska också vara försiktig så att användare inte misstar den för reklam och därför bortser från den. Och än en gång, användare tycker om att kontrollera vad som händer, en automatisk carousel kan ta bort denna känsla. 
• Använder inte en automatisk carousel på mobila enheter eftersom att den saktar ner sidan och användare är snabba på att scrolla så de missar troligtvis mycket av innehållet.
• Om du använder carousel på mobila enheter så är det bra att kunna svepa bilderna istället för att försöka trycka på pilar eller andra knappar.
• Om implementeringen av en carousel inte kan stödjas av en bra anledning till vilken nytta den tillför användarna, så är det med största sannolikhet bättre att inte ha med en sådan.

Eget exempel

https://f0zumr.axshare.com

Adaptive, X/XS är för mobil
Base är för Desktop

Bra exempel

Footlocker

På startsidan av Footlocker, som säljer skor och kläder, använder sig dom utav en carousel som användaren kan klicka på pilarna för att bläddra i den. Man ser också under bilderna vart man är i carouselen, så man smidigt ser vart man ska gå tillbaka om man ser någonting lockande. Detta är även en automatisk carousel som vi pratade om lite innan, alltså att den byter sida utan att användaren gör någonting. Håller man dock muspekaren på bilden så kommer den inte byta bild, vilket gör att användaren fortfarande har kontroll över vad som sker. Skulle den byta för snabbt, vilket den inte gör, så kan det vara risk för att användaren inte hinner läsa vad som står och detta blir ett störningsmoment i interaktionen.

Elgiganten

Inne på teknikjätten Elgigantens webbplats så använder sig utav en carousel när användaren har klickat sig in på en kategori i den globala navigeringen. Detta exemplet är taget från deras hem och hushålls kategori, här fanns det flera stycken carousels med olika typer av produkter. Användaren ser fyra stycken tillgängliga artiklar till salu i varje carousel och kan navigera sig genom att använda sig av pilarna som finns på sidorna. Det står inte så mycket information om artiklarna på denna sidan vilket är bra. Håller användaren muspekaren över en artikel så dyker det upp lite mer information och även lite andra funktioner som till exempel jämföra med andra produkter. Det är även bra att när man har kollat igenom alla produkter så kommer användaren tillbaka till de ursprungliga produkterna. Eftersom alla produkter inte visas i denna listan så har användaren möjlighet att klicka på “Visa alla” uppe till höger, för att kunna se samtliga produkter inom denna underkategori.

Dåliga exempel

Google

När man gör en sökning på google så dyker det ibland upp videos som användaren kan kolla på, dessa såklart ofta från YouTube. Dessa videos presenteras i en ganska simpel carousel som presenterar tre videos på varje sida, detta gör att google utnyttjar gränssnittet vertikalt istället för bara horisontellt. Det är markerat med en pil till höger så man snabbt förstår att det finns fler videos att bläddra mellan. 

Varför detta är ett dåligt exempel är för att det finns ingen slide eller markering vart användaren är i navigeringen. Det är heller inte bra att när användaren har kollat igenom alla videos som finns i denna carousel så tar den slut, och för att ta sig tillbaka till de första presenterade videos så måste man klicka sig tillbaka.

Netflix smart-tv

Det som är dåligt med netflix smart-tv app är att texten på Ikonen flyttas ut från bilden när den är i fokus vilket vi uppfattar som störande, detta eftersom att det inte är något man förväntar sig att den ska göra. De har delat upp texten i en egen ruta (behållare). Texten på den fokuserade filmens namn har ibland samma utseende som den på postern och ibland så har de någon basic font från netflix vilket gör att det känns ofärdigt (som att det fortfarande är en beta version). Man ser inte vart man befinner sig i flödet eller hur många bilder det är. Onödigt stor fokuserad bild, i detta läge hade det varit bättre att kunna se fler tidigare och nästkommande bilder.

Grupp 3 – Campus

Exempel på bra tillämpning – CMore

Cmore är en streamingtjänst som erbjuder film, serier och live-sändningar av tv-kanaler och event. För att navigera sig igenom utbudet på sidan används i huvudsak Carousel-navigering. Den typ av Carousel som används följer många av de kriterier som bör fyllas enligt Tidwell (2011). I huvudsak fokuserar innhellået på bilder och den presenteras horisontellt med minimal exponering av metadata genom att visa endast titel. När muspekaren förs över ett objekt presenteras ytterligare metadata, dock fortfarande väldigt sparsamt. I Carousel-navigeringen visas fyra objekt som med pilarna, som tydligt synds i ändarna åt häger och vänster, presenterar fyra nya objekt. Maxantalet objekt som bör presenteras är 10 stycken i en Carousel-navigering vilket innebär att Cmore’s navigering har god marginal i det avseendet.

Exmpel på dålig tillämpning – Pricerunner

En mindre bra tillämpning av Carousel-navigering kan hittas på Pricerunner.se. Här presenteras för mycket metadata och bilden får ta mindre plats. Pilarna för att navigera åt sidornana är små och så när objekten att de är svår att detektera. Alla produktbilder har olika storlek vilket är något som anses negativt i en Carousel-navigering. När muspekaren förs över ett objekt omringas detta av en skör linje vilken ger en mycket svag indikation på att muspekaren svävar över detta. En större tydlighet hade möjligen nåtts om objektets storlek hade ökat när muspekaren svävar över detta.

Grupp 4 – Campus

Carousel är vanligt att använda på streamingtjänster där det vill visa det filmer och serier dem erbjuder. Eftersom det är så pass många kan dem inte visa alla samtidigt utan man får bläddra med knappen till höger för att se ytterligare filmer och serier dem har.

Bra Exempel: Netflix (Netflix applikation)

Netflix har delat in sina filmer/serier i kategorier som sedan ligger i en carousel funktion. Dem har gjort detta bra då det är tydliga med att det finns mer filmer/serier än vad som visas. Detta göra att användaren inte blir överväldigad av det stora utbudet av filmer/serier som Netflix erbjuder. Det är även en enkel bläddringsfunktion både på mobil, dator och apple-tv.

Dåligt Exempel: UI-Patterns (ui-patterns.com)

Carousel ska främst användas när det handlar om filmposters och albumomslag då det helst ska visas i ett visuellt perspektiv. Men i detta fallet har det används i det syfte att via carousel funktionen ska man bläddra igenom sidor och inte det utbudet dem erbjuder. Det gör den dålig då det är lätt att missa att pilarna finns på varsin sida samt att den endast visar en sida i taget vilket då gör att användaren måste bläddra igenom alla för att komma till en specifik sida.

Grupp 5 – Campus

Bra exempel (grupp 5): Viaplay.se
Det här är en bra carousel eftersom bilderna är i samma storlek, vilket ger ett sammanhang. Antalet synliga bilder bör heller inte överstiga 10 i en carousel, vilket den här inte gör. Den har även tydliga pilar som då även uppmanar användaren att bläddra vidare. Pilar vid sidorna är bra för att indikera att det går att scrolla i listan.

Dåligt exempel (grupp 5):  https://www.zara.com/se/en/

Det här är ett dåligt exempel för att man själv inte kan varken stoppa eller byta bilder, och finns inte några pilar eller liknade. Det är även negativt att den tar upp hela sidan och blir därmed även ett störningsmoment när den om och om igen “blinkar” till när den byter bild. Hastigheten kan också vara problematisk eftersom bilderna rör sig rätt snabbt så kommer användarna inte hinna uppfatta dom i tid, och speciellt inte den text som finns på bilderna.

Grupp 4 – Distans

Bra exempel (grupp 4): På hemsidan på bustle.com använder man sig av en karusell för att presentera nya artiklar. De gör det enkelt för användaren att upptäcka ytterligare innehåll i karusellen genom att ge hen två signalement: till höger har vi en pil som är stor och har tydlig kontrast p.g.a. den vita bakgrunden; vi också en artikel som har skurits av, vilket gör det tydligt att innehållet fortsätter vidare.
I detta fall har karusellen mycket innehåll och det krävs cirka 5 klick för att gå igenom allt. När användaren väl har börjat bläddra finns det därför en risk att hen tappar bort sig – detta hade man kunnat undvika genom att indikera dennes position med punkter eller en annan typ av progress bar.

Dåligt exempel (grupp 4): I det här exemplet, från therange.com,  använder företaget karuseller för att promota diverse produktkategorier. De använder sig endast av punkter för att signalera att innehållet går att scrolla; punkter är generellt svaga signalement (källa: https://www.nngroup.com/articles/mobile-carousels/) och eftersom de i detta fallet även är små finns det stor risk för att användaren inte ser dem och missar resterande element. På en mobil kanske detta inte är ett större problem, då användare är vana vid horisontell scrolling – men på desktop hade man enkelt kunnat använda sig av pilar för att ytterligare signalera denna funktion.

Grupp 2 – Campus

Bra exempel: Viafree.se

Denna carousel ger en bra överblick så man ser vart man befinner sig och hur mycket mer innehåll som finns att bläddra igenom. Pilarna är tydliga. När innehållet är slut försvinner pilen på den sidan som inte längre går att bläddra till. Då är det dock enkelt att antingen förflytta sig tillbaka med den andra pilen eller dra i scroll baren nedanför för att snabbt förflytta sig.

Dåligt exempel: Nelly.com

Pilarna är inte så lätta att se eftersom att det oftast är vit bakgrund på bilderna så de smälter in då de ligger ovanpå bilderna och inte bredvid. Man får heller ingen uppfattning om vart man är, hur mycket mer som finns att bläddra igenom eller om man börjat om från början igen.

Grupp 1

Espresso house har ett bra exempel på en karusell eller slider. Den har pilar till höger och vänster som visar att jag som användare kan bestämma själv i vilken takt jag vill att den går. Den har prickar nere som visar hur många bilder och på vilken jag är i karusellen. Den har inte för många bilder utan lagom med ter stycken.

På Stadiums hemsida hittade vi ett exempel vi inte tyckte var lika bra. De har en sektion på sin hemsida som är “Utvalda varumärken” där Stadium visar upp de varumärken de säljer. Det som vi inte tyckte om med denna var att det finns ingen indikation som visar hur lång karusellen var, och när man närmar sig slutet så ser det ut som karusellen ska tömmas helt och att alla ikoner bara försvinner, sedan så hoppar den tillbaka till början när man klickat bort sista ikonen. Detta kunde skötts på ett mycket snyggare sätt, det hade varit mycket mer lättförstått om karusellen hade loopat och första ikonen kom tillbaka direkt efter sista, och det hade också varit bra om det hade funnits någon typ av indikation så man visste vart i karusellen man var och hur långt det var kvar till slutet.

Källor och länktips

Lin, H. (2019) The Usability of Carousel Design – UX Planet. Available at: https://uxplanet.org/the-usability-of-carousel-design-4e3930a10b29 (Accessed: 2 December 2019).

Tidwell, J (2011). Designing interfaces. 2 uppl. Farnham: O´Reilly

Pernice, K. (2013) Carousel Usability: Designing an Effective UI for Websites with Content Overload. Available at: https://www.nngroup.com/articles/designing-effective-carousels/ (Accessed: 2 December 2019).

Williams, J. M. (2016) Carousel/slider design best practices | Webflow Blog. Available at: https://webflow.com/blog/carousel-slider-design-best-practices (Accessed: 2 December 2019).