Špatný a dobrý design: 5 příkladů, ze kterých se můžeme poučit

Pohled na příklady špatného designu vedle protipříkladů dobrého designu je nejen zábavný, ale přináší i důležité poučení pro designéry. Upozorňují na nástrahy, kterým by se měli designéři vyhnout, a umožňují nám pochopit, jak převést teorie designu do řešení, která fungují v reálném světě. Jared Spool, americký spisovatel, výzkumník a odborník na použitelnost, jednou řekl: „Dobrý design, pokud je udělán dobře, se stává neviditelným. Teprve když je udělán špatně, všimneme si ho“. Podívejme se tedy na pět příkladů zjevně špatného designu, posviťme si na to, jak díky dobrému designu funguje, a vydestilujme několik ponaučení, abychom všichni mohli vytvářet skvělé a neviditelné zážitky pro naše uživatele.

Přehlcení informacemi

Špatný: Parkovací značky v Los Angeles

Parkovací značky v Los Angeles (LA) jsou již desítky let ztělesněním informačního přetížení. Jejich pochopení bylo vždy notoricky známé, protože dopravní předpisy jsou složité, což vede k nutnosti sdělit na malé ploše velké množství informací.

Jak moc jsou tyto značky matoucí? Tradičně velmi – podívejte se na tento příklad z roku 2010:

Autor/držitel autorských práv: Jorge Gonzalez. Autorskoprávní podmínky a licence: Představte si, že jste řidičem na této silnici v úterý ráno v 9:00. Můžete na tomto místě zaparkovat? To, co zní jako jednoduchá otázka, vyžaduje spoustu mentálního zpracování.

Jako designéři se často setkáváme se situacemi, kdy musíme navrhnout zobrazení velkého množství informací na malém prostoru. Parkovací značky v Los Angeles mohou být extrémním případem, ale mnohokrát znamená navrhování mobilních aplikací čelit stejným problémům. Existuje nějaké východisko – jak pro parkovací značky, tak pro designéry obecně?

Dobré:

Navrhnout značku tak, aby zobrazovala všechny informace a zároveň byla srozumitelná, zní jako nemožný úkol. Ale přesně to se podařilo brooklynské designérce Nikki Syliantengové.

Autor/držitel autorských práv: Nikki Sylianteng. Autorské podmínky a licence:

Nikkiin návrh parkovací značky byl nakonec použit v Los Angeles v rámci zkušebního provozu.

Částí toho, proč Nikkiin návrh1 dobře funguje, je to, že je zaměřen na uživatele: Nikki si uvědomila, že řidiči chtějí jednoduše vědět, zda mohou na daném místě zaparkovat. Ano nebo ne – to je vše, co řidiči potřebují, a to je vše, co značka parkoviště zobrazuje.

Její návrh také využíval ke sdělení informací spíše vizuální prvky než text. Výsledek je neuvěřitelně intuitivní: zelená pro OK, červená pro zákaz parkování. Je dokonce navržena pro barvoslepé, s pruhy pro Zákaz parkování.

Teď, když se na značku podíváte, budete vědět, že v úterý v 9 hodin ráno je parkování zakázáno. Pruhy na první pohled ukazují, co je co – je to jednoduché.

Poučení: Osvědčené postupy

• Pochopte, co vaši uživatelé potřebují, a podle toho pak navrhujte. To pomůže snížit informační zahlcení.
• Máte spoustu informací, které musíte uživatelům sdělit? Zkuste místo textu použít vizuální prvky. Více o vizualizaci dat se dozvíte zde.

Mystery Meat Navigation

Špatné: Záhadná navigace (Mystery Meat Navigation, MMN) označuje případy, kdy cíl odkazu není viditelný, dokud na něj uživatel neklikne nebo na něj nenamíří kurzor. Termín „záhadné maso“ byl odkazem na maso podávané v amerických veřejných školních jídelnách, které je tak zpracované, že jeho přesný druh již není rozeznatelný.

MMN je špatná, protože snižuje objevitelnost navigačních prvků. Uživatelům to zvyšuje kognitivní zátěž, protože nyní musí hádat, jak navigovat nebo co kliknutí na něco udělá.

