V závěrečných 7 krocích se nyní budu věnovat důležitým předpokladům funkcionality webu.

Živnostenský rejstřík (MPO)

15. Aby se návštěvník na web dostal…

Možná vás překvapí, že i tuto podmínku zahrnuji do použitelnosti. Nejdřív přece člověk na stránky přijde a až potom je začne používat.

Zpravidla je však žádoucí přimět návštěvníka, aby se na web jednou opět vrátil – tedy pokračoval v používání. Když mu návrat ztížíme nebo přímo znemožníme, přestane pro něj být tento web použitelný.

Doména by měla fungovat ve tvaru www.domena.cz, ale také domena.cz. Ač se to zdá být samozřejmé, mnohdy se na tuto funkcionalitu pohříchu zapomíná. Když už si návštěvník zapamatuje naši doménu, neměl by za odměnu dostat chybové hlášení.

Výhodou je rovněž snadná nalezitelnost ve vyhledávačích podle klíčových slov, která si z našich stránek uživatel zapamatuje (podle typu webu je to zpravidla nadpis článku, název společnosti či produktu apod.).

Titulek všech stránek by měl obsahovat jejich název či hlavní nadpis. Dnešní prohlížeče pak stránku snadno najdou v historii při zadání tohoto názvu do adresního řádku.

Obsah a základní prvky webu by se neměly příliš dlouho načítat (vysokorychlostní připojení stále ještě nemá každý, zvlášť na mobilních zařízeních).

Pro zkrácení doby načítání webu je vhodné nepoužívat tabulkový design, optimalizovat grafické prvky, snížit počet požadavků na server (např. použít tzv. CSS Sprites, spojit externí soubory s JavaScriptem do jednoho, případně některý načítat paralelně z Google code aj.), dále komprese kódu a jiné.

Když už se stránky načtou, neměly by přetěžovat procesor „ošklivě“ napsaným JavaScriptem nebo Flashem.

Novinky z webu

16. Upozornění na nový obsah

Webové stránky, jež nemají ze své podstaty stálý a neaktualizovaný obsah, by měly návštěvníkům nabídnout způsob, jak se nechat informovat o novém obsahu.

Typicky to bývá RSS nebo Atom feed. Další možností je využít pro tento účel některých sociálních sítí – např. účet na Twitteru nebo fanouškovskou stránku na Facebooku. U obchodů je dobré neopomenout export do nějakého vyhledávače zboží.

Trochu to souvisí s předchozím bodem. Pokud tuto funkci návštěvníkovi nenabídnete, nebude v jeho silách váš web stále kontrolovat a po čase se tam přestane vracet – přestane ho používat (toto ovšem neplatí u webových aplikací, kam se již z jejich podstaty v různých intervalech rád vrací – sociální sítě, diskusní fóra apod.).

Použitelné a přístupné webové formuláře

17. Pozor na formuláře

Základním konverzním prostředkem na webových stránkách jsou formuláře. Vyskytují se v nejrůznějších podobách a často mají zcela zásadní úlohu při reálném plnění účelu webu. Proto je třeba se na jejich použitelnost soustředit obzvlášť.

Snižte počet polí na nutné minimum. Často dochází ke zbytečným komplikacím, když se rozděluje jméno a příjmení, protože pod slovem „jméno“ si člověk vybaví celé jméno, ne jenom to křestní. Málokdo si prohlíží formulář dopředu, aby si toho mohl všimnout.

Zřetelně označte pole, která je nutné vyplnit pro úspěšné odeslání formuláře. Pokud dojde k chybě, viditelně ji označte (v žádném případě nenuťte uživatele vyplňovat formulář znovu). Buďte trochu předvídaví, a pokud je to možné, nechte předvyplněnou očekávanou hodnotu (např. státní příslušnost, @ v poli pro e-mail apod.).

Dejte uživateli jasnou zprávu, že byl formulář úspěšně odeslán, a nabídněte mu, kam může pokračovat dál. Nezapomeňte ošetřit opětovné odeslání formuláře při aktualizaci stránky.

Výzva „Vytiskněte se“ – LaTrine.cz

18. Tisková podoba stránky

I když jsou dnes již počítače nebo chytré mobilní telefony téměř všude, stále je vhodné nechat návštěvníkovi možnost stránku si vytisknout. Nejlepším řešením je vytvořit speciální styl pro tisk, díky kterému by měly na výstupu být body 1–4, tedy název webu, případný podtitul, nadpis stránky, obsah, jméno autora (případně i kontakt na něj), datum a URL stránky.

