Velké srovnání prototypovacích nástrojů 2017

Asi jste zaznamenali dotazník Humans of UX. V odpovědi na otázku o nástrojích na prototypování většina designérů vybrala, že používá tužku a papír, Sketch nebo Axure. Dost mě překvapilo, že zrovna tahle trojice je mezi UXáky tak populární. 

Pojďme se spolu podívat na recenzi těch nejzajímavějších nástrojů, které právě letí, a možná najdete něco, co bude stát za to vyzkoušet při práci.

Jak budu hodnotit

Ve Sketchi jsem si za jedno dopoledne rychle nahodil koncept na appku; je to takový Snapchat pro kočky (snapcat!). Pár jednoduchých prokliků a interakcí, žádné složité podmínky nebo vyplňování hodnot. Pak jsem prošel pár webů a článků a dal dohromady seznam kandidátů. Dobrý, ale zastaralý zdroj je https://uxtools.co/

Seznam nástroje je rozdělený na dvě kategorie Klikače a Mašiny. V tomto článku i se budu věnovat pouze té první skupině nástrojů. 

Hodnotit budu použitelnost, rychlost, jestli nástroj umí dobře importovat, sdílet prototyp a s jak složitý umí vytvořit prototyp. No a cenu. Pojďme na to!

Klikače — Prototypování jen na propojení screenů

Základní tooly na rychlé propojování screenů. Hodí se, pokud máte dobře zpracovaný wireframe nebo grafiku ve sketchi nebo na papíře a chcete jen jednotlivé obrazovky propojit dohromady na rychlé otestování. Nečekejte žádné symboly, knihovnu prvků ani logiku. Jen základní animace a přechody. Samozřejmostí musí být jednoduché importování ze Sketch a náhrávání fotek. Většinou vůbec neřeší responzivní design.

Adobe XD ⭐️

⌨ ️Platforma: Windows, Mac

💵 Cena: Beta, nejspíš bude stejná jako Adobe CC

😍 Plusy: Nahrávání prototypů. Share online. Design i prototyping. Je zatím free. Je rychlý a na obě platformy.

👎 Mínusy: Slabý prototyping. Neporadil si se skrolováním group mimo artboard. Rozbíjí iconfont. Neumí pořádně importovat ze Sketche. Umí jen naprostý základ. Žádné styly, žádná knihovna prvků. Žádná integrace do Adobe Cloud?? 

📚 Shrnutí: Adobe XD. Když mi asi před 10 lety na škole ukazoval Adobe evangelista Tom Krcha Adobe Catalyst, už tehdy byly vidět základní myšlenky, které ho v Adobe zajímají. Rychlá změna objektů. Prototypování a design v jednom toolu. Animačky. Wow. Po zániku Catalyst se hodně z jeho nápadů dostalo do Project Comet, který později Adobe vydalo pro Mac jako Adobe XD. Tool je pořád v betě, ale podívejme se na něj jako na alternativu k populárnímu InVision pro klikací prototypy.

Adobe XD toho zatím bohužel moc neumí. Jen pár základních designových funkcí jako text a vektory, propojování screenů. Na timing, animace, knihovnu prvků pro opakování elementů nebo třeba navigace můžete zapomenout. Vrstvy má vyřešené dost tragicky a nudně. Tragické mi přijde absence jakéhokoliv napojení na Adobe Cloud. Adobe, máte takovou konkurenční výhodu a nevyužijete jí?

InVision ⭐️⭐️

⌨ Platforma: Cloud

💵 Cena: Free (na 1 prototyp), 15$ – 99$ za měsíc

😍 Plusy: Dobrý import. Fajn kolaborativní nástroje (komentování, inspect pro developery, verzování). Integrace do Trella, Slacku, Githubu.

👎 Mínusy: Žádný design, umí jen rozchodit zdroje. Cena (až 30000 CZK na rok). Žádná desktop aplikace.

📚 Shrnutí: Osobně jsem se do InVision nikdy nedostal. Nechápu ho. Ano, dokáže pěkně importovat ze Sketche nebo Photoshopu. Ano, má pár základních transition a celkem slušné UI, takže se v něm dá rychle dělat. Všechno, co ale Invision nabízí umí jiné nástroje buď líp anebo za menší peníze. Nejde v něm skoro žádný design, nemá žádné složitější interakce a potřebujete mít hotovou grafiku z jiného nástroje. Radši si kupte Axure, Marvel, Indigo studio nebo Framer.

Sketch s InVision Craft ⭐️⭐️

⌨ Platforma: Mac

💵 Cena: Closed beta

😍 Plusy: Prototyping přímo v Sketch. Když funguje, je to super. Sketch už má hodně funkcí a pluginů, takže Craft by nemusel řešit designovou část.

👎 Mínusy: Uzavřená beta-plné bugů. Nekompatibilní s novým Sketch 43. Jen základní prototypování na klik.

📚 Shrnutí: Kontroverzní nástroj Craft 2.0 od InVision vznikl jako Silverflows pro Sketch, který InVision okamžitě koupil a začlenil do Craft pluginu. Právě probíhá jeho closed beta, na použití potřebujete invite. Umí asi tak stejně jako Adobe XD, ale velká výhoda je použití přímo ve Sketchi. Sketch má sám o sobě spoustu pluginů, které řeší spravování assetů a export, takže prototypování ho skvěle rozšiřuje. Je otázka, co všechno InVision dovolí Silverflows vydat, aby to neohrozilo jejich hlavní produkt. Škoda!

POP (by Marvel) ⭐️⭐️

⌨ Platforma: iOS, Android

💵 Cena: Free, ale napojení na Marvel se řídí jeho pricingem

😍 Plusy: Super na prototypování na mobilu a tabletu na cestě. Rozšiřuje papírové prototypování. Share do Marvel app. Natáčení uživatelů při jejich testování.

👎 Mínusy: Akvizice Marvelem dost zničila použitelnost. Cenové omezení na projekty Marvelu.

📚 Shrnutí: POP byl ještě nedávno super nástroj na extra rychlé prototypování na mobilu. Umožňoval rychle rozchodit papírový prototyp nebo wireframe, buď na mobilu nebo tabletu. Bohužel ho nedávno koupil Marvel a začal do aplikace cpát svoje funkce na digitální prototypování. Kromě logingate a placení přibylo spousta zbytečných features navíc, které podle mě nepřidávají velkou hodnotu. Výhodou ale může být, pokud už používáte Marvel na normální prototypování.