Zřeknutí se odpovědnosti: Toto je závěrečná část série článků, ve kterých chápeme, proč se z hlediska základů psychofyziologie zdá to krásné pohodlné a jak navrhovat rozhraní pomocí těchto znalostí. V první části jsme porozuměli teorii návrhu rozhraní. Ve druhé části hovořili o metodách, které pomáhají ovládat vizuální vnímání člověka. A konečně aplikovaná třetí část – řekneme vám, jaké nástroje použít při návrhu rozhraní, aby aplikace byla pro uživatele co nejjednodušší a nejjasnější!
Dobré UX (uživatelské prostředí/skript) nezaručuje, že se uživatel bude řídit vaším plánem. Jde o to, jak ovládáte pozornost uživatele – o tom jsme mluvili v předchozím článku.
Stručně řečeno, aby se upevnil dobře navržený UX, je třeba jej posílit pomocí UI (vzhled produktu) a vytvořit vhodný způsob komunikace mezi uživatelem a programem. S tím nám pomohou vizuální obrazy a ceny. Pokud už té teorii rozumíte, nyní je čas porozumět konkrétním nástrojům!
Vizuální hierarchie prvků rozhraní Je sekvence, ve které uživatel vnímá informace. Při správném použití hierarchie může mysl seskupovat prvky a upřednostňovat je – to jí usnadní pochopit vaši zprávu nebo vyřešit její problém. Tento přístup lze použít ke strukturování široké škály prvků, jako jsou čísla, barvy zvýraznění, text.
Čísla … Nejlépe si je pamatujeme. Pravděpodobně jsme to jen cvičili. Kdysi neexistovaly žádné kalkulačky a lidé si hodně mysleli, pamatovali si telefonní čísla … S největší pravděpodobností bude tento zvyk v budoucnu nahrazen něčím novým. Prozatím je ale lepší použít číslice a je lepší, když doplňují rozložení a fungují jako přízvuk.
Lidé si snadno zapamatují barvy. Velmi rychle řešíme problémy, které vyžadují barevnou identifikaci. Například při přejezdu silnice budeme věnovat pozornost semaforu: červená – stop, zelená – go. Další triviální, ale velmi jasný příklad. Když přijdeme na návštěvu a jdeme si umýt ruce, není pro nás těžké přijít na to, jak zapnout teplou a studenou vodu. Vše je postaveno na vzorcích známých uživateli: červená – teplo, oheň, zelená – schváleno, indikátor „hotovo“ nebo jednoduše „může“. Barva může hrát roli nejen indikátoru stavu nebo pokroku, ale může také fungovat jako vizuální „vektor“, směr a navigátor pro uživatele. Jedno důležité ALE. Nepoužívejte vybledlé, neutrální, matné barvy jako důležitý indikátor. Jsou mnohem vhodnější pro zobrazení „neaktivního“ stavu objektu. Ale ani vy nemusíte oslňovat, jinak hrozí, že se váš design promění v vinaigretu. Najděte harmonii a rovnováhu a váš uživatel se rychle vyrovná se svým úkolem a bude spokojený.
Dopisy třetí místo . Hlavní význam je nejčastěji vyjádřen textem, ale slova vnímáme až za čísly a barevnými akcenty. Je velkou chybou dát návrháři spoustu textových materiálů v naději, že bude schopen krásně rozvrhnout.
V rozhraní existují pravidla pro text:
– Jasné odstavce, každý ne více než 5 řádků.
– Mezera mezi odstavci: úvod vynásobený dvěma.
– Písmo čitelné na obrazovce – 18-19 pixelů.
– Řádek by měl obsahovat od 35 do 95 znaků.
S takovými omezeními by měl být text na obrazovkách mobilní aplikace co možná nejvíce informativní, jasně strukturovaný a ve výsledku úhledně sazba.
Seskupení objektů. Podvědomě vnímáme objekty nacházející se v blízkosti jako vzájemně související. Vezměme si příklad z organizace vesmíru. Kde teď jsi? V práci, v kuchyni nebo v parku? Pokud jste v práci, pak před vámi je stůl, počítač a notebook. V interiérovém designu se tomu říká funkční zónování. Očekáváme, že v kuchyni uvidíme rychlovarnou konvici a v ložnici postel, ale ne naopak. Máme tendenci seskupovat a strukturovat objekty, je pro nás snadnější vnímat svět kolem nás. Proto jsou v rozhraních entity, které jsou si navzájem podobné, nejlépe seskupeny podle významu, typu, typu a dalších charakteristik. Například nastavení smartphonu jsou seskupena podle charakteristik: uživatelský účet, nastavení připojení, obrazovka, zvuk, oznámení, soukromí atd.
Četnost použití jednoho nebo druhého typu nastavení určuje pořadí v seznamu.
Kontrast. Pomocí kontrastů může návrhář řídit pozornost uživatele: zvýraznit nezbytné prvky a upozornit klienta na potřebné informace, vyvolat cílené akce a usnadnit vnímání obsahu a navigace. Podle výzkumu kontrast zvyšuje vnímání struktury a hierarchie aplikace, webu, konkrétní stránky nebo obrazovky a usnadňuje zapamatování obsahu. Kontrast může být víc než jen barva. Můžete použít kontrastní velikosti nebo tvary, sémantické kontrasty (prázdnota-plnost, teplo-chlad, pohyb-statika). Je důležité, aby byl rozdíl opravdu znatelný a pozornost uživatele je věnována důležitým informacím, nikoli sekundárním informacím.
Ikony a piktogramy. V roce 2021 je vytváření pestrých ikon pro typické objekty jednoduše nepřijatelné. Rozhraní je třeba vyleštit až na každý pixel. Věnujte zvláštní pozornost ikonám.
Rok 2020 se stal jen boomem rozvoje knihoven designu. V uplynulém roce se objevilo obrovské množství hotových, profesionálních a vysoce kvalitních ikon pro každý vkus a barvu. Dnes prostě nemá smysl kreslit ikony vlastními rukama a ztrácet čas tím. Tisíce designérů z celého světa vytvořily nejlepší ikony pro jakýkoli projekt a úkol.
Jsou velmi symbolické a většinou používají obrázky ze skutečného světa, které jsou snadno srozumitelné (pokud jste nečetli první část článku, pak je čas. V něm jsme hovořili o financích). Kliknutím na srdce nebo hvězdu se ocitnete v „oblíbeném“, lupa označuje hledání a ikona fotoaparátu označuje, že můžete pořídit fotografii. Ikony se také používají jako užitečné rady pro klasifikaci obsahu.
Piktogramy pomáhají číst informace a měli byste se je snažit používat častěji. Jediným problémem je závislost hodnoty ikony na obsahu. Mnoho dnes populárních piktogramů se objevilo poměrně nedávno. Například známá ikona cloudu, která implikuje operaci ukládání dat, se začala používat pouze díky šíření cloudových řešení. Tato ikona dříve vypadala jako disketa.
Situace je podobná hlasovému vstupu. Před 5-7 lety by nikdo nepochopil piktogram v podobě mikrofonu. Spolu s podpisem můžete vložit novou ikonu a poté text postupně odstraňovat.
Velikost … Čím větší je prvek, tím více přitahuje pozornost. Faktem je, že lidé nejprve vidí velké objekty, včetně textu a obrázků. Hierarchie velikostí poskytuje kontaktní místo pro zahájení vizuální cesty. Od největšího po nejmenšího můžete vytvořit vizuální „mapu“ navigace pro uživatele a nasměrovat ho cestou, která je důležitá pro vaše úkoly.
Fotografie … Tematické fotografie, fotografie objektů, avatary a další obrázky mohou nejen vyprávět o aplikaci, ale také sloužit ke konkrétním úkolům. V aplikaci s recepty je tedy vhodné použít fotografie hotových jídel. V aplikaci pro jógu jsou fotografie ásan atd. Je ale velmi důležité, aby byla fotografie kvalitní (ano, v roce 2021 si o ní ještě musíme promluvit), aby nekřičela, že byla stažena ze skladu a zapadá do stylu aplikace nebo webu .
Grafika … Ilustrace a maskoti mohou být skvělými vodítky. Ano, ani velmi informativní. Přistupte k otázce kreativně a dokonce i ta nejbez banální ilustrace nejen doplní kompozici, ale také nasměruje pozornost uživatele na správné místo. Více o ilustracích, které slouží jako infografika; )
Prvky značky … Loga, značky a firemní barvy okamžitě spojí aplikaci s konkrétní společností. Používejte je v rozhraní, takže nejen pomůžete uživateli pochopit, kde se nachází, ale pokud je produkt dobře promyšlený a implementovaný, zvyšte věrnost zákazníků.
Tlačítka … Jeden z hlavních interaktivních prvků ve fyzickém a digitálním světě. Byli tu dlouho před grafickými uživatelskými rozhraními a všichni víme, že můžete kliknout na tlačítko. Návrhářům stačí, aby to bylo viditelné a jasně rozlišitelné. Speciální tvar, kontrast, barva nebo textový titulek vám pomůže toto tlačítko rozpoznat.
Vstupní pole. Pole, do kterých může uživatel zadávat data. Návrháři je uspořádají tak, aby bylo jasné, co lze uvnitř potisknout. K vytváření takových polí v různých stylech použijte existující vzory nebo pokyny ke studiu a uživatel stále věděl, co má dělat. Další vylepšení takových polí, jako jsou například tlačítka, můžete použít mikrointerakce a animace.
3D … K prohlížení produktu ze všech úhlů nemusíte chodit do obchodu nebo mít brýle pro virtuální realitu. Objemové objekty lze použít jak pro bannery, tak pro sekundární designové prvky a ve funkčnosti obchodů – pro seznámení se s produktem. S pomocí 3D objektů, virtuální a rozšířené reality pomáhají obchody s oděvy, klenoty a nábytek svým spotřebitelům již několik let správně vybírat ještě před nákupem. Podnik si zaslouží méně ztrát při zachování věrných zákazníků.
Technologie jsou stále přístupnější a trend používání objemových objektů bude velmi brzy všudypřítomný. Nyní je čas se naučit, jak je správně implementovat v designu. Při správném použití a vhodném stylu zaujmou uživatele 3D obrázky a virtuální objekty.
Asymetrické rozložení. Návrháři se stále častěji snaží porušit stará pravidla a hledat nové způsoby, jak generovat emoce a zájem. Stránky jsou dnes vytvářeny podle asymetrických rozvržení – prvky hladce rozložené na mřížce už nepřekvapují. Žádáme vás, abyste tento bod brali vážně. Rozložení v designu je na rozdíl od ilustrací konzervativnějším tématem. Není nutné se omezovat pouze na klasická pravidla a techniky, ale takové inovace by měly být do designu zaváděny opatrně a pouze tam, kde jsou vhodné, a rozhodnutí je podloženo argumenty. Navzdory těmto trendům většina ruských uživatelů stále čte zleva doprava a shora dolů, mimochodem, jedná se o vzorec, který se vyvinul ze základů psychofyziologie 🙂
Tmavý motiv. Tento režim se stal normou pro rozhraní a z hlediska přístupnosti je jednou z nezbytných funkcí. Pokud vám tedy nenapadlo temné téma pro váš projekt, je na čase se rozhodnout, jak by měl vypadat. Většina uživatelů si již zvykla používat temné téma – mnoho čtených knih, listování v sociálních sítích před spaním a zhasnutá světla. V takových případech je tmavé téma mnohem pohodlnější. Při práci s uživatelským rozhraním proto vezměte v úvahu tento bod a nezapomeňte jej navrhnout. Přirozeně, pokud to produkt potřebuje.
Animace … Pro správu zaměření uživatele – nepostradatelná věc. Angažovat klienta na hlubší úrovni znamená doprovázet ho v okamžiku interakce s rozhraním a neztrácet vteřinu. Návrháři nadšeně řeší možnost využití prázdných prostor. Zájmy interaktivního designu však jdou mnohem dále. Animace jsou výmluvnější než statický obsah: jediná animace vypráví celý příběh. Může to být příběh společnosti, zapojení komplexního produktu, video s výhodami produktu nebo jednoduše srozumitelné prvky rozhraní, animované přechody mezi prvky, které upoutají pozornost uživatele. Animace v rozhraní vytváří silné spojení mezi virtuálním světem a fyzickým. Nejčastěji simuluje interakci se skutečnými věcmi: stisknutí, přejetí prstem, přetažení a další operace. Jednoduché i složité animace poskytují návrhářům skvělé příležitosti. Zpracováním animovaných prvků v rozhraní určitě upoutáte pozornost uživatele.
Mikrointerakce … I sebemenší pohyb vede k nějakému výsledku a odezvě aplikace. Stiskl jsem tlačítko a to například ukazuje stahování. Existuje mnoho sbírek mikrointerakčních her, webů a aplikací, které zabíjejí nudu a zlepšují uživatelský komfort. A pokud chladíte i tyto podrobnosti, ve stylu značky a kontextu samotné aplikace – věřte mi, uživatelé to ocení.
Nezapomeňte na gamifikaci … Obchodníci a designéři již dlouho oceňují zapojení uživatelů prostřednictvím herních mechanismů. Ano, nejde jen o marketing, ale také o vizuál. Existuje mnoho hotových postupů, které lze (vhodně!) Přijmout do vizuální komponenty designu. Hlavní výhodou gami kationu je, že funguje pro jakékoli publikum. Do procesu jsou zapojeni i lidé, kteří jsou daleko od her a vykonávají všechny úkoly, které designér, obchodník a další specialisté stanovili.
A konečně nejdůležitější věc, kterou je třeba mít na paměti při vytváření nových rozhraní a trendových návrhů.
Pracujete se skutečnými lidmi a neměli byste si myslet, že všichni uživatelé se stejně snadno naučí všechno nové. Při zavádění něčeho nového musíte nejprve lidi vzdělávat. Principy, o kterých jsme hovořili v průběhu tří článků, vám pomohou plynule představit uživateli nový produkt, naučit ho novým vzorům interakce a získat na oplátku jeho loajalitu.
P.S. Děkujeme, že jste s námi! Líbí se nám a sledujte nás tady a na Instagramu 🙂
