Nestyď se zeptat: Jak se dělá dobrý UX/UI design? | SKVOT
Skvot Mag

Nestyď se zeptat: Jak se dělá dobrý UX/UI design?

S Michalem Škvorem a Alexandrem Pánkem o tvůrčím procesu, deadlinech i o tom, kam se vydat pro inspiraci.

Nestyď se zeptat: Jak se dělá dobrý UX/UI design?
1. října 2024 DESIGN Článek

UX/UI design rozhodně není jenom o krásných webovkách nebo appkách. Je hlavně o průzkumu, datech, skills a vůli se pořád učit něco nového. Jak zvládat náročné projekty, překonávat kreativní bloky a hledat nové inspo? 

O to se s námi podělili lektoři kurzu UX/UI design, Michal Škvor a Alexandr Pánek. Profíci, kteří umí bez zaváhání balancovat na hranici kreativity a technické preciznosti.

 

Michal Škvor

Senior Product Designer ve firmě Livesport

Michale, co ti víc šlape na paty? Deadliny, nebo kreativní bloky?

Chtěl bych říct, že za ty roky už snad ani jedno. (smích) Je pravda, že práce designéra je každodenní boj s dedlinem. A oboje spolu souvisí. Aby se udělal dobrý design, tak je potřeba mít dostatek času. Důležité je si na začátku nastavit realistické termíny a očekávání. Definovat si, kdy budou dodány jednotlivé výstupy, nenechat se zatlačit a mít na projekt dostatečnou časovou rezervu.

Když se nestíhá, tak je potřeba zatnout zuby. Věnovat tomu čas po večerech nebo i víkendech. Dobrá komunikace a dodání ve stanoveném termínu by měl být základ. Protože na práci designéra pak navazuje část developmentu a zpoždění může být velký problém. Je opravdu důležité, jak na vás v rámci projektu nebo v zaměstnání budou vzpomínat.

Vždycky jsem si na tom zakládal, protože v našem oboru to je hodně o doporučení. Dříve jsem měl problém s odmítáním projektů a snažil jsem se každému vyhovět. Vážím si toho, když si mě klient vybere ke spolupráci. Ale všichni máme omezenou časovou kapacitu a nejde každému vyhovět na úkor svého osobního času.

Co se týče kreativního bloku, tak už jsem si vytvořil svoje workflow, jak se tomu dá předejít. Hodně jsem se naučil v agentuře, kde je potřeba rychle a kvalitně odbavovat různé typy zakázek. 

Figma, nebo papír? Co je tvůj oblíbený nástroj?

Momentálně spíše Figma, ale měl jsem období, kdy jsem to více kombinoval. Mám teď celkově období kdy jsem vše přesunul do online prostředí. Včetně poznámek, organizace práce nebo třeba i osobních věcí a cílů. Chtěl bych se ale zase vrátit k papírovému diáři. Má to svoje kouzlo a výhody.

V rámci vylepšení hotového produktu, kde je dobře zpracovaný design systém, může být na první pohled efektivnější rovnou řešit design ve Figmě. Zároveň to může být ale i limitující, abyste přišli s nějakým dobrým řešením.

Pokud se bavíme o přípravě konceptů nebo moodboardů, které jsou v rámci první prezentace pro zadavatele, tak je to vždy zpracovaný výstup ve Figmě. Je to pro mě efektivnější v rámci následné prezentace nebo dalšího navázání v podobně finalizace UI designu.

Figma je super v tom, že svoje myšlenky můžu rychle přenést do online prostředí, následně vytvořit prototype nebo prezentaci a design dále iterovat s lidmi, kteří na projektu spolupracují.

Rychlé koncepty layoutů nebo řešení na papír jsou dobré v rámci ideační fáze nebo při meetingu, kdy vzniká diskuze nad zadáním. Často si do diáře spontánně načrtnu něco, co mě napadne, když nejsem u počítače nebo v rámci diskuze nad zadáním.

Zjistit více

A jak vlastně vypadá celý tvůj tvůrčí proces?

Hodně záleží, o jaký typ projektu se jedná. V Livesportu máme produktové oddělení, společně řešíme klíčové projekty a nové funkcionality, které chceme přidat do produktu. Dle priorit z toho pak vznikne zadání, na kterém začínám pracovat.

Můžu se opřít o výzkum, iterovat design s Product Ownerem, konzultovat design s kolegy v našem týmu. Takže pracuji už s konkrétním zadáním a záleží na komplexitě, o jak velkou věc se jedná. Dle toho připravím varianty designů, které pak odprezentuji PO, CPO nebo přímo stakeholderům. V případě schválení pak připravujeme předání na vývoj a zapracování do design systému.

