Přejít k obsahu  Přejít k hlavnímu menu

Firemní weblog poradenské společnosti H1.cz

Zobrazit všechny články
Zpět

Přehyb webu: Nový přístup ke starému tématu

Chování lidí na webu se postupně mění s tím, jak se rozvíjí jejich uživatelská zkušenost. Příčinou je technický pokrok a s ním přicházející nová zařízení, lepší prohlížeče a tím pádem i širší možnosti v oblasti webdesignu. Ze stejného důvodu se mění i část doporučení v oblasti použitelnosti webů. V dnešním článku se podíváme na přehyb stránky. Přečtěte si, co se postupem času s přehybem stalo a jak se k němu při navrhování webů dnes nejlépe postavit.

Co je to přehyb?

Velmi zjednodušeně se jedná o imaginární linii na webu, která dělí část stránky viditelnou už při načtení stránky, a oblast, která bez posouvání po stránce není viditelná. Poměrně rozšířená je metafora přehybu s novinami, které leží na pultu v trafice. Výtisk leží většinou přeložený. Abyste viděli oblast pod přehybem, tedy spodní polovinu titulní stránky, musíte noviny vzít a otočit. A to vyžaduje vaši aktivitu – ale je to pořád méně námahy než pokud byste museli noviny vzít a otočit celou stránku. A proto se také v horní polovině titulní stránky uvádějí nejdůležitější informace – a to nejen v novinách, ale i na webu. Umístění přehybu na webu H1.cz.

(Téměř) neměnná pravidla použitelnosti

Obecně platí, že ačkoliv se technologie velmi rychle mění, chování uživatelů, a tedy i doporučení týkající se použitelnosti, se mění jen relativně pomalu. Je tomu tak proto, že použitelnost je z velké části závislá na tom, jakým způsobem náš mozek zpracovává informace. Ale aby to nebylo tak jednoduché, máme také zkušenosti, které naše zpracování informací ovlivňují. A ty se mohou měnit. Oborový guru Jakob Nielsen v roce 2005 provedl revizi 944 pravidel použitelnosti, která sepsalo americké letectvo pro své návrháře uživatelských rozhraní v polovině 80. let minulého století. Z 60 pravidel vybraných napříč všemi kapitolami původní zprávy jich i po 20 letech platilo 54, tedy 90 %. Přesto je právě přehyb jednou z oblastí, kde ke změnám doporučení v průběhu času došlo. Zatímco na počátku webu znělo jasně: Dělejte stránky krátké a nenuťte uživatele scrollovat dolů. Vše důležité umístěte nad přehyb a ideálně na webu nenechávejte nic dalšího. Už v roce 1997 Jakob Nielsen zajásal – dělat stránky delší, než byl přehyb, bylo nyní dovoleno. Tento proces později podpořilo i rozšíření myší se scrollovacím kolečkem. Uživatelé sice tvrdili, že takové stránky nemají rádi, statistiky a výzkumy ale ukazovaly opak. A tak po období debat o tom, zda to uživatelé rádi dlouhé, nebo krátké, se změnila i doporučení týkající se přehybu. Nyní musely být všechny klíčové informace nad přehybem a v místě přehybu bylo doporučováno umisťovat text nebo obrázek tak, aby vypadal „useknutý,“ a tedy nutil uživatele intuitivně scrollovat stránku dolů. Ovšem k tomu, abyste mohli navrhnout stránku tak, aby vypadala „useknutá,“ potřebujete vědět, kde se nachází přehyb. 

Kde ho tedy najdete?

Přehyb je dnes všude a nikde. Na cestě do práce na mobilním zařízení ho budete mít jinde než v práci, v práci jinde než doma – a to jsme stále u jediného uživatele. Tři nejčastější umístění přehybu, jak můžete vidět na grafu od ClickTale níže, se v roce 2006 týkala pouhých 10 % uživatelů. Nejde totiž jen o rozlišení obrazovky, ale také typ prohlížeče, nainstalované doplňky v prohlížeči a také třeba velikost okna. Graf umístění přehybu. V roce 2006 se nejčastější umístění přehybu týkalo necelých 10 % uživatelů. Dnes je to ještě méně. (Zdroj: ClickTale Blog). Abychom si to ještě více zkomplikovali, do hry vstupuje čím dál tím vyšší počet mobilních zařízení se zcela netypickým rozlišením a přibývájí nové možnosti, jak si personalizovat prohlížeč. 30 % uživatelů ve Spojených státech se pravidelně připojuje na internet z mobilních zařízení a odhady říkají, že v roce 2013 překročí počet přístupů k internetu z mobilních zařízení počty přístupů z pevného připojení. Obrázek ilustruje srovnání rozlišení monitorů návštěvníků webu H1.cz v letech 2006 a 2010. V roce 2006 mělo téměř 70 % návštěvníků jedno z dvou nejběžnějších rozlišení. Dnes to není ani 40 %.Čeho byste se tedy měli držet při návrhu webu, aby vyhovoval takto variabilnímu využití?

