Volte správný designový přístup pro co nejlepší řešení

Design aplikací se od designu webových stránek v mnohém odlišuje. Typicky jde o interaktivní produkty, u kterých je velice důležité správně navrhnout všechny interakce. Zatím co u webových stránek jde primárně o obsah. (Jednoduše řečeno.)

Nedávno jsme v GoodData diskutovali konkrétní případ UI elementu pro nové dashboardy. Na stole jsme měli několik variant pro řešení všech možných stavů. A já jsem si během této diskuze uvědomil, že jsme se nikdy nebavili o možných přístupech k řešení podobných věcí.

Jako designeři nad návrhem určitým způsobem uvažujeme. Vždy máme určité možnosti, osobnost, cítění, atp. Což se v konečném návrhu určitým způsobem projeví. A výsledek může pozitivně i negativně ovlivnit.

Design vyjadřuje přístup a cíle

V každém aspektu designu je potřeba mít neustále na paměti, pro koho řešení navrhujeme a čeho chceme dosáhnout. Proto bychom měli mít pro design jasnou strategii.

Je to vlastně i důvod, proč respektujeme a dodržujeme základní designové principy, návrhové vzory, heuristiky, atp. Například:

  • Předcházet designem chybám.
  • Lidé by měli mít produkt pod kontrolou a mít určitou svobodu.
  • Produkt by měl jít snadno a efektivně používat.

A další. (Určitě znáte 10 heuristik použitelnosti nebo Schniedermanova Zlatá pravidla.)

Podobné věci jsou určitě velice důležité. Pomáhají nám tvořit dobře použitelné produkty. Které nebudou bariérou a umožní lidem uspět a dosáhnout jejich cíle. Jenže to z mého pohledu není všechno.

Abychom totiž dosáhli dobrého výsledku, musíme také zaujmout určitý postoj. Nebo lépe – zvolit určitý přístup. Nejen k samotnému designu, ale ke všem aspektům v celém procesu vývoje produktu.

A takových přístupů existuje několik. U interaktivních aplikací bych zmínil především tyto dva nejčastější:

  • Optimistický,
  • Pesimistický.

Setkal jsem se také s několika dalšími. Většinou šlo o různé kombinace výše zmíněných. Existují ale i dva přístupy, které už nejsou tak časté. Ale jsou bezesporu zajímavé. Jde o přístupy:

  • Idealistický,
  • Paranoidní.

Už ze samotných názvů můžete usoudit, o co se jedná. A že nějak souvisí s uvažováním a osobností člověka. Je to opravdu hodně podobné, protože právě člověk řešení navrhuje a jeho osobnost se do návrhu promítá.

Mezi těmito přístupy jsou určité rozdíly. Hlavně v tom, co do designu přináší. A abyste si je mohli dobře představit, porovnám je na konkrétním příkladu.

Poznámka: Tyto přístupy se zcela běžně při tvorbě produktů využívají. Jak se můžete dočíst například v článku Optimistic vs Pessimistic Locking. Mám ale pocit, že se o nich v rámci designu téměř vůbec nemluví.

Příklady jednotlivých přístupů

Představte si následující scénář:

„Potřebuji rychle vyhledat specifický obsah podle konkrétních kriterií, abych rychleji našel to, co potřebuji.“

Jako výsledné řešení jste navrhli možnost filtrovat obsah pomocí drop-down elementu (nebo také select boxu).

V rámci příkladu mohou lidé obsah filtrovat podle dvou kritérií: značka a zařízení.
V rámci příkladu mohou lidé obsah filtrovat podle dvou kritérií: značka a zařízení.

Představte si to jako problém v rámci interaktivní aplikace, kdy:

  • Lidé mohou sami doplňovat různá kritéria a hodnoty.
  • Každá položka obsahu má tato kritéria přidělena.
  • Je vše uložené na serveru.

Jak bude takové výsledné řešení vypadat pro různé přístupy?

Optimistický

