UX pro vývojáře: pokročilé techniky

Jednoduché problémy v UX snadno jako vývojáři vyřešíte sami nebo pomocí best-practice, jako například v předchozím článku 21 tipů pro lepší UX.

Pokročilejší UX postupy, které jsou obsahem tohoto článku, vám pomohou s řešením komplikovaných problémů. Abyste je použili, musíte překročit svou komfortní zónu. Někdy vyžadují soft skills, někdy prostou zvídavost.

Každý vývojář se může naučit základy práce UXáků, které z něj udělají lepšího vývojáře. Hodnota takových lidí na trhu práce pak rapidně roste.

1) Zadání (získejte dobré zadání)

Nespokojte se se špatným zadáním.

Vaše práce bude jen tak dobrá, jak dobré dostanete zadání. A jelikož klient není odborník, dobré zadání vám nikdy sám od sebe nepřipraví.

Kvalitní zadání něco stojí. Je v pořádku vyhradit si na něj čas a nacenit jej.

Když něco nedává smysl, musíte se ptát. (Přečtěte si knihu Začněte s proč od Simona Sineka.)

Ptejte se po záměru — co chce klient vyřešit. Dejte mu na výběr další možnosti řešení. Klient o jejich existenci možná vůbec neví.

Pokud pracujete sami, neváhejte si rozšířit obzory o tyto metody UX. Pokud je vám to proti srsti, budete muset na tvorbě zadání s někým spolupracovat.

Když něco není domyšlené, připravte se na to, že jednou to někdo bude muset domyslet. Se špatným zadáním to pravděpodobně budete vy.

2) Nebojte se ozvat

Designér je jenom člověk, nerozumí všemu a dělá chyby.

Oponujte designérovi jeho návrhy. Pokud se neozvete, můžete si být jistí, že zadání bude obsahovat minimálně jednu složitost, kterou nebudete programovat rádi a které jste se mohli vyhnout.

U nás v Liquid Design jsme několikrát v průběhu návrhu pořádali tzv. technická kolečka. Designér vzal svůj návrh a prezentoval jej vývojářům. Oni se doptávali podrobněji na funkčnost a dávali designérovi technickou zpětnou vazbu na složitost řešení.

Vždycky to zlepšilo proveditelnost návrhu a někdy vznikly i nové nápady a zlepšilo to kvalitu návrhu. Divil jsem se, že spousta týmů tohle nedělá a vývojáři pak na taková zadání nadávají.

3) Nespěchejte s řešením

Nevymýšlejte, jak to vyřešit, když jste na začátku procesu a zjišťujete, co nefunguje. Neškrtejte řešení, když generujete nápady.

Cílem je najít správný problém a vyřešit jej správně. Správně řešený špatný problém dělá všechno ještě horší.

Designérům všechno trvá. I tohle už jsem slyšel. Něco má snadné a rychlé řešení, ale velká část problémů vyžaduje pořádné zamyšlení a rozbor problému. Nejde to zkrátit.

Když budete všechno házet do jednoho pytle a dělat pouze rychlé řešení, připravíte se o hromadu nápadů a lepších řešení.

Základ je oddělit řešení problému na dvě fáze:

1. Zkoumáme oblast.
2. Hledáme řešení.

Přičemž první bod se dělí na a) hledáme všechny možné problémy, b) vybíráme správné problémy k vyřešení.

Stejně tak druhý bod se dělí na a) navrhujeme všechny varianty řešení, b) vybíráme nejlepší řešení.

Tento základní designérský proces se nazývá Double Diamond. Není složitý.

4) Pozorujte

Vystrčte hlavu z kanceláře - bez uživatelů nenajdete nápady na dobré řešení komplikovanějších problémů.

Nemusíte umět uživatelské testování, abyste mohli pracovat s uživateli. Pozorování stačí. Sedněte si k někomu za záda.

Zobrazit příspěvek na Instagramu

Příspěvek sdílený Liquid Design s.r.o. (@lqdcz)

