Ahoj, vypadá to, že používáte AdBlock... :-)

Usilovně jsme pracovali na zakomponování reklamy, aby nebyla pro čtenáře rušivá. Příjmy z reklam tento web živí, bez nich bychom jej nemohli provozovat. Budeme moc rádi, když to s námi zkusíte a přidáte si nás do výjimek. Děkujeme!

MENU

Principy vizuálního designu

Následující kapitola popisuje některé základní prvky vizuálního designu, které jsou z hlediska UX podstatné pro zprostředkování dobrého uživatelského zážitku. Ačkoliv některé z nich spadají spíše pod User Interface (UI), je potřeba na ně při tvorbě UX brát zřetel. Většinu z uvedených informací je také potřeba zanést ve wireframech.

Wireframy

Wireframe (doslova „drátěný model webové stránky“ nebo „skica webové stránky“) je technický dokument, který lze přirovnat k technickým výkresům, protože mají podobný účel. Říkají stavitelům, jak realizovat architektův plán, ne jakou tapetu nebo nábytek v domě použít. V prostředí webových stránek wireframy slouží k rozvržení obsahu a funkcí na stránce, která zohledňuje potřeby a chování uživatelů. Tyto drátěné modely se používají na začátku procesu vývoje ke stanovení základní struktury, lze je použít při kontrole projektu klientem – ti obvykle neznají všechny používané pojmy nebo si nedokáží představit, co má vývojář stránek na mysli. Jde tedy o nezbytný prvek, který vývojáři při tvorbě webových stránek potřebují mít k dispozici. Je také mnohem levnější přepracovat skici webu než hotový koncept.

Správný wireframe tvoří jednoduchá černobílá rozvržení nastiňující velikost a rozmístění prvků, navigačního menu a funkcí. Wireframy nejsou barevné a neobsahují loga nebo obrázky, zaměřují se pouze na strukturu webu.

