Pokud se zeptáte těch nejlepších českých UX designérů, jaký nástroj zaměřený na tvorbu wireframů a prototypů považují za nejlepší, dost pravděpodobně vám každý odpoví jinak.

V předchozím článku jsme udělali recenzi UX nástrojů na wireframy a prototypy. Tentokrát jsme oslovili nejlepší české UX designéry, kteří nám sdělili své zkušenosti s každodenním používáním UX nástrojů. Které považují za nejlepší? A proč?

Marek Čevelíček

Marek Čevelíček působí jako UX designér a také CEO ve společnosti Liquid design. K tvorbě wireframů a prototypů ve firmě využívají kombinaci dvou nástrojů. Jedním z nich je Moqups.com, který považují za hlavní a nejvíce používaný nástroj pro vytváření wireframů.

„Vyhovuje nám cena, snadné používání, má dobře nastavitelné komponenty, je v cloudu, takže se dá na prototypu pracovat doma, přejít do kanclu a pracovat dál. Hezky funguje sdílení prototypu a je vyřešeno přehledné komentování, což i pro klienty je super. Nevýhoda je, že prototypy nejsou responzivní a trochu krkolomně se navrhují interakce. Naštěstí často nepotřebujeme moc interaktivní wireframy.“

Dobře jim slouží i nástroj Adobe XD, který využívají k tvorbě hi-fidelity prototypů. Kladně hodnotí především kompatibilitu nástroje pro platformu Windows, rychlost programu i pro tvorbu větších prototypů a také základní verzi zdarma. Po instalaci mohou program využívat i vývojáři pro export assetů a manipulaci s prototypem bez nutnosti kupovat plnou licenci.

Jan Řezáč

Jan Řezáč, společně se svým týmem z House of Řezáč, dříve využívali ke své tvorbě wireframů Axure, ale aktuálně od wireframů opouští. 

„Místo wireframů skicujeme na workshopech spolu s klienty. Buy-in klienta díky tomu přichází přirozeně jako součást workshopu. Skici digitalizujeme a vytváříme z nich elektronické-papírové prototypy, které je možné testovat. Našim výstupem je pak nejčastěji přímo grafický návrh webu nebo aplikace.”

Picards – Vojta Mikula, Honza Smékal a Michal Mrskoč

UX tým z Picards, konkrétně Honza Smékal, Vojta Mikula a Michal Mrskoč se primárně zabývají návrhem wireframů a funkčních prototypů. Při své práci využívají dva nástroje: Axure a Invision. 

Prozradili nám hned několik důvodů, proč u nich vítězí Axure:

• „Pro tvorbu low-fi wireframů je po stránce rychlosti a efektivity práce nejlepší ze všech nástrojů, které jsme vyzkoušeli,
• dají se v něm vytvářet komplexní prototypy, takže když občas potřebujeme něco rozhýbat, nemusíme přeskakovat mezi nástroji,
• umí vytvořit návrh v responzivním designu,
• umožňuje týmovou kolaboraci – tohle by teda mohl umět i lépe (ahoj Figmo), ale dokážeme s tím žít (resp. je to vyváženo body výše)
• není to grafický editor a moc toho po této stránce neumí, což je fajn, protože to nesvádí úplně zabrušovat do vizuálních detailů.”

K dalšímu nástroji, ve kterém občas vytváří rychlé prototypy, řadí Invision.

„Je to trochu jednodušší než v Axure, ale používáme ho pro tenhle účel méně a méně, protože se snažíme držet vše pohromadě. Nicméně Invision používáme běžně pro spolupráci a iterace nad grafikou anebo wireframy s klienty.“

Kromě těchto dvou nástrojů si vyzkoušeli i Figmu, která ale využití v jejich týmu nenašla. 

Honza Smékal vysvětluje proč: „Dokážu si docela dobře představit v ní pracovat někde na produktu, ve větším týmu a s design systémem, kde návrh stavím víceméně z hotových komponent. V té chvíli využiji parádní kolaboraci a skvěle řešený handoff. A protože nic nestavím „od píky”, mi vlastně tolik nevadí, že je to grafický editor. Ale pro naši práci bych ji nevolil.”

Šimon Jůn

Šimon Jůn, UX a product designér, ke své práci nejraději využívá Figmu. A to hned z několika důvodů. Plusové body u něj získává především za možnost kolaborace celého týmu v prostředí cloudu.

„Je běžné, že navrhuji wireframy jedné stránky mezitím, co grafik připravuje UI další stránky a kodér s programátorem si z Figmy exportují styly, aby mohli pracovat na dalších částech projektu. Vše je automaticky synchronizované, takže už žádné soubory s názvy fina-final-version-2 a podobně.“

Pochvaluje si také velmi intuitivní ovládání pro tvorbu prototypů a rychle viditelné provedené změny.