U kreativnějích webů nebo landing pages je zásadní navnímat potřeby klienta. Dobře si ujasnit zadání a připravit moodboard a v první fázi si schválit vizuální směr. Až poté připravit klíčovou podstránku a na té si znovu potvrdit směr.

V počátku UI části je zásadní komunikace a pochopení. Umět obhájit klíčové designové rozhodnutí a samozřejmě vhodně propsat brand do designu. Občas je to o tom udělat kompromis, potlačit ego a vyhovět požadavkům klienta. Ne vždy to dělat, jak to chceš ty, a vyjít vstříc požadavkům zadavatelům.

Časem jsem se naučil techniky, co jak připravit a odprezentovat, aby zásadní prvky, které chci a jsou potřeba, v designu zůstaly.

Vzpomínáš si na svůj první designový projekt? Byl to úspěch, nebo spíš lame? 

Jeden z prvních projektů, za který jsem dostal zaplaceno, byl tuším v roce 2007. Jednalo se o e-shop se zvířecími potřebami. Dostal jsem od klienta ručně nakreslený wireframe homepage. Jednalo se o celkem kreativnější zadání.

Ve Photoshopu jsem nakreslil zvířata na pozadí, navigace měla strukturu dřeva, rozcestník kategorií byl stylizovaný do podoby dřevěného rozcestníku na louce. Pamatuji si, že jsme tam ladili, jaký vzorek dřeva použijeme, a připravoval jsem několik variant ke schválení. (smích)

Celkově se to vizuálně povedlo a podoba e-shopu tam byla několik let. Pak jsem ještě pro ně připravoval návrhy vizitek a další materiály. Samozřejmě, jak to bývá u prvních projektů, úplně bez chyby to nebylo.

V té době se nedělaly responzivní weby, ale už se používal grid a byla standardní šířka webů. Při tom kreativním návrhu jsem na to trochu zapomněl a design webu jsem udělal širší. Pak byl trochu problém při kódování. 

Cute zvířátkový web z kraje milénia
Zdroj: Michalův osobní archiv 

Kam si chodíš pro inspiraci? A co tě naposledy opravdu inspirovalo až nakoplo? 

Stephen King v knize O psaní zmiňoval, že dobrý spisovatel by měl hodně číst různé autory a neustále trénovat techniku psaní. V UI designu to je stejné. Je potřeba nasávat různé inspirace a nemusí to být nutně UI. Důležité je se dívat kolem sebe, ať to jsou designy aut, hodinky, nebo architektura.

Abychom předešli kreativnímu bloku (viz první otázka), je potřeba si dát na design čas, podívat se na návrh s odstupem několik dní. Během roku je také fajn na nějakou dobu úplně vypnout, dát si úplně pauzu od designování a spojit to třeba s cestováním.

Často si ukládám různé designy nebo řešení, na které narazím. Může to být zajímavý vizuál v kampani, kreativní landing page, animace nebo zajímavě vyřešená sekce na webu. Vyskakuje to na mě všude, díky algoritmu už i na Instagramu, TikToku nebo LinkedInu. (smích)

Stránek na inspiraci je hodně, ale pokud bych měl doporučit jednu, kde se inspirovat nebo nebo najít řešení, tak bych doporučil Mobbin. Můžete si tam filtrovat designy podle Flow, pokud například řešíte onboarding, anebo se zaměřit na konkrétní UI elementy.

Pokud bych měl zmínit, co mě v poslední době nakoplo, tak to byly naše UX/UI design kurzy na SKVOTu. Vrátilo mi to chuť předávat znalosti, bavit se o designu a pracovat na sobě v rámci prezentačních dovedností. A také si celkově ucelit znalosti i pro sebe při přípravě prezentací.

Měli jsme opravdu super skupinu zajímavých a motivovaných lidí. Už se těším na další pokračování.

Takhle vypadá hlavní stránka Mobbin
Zdroj: mobbin.com

Všechno se určitě nepovede hned napoprvé. Když děláš redesign, jak poznáš, které prvky zachovat a které potřebují radikálnější řez?

U větších projektů mám výhodu, že pro svou práci mám zadání a podklady od UX. Dále čerpám ze svých zkušeností, z designových principů a patternů.

Co zachovat a jak upravit se pozná z uživatelského testování, důležité je se nespokojit s jednou variantou a dále iterovat. Nebát se diskuze a zpětné vazby, umět si obhájit svoje designové rozhodnutí.

