Použitelnost a přístupnost (nejen) neziskových webů<br />Lukáš Marvan<br />… najdu tam, co neznám !<br />www.seznam.cz<br />
Pročprávě toto téma?<br />Protože nejen reklamou živ je web.<br />Všichni (nejen NGO) řeší, jak dostat lidi na svoje strán...
Pročprávě já?<br />Protože kromě toho, že v Seznamu…<br />pracuji jako koncepční návrhář v oddělení návrhu UI<br />starám ...
Definice<br />Použitelnost<br />Zabývá se adekvátní jednoduchostí použití internetových stránek (programu, přístroje).<br ...
Naše společná motivace<br />Použitelnost a přístupnost se věnují zlepšování stránek. Proč?<br />Chceme, aby nám tam chodil...
A co motivace klientů?<br />Naši návštěvníci mají také své cíle.<br />Opravdu znáte potřeby Vašich klientů?<br />Kdy napos...
Máme a známe cíle<br />A pokud cíle nemáme, měli bychom si je rychle stanovit / zjistit.<br />Cílů na které se soustředíme...
Struktura a navigace<br />Pro víc cílů potřebujeme víc stránek.<br />Víc stránek tvoří strukturu.<br />Struktura vyžaduje ...
Jak funguje váš web<br />Návštěvníci<br />Taky návštěvnici<br />Úplně jiní návštěvníci<br />
Přístupy na web<br />Přístupy na web už zdaleka nejsou vertikální od HP přes sekci až k článku (vlastně ani nikdy nebyly, ...
„Kde to sakra jsem?“<br />Přesněji:<br />Kde jsem?<br />Na co se to dívám?<br />Co s tím můžu udělat?(Asi na to můžu klikn...
Stavte cesty k cíli<br />Přivést lidi na web nestačí. Je potřeba je přimět k určité akci – k cestě k cíli.<br />Chvíle, kd...
2 typy cest (částí stránek)<br />Pastičky na myši<br />Objednávky<br />Registrace<br />Kolečka pro křečky<br />Čtení článk...
Klacky +Berle<br /> <br />Podtržený odkaz<br />Zde jste<br />Tam můžete jít<br />Logo = Domů(poslední záchrana)<br />J...
Příklady – KO #1<br />auto-mat.cz – Kudy domů? (Nekliká logo, odkaznevedenarozcestník.)<br />fandom.cz – Logo bez ALTu.<br...
Příklady – KO #2<br />dtest.cz – Kde jsem? (Neodpovídá TITLE ani šipky v menu.)<br />liberix.cz– Souvislosti? (Špatně umís...
Příklady - OK<br />sanceprodraha.cz – Vím, kde jsem i kam dál.<br />nevladky-a-krize.cz – Kam dál? = Rudý button!<br />hor...
Chyba je dobrá<br />Geniální stránky nevytvoří na první pokus nikdo a pokud tvrdí, že ano, tak kecá.<br />K chybě tedy dří...
Postup<br />Průzkum<br />Design<br />Testování<br />
Postup – 1. průzkum<br />Čeho chceme dosáhnout?<br />Co od nás čekají klienti (donátoři)?<br />Pozorujte! (Nejen na webu!)...
Postup – 2. design<br />Tužka je nejlepší kamarád.<br />Buďte kreativní na správných místech.<br />Nevynalézejte kolo.<br />
Postup – 3. testování<br />Ukazujte náčrtky, polotovary, zkušební beta verze a ptejte se lidí kolem sebe, jestli se orient...
Trpělivost a důvěra<br />Každý člověk má jen omezený pohár trpělivosti, který když přeteče, tak se nas… naštve a odchází.<...
Doporučená četba<br />Pro začátek:dogma.pixy.cz(starší, ale dobré!)<br />Nenuťte uživatele přemýšlet (SteveKrug)<br />Tvoř...
Děkuji za pozornostOtázky?<br />www.lakave.info<br />
Upcoming SlideShare
Loading in...5
×

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

1,164

Published on

Příspěvek na konferenci Online marketing pro neziskovky

Published in: Business, Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,164
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
7
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

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

  1. 1. Použitelnost a přístupnost (nejen) neziskových webů<br />Lukáš Marvan<br />… najdu tam, co neznám !<br />www.seznam.cz<br />
  2. 2. Pročprávě toto téma?<br />Protože nejen reklamou živ je web.<br />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.<br />Facebook, Twitter, SEO, PPC, bannery, DM, RSS<br />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?<br />
  3. 3. Pročprávě já?<br />Protože kromě toho, že v Seznamu…<br />pracuji jako koncepční návrhář v oddělení návrhu UI<br />starám se o přístupnost našich služeb<br />… tak se mimo Seznam věnuji: <br />www.habrovka.cz<br />www.ginkgo-praha.org<br />www.amo.cz<br />
  4. 4. Definice<br />Použitelnost<br />Zabývá se adekvátní jednoduchostí použití internetových stránek (programu, přístroje).<br />Důležitá je snadnáorientace (kde jsem?)a navigace (tam jdu)na stránkách.<br />UI vs. UX.<br />Přístupnost<br />Řeší lepší zpřístupnění obsahu webových stránek handicapovaným uživatelům.<br />Postižení: zrakově, pohybově, sluchově, kognitivní poruchy, vyhledávací roboti.<br />
  5. 5. Naše společná motivace<br />Použitelnost a přístupnost se věnují zlepšování stránek. Proč?<br />Chceme, aby nám tam chodilo víc lidí. Proč?<br />Chceme, aby nám lidé:<br />Nejen poslali víc peněz, ale třeba i:<br />Podepsali víc petic.<br />Přečetli víc článků.<br />Registrovali se (víc).<br />
  6. 6. A co motivace klientů?<br />Naši návštěvníci mají také své cíle.<br />Opravdu znáte potřeby Vašich klientů?<br />Kdy naposledy jste…<br />… se lidí zeptali na to, co u vás na webu pohledávají?<br />… se podívali do statistik a zjistili, jestli to odpovídá?<br />A odpovídají potřeby vašich klientůcílům vaší organizace?<br />
  7. 7. Máme a známe cíle<br />A pokud cíle nemáme, měli bychom si je rychle stanovit / zjistit.<br />Cílů na které se soustředíme však nesmí být příliš mnoho.<br />A neměly by se na stránkách křížit,<br />1 stránka = 1 cíl.<br />
  8. 8. Struktura a navigace<br />Pro víc cílů potřebujeme víc stránek.<br />Víc stránek tvoří strukturu.<br />Struktura vyžaduje navigaci.<br />Navigace ≠ Menu<br />
  9. 9. Jak funguje váš web<br />Návštěvníci<br />Taky návštěvnici<br />Úplně jiní návštěvníci<br />
  10. 10. Přístupy na web<br />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).<br />Lidé na stránky přicházejí kudykoliv.<br />Z toho jim vyplývá jedna zásadní otázka:<br />
  11. 11. „Kde to sakra jsem?“<br />Přesněji:<br />Kde jsem?<br />Na co se to dívám?<br />Co s tím můžu udělat?(Asi na to můžu kliknout, ale co se potom se mnou stane?)<br />Kam mohu odejít?<br />
  12. 12. Stavte cesty k cíli<br />Přivést lidi na web nestačí. Je potřeba je přimět k určité akci – k cestě k cíli.<br />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.<br />
  13. 13. 2 typy cest (částí stránek)<br />Pastičky na myši<br />Objednávky<br />Registrace<br />Kolečka pro křečky<br />Čtení článků<br />Prohlížení fotek<br />A na cestě myším ani křečkůmneházejte klacky pod nohy!<br />
  14. 14. Klacky +Berle<br /> <br />Podtržený odkaz<br />Zde jste<br />Tam můžete jít<br />Logo = Domů(poslední záchrana)<br />Jeden za 1 000 slov.<br />TITLE<br />[Související položky]<br />Nesouvisející| Položky<br /> <br />Odkaz, text, taky odkaz.<br />OK +KO +Jdi+ Stůj<br />Související | Položky<br />[Nesouvisející položky]<br />Malé písmo(Malé písmo)<br />Malý kontrast(Malý kontrast)<br /> Malé ovládací prvky<br />
  15. 15. Příklady – KO #1<br />auto-mat.cz – Kudy domů? (Nekliká logo, odkaznevedenarozcestník.)<br />fandom.cz – Logo bez ALTu.<br />sciencecafe.cz – Kde jsem = co spojuje tyto články? + 2 loga – k čemu? + Menu až úplně nahoře?! Není hned vidět.<br />kulturni-most.cz – Kde jsem? Co je to za web?<br />kulturni-most.cz – Zkuste přejít na web propagované akce. (Kliká jen ikonka W ne URL.)<br />
  16. 16. Příklady – KO #2<br />dtest.cz – Kde jsem? (Neodpovídá TITLE ani šipky v menu.)<br />liberix.cz– Souvislosti? (Špatně umístěné čáry mezi články = odřezávají nadpis od obsahu.)<br />havranek.dolnipovltavi.cz – Fotky by měly tak klikat na články – je to taky cesta!<br />bazilika.cz – Filtr pořadů – jak poznám, že to nejsou jen vysvětlivky, ale že taky filtruje?Podtrhnout.<br />
  17. 17. Příklady - OK<br />sanceprodraha.cz – Vím, kde jsem i kam dál.<br />nevladky-a-krize.cz – Kam dál? = Rudý button!<br />hornomlynska.cz – Kde jsem? Slogan napoví.<br />theia.cz – Super kontakty!<br />Perlička na konec:spokojeny-domov.cz– slogan = OK, ale jako obrázek?!? = KO, ale má alespoň ALT = OK<br />
  18. 18. Chyba je dobrá<br />Geniální stránky nevytvoří na první pokus nikdo a pokud tvrdí, že ano, tak kecá.<br />K chybě tedy dříve, nebo později dojde.Čím dříve, tím lépe! Později už bývá pozdě…<br />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).<br />
  19. 19. Postup<br />Průzkum<br />Design<br />Testování<br />
  20. 20. Postup – 1. průzkum<br />Čeho chceme dosáhnout?<br />Co od nás čekají klienti (donátoři)?<br />Pozorujte! (Nejen na webu!)<br />
  21. 21. Postup – 2. design<br />Tužka je nejlepší kamarád.<br />Buďte kreativní na správných místech.<br />Nevynalézejte kolo.<br />
  22. 22. Postup – 3. testování<br />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ů.<br />
  23. 23. Trpělivost a důvěra<br />Každý člověk má jen omezený pohár trpělivosti, který když přeteče, tak se nas… naštve a odchází.<br />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).<br />
  24. 24. Doporučená četba<br />Pro začátek:dogma.pixy.cz(starší, ale dobré!)<br />Nenuťte uživatele přemýšlet (SteveKrug)<br />Tvoříme přístupné webové stránky(David Špinar)<br />Savethe Pixel (BenHunt)<br />Gettingreal(37signals)<br />12 požadavků na přístupnost<br />pouzitelnost.info/pouzitelnost<br />pravidla-pristupnosti.cz<br />
  25. 25. Děkuji za pozornostOtázky?<br />www.lakave.info<br />
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×