Skvot Mag

KVALITNÍ SCREEN DESIGN: ZÁKLADNÍ PRAVIDLA UI/UX

Jak to udělat, aby design rozhraní nebyl matoucí, ale užitečný.

KVALITNÍ SCREEN DESIGN: ZÁKLADNÍ PRAVIDLA UI/UX
card-photo

LUSYA ZELENKO

SKVOT Copywriter

25. ledna 2024 DESIGN Článek

Každou minutu vzniká 175 nových webových stránek a je stále těžší překvapit designem rozhraní. Animace, které nám blikají před očima, nás unavují. Odrazují nás příliš složité, nesrozumitelné, barevné, monotónní obrazovky bez zajímavých tlačítek nebo s příliš mnoha zajímavými tlačítky – je třeba najít rovnováhu. A my s tím pomůžeme.

Skvot se pídil po hlavních výzvách ve světě designu rozhraní a na základě materiálů z blogů Mobindustry, Uxtweak a Merehead nabídl řešení pro tvůj budoucí digitální produkt.

Proč je potřeba UX a UI

UX a UI design jsou dva různé aspekty designu, ale úzce spolu souvisejí. UX (User Experience) je zážitek z interakce s rozhraním (klikání na tlačítka, animace atd.). UI (User Interface) je vizuální část designu (barvy, písma, fotografie).

Kombinace těchto dvou typů designu je nutností pro vytvoření uživatelsky přívětivého a intuitivního rozhraní, protože 88 % lidí odmítne používat nelogické webové stránky se špatným designem. Ani u uznávaných společností nepřipadají v úvahu slevy: hodnocení značky klesne, pokud jsi předem nemyslel na uživatelskou zkušenost a uživatelské rozhraní. Vžij se do kůže zákazníků, abys pochopil*a, jak vidí a cítí tvůj web.

Převzali jsme nejčastější chyby v UX/UI designu a přidali návrhy, jak je napravit.

Zjistit více

 

Moc to komplikuješ

Když zákazník příliš nerozumí složitostem tvorby rozhraní, může chtít spojit všechny trendy do jednoho, přidat co nejvíce složitých animací a inovací. Tento trend se týká multiverze a tvou povinností je vysvětlit, že mít mnoho funkcí není dobré. Může to uživatele odradit. V ideálním případě by každé tlačítko a každé písmeno mělo odpovídat za konkrétní (jasnou a jedinou) funkci.

Hlavním cílem webu je snadné vyřešení problému. Z toho bys měl*a vycházet. Jednou z hlavních funkcí digitálního designu je vyvolat emoce a být srozumitelný: tedy tam, kde důležité detaily vystupují v jasných barvách a jako by říkaly, kam kliknout.

Co můžeš změnit: Minimalismus a devadesátá léta jsou nyní v módě a jsou známé svými jasnými barvami, pixelací, emoji, jasným písmem a memphiským stylem. Retro je silné. Lidé rádi vzpomínají na minulost. Zvířata si v prvních dnech svého života „pamatují“ své matky nebo jakýkoli předmět, který je může nahradit (dokonce i gumový míč se může stát matkou pro kachňata). 

Pocit, že „dřív to bylo lepší“ je syndrom káčátka. Vzpomínky na dětství jsou základem pro naše chápání světa a jednoduše vyvolávají hřejivé emoce, což je důvod, proč se nostalgie využívá v designu rozhraní. Dotýká se jich.

Neekonomická rozhodnutí

Ve světě, kde se trendy mění každou minutu, může být obtížné najít pravdu. Tak tomu bylo i v případě trendu tmavého režimu, který zanechal mnoho zklamání. Měl chránit zrak a zlepšovat kvalitu spánku, ale nakonec žádná studie jeho přínos neprokázala. V současné době je tmavý režim vnímán spíše s povděkem, protože je to jako nasadit si sluneční brýle po celonočním večírku.

Tmavé téma používej jen v případech, kdy to dává smysl. Tmavý mód se používá například na webech, kde téma vyžaduje použití tmavých barev: pro zvýraznění kontrastních věcí (web s Airpods) nebo pro asociace, jako například u Netflixu, kde jejich web jako by odkazoval na potemnělý kinosál. Tmavý režim vypadá cool také na webech, které prostě nemohou nemít tmavé barvy: černá je v hlavní paletě značky (web Star Wars).

Také je možné použít režim Anti Light, který se přizpůsobuje světelným podmínkám. Stále více lidí se přiklání k používání „mírně tmavého režimu“ – s originálním světelným rozhraním.

Co můžeš změnit: Tmavý mód ti pomůže ušetřit peníze – to je fakt. V době, kdy válka pokračuje a světla jsou neustále zhasnutá, se tmavý vzhled určitě stane trendem: pomáhá šetřit energii baterie. Tmavý režim šetří energii + šetří displej, aby déle vydržel – a navíc vypadá cool. Je to výhra pro všechny.

Plochá realita

3D animace, virtuální nebo rozšířená realita mohou být nákladné – a mohou prodloužit načítání webových stránek – ale často se vyplatí. Lidé dnes chtějí vynaložit málo úsilí, ale získat spoustu nových zážitků a emocí virtuálně. A jsou ochotni za to zaplatit.

3D, rozšířená realita a virtuální realita zlepšují zážitek z online nakupování. Uživatel si může produkt „vyzkoušet“ a pocítit, jaké to je vlastnit novou věc, což zvyšuje konverzi o 250 %. Je také jedinečný, což znamená, že uspokojuje hlavní rozmar uživatelů – hledání nových zážitků.

