Kuva-karusellit Web-suunnittelussa - hyödyt ja parhaat käytännöt

Ei ole pulaa karuselli-diaesityksiä verkossa. Itse asiassa tämä suuntaus ei ole tehnyt muuta kuin kasvaa viimeisten 5-10 vuoden aikana enemmän selaintukea kuin koskaan ennen. Mutta ovatko kuvan karusellit todella vaivan arvoista? Millaisia ​​hyötyjä ne tuottavat ja miten niitä tulisi käyttää tuotannollisesti?

Haluaisin jakaa joitakin yhteisiä suuntauksia, eläviä esimerkkejä ja ideoita Web-suunnittelijoille, jotka ovat kiinnostuneita kuvan karuselleista. Näitä dynaamisia liukusäätimiä keskustellaan voimakkaasti, mutta mielestäni ne lisäävät lisäarvoa oikeassa yhteydessä.

Tuotekarussellit sähköiseen kaupankäyntiin

Verkkokaupan maailma on täynnä pyöriviä karuselleja kotisivuilla ja tuotesivuilla. Tavoitteena on säilyttää selkeä tietotiheys kuvia ja tekstiä kerro ainutlaatuinen mutta arvokas tarina auttaa myymään tuotteita.

On kaksi ensisijaista sijoittelua e-commerce-tuotteen liukusäädintä varten:

1. Kaupan kotisivulla
2. Tuotesivulla

He molemmat toimivat eri tavalla, mutta palvella samaa päämäärää - myydä tuotteita visuaalisesti.

Esimerkki 1: Au Lit Fine Linens - kotisivu

Tutustu Au Lit Fine Linensin kotisivuille käyttää täyden näytön automaattista pyörivää karuselliä näyttää erilaisia ​​tuotteita, kuten peittoja, tyynyjä ja sängynpeitteitä.

Kuvat vie koko leveys kotisivun, ja ne näkyvät selvästi taittuman yläpuolella. Itse asiassa tämän liukusäätimen pitäisi olla ensimmäinen asia, joka kiinnittää huomionne, kun aloitat ensimmäisen sivun. Jokainen dia johtaa eri sivulle sivustoon ohjaa asiakkaita ostokokemuksen kautta.

Tämä liukusäädin voi olla pelottava, kun se aloitetaan ensimmäisen kerran sivulle, mutta painiketta ja päällekkäistä tekstiä se voi myös olla erittäin rohkaisevaa kävijöille, jotka haluavat vain sukeltaa ja tehdä ostoksia.

Esimerkki 2: Eden-puhelimen kotelo - tuotesivu

Näet tarkemman esimerkin Eden-puhelinkotelon tuotesivulta. Se käyttää automaattinen pyörivä liukusäädin näyttää tuotteen kuvat.

Minusta nämä ovat hieman “liian paljon” sähköisen kaupankäynnin maailmassa. Kun tarkastellaan tuotetta, jonka haluan olla kuvien vaihtamisen ohjauksessa.

Parempi valinta on tehdä kuvagalleria vierailijalle. Esimerkiksi Design by Humans -sivu käyttää pikkukuvat jokaisesta valokuvasta mikä on paljon rohkaisevampaa ja antaa käyttäjälle enemmän valvontaa.

Verkkosalkun karusellit

Verkkosivustojen salkut ovat hieman erilaisia, koska nämä diat ovat älä napsauta aina toiselle sivulle. On totta, että jotkut johtavat tapaustutkimukseen tai kirjoittavat projektista, mutta monet portfolio-sivustojen karusellit on tarkoitettu vain näyttää visuaalista työtä.

Esimerkki 1: Biboun - kotisivu

Ranskalainen taiteilija, joka työskentelee nimellä Biboun, on a karuselli-liukusäädintä kotisivulla sisältää katkelmia taideteoksista. Yksittäiset diat johtavat salkun sisäisiin sivuihin kattavat koko hankkeen useita kuvia.

Tämä on luultavasti paras tapa tehdä liukusäädin sivustolla. Vain satunnaisluettelon esittely on turhaa, ellei näillä erityisillä teoksilla ole syytä näyttää.