Ačkoli se většina MMN vyskytuje na starších webových stránkách, jsou překvapivě rozšířené i na moderních webových stránkách. Vezměte si například Lazor Office, návrhářskou firmu, která vytváří montované domy.

Autor/držitel autorských práv: Lazor Office, LLC. Autorské podmínky a licence:

LazorOffice.com má na své domovské stránce mřížku obrázků MMN. Jak vidíte, tato tabulka poskytuje jen drahocenné informace o tom, kam jít. Místo toho devět obrázků jen tak leží a nechává některé z nás spíše přemýšlet nad hádankou než interagovat se stránkou.

Pod záhybem jejich domovské stránky čeká mřížka miniatur obrázků. Dají se rozkliknout? No, ano – pokud najedete kurzorem myši na obrázek, změní se na ukazatel. Ale co se stane, když na obrázek kliknete?“

„Klikněte, abyste to zjistili!“ není nikdy dobré řešení pro uživatelský zážitek (UX). Je pravděpodobné, že vaši uživatelé navigaci opustí a najdou si alternativní řešení na konkurenčním webu.

Dobré: Naštěstí jsou problémy MMN snadno řešitelné. Klíčem je uvědomit si, že musíte jasně označit odkazy. Jednoduché přidání nápisu „Zobrazit projekt“, který se zobrazí při najetí myší, zlepší použitelnost výše uvedené stránky Lazor Office.

Autor/držitel autorských práv: Interaction Design Foundation ApS. Autorské podmínky a licence:

Naše karty kurzů jsou tak nezáhadné, jak to jen odkazy umí.

U karet kurzů Interaction Design Foundation máme v dolní části každé karty nejen nápis „Zobrazit kurz“, který označuje akci, která se provede, ale máme také stav při najetí myší s textem „Přejít na kurz“. Podobnou konvenci dodržuje mnoho webových stránek a vy byste ji měli dodržovat také, abyste maximalizovali použitelnost svých webových stránek.

Poučení: Osvědčené postupy

Vždy označujte své odkazy! Nechtěli byste jíst tajemné maso – a stejně tak by vaši uživatelé nechtěli klikat na tajemné odkazy.

Přidávání tření k uživatelským akcím

Špatné: iFly50.com

Jako návrháři bychom měli přidávat tření k uživatelským akcím s maximální opatrností, pokud není účelem odradit uživatele od provedení dané akce. Někdy však můžeme i neúmyslně přidat do uživatelských akcí tření (většinou z estetických důvodů nebo z důvodů novosti), které má za následek poškození UX.

Jedním z příkladů je iFly50.com, vytvořený k výročí časopisu iFly společností KLM. Webová stránka iFly 50 je vertikálně rolovací a představuje 50 cestovních destinací, přičemž u některých destinací (jako například u té níže uvedené) jsou uživatelé tlačítkem poblíž spodní části vyzváni, aby klikli a několik sekund podrželi, aby si mohli prohlédnout další fotografie.

Autor/držitel autorských práv: Koninklijke Luchtvaart Maatschappij NV (KLM Royal Dutch Airlines). Podmínky autorských práv a licence:

iFly 50 očekává, že jeho uživatelé budou klikat a držet několik sekund pokaždé, když budou chtít zobrazit další fotografie.

Přidání několika sekund tření ke každé akci může mít za následek nesmírně horší UX. Představte si, že místo okamžitého načtení stránky musíte nyní při každém kliknutí na odkaz v prohlížeči dvě sekundy klikat a držet. Po několika kliknutích a podrženích přestanete prozkoumávat internet úplně.

Mnohdy máme my designéři tendenci nechat se unést nejnovějšími styly interakce nebo akcí, ale je velmi důležité, abyste vždy dbali na opatrnost, pokud by váš design mohl zvýšit tření uživatelských akcí. Většinou perfektně fungují osvědčené konvence (například jednoduchá kliknutí nebo přejetí prstem).

Dobré: Pružné posouvání v systému iOS

Zajímavé je, že promyšlené přidávání tření do uživatelských akcí může vést ke skvělému designu. Jedním z nejoblíbenějších vynálezů společnosti Apple v jejich mobilním operačním systému iOS je vytvoření pružného rolování, kdy se v určitých situacích (například na konci webové stránky) rolování stává stále obtížnějším.

