Mobil, stavy a detaily

Vzhled na velké obrazovce je jen část práce. Zbytek jsou situace, ve kterých se vzhled používá.

Mobil

Většina lidí uvidí tvoji věc na telefonu. Přesto se ladí na notebooku a mobil se kontroluje nakonec.

1. Zkontroluj to hned, ne nakonec

   Zúž okno prohlížeče na šířku telefonu. Trvá to vteřinu.

2. Nic nesmí přetékat do stran

   Vodorovné posouvání celé stránky je nejčastější chyba. Nejčastěji ho způsobí široká tabulka nebo dlouhý text bez zalomení.

3. Dotykové cíle musí být dost velké

   Malé odkazy vedle sebe se na telefonu netrefí. Zhruba 44 pixelů na výšku je rozumné minimum.

4. Menu musí jít otevřít i zavřít

   A po kliknutí na odkaz se má zavřít samo.

Projdi projekt z pohledu telefonu (šířka 375 px).

Zkontroluj:
1. Přetéká někde obsah do stran? Který prvek to způsobuje?
2. Jsou někde odkazy nebo tlačítka moc malé nebo moc blízko u sebe?
3. Fungují všechny stavy menu – otevřít, zavřít, zavřít po kliknutí?
4. Nejsou někde tabulky nebo bloky kódu, které se nedají posunout?
5. Je text čitelný bez přibližování?

U každého problému napiš, kde přesně je a jak to opravit.

Stavy prvků

Tlačítko není jen tlačítko. Má několik stavů a každý má být vidět.

1. Klidový

   Jak vypadá normálně.

2. Najetí myší

   Musí být jasné, že je to klikatelné.

3. Zaměření z klávesnice

   Nejvíc opomíjený stav. Kdo ovládá web klávesou Tab, musí vidět, kde je.

4. Aktivní / probíhá

   Po kliknutí musí být hned vidět, že se něco děje.

5. Nedostupný

   Když jde tlačítko zmáčknout, ale nemá to smysl, musí to být vidět – a nejlíp i vysvětlené.

Detaily, které mění dojem nejvíc

1. Nic neskáče při načítání

   Když se stránka po načtení obrázku posune, působí to nedodělaně. Prvkům, které se načítají, se má rezervovat místo dopředu.

2. Reakce do okamžiku

   Po kliknutí musí být do zlomku vteřiny vidět, že se něco stalo. I když výsledek přijde za dvě vteřiny.

3. Texty jsou psané lidsky

   „Nepodařilo se uložit, zkus to prosím znovu“ místo „Error: request failed“.

4. Prázdný stav něco říká

   Ne bílá plocha. Vysvětlení a nabídka prvního kroku.

5. Konzistence

   Stejná věc vypadá na všech stránkách stejně. Tři různá tlačítka na třech stránkách zničí dojem víc než jedno nehezké.

Přístupnost bez teorie

Čtyři věci, které pokryjí většinu:

1. Kontrast

   Text musí být čitelný. Světle šedá na bílé není.

2. Ovládání klávesnicí

   Projdi si stránku tabulátorem. Dostaneš se všude a vidíš, kde jsi?

3. Popisky obrázků

   Obrázek, který nese informaci, potřebuje textový popis.

4. Formulářová pole mají štítky

   Ne jen nápovědu uvnitř pole, která po začátku psaní zmizí.

Projdi projekt z pohledu přístupnosti a najdi konkrétní problémy:

1. Kde je nedostatečný kontrast textu vůči pozadí?
2. Kde není vidět zaměření z klávesnice?
3. Které obrázky nemají textový popis a měly by ho mít?
4. Která formulářová pole nemají štítek?
5. Kde se používá barva jako jediný nositel informace?

U každého napiš, kde to je a jak to opravit. Neopravuj to zatím.

Bod 5 se týká i lidí bez poruchy barvocitu – například když se stav objednávky pozná jen podle barvy tečky.