Moderní trendy ve webdesignu jsou takové, že je třeba se snažit racionálně kombinovat informační složku a minimalistický design. Surfování po internetu se totiž nyní schyluje k rychlému rolování a diagonálnímu prohlížení stránek, ze kterých je těžké pochytit všechny informace, které chtěli majitelé stránek prezentovat. Proto, abyste uživatele skutečně zaujali, musíte být originální.

Jedním z nejzajímavějších řešení zde bylo použití posuvníků ve webdesignu. Právě s jejich pomocí můžete přehledně, stručně a přehledně ukázat ty nejdůležitější informace, které uživatel na stránce obdrží. Někomu se posuvníky zdají jako zbytečná dekorace a prostředek k „zatížení“ webu, ale při správném vývoji budou velkým plusem.

Co je posuvník?

Posuvník je speciální prvek webdesignu, což je blok o určité šířce, nejčastěji v záhlaví webové stránky. Jeho hlavním rysem jsou prvky, které se mění ručně nebo automaticky – obrázky, texty a odkazy.

Sliders získaly popularitu s rozšířením javascriptových frameworků. S jejich pomocí se na posuvnících vytvářejí různé druhy animačních efektů a dalších „dobrot“. Nyní existuje poměrně hodně hotových řešení, která nevyžadují programování, například RoyalSlider, SlideDeck, NivoSlider, Supersized a další. Jsou veřejně dostupné a zcela zdarma, ale někdy mají různá omezení – práce pouze s obrázky, placený základ atp.

Pro oblíbené systémy pro správu obsahu byly vyvinuty různé pluginy, které implementují posuvníky s mnoha efekty. Například pro WordPress je to plugin Con Slider, Slideshow Gallery, Content Slide. Ve většině případů jsou posuvníky vytvořeny pomocí zdrojů z knihovny JQuery, ale vlastní posuvník lze vyvinout pomocí HTML 5 a CSS 3 prakticky bez potřeby skriptů!

Posuvné zařízení

Standardní posuvník pro web se skládá ze 3-5 obrázků, které se po určitém časovém intervalu nebo po ručním stisknutí přepínačů vystřídají. Obecně lze rozlišit následující součásti jakéhokoli posuvníku:

  • Shield
  • Navigační pomůcky
  • Značky s celkovým počtem snímků a aktuálním stavem

Měnící se obrázky na obrazovce jsou tzv diapozitivy. Mohou to být buď pouze obrázky, nebo doplněné o další textové bloky s informacemi, odkazy nebo tabulkami. Obecně lze dokonce do posuvníku vložit video a falešnou animaci.

Některé snímky obsahují doplňkové funkce:

  1. Náhledy dalších snímků
  2. Časovač s časem do změny snímku
  3. Pozastavení při najetí myší na snímek

Je však lepší tento prvek nepřetěžovat a zvolit funkce, které se skutečně vyplatí používat.

Proč na webu potřebujete posuvník?

Jedním z nejdůležitějších důvodů, proč se na webu používají posuvníky, je chování moderních uživatelů: nyní téměř každý dává přednost grafickému zobrazení informací před textem. Uživatelé internetu chtějí získat maximum užitečného obsahu v minimálním čase. Pokud to stránka nemůže poskytnout, pak je vysoká pravděpodobnost, že návštěvník přejde na jiný zdroj.

Bez textu to však vůbec nejde. Ostatně náplň činnosti některých společností nelze jednoduše popsat 2-3 slovy. A každý SEO specialista vám řekne, že hlavní stránka musí obsahovat alespoň malý kousek textu s výskyty klíčových slov. Často proto dochází ke střetu zájmů. V ideálním případě by domovská stránka webu měla:

  • obsahovat nejdůležitější informace o společnosti a jejích aktivitách;
  • Uspokojit rovnováhu mezi grafikou a pravidly SEO optimalizace;
  • Uspokojit přání zákazníka a návštěvníků.
ČTĚTE VÍCE
Jaký je rozdíl mezi modelkou Victoria Secret a andělem?

