20. Aug 2021Design

UX dizajn tipy a triky

Tu je 20 tipov a trikov, ktoré aplikujem pri dizajne webových a mobilných aplikácií a ktoré by si mali mať na pamäti aj ty. Ak ti tu nejaký tip chýba, neváhaj mi napísať na LinkedIn alebo na naše sociálne siete.

Aneta StašikováDigital Product Designer

Ak vás zaujíma, ako vyzerajú naše aplikácie po použití týchto typov, nezabudnite navštíviť naše portfólio.

Konzistentnosť

1. Máme iba 1 slnko - udržujte svoje tiene rovnaké

Nezabúdajte, že máme iba jedno slnko - v interakčnom dizajne sa uistite, že všetky vaše tiene pochádzajú iba z jedného svetelného zdroja.

2. Ikonky zdieľajú spoločný vizuálny štýl

Uistite sa že všetky vaše ikony zdieľajú rovnaký vizuálny štýl - mali by mať rovnakú farbu, váhu, hrany sú buď ostré, alebo zaoblené a ikony sú vyplnené alebo obrysové.

Platí rovnaká zásada ako v piatok večer, ak idete na "jedno" pivo. Nemixujte!

3. Prekonajte paralýzu voľby

Všimli ste si, že Mark Zuckerberg nosí iba sivé tričká

"Naozaj chcem vyčistiť svoj život, aby som musel robiť čo najmenej rozhodnutí."

Príliš veľa možností v interface dizajne spôsobuje, že používatelia sú tak zahltení, že je menej pravdepodobné, že akciu dokončia. Ak je to možné, obmedzte dostupné možnosti alebo skryte možnosti, ktoré sú v danom štádiu rozhodovania menej relevantné.

4. White space je váš najlepší priateľ

Či už posuniete prvky zvonku (okraj) alebo zvnútra (výplň), mali by ste sa spoľahnúť na magické číslo 8. Zvýšte posun o 8 pixelov (4 pre malé prvky). Čím väčšiu medzeru chcete, tým väčší bude prírastok. Medzery vytvárajú dôraz na váš obsah a uľahčujú jeho identifikáciu. Predstavte si vec, ktorú hľadáte v miestnosti plnej vecí a v prázdnej miestnosti. Kedy je ju ľahšie spozorovať?

5. Pravidlo palca

Zóna palca je dôležitým faktorom mobilného dizajnu UX. Princípy takzvaného „pravidla palca" teda pomáhajú predchádzať zlej použiteľnosti aj "vykĺbeniu palca" používateľa.

Zobrazte najdôležitejšie CTA na dosah palca.

Hľadáš novú výzvu? Máme otvorené pozície!

Do nášho tímu hľadáme dizajnéra digitálnych produktov

Typografia

1. Čím menší font - tým väčšia výška riadka

Keď sa veľkosť písma zmenšuje, zväčšujte výšku riadku, aby bola čitateľnosť lepšia a naopak.

2. Všetky veľké písmená používajte iba pri krátkych nadpisoch

Nadpisy, ktoré sú napísané veľkými písmenami sú dobré ak sú krátke (veľmi krátke), najlepšie na jeden riadok. Sú najvhodnejšie pre Overlines - krátke fázy, ktoré sa objavujú nad nadpisom.

Používanie veľkých písmen pre dlhšie nadpisy - viac ako 1 riadok - je však hrozný nápad.

3. Zvoľte správnu "osobnosť" vášho fontu

Každá webová stránka / platforma má „osobnosť". Má to byť hlasné, pokojné, priateľské alebo poučné? Vyberte si typ písma rozumne, aby zodpovedal „osobnosti" tejto webovej stránky / platformy.

4. Zlepšite čitateľnosť textu

Vedeli ste, že 66 znakov (písmen aj medzier) v jednom riadku sa považuje za najlepší postup?

Samozrejme záleží aj na veľkosti písma a riadku, nemali by ste však prekročiť 77 znakov v jednom riadku.

5. Zväčšovanie fontu

Ak chcete zväčšiť 14px hlavný text, vyskúšate 16px a ste spokojní. Potom chcete zväčšiť svoj 40px nadpis, zmeníte ho len na 42px? Samozrejme, že nie, zmenili by ste ho na 56/60px.

Čím väčšie písmo, tým väčší prírastok. Toto funguje aj na veľkosť tlačidiel, white space atď.