Nezapomeňte, že ne vždy je papír interaktivní médium , a tak není od věci za odkazy vypsat jejich adresy. Význam barev často ustupuje do pozadí, je třeba počítat s tiskem černobílým. Pěkný článek na téma CSS pro tisk je Going to Print na aListApart.com.

Částečným řešením může být i využití externí služby, která verzi pro tisk sama vygeneruje a ještě dá návštěvníkovi na výběr, co všechno chce tisknout.

WCAG 2.0 česky

19. Přístupnost webu

Pokud chcete, aby byly vaše stránky bez problému použitelné pro co největší množinu lidí, včetně zrakově postižených, měli byste dbát také na pravidla přístupnosti webu.

Řídit se přitom můžete přívětivě přeloženým kontrolním seznamem pro WCAG 2.0, jenž vás navede k dodržování pravidel z oficiálního dokumentu bez zbytečných řečí okolo.

Doporučit lze také přednášku Radka Pavlíčka z WebExpa 2009 s názvem WCAG 2.0 – nový pohled na přístupnost.

Cílová skupina

20. Poznejte vaši cílovou skupinu

Dokážete se dobře seznámit s vaší cílovou skupinou, sledovat její chování a trendy, které v ní vládnou? Pokud ano, máte velkou výhodu. Můžete díky tomu přemýšlet jako vaši návštěvníci a zjistit, jaké funkce či obsah by na vašem webu ocenili.

Po vynuceném uživatelském testování přichází uživatelé skuteční. Snažte se jim naslouchat.

Google Analytics

21. Sledujte a analyzujte návštěvnost

Stejně jako uživatelské testování je i pravidelná analýza návštěvnosti nezbytná pro dosahování optimální použitelnosti webu.

I v ideálním případě je sledování návštěvnosti důležité jako zpětná vazba, že všechno děláte dobře a návštěvníci jsou u vás spokojení.

Navíc díky ní můžete získat velmi cenná data, která dobře poslouží při budoucím rozvoji webu. Pamatujte, že web nemá konečný stav.

.

Toto je tedy ve zkratce jedenmecítma kroků, kterými se můžete s čistým svědomím řídit při budování dobré použitelnosti webu.

Pokud máte pocit, že jsem nějaký důležitý bod opomněl, budu rád, když mě upozorníte v komentáři, abych mohl seriál doplnit. Díky!

CSFD Last Seen 0.9 plugin

Máte svůj účet na ČSFD a používáte systém WordPress? Pak je tento plugin určený právě pro vás.

Jedná se o widget do postranního panelu, který vypíše daný počet naposledy zhlédnutých (ohodnocených) filmů včetně jejich barvy, roku vydání a vašeho hodnocení.

Před časem jsem dal k dispozici dočasnou verzi, kterou jsem používal zde na stránkách. Nyní to dotáhla už na plnohodnotný WordPress plugin.

Instalace pluginu

Nejprve si stáhněte plugin na jeho oficiální stránce:

CSFD Last Seen plugin

Plugin se instaluje klasickým způsobem.

1. Rozbalte stažený archiv s pluginem.
2. Nahrajte složku csfd-last-seen do wp-content/plugins.
3. V administraci vašeho blogu přejděte do sekce Pluginy a CSFD Last Seen plugin aktivujte.
4. Přejděte do sekce Vzhled/Widgety a umístěte widget CSFD Last Seen jak je libo.
5. Nastavte požadovaný profil, počet zobrazovaných filmů a frekvenci obnovování.
6. Klikněte na Uložit.

Celou tabulku s hodnocením můžete vzhledově upravit pomocí CSS. Stačí do souboru se stylem přidat následující kód:

table#csfd, table#csfd td { border: none; border-collapse: collapse; }
table#csfd td.csfd-stars { text-align: right; white-space: nowrap; }

a případně upravit podle vašich potřeb.

Ukázka pluginu

Demo pluginu si můžete prohlédnout přímo zde na stránkách (pravý sloupec – Naposledy jsem viděl).

CSFD Last Seen plugin

]]> http://josefstepanek.cz/835/wordpress-csfd-last-seen-plugin-0-9.html/feed 20 http://josefstepanek.cz/668/webexpo-2009-slidy-z-prednasek.html http://josefstepanek.cz/668/webexpo-2009-slidy-z-prednasek.html#comments Tue, 20 Oct 2009 11:18:55 +0000 Pepa (admin) http://josefstepanek.cz/?p=668 Zatímco se letošní WebExpo stalo již navždy součástí milých vzpomínek mnohých účastníků, spevoiktczu začalo se zpracováváním desítek hodin pořízených záznamů. 