Nechejte to na chvíli používat přítele, přítelkyni nebo kamaráda.

Připravte se, že vám to rozbije a bude to používat možná úplně jinak než jste to navrhli.

Uživatelé se zkrátka chovají zvláštně. (Přečtěte si knihu: Jak drahé je zdarma od Dana Arielyho)

Cílem je, aby bylo ovládání aplikace předvídatelné. Vyhovte jim.

5) Analogie z reálného světa

Svět kolem nás poskytuje hromadu nápadů na řešení, které všichni dobře známe. Každý den je máme na očích. Nepřemýšlíte nad nimi. Jsou známé. Jsou jasné.

Barvy semaforu pro stav úkolu. Tvary a barvy dopravních značek pro pokyny. Přesun souborů do koše, vytažení z koše, vysypání koše.

Všímejte si, jestli existuje na problém přirovnání v reálném světě.

6) Designové vzory

Většina situací už byla vyřešená a existují na to tzv. designové vzory. Těch základních není moc a když se je naučíte, máte rychlé řešení vždy po ruce.

Mnoho problémů v uživatelském rozhraní vzniklo jen díky tomu, že vývojář potřeboval nějaké řešení a sáhl po první komponentě, která splnila funkci.

Znalost návrhových vzorů vám umožní rychleji sáhnout po správné komponentě, která je zažitá a zapadá do dané situace.

Pár tipů na zdroje:

• goodui.org
• ui-patterns.com/patterns
• checklist.design
• reallygoodux.io/categories
• smileycat.com/category/elements-of-design

7) Kopírujte

Najděte podobnou aplikaci. Podívejte se, jak problém vyřešila.

Promyslete, jestli to vyhovuje vaší aplikaci. Kopírováním sice nebudete inovační, ale snížíte riziko, že to zásadně zkazíte.

Kopíruje každý. Kopíruje se skrz korporace, agentury, kopírují lidi mezi sebou. Není chyba kopírovat. Chyba je nedělat nic jiného.

Spousta vychytaných věcí vznikla tak, že designér vzal naprosto běžnou věc a vylepšil na ní drobnost. A nápady na vylepšení vyjdou často najevo z uživatelského výzkumu a patří tam i pozorování (viz bod 4).

8) Netlačte na lidi

Nechte pracovat uživatele v tempu, jaké sám chce — vyhněte se automatickému spouštění čehokoliv, co uživatel nemá pod kontrolou. Žádné automatické karusely.

Stejně tak automatické slidery — radši je nechejte, ať si to posunou sami a k tomu jim dejte víc informací. Třeba co je na dalších slajdech zajímavého, viditelné ovládání a indikátor pozice, kde se ve slideru uživatel nachází.

Místo přípravy tutoriálu, jak používat aplikaci, raději připravte kontextové tipy. Tutoriál nemusí být zrovna to, co chtějí po spuštění aplikace studovat. Zavřou jej a pak tápou, jak to v aplikaci funguje.

Žádné popupy při vstupu. Slevy na nákup nabídněte až když je uživatel rozhodnutý nakupovat.

9) Buďte vždy konzistentní

Používejte stejné názvy a popisky, ikony a tvary, barvy a ovládací prvky. Používejte pro stejné typy obsahu stejné komponenty.

Komunikujte v uživatelském rozhraní srozumitelně. Klíčová slova dávejte na začátek popisků.

Špatně	Správně
„Obrázek nemá odpovídající velikost.“	„Velikost obrázku musí být minimálně XY.“ (správná velikost je ten problém)
„Dokument nastavit na veřejný.“	„Publikovat dokument na webu veřejně.“ (publikování je to, o co ve funkci jde)
„Nyní můžete galerii upravovat.“	„Galerie je připravena k úpravám.“ (sdělení se týká galerie)

Používejte u funkcí stejné názvosloví. Pořadí informací ponechejte také stejné. Různé výrazy mohou mít různé významy:

