Image Karuseļi Web dizainā - priekšrocības un labākā prakse

Nav karuseļa slīdrādes tīmeklī. Patiesībā šī tendence ir tikai pēdējos 5-10 gados vairāk pārlūkprogrammas atbalsta tagad nekā jebkad agrāk. Bet vai attēla karuseļi patiešām ir vērts? Kādus ieguvumus tie rada un kā tos izmantot produktīvi izkārtojumā?

Es gribētu dalīties ar dažiem kopīgas tendences, dzīvi piemēri un idejas web dizaineriem, kurus interesē attēla karuseļi. Šie dinamiskie slīdņi ir stipri apspriesti, bet es domāju, ka tie pievieno vērtību, veidojot pareizajā kontekstā.

Produkta karuseļi e-komercijai

E-komercijas pasaule ir pilna ar rotējošiem karuseļiem mājas lapās un produktu lapās. Mērķis ir saglabātu skaidru informācijas blīvumu ar fotogrāfijām un tekstu pastāstiet unikālu, bet vērtīgu stāstu lai palīdzētu pārdot produktus.

Tur ir divi galvenie izvietojumi e-komercijas produktu slīdni:

1. Veikala mājas lapā
2. Produkta lapā

Viņi abi strādā atšķirīgi, bet kalpot tam pašam mērķim - pārdot produktus vizuāli.

1. piemērs: Au Lit Fine Linens - mājas lapa

Aplūkojiet Au Lit Fine Linens mājas lapu izmanto pilnekrāna automātisko rotējošo karuseļu demonstrēt dažādus produktus, piemēram, segas, spilvenus un gultas pārsegu.

Attēli aizņem pilnu platumu no mājas lapas, un tie parādās krietni virs reizes. Faktiski, šis slīdnis ir pirmais, kas jums jāpievērš uzmanībai, kad pirmo reizi nolaižaties lapā. Katrs slaids noved pie citas lapas lapā vadīt klientus, izmantojot iepirkšanās pieredzi.

Šis slīdnis var būt biedējoša, pirmo reizi nolaižoties lapā, bet ar pogas saite un pārklājuma teksts tas var arī būt ļoti iepriecinošs apmeklētājiem, kuri vienkārši vēlas ienirt un iepirkties.

2. piemērs: Eden tālruņa lieta - produkta lapa

Jūs varat redzēt konkrētāku piemēru Eden tālruņa gadījuma produkta lapā. Tā izmanto automātiski pagriežams slīdnis lai parādītu produkta attēlus.

Es uzskatu, ka tie ir nedaudz “pārāk daudz” e-komercijas pasaulē. Aplūkojot produktu, kuru es vēlos būt kontrolējot pārslēgšanos starp attēliem.

Labāka izvēle ir darīt attēlu galeriju ar kontroli, ko sniedz apmeklētājs. Piemēram, tiek izmantota lapa Design by Humans sīktēli katram fotoattēlam kas ir daudz iedrošinošāks, un piešķir lietotājam lielāku kontroli.

Web portfeļa karuseļi

Tiešsaistes portfeļu portfeļi ir nedaudz atšķirīgi, jo šie slaidi ne vienmēr noklikšķiniet uz citu lapu. Tā ir taisnība, ka daži novedīs pie gadījuma izpētes vai rakstīs par projektu, bet daudziem karuseļiem portfeļa tīmekļa vietnēs ir paredzēts tikai demonstrēt vizuālo darbu.

1. piemērs: Biboun - mājas lapa

Franču mākslinieks, kas strādā ar nosaukumu Biboun, ir a karuseļa slīdni mājas lapā attēloti mākslas darbu fragmenti. Individuālie slaidi noved pie portfeļa iekšējām lapām aptver visu projektu ar vairākiem fotoattēliem.

Tas ir iespējams labākais veids, kā izdarīt slīdni portfeļa vietnē. Tikai nejauša darba saraksta demonstrēšana ir bezjēdzīga, ja vien šiem konkrētajiem darbiem nav iemesla.