Příklady stránek vyvinutých v našem studiu obsahujících posuvníky:

Design webových stránek s posuvníkem je exkluzivní – ne šablona. Podrobnosti o vývoji takového webu najdete na stránce.

  • 20.06.2013
  • Komentáře: 0
  • webový design

Související články:

  • Redesign bezpečného webu
  • Seznam produktů
  • Potřebná vylepšení webu
  • Proč je mobilní design důležitý?
  • Trendy webdesignu v roce 2018

Popularita posuvníků na stránkách elektronického obchodování snižuje, zejména pokud jde o domovskou stránku. Nejnovější testování UX od Baymard, nezávislého institutu pro výzkum UX, ukazuje, že mezi nejlepšími internetovými obchody v USA a Evropě pouze 28 % používá posuvník. V roce 2016 to bylo 32 % a v roce 2013 – 52 %.

Rozsáhlé testování použitelnosti v této oblasti zjistilo, že lidé mají obecně rádi posuvníky, které používají velké obrázky. Ale pokud ne eliminován vážné problémy, které je doprovázejí, pak mohou posuvníky umístěné na hlavní stránce nadělat více škody než užitku.

Výsledky testování UX ukazují pouze to 41% společnosti, které umístí posuvník na hlavní stránku, nemají problémy s použitelností.

Kromě toho byly vyvozeny závěry, jak tvořit alternativní design domovské stránky, který je technicky mnohem jednodušší na implementaci než dokonalý slider. A přesto poskytuje skvělý uživatelský zážitek.

Klíčové poznatky z výzkumu použitelnosti

V tomto článku probereme výsledky testování domovské stránky internetových obchodů. Zaměříme se také na výzkum použitelnosti sliderů na úvodní stránce v mobilní verzi. Zejména se dozvíte:

  • Je rozhodnutí použít posuvník na domovské stránce správné?
  • proč automatické posouvání snímků vede k problémům v mobilních verzích webu
  • 3 pravidla UX pro navrhování posuvníku domovské stránky pro stolní i mobilní verze
  • 3 další pravidla UX pro zajištění správného fungování posuvníku v desktopové verzi při automatickém rolování;
  • 3 další pravidla UX pro správné fungování posuvníku v mobilní verzi.

Je rozhodnutí použít posuvník na domovské stránce správné?

Při implementaci posuvníku na domovskou stránku často dochází k poměrně vážným problémům s použitelností. Ale pokud pečlivě zvážíte jeho implementaci na webu, může se posuvník stát užitečným designovým prvkem. Jeho předností jsou velké obrázky, které přilákat pozornost uživatele a autoscroll. Umožňuje zobrazovat nejrůznější obsah bez přetížení hlavní stránky.

Takže posuvník vlastně může stát se funkčním designovým prvkem, pokud je správně implementován a obsah je pečlivě promyšlen. Problémy ale zpravidla nastávají v praxi.

Během testování byly nalezeny funkční alternativy k posuvníkům umístěným na hlavní stránce. Technicky jsou mnohem jednodušší na implementaci a lze je použít pro mobilní i desktopové verze webu. Řešením je umístění bloků statického obsahu na domovskou stránku v kombinaci s doporučenými kategoriemi.

ČTĚTE VÍCE
Komu sluší vínová rtěnka?

Tato možnost spoléhá na to, že návštěvníci webu jednoduše posouvají stránku dolů. Toto je mnohem jednodušší design UX, který nabízí známé uživatelské prostředí na rozdíl od použití posuvníku.

Před umístěním posuvníku na hlavní stránku byste se proto měli zamyslet nad tím, že může být lepší uspořádat bloky obsahu staticky. Vyhnete se tak bolestem hlavy, které mohou nastat při snaze dokonale implementovat posuvník a poté zachovat jeho provoz. Pro většinu webů elektronického obchodu bude umístění statického obsahu nejlepším kompromisem.