• „Jazyková mutace“
• „Jazykové nastavení“
• „Jazykový překlad“
• „Jazyk“
• „Vícejazyčnost“

Definujte pro svou aplikaci slovník a dodržujte jej.

Uživatelské rozhraní není o kreativitě, ale o snížení kognitivních nároků na uživatele. Nemusí nad každou informací tolik přemýšlet, naučí se rychleji ovládání a dovede program rychleji používat.

Vytvořte si pravidla pro pojmenování funkcí. Vycházejte ze slovníku, který je ve vašem odvětví standardní.

10) Nejdřív to důležité

Často používané funkce musí být umístěné na snadno dostupných místech, viditelné a zvýrazněné oproti méně používaným funkcím.

I v tomto případě platí Paretovo pravidlo 80/20 — 80 % času lidé používají jen 20 % funkcí programu. Zjistěte, které to jsou.

Běžný Franta uživatel není zrovna geek. Nemá rád sekci nastavení, chce jednoduchý program a dá vám palec nahoru, když mu zobrazíte jen to, co právě potřebuje. Chce si vyřídit povinnosti a program zavřít. Franta je lenoch.

11) Dekorace pryč

Dekorace a rozptylující prvky — jestli to je dekorace, je vždy na zvážení, zda je vhodná a zda se jí lze zbavit.

Stává se, že uživatelé vnímají dekorace jako nějaké sdělení. Je to červené = něco je špatně. Vypadá to jinak = něco se v tom změnilo.

Kreativní prvky je matou. Obzvlášť tam, kde kreativitu vůbec neočekávají, třeba v informačním systému.

Zbytečné dekorace dejte pryč.

12) Neobtěžujte

Neobtěžujte uživatele s něčím, co můžete vyřešit sami. Třeba formát zadávaných dat:

• Nechejte je zadávat PSČ s mezerami i bez mezer.
• Opravte v e-mailu diakritiku.
• Nabídněte sami správnou předvolbu telefonu.
• Zformátujte si zadané GPS dle potřeby.

Neposílejte e-mail s odkazem na zprávu v uživatelské sekci. Zobrazte mu rovnou tu zprávu.

Nabídněte mu vyplnění údajů, které už znáte nebo které zadával posledně.

Závěr

Když ve vašem vývojářském týmu chybí designér, není to nikdy dlouhodobě udržitelný vývoj a jednou bude potřeba udělat radikální zásah, který bývá náročný.

Několikrát jsem se ale přesvědčil, že tým schopných vývojářů dovede vyřešit i bez designéra řadu náročných problémů. Musí být pouze ochotní jít za hranice kódu.

Jenom když překročíte práh kanceláře, naučíte se něco víc o svých uživatelích. Každý krok na místo, kam ostatní už jít nechtějí, z vás udělá lepšího vývojáře.

Bonus: Rozhodujte líp

Abyste mohli rozhodnout o postupu, musíte pochopit problém. Pro klasifikaci problémů existuje velmi jednoduchý framework CYNEFIN (Dave Snowden, IBM), Youtube).

• Jednoduché problémy vyřešíte sami tím, že sáhnete po zdroji s best-practice.
• Komplikované problémy vyžadují zapojení experta, který pochopí situaci, provede analýzu a zvolí řešení.

Tyto dvě skupiny jsou řešitelné bez větší námahy, samostatně a často souvisí s uživatelským rozhraním (UI).

• Komplexní problémy vyžadují průzkum — v UX obvykle provedení uživatelského výzkumu, abychom pochopili problém a mohli jej správně vyřešit.
• Chaotické problémy vyžadují okamžité jednání. Ihned provedete nějakou akci, pochopíte, jak se prostředí chová a zvolíte řešení. Na základě těchto experimentů pak vznikají zcela nové postupy.

Tyto dvě skupiny problémů nejsou řešitelné bez kontaktu s prostředím, ve kterém se vyskytují uživatelé. Zde spočívá podstata UX, protože…

Bez uživatele není UX.