Visi gabali ir izsmalcināts Biboun slīdni un to nav daudz vietas arī. Lai gan es zinu, ka daži cilvēki ienīst automātisko rotējošo slaidrādi par labu iemeslu dēļ, šādā minimālisma izkārtojumā man ir sarežģīts laiks sūdzēties par šo dizaina funkciju.

2. piemērs: Aaron Blaise tīmekļa vietne - mājas lapa

Man tiešām patīk piemērs, kas atrodams Aaron Blaise tīmekļa vietnē, jo viņš demonstrē savu darbu kā portfeli, bet galvenokārt izmanto šo vietni pārdot savus mākslas videoklipus. Aarons Blaise strādāja Disnejā pāris gadu desmitus, un viņam ir prasme to pierādīt.

Lai gan mājas lapas slīdni savā vietnē veic automātiski, es to neuzskatu neticami kaitinošu vai nevietā. Katrs slaids ir ar attēlu saistītais saturs, un tas palīdz Āronam pievērst uzmanību viņa jaunākajām video stundām kas māca jaunajiem māksliniekiem, kā apgūt specifiskas prasmes.

Lielisks portfeļa karuselis koncentrējas uz vizuāliem, un vada apmeklētājus tālāk tīmekļa vietnē. Ja jūs varat saņemt šīs divas lietas, es nebūtu pret tādu funkciju kā personīgā portfeļa vietnē.

Kopīgas dizaina tendences

Ja aplūkojat dažus no iepriekš minētajiem piemēriem, jūs pamanīsiet, ka parasti ir divi dažādi slīdņu veidi: pilnekrāna režīmā un fiksēts platums.

Šīs stilistiskās izvēles bieži attiecas uz izkārtojumu un cik daudz satura var turēt. Ja izkārtojums aptver visu lapas platumu, tad ir lietderīgi arī paplašināt slīdni. Bet tas arī liek jums atrast augstas kvalitātes attēlus kas lielā izšķirtspējas monitoros joprojām izskatās labi visā ekrānā.

Es personīgi dodu priekšroku fiksēta platuma stilam, kā jūs redzēsiet divos mākslas portfeļa piemēros. Šie ir daudz vieglāk kontrolēt, un viņi bieži nav tik augsts - padarot apmeklētājus vieglākus vienkārši ignorējiet tos ja viņi vēlas.

Ņemiet vērā arī automātiskās virzīšanas slaidu vērtību un cik grūti var būt lietotājiem iegūt šo saturu. Nielsen Norman Group ir veikusi lielu gadījumu izpēti, kas parāda, ka tas ir labāks nav automātisko virzošo slīdņu.

Es esmu uz kuģa ar šo pieeju tādā nozīmē, ka tā ir mazāk intensīva atmiņā ar mazākām animācijām un kustībām pārlūkprogrammā, un lielākā daļa cilvēku nepatīk auto-rotējoši karuseļi - un jums vienmēr vajadzētu rūpēties par savu auditoriju.

Tomēr es nevaru teikt, ka tas nekad nav vērts pievienot automātisku virzošo slīdni, jo īpaši tāpēc, ka jūs ar statiskiem slīdņiem jūs nesaņemiet tik daudz skatījumu, un jums arī ir nepieciešams padarīt savu pirmo slaidu par vissvarīgāko jo daudzi lietotāji nepāriet uz nākamo slaidu. Diemžēl, pieņemot lēmumu par slīdņa automātisku pagriešanu vai negaidīšanu izmēģinājuma un kļūdas zona.

Kā izvairīties no jebkādām izmaksām

Šeit ir svarīga lieta, ko es personīgi domāju ietilpst “izvairīties no jebkādām izmaksām”. Apskatiet vai noklikšķiniet uz zemāk redzamās attēla un mēģiniet uzminēt, kas tas varētu būt.

Yozenn kafejnīcas tīmekļa vietnē tiek izmantots pilnekrāna galvenes slīdnis. Tas netiek automātiski pagriezts, kas ir liels, taču arī slaidi kalpo nekādiem citiem mērķiem, nevis dekorēšanai.

Attēli nevietojiet nekur, un viņi demonstrē nelielu produktu daudzumu. Tie visi varētu būt vienkārši pievienots mājas lapas fonai bez slīdņa, lai saglabātu neskaidrības un papildu kilobaitus JavaScript.

