Ako zhodnotiť návrh webu pred schválením: 9 vecí na kontrolu
Tím Reborn CreativeČo si z článku odnesiete
- Návrh webu neposudzujete podľa toho, či sa vám páči, ale podľa toho, či zvládne úlohu webu: ukázať ponuku, previesť človeka k cieľu a fungovať na telefóne.
- Na každej fáze (wireframe, prototyp, vizuálny návrh, web pred spustením) sa hodí kontrolovať iné veci. Základnú štruktúru sa oplatí vyriešiť skôr, v náčrte, no skutočný problém pomenujte v ktorejkoľvek fáze.
- Deväť kontrol vám pomôže napísať pripomienky, s ktorými dizajnér vie pracovať. Nenahrádza test s ľuďmi ani odborný audit prístupnosti a nezaručuje počet dopytov.
1. Čo schvaľujete na ktorej fáze
Rozdelenie na fázy sa u dizajnérov líši, tu je bežné. Proces, kolá pripomienok a to, kto za firmu rozhoduje, sme opísali v článku Ako zadať UX a UI dizajn webu alebo appky. Tu je, čo pri každej fáze sledovať.
| Fáza | Čo dostanete | Čo kontrolujete | Čo môže počkať na ďalšiu fázu |
|---|---|---|---|
| Wireframe | čiernobiely náčrt rozloženia stránok | poradie sekcií, čo je navrchu, kde je kontakt, či nechýba stránka | farby, fotky, presné znenie textov |
| Prototyp | klikateľný náčrt | cesty (od úvodu k cenníku, ku kontaktu), formulár, správanie na mobile | detaily vzhľadu |
| Vizuálny návrh | farby, písmo, fotky, ikony | hierarchia, čitateľnosť, kontrast, jednotnosť, stavy prvkov | väčšia zmena štruktúry (lepšie sa rieši v náčrte, ale skutočný problém pomenujte aj tu) |
| Web pred spustením | web na testovacej adrese | skutočné texty a fotky, odkazy, formulár, telefón | nové nápady, ktoré v zadaní neboli |
Odporúčanie z praxe: základnú štruktúru rozhodnite skôr, než sa začne ladiť vzhľad, pretože zmena rozloženia v neskoršej fáze zvyčajne znamená viac práce. Ak v ktorejkoľvek fáze vidíte skutočný problém, pomenujte ho, nech je to wireframe alebo hotový vizuál.
Chcete to mať hotové bez starostí? Pošlite nám pár viet o zadaní a cenovú ponuku dostanete do 48 hodín, zadarmo a bez záväzkov.
2. Deväť vecí na kontrolu
Pri každej položke je otázka a spôsob, ako ju skontrolovať.
1. Je jasné, čo web ponúka a čo má človek urobiť?
Ukážte prvú obrazovku návrhu niekomu mimo firmy na niekoľko sekúnd a opýtajte sa, čo firma ponúka a čo by urobil ako prvé. Je to praktický test, nie meraný limit. Ak váha on alebo vy, stojí za to upraviť nadpis a hlavné tlačidlo.
2. Vedie vizuálna hierarchia oko v správnom poradí?
Zmenšite návrh na veľkosť poštovej známky alebo prižmúrte oči. Čo vidíte prvé, druhé, tretie? Dobré poradie je podľa nás: čo ponúkate, čo urobiť, prečo vám veriť (odporúčanie z praxe). Ak je najväčší prvok dekorácia, hierarchia nepracuje pre cieľ webu.
3. Má mobil vlastný návrh?
Požiadajte o návrh obrazoviek pre telefón, nie len o zmenšený počítač. Skontrolujte prvú obrazovku, veľkosť tlačidiel a či sa text zmestí bez posúvania do strán. S tým súvisia dve požiadavky WCAG 2.2. Kritérium 2.5.8 (úroveň AA) žiada, aby mal ovládací prvok aspoň 24 × 24 CSS pixelov, s výnimkami (napríklad menší prvok s dostatkom voľného miesta okolo alebo odkaz vo vete). Kritérium 1.4.10 (úroveň AA) žiada, aby sa obsah dal zobraziť pri šírke 320 CSS pixelov bez posúvania v dvoch smeroch, s výnimkami pre obsah, ktorý potrebuje dvojrozmerné rozloženie, napríklad mapy a dátové tabuľky. Obe sa dajú overiť až na hotovom webe; pri návrhu sa pýtate, či s nimi dizajnér počíta. Väčšie tlačidlá sa na telefóne používajú pohodlnejšie, to je ale odporúčanie z praxe, nie požiadavka. Podrobnosti sú v článku Web na mobile: 12 vecí na kontrolu.
4. Dostanete sa k cieľu?
Zadajte si dve alebo tri úlohy, napríklad nájsť cenu, zistiť adresu, poslať dopyt, a prejdite ich v prototype. Počítajte kroky a všímajte si, kde sa zastavíte. Názvy v menu by mali byť slová, ktoré používajú zákazníci, nie interné pojmy.
5. Má formulár všetky stavy?
Nestačí jeden obrázok vyplneného formulára. Vyžiadajte si návrh prázdneho stavu, aktívneho poľa, chyby, úspešného odoslania a čakania na odoslanie. Chyba má povedať slovami, čo je zle a ako to opraviť. Pravidlá formulára sú v článku Formulár na webe: 10 pravidiel.
6. Dá sa to prečítať?
Kritérium 1.4.3 (úroveň AA) vyžaduje pri bežnom texte kontrast aspoň 4,5 : 1 a pri veľkom texte aspoň 3 : 1. Veľký text je podľa W3C text od 18 bodov, alebo od 14 bodov tučným písmom. Výnimky platia napríklad pre logo a neaktívne prvky. Hodnoty vypočíta nástroj Kontrast farieb. Riadkovanie hlavného textu aspoň 1,5 odporúča dokumentácia MDN. Nie je to požiadavka úrovne AA: kritérium 1.4.12 žiada len to, aby obsah fungoval aj vtedy, keď si čitateľ riadkovanie nastaví na 1,5-násobok písma. Skontrolujte aj dĺžku riadku a veľkosť písma na mobile.
7. Čo overiť o prístupnosti už v návrhu?
Tri kritériá WCAG 2.2 sa dajú posúdiť už na návrhu. Pri ovládaní klávesnicou má byť viditeľný indikátor fokusu (2.4.7, úroveň AA). Farba nemá byť jediným spôsobom, ako sa niečo povie alebo rozlíši (1.4.1, úroveň A). Obrázok, ktorý nesie informáciu, má mať textovú alternatívu s rovnakým účelom (1.1.1, úroveň A); čisto dekoratívny obrázok ju nepotrebuje. Pýtajte sa dizajnéra, ako vyzerá označený prvok pri ovládaní klávesnicou a ako sa chyba alebo stav odlíši bez farby. Veľkosť ovládacích prvkov rieši kontrola 3. Sú to tri vybrané kritériá, nie úplný zoznam, a nejde o audit prístupnosti. Ich splnenie neznamená, že web vyhovuje WCAG; to posúdi až odborný audit hotového webu. Jednoduchú kontrolu hotovej stránky ponúka nástroj Kontrola prístupnosti webu (12 otázok o kontraste, klávesnici, popisoch a formulároch), širší pohľad je v článku Prístupnosť webu pre firmy.
8. Je návrh jednotný?
Hľadajte tri rôzne štýly tlačidla, štyri rôzne nadpisy alebo rôzne odstupy medzi sekciami. Jednotnosť neznamená nudu, znamená dizajnový systém: pravidlá, ktoré umožnia pridať stránku bez nového návrhu.
9. Je v návrhu skutočný obsah a chýbajúce stránky?
Návrh s textami „Lorem ipsum“ neukáže, či sa nadpis zmestí na dva riadky na mobile. Žiadajte skutočné alebo aspoň reálne dlhé texty a fotky. Opýtajte sa aj na to, čo ešte nie je navrhnuté: stránka 404, poďakovanie po odoslaní, cookie lišta, prázdne stavy, tmavý režim, ak je v zadaní.
3. Pekný návrh, ktorý nie je zrozumiteľný (modelový príklad)
Modelový príklad, nie skutočný klient ani skutočný web. Servis záhradnej techniky dostal dve verzie prvej obrazovky. Prvá má veľkú fotku kosačky, heslo „Vaša záhrada, naša vášeň“ a jemné menu. Vyzerá dobre. Návštevník ale nevie, či firma kosačky predáva, opravuje alebo prenajíma, ani kde pôsobí. Druhá verzia má rovnakú fotku, ale nadpis „Servis záhradnej techniky v Prešove“, vedľa neho tlačidlo „Zavolať servisu“ a pod ním tri riadky o tom, čo sa opravuje. Obe verzie sú rovnako „pekné“. Líšia sa tým, v akom poradí si návštevník pravdepodobne všimne informácie. Pripomienka k prvej verzii: „Z prvej obrazovky nie je jasné, čo firma ponúka a kde. Navrhujem nadpis s druhom služby a mestom a jedno hlavné tlačidlo.“
4. Ako napísať pripomienku, s ktorou sa dá pracovať
Dobrá pripomienka má tri časti: kde (obrazovka a miesto), čo vidíte a prečo to prekáža cieľu. Návrh riešenia je voliteľný, dizajnér ho vie zvyčajne nájsť sám.
- Slabá: „Nepáči sa mi modrá.“ Dizajnér nevie, čo má zmeniť ani prečo.
- Dobrá: „Na obrazovke Cenník je tlačidlo ‚Objednať‘ sivé na bielom, je ťažko čitateľné. Zákazník ho môže prehliadnuť.“
Pripomienky pošlite od jednej osoby za firmu v jednom dokumente alebo vlákne, pre každú uveďte číslo obrazovky. Rozdelenie na kolá je v článku o zadaní.
5. Čo táto kontrola nenahrádza
- Test s ľuďmi. Ak je prototyp hotový, ukážte ho trom až piatim ľuďom z cieľovej skupiny. Postup je v článku Testovanie použiteľnosti na piatich ľuďoch.
- UX audit hotového webu. Ten robíte po spustení, napríklad podľa UX auditu za 15 minút.
- Odborný audit prístupnosti a právne posúdenie. Deväť kontrol nie je audit prístupnosti ani právne stanovisko. Ak máte povinnosť alebo požiadavku od zákazníka, nechajte web posúdiť odborníkom.
- Záruku výsledku. Dobrý návrh zvyšuje šancu, že web bude fungovať, ale počet dopytov nezaručuje ani kontrola, ani samotný dizajn.
Kontrolný zoznam
Deväť kontrol z tohto článku v jednej tabuľke. Pri každej položke sa rozhodnite pre jednu z troch možností: schváliť, vrátiť na opravu alebo sa opýtať. Pripomienky zbierajte do jedného dokumentu od jednej osoby za firmu. Zoznam nie je audit prístupnosti a neobsahuje všetky kritériá WCAG.
Čo kontrolovať na ktorej fáze (odporúčanie z praxe): wireframe 1, 2, 4 a 9; prototyp 1 až 5 a 9; vizuálny návrh 1 až 9; web pred spustením 1 až 9 a skúška na skutočnom telefóne.
| # | Čo kontrolujem | Ako to skontrolujem |
|---|---|---|
| 1 | Je jasné, čo web ponúka a čo mám urobiť? | Prvú obrazovku ukážte niekomu mimo firmy na niekoľko sekúnd. Praktický test, nie meraný limit. |
| 2 | Vedie hierarchia oko v správnom poradí? | Zmenšite návrh alebo prižmúrte oči: čo vidíte prvé, druhé, tretie? |
| 3 | Má mobil vlastný návrh? | Obrazovky pre telefón: prvá obrazovka, veľkosť tlačidiel, text bez posúvania do strán. WCAG 2.2 žiada cieľ aspoň 24 × 24 CSS px (2.5.8, AA, s výnimkami) a obsah pri šírke 320 CSS px bez posúvania v dvoch smeroch (1.4.10, AA). Overí sa až na hotovom webe. |
| 4 | Dostanem sa k cieľu? | Dve alebo tri úlohy (cena, adresa, dopyt) prejdite v prototype a počítajte kroky. |
| 5 | Má formulár všetky stavy? | Prázdny, aktívne pole, chyba, úspech, odosielanie. Chyba slovami povie, čo je zle a ako to opraviť. |
| 6 | Dá sa to prečítať? | Kontrast bežného textu aspoň 4,5 : 1, veľkého aspoň 3 : 1 (WCAG 2.2, 1.4.3, AA). Riadkovanie hlavného textu aspoň 1,5 odporúča MDN; nie je to požiadavka úrovne AA. |
| 7 | Čo overiť o prístupnosti už v návrhu? | Viditeľný indikátor fokusu pri ovládaní klávesnicou (2.4.7, AA). Informácia nestojí len na farbe (1.4.1, A). Obrázok s informáciou má textovú alternatívu (1.1.1, A). Tri vybrané kritériá, nie audit. |
| 8 | Je návrh jednotný? | Hľadajte tri rôzne štýly tlačidla, štyri rôzne nadpisy alebo rôzne odstupy. |
| 9 | Je tam skutočný obsah a chýbajúce stránky? | Reálne texty a fotky. Navrhnuté sú stránka 404, poďakovanie po odoslaní, cookie lišta, prázdne stavy a tmavý režim, ak je v zadaní. |
Pripomienka má tri časti: kde (obrazovka a miesto), čo vidíte a prečo to prekáža cieľu webu.
Nový web alebo redizajn s našou pomocou
Pošlite nám stručný opis projektu alebo adresu súčasného webu. Dohodneme ďalší postup. Pozrite si službu Tvorba web stránok alebo nám napíšte.
Časté otázky
Mám komentovať farby, keď dostanem len wireframe?
Pri wireframe sa sústreďte najmä na obsah, poradie sekcií, navigáciu a umiestnenie dôležitých prvkov. Farby sa zvyčajne riešia vo vizuálnom návrhu. Ak však už v tejto fáze chýba dôležitá požiadavka značky, upozornite na ňu.
Stačí, keď sa mi návrh páči?
Spokojnosť majiteľa je dôležitá, ale nestačí. Web si prezerajú zákazníci, ktorí nepoznajú vašu firmu. Preto kontrolujte, či sa dá pochopiť, použiť a prečítať.
Kto za firmu návrh schváli?
Jedna osoba. Pripomienky od viacerých ľudí zbierajte do jedného dokumentu, aby sa dizajnér nedostal do protichodných pokynov.
Môžem niečo meniť po schválení?
Záleží na dohode s dizajnérom. Zmena v neskoršej fáze zvyčajne znamená viac práce ako zmena v náčrte, preto sa oplatí kontrolovať už pri wireframe.
Zdroje a overenie
- W3C, Web Content Accessibility Guidelines (WCAG) 2.2, kritériá 1.1.1, 1.4.1, 1.4.3, 1.4.10, 1.4.12, 2.4.7 a 2.5.8 (znenie kritérií skontrolované 30. 10. 2026).
- MDN Web Docs,
line-height(odporúčanie riadkovania aspoň 1,5 pre hlavný text). - Pomocné testy (niekoľko sekúnd bez meraného limitu, zmenšenie návrhu, dve alebo tri úlohy), poradie kontrol podľa fáz a pravidlá pripomienok sú odporúčania z praxe Reborn Creative, nie štandard. Modelové príklady sú vymyslené.
✓ od 690 €✓ Štart do pár dní
Weby,ktoré predávajú Weby a e-shopy, rýchle aj na mobile. Tvorba web stránok →
Chcete to isté pre svoju značku?
Napíšte nám pár viet o zámere a do pár hodín v pracovný deň sa ozveme s návrhom postupu.Viac o službe: tvorba web stránok a e-shopov, balíky od 690 €.
Neviete, čo vášmu webu alebo profilu chýba?
