Ikona alebo tlačidlo: Dizajn pre úspech webovej stránky

Tlačidlá a ikony sú kľúčové prvky webového dizajnu, ktoré priamo ovplyvňujú interakciu používateľov so stránkou. V tomto článku sa pozrieme na dôležitosť tlačidiel a ikon, ich typy, stavy a poskytneme presné inštrukcie, ako ich dizajnovať pre najsilnejší efekt, aby sa vaše výzvy na akcie naozaj splnili.

Prečo sú tlačidlá dôležité?

Tlačidlá (buttons) sú dôležité, pretože uľahčujú web návštevníkom vykonať nami požadovanú akciu. Tlačidlá (buttons) zvyšujú šancu, že návštevníci vašej web stránky splnia to čo od nich na svojej web stránke očakávate. Pritiahnu pozornosť ľudí a presvedčia ich ku kliknutiu. Tým sa buttons stávajú jedným z najdôležitejších elementov web dizajnu.

• Interakcia: Tlačidlá umožňujú návštevníkom interagovať so stránkou.
• Navigácia: Tlačidlá zlepšujú navigáciu na stránke.
• Konverzie: Tlačidlá majú kľúčovú úlohu pri konverziách.
• Estetika a vizuálna hierarchia: Tlačidlá prispievajú k estetike a vizuálnej hierarchii webu.

Typy tlačidiel

Tlačidlá (buttons) sú interaktívne prvky, na ktoré sa dá kliknúť myšou, a tým sa vykoná požadovaná akcia. Tlačidlá majú rôzne vizuálne štýly a textové označenia.

1. Tlačidlá s plným pozadím: Tieto tlačidlá majú plné farbené pozadie a sú jedným z najvýraznejších typov tlačidiel. Sú vhodné na akcie, ktoré chcete zdôrazniť, ako napríklad hlavné výzvy na akcie alebo dôležité odkazy.
2. Tlačidlá s obrysom: Tieto tlačidlá majú obrys, ktorý je zvyčajne farebný, a vnútri sú transparentné alebo s mierne prechodným pozadím. Sú menej výrazné ako tlačidlá s plným pozadím, čo ich robí vhodnými pre sekundárne akcie alebo odkazy.
3. Textové tlačidlá: Textové tlačidlá sú jednoduché tlačidlá s textom a bez farebného pozadia. Sú diskrétne a zvyčajne používané na odkazy alebo akcie, ktoré nie sú tak výrazné.
4. Zdvíhané tlačidlá: Tieto tlačidlá majú efekt zvýšenia alebo tieňového zdvihnutia, ktorý dáva pocit trojdimenzionality. To pomáha tlačidlám vyniknúť na stránke a zdôrazniť ich klikateľnosť.
5. Toggle tlačidlá: Toggle tlačidlá slúžia na prepínanie medzi dvoma stavmi alebo možnosťami. Každý klik na tlačidlo mení jeho stav.
6. Floating action tlačidlá: Floating action tlačidlá sú výrazné tlačidlá, ktoré plávajú nad obsahom stránky. Zvyčajne majú kruhový tvar a obsahujú jednoduchú ikonu, ktorá reprezentuje hlavnú akciu na stránke.
7. CTA (Call to Action) tlačidlá: CTA (Call to Action) tlačidlá majú za cieľ motivovať návštevníkov k určitej akcii, ako napríklad nakupovaniu, stiahnutiu súboru alebo prihláseniu sa na odber noviniek.
8. Dropdown tlačidlá: Dropdown tlačidlá po kliknutí zobrazia vertikálne menu s možnosťou výberu.
9. Hamburger: Hamburger je ikonou s trojčiarovým zobrazením (ktoré vyzerá ako ikona burgru), ktorá sa často používa na mobilných verziách web stránok. Pri kliknutí na toto tlačidlo sa zobrazí bočné menu alebo navigácia, ktorá je neviditeľná.
10. Plus tlačidlo: Plus tlačidlo je často používané na označenie možnosti pridania nového obsahu, ako napríklad pridanie nového príspevku, udalosti alebo položky do zoznamu.
11. Rozbaľovacie tlačidlo: Rozbaľovacie tlačidlo je často používané na zobrazenie dodatočných informácií alebo možností, ktoré sa rozbalia po kliknutí.
12. Tlačidlo zdieľania: Tlačidlo zdieľania je používané na umožnenie návštevníkom stránky zdieľať obsah na sociálnych médiách alebo iných platformách.

