Image Karusellid veebidisainis - eelised ja parimad tavad

Puudub karussellide slaidiseansid veebis. Tegelikult pole see suundumus teinud midagi muud kasvanud viimase 5-10 aasta jooksul rohkem brauseri tuge kui kunagi varem. Aga kas pildikarussellid tõesti vaeva näevad? Milliseid eeliseid nad toodavad ja kuidas neid tuleks tulemuslikult kasutada?

Sooviksin jagada mõningaid ühised suundumused, elavad näited ja ideed piltide karussellidest huvitatud veebidisainerid. Neid dünaamilisi liugureid arutatakse tugevalt, kuid arvan, et nad lisavad väärtust õiges kontekstis.

Toote karussellid e-kaubanduseks

E-kaubanduse maailm on kodulehtedel ja toote lehtedel täis pöörlevaid karusselle. Eesmärk on säilitada selge teabe tihedus fotode ja tekstiga ütle unikaalne, kuid väärtuslik lugu toodete müümiseks.

Seal on kaks peamist paigutust e-kaubanduse toote liuguri jaoks:

1. Kaupluse kodulehel
2. Toote lehel

Nad mõlemad töötavad erinevalt, kuid teenida sama eesmärki - müüa tooteid visuaalselt.

Näide 1: Au Lit Fine Linens - kodulehekülg

Vaadake Au Lit Fine Linens'i kodulehekülge kasutab täisekraani automaatse pöörleva karusselliga näidata erinevaid tooteid, nagu tekid, padjad ja voodikatted.

Pildid võtke kogu laius koduleheküljelt ja neid tundub klapi kohal. Tegelikult peaks see liugur olema esimene asi, mis peaks teie lehele esimesel maandumisel tähelepanu pöörama. Iga slaid viib saidi teisele lehele juhendab kliente ostukogemuse kaudu.

See liugur võib olla lehel esmakordsel maandumisel siis hirmutav nupu link ja ülekatte tekst see võib olla ka väga julgustav külastajatele, kes tahavad lihtsalt sukelduda ja poes sisse osta.

Näide 2: Eden telefonikott - toote leht

Näete spetsiifilisemat näidet Eden telefonikaardi toote lehel. See kasutab automaatne pöörlev liugur toote kujutiste väljalülitamiseks.

Ma leian, et need on vähe “liiga palju” e-kaubanduse maailmas. Vaadates toodet, mida ma tahan olla piltide vahetamise juhtimisel.

Parem valik on teha piltide galerii külastajale antud kontrolliga. Näiteks kasutab lehekülje Design by Human iga foto pisipildid mis on palju julgustavam ja annab kasutajale rohkem kontrolli.

Veebiportaali karussellid

Veebilehtede portfellid on nende slaidide poolest veidi erinevad ei klõpsa alati teisele lehele. On tõsi, et mõned viivad juhtumiuuringusse või kirjutavad projekti kohta üles, kuid paljud portfelli veebisaitidel olevad karussellid on mõeldud vaid nägema visuaalset tööd.

Näide 1: Biboun - kodulehekülg

Bibouni nime all töötaval prantsuse kunstnikul on a karusselli liugur avalehel featuring kärjetööd kunsti. Üksikud slaidid viivad portfelli sisemistele lehtedele katta kogu projekti mitme pildiga.

See on ilmselt parim viis liugurit teha portfelli veebisaidil. Just juhusliku tööde nimekirja esitamine on mõttetu, välja arvatud juhul, kui neil konkreetsetel töödel on põhjust näidata.

Kõik tükid on peen Bibouni liuguril ja seda ei võta palju ruumi ka. Kuigi ma tean, et mõned inimesed vihkavad automaatse pöörlemise slaidiesitlusi mõjuval põhjusel, on mul niisuguse minimalistliku kujunduse korral keeruline aeg selle disainifunktsiooni vastu.

Näide 2: Aaron Blaise veebileht - kodulehekülg

Mulle meeldib tõesti Aaron Blaise veebisaidil leitud näide, sest ta tutvustab oma tööd portfellina, kuid enamasti kasutab seda veebisaiti müüa oma kunstivideoid. Aaron Blaise töötas Disney's paar aastakümmet ja ta on seda oskanud.

Kuigi kodulehe liugur oma saidil ei pöörle automaatselt, ei leia ma seda uskumatult tüütu või kohatu. Iga slaid sellel on pildiga seotud sisu, ja see aitab Aaronil juhtida tähelepanu oma viimastele videotundidele et õpetada noori kunstnikke, kuidas omandada konkreetseid oskusi.

Suur portfelli karussell keskendub visuaalidele, ja viib külastajaid edasi veebisaidile. Kui sa saad need kaks asja, siis ma ei oleks sellise funktsiooni vastu isikliku portfelli veebilehel.

Ühised disainisuunad

Kui vaatate mõnda minu ülaltoodud näidet, märkate, et tavaliselt on kaks erinevat liugurit: Täisekraan ja fikseeritud laiusega.

Need stilistilised valikud on sageli seotud paigutusega ja kui palju sisu ta saab hoida. Kui paigutus katab kogu lehekülje laiuse, siis on mõttekas ka liugurit laiendada. Kuid see sunnib teid ka leida kvaliteetseid pilte mis vaatavad suurel eraldusvõimelistel monitoridel endiselt täisekraanil.