Autor/držitel autorských práv: Interaction Design Foundation ApS. Autorské podmínky a licence:

Při pružném rolování v systému iOS se v některých situacích záměrně přidává tření.

Výše můžete vidět, jak se to projevuje v akci, kdy dochází ke zvýšenému tření, když uživatel roluje až na konec webové stránky. Tření bylo přidáno, aby označilo situace, kdy již není rolování povoleno: a výsledkem je intuitivní zážitek.

Poučení:

Vyhněte se přidávání jakéhokoli druhu tření k akcím uživatele, pokud to jde – a opatrně jej implementujte, pokud nemáte jinou možnost.

„Chytrý“ design, který ignoruje použitelnost

Špatné: Bolden.nl

Někdy může být chytrý design na škodu UX. Tato chyba je o to nebezpečnější, že my designéři milujeme chytré návrhy. Jsou to drobné grafické zázraky, které nám vykouzlí úsměv na tváři. Bohužel většina lidí nejsou designéři. Ještě smutnější je, že ne všechny chytré designy jsou dobrými designy, zejména pokud vytvářejí problémy s přístupností, objevitelností nebo použitelností.

Příklad webové stránky nizozemského studia strategického designu a vývoje Bolden:

Autor/držitel autorských práv: Bolden. Podmínky autorských práv a licence:

Dokážete říct, co se jejich domovská stránka snaží říct? Ne? No, to proto, že budete muset přesunout myš do rohu stránky, abyste zprávy pořádně viděli.

Autor/držitel autorských práv: Bolden. Podmínky autorských práv a licence:

Je to chytrý návrh? Ano, rozhodně. Ale je to špatný návrh? Rozhodně!“

Jedná se o skvělý příklad navrhování pro designéra, nikoliv pro uživatele: web v odhodlání svých tvůrců přinést neotřelý design vážně snížil čitelnost svých titulků. Ať už to navrhoval kdokoli, vynechal také text, který uživatele informuje o tom, že mají myší pohybovat do rohů, což znamená, že objevení titulků závisí na náhodě. Navíc i když je titulek odhalen, kontrast mezi textem a pozadím je špatný kvůli tomu, že je stále vidět překrývající se text. To vše dohromady vytváří uživatelsky nepřívětivý web.

Dobré: CultivatedWit.com

Webové stránky společnosti Cultivated Wit jsou skvělým protipříkladem toho, že chytrý design nemusí být na úkor použitelnosti.

Autor/držitel autorských práv: Kultivovaný důvtip. Autorské podmínky a licence:

Na domovské stránce společnosti Cultivated Wit se zobrazuje ilustrovaná sova.

Na domovské stránce společnosti Cultivated Wit ilustrace sovy mrká, když na ni najedete myší:

Autor/držitel autorských práv: Cultivated Wit. Podmínky a licence autorských práv:

Překvapení! Sova na vás mrkne, když na ni namíříte kurzor. Všimněte si také moudrého rozdělení bílých míst.

Klíčovým rozdílem je, že zde netvoří podstatnou část webu, takže nesnižuje použitelnost, i když uživatel tento chytrý designový prvek neobjeví.

Navíc mají jasnou šipku směřující dolů, která naznačuje, že se něco nachází pod záhybem. A když sjedete dolů, uvidíte toto:

Autor/držitel autorských práv: Cultivated Wit. Autorské podmínky a licence:

A webové stránky mohou být chytré, aniž by to bylo na úkor UX.

Kopie (která je čitelná a má dobrý kontrast) vytváří pocit vtipu – ne nepodobný tomu, čeho se snažil dosáhnout Bolden – aniž by to snižovalo UX webových stránek. Jediným malým problémem je text „Join our email club“, který by měl být více viditelný, ale jako celek je web Cultivated Wit skvělým příkladem toho, jak dodat chytrý design, aniž by vytvářel špatnou UX.

Lesson Learnt: Osvědčené postupy

Chytré návrhy by měly být vždy co nejodolnější a/nebo otestované na skutečných uživatelích. Někdy se chytré návrhy mohou vymstít a poškodit použitelnost.