Pokud jste si WebExpo 2009 nechali ujít, nebo se vám nedařilo sledovat jednu přednášku a zároveň stream z druhé, určitě se máte na co těšit. Protože zpracování videa jistě ještě nějakou dobu potrvá, můžete si zatím ukrátit dlouhé chvíle čekání a prohédnout si zveřejněné slidy z přednášek.

Warm Up

• Vliv psychotropních látek na kvalitu vývojářů – David Grudl & Jiří Knesl

Developer Hall (SIC)

• JavaFX – Jan Štěrba … (?)
• XML v PHP 5 – Jiří Kosek … (?)
• Když něco rozeberem, tak leda debuggerem – Juraj Michálek … (?)
• Verzování kódu s Gitem – Karel Minařík … (?)
• Tajemství v používání a programování Firebugu – Jan Odvárko … (?)
• Automatizované testování webových aplikací – Michael Juřek … (?)
• RIA jednoduše (video) – ukázkový příklad – David Grudl … (?)
• Jak z vás lenost může udělat lepšího vývojáře – Christian Heilmann … (?)
• Můj život s počítači – Kvíz pro Františka Fuku – Martin Hassman … (?)

Web Design & UX Hall (Aula)

• Dojem uživatele z pohledu tvůrce webové aplikace – Jan Korbel … (?)
• Moderní webdesign II. – Jan Sládek … (?)
• Sémantický web – Josef Holý … (?)
• Optimalizace obchodní výkonnosti webu – Jiří Brázda … (?)
• WCAG 2.0 – nový pohled na přístupnost – Radek Pavlíček … (?)

Business & Startup Room (E II)

• Marketing v sociálních sítích + kompletní text – Michal Berg … (?)
• Slepá honba za zásahem – Robert Haas … (?)
• Jak z úspěšné malé firmy vytvořit úspěšnou velkou firmu – Zbyněk Frolík … (?)
• GTD (Getting Things Done) – Petr Mára … (?)
• Jak změnil Internet náš sexuální život? – Pavel Kozák … (?)
• Světový a český Twitter jako zdroj pro data mining – Josef Šlerka … (?)

Frameworks Room (E III)

• Vytváření RESTful webových aplikací (nejen) v Javě – Jakub Podlešák … (?)
• Drupal pro Váš business – případová studie – Jakub Suchý … (?)
• Test Driven Development v Nette + databáze – Jiří Knesl … (?)
• Vývoj aplikací pro mobilní platformu Android – Pavel Petřek … (?)

Enterprise 2.0 Room (E III)

• Web 2.0 hlasové služby – Jan Kubr … (?)
• Google Apps pro firmy – Ivan Kutil … (?)

Všem autorům patří velký dík za zveřejnění.

Fotografie od Dušana Šimonoviče (galerie na Flickr.com)

Víte o nějakých dalších slidech nebo materiálech k přednáškám z WebExpo 2009? Podělte se v komentářích.

Tomáš Pojeta, Pojeta.cz

8. Dobrý design

Kvalitní design webové stránky napomáhá žádanému vedení návštěvníkovy pozornosti za pomoci správně voleného kontrastu barev, velikosti prvků nebo případně i animací. Vzhled webu je to první, co na člověka udělá dojem. Ve spojení s logem je základnou webového brand-buildingu. Měl by být také v souladu s tématem webu. Může v návštěvníkovi vzbudit důvěru, sympatie, nadšení a mnoho dalšího – web si díky dobrému designu zapamatuje a v budoucnu se vrátí zpět. To vše se dá však snadno pohřbít jinými částmi webu.

Především design nesmí v návštěvníkovi nechtěně vyvolávat úzkost, zmatení, vztek, nebo dokonce nějaký záchvat.

Compose to a vertical rythm – 24ways.org

9.  Dobrá typografie

Aby byl obsah pro návštěvníka čitelný, je třeba dodržovat aspoň ta nejdůležitější typografická pravidla. Velikost písma by měla přímo odrážet zanoření ve struktuře textu – tedy čím výše ve struktuře, tím větší písmo. Text by měl mít dostatečnou výšku řádku (většinou kolem 1,5 velikosti písma) a také vhodné zarovnání.

Podmínkou čitelnosti Velkým plusem pro čitelnost a orientaci v textu je také dobrý vertikální rytmus, tedy horní a spodní okraje jednotlivých částí textu. Zdařilý článek na toto téma (včetně komentářů) je Compose to a vertical rythm, kde jsou uvedeny i konkrétní rady a styly.

