Proč mít použitelný web? Myslete především na své uživatele Michael Muselík
Jaký je použitelný web <ul><li>Použitelný web se pozná podle toho, že se na něm lidé  neztrácejí  a jsou schopni vždy  naj...
Jaký má být cíl stránek? <ul><li>Poskytnout lidem to , co hledají . </li></ul><ul><ul><ul><ul><li>Jednoduše </li></ul></ul...
Z čeho se tedy skládá použitelnost?
Rozložení stránek <ul><li>Existují zažitá pravidla, která uživatelé  znají a očekávají  je na každém webu. </li></ul><ul><...
Amazon.com
Navigace <ul><li>Navigace je velmi důležitá, neboť říká, co web  obsahuje  - jaké jsou jeho hlavní kategorie a kde se uživ...
Příklady navigace
Příklad kompletní navigace macys.com
Příklad kompletní navigace megapixel.cz
Příklady špatné navigace
Drobečková navigace
<ul><li>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...
Vyhledávání na webu http://www.elektro-kuchyne.cz/
Filtrování výsledků <ul><li>Velmi užitečné je u e-shopů  filtrování zboží  podle výrobců, či různých parametrů, stejně jak...
Filtrování výsledků <ul><li>Další krásný příklad, jak návštěvníkům usnadnit  procházení  jednotlivých kategorií a  vyhledá...
<ul><li>Objednávkový proces je  stěžejní částí  e-shopu a končí v něm často  veliké procento  uživatelů, </li></ul><ul><li...
Proč lidé nedokončí objednávkový proces? http://econsultancy.com/blog/1459-why-do-customers-abandon-the-checkout-process
Kde lidé opouštějí objednávkový proces? Dobrým zdrojem je Google analytics, kde si nastavíte  vizualizaci dosažení cíle  a...
Jak znázornit navigaci objednávkového procesu? <ul><li>Mnoho e-shopů má objednávkový proces rozdělen na  několik částí  (k...
<ul><li>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. ...
Příklady nákupního košíku
Formuláře <ul><li>Důležitou součástí webových stránek bývají  formuláře .  </li></ul><ul><li>Na webu se můžete setkat s ná...
Příklady formulářů
Příklady formulářů
Příklady formulářů http://www.ferro-ok.cz/form.htm
Příklady formulářů http://www.ferro-ok.cz/formular.htm
Texty na webu <ul><li>Texty jsou  nejdůležitější součástí  internetových stránek. </li></ul><ul><li>Jsou důležité pro uživ...
Texty na webu <ul><li>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ýs...
Proč je důležitý titulek a popisek stránky? <Title> <Description> http://blog.seo-expert.cz/jak-vytvorit-ucinny-popisek-st...
Texty na webu <ul><li>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ší informac...
Jak text prodává http://www.kkk-zlin.cz/   http://www.aaapapir.cz/
Jak text prodává Popisky výrobků <ul><li>Hračička.net </li></ul><ul><li>Kasa.cz </li></ul>
Texty musí lákat! Vidíte, jaká slova používá web prodej-pneu.cz? „ speciální konfiguraci bloků“ „ skvělá ovladatelnost“ „ ...
<ul><li>Často nestačí pouhý  výpis  technických  parametrů .  Lidé chtějí vědět  více   informací  o daném výrobku.  </li>...
Grafika stránek <ul><li>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...
Obrázky <ul><li>Obrázky na webu používejte co  nejmenší  (rozměrově i datově). </li></ul><ul><li>Vždy používejte  alternat...
Kontrast a čitelnost textu <ul><li>Text musí být vždy dostatečně  čitelný . Nebudou-li si moci lidé přečíst vaše informace...
Kontrast a čitelnost textu http://www.oriflame-prace.cz/
<ul><li>http://www.websiteoptimization.com/services/analyze/ </li></ul><ul><li>http://chrispederick.myacen.com/work/firefo...
Budoucnost použitelnosti <ul><li>Spočívá především v  personalizaci . A to jak obsahu a obsahových modulů, tak ve vzhledu ...
Příklad http://shopping.msn.com
Příklad mluvící za vše http://now.sprint.com/widget/
Co můžeme nabídnout ?
Co můžeme nabídnout ? <ul><li>Audit použitelnosti:  </li></ul><ul><li>určeno pro zhodnocení stavu, nikoliv navržení doporu...
Otázky?
Upcoming SlideShare
Loading in …5
×

Pouzitelnost - jak mit uspesny a pratelsky web?

2,238 views

Published on

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.

0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,238
On SlideShare
0
From Embeds
0
Number of Embeds
13
Actions
Shares
0
Downloads
34
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Pouzitelnost - jak mit uspesny a pratelsky web?

  1. 1. Proč mít použitelný web? Myslete především na své uživatele Michael Muselík
  2. 2. Jaký je použitelný web <ul><li>Použitelný web se pozná podle toho, že se na něm lidé neztrácejí a jsou schopni vždy najít, co hledají . </li></ul><ul><li>Použitelný web je ten, na kterém se lidem příjemně nakupuje . </li></ul>
  3. 3. Jaký má být cíl stránek? <ul><li>Poskytnout lidem to , co hledají . </li></ul><ul><ul><ul><ul><li>Jednoduše </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Přehledně </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Rychle </li></ul></ul></ul></ul>
  4. 4. Z čeho se tedy skládá použitelnost?
  5. 5. Rozložení stránek <ul><li>Existují zažitá pravidla, která uživatelé znají a očekávají je na každém webu. </li></ul><ul><li>Pokud umístíte hlavní navigaci či vyhledávání nestandardně, vězte, že uživatelé budou zmateni . </li></ul><ul><li>Podívejme se na reálné případy : </li></ul>
  6. 6. Amazon.com
  7. 7.
  8. 8.
  9. 9.
  10. 10.
  11. 11.
  12. 12.
  13. 13. Navigace <ul><li>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. </li></ul><ul><li>Navigace musí usnadnit procházení webu </li></ul><ul><li>Jednotlivé položky menu musí být jasné a srozumitelné </li></ul><ul><li>Navigace musí být oddělena od hlavního obsahu </li></ul><ul><li>Na rozsáhlých webech používejte mapu webu </li></ul><ul><li>Názvy odkazů sjednoťte s názvy i hlavními nadpisy stránek </li></ul>
  14. 14. Příklady navigace
  15. 15. Příklad kompletní navigace macys.com
  16. 16. Příklad kompletní navigace megapixel.cz
  17. 17. Příklady špatné navigace
  18. 18. Drobečková navigace
  19. 19. <ul><li>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 . </li></ul><ul><li>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. </li></ul><ul><li>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 . </li></ul>Vyhledávání na webu
  20. 20. Vyhledávání na webu http://www.elektro-kuchyne.cz/
  21. 21. Filtrování výsledků <ul><li>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 . </li></ul><ul><li>Návštěvníkovi to výrazné usnadní orientaci mezi množstvím výrobků. </li></ul>http://www.elektro-kuchyne.cz/domaci-pekarny
  22. 22. Filtrování výsledků <ul><li>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 . </li></ul>http://www.alza.cz/mp3/prenosne-prehravace/pamet-flash/18844915.htm
  23. 23. <ul><li>Objednávkový proces je stěžejní částí e-shopu a končí v něm často veliké procento uživatelů, </li></ul><ul><li>Je tedy velmi důležité, aby byl objednávkový proces intuitivní, přehledný, jasný, srozumitelný a rychlý . </li></ul><ul><li>Zbytečné kroky odrazují mnoho uživatelů, stejně jako požadování nepotřebných údajů pro vyřízení objednávky. </li></ul><ul><li>Registrace odrazuje až 31 % uživatelů. </li></ul><ul><li>Čím méně kliknutí na dokončení objednávky, tím lépe. </li></ul><ul><li>Čím méně údajů k vyplnění, tím lépe. </li></ul>Objednávkový proces
  24. 24. Proč lidé nedokončí objednávkový proces? http://econsultancy.com/blog/1459-why-do-customers-abandon-the-checkout-process
  25. 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. 26. Jak znázornit navigaci objednávkového procesu? <ul><li>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í. </li></ul><ul><li>MegaPixel: </li></ul><ul><li>Kasa: </li></ul><ul><li>Vltava: </li></ul>
  27. 27. <ul><li>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. </li></ul><ul><li>Nákupní košík by měl být opticky výrazný, </li></ul><ul><li>měl by obsahovat celkovou cenu nákupu a  počet položek v něm, </li></ul><ul><li>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í, </li></ul><ul><li>měl by být odkazem na výpis košíku. </li></ul>Nákupní košík
  28. 28. Příklady nákupního košíku
  29. 29. Formuláře <ul><li>Důležitou součástí webových stránek bývají formuláře . </li></ul><ul><li>Na webu se můžete setkat s následujícími typy formulářů: </li></ul><ul><li>poptávkové formuláře, </li></ul><ul><li>registrační formuláře či </li></ul><ul><li>objednávkové formuláře. </li></ul><ul><li>Hlavní zásadou je co nejméně údajů a co nejméně nepotřebných údajů. </li></ul><ul><li>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é. </li></ul>
  30. 30. Příklady formulářů
  31. 31. Příklady formulářů
  32. 32. Příklady formulářů http://www.ferro-ok.cz/form.htm
  33. 33. Příklady formulářů http://www.ferro-ok.cz/formular.htm
  34. 34. Texty na webu <ul><li>Texty jsou nejdůležitější součástí internetových stránek. </li></ul><ul><li>Jsou důležité pro uživatele i pro roboty. </li></ul><ul><ul><ul><li>Uživatelé hodnotí přínos webu na základě textů, </li></ul></ul></ul><ul><ul><ul><li>roboti hodnotí obsah webu a relevantnost k hledanému dotazu na základě textů. </li></ul></ul></ul><ul><li>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. </li></ul><ul><li>Proto je velmi důležitá správná struktura a sémantické zvýrazňování textu. </li></ul>
  35. 35. Texty na webu <ul><li>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. </li></ul><ul><li>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ů. </li></ul><ul><li>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í. </li></ul>
  36. 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. 37. Texty na webu <ul><li>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. </li></ul><ul><li>Ú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. </li></ul><ul><li>Podnadpisy musí vytvářet kostru stránky. </li></ul><ul><li>Hlavní informace a klíčová slova musejí být ztučněny . </li></ul><ul><li>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é. </li></ul><ul><li>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. </li></ul><ul><li>Texty by měly být navzájem provázány odkazy , které budou vždy obsahovat klíčová slova. </li></ul>
  38. 38. Jak text prodává http://www.kkk-zlin.cz/ http://www.aaapapir.cz/
  39. 39. Jak text prodává Popisky výrobků <ul><li>Hračička.net </li></ul><ul><li>Kasa.cz </li></ul>
  40. 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. 41. <ul><li>Často nestačí pouhý výpis technických parametrů . Lidé chtějí vědět více informací o daném výrobku. </li></ul>
  42. 42. Grafika stránek <ul><li>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. </li></ul><ul><li>Je-li web informační , měly by být grafika jednoduchá a elegantní. </li></ul><ul><li>Je-li web zaměřený na prodej , měly by být výrazné především obrázky nabízených produktů. </li></ul><ul><li>Je-li web zábavní , měla by tomu odpovídat i jeho grafika. </li></ul><ul><li>Pár příkladů za všechny: </li></ul><ul><li>http://www.google.cz/ </li></ul><ul><li>http://www.megapixel.cz/ </li></ul><ul><li>http://kindersurprise.cz/ </li></ul><ul><li>http://home.disney.go.com/ </li></ul><ul><li>Příklady přehnané grafiky : </li></ul><ul><li>www.ingstuksa.cz </li></ul><ul><li>http://shopping.msn.com/ </li></ul>
  43. 43. Obrázky <ul><li>Obrázky na webu používejte co nejmenší (rozměrově i datově). </li></ul><ul><li>Vždy používejte alternativní textové popisky alt . Popisek by měl slovy vyjádřit obsah obrázku. </li></ul><ul><li>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. </li></ul><ul><li>Omezte počet obrázků na nutný počet. </li></ul><ul><li>Nevkládejte obrázky na pozadí , snižuje to čitelnost textu. </li></ul><ul><li>Nepoužívejte animace k upoutání pozornosti. </li></ul><ul><li>Nikdy neanimujte navigaci či logo se sloganem. </li></ul>
  44. 44. Kontrast a čitelnost textu <ul><li>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 ! </li></ul><ul><li>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. </li></ul><ul><li>Vždy nastavte dostatečnou velikost základního textu, stejně jako kontrast vůči jeho pozadí. </li></ul>
  45. 45. Kontrast a čitelnost textu http://www.oriflame-prace.cz/
  46. 46. <ul><li>http://www.websiteoptimization.com/services/analyze/ </li></ul><ul><li>http://chrispederick.myacen.com/work/firefox/webdeveloper/ </li></ul><ul><li>http://nontroppo.org/wiki/WebDevToolbar (Opera) </li></ul><ul><li>http://www.nils.org.au/ais/web/resources/toolbar/ (IE) </li></ul><ul><li>http://pristupnost.nawebu.cz/nastroje/cca.php (desktopová aplikace) </li></ul><ul><li>http://juicystudio.com/article/colour-contrast-analyser-firefox-extension.php (FireFox extension) </li></ul>Kontrast a čitelnost textu Nástroje
  47. 47. Budoucnost použitelnosti <ul><li>Spočívá především v personalizaci . A to jak obsahu a obsahových modulů, tak ve vzhledu stránek. </li></ul><ul><li>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. </li></ul><ul><li>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. </li></ul><ul><li>www.bbc.co.uk </li></ul><ul><li>http://www.google.cz/ig?hl=cs&source=iglk </li></ul><ul><li>http://seznam.cz/ </li></ul>
  48. 48. Příklad http://shopping.msn.com
  49. 49.
  50. 50. Příklad mluvící za vše http://now.sprint.com/widget/
  51. 51.
  52. 52. Co můžeme nabídnout ?
  53. 53. Co můžeme nabídnout ? <ul><li>Audit použitelnosti: </li></ul><ul><li>určeno pro zhodnocení stavu, nikoliv navržení doporučení oprav chyb </li></ul><ul><li>cena 10 000 Kč (web/eshop), rozsáhlé portály 15 000 Kč </li></ul><ul><li>doba dodání: 5 dnů </li></ul><ul><li>Analýza použitelnosti: </li></ul><ul><li>určeno pro detailní vypsání chyb a navrhnutí optimálních doporučení </li></ul><ul><li>cena 25 000 Kč (web/eshop/portál), rozsáhlé portály 30 000 Kč </li></ul><ul><li>doba dodání: 7 dnů </li></ul><ul><li>Dlouhodobé zvyšování použitelnosti vašich internetových portálů / webů / eshopů </li></ul><ul><li>  (Zvyšování konverzních poměrů a úspěšnosti internetového portálu / webu / eshopu) </li></ul><ul><li>Navrhování analýz použitelnosti a jejich opětovná kontrola </li></ul><ul><li>Monitoring chování uživatele na vašem portále </li></ul><ul><li>Uživatelské testování a závěry pro zlepšení vašeho portálu </li></ul><ul><li>Kvartální bilance a porovnání výsledků </li></ul><ul><li>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) </li></ul><ul><li>Uživatelské testování na subjektech: </li></ul><ul><li>individuální cena dle rozsahu, min. od 80 000 Kč za 5 subjektů + závěrečná zpráva </li></ul>
  54. 54. Otázky?

×