Stavy tlačidiel

Každé tlačidlo prechádza rôznymi stavmi, ktoré informujú používateľa o jeho aktuálnom stave a interakcii.

• Štandardný stav: Štandardný stav tlačidla je ten, v ktorom sa nachádza, keď sa stránka načíta a návštevník naň ešte neklikol. Toto je základný stav tlačidla, ktorý môže obsahovať text, ikonu alebo oboje.
• Hover stav: Keď návštevník prejde kurzorom myši nad tlačidlo (hover, znáša sa), aktivuje sa hover stav. V tomto stave sa tlačidlo môže vizuálne zmeniť, napríklad zmenou farby pozadia, obrysu alebo textu.
• Aktívny stav: Aktívny stav tlačidla nastáva v momente, keď návštevník stlačí tlačidlo. V tomto stave sa môže ešte viac zmeniť jeho vizuálny vzhľad, aby používateľ videl, že jeho akcia bola úspešne vykonaná. Napríklad, tlačidlo sa môže zmeniť na inú farbu alebo sa zobraziť krátka animácia.
• Stav zaostrenia: Stav zaostrenia je aktívny, keď sa tlačidlo dostane do zamerania - napríklad, keď sa naňho posunie kurzor myši pomocou klávesnice alebo keď je aktivované dotykom na zariadeniach so senzorovým displejom. Stav zaostrenia je dôležitý pre používateľov, ktorí stránku ovládajú klávesnicou alebo pomocou technológií podporujúcich prístupnosť.
• Neaktívny stav: Neaktívny stav sa používa, keď je tlačidlo neaktívne a nedostupné na kliknutie. Tento stav môže nastať, ak nie sú splnené určité podmienky (tlačidlo odoslania formuláru je neaktívne pretože ste eštenevyplnili všetky položky na formulári) alebo ak je vykonávaná iná operácia.
• Stav načítavania: Stav načítavania sa používa, keď je tlačidlo stlačené a prebieha nejaká asynchrónna operácia, napríklad odosielanie formulára alebo spracovanie údajov. V tomto stave sa môže na tlačidle zobraziť animácia načítavania, ktorá indikuje, že sa niečo deje a používateľ by mal počkať.

Ako dizajnovať efektívne tlačidlá

Ak ľudia nepochopia, že tlačidlá sú tlačidlá, ich funkcia sa minie účinku a ľudia nesplnia vami požadovanú akciu.

• Zvýraznenie farbou: Tlačidlá by mali mať farbu, ktorá sa líši od okolitého pozadia alebo iných elementov stránky. Použite elementy, ktoré zabezpečia, že tlačidlá vyniknú na pozadí.
• Vizuálny kontrast: Môžete na ne pridať tieň, ktoré z nich spravia 3D gombíky, ktoré sa podobajú na reálne gombíky. Nezabudnite na hover akciu.
• Ikony a text: Použite ikony alebo text na tlačidlách, ktoré jasne označia ich účel. Pridajte na tlačidlá text, ktorý popisuje funkciu tlačidla.
• Zvýraznenie interaktivitu: Hover je ten najlepší spôsob ako upozorniť, že niečo je button.
• Tvar a veľkosť: Vytvorte tlačidlá dostatočne veľké, aby boli ľahko klikateľné aj na dotykových zariadeniach.
• Logické umiestnenie: Umiestnite tlačidlá na miesta, kde sú očakávané. Vytvorte logický a zrozumiteľný navigačný systém, ktorý vedie používateľov k tlačidlám podľa ich potrieb.

Text a ikony