Kaikki kappaleet ovat erinomainen Bibounin liukusäädintä ja sitä ei vie paljon tilaa jompikumpi. Vaikka tiedän, että jotkut ihmiset vihaavat automaattisesti pyöriviä diaesityksiä hyvästä syystä, minulla on tällaisen minimalistisen ulkoasun vuoksi vaikeaa valittaa tästä suunnittelutoiminnosta.

Esimerkki 2: Aaron Blaisen verkkosivu - kotisivu

Pidän todella Aaron Blaisen verkkosivuilla olevasta esimerkistä, koska hän esittelee työnsä salkuna, mutta useimmiten käyttää tätä sivustoa myydä taidevideoaan. Aaron Blaise työskenteli Disneyssä pari vuosikymmentä, ja hänellä on taitovarasto todistaa se.

Vaikka kotisivun liukusäädin omalla sivustollaan ei käänny automaattisesti, en löydä sitä uskomattoman ärsyttävää tai paikoillaan. Jokainen dia on vähän sisältöä, joka on kuvan kannalta olennainen, ja se auttaa Aaronia kiinnittää huomiota hänen uusimpiin videotunteihinsa joka opettaa nuorille taiteilijoille, miten hallita tiettyjä taitoja.

Suuri salkun karuselli keskittyy kuviin, ja johtaa kävijöitä edelleen verkkosivustolle. Jos saat nämä kaksi asiaa, niin en olisi vastoin tällaista ominaisuutta henkilökohtaisessa salkun verkkosivustossa.

Yhteiset suunnittelusuunnat

Jos tarkastelet joitakin edellä mainittuja esimerkkejä, huomaat, että yleensä on kaksi eri liukusäädintä: koko näyttö ja kiinteä leveys.

Nämä tyylilliset valinnat ovat usein liittyvät ulkoasuun ja kuinka paljon sisältöä se voi pitää. Jos ulkoasu kattaa koko sivun leveyden, on myös järkevää laajentaa liukusäädintä. Mutta tämä myös pakottaa sinut löytää laadukkaita kuvia jotka näyttävät edelleen hyvältä koko näytössä suurten resoluutiomonitorien osalta.

Henkilökohtaisesti pidän kiinteän leveyden tyyliä, jota näet kahdessa taideportfolion esimerkissä. Nämä ovat paljon helpompi hallita, ja he ovat usein ei ole niin pitkä - kävijöiden helpottaminen yksinkertaisesti sivuuttaa ne jos he haluavat.

Harkitse myös automaattisten etenevien dioiden arvoa ja kuinka vaikeaa se voi olla käyttäjät voivat saada tämän sisällön. Nielsen Norman -ryhmä on tehnyt suuren tapaustutkimuksen, joka osoittaa, että se on parempi ei ole automaattisia eteneviä liukusäätimiä.

Olen mukana tällä lähestymistavalla siinä mielessä, että se on vähemmän intensiivistä muistia vähemmän animaatioita ja liikettä selaimessa, ja useimmat ihmiset eivät pidä auto-pyörivistä karuselleista - ja sinun pitäisi aina palvella yleisöä.

En kuitenkaan voi sanoa, että se ei koskaan kannata lisätä automaattista etenevää liukusäädintä, varsinkin kun staattisten liukusäätimien avulla älä saa niin monta näkemystä, ja sinun täytyy myös tee ensimmäinen diasi tärkeimmäksi koska monet käyttäjät eivät siirry seuraavaan diaan. Päätös siitä, tehdäänkö liukusäädin automaattisesti, ei valitettavasti ole kokeiluversio ja virhe.

Mitä välttää hinnalla millä hyvänsä

Tässä on tärkeä asia, jonka minä henkilökohtaisesti ajattelen kuuluu “välttää hinnalla millä hyvänsä”. Tutustu alla olevaan kuvaan tai napsauta sitä ja yritä arvata, mitä se voi olla.

Yozennin kahvila-sivustossa käytetään koko näytön otsikkoriviä. Se ei pyöri automaattisesti, mikä on hienoa, mutta myös dioja palvella mitään muuta tarkoitusta kuin koristelua.