Tento přístup je založen na tom, že neočekává různé okrajové případy, tzv. edge cases. Které mohou nastat opravdu zřídka. A zaměřuje se na to hlavní – co lidé potřebují a chtějí udělat. Cílem vždy je, aby byly interakce rychlé a přímé.

Po kliknutí na drop-down se zobrazí seznam hodnot, které je ale potřeba nejprve načíst
Po kliknutí na drop-down se zobrazí seznam hodnot, které je ale potřeba nejprve načíst.

Aby byli lidé schopni obsah filtrovat, je potřeba položky načíst. Zároveň očekáváte, že zde bude více hodnot. Čemuž jste design přizpůsobili, například:

  • Seznam je hned od začátku vizuálně delší (čímž chcete nastavit určité očekávání).
  • Doplňující možnosti – vyhledávání a zkratky – zobrazíte rovnou.
Při potvrzení výběru jsou hodnoty okamžitě aplikovány na obsah.
Při potvrzení výběru jsou hodnoty okamžitě aplikovány na obsah.

Pokud si člověk vybere konkrétní hodnoty a výběr potvrdí, rovnou je aplikujete na obsah. A tváříte se, že vše dopadlo dobře. Protože neočekáváte, že by zde mohla nastat jakákoliv chyba.

Lidé tak mohou s obsahem okamžitě pracovat. A nebo vybrat hodnoty z dalších kritérií.

Všechny filtry fungují stejně.
Všechny filtry fungují stejně.

Jak můžete vidět na předchozím obrázků, pro filtr se načte méně hodnot. A seznam tak bude delší a může obsahovat mezeru. Nevnímáte to jako nějaký zásadní problém a design jste přizpůsobili mnohem častějším případům.

Při další interakci s již použitým filtrem není hodnoty potřeba znovu načítat.
Při další interakci s již použitým filtrem není hodnoty potřeba znovu načítat.

Pokud bude chtít člověk změnit hodnoty u již použitého filtru, zobrazíte je okamžitě bez nutnosti je znovu načítat. V návrhu jste totiž neočekávali, že by se mohli během interakce jakkoliv změnit.

Výhody

  • Design nabízí přímočaré a plynulé interakce.
  • Lidé rychleji dosáhnout toho, co potřebují.
  • Lidé nebudou mít s ovládáním problém, protože využíváte běžné návrhové vzory.

Nevýhody

  • Řešení okrajových případů nemusí být dobré, například v případě nastalých chyb.
  • V případě výše zmíněného je zde riziko, že lidé budou zmatení a čas dokončení bude pomalejší.

Osobně bych tento přístup nazval jako Design pro lidi spíš než pro systém. Řešení totiž vychází především z toho, čeho lidé potřebují dosáhnout.

Pesimistický

S tímto přístupem si často budete říkat: „… a co když se to stane? Měli bychom s tím počítat a vyřešit to!“. Je totiž hodně založen na tom, že počítá s hraničním stavům, které mohou způsobit zmatení nebo následné složitější interakce.

Návrhem řešíte všechny možné situace (i méně časté). Vaším cílem je samozřejmě udělat interakce co nejrychlejší a nejpřímější, ale zároveň počítáte s různými limity. A chcete předejít případnému zmatení.

Po kliknutí na drop-down se zobrazí seznam hodnot, které je ale potřeba nejprve načíst.
Po kliknutí na drop-down se zobrazí seznam hodnot, které je ale potřeba nejprve načíst.

Aby byli lidé schopni obsah filtrovat, je potřeba položky načíst. Očekáváte, že zde může být méně hodnot a raději tomu design přizpůsobíte, například:

  • Seznam je od začátku kratší, protože chcete v takovém případě nastavit správné očekávání. A chcete případným mezerám.
  • Doplňující možnosti – vyhledávání a zkratky – zobrazíte až v případě, kdy víte počet položek. Pro méně hodnot nedávají smysl.