• Text: Použite text, ktorý presne popisuje akciu, ktorá bude vykonaná po kliknutí na tlačidlo.
• Ikony: Použite ikony, ktoré sú intuitívne a reprezentujú konkrétnu akciu.
• Konzistentnosť: Udržujte konzistentný štýl a frázy pre podobné akcie.

Hierarchia tlačidiel

• Hierarchia farieb: Použite farby tak, aby primárne tlačidlo bolo výraznejšie farby než tlačidlá s nižšou prioritou. Primárne tlačidlo môže byť zelené, sekundárne zas pastelovo zelené.
• Hierarchia typov: Spravte primárne tlačidlo s plným pozadím.
• Veľkosť: Dajte primárnemu tlačidlu väčší rozmer, aby bolo vizuálne výraznejšie.
• Umiestnenie: Umiestnite primárne tlačidlo bližšie k dôležitému obsahu alebo významnej sekcii na stránke.

Dôležité zásady

• Jedna hlavná akcia: Každé tlačidlo by malo viesť k jednej hlavnej akcii.
• Jednoduchosť: Minimalizujte množstvo tlačidiel s primárnym cieľom na stránke. Nechajte primárne tlačidlo výrazné a jasné.

Experimentovanie s farbami a tvarmi

• Farba: Použite rôzne farby pre rôzne typy tlačidiel.
• Tvar: Experimentujte s rôznymi tvarmi tlačidiel pre rôzne funkcie.
• Primárne kontra sekundárne: Použite jasnejšie a výraznejšie farby pre primárne tlačidlá, ktoré vedú k hlavným akciám.
• Farby pre emócie: Ak máte tlačidlo zrušiť filter, použite na to červenú farbu. V západnej kultúre označuje červená riziko.
• Zreteľné tvary: Použite rôzne tvary pre rôzne tlačidlá, aby sa vytvorila vizuálna odlišnosť.

Prístupnosť tlačidiel

Zabezpečenie prístupnosti tlačidiel je rovnako dôležité ako ich vizuálny dizajn.

• Dostatočná veľkosť: Uistite sa, že text na tlačidlách je dostatočne veľký na čítanie. Samotné tlačidlo by malo mať dostatočnú veľkosť, aby bolo jednoduché na kliknutie.
• Čitateľný text: Používajte jednoduchý a čitateľný text na tlačidlách. Text na tlačidle by mal byť dostatočne veľký na čítanie.
• Bežný stav: V tomto stave tlačidlo má svoj základný vizuálny vzhľad.
• Aktívny stav: Keď užívateľ klikne na tlačidlo, mali by dostať vizuálnu spätnú väzbu.
• Fokus stav: Pre používateľov klávesnice je dôležité, aby bolo jasné, ktoré tlačidlo je práve vo fokuse.

Optimalizácia pre konverzie

• Zamerajte sa na hlavné ciele: Zamerajte sa na hlavné ciele, ktoré chcete, aby používatelia vykonali.
• Primárna akcia: Každé tlačidlo by malo mať jednoznačnú primárnu akciu, ktorú má podporiť.
• Minimalizujte sekundárne akcie: Akcie, ktoré nie sú kritické alebo hlavné, môžete zaradiť do textových odkazov alebo iných subtilnejších prvkov namiesto tlačidiel.
• Hierarchia: Rozdeľte akcie podľa ich dôležitosti a umiestnite ich do rôznych sekcií alebo panelov na stránke.
• Informujte, že úspešne klikli tlačidlo: Informujte, že úspešne klikli tlačidlo.
• Malé okná: V prípade malých okien, ako sú mobilné zariadenia alebo menšie panely, umiestnite tlačidlá na spodný pravý roh obrazovky.
• Farby a štýl: Používajte konzistentné farby, štýl a typografiu pre všetky tlačidlá na stránke.
• Hierarchia: Použitím rôznych veľkostí môžete vytvoriť hierarchiu prvkov na stránke.
• Čitateľnosť: Veľkosť textu by mala byť dostatočná na to, aby bol ľahko čitateľný.
• Kontinuita: Udržujte konzistentný tvar pre rovnaké typy prvkov na celej stránke.
• Emócie a význam: Rôzne tvary môžu vyvolať rôzne emócie a vnímanie.
• Padding: Padding označuje priestor medzi okrajom prvku a jeho obsahom alebo susednými prvkami.
• Vzduch a oddych: Padding umožňuje prvkom na stránke dýchať a oddýchnuť si od seba.
• Psychologický vplyv: Rôzne farby môžu vyvolať rôzne emócie a pocity.
• Prirodzenosť: Umiestnite dôležité prvky tam, kde sa prirodzene začína užívateľská cesta.
• Stručnosť a jasnosť: Mikrokópia, teda malé texty, by mala byť jednoduchá, priamočiara a zrozumiteľná.
• Špecifické slová: Používajte slová, ktoré presne opisujú úlohu prvkov.
• Mobilný prvok: Keď navrhujete tlačidlá a iné prvky pre mobilné zariadenia, zvážte, že ovládanie prstom je iné ako ovládanie myšou.
• Undo funkcionalita: Ak je to vhodné, umožnite používateľom vrátiť akciu, ktorú vykonali.