BezChyb.cz

10. Strukturovaný obsah

Obsah stránku by měl být přehledný a dobře strukturovaný. Toho dosáhneme členěním textu na kratší odstavce, vkládáním podnadpisů a používáním seznamů tam, kde je to na místě. V přehlednosti může také pomoci shrnutí obsahu několika větami v úvodu a v případě některých druhů textu i odlišení závěru – tedy co si má člověk z textu odnést.

Důležité je i vyznačování podstatných částí odstavce – zpravidla tučným písmem. To proto, aby si návštěvník mohl text prohlédnout bez nutnosti čtení a měl zhruba tušení, o čem je.

Maximize the Use of Hover (WebDesignerWall.com)

11. Odlišené odkazy

Odkazy v obsahovém textu by měly být barevně odlišené od okolí a nejlépe i podtržené. Pokud odkazy nepodtrhnete, musíte počítat s tím, že tak znevýhodníte návštěvníky se zhoršeným vnímáním barev, kterých nemusí být zrovna malé procento. Vhodným doplňkem může být rovněž odlišení již navštívených odkazů, což je věc často zbytečně opomíjená.

Aspoň většina odkazů na webu, jak textových tak i grafických, by měla mít nějaký efekt po najetí myší. Pro návštěvníka je to jasné znamení, že na odkaz může opravdu kliknout a často ho k tomu ještě motivuje.

Použitelnost také značně zvyšuje použití atributu title – tedy po najetí myší podrobněji popsat, co se pod odkazem vlastně nachází. Hodně lidí tuto část podceňuje… často se v titulku odkazu jen zopakuje jeho text a to už je pak lepší ho neuvádět vůbec.

SushiAndRobots.com

12. Konzistence webu

Design, typografie a rozvržení jednotlivých prvků stránek by měly být jednotné a konzistentní na všech stránkách webu.

Konzistentní web působí silně a spolehlivě – návštěvník ví, že na stránkách může získat jakoukoliv informaci tak, jak je zvyklý a nedočká se žádného nepříjemného překvapení nebo zmatení.

Design Patterns – SmileyCat.com

13. Šablony prvků webu

Tzv. design patterns, tedy modelové příklady prvků stránek, mohou být velice užitečnou inspirací při rozmisťování a samotném provedení jednotlivých částí stránek.

Databáze s těmito šablonami sdružují řešení jednotlivých prvků používaná na úspěšných a z velké části i použitelných webech. Na tato řešení jsou návštěvníci zvyklí a je zkušeností ověřené, že fungují. A přesně to na použitelném webu chceme.

Mobilní verze Twitteru

14. Myslete na mobilní zařízení

Chytré mobilní telefony s dotykovými displeji ve stále větší míře zaplavují trh. Pokud se vám mobilní internet ještě nezdá natolik rozšířený, abyste se na něj museli ohlížet, vězte, že v příštích letech se bude stále rychleji rozvíjet a myslete tedy aspoň na budoucnost.

Speciální vzhled stránek pro mobilní telefon s viditelným přepínáním na standardní verzi může vašim návštěvníkům v terénu ušetřit mnoho starostí.

… poslední díl ve znamení funkčnosti

Mohlo by se zdát, že vše důležité v otázce použitelnosti již bylo řečeno. Už je jasné, jaké informace návštěvníkovi nabídnout a jakým způsobem, aby pro něj byly snadno a příjemně čitelné. V poslední části však ještě stále zbývá místo pro aspekty funkčnosti webu, které jsou mnohdy stejně zásadní jako body v prvních dvou dílech, a není tedy radno je opomenout.

V srpnu roku 2008, kdy Krkonoše změnily své logo, se Národní parky v tomto ohledu sjednotily. Společným konceptem je kruh s názvem podél okraje a charakteristickým znakem parku uprostřed. Mírného oživení se docílilo přesahem středového motivu do okraje s textem, nicméně stále tato jednotnost působí značně konzervativně.

Přijde mi, že současná loga českých národních parků jsou takovým standardem, který nic nezkazí, ale ani nic nového nepřináší. Navíc si nejsem jistý, jestli dva níže uvedené redesigny log nebyly spíše změnou k horšímu…

Národní park Šumava

Krkonošský národní park

Národní park České Švýcarsko

Národní park Podyjí

Aktualizace 22. února 2010

Národní park České Švýcarsko již má v designu svých stránek zakomponované logo.