5 základních elementů UI designéra
Co jsem se naučil během prvního roku na pozici UI designéra v anglické softwarové firmě…
autor B. Mazoch, publikováno v Deníku Designéra | read in English
Před několika měsíci jsem byl požádán, abych sdílel své zkušenosti z návrhu uživatelských rozhraní s anglickou studentkou grafického designu. Byla to pro ni cenná příležitost poznat, jak pracuje UI designér v softwarové firmě. Začal jsem tehdy ihned přemýšlet o tom, jaké tipy bych předal právě začínajícím UI designérům. Okamžitě mě napadala témata jako proces tvorby, týmová komunikace a další. A co víc, uvědomil jsem si při tom, že jsou to zároveň i oblasti, ve kterých jsem se zdokonalil právě během mého prvního roku práce v našem softwarovém týmu.
Po chvíli důkladnějšího přemýšlení jsem si tak dal dohromady 5 elementů, které by podle mého názoru měly být jádrem každého UI designéra. A speciálně to platí pro ty designéry, kteří pracují přímo ve firmě a velmi úzce spolupracují s vývojáři a produktovým manažerem (náš vývojový tým se například skládá z 9 vývojářů, produktového manažera a mě jako designéra). Pojďme se tedy na onu “pětku” podívat:
1. PROCES TVORBY
Vybudujte si vlastní proces tvorby a využívejte síly různých nástrojů
2. KONZISTENCE NÁVRHU
Udržujte design konzistentní vytvořením a používáním tzv. style guide uživatelského rozhraní a interakcí
3. SPRÁVA A ORGANIZACE ZDROJŮ
Pamatujte na pečlivou organizaci všech grafických zdrojů, složek a výstupů
4. TÝMOVÁ KOMUNIKACE
Komunikujte grafické výstupy a podklady přesně a srozumitelně
5. SOFT SKILLS A JINÉ DOVEDNOSTI
Pracujte na zdokonalení i v těch dovednostech, které přímo nesouvisí s grafickým designem jako takovým
Na dalších řádcích trochu podrobněji…
1. PROCES TVORBY
“Vybudujte si vlastní proces tvorby a využívejte síly různých nástrojů”
Design je proces. Je to proces řešení nějakého problému. A takový proces zahrnuje přemýšlení a rozhodování. Jako designéři jsme tady proto, abychom podpořili ono přemýšlení a všechna rozhodnutí našim procesem tvorby a nástroji, které používáme. Cílem je navrhnout řešení kvalitně, pokud možno hladce, dostatečně rychle a na základě požadavků a předchozího výzkumu.
Můj proces tvorby ve stručnosti například zahrnuje skicování nápadů a poznámek na papír, pokládání otázek, vytváření tzv. wireframů, návrh detailních designů v grafickém softwaru Sketch a přípravu výstupů spolu s okomentovanou specifikací pro vývojáře.
2. KONZISTENCE NÁVRHU
“Udržujte design konzistentní vytvořením a používáním tzv. style guide uživatelského rozhraní a interakcí”
Konzistentnost je podle mého názoru jeden ze stěžejních elementů uživatelsky dobře použitelných a úspěšných produktů. A hlavní nástroj pro udržení konzistentnosti v grafickém rozhraní je souhrn grafických pravidel, elementů, návrhových vzorů a interakcí, které uživatelské rozhraní používá — jednoduše jakýsi manuál uživatelského rozhraní (v angličtině se používá termín UI Style Guide).
V našem vývojovém týmu je style guide jakýsi referenční bod. Pro mně, jako designéra, je tento nástroj hodně užitečný navíc i z toho pohledu, že se díky němu můžu při komunikaci se stakeholdery snadno odkazovat na již definovaná pravidla a principy. To mi například pomáhá v přesvědčování, že určité design řešení je třeba vhodnější použít než jiné.
O tématu okolo UI Style Guides se podrobněji rozepisuju v samostatném článku: ► Nutnost pro komplexní digitální produkty s uživatelským rozhraním — UI Style Guide.
3. SPRÁVA A ORGANIZACE ZDROJŮ
“Pamatujte na pečlivou organizaci všech grafických zdrojů, složek a výstupů”
Při práci mi pod rukama vznikne mnoho grafických výstupů v různých fázích rozpracování a verzích detailnosti (lo-fidelity vs hi-fidelity vs specikace s poznámkami). A to vše pro každou novou funkci nebo část systému, kterou je třeba vytvořit. Jako designér proto musím efektivně spravovat velké množství zdrojových složek, souborů a grafických výstupů. To stejné platí přímo i pro grafické soubory, ve kterých je potřeba mít pod kontrolou jednotlivé vrstvy grafických objektů a elementy uživatelského rozhraní.
Cílem designéra by mělo být mít ve svých grafických souborech pořádek, aby tak vše bylo přehledně a logicky uspořádané a snadno dohledatelné pro něj i pro ostatní. Nejlepším řešením je tak vybudování organizační struktury, pravidel a konvencí pro vytváření a pojmenování nových grafických materiálů a výstupů.
4. TÝMOVÁ KOMUNIKACE
“Komunikujte grafické výstupy a podklady přesně a srozumitelně”
Práce designéra není u konce s exportem finálních grafických výstupů. Tyto výstupy musí být totiž dobře komunikovány vývojářům a následně je vždy ku prospěchu sledovat postup vývojářů i z pohledu přesnosti implementace designu. Kvalita takové komunikace má významný vliv na konečný implementovaný výsledek a šetří nad tím strávený čas.
Za příklad můžu znovu uvést, jak to funguje v našem týmu. Jelikož většina mých designů obsahuje návrhy několika obrazovek a stavů, tak vývojářům neposílám pouze statické obrázky, ale vždy v takových případech vytvářím specifikace designu a okomentované diagramy průchodu (tzv. flow diagramy nebo také UI storyboards). To vše pro hlavní, ale i speciální případy užití. Diagramy průchodu jsou velmi dobré pro jakýsi vyšší nadhled nad celým designem určité funkce a někdy je doplňujeme také o klikatelné interaktivní prototypy, které jsou zase vhodné pro testování. Při komunikaci navržených designů je pro designéra navíc vždy žádoucí zůstat flexibilní a otevřený diskuzi, pokud něco potřebuje být dovysvětleno — v našem týmu je to jednoduché, protože sdílíme jednu kancelář, a proto je snadné probrat co je potřeba s vývojáři osobně.
5. SOFT SKILLS A JINÉ DOVEDNOSTI
“Pracujte na zdokonalení i v těch dovednostech, které přímo nesouvisí s grafickým designem jako takovým”
Zastávám názor, že pro UI designéra je hodně důležité mít nejenom grafické dovednosti, ale i řadu dalších. Výzvou profese designéra je komunikace, prezentace a obhajoba nápadů a také budování empatie k uživatelům, byznysu a také k vývojářům. Zkrátka a dobře, to vše se dá shrnout do termínů soft skills a psychologie.
Další plusový bod v našem oboru je zkušenost s programováním a technologiemi. V mém případě jsem vystudoval informatiku a dostával se do kontaktu s programováním i během své pracovní kariéry (například tím, že jsem kódoval a programoval projekty v HML, CSS, JavaScriptu, PHP nebo C#). I přesto, že jsem nyní zaměřený čistě na design, studium informatiky a programování rozhodně nebylo ztrátou času. Naopak. Dnes můžu při své práci těžit z toho, že mám přímé zkušenosti i ze samotného vývoje softwaru.
Závěrem
Než jsem se přesunul do Anglie, působil jsem na pozicích Vizuální Designér a Fron-end Vývojář pro několik digitálních a webových projektů, které zahrnovaly práci hlavně na webových stránkách a 2D/3D grafice. V Anglii jsem se dostal k trochu rozdílnému typu projektu, který je zaměřený na vývoj jednoho softwarového produktu — tím je webový informační systém pro nemocnice a kliniky s názvem Epro. Díky této skvělé příležitosti jsem tak musel získat nové dovednosti a navyknout si na vývoj v agilním prostředí. A to nejvýznamnější, co jsem se za tu dobu naučil, je shrnuto právě v těch 5 zmíněných bodech. Mimochodem, příběh mojí anglické cesty jsem sepsal do pětidílného seriálu ► Cesta k práci UI Designéra v Anglii.
Snad se mnou budete souhlasit, že být dobrým designérem není pouze a jenom o kreslení pěkných obrázků. Být dobrým designérem znamená umět spoustu dalších dovedností, které doplňují nutné znalosti vizuálního designu.
V dalších dílech se podíváme na některý z elementů trochu podrobněji a doplním je o další zkušenosti, tipy a užitečné zdroje.
Pro další články sledujte můj design blog ►Deník Designéra.
Děkuju za přečtení!
Jak se vám článek líbil? 💚
Pokud pro vás byl článek užitečný, můžete jej níže podpořit potleskem, zobrazí se tak ostatním.
Chcete se na něco zeptat nebo sdílet svoji zkušenost? Pak mi určitě napište do diskuze. Budu vděčný i za každé online sdílení, třeba na Twitteru.
Článek napsal Břetislav “Brett” Mazoch během své designérské kariéry v Anglii. Tam se přestěhoval, aby následoval svoje cestovatelské sny a pracovní vášeň — UI/UX Design a Front-end Development.