Es apgalvoju, ka šī fona bīdāmā funkcija nesniedz lielu vērtību jau ierobežotai vietnei. Ja attēliem bija saites vai pievienots teksts, tie būtu vismaz nozīmīgāki.

Jūtieties brīvi izmantot attēlus galvenes sadaļā, kas aizņem pilnu lapu, tomēr, ja tie ir neveidojiet nekādu saiti vai nesniedziet īstu informāciju tad neieslēdziet tos karuseļos.

Interaktīvās funkcijas

Veids, kādā lietotāji pārvietojas karuseļā, ietekmē pašu dizainu. Ir a dažādi navigācijas stili, bet tie ir populārākie:

• Navigācija pa punktiem
• Bultas navigācija
• Sīktēlu navigācija
• Sarakstu saites vai virsraksta vienības

Visbiežāk tas ir punktu navigācija Jūs atradīsiet simtiem mūsdienu tīmekļa vietņu.

1. piemērs: šiks mājās - mājas lapā

Elegants mājās ir lielisks piemērs, izmantojot trīs mazi punktiņi zem slīdņa lai apzīmētu navigāciju. Katrs attēls automātiski pagriežas un sērijas attiecīgais punkts piepildās ar melnu. Pārējie divi tukšie punkti apzīmē potenciālos slaidus lietotājiem pārlūkot.

Tas ir populārs dizaina modelis ka daudzi lietotāji jau atpazīst. Tā ietilpst tajā pašā kategorijā kā hamburgeru ēdienkarte, kurai daudziem dizaineriem nepatīk, bet lietotāji jau to atpazīst, un instinktīvi zina, kā to izmantot.

2. piemērs: Pure Cycles - mājas lapa

Pure Cycles mājas lapa izmanto a punktu un bultiņu navigācijas kombinācija. Tādā veidā lietotājiem ir navigācija uz priekšu un atpakaļ skatīt arī “kopumā” navigācija caur punktu saitēm apakšā.

Es tiešām atradu punktveida saites šajā piemērā. Ar vizuālajām slaidām saistītās grūtības ir tādas, ka daudz elementu nav viegli atšķirt, tāpēc var bultas un punkti viegli saplūst fonā.

3. piemērs: IGN - mājas lapa

IGN mājaslapā jūs atradīsiet citu automātiskais rotējošais karuselis kas izmanto navigācijas nosaukuma saites. Tas ir ļoti izplatīts izdevējiem, kas vēlas pārdot virsrakstus nevis produktus. Katra saite iet uz atsevišķu slaidu, kas galu galā ved uz rakstu lapu.

Šīs saites var aizstāt ar sīktēliem, vai pat sīktēlus no katra stāsta - tomēr vizuālais aspekts ir parādīts karuseļā, tāpēc sīktēla izlaišana faktiski ietaupa vietu.

Dažādās tīmekļa vietnēs dažādu iemeslu dēļ tiek izmantoti dažādi navigācijas stili. Apsveriet apmeklētāju mērķi (-us), un dizains, lai iegūtu vislabāko lietotāja pieredzi.

Atslēgas

Jums jācenšas rada patiesu vērtību vai papildu informāciju ar karuseli. Tas var būt informācija, ko apmeklētājs iepriekš nebija ieguvis, vai arī tas var novest pie lapām, kuras apmeklētājs var nebūt atradis citādi.

Mēģiniet izvairīties no automātiskās rotācijas karuseļiem un tos izmantot tikai galvenajās galamērķa lapās (mājas lapa ir viens piemērs). Kamēr karuselis tam ir mērķis, un neizskatās kā reklāma, jūsu dizainam ir jādara labi.

Ja meklējat vairāk informācijas par tīmekļa karuseļiem, skatiet dažas no šīm ziņām:

• Brad Frost karuseļi
• 8 UX prasības lietotājam draudzīgas mājaslapas izstrādei Karuseļveida
• Karuseļa lietojamība: efektīva lietotāja interfeisa izstrāde tīmekļa vietnēm ar satura pārslodzi