Proč mít použitelný web?Myslete především na své uživatele

1

Michael Muselík

Jaký je použitelný webJaký je použitelný web

• Použitelný web se pozná podle toho, že se na něm lidé neztrácejí a jsou schopni vždy najít, co hledají.

• Použitelný web je ten, na kterém se lidem příjemně nakupuje.

2

Jaký má být cíl stránek?Jaký má být cíl stránek?

Poskytnout lidem to, co hledají.

• Jednoduše

• Přehledně

• Rychle

3

Z čeho se tedy skládá použitelnost?Z čeho se tedy skládá použitelnost?

4

Rozložení stránekRozložení stránek

• Existují zažitá pravidla, která uživatelé znají a očekávají je na každém webu.

• Pokud umístíte hlavní navigaci či vyhledávání nestandardně, vězte, že uživatelé budou zmateni.

Podívejme se na reálné případy:

5

6

Amazon.comAmazon.com

7

8

9

10

11

12

NavigaceNavigace

Navigace je velmi důležitá, neboť říká, co web obsahuje - jaké jsou jeho hlavní kategorie a kde se uživatel právě nachází – v které kategorii. Navigace je stejně důležitá jako orientační tabule v budovách či ukazatele směru na silnicích.

•Navigace musí usnadnit procházení webu•Jednotlivé položky menu musí být jasné a srozumitelné•Navigace musí být oddělena od hlavního obsahu•Na rozsáhlých webech používejte mapu webu•Názvy odkazů sjednoťte s názvy i hlavními nadpisy stránek

13

14

Příklady navigacePříklady navigace

15

Příklad kompletní navigace macys.com

Příklad kompletní navigace macys.com

16

Příklad kompletní navigace megapixel.cz

Příklad kompletní navigace megapixel.cz

17

Příklady špatné navigacePříklady špatné navigace

18

Drobečková navigaceDrobečková navigace

• Prohledávání webu je velmi důležitou a především užitečnou funkcí, neboť usnadní návštěvníkům nalezení konkrétní informace.

• Vyplatí se u rozsáhlých webů, obsahujících množství textových informací, kdy potřebujeme najít konkrétní informaci. V takovém případě bychom měli mít fulltextové vyhledávání, které prohledává celý obsah webu a vrací relevantní výsledky.

• Nesmíme jej ani podceňovat u e-shopů, kde bychom měli prohledávat minimálně v názvech výrobků i kategoriích.

19

Vyhledávání na webuVyhledávání na webu

20

Vyhledávání na webuVyhledávání na webu

http://www.elektro-kuchyne.cz/

21

Filtrování výsledkůFiltrování výsledků

• Velmi užitečné je u e-shopů filtrování zboží podle výrobců, či různých parametrů, stejně jako řazení podle ceny, názvu či vypsání položek skladem.

• Návštěvníkovi to výrazné usnadní orientaci mezi množstvím výrobků.

http://www.elektro-kuchyne.cz/domaci-pekarny

22

Filtrování výsledkůFiltrování výsledků

• Další krásný příklad, jak návštěvníkům usnadnit procházení jednotlivých kategorií a vyhledání zboží podle jeho představ.

http://www.alza.cz/mp3/prenosne-prehravace/pamet-flash/18844915.htm

• Objednávkový proces je stěžejní částí e-shopu a končí v něm často veliké procento uživatelů,

• Je tedy velmi důležité, aby byl objednávkový proces intuitivní, přehledný, jasný, srozumitelný a rychlý.

• Zbytečné kroky odrazují mnoho uživatelů, stejně jako požadování nepotřebných údajů pro vyřízení objednávky.

• Registrace odrazuje až 31 % uživatelů.

• Čím méně kliknutí na dokončení objednávky, tím lépe.

• Čím méně údajů k vyplnění, tím lépe.

23

Objednávkový procesObjednávkový proces

24

Proč lidé nedokončí objednávkový proces?

Proč lidé nedokončí objednávkový proces?

http://econsultancy.com/blog/1459-why-do-customers-abandon-the-checkout-process

25

Kde lidé opouštějí objednávkový proces?

Kde lidé opouštějí objednávkový proces?

Dobrým zdrojem je Google analytics, kde si nastavíte vizualizaci dosažení cíle a sledujete, kudy lidé odcházejí a kam. Proč už musíte zjistit sami detailní analýzou konkrétních stránek.;

Jak znázornit navigaci objednávkového procesu?

Jak znázornit navigaci objednávkového procesu?

Mnoho e-shopů má objednávkový proces rozdělen na několik částí (kroků). Pro lepší orientaci v objednávkovém procesu je vhodné, vytvořit navigaci celého procesu, která znázorňuje jednotlivé jeho kroky a jejich posloupnost. Uživatel tak ihned ví, co jej čeká a v které části nákupu se nachází.

