Lekce 15 - Návrh uživatelského rozhraní v UX
V předchozím kvízu, Kvíz - Konstrukční systémy v UX, jsme si ověřili nabyté zkušenosti z předchozích lekcí.
V této lekci si ukážeme, jaké kroky a metody práce musí UX designér použít při návrhu uživatelského rozhraní. Od skicování, přes wireframe až po prototyp a mockup.
Návrh uživatelského rozhraní
Pokud již máme představu o našem projektu a známe pravidla informační architektury, je čas přistoupit k tvorbě návrhu. Jaké jsou všechny náležité kroky, a co vše UX designér při svých návrzích používá, si nyní popíšeme.
Skicování
Papír a tužka jsou základ a první krok. Není třeba žádných znalostí kreslení. Kdo umí rovnou čáru a nepřetahuje, zvládne nakreslit jakýkoliv diagram v první fázi návrhu. Tímto způsobem si vytváříme takzvané makety.
Skicování je asi ten nejjednodušší způsob, jak si můžeme vizualizovat začátek svého projektu. Jde o rychlé zachycení myšlenek a jejich variant. Není důležitá kvalita provedení, ale v tomto kroku jde spíše o kvantitu nápadů, se kterými pak dále pracujeme, třídíme je a rozvíjíme.
Skicováním můžeme také navrhnout základní sitemapu webu, tedy strukturu, provázání a rozřazení. O možnostech tvorby struktury webu jsme detailně mluvili v lekci Informační architektura v UX.
Pro skicování využíváme pár jednoduchých tvarů jako čára, kruh, elipsa, čtverec, obdélník a případně trojúhelník či vlnovka. Víc nepotřebujeme. Na počátku, tedy do středu papíru zachytíme myšlenku či definujeme problém, který chceme řešit. Od něj následně vedeme v rychlém sledu další čáry k pojmům, které větví naše nápady. V této fázi není důležité nad vším složitě přemýšlet, ale spíše rychle sázet jeden nápad za druhým. Pokračujeme tak dlouho, dokud nám nedojde inspirace.
Co je při skicování důležité
K důležitým věcem při skicování řadíme:
- Zachytit to nejdůležitější, ne nutně všechny detaily.
- Zapsat všechny myšlenky, co přijdou, jakýmkoliv způsobem.
- Negumovat a neškrtat – i když se něco později zdá jako neužitečné, může nás to posunout někam jinam.
- Skicu si na závěr popsat a archivovat – mohou být studnicí nápadů pro jiné další projekty.
- Mít u sebe stále něco, na co si myšlenky můžeme zachytit, ty nejlepší většinou chodí tehdy, když to nejméně čekáme a nejsme zrovna u počítače.
Nástroje pro skicování
Ke skicování můžeme použít různé nástroje, například:
Wireframe
Wireframe je velmi zjednodušený model, který se blíží naší skice v prvním kroku. Někdy se nazývá jako drátěný model. Jde o zhmotnění vize webu či aplikace a naznačuje jeho strukturu a rozložení. Nyní se ale wireframe často vnímá spíše jako velmi podrobný vizuální prototyp. Vidíme, kde přesně jsou jaké prvky webu a měli bychom odhadnout i funkci, která různým widgetům patří. Wireframe ale neřeší konkrétní vzhled prvků a grafiku všeobecně.
Práce UX designéra je na wireframu ve tvorbě onoho modelu – černobílé strukturované kostry. Následně by tato kostra měla putovat do rukou UI designera, který rozhodne o tom, jak má například vypadat dané tlačítko, nebo kde bude využít konkrétní grafický prvek.
Přínos wireframu v procesu tvorby je v ověření souladu představ jednotlivých zainteresovaných osob. Designér tímto krokem srozumitelně vizualizuje svou tvorbu zadavateli a zjistí, zda odráží jeho představy a nadále mohou wireframe vzájemně ladit. Díky tomuto přístupu je možné včas zachytit nedostatky či neporozumění dříve, než bude návrhu věnovat svůj čas programátor. Šetří tedy čas a je vodítkem pro práci dalších osob.
Jak vytvořit kvalitní wireframe?
Wireframe by měl vycházet ze spojení vědomostí z analýzy projektu z hlediska marketingu i obchodu, ze znalostí copywritera a obsahové strategie, z vědomostí UX designera i UI designéra a v neposlední řadě samozřejmě ze zadání klienta.
Wireframe tedy není jen o rozložení jednotlivých prvků. Musí reflektovat také celou strategii projektu a jeho cíle, cílit na uživatelskou přívětivost a brát v potaz i to, jaké grafické prvky a délky textů se kde mají použít, jaká šíře informací je lahodící oku i mozku s ohledem na produktu, službu či cíl.
Ve wireframu využíváme jednoduché zobrazení pro různé prvky, prostor pro obrázek může symbolizovat prázdný čtverec, tlačítko například jen zaoblený malý obdélník. Pro představu textu se využívá Lorem Ipsum.
Lorem Ipsum je pseudo latinský nereálný jazyk, který je využívám pro představu textu v grafických návrzích. Svým rozložením má na první pohled připomínat běžný jazyk ve větách. Příklad: Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris dolor felis, sagittis at, luctus sed, aliquam non, tellus. Nulla accumsan, elit sit amet varius semper, nulla mauris mollis quam, tempor suscipit diam nulla vel leo. Pellentesque ipsum. Fusce suscipit libero eget elit.
Nástroje pro tvorbu Wireframe
Jako u skicování, může nám dobře posloužit i pouhá tužka a papír. Je zde však již třeba jistá zručnost, aby výsledku bylo dobře rozumět a byl čitelný. Proto je mnohdy snazší připravit si wireframe v nějakém programu. Můžeme zkusit například:
Prototypování
Tvorba prototypu je oproti předchozím krokům již velmi detailní práce. Prototyp již obsahuje grafické prvky a konkrétní obsah. Nemá nikde žádný prázdný text typu Lorem Ipsum a místo obrázků vložené prázdné čtverce. Většinou však v prototypu chybí propracovaná vizuální stránka, finální obrázky, atd. Jedná se o konečný náhled projektu, který prochází schvalováním klienta i dalších zúčastněných osob a může být použít pro první uživatelské testování. Jde o přesný podklad pro programátory.
Ideální formou prototypu pro prezentaci a testování jsou interaktivní prototypy. Tedy prototypy, které fungují na prokliky a dovolují procházet návrh do hloubky různých kategorií. Mají tedy funkční tlačítka, linky a další funkce jako přidávání položek do košíku, mazání, vyplňování políček atd.
Tipy na dobré prototypování
K tipům na dobré prototypování patří:
- Navrhujeme ve skutečných rozměrech a poměrech.
- Nepoužíváme barvy a černé pozadí, nejlépe využíváme šedou barvu v různé intenzitě.
- Používáme jasné konkrétní nadpisy.
- Prezentujeme reálná data, produkty, obrázky.
- Využíváme konkrétní tlačítka a placeholdery.
- Používáme konkrétní popisky.
- K prototypu připojujeme i vlastní poznámkový aparát, který o prototypu více hovoří a rozvádí naše myšlenky.
Placeholder je výraz pocházející z HTML jazyka. Jde o konkrétní text, který slouží k ukázce, jakou hodnotu zadat do formulářového pole a je před zadán ve formulářovém poli. Tímto atributem můžeme uživateli poradit, co má do textového pole zadat. Jednotlivá políčka tak nemusí mít již svá označení před políčkem.
Nástroje pro prototypování
V prototypování již není moc místa pro papír a tužku. Zde již potřebujeme pracovat s kvalitními programy. Využít můžeme například:
- Axure RP
- Justinmind
- Indigo Design
- Adobe XD
- Figma
- Balsamiq
- Invision
- Miro
- Penpot
- UXPin
- Marvell App
- Proto.io
Představení některých nástrojů můžete najít v článku Návrhový a prototypovací software..
Finální prezentace
Pro finální prezentaci, kdy chceme představit, jak doopravdy nakonec náš projekt bude vypadat na počítači či mobilních zařízeních a máme již tak přesnou představu o rozložení (wireframe), funkčnosti a obsahu (prototyp), ale i dotažený grafický vizuál, je ideální využít mockupu. Jde o prezentaci finálního vzhledu naší práce v náhledech různých objektů v reálné fotografii. Využívá se pro lepší představu, jak bude náš finální projekt vypadat tam, kde má být využíván.
Mockup nástroje
Na tvorbu můžeme využít například tyto on-line nástroje:
Všechny tyto kroky, které jsme si dnes představili, nás povedou k ideálnímu návrhu uživatelského prostředí. Žádný z kroků nesmíme vynechat, zanedbat nebo podcenit. Pokud jsme tuto práci odvedli kvalitně, uživatelské prostředí by mělo vést k příjemnému uživatelskému prožitku, který je v UX naším hlavním cílem.
V příští lekci, Jak se tvoří web v UX, se dozvíme, co vše se skrývá za tvorbou webu a čemu je nutné rozumět. Popíšeme si základní pojmy a úkony při programování webové stránky.
