3. diel - UX: Návrhový a prototypovací softvér

V minulej lekcii, Kroky pre vytvorenie dobrého UX , sme si predstavili súhrn, čo všetko musíme urobiť pre to, aby bol náš projekt po stránke UX vyladený. Zamerali sme sa na základné kroky práce UX designera od analýz, cez tvorbu, až po testovanie.

V tejto lekcii si predstavíme najznámejšie a najpoužívanejšie prototypovací nástroje, ktoré môžeme ako UX dizajnéri využiť.

Prečo nie papier

V dnešnej dobe moderného dizajnu už stará a dobrá ceruzka s papierom nestačí. Dizajn sa posúva stále ďalej a dizajnéri softvéru a aplikácií musia držať krok. Požiadavky zákazníkov nadobúdajú na zložitosti a komplexnosti. Pred samotnou tvorbou softvéru chce užívateľ často vidieť funkčný prototyp, na ktorom si môže navrhnutý softvér vyskúšať. Túto funkčnosť nám papier neponúka a preto uusi hľadať alternatívu. Rovnako ako v každej inej práci, tak aj v UX dizajnu je dôležité mať kvalitné a spoľahlivé nástroje, ktoré poznáme a vieme s nimi pracovať spoľahlivo a efektívne. Máme šťastie, pretože existuje veľa skvelých nástrojov pre tvorbu wireframu, mockup a prototypov. Či už tvoríme akúkoľvek aplikáciu alebo navrhujeme ktorýkoľvek softvér, tak pre nás existujú skvelé nástroje.

Ako sme sa už dozvedeli z predchádzajúcej lekcie Spolupráca s užívateľom a pomôcky UX dizajnéra, workflow tvorby UX návrhu aplikácie sa skladá z wireframu, mockup a výsledného prototypu. V tejto lekcii si predstavíme tri najlepšie nástroje, ktoré nám v procese tvorby uľahčí život.

Adobe XD

Asi najznámejším zástupcom na poli prototypovacích nástrojov je Adobe XD. Ako už z názvu vyplýva, tak sa jedná o softvér vyvíjaný spoločnosťou Adobe, softvérovým gigantom predovšetkým známym medzi kreatívci a ľuďmi zaoberajúcimi sa multimediálne tvorbou.

Adobe XD ponúka skvelé prostredie pre tvorbu digitálnych projektov. Je súčasťou Adobe Creative Cloud, avšak prostredie aplikácie XD sa nepodobá typickému Adobe vzhľadu, na ktorý sme zvyknutí napríklad z Photoshopu, alebo Illustratoru. Preto môže mať dizajnér zvyknutý pracovať v nástrojoch od spoločnosti Adobe problém s orientáciou v prostredí programu.

Pomocou tohto nástroja sme schopní pokryť celý proces návrhu používateľského rozhrania od wireframu, cez mockup, až po plne funkčný prototyp. Každý z týchto korkov je medzi sebou prepojený a môžeme ich kedykoľvek interaktívne predstaviť užívateľovi (zákazníkovi).

Pokiaľ navrhujeme softvér v tíme, tak môže byť koordinácia s ostatnými kolegami niekedy zložitá. Preto nám Adobe XD ponúka skvelú platformu pre tímovú tvorbu. Zmeny ostatných kolegov môžeme pozorovať v reálnom čase.

Ďalšou veľkou výhodou aplikácie Adobe XD je jeho podpora a aktualizácie. Tento softvér je stále vyvíjaný a pribúdajú v ňom nové funkcie ako napríklad automatické animácie. Pre osobné použitie je Adobe XD dostupný úplne zadarmo a môžete si o ňom prečítať viac na oficiálnom webe Adobe XD.

Figma