UI design je také o té vizuální stránce, která je subjektivní, takže před prezentací prvních výstupů je důležité mít konkrétní zadání a ujasněné očekávání klienta.

Po spuštění projektu je důležité si dát čas, podívat se na analytiku, co se jak používá. Redesign by neměl končit spuštění projektu a kontinuálně design vylepšovat. Mohou pomoci také různé varianty A/B testů UI prvků.

Podělíš se s námi o oblíbený designový „fun fact“, o kterém třeba spousta lidí neví?

Napadá mě zmínit aesthetic-usability effect. To znamená, že uživatelé mají opravdu tendenci vnímat estetičtější návrhy rozhraní jako uživatelsky přívětivější. (smích) A díky tomu i odpustit drobné nedostatky v použitelnosti. Je na to několik zajímavých případových studií, doporučuji si to vyhledat.

 

Alexandr Pánek

Senior Product Designer v Atlas Copco Group

Sašo, stojíš za redesignem e-shopů Škoda Auto a Kytary.cz. Co tě baví víc? Upravovat, nebo navrhovat od nuly?

Uf, hned na začátek taková těžká otázka. Na tohle se těžko odpovídá, protože obě disciplíny mají své kouzlo. Když se designuje něco od nuly, tak designér není zatížen historií projektu, může se rozhodnout, jak celý design proces nastaví, jak bude získávat data, jakým směrem se vydat, a do jisté míry se může dost „rozšoupnout“.

Zase na druhou stranu, velká výhoda, když designér upravuje již hotové řešení je, že většinou už má přístup k různým datům, což je alfa a omega designu a může z toho čerpat. 

Může se jednoduše dostat ke stávajícím zákazníkům a zjistit kde mají problémy, může zjistit, co byznysově nefunguje na stávajícím řešení. Může se lépe rozhodnout co, kdy a jak bude redesignovat, aby ten rozsah byl zvládnutelný.

Osobně spíše preferuji dělat redesigny, protože tam designér prostě ví, co nefunguje, nebo to zjistí a pak se na to může zaměřit a opravit to. U designů od nuly i přes uživatelské testování může designér šlápnout vedle a navrhne něco, co se pak stejně bude muset redesignovat.

Jak poznáš, že se design nebo redesign povedl? Poplácáš se po zádech, nebo čekáš na tvrdá data?

Jestli bude design povedený, už do určité míry napoví uživatelské testování, ale v konečném důsledku jsou to pak až tvrdá data, nejenom uživatelská data, ale i prodejní, na což se hodně zapomíná. Pokud bude redesign pozitivně přijatý mezi uživateli, ale reálně to nebude naplňovat byznys cíle, pak se za mě ten redesign nepovedl.

Co tě v práci motivuje? A co tě motivovalo na úplném začátku, když sis vybíral, kam se profesně vydáš?

Asi to bude znít divně, ale motivují mě problémy, které musím řešit, a čím komplikovanější výzva, tím lépe. Ono nejde jenom o to udělat to pěkné, ale aby to fungovalo i byznysově a vývojáři to byli schopni dát dohromady v nějakém rozumném čase.

Mnohokrát se mi stalo, že jsem něco navrhl, uživatelsky i byznysově to dávalo smysl, ale po diskuzi s vývojáři jsme došli k závěru, že se to bude muset udělat jinak, a to je to, co mě na té práci baví. Řešení výzev na všech frontách.

A pak samozřejmě to, když člověk něco vymyslí a uživatelům to usnadní jejich práci, to je asi největší odměna pro designéra, když vidí, že to, co navrhl, dává smysl.

Když jsem se rozhodoval, co bych chtěl dělat, design vůbec nebyl na stole. Už v raném věku jsem se dostal ke Commodore, ZX Spectrum, Atari a následně k 386, takže jsem věděl, že chci dělat něco s počítači, a měl jsem za to, že programování je jediná možnost.

Po několika letech snahy stát se úspěšným programátorem jsem usoudil, že to vlastně dělat nechci, nebavilo mě neustále zjišťovat, proč se mi kód nekompiluje, a začal jsem víc tíhnout ke grafice.

Ze začátku to byly hlavně bannery a tisková grafika a postupem času jsem přešel k designům webů, Flash bannerů, mobilních aplikací, od čehož už je pak jenom krůček k UX. Myslím si, že to je takový normální vývoj UI designéra, že postupem času přejde k UX a začne se více zajímat o to „proč“ než jaké barvy použít. Což byl i můj případ.

