Image Karusszelek a webes tervezésben - előnyök és legjobb gyakorlatok

Nincs hiány karusszel funkciós diavetítések az interneten. Valójában ez a tendencia semmit sem tett nőtt az elmúlt 5-10 évben több böngésző támogatással, mint valaha. De vajon tényleg megéri-e a képkaruselék? Milyen előnyöket hoznak létre, és hogyan kell őket eredményesen felhasználni egy elrendezésben?

Szeretnék megosztani néhányat közös trendek, élő példák és ötletek a képkarousellák iránt érdeklődő webes tervezők számára. Ezeket a dinamikus csúszkákat erősen vitatták meg, de azt hiszem, hogy hozzáadott értéket adnak a megfelelő kontextusban.

Termék-körhinta az e-kereskedelem számára

Az e-kereskedelem világa tele van forgó karusszelekkel a honlapokon és a termékoldalakon. A cél az, hogy egyértelmű információs sűrűséget fényképekkel és szöveggel mondjon el egy egyedülálló, mégis értékes történetet hogy eladja a termékeket.

Vannak két elsődleges elhelyezés e-kereskedelmi termék csúszka:

1. A bolt honlapján
2. Egy termékoldalon

Mindketten másképp működnek, de ugyanezt a célt szolgálják - vizuálisan értékesíteni.

1. példa: Au Lit Fine Linens - kezdőlap

Vessen egy pillantást az Au Lit Fine Linens honlapjára teljes képernyős automatikus forgó karusszelt használ különböző termékek, például paplanok, párnák és ágyneműk bemutatása.

A képek vegye fel a teljes szélességet a kezdőlap, és ezek jóval a hajtás felett van. Tény, hogy ez a csúszka az első dolog, amellyel elkaphatja figyelmét, amikor először leszáll az oldalon. Minden csúszka egy másik oldalhoz vezet a webhelyen a vásárlási élményen keresztül vezeti az ügyfeleket.

Ez a csúszka lehet egy megfélemlítő, amikor először leszáll az oldalon, de a gomb link és overlay szöveg ez is nagyon bátoríthatja a látogatókat, akik csak be akarnak merülni és vásárolni.

2. példa: Eden telefon tok - termék oldal

Egy konkrétabb példát láthat az Eden telefonszekrény termékoldalán. Használ egy automatikus forgó csúszka a termék képeinek megjelenítése.

Úgy vélem, ezek egy kicsit “túl sok” az e-kereskedelem világában. Amikor megnézek egy terméket, amit akarok a képek közötti váltás vezérlésében.

A jobb választás a képek galériája a látogatónak adott ellenőrzéssel. Például a Design by Humans oldal használ miniatűrök minden egyes fotóhoz ami sokkal biztatóbb, és nagyobb ellenőrzést biztosít a felhasználó számára.

Webes portfóliók

Az online weboldal portfóliók kicsit másak, mert ezek a diákok ne mindig kattints egy másik oldalra. Igaz, hogy egyesek egy esettanulmányhoz vagy egy projekthez írnak, de sok portfólió weboldalakon található karusszelek célja vizuális munkát mutat.

1. példa: Biboun - kezdőlap

A francia művész, aki Biboun néven dolgozik, a körhinta csúszka a kezdőlapon műalkotásokkal. Az egyes diákok a portfólió belső oldalaira vezetnek egy teljes projektet lefed több fotóval.

Ez valószínűleg a legjobb módja a csúszkának portfólió honlapján. A munka egy véletlenszerű listájának bemutatása értelmetlen, kivéve, ha ezeknek a konkrét munkáknak az oka van a bemutatásra.

Az összes darab tökéletes Biboun csúszkájában, és ez nem sok helyet foglal el bármelyik. Bár tudom, hogy néhány ember gyűlöli az automatikus forgó diavetítést jó okból, egy ilyen minimalista elrendezésben nehezen tudom panaszkodni ezzel a tervezési funkcióval.

2. példa: Blaise Aaron honlapja - kezdőlap

Nagyon szeretem az Aaron Blaise weboldalán található példát, mert ő bemutatja munkáját portfólióként, de leginkább ezt a weboldalt használja eladja művészeti videóit. Aaron Blaise pár évtizede dolgozott a Disney-ben, és ő is rendelkezik készséggel, hogy bebizonyítsa.

Míg a webhelyén található kezdőlap csúszka automatikusan forog, nem találom hihetetlenül bosszantó vagy helytelen. Minden dia van egy kis tartalma a kép szempontjából, és segít Aaronnak felhívja a figyelmet a legújabb videó óráira hogy tanítsák a fiatal művészeknek, hogyan kell sajátos képességeket elsajátítani.

Nagy portfólió a látványra összpontosít, és tovább vezet a webhelyre. Ha megkapod ezeket a két dolgot, akkor egy személyes portfólió webhelyén nem lennék ilyen jellegű funkció.

Közös tervezési trendek

Ha megnézed a fent említett néhány példát, észreveszed, hogy általában két különböző típusú csúszka van: Teljes képernyő és fix szélesség.

Ezek a stílusos választások gyakran vonatkoznak az elrendezésre és mennyi tartalmat tud tartani. Ha egy elrendezés kiterjed az oldal teljes szélességére, akkor is célszerű a csúszka kiszélesítése is. De ez is arra kényszerít, hogy kiváló minőségű képeket talál amely nagy felbontású monitorokon még mindig jól néz ki a teljes képernyőn.