Po potvrzení výběru nemusí vše dopadnout dobře.
Po potvrzení výběru nemusí vše dopadnout dobře.

Pokud si člověk vybere konkrétní hodnoty a výběr potvrdí, očekáváte, že tato operace nemusí dopadnou dobře. Proto raději počkáte na odezvu ze serveru a mohli případně zobrazit vhodnou chybovou hlášku. Když máte úspěšnou odpověď, hodnoty aplikujete na obsah a drop-down zavřete.

Seznam se přizpůsobí počtu zobrazovaných hodnot. Proto musím počkat na jejich načtení.
Seznam se přizpůsobí počtu zobrazovaných hodnot. Proto musím počkat na jejich načtení.

Očekávám, že zde může být méně hodnot. Proto raději počkám na jejich načtení a seznam přizpůsobím počtu hodnot. Hlavně kvůli tomu, abych jej během interakce nemusel zmenšovat. Což by z mého pohledu působilo rušivě.

Při další interakci s již použitým filtrem hodnoty raději opět načtu. Co když mezitím došlo k nějaké změně?
Při další interakci s již použitým filtrem hodnoty raději opět načtu. Co když mezitím došlo k nějaké změně?

Pokud bude chtít člověk změnit hodnoty u již použitého filtru, raději hodnoty načtete znovu. Počítáte totiž s možností, že se mohly nějak změnit, například někdo mohli přidat nové nebo některé odebrat.

Výhody

  • Budete mít vyřešené okrajové případy a méně časté situace.
  • Lidé nebudou mít s ovládáním problém, protože využíváte běžné návrhové vzory.

Nevýhody

  • Kvůli určitým prodlevám musíte očekávat pomalejší čas dokončení.
  • Design je podvolen okrajovým případům místo hlavního flow.

Osobně bych tento přístup nazval jako Design pro lidi používající systém. Řešení totiž vychází z toho, co daný systém umožňuje. A vy chcete vyřešit jeho určité nedostatky tak, aby nepůsobili lidem problém.

Idealistický

Tento přístup počítá s tím, že se nikdy nic špatného stát nemůže. Protože design se snaží vše ideálně řešit a okrajovým situacím předcházet. Cílem je totiž problém co nejlépe vyřešit a lidem práci usnadnit. K čemuž využívá možnosti technologií.

Po kliknutí na drop-down se hodnoty okamžitě zobrazí.
Po kliknutí na drop-down se hodnoty okamžitě zobrazí.

V návrhu jste počítali s tím, že lidé budou obsah filtrovat. Proto jste hodnoty načetli na pozadí. A kdyby se před samotnou interakcí cokoliv změnilo, hodnoty se na pozadí automaticky aktualizují. (Například pomocí technologie WebSocket.)

Při potvrzení výběru jsou hodnoty okamžitě aplikovány na obsah.
Při potvrzení výběru jsou hodnoty okamžitě aplikovány na obsah.

Pokud si člověk vybere konkrétní hodnoty a výběr potvrdí, rovnou je aplikujete na obsah. Protože jste svým designem zařídili, že chyba nenastane. Například díky tomu, že:

  • Automaticky uděláte re-try takového požadavku.
  • Obsah načtete s danými kritérii a hodnotami. A nebudete se tak muset dotazovat serveru.

A další možná technická řešení.

Lidé díky tomuto přístupu mohou s obsahem okamžitě pracovat. A nebo vybrat hodnoty z dalších filtrů.

Stejným způsobem vyřešíte všechny filtry.
Stejným způsobem vyřešíte všechny filtry.

Stejným přístupem jsou řešeny všechny filtry. U kterých není potřeba hodnoty načítat nebo je dynamicky měnit.

Při další interakci s již použitým filtrem není hodnoty potřeba znovu načítat.
Při další interakci s již použitým filtrem není hodnoty potřeba znovu načítat.

Pokud bude chtít člověk změnit hodnoty u již použitého filtru, zobrazíte je okamžitě bez nutnosti jejich načtení. V návrhu jste vyřešili i případné změny na pozadí.

