9 věcí, které musíte vzít v úvahu při navrhování uživatelského rozhraní

Návrh uživatelského rozhraní zahrnuje kombinaci několika dovedností. Skvělý design uživatelského rozhraní je pro uživatele zcela přirozený, ale nestává se to náhodou. Je to výsledek mnoha výzkumů a testů s ohledem na řadu životně důležitých prvků. Hovořili jsme s některými odborníky na našem kurzu UX Design Foundations, abychom získali nějaké tipy.

Při navrhování uživatelského rozhraní musíte vyvážit několik věcí. Na jedné straně je tu uživatelská zkušenost. Je samozřejmé, že uživatelské rozhraní musí sloužit svému účelu pro uživatele, pro nějž je určeno. Ale to není jediná starost. Vysoce použitelné rozhraní není dobré, pokud je ošklivé, protože je prostě nebudete chtít používat, bez ohledu na to, jak je použitelné. A existuje spousta použitelných produktů, které ztrácejí zájem zákazníků, protože začínají vypadat zastarale.

UI neslouží pouze jako vizuální projev UX, ale také přispívá k samotnému UX. Návrh designu uživatelského rozhraní zahrnuje estetiku a část toho nevyhnutelně zahrnuje také identitu značky. Níže je uvedena řada odborníků v oboru, včetně Pilar Serna a Daphne Lin ze Spotify, Luke Cooley z Google a specialistka na etický design a UX Trina Falbe, promluvte si o klíčových věcech, které je třeba zvážit pro skvělé uživatelské rozhraní design.

Všichni citovaní odborníci přispívají k našemu esenciálnímu online kurz UX designu, UX Design Foundations. Kurz nabízí pohodlný a flexibilní způsob, jak se naučit všechny základy UX designu. Vyplňte náš dvouminutový průzkum a získejte šanci vyhrát místo na hřišti.

9 věcí, které je třeba vzít v úvahu při navrhování uživatelského rozhraní

01. Upřednostněte UX ve svém uživatelském rozhraní

Takže jsme začali tím, že UX není všechno; ale to je důvod všeho. Mohli bychom diskutovat rozdíl mezi UI vs UX několik dní, ale snad se shodneme na tom, že uživatelské rozhraní by mělo sloužit alespoň hlavně uživatelskému zážitku – a že vizuální design by měl skutečně sledovat funkčnost.

Návrh uživatelského rozhraní odkazuje na vizuální komponenty uživatelského zážitku a může pomoci učinit cestu uživatele co nejintuitivnější. UX si můžeme představit jako základ, strukturu a rám domu a UI jako tapetu, nábytek a všechny ty prvky, které zpříjemňují pohyb v prostředí. To zahrnuje tlačítka, ikonografii, barvy a veškerou estetiku uživatelského rozhraní. Abychom však měli pravdu, musíme zvážit, kdo a proč bude rozhraní používat.