Kuvat älä linkitä mihinkään, ja he esittelevät pienen kouran tuotteita. He voisivat vain olla lisätään kotisivun taustaan ilman liukusäädintä säästää sekaannusta ja ylimääräisiä kilotavuja JavaScript.

Väitän, että tämä tausta liukuva ominaisuus ei lisää paljon arvoa jo ahtaissa verkkosivuille. Jos kuvissa oli linkkejä tai siihen liittyvää tekstiä, he olisivat ainakin tärkeämpiä.

Voit vapaasti käyttää otsikkosivusi kuvia, jotka vievät koko sivun älä linkitä mihinkään tai tarjoa aitoa tietoa sitten älä käänny niitä karuselliin.

Interaktiiviset ominaisuudet

Tapa, jolla käyttäjät navigoivat karuselliin, vaikuttaa itse suunnitteluun. Siellä on erilaisia ​​navigointityylejä, mutta nämä ovat suosituimpia:

• Pistepohjainen navigointi
• Nuolin navigointi
• Pikkukuvan navigointi
• Luettele linkit tai otsikkokohteet

Yleisin on dot-navigointi löydät satoja nykyaikaisia ​​verkkosivustoja.

Esimerkki 1: Chic kotona - kotisivu

Chic at Home on hyvä esimerkki käyttämällä kolme pientä pistettä liukusäätimen alla merkitä navigointia. Jokainen kuva pyörii automaattisesti ja siihen liittyvä piste sarjassa saa täynnä mustaa. Kaksi muuta tyhjää pistettä merkitä mahdollisia dioja käyttäjät voivat selata.

Tämä on suosittu muotoilu että monet käyttäjät jo tunnistavat. Se kuuluu samaan luokkaan kuin hampurilaisvalikko, jota monet suunnittelijat eivät pidä käyttäjät tunnistavat sen jo, ja vaistomaisesti osaa käyttää sitä.

Esimerkki 2: Pure Cycles - kotisivu

Pure Cyclesin kotisivu käyttää a pisteen ja nuolen navigoinnin yhdistelmä. Näin käyttäjillä on edestakainen navigointi, mutta katso myös “yleensä ottaen” suunnistus pisteen linkkien kautta.

Löysin tässä esimerkissä pisteviitteet kovasti. Visuaalisten dioja on vaikea erottaa toisistaan, joten nuolet ja pisteet voivat helposti sekoittuvat taustaan.

Esimerkki 3: IGN - kotisivu

IGN: n kotisivulla löydät toisen automaattinen pyörivä karuselli joka käyttää otsikkolinkit navigointiin. Tämä on hyvin yleistä julkaisijoille, jotka haluavat myydä otsikoita pikemminkin kuin tuotteita. Jokainen linkki menee lopulta yksittäiseen diaan johtaa artikkelin sivulle.

Nämä linkit voidaan korvata pikkukuvilla, tai jopa pienoiskuvia jokaisesta tarinasta - kuitenkin visuaalinen näkökulma on esitetty karusellissa, joten pikkukuvan jättäminen tosiasiallisesti säästää tilaa.

Eri sivustot käyttävät eri navigointityylejä eri syistä. Harkitse kävijöiden tavoitetta, ja suunnittelevat parhaan käyttäjäkokemuksen.

Avaimet

Sinun pitäisi pyrkiä tuottaa aitoa arvoa tai lisätietoja karuselliin. Tämä voi olla tietoja, joita kävijällä ei ollut aikaisemmin, tai se voi johtaa sivuihin, joita kävijä ei ehkä ole löytänyt.

Yritä välttää automaattisesti pyöriviä karuselleja ja käyttää niitä vain suurilla aloitussivuilla (kotisivu on yksi esimerkki). Niin kauan kuin karuselli sillä on tarkoitus, ja ei näytä mainoksena, suunnittelusi pitäisi tehdä hyvin.

Jos etsit lisätietoja web-karuselleista, tutustu joihinkin seuraaviin viesteihin:

• Brad Frostin karusellit
• 8 UX-vaatimukset käyttäjäystävällisen kotisivun suunnittelemiseksi Karuselli
• Carousel-käyttökelpoisuus: Tehokkaan käyttöliittymän suunnittelu verkkosivuille, joiden sisältö on ylikuormitettu