Výhody

  • Design nabízí přímočaré a plynulé interakce.
  • Lidé velice rychle dosáhnou toho, co potřebují.
  • Lidé nebudou mít s ovládáním problém, protože využíváte běžné návrhové vzory.
  • Řeší všechny možné stavy a automaticky jim předchází.

Nevýhody

  • Takové řešení může být technologicky hodně náročné.
  • Řešení je také náročné na promyšlení a správnou funkční realizaci.

Osobně bych tento přístup nazval jako Design digitálních produktů pro lidi. Design s takovým přístupem skutečně přináší co nejlepší řešení za využití technologií.

Paranoidní

Při používáni produktu očekáváte mnoho různých problémů – nejen technologických, ale i těch ze strany uživatelů. Lidé totiž mají různé znalosti a zkušenosti, jsou iracionální, atp. A vy chcete předejít všem případným komplikacím.

Vaším cílem je zabránit jakémukoliv zmatení, chybám a „nedodělkům”. Chcete také zabránit tomu, aby si lidé omylem přivodili nějaký problém a nebo způsobili chybu ve vašem systému.

Po kliknutí na drop-down se zobrazí seznam hodnot, které je ale potřeba nejprve načíst.
Po kliknutí na drop-down se zobrazí seznam hodnot, které je ale potřeba nejprve načíst.

Aby byli lidé schopni obsah filtrovat, je potřeba položky načíst. Nejste si jisti, kolik zde může být položek a zda se je vůbec podaří načíst. Čemuž jste design uzpůsobili a seznam otevřete až v případě, kdy se podaří hodnoty načíst a znáte jejich počet.

Po potvrzení výběru nemusí vše dopadnout dobře. Člověk se také mohl ukliknout.
Po potvrzení výběru nemusí vše dopadnout dobře. Člověk se také mohl ukliknout.

Pokud člověk vybere dané požadované hodnoty a potvrdí výběr, očekáváte, že tato operace nemusí dopadnout dobře. Ba co víc – zároveň očekáváte, že se mohou lidé ukliknout. Čemuž se pokusíte předejít díky potvrzovacímu dialogu.

Pokud skutečně chtějí hodnoty vybrat, počkáte na výsledek této operace. A protože by lidé mohli během čekání vybrat další hodnoty, raději jim takové možnosti zakážete. Aby pak nebyli překvapení, že se takové hodnoty neaplikovaly.

A stejným způsobem jste navrhli všechny filtry.
A stejným způsobem jste navrhli všechny filtry.

Při další interakci s již použitým filtrem hodnoty raději opět načtu. Protože co když mezitím došlo k nějaké změně?

Pokud bude chtít člověk změnit hodnoty u již použitého filtru, hodnoty znovu načtete. Mohlo se totiž mezitím cokoliv změnit – například někdo odebral uživatelem vybranou hodnotu. A vy chcete mít prostor lidem takovou situaci vysvětlit a předejít tak případnému zmatení.

Výhody

  • Budete mít podchycené okrajové případy a méně časté situace.
  • Návrh řeší možná nedorozumění, která by mohla práci komplikovat.

Nevýhody

  • Kvalita bude degradována pro řešení okrajových přístupů.
  • Při práci se budou muset lidé vypořádat se zbytečnými prvky a situacemi.
  • Kvůli určitým prodlevám musíte očekávat pomalý čas dokončení.
  • Riziko, že porušíte známé návrhové vzory a konvence. (Například otevřete drop-down až po určité době).

Osobně bych tento přístup nazval jako Design systému používaný lidmi. Design se totiž zaměřuje především na možnosti systému a jeho fungování. A v mnoha směrem bere lidi samotné jako problém.

Jaký přístup si vybrat a proč?

Z příkladů jsou patrné určité rozdíly, které budou u složitějších problémů hrát velice podstatnou roli. Protože každý přístup nabízí různé příležitosti a rizika, může značně ovlivnit výsledek.

