Webdizajn: 9 zákonov pre tvorbu dokonalého webu
Aktualizované: 21. septembra 2017 • Publikované: 4. mája 2016
Frissítve: 21. septembra 2017 • Közzétéve: 4. mája 2016
Webdizajn je pomerne zložitý proces, i keď sa to tak na prvý pohľad nemusí zdať. Webstránka totiž musí plniť niekoľko funkcií naraz: byť informatívna, praktická na používanie, rovnakou mierou by však mala byť príjemná na pohľad, estetická a zároveň efektívne komunikovať danú značku, jej produkty a služby. Technická úroveň internetovej stránky tiež nie je zanedbateľná položka.
Počas našej práce s klientmi sme prišli na to, že existujú určité pravidlá, o ktorých musíme našich zákazníkov informovať. Ušetríme tým veľa času i peňazí. Preto sme zostavili akýsi manuál s deviatimi zákonmi o tom, akoby mala vyzerať profesionálne zostavená webstránka. Prečítajte si nasledujúce riadky, poskytnú vám zreteľnejší pohľad do sveta profesionálneho webového dizajnu a jeho nepísaných zákonov
-
Vizuálna hierarchia
Podmanivý webdizajn skrýva jednu základnú hodnotu – vizuálnu hierarchiu. Je to proces činností, ktorými ľudské oko a mozog vníma, cíti a vidí. I keď si toto automatické zaraďovanie neuvedomujeme, náš mozog ho vykonáva nepretržite. Tento proces nazývame vizuálnou hierarchiou.
Niektoré časti webu sú dôležitejšie než iné, a úlohou webdizajnérov je na ne vhodným spôsobom upozorniť. Ak má horné menu 10 položiek, sú pre nás všetky rovnako významné? Na ktoré z nich by sme chceli, aby zákazníci klikli ako prvé? Dôležité položky by mali figurovať najvyššie, aby boli dobre viditeľné a dostupné.
Vizuálna hierarchia nesúvisí len s veľkosťou, aj farbou sa dá vyzdvihnúť ten – ktorý element, tlačidlo alebo položka v menu. Môžeme sa hrať aj s kontrastom alebo formou. Správne poradie na stránke určujeme podľa vytýčených obchodných cieľov. Ak nie je stanovený cieľ, webdizajnéri tápu a nemajú sa čoho chytiť.
Tu máme príklad z eshopu sportdirect.com. Najväčšiu pozornosť na seba strháva hnedá bunda (chceš ma!), potom hlavný nadpis (len dnes ma môžeš kúpiť, neváhaj!), potom nasleduje informácia o cene (kúp si ma!). Po týchto údajoch ešte nasleduje doplňujúca info o výhodnosti nákupu (80% zľava).
-
Správny pomer
Pravidlo zlatého stredu – čarovné číslo 1,617 dodá každému obrazu symetriu, správny proporčný pomer, harmonickú a oku lahodiacu estetiku.
Na obdobnom princípe funguje Fibonacciho sústava čísiel (Fibonacciho postupnosť), kde každé nasledujúce číslo určuje súčet predošlých dvoch: 0, 1, 1, 2, 3, 5, 8, 13, 21 a tak ďalej. Je zaujímavé, že oba princípy sú zdanlivo odlišné, ale konečné číslo je zhodné. Mnoho umelcov, staviteľov, sochárov a maliarov vytvorilo svoje pamätné práce vďaka využitiu teórie zlatého stredu. Ako príklad nám poslúži jedna z najznámejších stavieb sveta – rímsky Panteón:
Myslíte, že aplikovať zlatý stred je v dnešnej dobe už pasé? Tak si pozorne obzrite hlavnú stránku sociálnej siete Twitter:
-
Hickov zákon
Hickov zákon zjednodušene hovorí: to, ako rýchlo sa človek dokáže rozhodnúť, ovplyvňuje najmä rozmanitosť ponuky, t.j. čím viac toho máme na výber, tým horšie a pomalšie si dokážeme vybrať.
Tento syndróm sa objavuje u každého – či už sedíme v reštaurácii a v ruke držíme jedálny lístok hrubý ako biblia a z dôvodu širokého repertoáru jedál nie sme schopní vybrať si večeru. Ak by sme mali naporúdzi len napríklad päť položiek, náš rozhodovací proces by to podstatne zrýchlilo a zjednodušilo.
Čím viac možností zákazník má, tým viac sa zhoršuje využiteľnosť danej ponuky, čo môže viesť až k rezignácii – jednoducho neprebehne žiadna akcia, nakoľko zákazník radšej odstúpi od nákupu, akoby mal predlžovať stres z rozhodovania. Preto platí pravidlo – nenechajte návštevníkom webu veľa priestoru na to, aby sa museli rozhodovať. Tento zákon musí byť viditeľný na každom mieste internetovej stránky. Ľudia potrebujú filtre. Ak chcete predávať veľké množstvo tovaru, musíte vytvoriť premyslený a praktický filtrovací systém.
Ako príklad tu máme opäť stránku eshopu sportsdirect.com. Šikovné umiestnenie ľavého stĺpca s možnosťou filtrovať produkty, pomáha návštevníkom zrýchliť proces hľadania:
-
Fittov zákon – ergonómia
Fittov zákon hlása, že čím väčší sa nám zdá byť objekt a čím bližšie k nemu vedie cesta, tým je pre nás dostupnejší a ľahšie sa používa. Na tomto princípe funguje napríklad tlačidlo Play v hudobnej aplikácii Spotify.
To, samozrejme, neznamená, že čo je väčšie, je vždy lepšie. Tlačidlo, čo by vyplnilo polovicu obrazovky nie je tým najvhodnejším riešením. Dobre navrhnuté tlačidlo na webe, aj menšieho rozmeru dokáže divy. Tlačidlá by mali byť vytvorené tak, aby ladili aj s ostatným prostredím webu. Ak napríklad na našej stránke figuruje tlačidlo „Odoslať“ a „Vymazať“, tak prvé by malo byť logicky označené a vyzdvihnuté tak, aby sa dosiahla žiadaná akcia.
-
Pravidlo dvoch tretín
Weby bez kvalitných fotografií a ilustrácií sú mŕtve. Vizuálna komunikácia pôsobí na spotrebiteľa oveľa rýchlejším tempom než text. Nie je však jedno akým spôsobom tieto vizuálne prvky komponujeme, usporiadame a zostriháme. Tu sa oplatí využiť pravidlo dvoch tretín. Fotografie alebo grafiky rozdelíme na 9 rovnaných častí. Jednotlivé okienka nám pomôžu umiestniť dôležité elementy obrázku tak, aby boli na čo najatraktívnejšom bode pre naše oko.
Na nasledujúcich fotografiách pekne vidieť, že pravý obrázok je pre nás na pohľad oveľa zaujímavejší než ľavý:
-
Zákon Gestalt dizajnu
Psychológia postavená na princípe Gestalt sa zaoberá fungovaním ľudskej mysle a mozgu. Tento koncept je postavený na poznatku, že ľudské oko najprv vníma celistvý obraz, až neskôr si začne všímať jeho jednotlivé časti.
Dve príklady:
Na prvom obrázku vidíme strom, bez toho, aby sme spozorovali zvieratá. Ten istý princíp prebieha aj na vedľajšom obrázku, kde najprv vnímame psa, až potom si všimneme fľaky.
Ľudia vždy najprv vidia celú vašu web stránku a až potom začnú vnímať menu, obsah, slogany, jednotlivé fotografie. Celok teda závisí od jednotlivých detailov. Preto je nutné si dať záležať na výslednom finálnom obraze celej web stránky.
-
Biele pozadie a minimalistický dizajn
Biele pozadie webovej stránky tvorí dôležitú súčasť celkového vzhľadu. Vďaka nemu vyniknú ostatné grafické prvky, textácia a fotografie. Nie je to len „prázdne miesto“, ktoré sa majitelia webov snažia zúfalo vyplniť. Biele miesta tvoria funkčnú a veľmi dôležitú súčasť dizajnu webu.
Internetová stránka, ktorá je doslova prepchatá informáciami a neusporiadanými vizuálnymi prvkami je neprehľadná, odrádza od ďalšieho čítania, chýba jej informačná hodnota a je nepohodlná na používanie. Preto sú jednoduché weby tak obľúbené a žiadané u zákazníkov.
Ak máme na webe dostatok bieleho miesta, čistí nám priestor a poskytuje jasné informácie, komunikuje so zákazníkom. To, že je web jednoduchý, neznamená, že nemá dostatok obsahu. Minimalistický, jednoduchý webdizajn znamená premyslené využitie priestoru, jeho najlepšie zhodnotenie a využitie. Zrozumiteľná a jasná internetová stránka urobí vždy viac práce, než preplácaná zmäť, ktorá dáva návštevníkom len nejednoznačné informácie.
Webstránky spoločnosti GROW veľmi elegantne rozkladajú priestor a časti stránky tak, aby boli zrozumiteľné a na prvý pohľad ľahko pochopiteľné:
-
Funkčnosť a použiteľnosť webu
Webdizajn nie je len o pekných obrázkoch. Internetové stránky obsahujú veľké množstvo informácií, ktoré sa my – webdizajnéri snažíme zladiť, spojiť a vytvoriť určitý zmysluplný celok. Práve preto musia byť weby najmä funkčné.
Sú veci, ktoré návštevníci automaticky očakávajú, keď sa hýbu na webe. Takým je napríklad funkcia podčiarkovania. Akonáhle niekto na webe uvidí slovo s podčiarknutím, vie, že ide o „link“ – odkaz, na ktorý môže kliknúť a otvorí sa mu iná stránka. Nedodržaním určitých pravidiel návštevníka zbytočne trápime a nevychádzame mu v ústrety. Weby majú byť čo najviac „user friendly“.
Webdizajnéri sa vžívajú do role užívateľov a navrhujú weby tak, aby boli čo najviac intuitívne. Čo budú chcieť užívatelia robiť na webe? K akým interakciám môže dôjsť? Stačí si prejsť celý web očami zákazníka a sami zistíte, kde máte na stránke komunikačné „diery“.
-
Jednotnosť
Súlad a celistvosť webu dáva kompletný a výsledný obraz. Hotový web by mal byť na prvý pohľad harmonický, organizovaný, informatívny a profesionálne vyzerajúci. Zladený musí byť každý prvok – od druhu písma, až po veľkosť bannerov a výber farieb. Je nutné stanoviť koncept a štýl a toho sa držať pri navrhovaní a tvorbe webu. Hlavná stránka a podstránky musia vzájomne korešpondovať. Taktiež je dobré pri tvorbe nového webu vychádzať z loga spoločnosti. Tým sa dá dosiahnuť veľmi efektívna, celistvá vizuálna komunikácia, ktorá si získa pozornosť návštevníkov.
Zdroj: gurustudio.hu