Figma je nástroj pre tvorbu používateľského rozhrania, ktorý ponúka spoluprácu viacerých designérov na jednom projekte v reálnom čase. Oproti Adobe XD je Figma dostupná priamo z prehliadača. To znamená, že nie je potrebné nič sťahovať ani inštalovať. Stačí sa len zaregistrovať a môžeme sa hneď pustiť do práce. To je veľkou výhodou pre návrhárov, ktorí často cestujú alebo často mení operačné systémy či počítača. Všetky zmeny sa ukladajú automaticky a projekty sú dostupné z ktoréhokoľvek zariadenia.

Figma je dostupná v platenej verzii tak aj verziu zadarmo, ktorá má však obmedzené možnosti. Verzia zdarma je úplne dostačujúce pre bežné projekty, ktoré nemajú obrovský rozsah. Užívateľské rozhranie sa podobá ostatným aplikáciám zo svojho odboru. Aplikácia ponúka tvorbu wireframu, mockup aj funkčných prototypov, ktoré môžeme prezentovať zákazníkovi. Figma dokonca ponúka aj animácie, takže naše dielo môžeme uviesť do pohybu pomocou niekoľkých kliknutí.

Práca v aplikácii Figma je jednoduchá a pochopiteľná. Figma ponúka mnoho návodov a videí, ktoré sú dostupné priamo z aplikácie. Vzhľadom k svojej jednoduchosti je Figma skvelým nástrojom pre začínajúcich i pokročilých návrhára. Aplikáciu si môžete vyskúšať na oficiálnych stránkach.

Invision Studio

Invision Studio je z vyššie spomínaných nástrojov ten najpokročilejšie. Nástroj pokrýva všetku potrebu dizajnéra a cielia byť jediným nástrojom, ktorý návrhár potrebuje. Aplikácia ponúka obrovské množstvo nástrojov, vďaka ktorým je navrhovanie a prototypovania v aplikácii veľmi rýchly a príjemný proces. Užívateľské rozhranie sa podobá ostatným aplikáciám Invision ako napríklad Sketch. Hlavná sila Invision Štúdiá spočíva v prototypovania, špeciálne potom, pokiaľ ide o animácie.

Invision Studio ponúka tzv. Rapid Prototyping, vďaka ktorému designer dokáže rýchlo vytvoriť komplexný prototypy vrátane animácií a prechodov tak, aby finálny prototyp pôsobil ako už finálny aplikácie. Stačí vytvoriť UI pred začiatkom a na konci animácie a Invision Studio vytvorí zvyšok automaticky. Okrem toho sa tieto animácie a prechody dajú prepojiť s konkrétnymi gestami, ktoré potom môže užívateľ používať.

Keď je všetko hotové, stačí potom výsledok vyexportovať a pozvať zákazníka k spolupráci. Zákazník bude môcť preskúmať prototyp na zvolenej platforme a môže vkladať komentáre priamo do návrhu. Nie je potrebné vytvárať rôzne návrhy pre rôzne veľkosti obrazoviek, Invision Studio prispôsobí návrh pre konkrétnu obrazovku automaticky. O nástroji sa môžete dozvedieť viac na oficiálnych stránkach.

Ktorý zvoliť

Je dobré zvoliť si jednu platformu na ktorej budeme ako dizajnéri pracovať a ak nám vyhovuje, tak na ňu aj zostať. Pred voľbou softvéru je dôležité si rozmyslieť, aký projekt budeme tvoriť, aký je jeho rozsah a aké požiadavky na neho kladie zákazník. Pre rozsahom jednoduchšie až stredne zložité návrhy je tu Figma a Adobe XD. Figma je oproti Adobe XD dostupná z prehliadača, vďaka čomu sa hodí predovšetkým ľuďom, ktorí často striedajú počítača. Ak plánujeme pracovať na rozsiahlom a komplexnom projekte, potom je tu Invision Studio, ktoré ponúka Rapid Prototyping, vďaka ktorému dokážeme náš prototyp prebudiť k životu rýchlo a jednoducho.

V nasledujúcej lekcii, UX: Ako na tlačidlá , sa budeme zaoberať tlačidlami. Ukážeme si, ako správne vytvárať a používať tlačidlá tak, aby bola aplikácia užívateľsky prívetivá.