Přednáška proběhla na konferenci vozovna 24. listopadu 2009. http://konference.vozovna.cz/konference

1. Použitelnost a přístupnost (nejen) neziskových webů Lukáš Marvan … najdu tam, co neznám ! www.seznam.cz

2. Pročprávě toto téma? Protože nejen reklamou živ je web. Všichni (nejen NGO) řeší, jak dostat lidi na svoje stránky, ale málokdo se pak poctivě stará o to,co se tam s nimi děje. Facebook, Twitter, SEO, PPC, bannery, DM, RSS To všechno jsou kanály, které vám téměř zaručeně přivedou na stránky nové návštěvníky,ale co potom s nimi?

3. Pročprávě já? Protože kromě toho, že v Seznamu… pracuji jako koncepční návrhář v oddělení návrhu UI starám se o přístupnost našich služeb … tak se mimo Seznam věnuji: www.habrovka.cz www.ginkgo-praha.org www.amo.cz

4. Definice Použitelnost Zabývá se adekvátní jednoduchostí použití internetových stránek (programu, přístroje). Důležitá je snadnáorientace (kde jsem?)a navigace (tam jdu)na stránkách. UI vs. UX. Přístupnost Řeší lepší zpřístupnění obsahu webových stránek handicapovaným uživatelům. Postižení: zrakově, pohybově, sluchově, kognitivní poruchy, vyhledávací roboti.

5. Naše společná motivace Použitelnost a přístupnost se věnují zlepšování stránek. Proč? Chceme, aby nám tam chodilo víc lidí. Proč? Chceme, aby nám lidé: Nejen poslali víc peněz, ale třeba i: Podepsali víc petic. Přečetli víc článků. Registrovali se (víc).

6. A co motivace klientů? Naši návštěvníci mají také své cíle. Opravdu znáte potřeby Vašich klientů? Kdy naposledy jste… … se lidí zeptali na to, co u vás na webu pohledávají? … se podívali do statistik a zjistili, jestli to odpovídá? A odpovídají potřeby vašich klientůcílům vaší organizace?

7. Máme a známe cíle A pokud cíle nemáme, měli bychom si je rychle stanovit / zjistit. Cílů na které se soustředíme však nesmí být příliš mnoho. A neměly by se na stránkách křížit, 1 stránka = 1 cíl.

8. Struktura a navigace Pro víc cílů potřebujeme víc stránek. Víc stránek tvoří strukturu. Struktura vyžaduje navigaci. Navigace ≠ Menu

9. Jak funguje váš web Návštěvníci Taky návštěvnici Úplně jiní návštěvníci

10. Přístupy na web Přístupy na web už zdaleka nejsou vertikální od HP přes sekci až k článku (vlastně ani nikdy nebyly, ale přistupovalo se tak k nim). Lidé na stránky přicházejí kudykoliv. Z toho jim vyplývá jedna zásadní otázka:

11. „Kde to sakra jsem?“ Přesněji: Kde jsem? Na co se to dívám? Co s tím můžu udělat?(Asi na to můžu kliknout, ale co se potom se mnou stane?) Kam mohu odejít?

12. Stavte cesty k cíli Přivést lidi na web nestačí. Je potřeba je přimět k určité akci – k cestě k cíli. Chvíle, kdy se uživatelé rozhodují, kam ze vstupní stránky odejít, jsou přesně ty okamžiky, kdy začíná jejich cestak vašemu cíli.

13. 2 typy cest (částí stránek) Pastičky na myši Objednávky Registrace Kolečka pro křečky Čtení článků Prohlížení fotek A na cestě myším ani křečkůmneházejte klacky pod nohy!

14. Klacky +Berle   Podtržený odkaz Zde jste Tam můžete jít Logo = Domů(poslední záchrana) Jeden za 1 000 slov. TITLE [Související položky] Nesouvisející| Položky   Odkaz, text, taky odkaz. OK +KO +Jdi+ Stůj Související | Položky [Nesouvisející položky] Malé písmo(Malé písmo) Malý kontrast(Malý kontrast)  Malé ovládací prvky

15. Příklady – KO #1 auto-mat.cz – Kudy domů? (Nekliká logo, odkaznevedenarozcestník.) fandom.cz – Logo bez ALTu. sciencecafe.cz – Kde jsem = co spojuje tyto články? + 2 loga – k čemu? + Menu až úplně nahoře?! Není hned vidět. kulturni-most.cz – Kde jsem? Co je to za web? kulturni-most.cz – Zkuste přejít na web propagované akce. (Kliká jen ikonka W ne URL.)

16. Příklady – KO #2 dtest.cz – Kde jsem? (Neodpovídá TITLE ani šipky v menu.) liberix.cz– Souvislosti? (Špatně umístěné čáry mezi články = odřezávají nadpis od obsahu.) havranek.dolnipovltavi.cz – Fotky by měly tak klikat na články – je to taky cesta! bazilika.cz – Filtr pořadů – jak poznám, že to nejsou jen vysvětlivky, ale že taky filtruje?Podtrhnout.

17. Příklady - OK sanceprodraha.cz – Vím, kde jsem i kam dál. nevladky-a-krize.cz – Kam dál? = Rudý button! hornomlynska.cz – Kde jsem? Slogan napoví. theia.cz – Super kontakty! Perlička na konec:spokojeny-domov.cz– slogan = OK, ale jako obrázek?!? = KO, ale má alespoň ALT = OK

18. Chyba je dobrá Geniální stránky nevytvoří na první pokus nikdo a pokud tvrdí, že ano, tak kecá. K chybě tedy dříve, nebo později dojde.Čím dříve, tím lépe! Později už bývá pozdě… Je tedy důležité udělat, odhalit a opravit chybu co nejdříve (co nejblíže počátku vývoje nového / redesignu stávajícího webu).

19. Postup Průzkum Design Testování

20. Postup – 1. průzkum Čeho chceme dosáhnout? Co od nás čekají klienti (donátoři)? Pozorujte! (Nejen na webu!)

21. Postup – 2. design Tužka je nejlepší kamarád. Buďte kreativní na správných místech. Nevynalézejte kolo.

22. Postup – 3. testování Ukazujte náčrtky, polotovary, zkušební beta verze a ptejte se lidí kolem sebe, jestli se orientují.+ Zkuste jim zadat pár jednoduchých úkolů.

23. Trpělivost a důvěra Každý člověk má jen omezený pohár trpělivosti, který když přeteče, tak se nas… naštve a odchází. Dávejte uživatelům odpovědi na jejich otázky,chovejte se na svém webu předvídatelně,budou vám o to více důvěřovat a jejich pohár trpělivosti se nebude vyprazdňovat, ba naopak plnit a prohlubovat (UX).

24. Doporučená četba Pro začátek:dogma.pixy.cz(starší, ale dobré!) Nenuťte uživatele přemýšlet (SteveKrug) Tvoříme přístupné webové stránky(David Špinar) Savethe Pixel (BenHunt) Gettingreal(37signals) 12 požadavků na přístupnost pouzitelnost.info/pouzitelnost pravidla-pristupnosti.cz

25. Děkuji za pozornostOtázky? www.lakave.info