Digitální prototypování
6 nejpoužívanějších nástrojů
Prototypování je klíčový krok pro ověření úspěšnosti služby. Umožňuje nám odhalit slabá místa ještě před tím, než do produktu nebo služby vložíme mnoho času, úsilí a peněz.[1] Zpětná vazba na prototyp už v počátečním stádiu a následné upravování je tedy mnohem efektivnější proces designu služeb. Jak říká citát známý především v designové komunitě:[2]
„Jestliže obrázek vydá za 1000 slov, tak prototyp vydá za 1000 schůzek.“
- IDEO
Prototypování má mnoho podob. Nejjednodušší mohou vzniknout s pomocí papíru a tužky nebo také z lepenky v podobě 3D modelů.
Existují ale i nástroje pro digitální prototypování. Výsledné prototypy jsou tak sofistikovanější, rychleji vytvořené a lépe se sdílí v online prostředí. Většina nástrojů má v sobě zabudovanou také knihovnu prvků, která práci ještě více zefektivňuje.[3]
Hlavní předností digitálního prototypování je také jeho interaktivita. Umožňuje ztvárnit i jinak abstraktní služby, které jsou pak lépe viditelné.[4] Díky tomu jsou vhodné pro předvádění průchodu službou klientům nebo také pro uživatelské testování.
Pro vytvoření digitálního prototypu není nutná znalost kódování. Existuje mnoho nástrojů, které umožňují vytvářet prototypy na různých stupních rozlišení. Jsou tak vhodné nejen pro zkušené designéry, ale i pro začátečníky. Je však důležité vybrat si ten správný nástroj. Neexistuje totiž jednoznačná odpověď na otázku, který prototypovací nástroj je nejlepší. Záleží na mnoha faktorech ovlivňujících volbu vhodného nástroje — adaptabilita, možnosti sdílení, využití v projektu, snadnost použití a v neposlední řadě i cena.[5]
Zajímavou prezentaci studie používaných nástrojů pro designování nabízí UXTOOLS. Věnují se také nástrojům pro prototypování.
Po definování našich očekávání se tedy můžeme vrhnout do výběru vhodného nástroje. Nyní si představíme 6 nejpoužívanějších digitálních nástrojů podle výsledků studie UXTOOLS.[6]
1. InVision
Tento velmi oblíbený nástroj je vhodný pro rychlé vytváření prototypů aplikací i webů, je tedy vhodný pro iterativní designový proces. Nabízí prostředí pro komunikaci týmu, jeho spolupráci a sdílení zpětné vazby jak od spolupracovníků, tak i od klientů. Mezi další funkce patří i whiteboard na generování a zachycení nových nápadů nebo také Inspiration board pro vizualizaci cílů. Od ostatních nástrojů se liší především právě díky podpoře vzájemné komunikace.
Nabízí zdarma knihovnu ikon, mockupů a nástrojů pro UI (User Interface). Zabývají se ale také i vzděláním v oblasti designu — publikují články s tipy pro začátečníky, knihy, podcasty nebo pořádají workshopy s designery. Nabízí tedy komplexní podporu i pro kompletní nováčky. InVision využívají společnosti jako je Airbnb, Amazon, IBM nebo Netflix.
Základní verze pro jeden projekt je zdarma, dále pak podle počtu projektů a pokročilejších funkcionalit v rozmezí 15–25 dolarů měsíčně. Nástroj je díky svým přidaným funkcím vhodný právě pro práci v týmu.
InVision představlili poměrně nedávno (na konci roku 2017) InVision Sudio. Nástroj je zaměřený na interaktivní screen design, konkrétně na gesta a přechody. Umožňuje tak prototypovat animace screenů na velké úrovni rozlišení. To vše s minimálním úsilím, protože plynule a efektivně přechází z návrhu k prototypu. Rychle si proto získal popularitu mezi designery na celém světě.
2. Sketch
Sketch je nástroj vhodný především pro vizualizaci. Často proto bývá srovnáván s Photoshopem. Je založený na vektorech, takže je design responzivní — přizpůsobí se velikosti každé obrazovky. Umožňuje tedy efektivně navrhovat jak pro web, tak i pro mobilní zařízení zároveň.
Detailně popisuje všechny funkcionality nástroje ve své dokumentaci. Usnadňuje tedy základní orientaci v nástroji všem začátečníkům. Díky vektorovému navrhování však vznikají profesionálně vypadající prototypy. Také kolem sebe vytváří komunitu designérů. Sketch používají firmy Apple, Facebook, Google, Nintendo nebo Porsche.
Nástroj běží pouze na zařízeních s OS X. Zkušební verze je na 30 dní zdarma, dále pak stojí 99 dolarů. Nabízí ale slevy pro studenty a akademické instituce.
3. Principle
Principle je svým rozložením a funkcionalitou velmi podobný nástroji Sketch. Mezi jeho přednosti ale patří především rychlost vytváření prototypů interakcí, animací a multi-screenů, které jsou navíc dynamické a na velké rozlišovací úrovni. Také podporu uživatelů mají na vysoké úrovni. Nabízí řadu tutoriálů, článků a samozřejmě mají také dokumentaci popisující funkce.
Velkou nevýhodou nástroje je ale jeho omezená použitelnost, protože běží pouze na zařízeních s operačním systémem OS X. Také chybí podpora vzájemné komunikace. Využívají ho Apple, Nike, Facebook, Amazon, Starbucks nebo Ideo. Zkušební verze je opět zdarma, dále pak stojí 129 dolarů.
4. JustInMind
JustInMind umožňuje vytvářet webové interakce a gesta v aplikacích. Výsledné prototypy jsou responzivní, takže umožňují jejich testování na všech typech zařízení. Nástroj je díky pokročilejším funkcím na vyšší rozlišovací úrovni vhodný na delší a propracovanější prototypování, vyžaduje však delší čas na plné uchopení nástroje. Nabízí však řadu návodů pro konkrétní prvky a vzdělávací články, takže je přístupný i pro začátečníky.
Hlavní výhodou zmiňované robustnosti jsou velice kvalitní prototypy. Také nabízí možnost pracovat i offline po stažení aplikace. Výstup může být stažený ve formátu HTML, není tedy nutná znalost kódování. Mezi společnosti využívající jejich služby patří Google, Adobe, Verizon, Siemens a Sony. Profesní využití stojí 19 dolarů měsíčně. Pro společnosti má navíc zabudované uživatelské testování a stojí 39 dolarů měsíčně.
5. Adobe XD
Adobe XD je dalším z nástrojů založených na vektorech, takže výsledné prototypy jsou velice responzivní. Podporuje komunikaci mezi členy týmu, ale také i mezi klienty. Velkou výhodou tohoto nástroje je jeho synchronizace s dalšími produkty od Adobe. Import a export jsou tak velice jednoduché.
6. Marvel app
Marvel je aplikace s jednoduchým a intuitivním rozhraním. Umožňuje nahrání obrázků jednotlivých stránek, které se následně mohou propojit. Můžeme pracovat s grafickým návrhem nebo i s pouhým náčrtkem na papíře. Prototyp tedy může vzniknout prakticky z čehokoliv. Poměrně rychle tak můžeme vytvořit prototyp, který je interaktivní a zobrazuje zamýšlenou funkcionalitu — ztvárňujeme prokliky a přechody ilustrující strukturu navrhované aplikace. Nabízí také podporu ve formě blogových příspěvků a případových studií
Základní verze pro jednoho člověka pracujícího na jednom projektu je zdarma. Od více členů týmu a počtu projektů pak cena roste a pohybuje se v rozmezí 15–25 dolarů. Marvel je tak vhodný pro začátečníky, kteří chtějí rychle navrhnout funkční prototyp, ať už pro jednotlivce nebo malé týmy.
V tomto příspěvku jsme se věnovali pouze několika nejznámějším a nejvyužívanějším nástrojům. Přehledné srovnání dalších nástrojů nabízí například Emily Schwarzman z Cooper Profesional Education nebo také Keep It Usable, kteří nabízejí srovnání dokonce 24 nejlepších nástrojů a tabulku ke stažení.
Použitá literatura a zdroje:
[1] HAZDRA, Adam. Skvělé služby: jak dělat služby, které vaše zákazníky nadchnou. Praha: Grada, 2013. ISBN 978–80–247–4711–8.
[2] MARUTI TECHLABS. 11 Best Prototyping Tools For UI/UX Designers — How To Choose The Right One? In: Medium [online]. theuxblog.com, 2018 [cit. 2019–11–28]. Dostupné z: https://medium.theuxblog.com/11-best-prototyping-tools-for-ui-ux-designers-how-to-choose-the-right-one-c5dc69720c47
[3] Ultimate Guide to Prototyping. UXPin, 2015. Dostupné z: https://studio.uxpin.com/blog/new-free-e-book-ultimate-guide-prototyping/
[4] Rapid Prototyping 2 of 3: Digital Prototyping. In: Youtube [online]. 8. 8. 2016 [cit. 2019–11–28]. Dostupné z: https://www.youtube.com/watch?v=KWGBGTGryFk&t=488s. Kanál uživatele Google for startups.
[5] SINGN, Rajinder. 10+ Best Prototyping Tools for UI/UX Designers in 2018. In: Medium [online]. Prototypr, 2018 [cit. 2019–11–28]. Dostupné z: https://blog.prototypr.io/10-best-prototyping-tools-for-ui-ux-designers-in-2018-6591ea1e2e71
[6] PALMER, Taylor. 2018 Design Tools Survey. Uxtools [online]. 2018 [cit. 2019–11–28]. Dostupné z: https://uxtools.co/survey-2018/#prototyping
Další zdroje:
InVision [online]. [cit. 2019–11–28]. Dostupné z: https://www.invisionapp.com/
Sketch [online]. [cit. 2019–11–28]. Dostupné z: https://www.sketch.com/
Principle [online]. [cit. 2019–11–28]. Dostupné z: https://principleformac.com/
JustInMind [online]. 2019 [cit. 2019–11–28]. Dostupné z: https://www.justinmind.com/
Adobe Experience Design CC [online]. [cit. 2019–11–28]. Dostupné z: https://www.adobe.com/products/experience-design.m25f265376a08a2d47427a9b628993b08.socialshare.html
Marvel [online]. [cit. 2019–11–28]. Dostupné z: https://marvelapp.com/
