Jak jsme předělávali Appmixer

V nedávné době se náš UX tým podílel na redesignu služby Appmixer. Jedná se o službu umožnující integraci a propojení API. Prostřednictvím Appmixeru lze veškerá propojení API jednoduše poskládat v grafickém editoru bez hlubších technologických znalostí. Na trhu existuje již celá řada podobných služeb, jsou to například Zapier, Built.io a Tray.io. A proto pro nás byla velká výzva pomoci zlepšit nadějný český startupový projekt.

Vyšlo v květnu 2017 na www.activate.cz.

Problém

Služba Appmixer se rychle rozvíjí, ale během vývoje se zapomíná na reálné uživatele, což by mohlo mít negativní dopad na použitelnost aplikace. Hlavní částí Appmixeru je editor, který slouží pro nastavení integrace API. Je to jedna z nejdůležitějších částí Appmixeru.

Právě tato část aplikace měla největší problémy a potřebovala upravit.

Cíl

Naším cílem bylo najít problémy uživatelského rozhraní a navrhnout opravy s co nejmenším dopadem na vývojáře, kteří měli svůj backlog již tak dost naplněný. A tak jsme použili techniky návrhu uživatelských k identifikaci nízko visícího ovoce.

Design proces

Pro návrhy UI máme zaběhaný design process, který má pevně stanovený postup. již mnohokrát jsme si odzkoušeli, že se nevyplatí vynechávat. A tak jsme i v případě Appmixeru postupovali takto:

• Analýza současného stavu
• Uživatelský výzkum — dotazník
• Uživatelský test — současného řešení
• Vytváření wireframů
• Otestování wireframů
• Výstup

Analýza současného stavu

Na úvodním sezení s klientem jsme nasbírali mnoho informací a podnětů, které nám pomohli pochopit účel a konkurenční výhody Appmixeru. Následně bylo nutné Appmixer vyzkoušet a naučit se s ním pracovat. Již během této fáze byly odhaleny velké problémy v použitelnosti uživatelského rozhraní.

Uživatelský výzkum — dotazník

Díky úvodní fázi jsme již měli představu o tom, jaká je cílová skupina a k čemu Appmixer slouží. Pro upřesnění a získání dalších informací o cílových skupinách a účelů použití byl vypracován uživatelský výzkum. Vzhledem k rozsahu a orientaci jsme jej distribuovali jen na několik desítek potenciálních uživatelů. Od hardcore programátorů po správce PPC kampaní. Výstupy jsme zpracovali do hypotéz pro další testování.

Uživatelský test

Během analýzy Appmixeru vzniklo mnoho hypotéz, týkající se špatné použitelnosti, které byly vhodné ověřit v testech.

Provedené testy potvrdily téměř všechny hypotézy, které byly stanoveny a zároveň byly objeveny spousty dalších chyb a připomínek.

hypotézy

1. Uživatel nebude umět najít prvek do editoru, protože služby a filtry jsou ve stejné úrovni a nejsou logicky oddělené.
2. Uživatel bude mít problém s editorem, nebude umět přetáhnout prvky z menu do editoru
3. Uživatel nebude vědět, kde je konfigurace prvku
4. Uživatel bude zmaten z konfigurace Tasku
5. Uživatel se nebude umět přihlásit k účtu na službě
6. Uživatel bude po návratu do editoru při zapnutém tasku zmaten, že mu nejde editovat task
7. Uživatel bude zmaten ze zpětné vazby aplikace, příliš technická, rychlá a nepoužitelná.
8. Uživatel bude zmaten z výpisu logů.

Na konci testování se poznámky rozdělily do jednotlivých kategorií a určily se jejich priority (1 malý problém — 5 velký problém).

Do spreadsheetu byly doplněny textové popisy řešení, jak konkrétní problém odstranit. Tento spreadsheet byl dostupný celému týmu, aby se designéři i programátoři mohli k dané problematice vyjadřovat a navrhovat různé varianty, jak problém vyřešit.

Vytvoření Wireframů

Současný design Appmixeru byl přenesen do sketche, kde se rozdělil do jednotlivých komponent:

1. Header
2. Navigace služeb
3. Konfigurátor služby
4. Prvek služby
5. Canvas Editor
6. Notifikace

Tyto komponenty byly upravovány pouze tak, aby došlo k zafixování odhalených chyb z testování. V rámci úprav UI byla zároveň snaha zlepšit konzistenci designu.

Pro udržení konzistence se postupovalo podle Atomic designu, což je kompozice jednoduchých prvků převedena do složitých prvků. (Tlačítko + Input = Formulář)

Malou ukázku design systému Appmixeru můžete vidět na obrázku.

Otestování Wireframů

Výstupy ze sketche se importovaly do prototypovacího nástroje Proto.io, kde se doladilo chování aplikace. Reálná aplikace obsahuje mnoho interakcí, které by bylo časově náročné vytvářet, proto se navrhly pouze základní interakce a zbylé chování se případně vysvětlovalo během testování, kdy byla zároveň ověřena reakce a pochopení uživatele.

Výstupy pro Front end

Po dokončení všech těchto úprav se výstup zaslal programátorům, aby mohli promítnout změny z designu do rozhraní Appmixeru. Pro kooperaci byl použit nástroj Zeplin, který je velmi jednoduchý a rychlý a slouží výhradně pro zpracování designu ze Sketche.

Zpětná vazba od klienta

„Etnetera Activate odvedla skvělou práci. K celému problému přistoupili velice analyticky, od počátečního sběru informací o našem produktu a jeho zaměření, přes uživatelské testy, wireframy a iterace nad nimi, až po finální výstup ve formě, která byla přímo použitelná našimi front-end vývojáři. Dopad změn UX/UI byl okamžitě viditelný na aktivitě našich uživatelů.“

Co je ale nejdůležitější — navržené úpravy se povedlo ve skvělém čase implementovat. Takže nová verze již funguje výrazně lépe. Uživatelé, kteří ji zkouší, již bez problémů dokáží UI používat a vytvářet zajímavá propojení dat mezi online službami. Což nás opravdu těší!

Originally published at www.activate.cz.