Testovanie tlačidiel

Navigačné testovanie sa zameriava na testovanie toho, ako používatelia vnímajú a používajú vašu webovú stránku alebo aplikáciu.

• Metóda: Sledujte používateľov, ako prechádzajú cez vašu stránku.
• A/B testovanie: Vytvorte dve verzie tlačidla s rôznymi dizajnovými prvkami, ako farbou, textom, veľkosťou atď. Následne tieto dve verzie zobrazte rôznym skupinám užívateľov a sledujte, ktorá verzia má lepšie výsledky (napr.
• Heatmapy: Implementujte heatmapový nástroj na vašu stránku, ktorý sleduje pohyby a kliknutia užívateľov.

Nástroje a zdroje pre dizajn tlačidiel

• Material Design: Material Design je dizajnový jazyk vyvinutý spoločnosťou Google, ktorý poskytuje konzistentný vzhľad a pocit na rôznych platformách a zariadeniach. Ponúka súbor usmernení, komponentov a zdrojov pre návrh užívateľských rozhraní.
• Wireframing knižnice: Wireframing knižnice poskytujú prednastavené prvky a komponenty, ktoré možno použiť na vytváranie wireframov a prototypov pre webové stránky a aplikácie. Tieto knižnice zvyčajne zahŕňajú rôzne prvky užívateľského rozhrania, vrátane tlačidiel, ktoré je možné jednoducho presunúť a umiestniť na vytvorenie modelov.
• Bootstrap: Bootstrap je populárny front-endový rámec, ktorý poskytuje zbierku komponentov HTML, CSS a JavaScript na vytváranie responzívnych webových stránok a aplikácií so zameraním na mobilné zariadenia.
• Kendo UI: Kendo UI je komplexný rámec pre HTML5 a JavaScript vyvinutý spoločnosťou Progress, ktorý ponúka širokú škálu komponentov užívateľského rozhrania, vrátane tlačidiel, mriežok, grafov a ďalších.

Ikony: Malé symboly s veľkým významom

Ikony sú dôležitým elementom web dizajnu. Ikony sú malé grafické symboly alebo obrázky, ktoré slúžia na reprezentáciu konkrétnych predmetov, akcií alebo funkcionalít. Nepoznám človeka, ktorému by sa nepáčili ikony na web stránkach. Ako však môžu ikony ovplyvniť celkový dojem návštevníkov?

Prečo používať ikony?

• Rýchla identifikácia: Ikony majú schopnosť rýchlo a jednoznačne označiť funkciu alebo akciu, ktorú môže užívateľ na webovej stránke vykonať.
• Symbolický význam: Každá ikona môže byť symbolom s hlbším významom alebo príbehom.
• Zobrazenie produktov a služieb: Ikony sú skvelým spôsobom, ako zobraziť produkty, služby alebo kategórie bez použitia dlhých textových popisov.
• Upútanie pozornosti: Ikony majú schopnosť upútať pozornosť užívateľov kvôli svojmu kompaktnému a vizuálne atraktívnemu charakteru.
• Prispôsobiteľnosť: Vybrané ikony môžu byť prispôsobené štýlu a farbám značky.
• Naznačenie informácií: Ikony môžu byť vynikajúcim spôsobom, ako užívateľom naznačiť, akú informáciu očakávate pri vyplňovaní formulára.
• Reprezentácia sekcií: Ikony môžu byť použité na reprezentáciu rôznych sekcií alebo stránok na webovej stránke.
• Šetrenie priestoru: Ikony majú schopnosť nahradzovať textový obsah na web stránke a tým šetriť drahocenný vizuálny priestor.
• Estetika dizajnu: Výber vhodných ikon môže pridať na estetickosti celkovému dizajnu webovej stránky.
• Emocionálne spojenie: Niekedy môže ikona mať silný symbolický význam, ktorý vytvára emocionálne spojenie medzi užívateľom a webovou stránkou.

Zásady pre tvorbu ikon

• Jednoduchosť: Jednoduchosť je základným princípom tvorby ikon. Ikonu by malo byť ľahké identifikovať a pochopiť na prvý pohľad.
• Minimalizmus: Každý prvok by mal mať svoju úlohu a pridávať hodnotu. Príliš veľa prvkov by mohlo spôsobiť chaotický a nečitateľný dojem.
• Detail: Pridávajte detaily iba ak ikone pridajú hĺbku, charakter, sú relevantné a plnia špecifický účel. Každý detail by mal mať význam a prispievať k celkovej identifikácii ikony.
• Čitateľnosť: Ikona by mala byť dostatočne jasná a čitateľná aj pri menších veľkostiach. Užívatelia by mali bez problémov rýchlo rozpoznať, čo na danej ikone je.
• Komunikácia: Ikony musia jasne komunikovať informácie o ich význame. Užívatelia by mali byť schopní rozpoznať, čo daná ikona symbolizuje.
• Konzistentnosť: Pri tvorbe ikon je dôležité zachovať vo všetkých ikonách jednotný štýl. Všetky ikony by mali mať podobnú estetiku, tvarové prvky, farby a proporcionalitu. Vizuálna identita stránky tak zostane súdržná a profesionálna.
• Unikátnosť celej sady: Sada ikon by mala mať svoju jedinečnú charakteristiku, ktorá ju odlišuje od iných sád ikon.
• Unikátnosť jednotlivých ikon: Každá ikona v sade by mala mať svoju vlastnú identitu a rozpoznateľný charakter.
• Vizuálna rovnováha: Vizuálna rovnováha je kľúčová pre vytvorenie esteticky príjemných a účinných ikon.

Vizuálna rovnováha

• Veľkosť a umiestnenie: Veľkosť a umiestnenie prvkov v ikone prispievajú k jej rovnováhe.
• Vizuálna váha: Prvky v ikone majú rôznu vizuálnu váhu. Tmavšie farby, väčšie veľkosti a detailnejšie prvky majú zvyčajne väčšiu vizuálnu váhu.
• Biely priestor: Použitie bieleho priestoru, môže prispieť k dosiahnutiu rovnováhy.
• Zarovnanie: Správne zarovnanie prvkov prispieva k pocitu poriadku a rovnováhy.
• Hierarchia: Ikony často majú hierarchiu prvkov, pričom niektoré sú výraznejšie ako iné.
• Kontrast: Kontrast vo farbe, tvare alebo veľkosti môže byť použitý na dosiahnutie rovnováhy.

Komunikácia pomocou ikon

• Jasné a jednoduché: Ikona by mala byť jednoduchá a zrozumiteľná na prvý pohľad.
• Relevantné: Ikony by mali byť relevantné k svojmu kontextu alebo funkciám.
• Odpovedajúca kultúre a zvyklostiam: Rôzne kultúry a komunity môžu interpretovať ikony rôznym spôsobom.
• Zrozumiteľné bez slov: V ideálnom prípade by mali byť ikony schopné preniesť svoj význam aj bez potreby textových popisov.
• Logické: Ikony by mali mať logický vzťah k veciam, ktoré reprezentujú.

Tipy pre návrh ikon

• Analýza cieľovej skupiny: Predtým než začnete návrh ikon, je dôležité pochopiť vašu cieľovú skupinu a analyzovať, čo by ich oslovovalo.
• Účel a funkcia: Každá ikona by mala mať konkrétny účel a funkciu. Myslite na to, akú informáciu má ikona preniesť.
• Použitie mriežky: Použitie mriežky vám pomôže udržať konzistentnú veľkosť a rozloženie ikon.
• Rozpoznateľnosť: Rozpoznateľnosť je kľúčovým faktorom pri návrhu ikon. Zamerajte sa na jasné a charakteristické tvary, ktoré užívateľom umožnia okamžite identifikovať, čo daná ikona predstavuje.
• Konzistentnosť: Konzistentnosť v štýle, veľkosti, proporciách a farebnosti medzi ikonami je kľúčová pre vytvorenie vizuálnej harmónie.
• Osobnosť: Aj keď sú ikony často malé a jednoduché, môžete im pridať osobnosť. Použite detaily a štýl, ktoré zodpovedajú charakteru vášho produktu alebo značky.
• Textové štítky: Nie všetky ikony musia byť samostatne zrozumiteľné. Prípadne môžete kombinovať textové štítky s ikonami, aby sa zabezpečilo jasné porozumenie.
• Kultúrne odlišnosti: Pri návrhu ikon je dôležité mať na pamäti kultúrne odlišnosti a zvyklosti vašej cieľovej skupiny.
• Testovanie: Pred uvedením ikon do finálneho produktu ich testujte na reálnych užívateľoch. Pri testovaní ikon môžete využiť pravidlo 5 sekúnd.

Prístupnosť ikon

Pristupnosť vo web dizajne znamená vytváranie webových stránok a aplikácií tak, aby boli prístupné a použiteľné pre všetkých ľudí, bez ohľadu na ich schopnosti, disabilitu alebo technické vybavenie. Cieľom prístupného web dizajnu je zabezpečiť, aby všetci užívatelia mohli efektívne komunikovať s obsahom, interagovať s ním a využívať služby online prostredníctvom rôznych zariadení, ako sú počítače, mobilné telefóny, čítačky obrazovky a iné.

• Textové popisy: Využite textové popisy pre ikony.
• Alternatívny text (alttext): Ak sú ikony obsiahnuté v obrázkoch, pridajte k nim alternatívny text, ktorý popisuje ich význam.

Zdroje ikon

• Google Font Icons: Tento zdroj poskytuje sadu ikon dostupných vo forme fontov.
• Unicons: Unicons je sada ikon s otvoreným zdrojovým kódom, ktoré sú veľmi ľahko prispôsobiteľné.
• Feather Icons: Táto sada ikon je minimalistická a jednoduchá, čo ich robí ideálnymi pre moderný web dizajn.
• Icons8: Icons8 poskytuje široký výber ikon rôznych štýlov a veľkostí.
• Font Awesome: Je jednou z najznámejších sád ikon, ktorá obsahuje tisíce ikon a je veľmi obľúbená medzi vývojármi.
• Material Design Icons: Tieto ikony sú navrhnuté podľa Material Design od Google.
• Streamline Icons: Streamline Icons sú ikony s vysokým rozlíšením a detailmi.
• Nucleo: Táto sada ikon má vysokú kvalitu a je dostupná vo forme fontov alebo SVG súborov.

Použitie ikon

• Odporúčané zoznamy: Ikony môžete použiť na zvýraznenie dôležitých alebo najnovších položiek vo vašom obsahu.
• Nové funkcie: Ak chcete upriamiť pozornosť na nové funkcie alebo aktualizácie vo vašej aplikácii alebo produkte, môžete použiť ikony vedľa týchto funkcií.
• Nové produkty: Ak máte viacero aplikácií alebo produktov, ikony môžu byť užitočné na vizuálne odlíšenie jednotlivých produktov.
• Zoznam služieb: Pri výpise služieb alebo funkcionalít môžete ku každej službe pridať ikonu, ktorá naznačí jej charakteristiku. Toto uľahčí rýchlu identifikáciu pre užívateľov.
• Zvýraznenie nadpisov: Ikony môžu byť použité na zdôraznenie nadpisov a tým dať titulom kreatívny dotyk.

Dúfame, že sme vám ozrejmili dôležitosť ikon pre kvalitný web dizajn. Potrebujete pomôcť so svojou web stránkou?

UI a UX dizajn

UI je skratka od User Interface. V preklade do slovenčiny znamená užívateľské rozhranie. UI predstavuje stránky, ikony, tlačidlá a vizuálne prvky pomocou ktorých ľudia komunikujú so zariadením. UI dizajnér navrhuje rozhranie, ktoré bude vizuálne atraktívne a jednoducho použiteľné.

UX teda User Experience, môžeme do slovenčiny preložiť ako užívateľská skúsenosť. Je to pocit, ktorý človek zažíva pri používaní vašej aplikácie, webovej stránky alebo e-shopu. UX sa zaoberá celkovým zážitkom používateľa, či je pre neho produkt zrozumiteľný a ľahko použiteľný. Produktom môžeme chápať webovú stránku, eshop, prípadne aplikáciu.

UI sa navrhuje v podstate všade, kde je interakcia používateľa s displayom. Dnes sa napríklad stretávate s UI rozhraním pri automatických pokladniach v obchode, alebo vo svojom automobile.

Zásady UI dizajnu

1. Používajte konzistentné farby, fonty, tlačítka a ďalšie UI prvky. Je možné používať aj konzistentné odstupy (medzery) v rámci UI rozhrania.
2. Dovoľte uživateľom používať klávesové skratky pre opakované úkony.
3. Uživateľ by mal jasne vedieť, čo sa v UI rozhraní deje.
4. Dajte uživateľovi jasnú spätnú väzbu, kde v rámci nejakého procesu sa nachádza (na začiatku, v strede, na konci).
5. Real time overovanie informácií, kt. zadávate do formulárov.
6. Navrhnite aplikáciu tak, aby používatelia cítili, že oni riadia dianie a systém len odpovedá na ich pokyny.
7. Navrhnite systém tak, aby si používatelia nemuseli pamätať veľa detailov medzi úlohami.

Dobre pripravené UI rozhranie pomáha uživateľom v lepšej orientácii na webovej stránke, alebo v aplikácii. Až 89% ľudí opustí stránku pri zlom UI. Namiesto toho navštívia konkurenciu.

Ak máte webovú stránku, ktorá vám neprináša to, čo by ste potrebovali, vieme sa pozrieť aj na vaše UI, prípadne UX a navrhnúť zlepšenia. Nemyslíme len na to, aby veci atraktívne vyzerali, ale aj na to, aby prinášali obchodné ciele.

UX a UI môžeme vysvetliť aj jednoduchým príkladom z reálnej situácie. UX je spôsob akým sa auto riadi, jeho rýchlosť alebo ako vás chráni pri nehode.

Pozdvihnite svoj grafický dizajn pomocou nezabudnuteľných a štýlových ikon. Objavte, ako môžete vytvoriť a vylepšiť súpravu ikon pre web. Skicujte na papier a svoje nápady v hrubých rysoch naskenujte do aplikácie Adobe Illustrator. Vytvárajte všestranné vektorové tvary nástrojmi Elipsa a Obdĺžnik. Jednoducho vytvárajte ploché ikony zoskupovaním a kombinovaním vektorových tvarov. Vytvorte si vlastný štýl ikon. Vytvorte si prvú súpravu profesionálnych ikon pomocou základných tvarov. Navrhnite ikony s vaším osobným vkusom.

tags: #ikona #alebo #tlacidlo