Én személy szerint inkább a rögzített szélességű stílust részesítem előnyben, mint a két művészeti portfólió példájában. Ezek sokkal könnyebb ellenőrizni, és gyakran nem olyan magas - megkönnyíti a látogatók számára egyszerűen figyelmen kívül hagyja őket ha akarják.

Figyeljük meg az automatikus továbblépések értékét, és milyen nehéz lehet a felhasználók számára, hogy elkapják ezt a tartalmat. A Nielsen Norman Group nagyszerű esettanulmányt mutat be, hogy jobb nem rendelkezik automatikus előremenő csúszkákkal.

Ezzel a megközelítéssel a fedélzeten vagyok, abban az értelemben, hogy ez kevésbé intenzív a memóriában kevesebb animációval és mozgással a böngészőben, és a legtöbb embernek nem tetszik az automatikus forgatású körhinta is - és mindig a közönségnek.

Azonban nem mondhatom, hogy soha nem érdemes hozzáadni egy automatikus előremutató csúszkát, különösen mivel statikus csúszkákkal ne kapj annyi nézetet, és szükséged van rá tegye az első csúszkát a legfontosabbnak mivel sok felhasználó nem lép tovább a következő diara. A csúszka automatikus elforgatásának eldöntése sajnos egy próba-hiba terület.

Mit kell elkerülni minden áron

Itt van egy fontos dolog, amit személy szerint gondolok alá esik “minden áron”. Nézze meg vagy kattintson az alábbi képernyőre, és próbálja kitalálni, hogy mi lehet.

A Yozenn kávézó honlapja teljes képernyős csúszkát használ. Ez nem automatikus forgatás, ami nagyszerű, de a dia is semmilyen más célra, mint a díszítésre.

A képek ne linkelj bárhová, és egy kis maréknyi terméket mutatnak be. Mindannyian csak lehetnek hozzáadódik a kezdőlaphoz a csúszka nélkül, hogy megmentse a zavart és extra kilobájt JavaScript-t.

Azt állítom, hogy ez a háttér csúszó funkció nem ad sok értéket egy már szűkített webhelyhez. Ha a képek linkeket vagy kísérő szöveget tartalmaznak, legalábbis relevánsabbak lennének.

Nyugodtan használhatja a fejlécrészlet képeit, amelyek a teljes oldalt felveszik, de ha igen ne linkelj bárhonnan, és semmilyen valódi információt ne adj meg akkor ne fordítsd őket egy körhinta.

Interaktív funkciók

A felhasználók által a karusszelben való navigáció befolyásolja magát a tervet. Van egy különböző navigációs stílusok, de ezek a legnépszerűbbek:

• Pont-alapú navigáció
• Nyíl navigáció
• Miniatűr navigáció
• Lista hivatkozások vagy címsorok

A leggyakoribb az pont navigáció amelyek több száz modern weboldalon találhatók.

1. példa: Elegáns otthon - kezdőlap

A Chic at Home egy jó példa erre három apró pont a csúszka alatt navigációt jelöl. Minden kép automatikusan elfordul, és a kapcsolódó pont a sorozatban fekete lesz. A másik két üres pont potenciális diákokat jelöl a felhasználók számára a böngészéshez.

Ez egy népszerű tervezési minta hogy sok felhasználó már felismeri. Ugyanabba a kategóriába tartozik, mint a hamburger menü, amit sok tervező nem szeret, de a felhasználók már felismerik, és ösztönösen tudják, hogyan kell használni.

2. példa: Tiszta ciklusok - kezdőlap

A Pure Cycles kezdőlapja a pont és nyíl navigáció kombinációja. Így a felhasználók rendelkeznek az előre és hátra navigálással, de lásd még “átfogó” navigáció pont alatti linkeken keresztül.

Én valóban megtalálom a példa linkeket ebben a példában. A vizuális diákok nehézségei az, hogy sok elemet nem lehet megkülönböztetni, így a nyilak és pontok is könnyen beleolvad a háttérbe.

3. példa: IGN - kezdőlap

Az IGN honlapján talál egy újat automatikus forgó körhinta amely használ a navigáció cím linkjei. Ez nagyon gyakori olyan kiadók számára, akik szeretnének eladni a címsorokat a termékek helyett. Minden egyes hivatkozás végül az egyéni diahoz megy a cikk oldalához vezet.

Ezek a linkek kicserélhető bélyegképekkel, vagy akár az egyes történetek bélyegképeit is tartalmazhatja - bár a a körhinta a vizuális szempontot mutatja, így a bélyegkép elhagyása ténylegesen helyet takarít meg.

A különböző weboldalak különböző navigációs stílusokat használnak különböző okokból. Tekintsük meg a látogatók céljait, és a legjobb felhasználói élmény kialakítása.

Kulcsfontosságú elvezetések

Arra kell törekednie, hogy valódi értéket vagy további információkat egy körhinta. Ez lehet olyan információ, amelyet a látogató korábban nem rendelkezett, vagy olyan oldalakhoz vezethet, amelyeket a látogató másképp nem talált.

Próbálja meg elkerülni az automatikus forgó karusszeleket, és csak azokat a főbb céloldalakon használja (a kezdőlap egy példa). Mindaddig, amíg a körhinta célja van, és nem tűnik hirdetésnek, a designnak jól kell lennie.

Ha több információt szeretne a webes körhintákról, nézze meg az alábbi bejegyzéseket:

• Brad Frost karusszeljei
• 8 UX követelmények a felhasználóbarát honlap tervezéséhez Karusszel
• Karusszel használhatóság: Hatékony felhasználói felület tervezése a tartalmi túlterhelésű webhelyek számára