MegaPixel:

Kasa:

Vltava:

26

Nákupní košík vašeho e-shopu je stejně důležitý, jako nákupní košík v supermarketu. Nemůžete bez něj nakupovat.

•Nákupní košík by měl být opticky výrazný,

•měl by obsahovat celkovou cenu nákupu a počet položek v něm,

•měl by být na každé stránce vždy na stejném místě, nejlépe v hlavičce webu či těsně pod ní,

•měl by být odkazem na výpis košíku.

27

Nákupní košíkNákupní košík

28

Příklady nákupního košíkuPříklady nákupního košíku

FormulářeFormuláře

Důležitou součástí webových stránek bývají formuláře.

Na webu se můžete setkat s následujícími typy formulářů:

•poptávkové formuláře,

•registrační formuláře či

•objednávkové formuláře.

Hlavní zásadou je co nejméně údajů a co nejméně nepotřebných údajů.

Formuláře by měly být přehledné i opticky a měly by mít výrazné primární tlačítko. V případě, že mají více tlačítek, hlavní tlačítko by mělo být opticky výrazné.

29

Příklady formulářůPříklady formulářů

30

Příklady formulářůPříklady formulářů

31

Příklady formulářůPříklady formulářů

32

http://www.ferro-ok.cz/form.htm

Příklady formulářůPříklady formulářů

33

http://www.ferro-ok.cz/formular.htm

Texty na webuTexty na webu

• Texty jsou nejdůležitější součástí internetových stránek.

• Jsou důležité pro uživatele i pro roboty. o Uživatelé hodnotí přínos webu na základě textů, o roboti hodnotí obsah webu a relevantnost k hledanému dotazu na základě textů.

• Důležitá je také přehlednost textových informací, neboť lidé nečtou na webu slovo od slova, ale skenují text a hledají nejdůležitější informace.

• Proto je velmi důležitá správná struktura a sémantické zvýrazňování textu.

34

Texty na webuTexty na webu

• Titulek stránky TITLE by měl být pro každou stránku webu vždy

jedinečný, měl by být stručný a výstižný (max. 60 znaků), obsahovat

klíčové slovo a měl by shrnovat to nejdůležitější z dané stránky. Měl by

také obsahovat název webu.

• Popisek stránky DESCRIPTION by měl jedinečný pro každou stránku

webu a měl by shrnovat nejdůležitější informaci dané stránky. Jeho délka

je max. 150 – 200 znaků.

• Titulek stránky (TITLE) a její popisek (DESCRIPTION), spolu s úvodním

odstavcem zásadně ovlivňují klikatelnost na odkaz ve výsledcích hledání.

35

Proč je důležitý titulek a popisek stránky?

Proč je důležitý titulek a popisek stránky?

<Title>

<Description>

36

http://blog.seo-expert.cz/jak-vytvorit-ucinny-popisek-stranky-ve-vysledcich-hledani

http://blog.seo-expert.cz/jak-vytvorit-ucinny-popisek-stranky-ve-vysledcich-hledani

Texty na webuTexty na webu

• Hlavní nadpis H1 musí být pro každou stránku vždy jedinečný a měl by nést nejdůležitější informaci celé stránky.

• Úvodní odstavec musí shrnovat to nejdůležitější z dané stránky a musí přimět návštěvníka ke čtení a pokračování procházení webu. Musí nabídnout něco zásadního, co získá uživatel. Musí jej přesvědčit,a by četl dál.

• Podnadpisy musí vytvářet kostru stránky.

• Hlavní informace a klíčová slova musejí být ztučněny.

• Hlavní nabídka či výhody by měly být napsány formou seznamu s odrážkami, kde jsou informace přehledné a výrazné.

• Každá stránka musí mít pokračování, výraznou výzvu k akci, která uživatele přiměje pokračovat či jej přímo vyzve k objednání či odeslání poptávky, dotazu či registrace.

• Texty by měly být navzájem provázány odkazy, které budou vždy obsahovat klíčová slova.

37

Jak text prodáváJak text prodává

38

http://www.kkk-zlin.cz/ http://www.aaapapir.cz/

Jak text prodává

Popisky výrobkůJak text prodává

Popisky výrobkůHračička.net Kasa.cz

39

Texty musí lákat!Texty musí lákat!

Vidíte, jaká slova používá web prodej-pneu.cz?

„speciální konfiguraci bloků“„skvělá ovladatelnost“„přesnost řízení“„komfortní jízda s nízkou hlučností“

Text na stránce je správně opticky strukturován (nadpisy, oddíly, odstavce), důležité informace jsou vypsány pomocí sezamů.

Chybí však ztučnění důležitých slov v textu.

Porovnejte s podobným produktem na jiné stránce …

40

• Často nestačí pouhý výpis technických parametrů.

