Prehliadnutý vizuálny detail môže rozhodnúť o tom, či hráč okamžite rozpozná základné údaje hry alebo si najprv všimne bonusovú ponuku. Jasná hierarchia usporadúva prvky podľa ich funkcie: pravidlá, aktuálny stav a ovládanie zostávajú čitateľné, zatiaľ čo bonusy získavajú vlastný, zreteľne vymedzený priestor. Ako praktický príklad prostredia s online hrami môže poslúžiť najlepšie online casino, kde sa herné informácie a propagačný obsah stretávajú na jednej obrazovke a ich rozlíšenie pomáha používateľovi orientovať sa.
Čo má používateľ vidieť ako prvé?
Základné informácie odpovedajú na bezprostredné otázky: aká hra je otvorená, aký je jej aktuálny stav a ktoré ovládacie prvky sú k dispozícii. Preto bývajú umiestnené pri hlavnej hernej ploche alebo v jej bezprostrednom okolí. Bonusové prvky môžu byť výrazné, no ich poloha a grafické spracovanie by nemali sťažovať rozpoznanie týchto údajov.
Pomáha aj dôsledné poradie. Názov hry a stav sa dajú umiestniť do stabilnej hornej časti, zatiaľ čo ovládanie patrí k oblasti, kde používateľ vykonáva príslušnú činnosť. Bonusové podmienky alebo upozornenia možno zoskupiť samostatne. Takéto rozloženie vytvára predvídateľný vzťah medzi informáciou a jej umiestnením.
Ako sa odlišujú základné údaje a bonusy?
Rozlíšenie nemusí závisieť od jediného výrazného prvku. Dizajnéri môžu kombinovať veľkosť textu, kontrast, farbu, ikonografiu, medzery a orámovanie. Ak sa rovnaká vizuálna úprava používa pre rovnaký typ obsahu, používateľ si postupne vytvára jednoduché pravidlá: napríklad výrazný panel signalizuje bonus, kým pokojnejšie označenie uvádza stav hry.
Dôležitá je aj miera zdôraznenia. Žiarivá farba, pohyb či veľký nadpis priťahujú pozornosť, preto je vhodné vyhradiť ich prvkom, ktoré skutočne potrebujú okamžitú pozornosť. Základné údaje nemusia súťažiť s animovaným bonusom o rovnakú úroveň výraznosti. Ich čitateľnosť podporuje stabilná typografia, dostatočný kontrast a stále umiestnenie.
- Stála poloha: opakujúce sa informácie zostávajú na predvídateľnom mieste.
- Odlišný vzhľad: bonusový obsah má rozpoznateľný štýl, ktorý sa neprekrýva so základným ovládaním.
- Primeraný kontrast: text je čitateľný bez toho, aby každý prvok pôsobil rovnako dominantne.
Akú úlohu má pohyb a kontext?
Animácia môže upozorniť na zmenu stavu alebo predstaviť bonusovú udalosť, ale jej načasovanie a trvanie ovplyvňujú, koľko pozornosti si vyžiada. Pokojné informačné prvky zostávajú užitočným orientačným bodom aj vtedy, keď sa časť obrazovky mení. Rozdiel medzi trvalými údajmi a dočasným oznámením tak možno vyjadriť nielen farbou, ale aj pohybom a dĺžkou zobrazenia.
Pri návrhu pomáha posudzovať obsah v kontexte celej obrazovky. Ikona, ktorá je zrozumiteľná sama osebe, môže byť nejednoznačná bez blízkeho označenia. Podobne môže bonusový panel pôsobiť ako súčasť základného ovládania, ak používa rovnaké umiestnenie a vzhľad. Súvislý systém rozloženia preto prepája text, grafické prvky a ich vzájomné vzdialenosti.
Všeobecné články o digitálnych technológiách, napríklad obsah na techbyte.sk, predstavujú širší kontext pre uvažovanie o tom, ako ľudia pracujú s obrazovkami. Konkrétne rozloženie herných informácií však vychádza z potrieb danej hry a z úloh, ktoré má jej rozhranie sprostredkovať.
Prečo testovať hierarchiu v rôznych situáciách?
Rozhranie sa oplatí posúdiť pri prvom otvorení aj počas bežného používania. Pri prvom kontakte je dôležité, či používateľ dokáže nájsť názov, stav a ovládanie. Neskôr sa ukáže, či sa základné údaje dajú rýchlo opätovne nájsť aj po zobrazení bonusovej informácie. Tieto otázky pomáhajú odhaliť, či jednotlivé časti plnia rozdielne úlohy.
Vizuálna hierarchia teda neznamená, že bonusy musia byť nenápadné. Znamená, že ich výraznosť je zladená s informačnou úlohou obrazovky. Keď sú základné údaje stabilné a bonusy jasne oddelené, používateľ ľahšie rozlíši, čo opisuje aktuálny stav a čo predstavuje doplnkovú funkciu. Konkrétnym dôsledkom pre dizajn je umiestniť stav hry a ovládanie do stálej, čitateľnej zóny a bonusové prvky oddeliť vlastným vizuálnym štýlom.
Pre širší kontext pozrite aj statista.com.