Jak říká Pilar Serna, senior design manager ve Spotify: „Při navrhování se ujistěte, že nemáte pouze část uživatelského rozhraní, ale že je v ní zakomponována také uživatelská zkušenost. A také zkuste optimalizovat pro tuto konzistenci. Pokud použijete určitý prvek uživatelského rozhraní, [ujistěte se, že to skutečně dává smysl a má důvod tam být."

Podnikatel, pedagog a profesor Parsons School of Design Rinat Sherzer doporučuje používat metodologii designového myšlení. Tento proces začíná objevením světa, pro který hodláte tvořit, poté pochopením nitra a v ideálním případě přijít s mnoha nápady, které by mohly být možným řešením, než si vyberete jeden k prototypu a otestování (viz náš průvodce nejlepší Nástroje pro prototypování uživatelského rozhraní pro to).

„Je to opravdu chytrý rámec, kterým musíte projít, když vytvoříte nový produkt, protože skutečně zapouzdřuje pravou stranu mozek, skutečně imaginativní a kreativní strana mozku, stejně jako levá strana mozku, která je více analytická,“ říká.

První dovedností je zde empatie, ale také objektivita. Musíte být schopni porozumět problémům a potřebám jiných lidí, aniž byste sami sebe simulovali; být schopen "vidět jejich očima, aniž by to o sobě dělal".

02. Při navrhování uživatelského rozhraní používejte textovou hierarchii

Pokud jde o prvky samotného návrhu uživatelského rozhraní, hierarchie textu je jedním z nejdůležitějších vizuálních prvků, které je třeba vzít v úvahu. To platí pro návrh uživatelského rozhraní v jakémkoli formátu. Od raného věku, přes čtení novinových titulků a útržků, názvů kapitol knih a v každém médiu, které zahrnuje text, se lidé učí, jak používat váhu připisovanou textu k tomu, aby je vedla čtení.

Na nejzákladnější úrovni se musíte ujistit, že důležité informace jsou největší a že to je to, co čtenáře zaujme jako první. Kopie těla poskytuje detaily a prostředky, jako jsou okraje a cákance, lze použít ke zvýraznění dalších důležitých detailů.

„Jde o to, abyste se ujistili, že dostáváte ty správné informace pro každého,“ říká Jo Gulliver, umělecký ředitel skupiny událostí ve společnosti Future. „Musíte přemýšlet o formátu stránky, na které tyto informace dostáváte, ale principy jsou vždy stejné: pohotové, poutavé titulky, které někoho přitahují, vysvětlují další informace v řemínku a poté se v kopii těla dostanou do velkých detailů pomocí portrétů, otisků k vytlačení informace."

03. Použijte správné ikony

Správné nastavení ikon je zajímavou výzvou při navrhování uživatelského rozhraní. Ikony v uživatelském rozhraní potřebují jednoduše sdělovat myšlenku, akci nebo aktivitu. Ikonu lze zjednodušit a abstrahovat, ale nemůže být tak abstraktní, aby se lidé snažili pochopit, co to je – musí být intuitivní. Ikona se samozřejmě může stát něčím víc: dokonce i symbolem, se kterým se lidé spojují, aby se dostali do zážitku, jako je logo. I když může být ikona uživatelům zpočátku cizí, používáním se s ní seznámí

„Je to tak mocné, že ikona může nahradit obrovský blok obsahu,“ říká Fiona Yang. „Umí něco tak snadno rozpoznat a zjednodušit celou stránku. Výběr správné ikony je velmi, velmi důležitý a můžete mít knihovnu tisíců ikon, ale výběr té špatné by mohl znamená, že někdo neví, jak přejít na konkrétní část stránky, aby získal pomoc nebo, víte, nebo aby udělal něco, co potřebuje dělat."

John Bricker, hlavní a kreativní ředitel společnosti Gensler, poznamenává, že mnoho návrhářů uživatelského rozhraní vytvoří celé knihovny ikon, které budou studovat a z nichž čerpat. Výběr správných ikon často znamená snahu zapadnout do systému nebo ještě širšího společenského vizuálního jazyka a o přejímání konvencí, které jsou lidem důvěrně známé, mnohem více, než je možná pokus o odlišení trendy. Ikony se ale mění a vyvíjejí. Například symboly pro toalety musí nyní odpovídat za více rozmazané reprezentace pohlaví způsobem, který se zdá správný.

David Owen Morgan, senior produktový designér ve Spotify, říká: „Existuje jazyk obrázků a může být mnohem silnější než textový jazyk. Znáte klišé o tom, že obrázek vydá za tisíc slov. To je pravda a naše rozpoznávání předmětů a úkolů je z velké části proto, že jsme již viděli něco, co je nám známé."

04. Barvy vybírejte s rozmyslem

Kromě textu a ikonografie může barva také hrát velmi důležitou roli při vedení uživatelů uživatelským rozhraním. Daphne Lin, senior produktová designérka ve Spotify, říká: „Kontrast je něco, co byste měli používat velmi promyšleně a střídmě. Hodně na sebe upozorní, pokud navrhnete předmět s vysokým kontrastem. A to je důvod, proč si obvykle vyhrazuji vysoký kontrast pro svá akční tlačítka na rozhraní."

Principem převzatým z interiérového designu je vybrat tři barvy, ale ujistěte se, že základní barva (něco neutrální) je 60% až 80% stránky. Dvě další barvy lze použít k upoutání pozornosti na věci, na kterých záleží. Existují zde pravidla a pokyny, aby nedošlo k zmatení lidí příliš složitou záležitostí. Pokud tedy například máte tlačítko výzvy k akci a sekundární výzvu k akci, nebudete mít stejnou barvu. Budete chtít použít svou sekundární barvu a zároveň zajistit, aby tlačítko nevypadalo, že je deaktivováno.

Barva však může být problémem pro dostupnost. I když je tedy barva důležitá, může být nejlepší nechat ji na pozdější fázi návrhu. Yuchen Zhang obhajuje navrhování nejprve ve stupních šedi. "Mnoho lidí se spoléhá na barvy při rozlišování významu řekněme dvou různých tlačítek nebo odkazu od běžného textu," říká. „Jako designér, který má červenou a zelenou barvoslepou, jsem zjistil, že jedna věc, která je v mé práci opravdu, opravdu užitečná, je: Obvykle pracuji co nejpodrobněji na finální verzi drátěných modelů pro můj návrh aplikace nebo webový design.“

Navrhování uživatelského rozhraní zpočátku v černobílé a šedé barvě vám umožní použít kontrast tonality k vytvoření vizuální hierarchie pro navigaci. "Myslím, že někdy, když si dáme omezené množství nástrojů, ve skutečnosti vytvoříme dostupnější design," říká Zhang.

05. Zaměřte se na univerzální design

Tím se dostáváme ke konceptu univerzálního designu. Je důležité si uvědomit, že možná navrhujete uživatelské rozhraní pro uživatele z různých prostředí a různého věku. Kultura, rasa jsou důležité v designu uživatelského dojmu a často to znamená upravit strategii výzkumu.

Navrhování pro různé věkové kategorie znamená mimo jiné zohlednění zrakové ostrosti (jaká je pohodlná velikost písma a úroveň kontrastu pro 25letého, není totéž pro 70letého). Je také snadné být kulturně zaujatý v designu uživatelského rozhraní. Jacquelyn Iyamah, zakladatelka Black UX Collective, poznamenává, že ikonografie může být odcizující, například genderové ikony pro lidi, kteří se neztotožňují s jedním pohlavím nebo jsou genderově neutrální. Mezitím se hlasem aktivované uživatelské rozhraní může potýkat s různými akcenty.

Univerzální design je soubor postupů a hodnot, které mají zajistit, aby designéři mysleli na vše odlišné typy lidí, kteří by se mohli zapojit do produktu, ať už jde o hlas, velikost textu, barvy, obrázky nebo jiné Prvky. „Nemůžete se jednoduše stýkat s lidmi, kteří jsou ve společnosti považováni za výchozí,“ říká Iyamah. "Musíte mluvit s ostatními lidmi a pochopit, jakým výzvám čelí, abyste vytvořili produkty, které jsou skutečně univerzální."

Říká, že návrháři uživatelského rozhraní se musí dostat do myšlení intersekčních identit. „Takže pokud navrhujete produkt pro duševní zdraví pro barevné komunity, který by se spojil s barevnými terapeuty, možná lidé, kteří anglicky není jejich mateřským jazykem, aby si jej mohli vybrat ve formě, aby se spojili s terapeutem, který by skutečně mluvil s jejich potřebami. Všechny tyto věci je skutečně potřeba implementovat do wireframingu a maket a do procesu vizuálního návrhu."

Luke Cooley, výzkumník UX v týmu Cloud AI společnosti Google, vybízí studenty, aby prozkoumali antropologii, sociologii a ekonomii od makro až po mikro, aby získali informace pro svou práci. "Neexistuje žádná zkratka," říká. „Chce to neustálé investice do vašich uživatelů, ale také pochopení toho, jak se lidé chovají v různých zemích, jejich vnímání, jejich postoje. A ne vše je přímo spojeno s výzkumem a designem UX. Ne vždy to najdete v knihách o designu nebo výzkumných knihách."

06. Vytvořte zpětnou vazbu a příležitosti ke shromažďování dat ve svém uživatelském rozhraní

Doufejme, že své uživatelské rozhraní otestujete, než bude spuštěno (viz naše tipy pro UX výzkum a testování), ale můžete také využít příležitosti pro další zpětnou vazbu při navrhování uživatelského rozhraní. To může být tak jednoduché, jako vyskakovací okno se zprávou ve stylu „jak byste ohodnotili svůj dnešní zážitek?“ s hodnocením od jedné do 10. Další možností jsou spouštěče pro ukončení – uživatelské rozhraní například detekuje, že vaše myš míří na vyhledávací lištu, aby opustila web, a v tuto chvíli zobrazí zprávu.

Jsou to také spouštěče posouvání, které se objevují poté, co posouvání naznačuje, že uživatel má o stránku nějaký zájem, a spouštěče opuštění košíku. Existuje také mnoho příležitostí ke sběru dat. „Mít prvky rozhraní na stránce nebo alespoň jakékoli akce na stránce, na které lze kliknout, jsou oblasti, kde můžete shromažďovat data,“ říká Lin. „Cokoli, co uživatel dělá, můžete shromažďovat informace. Srdce na Spotify je událost, kterou zachycujeme. Pochopení toho, kdy lidé kliknou na srdce a proč na něj kliknou, to všechno jsou datové body, které pak můžeme zachytit a vytvořit lepší produkty.“

07. Zabudujte branding do vašeho designu uživatelského rozhraní

To je třeba zvážit, pokud značka, pro kterou navrhujete, již existuje mimo uživatelské rozhraní, které vytváříte, což často bude. Můžete vytvořit nejkrásnější a nejpoužitelnější uživatelské rozhraní na světě, ale pokud nebude vypadat a cítit se jako součást zavedená značka, vaše společnost nebo váš klient ztrácí příležitost posílit svou identitu a uživatelé ji dokonce mohou mít zmatený. A branding není jen vizuální logo, barvy a fonty, ale je také přítomen v tónu uživatelského rozhraní.

„Značka není nutně jen vizuál,“ říká autor AJ Camara. „Je to opravdu jako celý pocit, který máte, když jednáte s firmou. Když navrhujete web, aplikaci nebo produkt, často nevědomě vytváříte něco, co je jako expanze této značky. Přitom musíte mít na paměti, že značka zastupuje, jak chce být tato značka zastoupena a jakým způsobem chce tato značka komunikovat se svými uživateli.“

To znamená zachytit osobnost značky, když navrhujete uživatelské rozhraní, ať už je tiché a elegantní, minimální nebo hlasité a bouřlivé. Gulliver říká: „Může to být opravdu nezapomenutelný pásek, vaše použití barev, vaše použití písma, velikost písma. Všechny tyto designové prvky považujete za samostatné věci, ale musíte také zvážit, jak se vzájemně ovlivňují."

08. Zajistěte, aby oznámení vašeho uživatelského rozhraní měla smysl

Pokyny pro lidské rozhraní společnosti Apple jsou dobrým místem, kde začít při zvažování oznámení. Mají soubor norem, které stanoví, že oznámení musí být smysluplné, informativní a nesmí se opakovat. To v podstatě znamená, že oznámení, které nemá skutečný význam nebo smysluplné informace pro uživatele, by se nemělo odesílat. A oznámení by se nemělo posílat více než jednou, což je také něco, na co mnoho návrhářů uživatelského rozhraní zapomíná (nebo ignoruje).

Trine Falbe navrhuje, že místo toho, abychom se soustředili pouze na typ oznámení, případ použití a načasování, je také užitečné zamyslet se nad uživatelskou hodnotou oznámení. "To je sloupec v tomto rámci, který lidé obvykle nezahrnují," říká, "ale pokud se přinutíte nebo si připomenete, abyste o tom přemýšleli uživatelská hodnota pro každé z oznámení, které skutečně chcete, aby váš systém posílal, vám pomůže vytvořit pouze smysluplné oznámení."

09. Nezapomeňte, že zvuk může být součástí návrhu uživatelského rozhraní

Uživatelské rozhraní je často chápáno jako vizuální a možná hmatové, ale svou roli může hrát i zvuk. Zvukový design je zajímavým prostorem pro design a design uživatelského zážitku. Jsme zvyklí přemýšlet o obrazovkách a zkušenostech, které vyžadují, aby uživatel interagoval s tlačítky a poli. Ale ne všechny produkty a služby potřebují obrazovku.

„Podívejte se na centrum Alexas nebo Google,“ říká Vee Rogacheva, senior produktová designérka společnosti Future. „Buď je obrazovka velmi malá, nebo žádná. Musíte komunikovat se zvukem. A není to jen interakce, kdy žádáte zařízení, aby něco udělalo. To vám říká zařízení."

Dalším možným využitím zvuku při navrhování uživatelského rozhraní je poskytnutí zpětné vazby, například o tom, zda uživatel používá zařízení správně nebo udělal chybu. K tomu lze využít i vibrace. "To vše jsou prvky zážitku, které jsou vědomě navrženy tak, aby motivovaly, povzbuzovaly a nakonec vyřešily problém nebo dokonce dva," říká Rogacheva.

Zjistěte více o tom, jak navrhnout uživatelské rozhraní

To jsou jen některé z důležitých prvků, které je třeba vzít v úvahu při navrhování uživatelského rozhraní. Chcete-li se dozvědět více o UX i uživatelském rozhraní, nenechte si ujít naše Kurz UX Design Foundations.

Seznamte se s odbornými přispěvateli zjistit více o lidech, od kterých se můžete učit v programu dálkového studia. A další podrobnosti viz šest důvodů, proč byste se měli přihlásit pro kurz.

Přečtěte si více:

• The UX zdroje, které byste měli používat
• 21 Tipy pro návrh uživatelského rozhraní, které potřebujete znát
• 5 časté chyby UX a jak se jim vyhnout