tento blogísek je úplně na changu

Text na webu

20. září 2005 v 14:25 | timy |  použitelnost na webu
Text je na většině webů nejdůležitější složkou, protože uchovává informace, a tak bychom měli dávat velkou pozornost tomu, jak ho uvidí uživatel. I text s nejvyšší informační hodnotou, pokud nebude správně naformátován, bude k ničemu, protože ho nebude nikdo číst.

I. Na pozadí textu nevkládejte obrázek, který by měl více odstínů nějaké barvy nebo dokonce který by obsahoval více barev. Písmo samotné potom buď dostatečně nevynikne nebo, v horším případě, nepůjde přečíst vůbec. Pokud se nejedná o nějakou tapetu (opakující se jeden a tentýž obrázek), ale o jeden větší obrázek, neměl by obsahovat žádné ostré hrany nebo rychlé přechody barev.
II. Text musí mít s pozadím co největší kontrast, aby se snadno četl i lidem, kteří mají potíže se zrakem. Jestli máte dobrý kontrast písma s pozadím se dozvíte například na Sově v síti. Stačí zadat kód barvy v hexadecimální hodnotě a nástroj již pak vše spočítá sám. Pokud používáte slovní pojmenování barev (red, green, blue ...) a neznáte jejich hexadecimální hodnotu, podívejte se na pojmenované barvy na jakpsatweb.cz (hexadecimální hodnota je v prvním sloupečku).
Opravdu si dejte záležet na tom, aby byl text s pozadím kontrastní. Většinou sice, i při špatném kontrastu, jde text přečíst, ale pokud má jít o nějaký delší text, je to velká zátěž na oči a - jak už jsem psal na začátku - někteří lidé nevidí tak dobře jako třeba vy a takový nevhodně kontrastní text nemusí přečíst vůbec. Nestavte jim tak zbytečné překážky.
Nejlepší kontrast jakého můžete dosáhnout je, když použijete černé písmo a bílé pozadí. Teoreticky stejný kontrast dosáhnete prohozením těchto barev, avšak když čtete nějaký dlouhý bílý text na černém pozadí, patrně vás brzy začnou bolet oči. Proto spíše doporučuji používat první kombinaci barev, pokud chcete ten nejvyšší kontrast.
III. Malé písmo není známka profesionality, i když si to některá webdesignová studia myslí. Ano, vím, že malé decentní písmo vypadá dobře, že je moderní, že vypadá "cool", ale rozhodně není použitelné a přívětivé pro uživatele. Text na webu má být hlavně čitelný, neslouží přece k ozdobě (pokud ano, tak je to také špatně).
Čím menší písmo je, tím méně je čitelné. Jednak z prostého důvodu, že je prostě menší, ale také kvůli tomu, že je na sebe více nahuštěné, na jednom řádku se tak vleze více slov, člověk se hůře orientuje mezi jednotlivými řádky, není žádný problém se během čtení ztratit či omylem přeskočit řádek.
Navíc zkušený uživatel si dokáže ten text zvětšit a při zvětšení písma riskujete rozhození layoutu, překrývání textů apod. Už jenom proto se vyplatí udělat text uživatelsky přístupný hned od začátku. Ideální velikost je základní velikost prohlížeče, tedy 1em. Z toho také vyplývá další rada - zadávejte velikost písma v relativních jednotkách jako jsou procenta nebo em jednotky (1em se rovná šířka velkého písmene M), protože pokud zadáte velikost textu v pixelech, nepůjde text (v MSIE) zvětšit, což je proti pravidlům přístupnosti. Špatný příklad:
Navíc zkušený uživatel si dokáže ten text zvětšit a při zvětšení písma riskujete rozhození layoutu, překrývání textů apod. Už jenom proto se vyplatí udělat text uživatelsky přístupný hned od začátku. Ideální velikost je základní velikost prohlížeče, tedy 1em. Z toho také vyplývá další rada - zadávejte velikost písma v relativních jednotkách jako jsou procenta nebo em jednotky (1em se rovná šířka velkého písmene M).
Představte si, že by celý tento článek byl psán takto malým písmem. Pokud byste si neuměli zvětšit písmo, museli byste mít hlavu až u monitoru nebo mít sakra dobrý zrak, abyste celý článek přečetli.
IV. Provzdušnění textu pomůže, není nic horšího, než holý, několikařádkový text bez jediného odstavce. Takovému textu chybí jakákoliv struktura a přehlednost. Máte v zásadě dva jednoduché způsoby, jak tento problém řešit. Buď pomocí tagu {br} (zalomení řádku) nebo lépe celý odstavec vložíte mezi tagy {p}odstavec{/p}.
V. Další důležitou věcí jsou nadpisy, respektive podnadpisy. Pokud nějaký dlouhý text rozdělíte do několika odstavců, je to v pořádku. Ale pořád tomu něco chybí, text je stále moc dlouhý. Nebojte se přidat nějaký podnadpis. Rozdělte text do několika tématicky podobných částí a přidejte pár nadpisů. Text se opět stane přehlednější a také zábavnější, když uživatel vidí dlouhý text bez konce, může ho čtení omrzet a jít jinam.
VI. Text by neměl být široký přes celou obrazovku, obzvláště na větších monitorech a rozlišeních je text přes celou šířku stránky poměrně frustrující záležitostí. Ideální je text přes půlku obrazovky. Uživatelům s nižším rozlišením nevadí text přes celou stránku tak jako uživatelům s vyšší rozlišením.
VII. Pište správně interpunkční znaménka a podobné znaky. Tečka a čárka má být hned za určeným slovem, mezera má být až za čárkou a tečkou. Když uděláte mezi slovem a čárkou mezeru, může se vám stát, že když bude slovo na konci řádku, čárka odskočí na další řádek, což je nepříjemné, ale hlavně je to chyba.
Podobně se píší třeba závorky. Stejně jako v minulém případě, závorky má být vždy nalepena na slovo (či slova), která jsou v závorce, tudíž mezi slovem a závorkami se nedělá mezera. Obdobně, pokud za závorkou má přijít čárka, nedělá se mezera.
VIII. Text má být výřečný a úderný, ne zdlouhavý a nudný. Jistě znáte různé úvodníky ze stránek, který když si přečtete, tak zjistíte, že vás tady majitel stránek vítá a doufá, že se vám tady bude líbit. Nedávejte na web podobné věty - "doufám/e, že se Vám tady bude líbit!". Tento text má nulovou informační hodnotu a uživatele pouze zdržuje. Přečtěte si nyní následující text:
(pozn.: text byl zkopírován a upraven (změněny názvy a data) z existujícího webu, kde byl umístěn na úvodní (hlavní) stránce jako primární text.)
Firma MDIaK vznikla v roce 1994 jako obchodní firma. V roce 1997 začala dodávat na český trh výrobky průmyslové chemie. Díky vysokým poptávkám a prodeji začala sama vyrábět a kompletovat výrobky průmyslové chemie. Dnes je leaderem na trhu s jednou z nejširších nabídek lepidel, tmelů, maziv, olejů, čističů a vodných odmašťovačů vlastních registrovaných značek ????, ????, ????, ????, ???? a další. Naše společnost se ztotožňuje s filozofií obou zastupujících firem a svoji obchodní strategii zaměřuje na prodej a servis účinných a kvalitních výrobků pro průmyslové profesionální použití do výroby, oprav a údržby. Doufáme a je našim přáním, že i Vaše firma se začlenění do našeho systému VIP zákazníků.
Jestli jste text dočetli až do konce, máte můj obdiv. Z tohoto odstavce se uživatel nedozví naprosto nic důležitého či podstatného o firmě samotné. Text je nudný, fádní, nepodstatný, nevěcný. Uživatel na úvodní stránce nepotřebuje vědět, kdy firma vznikla nebo jakou má filosofii.
Text na úvodní stránce by měl být stručný a jasný, žádné dlouhé romány, které stejně nikdo číst nebude. Ideální je psát text pouze v bodech a heslech. Uživatele by měly okamžitě do očí praštit odpovědi na následující otázky - co je to za stránka/firma a co mi nabízí. Na úvodní stránce nic víc uživatel vědět nepotřebuje, k dalším informacím slouží menu a zbytek webu (hlavní stránka samozřejmě může obsahovat různé vedlejší a doplňující informace, ale ne v hlavním textu).
IX. Používejte jednoduchý jazyk, žádné složité metafory a přirovnání, tvoříte webovou stránku, nepíšete Hamleta. Vyhněte se odborné terminologii, ne každý návštěvník vašeho webu musel vystudovat stejnou vysokou školu jako vy. Jednoduchý jazyk pochopí každý, snažte se být ke svému uživateli vstřícný, vždyť každý může být potencionální zákazník. Že nezná váš slang nebo nějaký odborný výraz ještě neznamená, že je hloupý (nebo že nemá peníze:-).
Vyhněte se zbytečně dlouhým větám a složitým větním spojením. Pište co nejkratší a nejjasnější věty (samozřejmě v rámcí možností). Jedna stručná a jasná věta toho může říct více, než zbytek odstavce. Důležitý text nějak označte, nejlépe tučným písmem nebo třeba změnou barvy. Ale v žádném případě nepodtrhávat! Pokud se tedy nejedná zároveň o odkaz.
 