Wireframy je možné kreslit ručně, ale existuje také specializovaný software, který pomůže vytvořit wireframy přehlednější (např. Microsoft Visio). Na wireframech lze také otestovat použitelnost prototypu, v takovém případě je nutné vytvořit wireframy v podobě HTML (např. prostřednictvím programů Axure RP nebo Omnigraffle.

Typografie

Poskytnutí skvělého uživatelského zážitku znamená také zprostředkování obsahu v použitelném formátu, který umožňuje snadné čtení a interakci. Typografie je tak důležitou oblastí webdesignu – správný výběr písma a jeho správné zobrazení pomáhají vytvořit dobrý uživatelský zážitek.

Základní dělení fontů

  • Patkové: Písmo, které má jednotlivé vrcholy ohraničené patkami.
  • Bezpatkové: Písmo, které ohraničení patkami nemá.

Nadpisy

Nadpisy jsou jednou z hlavních součástí webu, kterou uživatel vidí a která jej dokáže upoutat. Jejich cílem je upoutání pozornosti, a proto by měly reflektovat obsah stránky. Je podstatné, aby se na stránce správně zobrazily a měly správný rozměr. Typický hlavní nadpis na webu zabírá 38 pixelů, ostatní podnadpisy pak kolem 20–32 pixelů.

Text

Samotný text na stránce je ve většině případů nositelem informace, pro kterou si návštěvník na stránku přišel a kterou se z něj snaží získat. Je proto opět velice důležité, aby byl text snadno čitelný. Na webových stránkách se lze nejčastěji setkat s velikostí textu mezi 14-16 pixely. V online světě se také často používá pravidlo, které říká, že velikost nadpisu by měla být 2,5krát větší než ostatní text na stránce.

Také existují pravidla a doporučení, která se vztahují na řádkování a délku jednotlivých řádků. Tato pravidla říkají, že výška řádku by měla být 1,46krát větší než výška písma a že optimální délka řádku je 24,9krát větší než optimální výška řádku. Převážná většina webových stránek (zhruba dvě třetiny) používají patkové fonty, zbytek bezpatkové. Nejoblíbenější bezpatková písma jsou Arial a Helvetica.

Výše uvedená pravidla a velikosti platí jen pro standardní webové rozložení. V případě mobilních webových stránek je na vývojářích, aby zjistili, co je pro jejich design nejlepší.

Barvy písma

Konsorcium W3C doporučuje používat písma, která jsou v kontrastu s pozadím minimálně v poměru 3:1. Některé zdroje však tvrdí, že takto velký kontrast může ovlivnit schopnost některých čtenářů analyzovat a vnímat text. Je tedy nezbytné vnímání barev na stránce otestovat skutečnými uživateli.

Kontrast a velikost

Kontrast a velikost jsou prvky vizuálního principu, které pomohou nasměrovat pozornost uživatele tam, kam je potřeba. Myšlenka je jednoduchá – prvky, které se zdají být výraznější, přitahují pozornost uživatelů více. Úkolem UX designéra je odhalení podstatných prvků na stránce, jejich odlišení a následné zanesení do wireframů.

Kontrast

Kontrast je rozdíl mezi světlými a tmavými objekty. Čím více se od sebe odlišují, tím je kontrastní poměr vyšší. Důležité prvky obvykle mají vyšší kontrast, čímž na sebe upoutají pozornost. Např. pokud by vedle sebe bylo více bílých tlačítek a jedno mezi nimi by bylo černé, zaznamenalo by právě ono černé tlačítko více kliknutí.

Velikost

V běžném světě vnímáme věci, které jsou nám blíže a které jsou dále. Podobně v digitálním světě vnímáme větší prvky jako bližší. Lidský mozek je naučený číst text a vnímat obrázky obvykle zleva doprava. Pokud je potřeba některý prvek zvýraznit, je vhodné jej udělat větší než ostatní. Tím bude snáze přitahovat pozornost. Tento efekt lze ještě umocnit, pokud se pozadí za větším objektem rozmaže nebo přidá efekt stínu. Obecně platí, že je potřeba vytvářet důležitější věci větší než ty méně důležité. Vznikne tím na stránce tzv. „vizuální hierarchie“, která umožňuje určit si, čeho si uživatel všimne jako první.

Barva

Ve většině případů je barva doménou UI designéra, který se zaměřuje na vzhled, dojem a styl. Z hlediska UX je důležitá funkce. Ale i zde mají barvy svou roli. Jednotlivé prvky na stránce mohou být identické, ale barvy mění jejich význam. Pro příklad si představme dvě tlačítka – červené a zelené. Zatímco červené tlačítko v nás bude evokovat „zrušit“ nebo „smazat“, zelené v nás bude vyvolávat něco pozitivního – souhlas, potvrzení…

Dále lze barvy rozdělit na křiklavé a tlumené. Křiklavé barvy vystupují do popředí. Většina lidí na takovouto barvu klikne – zde je možné si jako příklad představit tlačítko „koupit“. Tlumené barvy naopak posouvají prvek více do pozadí, což je vhodné u prvků, u kterých je nežádoucí, aby odváděly pozornost od podstatnějších věcí.

Barvy je vhodné kombinovat s kontrastem a velikostí. Velké tlačítko, které bude zvýrazněné křiklavou barvou, se stane nepřehlédnutelným.

Jelikož se jedná o oblast spadající pod UI, do wireframů se barvy nezakreslují. Je zde ale možné nastínit rozdílnost barev a potřebu zvýraznění některého prvku (např. zmíněného tlačítka).

Narušení vzoru

Tento vizuální princip se týká tvorby vzorů k přitažení pohledu k podstatným věcem. Vezměme si vodorovné menu, kde bude jedno tlačítko stejné jako druhé. Toto uspořádání představuje vzor. Jelikož čteme zleva doprava, je vysoce pravděpodobné, že nejvíce kliknutí zaznamená položka menu umístěná vlevo, nejméně pak ta, která je umístěná vpravo.

Tento vzor je ale možné narušit v místě, kde chceme, aby uživatelé více klikali tím, že tlačítko bude z řady vystupovat. Takto by získalo více pozornosti a tím více by na něj uživatelé klikali. Tento princip je možné zkombinovat s předchozími principy. Pokud tlačítko v menu bude lehce vystupovat, a navíc bude mít křiklavou barvou, razantně se zvýší množství prokliků. Samozřejmostí je zakreslení do wireframů.

Uspořádání a proximita

Uspořádání a proximita pomohou dát prvkům řád a význam, aniž by se přidávaly další prvky. Pouhým uspořádáním (např. tlačítek) definujeme vztahy mezi nimi (stejně uspořádaná tlačítka mohou mít podobnou funkci). Proximita, tj. vzdálenost mezi objekty vytváří dojem, že spolu jednotlivé prvky souvisejí. Prvky, které spolu souvisejí, by měly být umístěny blízko k sobě, naopak nesouvisející prvky dále od sebe. Všechny tyto aspekty musí být jasně zřetelné i z wireframů.

Designový vzor

Designové vzory jsou opakovaně použitelná řešení běžných problémů s použitelností webových stránek. Když designéři řeší problém, přijdou s řešením – a některá řešení fungují tak dobře, že je návrháři začali používat opakovaně. V okamžiku, kdy stejné řešení implementované v různých webových stránkách uvidí uživatelé, budou se s nimi snáze seznamovat a v budoucnu se u nich stane takovéto řešení očekávané.

Pokud se návrh webové stránky příliš odchyluje od očekávaných konvencí, uživatelé budou muset více přemýšlet, jak stránky používat. Dnešní uživatelé zůstanou na stránce obvykle méně než 10 sekund, než si uvědomí, zda na stránce chtějí nebo nechtějí zůstat. Pokud je tedy design webu nutí příliš přemýšlet, zvyšuje se pravděpodobnost, že webové stránky opustí.

I když návrháři používají určitý designový vzor, mají dostatečnou svobodu pro kreativitu. Před použitím některého vzoru by si měl návrhář ujasnit, zda je jeho použití opravdu nejlepší řešení. Pokud se návrhář rozhodně některý designový vzor použít, měl by prozkoumat konkurenční stránky, které již podobný problém řešily, shromáždit informace, analyzovat je a na jejich základě se rozhodnout pro určitý designový vzor. Při rozhodování o použití určitého designového vzoru je dobré také provést testování použitelnosti. Mezi dva nejpoužívanější designové vzory patří Z-vzor a F-vzor.

Z-vzor                     

Tento designový vzor vychází z předpokladu, že uživatelé text nečtou, ale „skenují“. To znamená, že text v rychlosti prohlédnou a zastaví se u toho, co je zaujme. Pohyb očí po stránce vytváří písmeno Z – uživatelé začnou text „skenovat“ v levém horním rohu, vytvoří linku na pravou stranu, poté jejich zrak bude směrovat do levého spodního rohu, odkud budou pokračovat do pravého dolního rohu. Vše, co se v tomto rozložení nebude nacházet poblíž tohoto Z, uživatelé nejspíše budou ignorovat. Už jen z tohoto důvodu není Z-vzor příliš vhodné používat na stránce s větším množstvím textu. Namísto toho je možné Z-vzor použít na stránce typu kontaktní formulář apod. Z-vzor lze snadno narušit zvětšením nadpisů, používáním tučného písma, rozdělení stránky na menší oddíly, aj.

F-vzor

V roce 2006 provedla skupina Nielsen Norman Group jednu z nejužitečnějších a nejcitovanějších studií na sledování pohybu očí na stránce (tzv. eyetracking). Během této studie bylo zkoumáno, jak 236 uživatelů prohlíží tisíce různých webových stránek. Studie dospěla k závěru, že chování uživatelů při čtení bylo napříč různými webovými stránkami relativně konzistentní a že uživatelé nejčastěji čtou stránky dle F-vzoru.

F-vzor je způsob, při kterém uživatelé skenují stránku tak, že si nejprve v horní části stránky přečtou titulky, následně sjedou zrakem po levé straně dolů, a nakonec si přečtou tučně psaný text nebo podnadpisy.

Při vykreslení pohybu očí na stránku se zobrazí podoba písmene F. V některých případech může pohyb očí vypadat také jako obrácené L nebo písmeno E. U vyobrazení do písmene F a E je obvykle více vodorovných čar, v závislosti na délce stránky.

Tento designový vzor funguje nejlépe u stránek, kde je mnoho textu – u blogů, vyhledávačů při zobrazení výsledků, e-shopů, atd.

V obou případech je nutné mít na vědomí, že oči uživatele vždy jako první spočinou v levém horním rohu. Pokud je tedy potřeba uživateli zobrazit nějakou podstatnou informaci, kterou by neměl vynechat, je vhodné ji umístit právě do levého horního rohu.

Struktura stránky

V momentě, kdy je hotový uživatelský výzkum (viz kapitola 3) a informační architektura (viz kapitola 1.2), lze v procesu návrhu přistoupit k tvorbě struktury stránky. V první řadě se vytvoří jednotný wireframe pro všechny stránky, do něj se poté doplní detaily platné pro každou další stránku. Na každé stránce se určitě zobrazí záhlaví, navigace a zápatí (patička).

Záhlaví

            Záhlaví stránky je část, která se většinou opakuje na všech stránkách, stejně jako níže uvedená patička. Hlavička stránky zaujme většinou jako první každého návštěvníka, a tak může ovlivnit jeho první dojem. Záhlaví většinou obsahuje:

  • Základní prvky identity stránky, jako je logo, slogan, barvy, aj.,
  • důležité odkazy,
  • základní kontaktní informace,
  • vyhledávání,
  • přepínač jazyků.

Navigace

Navigační prvky mohou mít nejméně dvě podoby – hlavní nabídka a podnabídka. Hlavní nabídka je první úroveň odkazů v mapě webu. Pokud je v tomto kroku již vytvořená informační architektura, mělo by být v tomto kroku jasné, co bude obsahovat.

Položky v hlavní nabídce by měly být seřazeny dle popularity, resp. dle zájmu uživatelů. V případě horizontálního menu by tedy nejpopulárnější položky měly být vlevo, nejméně populární vpravo. U vertikálního menu budou nejpopulárnější položky nahoře, nejméně populární dole. Pokud data o návštěvnosti položek nejsou k dispozici nebo se jedná o nový projekt, je potřeba vývojářům zdůraznit, aby stránku navrhli tak, aby šlo jednotlivým položkám v menu měnit pozici.

Podřazené stránky (podstránky) budou obsaženy v podnabídce hlavního menu. Opět by měly být řazeny dle popularity.

Rozsáhlé podnabídky nebo veškeré podnabídky zhuštěné do jedné položky hlavní nabídky jsou znakem špatné informační architektury. Hlavní nabídku i podnabídku je potřeba udělat co nejpřehlednější a pro uživatele snadno srozumitelnou.

Zápatí

V zápatí (patičce) bývají obsaženy informace, které jsou příliš obecné a nevýznamné na to, aby se jim věnoval prostor v hlavní navigaci. Pokud mají položky v zápatí příliš podstatný vliv na fungování stránky, do zápatí nepatří – typicky možnost změny jazyka stránky, přihlašovací formulář, aj.

Důležité je vědět, že lidé opravdu zápatí používají. Uživatelé zápatí používají když:

  • Nenajdou, co potřebují, nebo chtějí získat další informace, typicky méně časté informace, které jinde nejsou – např. volná místa.
  • Úmyslně přejdou na zápatí, kde očekávají potřebné informace – kontaktní údaje, informace o společnosti, odkazy na sociální sítě, související obsah na webu. Někteří uživatelé používají zápatí i jako navigaci, pokud dojdou na konec a nechce se jim vracet na začátek stránky.

Obsah zápatí může být jakýkoliv, obecně se však v zápatí nejvíce vyskytují tyto položky:

  • odkazy (tj. suplování hlavní nabídky),
  • sekundární odkazy (některé podstránky, informace od PR, apod.),
  • provozní odkazy (stránky s informacemi o ochraně osobních údajů, podmínky použití, obchodní podmínky, volná pracovní místa),
  • mapa stránek,
  • ocenění,
  • tlačítka sociálních sítí, emailový kontakt, telefonní číslo, adresa sídla a jiné kontaktní informace,
  • copyright.

Obrázky a titulky

Při návrhu wireframů se obrázky nepoužívají, nicméně je potřeba myslet na to, že i obrázek může mít na webových stránkách nějakou funkci. Obrázky přitahují pozornost a dokážou vést pohled uživatele, proto by UX designér neměl jejich používání podcenit. Nick Babich ze serveru UX Planet uvádí pět bodů, které by měly obrázky splňovat:

  • Měly by mít funkční účel, doporučuje se vyvarovat dekorativním obrázkům
  • Musí být ostré
  • Optimálně být ve vysoké kvalitě: ve vysokém rozlišení, bez zkreslení
  • Je důležité myslet na přístupnost: pokud je obrázek překryt textem, musí jít přečíst
  • Je lepší se vyvarovat obrázkům z fotobank a používat osobitější obrázky

Kromě obrázků nejvíce přitahují pozornost největší a nejkontrastnější části v layoutu. Pokud se do designu stránky přidá velký titulek, naruší se tím způsob, jakým budou lidé stránku „skenovat“ a přitáhne pozornost. Proto je vhodné pod velký titulek umístit pro uživatele důležitý obsah.

Osa interakce

Každý design webové stránky využívá vizuální principy, které jsou uvedeny v této podkapitole. Pokud se na design podíváme z větší dálky, lze si všimnout, že obsahuje linie, hrany nebo bloky. Může se jednat například o zarovnaný okraj textu, obrázků nebo skupiny objektů v řadě. Každý z těchto okrajů tvoří osu interakce, kterou sledují oči uživatele až do doby, než skončí. Jde tedy o pomyslnou hranu, kterou pohled očí návštěvníka přirozeně sleduje.

Tento princip je vhodné znát, neboť nám pomáhá určit, na co se zaměří zrak návštěvníka webové stránky. Pokud pak budeme chtít, aby uživatelé na něco klikli, stačí to umístit do osy interakce – například tlačítko nebo formulář pro zadání emailové adresy. Čím dál se bude prvek od osy interakce nacházet, tím více klesá pravděpodobnost, že si ho uživatelé všimnou a že na něj kliknou.

Formuláře

Formuláře jsou způsobem, jakým mohou uživatelé webové stránky poskytnout nějaké informace. Tj. účelem formuláře je získat nějaký vstup. Obecně se jedná o box s popisky, textovými poli, tlačítky s výzvou k akci a dalšími prvky. S formuláři se lze setkat při vytváření přihlašovací stránky, stránky s vytvořením objednávky, přihlášením k newsletteru atd.

Formuláře mohou vyvolávat zmatek a chyby. Proto je klíčové navrhnout formulář správně, tj. uživatelsky přívětivě. Správně vytvořené formuláře by měly:

  • Být přiměřeně dlouhé, čím kratší, tím lepší. Dlouhé formuláře je vhodné rozdělit na více stránek.
  • Jednoduché, příbuzné otázky by měly být seskupeny, neměly by obsahovat obrázky.
  • Mít zvýrazněné povinné otázky.
  • Podporovat automatické vyplnění dat (telefonního čísla, adresy, jména, aj)
  • Mít stručná a jasná tlačítka s barevným odlišením primárních a sekundárních tlačítek.
  • Obsahovat jasné chybové hlášky, obsahovat nápovědy, aj.
  • Průběžně validovat zadaná data.

Tlačítka

Tlačítka jsou element zásluhou kterého můžeme vytvořit nějakou akci. Jak bylo v předchozí podkapitole zmíněno, tlačítka mohou být primární nebo sekundární. Ve většině případů postačí pro tlačítka vytvořit pouze dva styly – a to právě pro tlačítko primární a pro tlačítko sekundární.

Primární tlačítka pomáhají splnit cíle, tj. jde o pozitivní tlačítko. Tato tlačítka se používají v případě primárních akcí, např. registrace, nahrání obsahu, sdílení, dokončení nákupu. Vytvářejí něco, co předtím neexistovalo a od čeho je vyžadováno, aby to uživatelé dělali co nejčastěji. Tato tlačítka by měla být co nejviditelnější, viz předchozí principy vizuálního designu. Znamená to tedy, že by měla mít vysoký kontrast vůči pozadí (výraznější barva nebo odstín) a nacházet se blízko osy interakce, aby si jich uživatelé všimli.

Kontraproduktivní akce, které jsou uživatelům k dispozici, jsou sekundární akce. Může jít o přeskočení, resetování, odmítnutí, zrušení. Nechce se od nich, aby je uživatelé používali, ale z hlediska použitelnosti jsou nabízeny jako možnost volby. Sekundární tlačítka provádějící sekundární akce by měla být méně viditelná. Tím se mimo jiné zabrání tomu, aby na ně uživatelé klikli omylem či reflexivně. Měly by mít nízký kontrast vůči pozadí a být mimo osu interakce, aby si jich uživatelé všimli jen v případě, že je budou hledat.

Adaptivní a responzivní design

UX není v dnešní době rozmanitých velikostí obrazovek univerzální pro všechny typy zařízení. Často se stává, že je potřeba velký layout pro desktopy umístit na malou obrazovku chytrých telefonů. V tomto případě se používají dvě techniky – adaptivní design a responzivní design.

Adaptivní design označuje několik různých designů stránky, pro každý typ zařízení jeden. Například stránky internetového obchodu, na počítači vypadají zcela normálně. Pokud jsou otevřeny na mobilním telefonu nebo tabletu, může se zobrazit jednodušší varianta, která je přizpůsobena právě pro tato mobilní zařízení. Adaptivní design zabere při návrhu mnohem méně času a je jednodušší.

Responzivní design se vždy přizpůsobuje velikosti stránky. Jde tedy o jeden design, který se roztahuje, zmenšuje a upravuje pozice prvků dle velikosti obrazovky. Na rozdíl od adaptivního designu se změna velikosti děje na úrovni kaskádových stylů webové stránky, tedy není vytvořen pro každý typ zařízení jiný design. Responzivní design vyžaduje více úsilí při návrhu a implementaci, nicméně v dlouhodobém horizontu potřebuje méně údržby, protože bude vždy spolehlivě reagovat na jakoukoli velikost obrazovky.

Written by:

Published on: 7.7.2021

Filled Under: Vývoj webu