Zbytečné animace

Špatné: Koncept účtenky PayPal na Dribbble

Animace jsou důležitým prvkem interakčního designu, ale vždy by měly sloužit svému účelu. Nikdy by se neměly dělat pro animaci samotnou. Designéři mají bohužel tendenci animace milovat, částečně proto, že jejich tvorba je tak zábavná, že možná nevíme, kdy přestat.

Příkladem špatně provedené animace je koncept animace e-mailové účtenky PayPal od Vladyslava Tyzuna, zveřejněný na Dribbble:

Autor/držitel autorských práv: Vladyslav Tyzun. Autorské podmínky a licence:

Animace je pěkná, ale zbytečná. Celkem trvá neuvěřitelných 3,5 sekundy, než se zobrazí detaily transakce. Jednoduché prolnutí účtenky by bylo elegantnější, a protože zabere méně času, i lepší pro uživatele.

Tento problém se stává nebezpečným, když se designéři zdánlivě nemohou nabažit animací. Od roku 2016 by Vladyslavova animace získala více než 500 lajků a 8 000 zobrazení. To svědčí o mylném uznání, které designéři chovají k animaci pro animaci samotnou. Mít vhled do designérské tendence dávat přednost rozmáchlým epickým obrázkům před přímočařejším zobrazením a zachytit se dříve, než animaci podlehnete, vám ušetří spoustu času a zabrání mnoha bolestem hlavy. Nezapomeňte, že uživatelé přicházejí na stránky za určitým účelem – chceme jim v krátkém čase a prostoru ukázat to, co hledají, a ne je zdržovat velkolepou prohlídkou galerie.

Dobré:

Když však děláme animaci cíleně, výsledky mohou být skvělé. Podívejte se na animaci služby Stripe Checkout, když uživatel obdrží ověřovací kód:

Autor/držitel autorských práv: Stripe, Inc. Podmínky autorských práv a licence:

Stripe používá animace, aby se věci zdály rychlejší, než jsou: poskytuje uživatelům aktualizace (například „Odesláno“), i když možná ještě neobdrželi SMS. Uživatelé tak nemají pocit frustrace z toho, že musí čekat, a mají jistotu, že SMS je právě na cestě.

Rachel Nabors, přizvaná odbornice na webové animace ve W3C, navrhuje pět zásad, které je třeba mít na paměti při navrhování animací3:

1. Animujte s rozmyslem: promyslete si každou animaci, než ji vytvoříte.
2. Je třeba více než 12 zásad:
3. Užitečné a potřebné, pak krásné: estetika by měla ustoupit do pozadí UX.
4. Jděte čtyřikrát rychleji: Dobré animace jsou nenápadné, což znamená, že běží rychle.
5. Nainstalujte vypínač: Pro velké animace, jako jsou parallexové efekty, vytvořte tlačítko pro odhlášení.

Naučení: Osvědčené postupy

Vždy vytvářejte účelné animace: příliš mnoho animací může zničit UX produktu. Krása musí táhnout za jeden provaz a být funkční.

The Take Away

Není zábavné dívat se na příklady špatného designu? Naštěstí je to i poučné. Zde jsou klíčová ponaučení a osvědčené postupy z pěti příkladů dobrého a špatného designu:

1. Pochopte, co vaši uživatelé potřebují, a pak jim tyto informace poskytněte.
2. Pokud chcete sdělit hodně informací, zkuste místo textu použít vizuální prvky.
3. Odkazy vždy označujte! Uživatelé nemají rádi tajemné odkazy.
4. Vyhněte se přidávání jakýchkoli třecích prvků k akcím uživatele, pokud nemají od akce odradit.
5. Testujte chytré návrhy a zařazujte je opatrně.
6. Animace je jako nadávka. Pokud to s ní přeženete, ztratí veškerý svůj účinek.4

Příště, až se budete mračit nad příkladem špatného návrhu, zastavte se a zamyslete se: pochopte, proč se návrh nepovedl, najděte si příklady návrhů, které udělaly věci správně, a poznamenejte si poučení, které jste si z toho vzali. A pak se podělte o lásku: podělte se o své poučení s ostatními designéry v našem diskusním fóru!