Lekce 21 - UX: Návrhový a prototypovací software

V předchozím kvízu, Kvíz - Testování a budování důvěry uživatele v UX, jsme si ověřili nabyté zkušenosti z předchozích lekcí.

V této lekci si představíme nejznámější a nejpoužívanější prototypovací nástroje, které můžeme jako UX designeři využít.

Proč ne papír

V dnešní době moderního designu již stará a dobrá tužka s papírem nestačí. Design se posouvá stále dále a designéři softwaru a aplikací musí držet krok. Požadavky zákazníků nabývají na složitosti a komplexnosti. Před samotnou tvorbou softwaru chce uživatel často vidět funkční prototyp, na kterém si může navržený software vyzkoušet. Tuto funkčnost nám papír nenabízí a proto musíme hledat alternativu. Stejně jako v každé jiné práci, tak i v UX designu je důležité mít kvalitní a spolehlivé nástroje, které známe a umíme s nimi pracovat spolehlivě a efektivně. Máme štěstí, protože existuje mnoho skvělých nástrojů pro tvorbu wireframů, mockupů a prototypů. Ať už tvoříme jakoukoli aplikaci nebo navrhujeme kterýkoli software, tak pro nás existují skvělé nástroje.

Jak jsme se již dozvěděli z předchozí lekce Spolupráce s uživatelem a pomůcky UX designera, workflow tvorby UX návrhu aplikace se skládá z wireframu, mockupu a výsledného prototypu. V této lekci si představíme tři nejlepší nástroje, které nám v procesu tvorby usnadní život.

Adobe XD

Asi nejznámějším zástupcem na poli prototypovacích nástrojů je Adobe XD. Jak již z názvu vyplývá, tak se jedná o software vyvíjený společností Adobe, softwarovým gigantem především známým mezi kreativci a lidmi zabývajícími se multimediální tvorbou.

Adobe XD nabízí skvělé prostředí pro tvorbu digitálních projektů. Je součástí Adobe Creative Cloud, avšak prostředí aplikace XD se nepodobá typickému Adobe vzhledu, na který jsme zvyklí například z Photoshopu, nebo Illustratoru. Proto může mít designér zvyklý pracovat v nástrojích od společnosti Adobe problém s orientací v prostředí programu.

Pomocí tohoto nástroje jsme schopni pokrýt celý proces návrhu uživatelského rozhraní od wireframu, přes mockup, až po plně funkční prototyp. Každý z těchto korků je mezi sebou propojený a můžeme je kdykoli interaktivně představit uživateli (zákazníkovi).

Pokud navrhujeme software v týmu, tak může být koordinace s ostatními kolegy někdy složitá. Proto nám Adobe XD nabízí skvělou platformu pro týmovou tvorbu. Změny ostatních kolegů můžeme pozorovat v reálném čase.

Další velkou výhodou aplikace Adobe XD je jeho podpora a aktualizace. Tento software je stále vyvíjen a přibývají v něm nové funkce jako například automatické animace. Pro osobní užití je Adobe XD dostupný zcela zdarma a můžete si o něm přečíst více na oficiálním webu Adobe XD .

Figma

Figma je nástroj pro tvorbu uživatelského rozhraní, který nabízí spolupráci více designerů na jednom projektu v reálném čase. Oproti Adobe XD je Figma dostupná přímo z prohlížeče. To znamená, že není třeba nic stahovat ani instalovat. Stačí se jen zaregistrovat a můžeme se hned pustit do práce. To je velkou výhodou pro návrháře, kteří často cestují nebo často mění operační systémy či počítače. Veškeré změny se ukládají automaticky a projekty jsou dostupné z kteréhokoli zařízení.

Figma je dostupná v placené verzi tak i verzi zdarma, která má však omezené možnosti. Verze zdarma je naprosto dostačující pro běžné projekty, které nemají obrovský rozsah. Uživatelské rozhraní se podobá ostatním aplikacím ze svého oboru. Aplikace nabízí tvorbu wireframů, mockupů i funkčních prototypů, které můžeme prezentovat zákazníkovi. Figma dokonce nabízí i animace, takže naše dílo můžeme uvést do pohybu pomocí několika kliknutí.

Práce v aplikaci Figma je jednoduchá a pochopitelná. Figma nabízí mnoho návodů a videí, které jsou dostupné přímo z aplikace. Vzhledem ke své jednoduchosti je Figma skvělým nástrojem pro začínající i pokročilé návrháře. Aplikaci si můžete vyzkoušet na oficiálních stránkách.

InVision Studio

InVision Studio je z výše zmíněných nástrojů ten nejpokročilejší. Nástroj pokrývá veškerou potřebu designera a cílí být jediným nástrojem, který návrhář potřebuje. Aplikace nabízí obrovské množství nástrojů, díky kterým je navrhování a prototypování v aplikaci velmi rychlý a příjemný proces. Uživatelské rozhraní se podobá ostatním aplikacím InVision jako například Sketch. Hlavní síla InVision Studia spočívá v prototypování, speciálně pak, pokud jde o animace.

InVision Studio nabízí tzv. Rapid Prototyping, díky kterému designer dokáže rychle vytvořit komplexní prototypy včetně animací a přechodů tak, aby finální prototyp působil jako již finální aplikace. Stačí vytvořit UI před začátkem a na konci animace a InVision Studio vytvoří zbytek automaticky. Krom toho se tyto animace a přechody dají propojit s konkrétními gesty, které pak může uživatel používat.

Když je vše hotovo, stačí pak výsledek vyexportovat a pozvat zákazníka ke spolupráci. Zákazník bude moci prozkoumat prototyp na zvolené platformě a může vkládat komentáře přímo do návrhu. Není třeba vytvářet různé návrhy pro různé velikosti obrazovek, InVision Studio přizpůsobí návrh pro konkrétní obrazovku automaticky. O nástroji se můžete dozvědět více na oficiálních stránkách.

Který zvolit

Je dobré zvolit si jednu platformu na které budeme jako designeři pracovat a pokud nám vyhovuje, tak na ni i zůstat. Před volbou softwaru je důležité si rozmyslet, jaký projekt budeme tvořit, jaký je jeho rozsah a jaké požadavky na něj klade zákazník. Pro rozsahem jednodušší až středně složité návrhy je zde Figma a Adobe XD. Figma je oproti Adobe XD dostupná z prohlížeče, díky čemu se hodí především lidem, kteří často střídají počítače. Pokud plánujeme pracovat na rozsáhlém a komplexním projektu, pak je tady InVision Studio, které nabízí Rapid Prototyping, díky kterému dokážeme náš prototyp probudit k životu rychle a jednoduše.

V následující lekci, UX: Jak na tlačítka, se budeme zabývat tlačítky. Ukážeme si, jak správně vytvářet a používat tlačítka tak, aby byla aplikace uživatelsky přívětivá.