Buď první, kdo ohodnotí tento článek.

Komentáře

1 klokyn klokyn | E-mail | 20. září 2005 v 19:45 | Reagovat

Pekný článok, len ma štve že som chcel niečo podobné napísať na môj ešte nedokončený blog. No čo, už som stlačil dlhé Delete...

2 timy timy | E-mail | Web | 21. září 2005 v 21:47 | Reagovat

klokyn:

tak to je smůla:-( ale neboj, taky se mi stalo něco podobného. Můj první článek měl být o elementu link, který jsem nějakým omylem našel na w3c a neznal ho. O dva dny později jsem přišel na Ronnieho weblog a... smůla

3 Charlie Charlie | Web | 24. září 2005 v 23:55 | Reagovat

Připomíná mi to hru Járy Cimrmana nazvanou "Posel z Liptákova". Tam se jeden profesor rozhovoří o cestě z Prahy do Liptákova a povídá asi deset minut, a pak se slova ujme Svěrák a říká: "Tak, pan profesor vás během svého projevu stačil seznámit s tím, že jsme do Liptákova jeli auty, a že jsme cestou brali benzín.".

Nebo jak říká Steve Krug: "Zbavte se poloviny slov na každé stránce, a pak ještě poloviny toho, co zbylo.".

4 Tom!k Tom!k | 8. června 2006 v 18:12 | Reagovat

Souhlasím (až na to s tou barvou).

Hlavně nezvýrazňovat text tak, ŽE HO NAPÍŠU VELKÝMI PÍSMENY!!! To je podle me ta nejhorší věc. Také zvýrazňování změnou fotnu a barvy není typograficky správné (u toho fontu to vypadá amatérsky, u barvy zase chaoticky). To s tím podtržením by podle mě, neměl být takový problém, protože odkaz má modrou barvu (pokud není modrá, tak by vždy měla být jiná než barva ostatního textu). Nejlepší zvýraznění slova (skupiny slov) v textu je tučné písmo (kurziva je nevýrazná) a pokud to má být extra zvýrazněné, tak tučně+podtrhnout (nechat barvu stejnou jako okolní text).

5 Tom!k Tom!k | 8. června 2006 v 18:16 | Reagovat

Ještě jedna důležitá věc. Pokud máte stránku o více stránkách (propojenou například meníčkem) tak by na každé stránce měli být odkazy stejnou barvou ať v tom není bordel (na čistě informativních stránkách je nejlepší modrá, je to standart na který jsou uživatelé zvyklí). Maximálně můžete použít dvě barvy odkazů - jednu pro meníčko, druhou pro všechny ostatní odkazy na stránce.

6 INF INF | E-mail | Web | 6. září 2006 v 22:36 | Reagovat

Jen jedna připomínka, asi jsem temnomilný :-), protože z čistě černého textu na bílém pozadí mě začnou bolet oči, ale naopak... bílý text a černé pozadí můžu číst naprosto bez problémů. Tedy opačně než je popsáno výše v článku....

7 Werunca Werunca | E-mail | 27. února 2007 v 16:15 | Reagovat

velice podařený text a hlavně zajímaví ale mohla bysi mi poradit když mám malíé písmo na ploše obrazovky a předim bylo velký jak to dám zas edopořádku? mocinky díky

8 Joe Were Joe Were | E-mail | Web | 30. května 2007 v 0:16 | Reagovat

Souhlasím tady s kolegou INF (6.9.2006 22:36) Já mám stránky nastavené na tmavé pozadí a světlý text a mě osobně se to čte příjemně :)

Kdyžtak pro ty, co to tak nesnesou, neexistuje nějaké kodování na tlačítko, co by přepánalo zapnutí/vypnutí stylu? Ať má na výběr, co se mu bude čít nejlépe ;)

Nový komentář

Přihlásit se
  Ještě nemáte vlastní web? Můžete si jej zdarma založit na Blog.cz.
 

Aktuální články

Reklama