Lukáš Marvan: Použitelnost a přístupnost (nejen) neziskových webů

www.seznam.cz … najdu tam, co neznám !

Použitelnost a přístupnost (nejen) neziskových webů

Lukáš Marvan

www.seznam.cz … najdu tam, co neznám !

www.seznam.cz … najdu tam, co neznám !

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?

www.seznam.cz … najdu tam, co neznám !

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

www.seznam.cz … najdu tam, co neznám !

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.

www.seznam.cz … najdu tam, co neznám !

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é:1. Nejen poslali víc peněz, ale třeba i:

2. Podepsali víc petic.

3. Přečetli víc článků.

4. Registrovali se (víc).

www.seznam.cz … najdu tam, co neznám !

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?

www.seznam.cz … najdu tam, co neznám !

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.

www.seznam.cz … najdu tam, co neznám !

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

www.seznam.cz … najdu tam, co neznám !

Jak funguje váš web

HP

Sekce

Články

Návštěvníci

Taky návštěvnici

Úplně

jiní

návšt

ěvníc

i

www.seznam.cz … najdu tam, co neznám !

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:

www.seznam.cz … najdu tam, co neznám !

„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?

www.seznam.cz … najdu tam, co neznám !

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.

www.seznam.cz … najdu tam, co neznám !

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!

www.seznam.cz … najdu tam, co neznám !

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

www.seznam.cz … najdu tam, co neznám !

Příklady – KO #1

• auto-mat.cz – Kudy domů? (Nekliká logo, odkaz nevede na rozcestní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.)

www.seznam.cz … najdu tam, co neznám !

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.

www.seznam.cz … najdu tam, co neznám !

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

www.seznam.cz … najdu tam, co neznám !

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).

www.seznam.cz … najdu tam, co neznám !

Postup

1. Průzkum

2. Design

3. Testování

www.seznam.cz … najdu tam, co neznám !

Postup – 1. průzkum

• Čeho chceme dosáhnout?• Co od nás čekají klienti (donátoři)?• Pozorujte! (Nejen na webu!)

www.seznam.cz … najdu tam, co neznám !

Postup – 2. design

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

www.seznam.cz … najdu tam, co neznám !

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ů.

www.seznam.cz … najdu tam, co neznám !

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).

www.seznam.cz … najdu tam, co neznám !

Doporučená četba

• Pro začátek: dogma.pixy.cz (starší, ale dobré!)• Nenuťte uživatele přemýšlet (Steve Krug)• Tvoříme přístupné webové stránky

(David Špinar)• Save the Pixel (Ben Hunt)• Getting real (37signals)• 12 požadavků na přístupnost• pouzitelnost.info/pouzitelnost• pravidla-pristupnosti.cz

www.seznam.cz … najdu tam, co neznám !

Děkuji za pozornost

Otázky?

www.lakave.info