Ahoj všichni. Jmenuji se Alesya a před časem jsem zahájil své první kroky v oblasti designu UX/UI.
Fórum
V tomto článku bych chtěl „shromáždit“ všechny informace o designu UX/UI což je užitečné vědět při vytváření webových stránek a mobilních aplikací.
1. Konzistence struktury webu nebo aplikace
Všechny důležité informace by měly být „na povrchu“. Mnoho designérů, ponořujících se do procesu vytváření, se někdy příliš snaží, aby vše bylo jiné než ostatní, neobvyklé a kreativní, což může vést k designu, který je pro uživatele nepochopitelný, a to je jedna z nejdůležitějších částí UX/UI design. Primárním úkolem je udělat to nejen krásným, ale také co nejpohodlnějším. Návštěvníci stránek by neměli mít otázky typu „Kde jsou kontakty?“ nebo „Jak zobrazit košík?“ (pokud mluvíme o online obchodu).
A proto se podívejte na web, který jste vytvořili, očima osoby, která jej navštívila jako návštěvník. Představte si, že ho vidíte poprvé, a pokud to nevyjde, požádejte o pomoc své přátele a známé. Pokud se některý z nich zeptá například na to, jak zobrazit stránku Oblíbené, musí to být opraveno před „vydáním“ webu nebo aplikace.
Vezměme si příklad,
Návrh internetového obchodu elektronického obchodu Návrh internetového obchodu elektronického obchodu www.behance.net
Zde vidíte přepracování aktuálního designu webu v souladu s těmito pravidly. Aktuální chyby stránek:
* Horní nabídka se spojí s bannerem.
* Banner je příliš plný a odvádí pozornost od důležitých informací.
* Důležité informace o volném připojení jsou skryty ve vzdáleném rohu a informace o aktualizaci informací o koronaviru jsou shodné s důležitostí všech položek nabídky , ačkoli jen to by tam mělo být, což pomůže člověku provést konverzi a najít produkt, který potřebuje.
* Kontakty na webu jsou rozděleny do 3 způsobů komunikace, ke každé je nutné přistupovat prostřednictvím nabídky, což je nesprávné. Stránka s kontakty je stránka se všemi kontakty a musí být na jednom místě, jinak bude osoba zmatená.
* Web nemá nákupní košík ani oblíbené položky, kam můžete přidat vybrané produkty a poté je revidovat, abyste získali konečnou volbu.
Všechny tyto chyby značně komplikují proces nakupování uživatelů a pokusil jsem se to opravit ve svém designu.
2. Dodržujte konzistentní styl
Když uživatel poprvé přijde na váš web a zůstane na něm, znamená to, že je pro něj přinejmenším příjemný, ale pokud se při přepnutí na jinou stránku nebo obrazovku v aplikaci dramaticky změní design, může jej uživatel opustit . Už byl zvyklý na stejné barevné schéma, písma a vzor a cítil se pohodlně, takže jakékoli náhlé přechody mohou způsobit nepohodlí.
Na druhou stranu při vytváření stránky webu existuje doporučení střídat bloky tohoto webu (tmavé a světlé, světlé a vybledlé), což pomáhá udržovat pozornost uživatele a nedělat jednobarevný list.
V tomto okamžiku je důležitá rovnováha: udržet zájem uživatele a neodpuzovat ho zásadními změnami v designu.
3. Každý designový prvek by měl být na svém místě
Jedním z nejdůležitějších pravidel dobrého uživatelského rozhraní je uspořádat prvky v pořadí podle důležitosti. Cílem je upozornit uživatele na nejdůležitější informace na stránce a usnadnit jim jejich vyhledání. Z tohoto pravidla lze odvodit následující body:
* Ujistěte se, že okraje uvnitř bloku nejsou větší nebo stejné jako mezi sémantickými bloky. Mělo by existovat snadné, ale znatelné oddělení informací podle významu.
* Informace důležité pro převod by měly přitahovat pozornost (to neznamená, že by na webu měly být jasně červené nebo modré v pastelových odstínech)
* Všechny důležité informace o převodu by měly být uživateli k dispozici „na jedno kliknutí“ (neměl by procházet 3–4 stránkami, než najde telefon pro uskutečnění hovoru)
Jako příklad mohu uvést tento web –
Skupina HYVE: Redesign Skupina HYVE: Redesign www.behance.net
Klient opravdu chtěl být volán, ale zároveň schoval telefon a další důležité kontaktní informace za tlačítka. V případě, že hlavním cílem jsou hovory, měl by být telefon umístěn ve viditelné oblasti a zvýrazněn barvou nebo velikostí písma.
4. Použití barvy k řízení pozornosti uživatele
Částečně jsem to již zmínil v bodě 2.
Opakuji zde, abyste se nevraceli:
Při vytváření stránky webu se doporučuje střídat bloky tohoto webu (tmavé a světlé, světlé a vybledlé), aby byla zachována pozornost uživatele a nebyl vytvořen jednobarevný list.
Barvy a kontrasty jsou vaše zbraně pro kontrolu pozornosti (zde je hlavní je opatrně je používat a touto zbraní nezabít uživatele 😊)
5. Používání „nadčasové klasiky“
Dobře, možná ne klasika, ale něco, na co jsou lidé zvyklí. Například při otevření mobilní aplikace uživatel ví, že kliknutím na hamburger otevře nabídku. Ale co když se návrhář rozhodl, že vzhled hamburgeru je zastaralý a je potřeba něco nového? Rozhodl se udělat něco super kreativního a vytvořil novou ikonu, která vůbec nevypadala jako hamburger. To vede uživatele k dezorientaci, ano, nakonec pochopí, co a kde se nachází, a do všeho strká. Hlavní „ale“ zde je, že uživatel by tím neměl vůbec ztrácet čas, vše by mělo být intuitivně jasné. Jedním z nich je toto: pokud každý ví, že hamburger je nabídka, použijte hamburger a to samé lze použít i na další vizuální prvky, na které jsou uživatelé zvyklí, například na nákupní košík.
6. Uživatel musí mít pocit, že má situaci pod kontrolou.
V každé fázi si jako příklad vezměme internetový obchod. Uživatel musí vědět, kde se nachází a co se děje. Například kliknutím na stránku produktu jasně vidí, že se jedná o stránku produktu, když jde do košíku, vidí, že se jedná o košík atd.
S tím vším musí vědět, že se kdykoli může vrátit, zrušit nějakou akci, začít znovu nebo pokračovat v tom, co dělal.
Pokud se uživatel „ztratí“ ve struktuře webu, opustí jej a stěží se vrátí.
8. Nepřeplňujte informace
Ujistěte se, že na jedné obrazovce nevidí uživatel více než 2, ale nejlépe 1 výzvu k akci. Neměl by se zmást, kde tisknout a co dělat.
Rozdělte web (pokud se jedná o web) na sémantické bloky, a pokud se jedná o aplikaci, rozdělte obrazovky podle obsahu, na každém sémantickém bloku by měla být od uživatele jedna akce, kterou chcete. .
9. Použití nadpisů a podnadpisů
Text v libovolném rozhraní by měl být logicky rozdělen do bloků. Název, pod kterým bude snadné najít blok, je zvýrazněn silněji než celý text, pouze texty s popisem v jednoduchém, ale čitelném písmu a existují informace, které blok pravděpodobněji zdobí, do kterého lze zapsat krásné ručně psané písmo, protože i když někdo nerozumí tomu, co je tam napsáno, tyto informace nepředstavují něco důležitého pro převod.
Máte-li jakékoli dotazy, rád na ně odpovím 😊