Lidé chtějí vědět více informací o daném výrobku.

41

Grafika stránekGrafika stránek

Grafika by měla vždy odpovídat zaměření a cílům webu. Měla by být konzistentní na všech stránkách webu.

•Je-li web informační, měly by být grafika jednoduchá a elegantní.

•Je-li web zaměřený na prodej, měly by být výrazné především obrázky nabízených produktů.

•Je-li web zábavní, měla by tomu odpovídat i jeho grafika.

Pár příkladů za všechny:

•http://www.google.cz/

•http://www.megapixel.cz/

•http://kindersurprise.cz/

•http://home.disney.go.com/

Příklady přehnané grafiky:

•www.ingstuksa.cz

•http://shopping.msn.com/

42

ObrázkyObrázky

• Obrázky na webu používejte co nejmenší (rozměrově i datově).

• Vždy používejte alternativní textové popisky alt. Popisek by měl slovy vyjádřit obsah obrázku.

• Obrázky používejte pouze k doplnění a vyjádření obsahu, ne jen proto, abyste na webu měli nějaké obrázky.

• Omezte počet obrázků na nutný počet.

• Nevkládejte obrázky na pozadí, snižuje to čitelnost textu.

• Nepoužívejte animace k upoutání pozornosti.

• Nikdy neanimujte navigaci či logo se sloganem.

43

Kontrast a čitelnost textuKontrast a čitelnost textu

• Text musí být vždy dostatečně čitelný. Nebudou-li si moci lidé přečíst vaše informace, či velmi špatně, odejdou jinam!

• Pokud je text špatně čitelný, odradíte mnoho uživatelů se zrakovým omezením, s různými zobrazovacími zařízeními či seniory.

• Vždy nastavte dostatečnou velikost základního textu, stejně jako kontrast vůči jeho pozadí.

44

Kontrast a čitelnost textuKontrast a čitelnost textu

45

http://www.oriflame-prace.cz/

• http://www.websiteoptimization.com/services/analyze/

• http://chrispederick.myacen.com/work/firefox/webdeveloper/

• http://nontroppo.org/wiki/WebDevToolbar (Opera)

• http://www.nils.org.au/ais/web/resources/toolbar/ (IE)

• http://pristupnost.nawebu.cz/nastroje/cca.php (desktopová aplikace)

• http://juicystudio.com/article/colour-contrast-analyser-firefox-

extension.php (FireFox extension)

46Kontrast a čitelnost textu

NástrojeKontrast a čitelnost textu

Nástroje

Budoucnost použitelnostiBudoucnost použitelnosti

• Spočívá především v personalizaci. A to jak obsahu a obsahových modulů, tak ve vzhledu stránek.

• Uživatelé jsou rádi a ocení, mohou-li si přizpůsobit stránky podle sebe, svých požadavků, představ i vkusu. Umožněte jim to. Pak budou mít vaše stránky rádi, budou se na ně vracet a budou je doporučovat svým známým. Vám tak poroste návštěvnost i konverzní poměr webu. A o to jde především.

• Velmi zajímavou možností jsou Ajaxové aplikace, které jednoduchým způsobem umožní přizpůsobení stránek svým potřebám.

• www.bbc.co.uk

• http://www.google.cz/ig?hl=cs&source=iglk

• http://seznam.cz/

47

Příkladhttp://shopping.msn.com

48

49

Příklad mluvící za všehttp://now.sprint.com/widget/

50

51

Co můžeme nabídnout ?

52

Co můžeme nabídnout ?Co můžeme nabídnout ?

Audit použitelnosti:

• určeno pro zhodnocení stavu, nikoliv navržení doporučení oprav chyb

• cena 10 000 Kč (web/eshop), rozsáhlé portály 15 000 Kč

• doba dodání: 5 dnů

Analýza použitelnosti:

• určeno pro detailní vypsání chyb a navrhnutí optimálních doporučení

• cena 25 000 Kč (web/eshop/portál), rozsáhlé portály 30 000 Kč

• doba dodání: 7 dnů

Dlouhodobé zvyšování použitelnosti vašich internetových portálů / webů / eshopů

• (Zvyšování konverzních poměrů a úspěšnosti internetového portálu / webu / eshopu)

• Navrhování analýz použitelnosti a jejich opětovná kontrola

• Monitoring chování uživatele na vašem portále

• Uživatelské testování a závěry pro zlepšení vašeho portálu

• Kvartální bilance a porovnání výsledků

• Doporučená cena: 5 000 Kč / měsíc (web) nebo 8 000 Kč / měsíc (eshop) nebo 10 000 Kč / měsíc (portál)

Uživatelské testování na subjektech:

• individuální cena dle rozsahu, min. od 80 000 Kč za 5 subjektů + závěrečná zpráva

53

Otázky?

54