Obsah v případě posuvníku je klíčový faktor. Posuvník bude funkčním UX řešením pouze v případě, že informace, které obsahuje, budou relevantní, pečlivě vybrané, vysoce kvalitní a optimalizované pro mobilní zařízení. Výsledky testování použitelnosti navíc ukázaly, že pokud by obsah umístěný na posuvníku nebyl pečlivě navržen, uvedlo by to uživatele v omyl do té míry, že by někteří z nich nepochopili, na jakém typu webu se nacházejí.

Dalším požadavkem při rozhodování o umístění posuvníku na domovskou stránku je proto poskytování kvalitního obsahu. I když se statickým umístěním informací použití špatného obsahu také negativně ovlivní vnímání návštěvníků webu.

Zbytek článku bude užitečný pro ty, kteří stále dávají přednost použití posuvníku na hlavní stránce a mají k tomu potřebné zdroje. Nastíní to 9 požadavků na to, aby posuvník správně fungoval na domovské stránce.

Proč automatické posouvání snímků vede k problémům v mobilních verzích webu

Obecně v desktopových verzích automatické posouvání snímků je dobrý nápad. Pomáhá distribuovat expozici a okamžitě dává jasně najevo, že se skutečně jedná o posuvník a ne o statický banner na hlavní stránce.

V mobilních verzích je však vše jinak. Pokud jde o automatické posouvání, klíčový rozdíl mezi mobilní a desktopovou verzí webu je nemožnost najet kurzorem myšina mobilních zařízeních.

Ve verzi pro stolní počítače lze záměr uživatele posoudit, když najede na obrázek posuvníku. To znamená, že je velmi pravděpodobné, že čte obsah snímku, a proto lze automatické posouvání pozastavit. V mobilní verzi však absence stavu visení znamená, že nelze rozeznat vhled do pravděpodobného záměru uživatele.

V důsledku toho během testování mobilní verze webu uživatelé, kteří si prohlíželi obsah v automatickém posuvníku, často neměli čas přečíst si informace na snímku. Nebo hůř, někteří účastníci se pokusili dotknout se sklíčka, aby zjistili více o tom, co na něm bylo, ale změnil se v poslední vteřině. To vedlo k neúmyslné navigaci na nesprávnou vstupní stránku.

Pokud uživatelé zaznamenali chybu, vždy to v nich vyvolalo pocit zklamání.

ČTĚTE VÍCE
Je možné mýt si vlasy moukou?

Existovala však malá podskupina účastníků testu, kteří neviděli, na co klikli na špatný odkaz. To vedlo k tomu, že tyto špatně interpretovali obsah stránky. Koneckonců to nemělo nic společného se snímkem, na který chtěli kliknout.

Vzhledem k tomu, že v současné době je pro člověka technicky nemožné ovlivnit rychlost změny snímků na mobilních verzích webu, neměli byste používat posuvník s automatickým posouváním. V tomto případě jednoznačně převažují zápory.

V praxi to znamená, že posuvníky in mobilní verze postrádají svou hlavní výhodu — poskytování přístupu k různému obsahu prostřednictvím automatického posouvání. A designéři a manažeři by měli vždy předpokládat, že naprostá většina uživatelů mobilních zařízení uvidí pouze první snímek a zbytek přeskočí.

Vzhledem k tomu, že v mobilní verzi je třeba se vyhnout automatickým posuvníkům, lze jako alternativu zvážit statické rozložení bloků obsahu. Pokud návrh stále zahrnuje použití posuvníku, pak by ovládání posuvu mělo být manuální. Měli byste také zvážit principy UX, které probereme níže.

3 pravidla UX pro vytvoření pohodlného posuvníku domovské stránky pro stolní i mobilní verze

Pokud zjistíte, že použití posuvníku na domovské stránce je stále preferovanou volbou pro desktopovou i mobilní verzi webu, je důležité dodržovat následující 3 pravidla UX.

Poznámka. Jsou nezávislé na platformě a jsou stejně použitelné pro jakoukoli verzi webu.

1) Pečlivě navržená sekvence snímků