Pre typografiu sa však používa jedna osvedčená škála s veľkosťami písma, ktorých sa budete chcieť držať navždy. Mierka je 12, 14, 16, 18, 20, 24, 30, 36, 48, 60 a 72 pixelov.

Iné

1. Spravte vaše chybové hlášky výnimočné

Ľudia neradi robia chyby, ale niekedy sa niečo pokazí. Ako dizajnéri by sme mali namiesto pozitívnych správ povzbudzovať skôr k pozitívnym akciám a sentimentu.

Ak je to možné, ospravedlňte sa za dôvod chybovej správy, aby používateľ nemusel mať žiadne negatívne pocity.

2. Pýtajte si čo najmenej informácií

To je najvhodnejšie pre situáciu, keď si používateľ vytvorí svoj účet. Požiadajte o informácie, ktoré nevyhnutne potrebujete na vytvorenie účtu, napríklad meno, e-mail a heslo, a dajte používateľovi príležitosť vyplniť zvyšok neskôr v nastaveniach profilu.

Neexistuje spôsob, ako by sa ktokoľvek prihlásil na LinkedIn, keby musel zadať celú svoju profesionálnu históriu, len aby sa mohol prihlásiť.

3. Ukážte progres

V každej situácii, keď používateľ potrebuje prejsť viac ako 1 obrazovkou a urobiť nejaké kroky - ukážte, v akom kroku sa používateľ nachádza na ceste, a uistite sa, že napreduje k svojmu cieľu. Vďaka tomu je menej pravdepodobné, že by používatelia boli frustrovaní z toho, že nevedia, kedy sa proces skončí, a preto je menej pravdepodobné, že ho úplne opustia.

Osvedčeným postupom je robiť to vizuálne (indikátor) aj textovo (Krok 1/3).

4. Použite obrázky ako vodítko

Malý psychologický trik. Ľudia sa inštinktívne pozerajú smerom, ktorým sa ostatní pozerajú - či už v skutočnom živote, alebo na obrazovke. Ak teda chcete nasmerovať používateľa na konkrétne miesto - CTA, použite obrázok s osobou, ktorá sa na dané miesto pozerá.

5. Použite extra nápovedy

Ľudia robia chyby. Pri vypĺňaní ľubovoľného formulára si nielen vizualizujte, čo je zlé, ale pridajte ďalšie chybové hlásenie blízko akcie, ktorú používateľ práve vykonal. Je to malý, ale užitočný spôsob, ako uľahčiť proces opravy chyby.

6. Kontrast

Jednou z najčastejších chýb, ktoré dizajnéri robia, je nedostatok kontrastu. Kontrast a použitie farieb sú kľúčovými faktormi, ktoré je potrebné zohľadniť pri navrhovaní prístupnosti. Používatelia, vrátane používateľov s nedostatkom farebného videnia, musia byť schopní ľahko prezerať obsah na digitálnej obrazovke.

Pomocou Contrast checker sa uistite, že je kontrast dostatočne vysoký.

7. Kontrast - text na obrázku

Na dosiahnutie jednoduchého kontrastu medzi textom a obrázkom na pozadí použite gradient. V závislosti od polohy textu môžete zvoliť jemné spodné, horné alebo bočné prekrytie alebo dokonca prejsť na úplné prekrytie obrázka.

8. Prekrývajúce sa prvky

Ak hľadáte spôsoby, ako povzbudiť používateľov k rolovaniu vašej stránky, môžu vám pomôcť prekrývajúce sa prvky. Prvok vytvára hĺbku a robí rolovanie prirodzenejším, pretože sa zdá, že sú rôzne sekcie spojené.

9. Zapojte developerov

Tento tip sa v GoodRequest osvedčuje každý deň.

Zahrnutie vývojárov na začiatku projektu (ešte pred návrhom) zvyšuje použiteľnosť používateľského rozhrania. Vývojári vidia aj za vizuálnu stránku rozhrania, čo im dáva šancu ponúknuť viac vstupov, aby bolo rozhranie čo najjednoduchšie na používanie.

10. Zvýraznite hlavné prvky

Zamyslite sa nad tým, čo je najdôležitejším prvkom na vašej stránke a zvýraznite ich pomocou kombinácie rôznych veľkostí, váh a farieb písma.

Vďaka zvýrazneniu najdôležitejších prvkov je používateľsky príjemnejší zážitok.

Aneta StašikováDigital Product Designer