7 zásad pro přehyb stránky v roce 2010

1. Vyhněte se vodorovným liniím - pokud se stane, že některý uživatel uvidí linku na konci stránky, může si ji splést s koncem stránky nebo patičkou. Navíc je pravděpodobné, že toto pravidlo bude platit dlouhodobě. V případě vodorovné linky se totiž jedná o optické vodítko působící převážně podvědomě. 2. Není třeba se snažit všechno umístit nad přehyb. Pokud se budete snažit nahustit maximum obsahu nad přehyb, dopadne to tak, že z této části stránky vznikne nepřehledná změť odkazů, textu a grafických prvků. Nebojte se kolem důležitých prvků nechat více volného prostoru. Místo toho se neustále ptejte, jaké prvky jsou důležité a klíčové z hlediska obchodních cílů webu. 3. Navigaci raději umístěte do spodní části hlavičky. Uživatelé totiž často odscrollují horní část hlavičky, kde se nachází logo, vyhledávání, přepínač jazykových mutací a případné další konvenční navigační prvky. 4. Pokud to s webem myslíte vážně i do budoucna, zajistěte také mobilní verzi webu. Mobilní zařízení by mělo být automaticky detekováno a přesměrovat uživatele na mobilní verzi, která bude odpovídat pravidlům použitelnosti pro mobilní zařízení. Zároveň by měl mít uživatel možnost vrátit se na původní verzi webu. Použitelnost webu na mobilních zařízeních doporučujeme také otestovat. 5. Stále platí, že nejdůležitější je obsah. Pokud je stránka opravdu dlouhá, nabídněte na konci stránky odkazy na související informace – veďte uživatele dál bez toho, aby se museli vracet k navigaci. 6. Dlouhá stránka může být někdy příjemnější a vést k lepším výsledkům, než krátké stránky, kterých musíte projít mnoho. Například v případě, že máte v kategorii e-shopu hodně produktů, zvolte přiměřenou délku stránky do 2 000 px. Na začátku i na konci výpisu produktů uživatelům nabídněte možnost přizpůsobit si počet zobrazených produktů na stránce. 7. Texty ilustrujte obrázky. Uživatelé stránky spíše skenují, při scrollování pod přehybem to však platí dvojnásob. Jak se k problematice přehybu stavíte vy? Počítáte se zobrazováním webu na mobilních zařízeních s menším rozlišením? Těšíme se na vaše komentáře a zkušenosti.

  • havlikp
    26. 10. 2010 / 17:31

    Najdou se i (extrémně dlouhé) výjimky :-))

    https://www.conversion-rate-experts.com/…-case-study/

  • Petr Staníček
    26. 10. 2010 / 18:59

    Hledám nějaké další stopy humoru, který naznačuje ta hravá práce s letopočty, ale jiné už najít namůžu. To je nějaký interní vtípek hájedničky, nebo vám utekl předčasně/opožděně aprílový článek?

  • Petr (internetový marketing)
    27. 10. 2010 / 08:35

    Souhlasím s doporučeními, radím klientům umístit hlavní informace a výzvy k akci výš a pokud je nutné jít pod ohyb, tak to udělat tak, aby bylo vidět, že tam něco je, doporučuji často i článek rozdělit a nechat uživatele kliknout na „Čti více“ pro více informací.

  • Václav Štrupl
    27. 10. 2010 / 09:08

    Každopádně, v téhle době samozřejmě nešlo o pravidla webové použitelnosti, ale o použitelnost uživatelských rozhraní elektronickcýh systémů obecně. Faktem je, že z těchto pravidel se následně první pravidla použitelnosti webů odvíjela a v mnohém se velmi podobala. Pokud některá formulace v článku svádí k jiné interpretaci, rádi ji opravíme.

  • Yuhů
    27. 10. 2010 / 11:03

    Tak jestli chcete chyby na opravy, tak třeba namátkou to tvrzení o deseti procentech v roce 2006: "V roce 2006 se nejčastější umístění přehybu týkalo necelých 10 % uživatelů. Dnes je to ještě méně. " Přitom tyhle procentní body lze zvýšit nebo srazit pouhým zjemněním nebo naředěním kroku histogramu. Teď je tam krok po deseti pixelech, stačí dát krok 40 pixelů a hned bude uživatelů s nejčastější výškou 30 %.

    Mám-li k tomu přidat pozitivní postřeh, tak: kdykoli jsem se na webu setkal s někým, kdo mluvil o přehybu, šlo o reklamu. Při prodeji horké vody je každá nálepka dobrá, takže pro kůloučké marketéry je přehyb pořád in.

  • Blanka Mikulášková
    27. 10. 2010 / 11:50

    Díky za postřeh. Máte pravdu, bylo to ovšem myšleno při zachování intervalu dané statistiky (srovnávat dvě odlišné statistiky bez výslovného upozornění v článku by mě nenapadlo :). A co se týče reklamy – ve spodní části stránky by mohla mít dokonce lepší výsledky – většinou se zde návštěvníci zdrží o něco déle (během scrollování uživatelé spíš skenují, dole bývá na očních kamerách více fixací). A na webu, kde lidé píší komentáře (jako například na tomhle blogu), bych jako zadavatel neváhala zvolit reklamní prostor právě v dolní části – u pole k vložení komentáře, ankety, stránkování atd. Záleží tedy spíš na obsahu konkrétní stránky.

  • Petr Staníček
    27. 10. 2010 / 21:11

    [4] OK, když si o to otevřeně koledujete, tak prosím. Jen mě překvapuje, že jste ochotni si takhle veřejně kazit odbornou pověst. Nesmíte se zlobit, ale vždyť jste v pozici řekněme Ústavu dějin AV, který vydá článek o tom, jaké byly sociální nepokoje za první republiky premiéra Masaryka koncem 19. století… Jistěže infomační hodnota o podstatě těch sociálních bouří může zůstat stále vysoká, ale hodnověrnost a autorita je s tak frapantně chybnými historickými údaji ta tam. A upřímně, kdo má o historii webu v téhle zemi vědět víc než odborníci z expertní firmy, za jakou se stavíte?

    Ale OK, kdo chce kam…

    • „Jakob Nielsen (…) provedl revizi 944 pravidel, která byla k použitelnosti uživatelských rozhraní napsána v roce 1986.“ Když si přečtete ten Alertbox pořádně, dozvíte se, že se jednalo o interní dokument US Air Force pro tvorbu vojenských řídicích a kontrolních systémů běžících převážně na sálových počítačích a Nielsen ho zmiňuje čistě jen pro porovnání s jeho vlastními pravidly vytvořenými pro web – o 10–20 let později. Ta původní pravidla jsou v daném kontextu zcela irelevantní.
    • „intranety“ (které jste už, jak koukám, v textu opravili na „uživatelská rozhraní“) jsou lokální implementace internetových technologií a v roce 1986 byste jich opravdu moc nenašli („The first intranet websites and home pages began to appear in organizations in 1990–1991“). Popravdě si myslím, že v roce 1986 slovo „intranet“ ještě ani neexistovalo.
    • „Psal se rok 1994 a uživatelé na webu z velké části ignorovali části webu pod přehybem.“ Kdepak. Psal se rok 1994 a větsina světa neměla o existenci nějakého internetu ani ponětí. Před rokem se teprve objevil vůbec první webový prohlížeč (Mosaic, © 1993), na web se připojily první vládní instituce, celý web je tvořen asi 50 www servery a velký internetový boom právě startuje. Okouzlení uživatelé se web teprve učí používat a něco jako „části webu pod přehybem“ jsou věcí neznámou – především proto, že webové stránky jsou ještě nekomerční a tvořené v zásadě čistým obsahem (ono HTML v té době stejně umělo jen souvislý formátovaný text a nanejvýš jej přerušit nějakým obrázkem).
    • V roce 1995 sice bylo prvně vyrobeno scrolovací kolečko, ale nad ním Nielsen v roce 1997 určitě nejásal. Ostatně v tom Alertboxu z roku 1997 mluví o scrollování, slovo „wheel“ tam nenajdete. Především proto, že myši s kolečkem se začaly masově používat až koncem 90. let, samozřejmostí jsou až od počátku tisíciletí. Nielsen mluví o scrolování, čímž (samozřejmě) myslí posouvání scrolbaru nebo používání klávesových zkratek. Smysl a vypovídací hodnota celého odstavce se tím docela mění.
    • Všechny ty zavádějící údaje ve spojení s prvním odstavcem vytvářejí v nepoučeném čtenáři dojem, že web tu byl už někdy od 80. let a už tehdy se na něm řešila problematika foldu – přičemž tento problém na webu se řeší spíš až od konce 90. let, kdy začala webem hýbat komerce a „problém fold“ byl noční můrou lidí od reklamy, ale v zásadě nikoho jiného netrápil. A všechny zmíněné historické souvislosti jsou jen návaznosti na řešení PODOBNÉHO (nikoli stejného) problému v jiných médiích – okrajově šlo i o nějaké počítačové systémy na úrovni terminálů mainframů, ale především se řešil v tištěných médiích, odkud jak samotný pojem, tak i celá související problematika pocházejí.

    Upřímně: pro mě není vůbec ostudou, že jste článek plný takovýchto chybných reálií publikovali, to se stane. Ale to, jak se k tomu stavíte. Nejen že sami ty historické nesouvislosti nevidíte, ale že je i odmítáte přiznat jakožto nepodstatné. Co na tom, že Masaryk ve skutečnosti nedělal předsedu vlády Franzi Josefovi, když Musolini válčil s Napoleonem – hlavní jsou ty sociální bouře, ty jsme myslím popsali celkem pěkně, že.

  • David Spinar
    27. 10. 2010 / 22:23

    Dekujeme ti, Pixy, zes to nam i nasim ctenarum tak pekne didakticky vysvetlil. Je pekne, ze jsou mezi nami jeste lide s takovym smyslem pro detail.

  • jiří suchý
    27. 10. 2010 / 23:12

    @Yuhů – já nevím, my jsme v o2 marketéry o neplatnosti argumentu přehybem poměrně jednoduše přesvědčili už před dvěma lety, přestože je před třemi lety naši bývalí kolegové v oblasti veledůležitého přehybu náležitě edukovali… z mojí zkušenosti je to jenom jedna z dalších přifouknutých bublin – stačí brát věci s nadhledem a dogmata neexistují

  • Filosof
    28. 10. 2010 / 08:44

    [7] Palec nahoru.

  • Petr Stohwasser
    28. 10. 2010 / 11:58

    [8] Dobrý den, Davide.

    Z Vaší reakce na Pixyho komentář cítím notnou dávku ironie. Pokud se pletu a komentář Vás opravdu oslovil, nebylo by lepší ty bláboly v článku smazat a Pixymu poděkovat lepším způsobem?

    Přijde mi, že H1.cz nosí den ode dne nos více nahoru, avšak kvalita klesá dolů.

  • Václav Štrupl
    28. 10. 2010 / 12:07

    [7] Díky za doplnění, Petře. Článek na základě Tvých (správných) korekcí po víkendu opravíme, aby odpovídala nejen na konci uvedená doporučení, ale i historické reálie.

  • Jan Peroutka
    30. 10. 2010 / 09:36

    Za předpokladu (možná zcela mylného), že autorkou je sl./pí Mikulášková se při „hodnocení kvality“ příspěvku dá dost možná vycházet z autorčina „profilu“ (https://www.h1.cz/tym#…), který není zrovna těmto věcem nakloněn… Pak asi není moc co řešit. A nebo to napsal někdo jiný a pak…

  • Václav Štrupl
    02. 11. 2010 / 11:30

    Článek jsme upravili a věřím, že ho lze nyní považovat za korektní i z pohledu historických souvislostí. Ještě jednou díky Petru Staníčkovi za připomínky.

RSS feed komentářů k tomuto článku
RSS feed komentářů ke všem článkům



(nebude zveřejněn)



Položky označené * jsou povinné
Vaše osobní údaje jsou u nás jako v bavlnce, nikomu je nedáme. Informujte se zde.