Komplexní prezentace na téma použitelnost (usability) - jak mít úspěšný a přátelský web? Podívejme se na toto téma ve formě ukázek krok za krokem a poznejme taje a zákoutí této silně se rozvíjející oblasti.
2. Jaký 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 .
3. Jaký má být cíl stránek? Poskytnout lidem to , co hledají . Jednoduše Přehledně Rychle
5. Rozlož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 :
13. Navigace 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
19. 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 . Vyhledávání na webu
21. 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ů 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
23. 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. Objednávkový proces
24. 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? 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.;
26. 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:
27. 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. Nákupní košík
29. Formulář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é.
34. Texty na webu Texty jsou nejdůležitější součástí internetových stránek. Jsou důležité pro uživatele i pro roboty. Uživatelé hodnotí přínos webu na základě textů, 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.
35. Texty 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í.
36. Proč je důležitý titulek a popisek stránky? <Title> <Description> http://blog.seo-expert.cz/jak-vytvorit-ucinny-popisek-stranky-ve-vysledcich-hledani
37. Texty 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.
38. Jak text prodává http://www.kkk-zlin.cz/ http://www.aaapapir.cz/
40. 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 …
41. Často nestačí pouhý výpis technických parametrů . Lidé chtějí vědět více informací o daném výrobku.
42. Grafika 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/
43. Obrá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.
44. Kontrast 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í.
47. Budoucnost 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/
53. 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