Většina uživatelů neuvidí všechny snímky na hlavní stránce, i když se posouvají automaticky. Lidé na tomto místě nezůstávají tak dlouho.

Během testování měli uživatelé tendenci přejít na jinou stránku nebo se posouvat dolů dávno předtímjak začalo automatické rolování snímků. Stejná situace se opakovala v případě ručně ovládaných posuvníků.

To znamená, že sekvence snímků neuvěřitelně důležité protože první snímek získá mnohem více pozornosti než ostatní.

(Tip: Podívejte se na 42 % domovských stránek v mobilu s rizikem nesplnění očekávání uživatelů, kde se dozvíte více o tom, jak se lidé obvykle chovají, když se dostanou na domovskou stránku.)

2) Posuvníky by neměly být jedinou cestou k funkcím nebo obsahu

Dá se předpokládat, že kromě prvního snímku, který obdrží nejvíce zobrazení, někteří uživatelé neuvidí žádné další snímky.

Při testování většina lidí okamžitě zahájila strategii vyhledávání produktů (např. pomocí vyhledávací lišty, otevření hlavní navigace atd.), někdy ještě před načtením stránky. Proto pravděpodobně nikdy neviděli obsah prezentovaný v posuvníku.

Navíc je zde velké riziko, že některé slidery propadnou bannerové slepotě. Uživatelé tento obsah přes jeho centrální umístění přeskakují jednoduše proto, že jim připomíná reklamu.

Tak klíčové funkce webu by měl být dostupný ve více než jen posuvníku, protože mnoho uživatelů jej nikdy neuvidí.

Například byste tam neměli zadávat vyhledávání. Co by se pro něj mělo místo toho udělat samostatný odkaz v navigaci nebo celý blok na hlavní stránce.

ČTĚTE VÍCE
Co dát na hnisavý pupínek?

3) Ruční ovládání posuvníku by mělo být jasné

Je nesmírně důležité provést posuvné ovládací prvky dobře viditelné. Na většině webů jsou to indikační body. Jinak někteří uživatelé jednoduše nebudou vědět, že tam jsou.

Ostatní lidé, kteří si všimnou ovládacích prvků, se mohou setkat potíže v interakci s nimi. Indikátory mohou mít malé plochy k stisknutí.

Měli byste věnovat pozornost jak velikosti indikátorů, tak tomu, jak jasně jsou viditelné. Protože snímky jsou dynamické a budou se měnit, mělo by být testování vysokého kontrastu součástí procesu zajištění kvality při vytváření obsahu pro snímky. Pokud tečky splývají s obrázkem na pozadí, zvažte jejich umístění odděleně od snímků přímo pod nimi.

Konečně, kromě indikačních bodů, můžete zvážit použití šipek na levé a pravé straně obrázku. Další a předchozí šipky mají tu výhodu, že jsou pro uživatele snadněji rozpoznatelné.

3 další pravidla UX, která zajistí, že posuvník bude správně fungovat ve verzi pro stolní počítače při automatickém posouvání

Ve verzích webu pro stolní počítače by se snímky měly posouvat automaticky. Při implementaci automatického posouvání je však třeba dodržet tři podrobnosti, aby bylo zajištěno, že bude správně fungovat.

1) Snímky by se neměly měnit příliš rychle ani příliš pomalu

Při příliš rychlém rolování mají uživatelé pocit, že nemají dostatek času. Nebudou moci plně ocenit snímek, který jim přišel zajímavý.

Naopak, pokud se sklíčka mění příliš pomalu, lidé začínají být netrpěliví. A pokud aktivní snímek nezaujme jejich pozornost, přejdou k dalším designovým prvkům.

Tak extrémně důležité Pozastavení snímků při přejetí myší. Tato důležitá funkce aktuálně chybí 18 % všech testovaných webů, které mají na domovské stránce posuvník. Není žádným překvapením, že většina společností považuje posuvníky za neúčinné.

Automatické posouvání by se mělo znovu spustit, jakmile uživatel odstraní kurzor z oblasti posuvníku.