„Figma má úžasnou mobilní aplikaci, kde se změny co děláte na PC hned propisují do aplikace. Toto se mi už několikrát osvědčilo jako ideální řešení na meetingy se stakeholdery, protože jste schopni dělat rychlé úpravy designu mobilní aplikace/mobilního webu a klient to hned vidí a může reagovat. Žádný jiný nástroj tuto funkci nemá (nebo o ní nevím) u Adobe XD to vždy muselo stahovat celý soubor znovu atd.“

Roman Maštalíř

Roman Maštalíř, CEO ve společnosti Eventee, ke své práci hledal nástroj, který mu umožní efektivně navrhovat své projekty. 

“Jako produktový manažer jsem hledal aplikaci, která mi umožní rychle načrtnout obrazovku aplikace a poslat k realizaci týmu. Nejsem designér, proto pro mne bylo důležité najít řešení, které obsahuje velkou databázi designových prvků.“

Výsledky jeho bádání můžeme shrnout následovně: po několika letech po boku aplikace Balsamiq přešel k programu Mockitt, který v omezené míře funguje i v bezplatné verzi. 

Proč zrovna Mockitt?

„Mockitt mi umožňuje velmi rychle a efektivně vytvořit prototyp pro jednotlivé obrazovky a funkce naší aplikace eventee.co. Je to ideální startovací bod pro další diskuzi v týmu nebo jako podklady pro skutečného grafika. :) Zejména v dnešní době, kdy všichni pracujeme z domu, jsou jednoduché nástroje pro asynchronní komunikaci v rámci týmu velmi důležité.“

„Tento nástroj uživatelům nabízí opravdu širokou škálu grafických prvků a sad ikon pro webové i mobilní aplikace,“ dodává Roman Maštalíř. Díky nim je pro něj práce v Mockittu velmi rychlá a jednoduchá. 

„Místo navrhování jednotlivých tvarů a prvků jednoduše vytvářím wireframy z existujících elementů a obratem pošlu týmu.“

Agentura Švejda Goldmann

Agentura Švejda Goldmann navrhuje vizuální design a UX pro webové stránky a aplikace. Jejich hlavní nástroj pro tvorbu je Figma. Kromě nástroje Figma využívají rádi také ruční skici. Ptáte se proč?

,,Pokud projekty začínají od nuly, pomáháme si ručními skicami. Je to pro nás příležitost vytvořit rychlé návrhy bez toho, abychom „propálili” rozpočet hned na začátku projektu. Dnes už častěji než na papíře skicujeme na iPadu. Na to nám perfektně vyhovuje aplikace Paper.”

Za nejoblíbenější nástroj v agentuře považují Figmu, a to z několika důvodů:

„Děláme zde low-fidelity prototypy, wireframy i finální UI. Figma také dobře umožňuje developerům exportovat potřebné assety, kopírovat CSS vlastnosti apod.”

Před přechodem na program Figma pracovali také ve Sketchi, kde ovšem postrádali možnost spolupráce více designérů na jednom projektu, možnosti prototypování a exporty pro vývojáře. Pro návrh ikon a ilustrací nejčastěji využívají Adobe Illustrator.

Martin Kopta

Na osobní zkušenost jsme se zeptali také Martina Kopty. Martin Kopta do problematiky vnáší nejenom pohled designéra, ale především výzkumníka. Jaké nástroje využívá a co na nich oceňuje? 

„Z pohledu výzkumníka je pro mě důležité především, jestli je wireframe nebo prototyp přiměřený předmětu výzkumu nebo testování. Jiný prototyp potřebujete jako demo využití nové technologie, jiný pro prezentaci stakeholderům, jiný jako dokumentaci pro vývojáře a jiný pro uživatelské testování. Nástroje nás obvykle svádějí k nějakému konkrétnímu způsobu použití. Z toho důvodu mám asi nejraději nástroj, který dovoluje plynule se pohybovat na osách věrnosti, propracovanosti a interaktivity, a to je HTML.”

Martin Kopta má v oblibě nástroje, které dovolí sledovat použití prototypu respondentem i bez sdílení obrazovky. Mezi tyto nástroje se řadí například Figma nebo Miro. 

„Při vzdáleném uživatelském testování narážím na to, že jsou prototypy příliš výpočetně náročné pro zařízení respondentů, takže často nerozchodí prototyp v Axure RP nebo se namísto objektů z Figmy vykreslují placeholdery.

Robert Němec

K používání UX nástrojů se vyjádřil i Robert Němec, ředitel naší strategické reklamní agentury RobertNemec.com.

Jakožto odchovanec UXPinu na návrhy wireframů používá právě tento nástroj. Bohužel UXPinu se podle něj stalo to stejné, co mnoha jiným službám: začali přidávat další a další funkce. Díky tomu se v něm dnes špatně orientuje, křivka učení je dost dlouhá a práce s ním zdlouhavá. 

Na druhou stranu, jeho funkce jsou dnes tak pokročilé, že jej můžete skvěle používat na prototypování. Prototypování znamená, že vytvoříte něco, co se chová velmi podobně, jako reálný funkční web. UXPin má snad všechno, na co si jen vzpomenete.