Velké společnosti a obory, které si to mohou dovolit (např. medicína a móda), používají VR+AR již dlouho: Společnost Apple oznámila vydání brýlí pro rozšířenou realitu, IKEA nabízí svým uživatelům, aby si virtuálně dokončili návrh svého bytu, umělá inteligence odděluje siamská dvojčata před operací, týden módy také pořádá své přehlídky v digitální podobě – jedna ukrajinská značka uspořádala přehlídku i s brýlemi pro VR.

Tento přístup je však stále novinkou, zejména pro běžné uživatele. Rozšířená a smíšená realita v zařízeních dává pocit zapojení do vývoje metaverza, vytvoření něčeho zvláštního a něčeho, co dosud nebylo k vidění.

Co můžeš změnit: V dobách války nebo covidu-19 jde míra stresu v reálném životě nahoru a my jdeme hledat potěšení do virtuálního světa. Úroveň dopaminu (hormonu dobré nálady) stoupá s každým lajkem a šoupnutím. Přestože se od obrazovek nedokážeme odtrhnout, naše tolerance k potěšení se každým dnem zvyšuje, takže musíme zvýšit laťku. Virtuální a rozšířená realita dělají právě to – oživují rozhraní. Jsou návykové.

Vyrobeno vlastníma rukama

Podnikatel možná nechápe, proč potřebuje najmout zkušené návrháře UX/UI, když má k dispozici tvůrce webu, jako je Wordpress. Jeho názor se však rychle změní, když si uvědomí, že bez zkušeností není možné zohlednit vše. Barevné podání a velikost různých displejů se liší – je třeba zohlednit všechny vlastnosti. Nejlépe tak, aby byl zachován obsah.

Uživatel může chtít při návštěvě webové stránky přejít z notebooku na chytrý telefon a kvalita by měla zůstat stejná. Spoléhej na tři body: (1) animace, (2) posloupnost obsahu a (3) výrazný text. Lidé musí pochopit hlavní sdělení a projít až na konec.

Co můžeš změnit: Nezapomeň na mikrointerakce. Malé prvky UX (ikony a tlačítka, která se mění po stisknutí) usnadňují navigaci v aplikaci a vytvářejí příjemný dojem. Mikrointerakce lze využít k prezentaci funkcí značky a zprostředkování celkové atmosféry firmy.

Až 50 % neuronů v lidském mozku zpracovává vizuální obrazy. Lidé snáze a rychleji vnímají 2D obrázky než text. Vizuální efekty působí na spouštěče a způsobují, že rolování připomíná film a nutí nás posouvat se až na konec stránky – generace Z totiž miluje, když se snímky mění do rytmu. Budí to nadšení.

Zjistit více

 

Hesla budiž zapomenuta

V roce 2022 přihlašovací jména a hesla uživatele spíše odradí a zmatou, než aby zvýšila bezpečnost webových stránek. Lidé stráví spoustu času vymýšlením uživatelského jména a hesla s vhodnou úrovní složitosti, pak narazí na chyby při ukládání stránky a nakonec se registrují znovu. Navíc 57 % lidí svá hesla zapomene. A vše začíná znovu.

V zařízeních jsou uložena data z našeho digitálního života, která je důležité chránit. A přestože ve většině případů je to nejděsivější, co je možné v lidských galeriích najít, tisíc obrázků koček nebo dětí, někteří uživatelé stále ukládají informace, které jsou důležité pro geopolitiku, ekonomiku a životní prostředí. To je bezpečné.

Co můžeš změnit: Nabídni alternativu. Nejjednodušší a nejefektivnější možností je umožnit registraci bez hesla, pomocí Googlu, sociálních sítí, jednorázových hesel apod.

To bylo provedeno v systému Windows 10. Společnost chtěla obejít používání hesel v operačním systému a najít pohodlnější alternativu – rozpoznávání obličeje a otisků prstů (biometrické ověřování). Nyní můžeš k přihlášení používat Face ID, prsty nebo PIN, už žádné lístečky s napsanými hesly, které se vždy ztratí.

Přizpůsobení se lidem

Podniky musí neustále rozhodovat o tom, jak zvýšit své zisky. Některé společnosti potřebují o něco více finančních prostředků než jiné. Například zpravodajské weby mohou mít tisíce vyskakovacích oken, která ti připomínají, že se máš přihlásit k odběru, přispět, a prostě tě otravují. Ve skutečnosti je možné zvýšit loajalitu naopak – tím, že budeš myslet na ostatní, ne na sebe.

Personalizace je studium potřeb uživatelů s cílem přidat funkce a změnit kontext tak, aby se přiblížil tomu, který má konkrétní osoba ráda. Například Netflix umožňuje vybírat z tisíců filmů a televizních pořadů, ale vášniví filmoví diváci ti řeknou, že strávíš delší dobu hledáním filmu než jeho sledováním.

Spotify vytváří seznamy skladeb s podobnými interprety a hudebními žánry na základě toho, co se ti líbí. V aplikaci Instagram je možné změnit téma nebo barvu chatu. V aplikaci Telegram si můžeš nastavit vlastní jazyky. Taková řešení budou fungovat u webových stránek a aplikací, se kterými uživatelé pravidelně komunikují. Lidé mají rádi možnost měnit a přizpůsobovat si design podle svých potřeb.

Co můžeš změnit: V módě je design na míru a respekt ke každému klientovi. Lidé jsou unaveni globalizací a nyní očekávají individuální přístup zaměřený na jejich vlastní zájmy a koníčky. Není třeba se dělit na segmenty, mysli globálně: každý člověk je komplexní vesmír, mysli na něj. To je to, co nás zajímá.

Trendem je rychlost a obsah, což znamená, že designéři se nyní zaměřují na zkrácení a vyplnění doby, kdy se web něčím načítá. Proto jsou jedním z hlavních trendů v roce 2023 3D detaily. Ty mohou uživatele „bavit“ a upozorňovat na důležitá tlačítka, body a slova.