Osobně bych řekl, že výběr vhodného přístupu záleží na několika faktorech:

  • Jaké máme technologické možnosti.
  • Jak se na řešení dívá samotný designér (co je důležité a proč).
  • Jaké máme s problémem zkušenosti.

Z toho se pak samotný vyvíjí.

Já jsem například věčný idealista. Nespokojím se jen tak s nějakým řešením – vždy chci to nejlepší. A jsem tomu ochoten obětovat hodně. Například nad řešením přemýšlím tímto způsobem:

  • Technologie jsou tu pro to, aby nám sloužily – ne proto, abychom byli jejich otroky.
  • Mnoho omezení lze správným přístupem „zlomit“ a vytěžit tak pro lidi maximum.

Na druhou stranu si troufnu říct, že dokáži poznat, kdy takový přístup nedává smysl. A ač to s mým smýšlením koliduje, mnohdy raději udělám to nejlepší řešení s tím, co mám zrovna k dispozici a vzhledem k tomu, co o daném problému vím.

Když jsme v GoodData poměrně nedávno navrhovali novou aplikaci pro nahráváni dat, zaujali jsme už od začátku pesimistický přístup. Máme totiž zkušenosti s tím, že data budou ve velké míře obsahovat nejrůznější chyby. Se kterými se nedokážeme technologicky popasovat. A proto jsme design uzpůsobili tomu, aby lidé takové chyby dokázali efektivně opravit.

Z mého pohledu je určitě nejlepší, když z nároků postupně slevíme a nebudeme zbytečně předjímat problémy, které mohou nastat opravdu hodně okrajově. A kvůli kterým bychom řešení zbytečně komplikovali. Vždy bude lepší problém řešit v případě, kdy se objeví a nebo kdy něco nepůjde udělat zcela podle našich představ.

Je tu ale ještě jeden přístup. Který jsem záměrně ignoroval – tedy pragmatický přístup. (O kterém jsem se částečně zamýšlel v článku Být pragmatický designér není vůbec snadné.)

Ten se od ostatních totiž odlišuje v samotné podstatě – pro co nejlepší řešení využít toho, co je právě teď k dispozici. Což bych, jednoduše řečeno, přirovnal ke kombinaci idealismu, optimismu i pesimismu.

Vždy je nejdůležitější při návrhu řešení myslet na to, pro koho jej vlastně navrhujeme a proč. A jak mu práci co nejvíce usnadnit. A vyvarovat se zbytečných komplikací kvůli vnitřním obavám, které mohou být ve skutečnosti plané.

Nezapomínejte na to, pro koho řešení navrhujete

Jako designeři tu nejsme od toho, abychom balancovali mezi mantinely různých omezení. Jediným omezením, které bychom měli mít na paměti, je člověk samotný – tedy jeho možnosti, schopnosti, atp.

V porovnání s ním se dají veškerá omezení velice snadno zlomit. Nebo alespoň navrhnout řešení tak, abychom je skryly a nebo je řešil právě samotný design a ne člověk.

Samozřejmě vždy nebudeme mít tolik prostředků, abychom si mohli něco dovolit. A budeme se muset konkrétním způsobem rozhodnout. Nikdy ale nesmíme dopustit, aby váš úsudek negativně ovlivnila vaše osobnost a ego. Že například upřednostníme řešení nedostatků systému před tím, o co se lidé snaží. A pokud se tak stane – bohužel jsme jako designeři selhali.

Když budeme mít na paměti, že vše co děláme, děláme pro lidi, vždy dokážeme vybrat vhodný přístup a navrhnout dobré řešení. Pokud budeme neustále bilancovat na hraně omezení, nikdy nikoho nepřesvědčíme, že je potřeba taková omezení zlomit.


Sdílejte článek



Michal Maňák

Jmenuji se Michal Maňák, jsem Interaction Designer a Digital Product Designer.

Pracuji ve společnosti LMC.