Přestalo mě bavit kreslit pěkné weby, víc mě to táhlo k tomu být už u zrodu zadání a zpochybňovat to a hledat alternativní cesty ke stejnému cíli.

Číst

Spravuješ B2B e-shopy, dělal jsi redesigny B2C e-shopů i design aplikací. To je na product designéra asi docela široký záběr, co?

Ono to tak nějak vyplynulo ze situace. Dělal jsem skoro pět let v jedné z největších konzultantských firem na světě, kde si člověk úplně nevybírá, na čem bude pracovat. Dostane přiděleno několik projektů a jede. Takže se musí umět přizpůsobit danému projektu a jeho potřebám.

Například jsem pracoval na aplikaci na zpracování daňového přiznání pro německé expaty nebo na aplikaci pro odhalování krádeží zaměstnanců na prodejnách atd.

To je ale ta krása tohoto oboru. Každý projekt vyžaduje jiné přístupy, jiné metody, ale v konečném důsledku je to vlastně dost stejné. Na začátku máš nějaký problém nebo cíl, ke kterému se chceš dostat, a pak už je jenom na tobě, jak se k tomu finále dobereš.

Setkal ses s nějakou appkou, která podle tebe vypadá opravdu parádně, ale UX by potřebovalo vylepšit? A naopak s aplikací, která podle tebe vypadá opravdu parádně? 

Tohle se dost težko hodnotí, protože nemáš ten kontext za tím, proč se něco navrhlo tak, jak se navrhlo. Může za tím být nějaká agenda byznysu, který si to takhle protlačil, nebo legislativní požadavky nebo prostě nebyl čas a finance to dotáhnout do konce.

Samozřejmě, že jako designér jsem „zdegenerovaný“ svým oborem, takže na všechno, co používám, koukám jinou optikou. Většinou dost často u počítače nadávám. (smích)

Z vlastní zkušenosti vím, že občas se ty funkce pustí mezi uživatele v suboptimálním stavu, protože to prostě jinak nešlo, takže už bývám shovívavější i vůči jiným aplikacím a webům, které používám.

Jo, ptali jste se na nějaké příklady. Hodně se mi líbí fintech mobilní aplikace Wise, jak po stránce vizuální, tak po stránce UX. Nedávno jsem objevil mobilní aplikaci MacroFactor (obdoba českých Kalorických tabulek) na trackování jídla. Využívá AI a další technologie a myslím si, že je velmi podařená i po stránce použitelnosti.

Interface aplikace MacroFactor
Zdroj: macrofactorapp.com

Co by si měl ideálně vyzkoušet každý UX/UI designér alespoň jednou v životě? 

Chtěl jsem tady zmínit hodně situací. Pak mi došlo, že to jsou vlastně věci, které budou používat designéři tak nějak pořád.

Namátkou třeba prezentovat designy vysoce postaveným manažerům, kterým je jedno, jestli to tlačítko je modré nebo žluté. Strávit den pozorováním budoucího uživatele aplikace, která se bude designovat, aby pochopil, co všechno ten člověk musí dělat na denní bázi a jak mu ta aplikace může usnadnit den atd.

Pokud bych měl ale vypíchnout jenom jednu věc, tak by to bylo moderovat uživatelské testování vyloženě s uživateli, kteří nejsou technicky zdatní, a nechat je otestovat nějakou aplikaci.

To je asi největší designérská lekce, která předá hrozně moc. Naučí tě to empatii, trpělivosti, správně pokládat otázky a změní to úplně pohled na to, jak člověk designuje a jak to pak reálně „obyčejní“ lidi budou používat.

A jak podle tebe vypadá peklo pro UX/UI designéry? Čím je tam mučí?

Kolik máme času na tento rozhovor? (smích) Těch výzev je tam opravdu mnoho, ale za spousty z nich si můžou i sami designéři.

Asi největší peklo je, když designér dostane finalní zadání co má nakreslit a očekává se, že už nebude nic zpochybňovat, nebude klást otázky, získávat data a bude pouhý „pixel pusher“ neboli posouvač pixelů na obrazovce, který to tupě nakreslí.

Designér musí být tak trochu i analytik a víc přemýšlet nad zadáním, nad všemi dopady, co to může mít na byznys a uživatele. Jak celé to zadání funguje v rámci celého projektu, co to rozbije, kde to změní cestu zákazníka, prostě nad vším. A vše, co vymyslí, musí mít podložené. To samotné kreslení je opravdu ta poslední věc.

Takže moje rada na závěr: Zeptejte se vždy, proč se to má dělat!

Díky moc za parádní tipy i rozhovor. Uvidíme se na kurzu.