Zásady návrhu webu, které fungují
Mnoho z toho, co se o návrhu webu říká, je preference vydávaná za zásadu. Existuje ale malá sada pravidel, která obstojí v praxi a která je znát, když chybí.
Tento průvodce je prochází, s tím, co každé řeší a jak ověřit, že je dodrženo.
Hierarchie: říct, co je nejdůležitější#
Hierarchie je zásada, která nejvíc ovlivňuje, zda lidé stránce porozumí, a nejsnáze se ověřuje.
- Na každé obrazovce je jedna věc nejdůležitější. Pokud jsou tři, návštěvník nevybere žádnou.
- Velikost, tučnost a prostor okolo sdělují důležitost lépe než barva.
- Hlavní akce musí vizuálně vystupovat nad vším ostatním na stránce.
- Seskupujte související blízkostí; vzdálenost sděluje oddělenost.
- Nepoužívejte víc než dvě nebo tři úrovně nadpisů. Víc se už nečte jako hierarchie.
- Otestujte přimhouřením očí: co zůstane čitelné, to lidé vidí první.
Test s přimhouřenýma očima trvá pět sekund a zachytí většinu problémů s hierarchií.
Prostor, kontrast a čitelnost#
Tři měřitelné věci, které oddělují pohodlné stránky od únavných.
| Prvek | Praktické pravidlo | Častá chyba |
|---|---|---|
| Délka řádku | 60 až 80 znaků | Řádky přes celou šířku obrazovky |
| Velikost základního textu | 16 px a víc na mobilu | 14 px «aby se vešlo víc» |
| Řádkování | 1,5 v základním textu | Těsné řádkování, hustý blok |
| Kontrast textu | Nejméně 4,5:1 | Světle šedá na bílé |
| Prostor mezi sekcemi | Štědrý a konzistentní | Vše slepené, bez nádechu |
| Dotykové cíle | Minimálně 44 px | Malé odkazy na mobilu |
| Počet písem | Jedno nebo dvě | Čtyři písma na jedné stránce |
Konzistence a srozumitelnost#
Konzistence umožňuje naučit se web jednou místo učit se ho znovu na každé stránce.
- Stejný prvek se chová stejně na celém webu.
- Tlačítka stejné důležitosti vypadají vždy stejně.
- Odkazy jsou rozpoznatelné jako odkazy bez najetí myší.
- Popisky říkají, co se stane: «Poptat cenu» místo «Odeslat».
- Pište jazykem zákazníka, ne interním jazykem.
- Chyby formuláře se zobrazují u pole a říkají, jak je opravit.
- Prvky, které nejsou klikací, nemají vypadat klikací.
Pravidlo popisků má největší návratnost: změna «Odeslat» na «Poptat cenu» zvýší konverzi, aniž by se změnilo cokoli jiného.
Co je vkus, a ne zásada#
Opakovaná pravidla, která neobstojí proti datům a stojí čas v diskusích.
| Tvrzení | Realita |
|---|---|
| Vše musí být nad zlomem | Lidé scrollují; srozumitelnost váží víc |
| Méně kliknutí je vždy lepší | Správná kliknutí porazí málo kliknutí |
| Karusel na úvodní stránce je povinný | Mívá velmi nízkou interakci |
| Minimalismus je vždy lepší | Málo kontextu ztěžuje rozhodnutí |
| Nikdy neotvírat odkazy v novém okně | Záleží na kontextu; dokumenty jsou výjimka |
| Červená je agresivní | Záleží zcela na oboru a kultuře |
| Stránka musí být originální | Známost vzorců pomáhá při používání |
Známé vzorce nejsou nedostatek kreativity: jsou důvodem, proč lidé umějí používat web, který nikdy neviděli.
Časté dotazy
Konvertuje hezký web lépe?
Srozumitelný web konvertuje lépe; estetika pomáhá skrze důvěryhodnost v prvních sekundách. Estetika selhává, když soupeří s porozuměním — animace, které zdržují, nízký kontrast ve jménu elegance, kreativní popisky, kterým nikdo nerozumí. Nejdřív srozumitelnost, estetika ve službě srozumitelnosti.
Kolik barev mám použít?
Jednu barvu značky, jednu akcentní pro akce a šedou škálu. Poté každá další barva potřebuje funkční odůvodnění — stavy chyby, úspěchu, varování. Velké palety ztěžují zvýraznění důležitého, protože vše soupeří se vším.
Mám sledovat trendy v designu?
S mírou. Trendy datují web a vynucují přestavby z estetických, ne funkčních důvodů. Dobře stárne čitelná typografie, štědrý prostor a solidní hierarchie — zásady staré desítky let. Trendy přijímejte tam, kde je levné je vrátit, a vyhněte se jim ve struktuře.
Jak poznám, že můj návrh funguje?
Sledujte chování: dostávají se lidé k hlavní akci, nebo odcházejí? Kde se zaseknou ve formulářích? Nahrávky relací a analýza formulářů to ukážou během minut. Interní názor na estetiku je nejhorší dostupný ukazatel, protože tým vidí web denně a návštěvníci jednou.
zásady návrhu webuvizuální hierarchiečitelnost na webukontrast textupoužitelnost webudesign a konverze