Mina isiklikult eelistan fikseeritud laiusega stiili, mida näete kahe kunstiportfelli näites. Need on palju lihtsam kontrollida, ja nad on sageli ei ole nii pikk - külastajate jaoks lihtsam lihtsalt neid ignoreerida kui nad soovivad.

Kaaluge ka automaatse edasiliikumise slaidide väärtust ja kui raske see on kasutajatele selle sisu püüdmiseks. Nielsen Normani grupi juhtumiuuring näitab, et see on parem ei ole automaatseid edasi-tagasi liugureid.

Ma olen selle lähenemisviisiga pardal selles mõttes, et see on vähem intensiivne mälu vähem animatsioone ja liikumist brauseris ning enamik inimesi ei meeldi automaatse pöörleva karusselliga - ja sa peaksid alati olema rahuldada oma publikut.

Kuid ma ei saa öelda, et see ei ole kunagi väärt automaatse edasiliikumise liugurit lisamine, eriti kuna te kasutate staatilisi liugureid ei saa nii palju vaateid, ja sa pead ka muuta oma esimene slaid kõige tähtsamaks kuna paljud kasutajad ei liigu järgmisele slaidile. Kahjuks on otsustamine, kas teha liugurit automaatselt või mitte katse-eksituse ala.

Mida vältida iga hinna eest

Siin on oluline asi, mida ma isiklikult arvan kuulub alla “vältida iga hinna eest”. Vaadake või klõpsake alloleval pildil ja proovige ära arvata, mis see võib olla.

Kohviku Yozenn veebisait kasutab täisekraanil olevat liugurit. See ei pöörle automaatselt, mis on suurepärane, aga ka slaidid muudel eesmärkidel peale kaunistamise.

Pildid ärge lingige kuskil, ja nad näitavad väikest käputäis tooteid. Nad kõik võiksid lihtsalt olla lisatakse kodulehe taustale ilma liugurita, et salvestada segadust ja täiendavaid kilobaiti JavaScript.

Ma väidaksin, et see taustlibisemisfunktsioon ei lisa juba väärtuslikku veebilehte. Kui piltidel on lingid või kaasasolev tekst, oleksid nad vähemalt asjakohasemad.

Võite vabalt kasutada oma päiseosas olevaid pilte, mis võtavad vastu kogu lehe, aga kui nad seda teevad ärge lingige kuskil ega pakkuge tõelist teavet siis ärge muutke neid karusselliks.

Interaktiivsed funktsioonid

See, kuidas kasutajad karussellil navigeerivad, mõjutab disaini ise. Seal on a erinevaid navigeerimisstiile, kuid need on kõige populaarsemad:

• Dot-põhine navigatsioon
• Noole navigeerimine
• Pisipiltide navigeerimine
• Loetlege lingid või pealkirjaelemendid

Kõige tavalisem on dot navigation leiad sadadest kaasaegsetest veebisaitidest.

Näide 1: šikk kodus - koduleht

Chic kodus on suurepärane näide kolm väikest punkti liuguri all tähistama navigeerimist. Iga pilt pöörleb automaatselt ja seerias asuv punkt saab mustaga. Ülejäänud kaks tühja punkti tähistavad võimalikke slaide kasutajate sirvimiseks.

See on populaarne disain mida paljud kasutajad juba tunnevad. See kuulub samasse kategooriasse kui hamburgerimenüü, mida paljud disainerid ei meeldi, kuid kasutajad seda juba tunnevad, ja instinktiivselt oskab seda kasutada.

Näide 2: Pure Cycles - koduleht

Pure Cyclesi kodulehekülg kasutab a punkti- ja noolenavigatsiooni kombinatsioon. Nii saavad kasutajad edasi-tagasi navigatsiooni, kuid vaata ka “üldiselt” navigeerimine läbi dot-linkide.

Tegelikult leian siinkohal dot-lingid raske näha. Visuaalsete slaidide raskus on see, et paljusid elemente ei ole kerge eristada, nii et nooled ja punktid saavad kergesti seguneda taustaga.

Näide 3: IGN - kodulehekülg

IGNi kodulehel leiad teise automaatne pöörlev karussell see kasutab navigeerimise pealkirja lingid. See on väga levinud avaldajatele, kes seda soovivad müüa pealkirju mitte tooteid. Iga link läheb individuaalsele slaidile, mis lõpuks viib artikli lehele.

Need lingid võiks asendada pisipiltidega, või isegi iga loo pisipilte - siiski visuaalne aspekt on esitatud karussellil, nii jätab pisipildi ärajätmine ruumi.

Erinevad veebisaidid kasutavad erinevatel põhjustel erinevaid navigeerimisstiile. Kaaluge külastajate eesmärki, ja disaini parimaks kasutuskogemuseks.

Võtmehoidjad

Sa peaksid püüdma anda tõelist väärtust või lisateavet karusselliga. See võib olla teave, mida külastaja ei olnud varem, või võib see viia lehtede juurde, mida külastaja ei pruugi teisiti leida.

Püüa vältida automaatse pöörleva karusselli ja kasutage neid ainult peamistel sihtlehtedel (kodulehekülg on üks näide). Niikaua kui karussell on eesmärk, ja ei tundu reklaamina, teie disain peaks hästi toimima.

Kui otsite veebi karussellide kohta rohkem teavet, vaadake mõnda järgmistest postitustest:

• Karussellid, Brad Frost
• 8 UX nõuded kasutajasõbraliku kodulehe kujundamiseks Karussell
• Karussellide kasutatavus: efektiivse kasutajaliidese kujundamine sisupiirangutega veebisaitidele