3) Automatické rolování by mělo být zastaveno po jakékoli aktivní interakci uživatele s posuvníkem

Pokud osoba interagovala s posuvníkem mimo něj (například aktivně změnila snímek pomocí ovládacích prvků), automatické posouvání by mělo být pozastaveno.

To neznamená, že tradiční posuvné ovládací prvky jako tlačítka Další nebo Zpět a indikátory posuvu nelze implementovat. Testování ale ukázalo, že by měly být na webu jako doplněk podpory pro gesta přejetí prstem a změny přiblížení.

2) Text na snímku by měl být jasný

Při auditu mobilních verzí webových stránek pomocí posuvníku bylo zjištěno, že text na některých snímcích je příliš malý.

Toto není vážný problém, pokud se o to postaráte jakýkoli text na snímcích zůstal čitelný při zmenšení na malou obrazovku mobilu. V ideálním případě je jakýkoli text na snímku HTML textem. Není součástí obrázku, což je obecně lepší pro účely přístupnosti a SEO.

ČTĚTE VÍCE
Co je lepší, toner nebo sérum?

3) Obsah na posuvníku by se měl načítat rychle

Obecně mají uživatelé mobilních zařízení tendenci méně trpělivý zpomalit načítání stránek.

To je něco, co je třeba mít na paměti, když zvažujete, jaký obsah zahrnout do posuvníku. Faktem je, že uživatelé rychle ztrácejí trpělivost, pokud se web načítá déle než sekundu (například grafický nebo animovaný obsah).

Jak řekl jeden účastník během testování při čekání na načtení stránky: “Všechno je teď pomalé.” [klepání prsty.] Nevím, jestli to má něco společného s mým internetovým připojením, telefonem nebo webovou stránkou. Na koho mám tedy svou netrpělivost nasměrovat? V této fázi jsem obvykle v pořádku. Opustil bych stránky a přešel na něco jiného. stránky by měly být rychlejší. pro mě osobně je to špatné, protože prostě nemám trpělivost. kdyby se to načítalo příliš dlouho, prostě bych opustit web.”

Ujistěte se, že jsou posuvníky dobře rozmístěny. V opačném případě byste měli vybrat bloky se statickým obsahem

Koneckonců, zatímco někteří lidé dobře reagují na velké obrázky na posuvníku, často přinášejí více škody než užitku. To je způsobeno mnoha nuancemi při jejich implementaci, které jsou nezbytné k dosažení účinnosti v posuvníku. Testování zjistilo, že dokonce i mezi 28 % nejlepších webů elektronického obchodu, které stále používají posuvník, má 41 % z nich vážné problémy s použitelností.

Všechny verze webů tedy musí splňovat následující tři pravidla:

  • pořadí snímků by mělo být zvoleno pečlivě
  • posuvník by neměl být jedinou cestou k funkcím nebo obsahu
  • ruční posuvné ovládání by mělo být zcela srozumitelné

Verze webů pro počítače s posuvníky, které používají automatické posouvání, musí splňovat tři další požadavky:

  • snímky by se neměly posouvat příliš rychle ani příliš pomalu (přibližně 5–10 sekund)
  • autoscroll by měl být pozastaven při najetí myší na oblast snímku
  • automatické posouvání by mělo být zastaveno po jakékoli aktivní interakci uživatele s posuvníkem

A konečně, posuvníky v mobilních verzích webu musí mít ruční ovládání. V jejich případě nelze plně implementovat autoscrolling. Je třeba zvážit další tři pravidla:

  • Podpora mobilních gest
  • text na snímcích by měl být čitelný, zvláště když je menší ve srovnání s desktopovou verzí webu
  • Obsah posuvníku by se měl načítat rychle

Pokud je obtížné dodržet těchto 9 pravidel při implementaci sliderů do desktopových a mobilních verzí stránek, pak se doporučuje použít jednodušší, ale efektivnější statické bloky pro jakoukoli verzi stránek, zejména mobilní.