Za to si ale také vezme hodně. Jeho cena začíná na 24 dolarech na uživatele a měsíc.  

Nedoporučuje používat UXPin na tabletu.

„Jednou jsem musel dělat složité wireframy do jedné finanční instituce, takže to muselo „nějak vypadat“. Přelétával jsem mezi ostrovy kdesi v Indonésii a měl jsem s sebou jenom tablet. Práce na tabletu v UXPinu byla otřesná a trvalo mi to minimálně 2x delší dobu než standardně, možná i 3x. Pokud si to dobře pamatuji, časem jsem to vzdal a nakreslil to v mobilním PowerPointu (teď mě asi někdo ukamenuje :-)). PowerPoint mimochodem občas používám na bleskové náčrtky v notebooku, iPadu i na mobilu.“

A co stará dobrá tužka a papír? Odzvonilo již této metodě? 

„Pokud potřebuji běžně rychle nakreslit wireframe, používám doslova tužku (v horším případě propisku) a papír. Kolegové jsou na to zvyklí. Klienti se občas vyděsí, že jim pošlu fotku nafocenou mobilem.“

V poslední době začal experimentovat také s Figmou. „Je rychlá. Prostě hned vytváříte,“ zmiňuje pro něj hlavní výhodu.

Základní orientace je podle něj lepší ve Figmě, pokročilejší ale v UXPinu. „Ve UXPinu máte problém se zorientovat zpočátku, ve Figmě to vypadá zpočátku vše jednoduše. Ale když chcete najít něco pokročilejšího ve Figmě, je to pěkně schované.“

O Figmě Němec tvrdí, že má divnou logiku. „Logiku UXPinu pochopíte hned. Figma sice vypadá jednoduše, ale když chcete vytvořit něco složitějšího s mnoha viewporty, má, alespoň pro mne, Figma divnou logiku. Musíte si projít dlouhá videa, abyste ji pochopili.“

Dost jej ve Figmě štve práce s ikonami. Zatímco v UXPinu je ohromná databáze ikon zdarma, do Figmy musíte ikony složitě instalovat a za ty lepší ještě platit.

Figma také podle něj skvěle pracuje s mobilními verzemi. Nejenom, že vidíte, jak bude váš web nebo aplikace vypadat na různých mobilních telefonech. Ale dokonce si můžete zvolit, jak bude váš web vypadat na zlatém iPhonu 11 Pro Max a jak na stříbrném.

„Stále mám s Figmou omezené zkušenosti. Ale přijde mi, že je skvělá, když chcete něco rychle vytvořit. Pro kreativní duše je jako dělaná. Wireframe tam uděláte bleskově. Ale pokud si chcete s něčím do detailu hrát, tedy vytvářet mockupy nebo prototypy, je lepší UXPin.“

Mockupy a prototypy jsou propracovanější než wireframy. Mockup je statický, kdežto prototyp je dynamický.

Robert Němec ale používá Figmu i pro rychlé návrhy jiných návrhů. „Ve Figmě třeba rychle navrhnete prezentaci a pak to předáte grafikovi, aby ji udělal v PowerPointu. Nebo můžete udělat bleskově skicu banneru. Nebo třeba vytvořit skicu newsletteru.“

Na závěr jsme ho poprosili o stručné shrnutí, kdy nástroj považuje za nejlepší. Používá od začátku až do konce každého projektu pouze jeden program?

„Pokud bych měl jenom jednodušší weby nebo wireframy, používal bych Figmu. U složitějších webů nebo wireframů bych si to nejprve rychle navrhl ve Figmě. A pak návrh dodělal v UXPinu.

Ale jak říkám, moje zkušenosti s Figmou jsem zatím jenom omezené.“

Proč používat dva programy? Jak říká staré heslo UX designérů: „Wireframe opravíte kliknutím myši, opravit web bude práce pro celý tým.“ Takže je lepší promýšlet a opravovat věci od začátku – i za cenu dvou programů.

Jeho kolegové-designéři v agentuře RobertNemec.com používají na tvorbu wireframů Adobe XD. On sám však jeho příznivcem není, nicméně akceptuje fakt, že spolupracovníkům vyhovuje.

„Když musím v Adobe XD něco komentovat, přijde mi, že UI  a vlastně i UX je tam mizerně udělané a samotný návrh zabírá zbytečně málo místa a serepetičky kolem naopak zbytečně moc.

U Figmy se naopak můžete plně soustředit na to, jak to bude vypadat – a ještě si můžete vybrat, jak to bude vypadat na různě barevných iPhonech. Ale jak říkám: Pokud to jenom trochu jde, akceptuji nástroj, se kterým se mým kolegům pracuje nejlépe.“

Jaký nástroj je nejlepší pro vás?

Napište nám prosím do komentářů pod článek anebo na sociálních sítích.