Cesta k práci UI Designéra v Anglii (V. díl — Pohled na práci českého designéra v anglické firmě)
článek originálně publikován 13. dubna 2016 na LinkedInu
autor B. Mazoch, publikováno v Deníku Designéra
Dostali jsme se k závěrečnému dílu o cestě k práci UI Designéra v anglické firmě Bluewire Technologies. V tomto posledním článku přináším svůj pohled na práci českého designéra v Anglii, podílejícího se na vývoji informačního systému pro kliniky a nemocnice. Náš softwarový produkt pomáhá lékařům a dalším pracovníkům nemocnic se zpracováním dat a informací o pacientech. Jako UI Designér mám své specifické úkoly a cíl vytvářet uživatelsky použitelné a funkční uživatelské rozhraní. To je výsledkem mého design procesu a celý vývoj by nebyl kompletní bez využití front-endových technologií a nástrojů. O tom všem na následujících řádcích.
Představení firmy Bluewire Technologies
Bluewire Technologies je zavedená anglická firma sídlící v centru města Bristol, na jihozápadě Anglie, čítající aktuálně zhruba 18 zaměstnanců (šéf a zakladatel firmy Dr. Adam Towler, 8 vývojářů, 1 designér plus další kolegové z projektového a testovacího týmu). Na jejím počátku stála vize vytvoření elektronického systému, který by lépe podporoval a zároveň zrychlil práci doktorů a zaměstnanců nemocnic při získávání a správě informací o pacientech. Proto vznikl software Epro.
Náš hlavní softwarový produkt Epro je webový systém, který tedy umožňuje doktorům a dalším pracovníkům NHS (National Health Service) nemocnic a klinik spravovat záznamy o pacientech, jejich léčbě a o laboratorních výsledcích. Momentálně máme v distribuci technologicky starší verzi systému (můžete ji vidět součástí videa níže) a intenzivně pracujeme na nové, která využívá moderní webové technologie plus responzivní a uživatelsky použitelnější design lépe přizpůsobený potřebám a činnostem uživatelů (ukázka z nové verze je v další podkapitole).
Epro makes hospitals work better…
V čem tkví můj přínos pro firmu na pozici UI Designéra a 5 činností k jeho dosažení
Dobré UI (User Interface) = lepší UX (User Experience) = efektivnější a spokojenější uživatel = výsledkem je dobrý dojem z firmy, více zákazníků, úspěšnější business.
Mým přínosem je vytváření toho dobrého UI…
Dobré UI = lepší UX =
efektivnější a spokojenější uživatel =
dobrý dojem z firmy, více zákazníků, úspěšnější business.
Obal (v tomto případě tedy UI) prodává a když je funkční a přínosný pro uživatele i pro business, pak je to ta nejlepší kombinace. Dobré UI není jenom o kreslení v grafickém softwaru, ale zahrnuje spoustu jiné mravenčí práce. Do firmy jsem byl přijat jako designér/vývojář, protože mám znalosti v obou těchto oblastech. Brzy se ale ukázalo, že kvůli komplexnosti našeho produktu zabere UI design veškerý čas mojí práce a proto se ve firmě soustředím hlavně právě na design, což mi vlastně nejvíc sedí a vyhovuje.
Co vše tedy stojí za mou prací UI Designéra?
- Design UI různých částí a funkcí systému
- Komunikace úkolů a úprav vývojářům
- Udržování konzistentnosti napříč aplikací
- Správa a organizace grafických zdrojů
- Kontrola UI a testování na různých zařízeních
1. Design UI různých částí a funkcí systému
Na začátku rozsáhlejších designových řešení stojí diskuze se šéfem a senior vývojářem. Během ní probíráme, jak by daná část či funkce systému měla fungovat. Základ informací vychází ze starší verze systému Epro a ze zkušeností uživatelů. Během této první fáze jsou našimi nástroji slova, tužka a papír. Vytváříme tak různé náčrtky a ty následně transformuji do detailnější verze.
V závislosti na komplexnosti řešení buď přecházíme na mezistupeň v podobě low-fidelity wireframů (k vytváření používám Balsamiq Mockups), které jsou už prezentovatelným výstupem a zároveň se na nich dá rychle a snadno iterovat, nebo se rovnou pouštím do zpracování detailních high-fidelity mockups (k těm mi výborně slouží macovský software Sketch App). Detailnější UI designy připravuji jak pro desktop rozlišení, tak pro mobilní zařízení. A v mém design procesu využívám kromě svých znalostí a zkušeností také různé UI Best Practices, UI Patterns apod.
Tvorba náčrtků, wireframů a mockups je flexibilnějši než vlastní programování a během celého návrhového procesu vždy dojde na několik iterací, které opět diskutuji se šéfem, případně i s dalšími členy týmu. K vývojářům se tak dostane téměř vyladěná verze konečné podoby, čímž se efektivněji využívá jejich pracovní čas. Nemluvě o tom, že stakeholdeři (vlivné osoby) mohou vidět nějaký konkrétní výsledek o dost dříve a dělat tak rychleji další rozhodnutí.
••• 01) Prvotní náčrtky na papír
Na papír padají různé rychlé nápady a náznaky toho, jak by konečný výsledek mohl vypadat. Právě rychlost a různorodé nápady jsou v tomto případě to nejdůležitější.
••• 02) Low-fidelity wireframes
Mezistupeň opět pro rychlou iteraci a design různých nápadů, definování textů a UI elementů, jejich pozicování a základní kompozice. Může sloužit už jako prezentovatelný výstup ideí nebo případně i jako výstup pro vývojáře, pokud je k dispozici dobře definovaný vizuální manuál softwaru.
••• 03) High-fidelity mockups
Detailní design, který dodržuje vizuální manuál softwaru. Definuje kompozici, přesné pozicování a zarovnání UI elementů. Konečný podklad pro vývojáře.
2. Komunikace úkolů a úprav vývojářům
Výstupem pro vývojáře jsou grafické podklady a zároveň slovní specifikace chování aplikace. Zpracování implementace zadáváme přes webový systém pro zadávání úkolů a ty jsou přebírány vývojáři na základě priority, jejich vytíženosti či konkrétních cílů aktuálního sprintu vývoje.
3. Udržování konzistentnosti napříč aplikací
Jedním z principů dobrého UI je udržování konzistentnosti napříč celou aplikací. A to se neobejde bez předem definovaných pravidel. Tyto pravidla se proto jako designér snažím definovat v rámci vizuálního manuálu aplikace, který tak obsahuje informace o typografii, paletě barev, pravidlech pozicování a zarovnání UI elementů, grafických ikonkách apod. Dobře zpracovaný vizuální manuál pak slouží jako záchytný bod jak pro designéry, tak pro vývojáře a zároveň je pomocníkem designéra při různých argumentacích.
4. Správa a organizace grafických zdrojů
Během návrhu UI vzniká spousta podpůrných materiálů, které musí být přehledně pojmenovány a velmi dobře organizovány, aby k nim bylo možné rychle a snadno přistupovat. Především jde o soubory s wireframy, detailními mockups nebo o vektorové soubory pro ikonky. Jako designér mám proto na starost udržování pořádku v těchto souborech a jejich export pro vývojáře. Všechny jsou pak spravovány pomocí verzovacího systému.
5. Kontrola UI a testování na různých zařízeních
Nedílnou součástí mé práce je kontrola, zda implementace odpovídají grafickým podkladům, a dále také testování UI na různých rozlišeních (desktop, iPhone4, iPhone 6, iPad Pro). Pro testování využíváme reálných zařízení nebo nástroje Chrome DevsTool. V případě, že mi něco na implementaci nesedí nebo najdu nějaký bug, vytvořím požadavek na opravu nebo ihned osobně komunikuju úpravu s vývojářem. Jako UI designér rozpoznávám detaily (např. nedodržení konzistentnosti, porušení zamýšlených kompozičních principů apod.), které ve výsledku můžou znamenat horší použitelnost softwaru a ty by samozřejmě měly být opraveny.
Rozvrh mého pracovního dne
9:00 … Začátek
Každé ráno začínám procházením svých poznámek z minulého dne a dále kontrolou e-mailů a zadaných úkolů. Seznámím se tedy nejprve s tím, co mě čeká, a možná si stihnu přečíst i nějaký odborný článek.
9:30–10:00 … Stand-up meeting
Následuje tzv. stand-up meeting vývojového týmu (10 lidí), kde každý všem ostatním poví, na čem bude ten den pracovat a s kým případně bude chtít něco řešit. Šéf zde také sdílí různé poznatky ze schůzek s klienty nebo z představování aplikace. O pátcích se na stand-upu shromáždí celá firma (cca 17 lidí) a každý postupně shrne svůj pracovní týden.
10:30–17:00 … Práce, práce, práce (+30 min obědová pauza)
Moji největší část dne zahrnuje práce na různých částech a funkcích nové responzivní verze systému Epro. To znamená skicování uživatelského rozhraní na papír, práce na detailnějších vizuálních návrzích, testování a kontrola implementací a taky pravidelné diskuze se šéfem. Diskuze bývají často intenzivní (pokud se blíží termín představování aplikace) a během pracovního dne jich máme několik.
17:00–17:30 … Finish line a konec
Dokončování práce, poslední úpravy a ukládání všech věcí a nových souborů na centrální úložiště pomocí verzovacího systému Git. Žádné přesčasy nejsou vyžadovány. A nakonec pravidelně (hlavně o pátcích) následuje stmelování týmu u dobrého piva.
Několik slov o metodice vývoje
a Front-end technologiích a nástrojích
Celý vývoj funguje na bázi 2-týdenních sprintů. Před uzavřením každého sprintu se definuje, na čem se bude pracovat v tom následujícím. Toto rozhodování a plánovaní mají na starost senior vývojáři a hlavní šef, který je zároveň i UX designérem celého produktu. Firma není zatížena striktním korporátním prostředím a komunikace mezi členy týmů funguje na neformální úrovni.
Základem pro zadávání úkolů, reportování bugů a dalších věcí spojených s řízením celého projektu je podpůrný webový systém YouTrack. Všechny zdrojové soubory, dokumenty a grafické zdroje jsou spravovány pomocí verzovacího systému Git.
Vývoj nové verze našeho systému Epro je postavený na MVC architektuře, ve které hlavní front-endovou roli hraje javascriptová knihovna ReactJS. Ta celému týmu vývojářů umožňuje snadno vytvářet samostatné komponenty a spojovat je do větších celků a finálního softwaru. Proč jsme zvolili právě ReactJS?
- Systém na něm postavený je obecně dobře a jednoduše škálovatelný,
- podporuje vytváření recyklovatelných UI komponent, které jsou na úrovni kódu dobře čitelné a udržovatelné,
- jeho dobré vlastnosti a oblíbenost je potvrzena tím, že je využíván předními světovými společnostmi.
Epro vyvíjíme v programovacím jazyce TypeScript, za podpory HTML5, CSS3 (přesněji LESS s plánovaným přechodem na SASS) a případně dalších JavaScriptových knihoven. Celá aplikace je buildována pomocí nástroje Webpack. Hlavním vývojovým prostředím ve firmě je Microsoft Visual Studio. Součástí celého vývoje jsou dále taky samozřejmě různé technologie a nástroje pro back-end a testování.
A je tady konec. Co bude dál?
Na mé práci v Bluewire Technologies mě motivuje, že svou prací přispívám k vývoji přínosného projektu. Mám radost, že takto můžu pomáhat doktorům a dalším pracovníkům nemocnic a klinik, kterých si obecně velmi vážím.
Co se týče mého působení ve firmě, mám několik nápadů, které bych chtěl zrealizovat a zároveň bych byl rád, kdybychom do našeho procesu dokázali více zahrnout uživatelské testování (např. Guerrilla Usability Testing). Do toho také připravuju další vedlejší projekty, na které určitě nějakým způsobem znovu upozorním. Všechno ale chce svůj čas, protože přišlo jaro a s ním roste moje chuť na cestování po Británii a po světě…
Tímto tedy končím sérii článků o mé cestě k práci UI Designéra v Anglii. Vycestování za prací do zahraničí dnes hodnotím jako jedno z nejlepších rozhodnutí, které jsem kdy udělal, i když na začátku nebylo vše tak pohodové jako teď. Uskutečnění podobné výzvy můžu jen doporučit. Na internetu jsem našel několik dalších příběhů českých lidí z oboru IT, kteří se taky rozhodli zkusit se prosadit v Anglii a určitě v nich můžete najít spoustu dalších přínosných rad a hlavně inspiraci jako já:
VŠECHNY DÍLY série „Cesta k práci UI Designéra v Anglii“:
- I. díl — Kde najít motivaci a jak zvolit místo
- II. díl — Peprné začátky a jak úspěšně nastartovat anglický život
- III. díl — Jak co nejrychleji získat kvalifikovanou pozici
- IV. díl — 15 tipů jak zvýšit své šance na anglickém i českém pracovním trhu
- V. díl — Pohled na práci českého designéra v anglické firmě
