Pokud nemáte příliš času nebo prostředků pro řešení a ověření použitelnosti vašich návrhů, pak se podívejte na 10 základních principů dobře použitelného uživatelského rozhraní od Jakoba Nielsena.
Jakob Nielsen principy založil na základě zkušenosti z návrhu různých produktů a jejich následném testování s využitím testování použitelnosti. Tyto principy se dají aplikovat nejen na webové stránky, ale také aplikace jak pro mobily, tak i pro jakékoliv zařízení.
Původní článek najdete na 10 Usability Heuristics od Jakob Nielsen.
Viditelnost stavu systému
Člověk by měl díky vhodné a dostatečně rychlé zpětné vazbě neustále vědět o tom, co se děje. Díky tomu se může rozhodnout o dalších krocích, které učiní.
V principu jde o to, aby člověk věděl, že:
- Se právě provádí nějaké operace
- Může bez problému s daným systémem interagovat
- Systém reaguje na jeho požadavky
- Nastal určitý stav, například chyba nebo že se něco podařilo
- Se nachází v určité části aplikace
Musíme ale brát v potaz i to, že systém by měl reagovat nejen vizuálně, ale také by měl podporovat zvukovou a haptickou zpětnou vazbu.
Drobečková navigace ukazuje zákazníkům kde se v rámci e-shopu Amazon.com nachází. Jak vypadá načítání obrázků na Dribble. Zdroj: uxplanet.org Jak vypadá zpětná vazba ohledně odesílání zprávy. Zdroj: uxplanet.org Zpětná vazba o synchronizaci souborů na Google Drive Potvrzení o vložení zboží do košíku na Amazon.com Změna barvy odkazu po najetí myší
Více informací najdete v článku uvedeném výše, nebo v Visibility of System Status (Usability Heuristic #1).
Shoda mezi systémem a reálným světem
Vždy bychom měli své návrhy dělat tak, aby jim lidé rozuměli – měli bychom používat jejich jazyk, tedy slova, fráze, atp. a vyvarovat se jakémukoliv žargónu, kterému by nemuseli rozumět. Zároveň bychom měli dělat vše tak, aby vše vypadalo přirozeně, logicky a smysluplně, stejně jako to je v běžném světě.
Vezměte si například dopravní značení:
- Výstrahy jsou červené – například značka STOP, ohrazení nebezpečných míst. Stejně tak se označují chyby v rozhraní.
- Odpadky se háží do koše – pro zjednodušení konceptu se při tvorbě prvních GUI smazané soubory dávají do koše, stejně jako odpadky v reálném světě.
Samozřejmě vždy záleží na tom, pro koho to děláme. Měli bychom ale vždy volit takové věci, které budou přesně reflektovat to, co lidé znají a čemu rozumí bez jakékoliv pochybnosti. Lidé se tak budou moct rozhraní nejen lépe naučit, ale rozumět mu a efektivně jej používat. Z tohoto důvodu je potřeba se vždy ujistit, že lidé opravdu vše pochopí, napříkad s využitím testování použitelnosti.
Aplikace kalkulačky také vypadá ideálně jako běžná kalkulačka a stejně se ovládá. Lidé nebudou mít problém používat aplikaci kompasu, protože vypadá a funguje stejně, jako normální kompas. Zvýraznění textu na Medium.com vypadá jako zvýraznění ve fyzické knížce. Zdroj: nngroup.com
Více informací najdete v článku uvedeném výše, nebo v Match Between the System and the Real World: The 2nd Usability Heuristic Explained.
Uživatelská kontrola a svoboda
Uživatelé by měli mít vždy hlavní slovo nad tím, co se děje, proč a jak. Měli by nad tím mít nejen kontrolu, ale také být informování a ideálně mít možnost cokoliv zrušit, aniž by to na ně mělo nějaké negativní dopady.
Lidé by se tak neměli dostat do slepé uličky, ze které se nemohou dostat. Měli by:
- Snadno najít cestu zpět
- Ale mít možnost vzít zpět svá rozhodnutí
Případně nemohou vzít zpět své rozhodnoutí. Přesně jak výstižně popisují v jednom článku na Medium.com:
Neměli bychom dovolit, aby se uživatelé cítili smutní, nejistí a nebo vinní.
Na Google Drive můžete snadno sledovat změny v rámci svých dokumentů a vrátit se k předchozí verzi. Na Google Drive můžete z koše soubory ke smazání snadno obnovit. Při psaní v Google Dokumentech můžete snadno vrátit zpět změny, které jste udělali. Trvalé smazání souborů je riskatní operace, je potřeba se raději ještě zeptat a dát člověku tu možnost zrušit.
Více informací najdete v článku uvedeném výše, nebo v User Control and Freedom (Usability Heuristic #3).
Konzistence a standardy
Lidé by se neměli dostat do situace, ve které by museli přemýšlet nad významem různých slov, situací nebo akcí a tím, zda znamenají to stejné. V návrhu bychom měli vždy dodržovat zásady daného odvětví a platformy.
Představte si, jak by to vypadalo, pokud by vše fungovalo jinak (což se občas stává a právě to dělá lidem problémy), například:
- Na některých webech by odkazy byly modré a podtržené, ale někde by takto nevypadaly
- Logo by na některých webech nebylo klikatelné a nevedlo by na hlavní stránku
Během uživatelského výzkumu si pak opravdu můžete všimnou, že lidé se určité věci naučí a poté je očekávají. Jsou pro ně totiž standardní, neboť tak většinou fungují.
Vždy bychom se měli snažit o to, ať jsou v rozhraní (a v dané platformě) věci pojmenovány stejně a chovají se stejně. Minimaluzujeme tak nároky na uživatele v tom smyslu, že se budou muset učit různé věci, přemýšlet nad tím, atd.
Produkty Adobe mají podobnou Ikonku a pokud jsou pro určité odvětví, mají i stejnou barvu. Hlavička aplikací Google v rámci Google Drive je v podstatě neustále stejná. V rámci MS Office jsou menu různých aplikací stejné. Různé e-shopy mají velice podobné uzpůsobení hlavičky stránky. Lidé se tak budou snáze orientovat.
Více informací najdete v článku uvedeném výše, nebo Maintain Consistency and Adhere to Standards (Usability Heuristic #4).
Předcházet chybám
Dobrý design by se měl vždy snažit o to, aby se lidé nedostali do nějakého problému. Nejen že by měl nabízet vždy takové možnosti, které povedou do úspěšného konce, ale také se raději lidí zeptá, pokud by něco nemělo dopadnout dobře. Opravdu vždy platí, že prevence je vždy lepší než složité řešení následků.
Podle Jakoba Nielsena a Dona Normena můžeme identifikovat 2 typy chyb:
- Omyly či nehody (tzv. slips) – to jsou takové chyby, které se prostě stanou omylem, nepozorností, atp. Lidé ví, co mají dělat, ale prostě se omylem ukliknout.
- Chyby (tzv. mistakes) – to jsou takové chyby, kdy člověk neví, jak daná věc funguje a nerozumí jí a prostě udělá něco špatně, neboť je to špatně navržené.
Ne všem chybám samozřejmě můžeme předejít. Hodně jich ale můžeme eliminovat – například těch, kdy design neodpovídá tomu, co člověk očekává podle toho, jaký je jeho mentální model. Vždy bychom se ale měli ujistit, například s využitím metod uživatelského výzkumu, že k chybám nebude docházet a lidé nebudou mít s používáním problémy; či jim bude design dobře předcházet.
Proto bychom v návrhu měli například:
- Volit správné výchozí hodnoty
- Dávat lidem vhodná omezení – aby například při psaní čísel nemohli omylem vložit písmena
- Nabízet možnosti, například v rámci našeptávače hledání
Při vytváření nového Google účtu budete mít předvyplňenou předpnu telefonu na základě vaši polohy. Aby člověk snáze zadal datum a jeho rozmezí, může si jej nakliknout skrze vizuální kalendář. Zvýraznění chyb při psaní dokumentu.
Více informací najdete v článku uvedeném výše, nebo v Preventing User Errors: Avoiding Unconscious Slips.
Rozpoznání spíš než vzpomínání
Vždy musíme dělat vše pro to, abychom zbytečně nezatěžovali paměť našich uživatelů tím, že budeme schovávat různé elementy, akce a možnosti. Neměli bychom nutit uživatele si zapamatovat různé informace z jedné části rozhraní pro nějakou další, neboť je v paměti pravděpodobně neudrží.
Co si můžeme představit pod rozpoznáním a vzpomínáním?
- Rozpoznání (recognition) je vlastně téměř automatické rozpoznání nějaké informace bez nějakého většího úsilí. Třeba když se vás někdo zeptá na jméno, bez větších potíží jej dokážete říct.
- Vzpomenutí (recall) je ale trochu horší, protože musíte zašmátrat trochu v paměti a hledat například nějaké souvislosti. Musíte si například vzpomenout na heslo k určité službě, což může v záplavě hesel, které máte v hlavě, být docela problém.
Problém je, že lidská paměť je značně omezená (viz například knížka 100 Things Every Designer Needs to Know About People). Proto bych měli minimalizovat kognitivní nároky na naše uživatele.
Proto jsou skvělé například služby pro uchovávání hesel pro přístup do různých služeb. Máte je dobře zabezpečené na jednom místě a nemusíte si tak nic moc pamatovat. Hlavně pokud nechcete mít jedno heslo pro všechno.
Pro návrat na domovskou obrazovku se používá domeček. Na macOS si můžete zobrazit a procházet strom složek, takže si nemusíte pamatovat, jakou cestou jste do dané složky šli. Aplikace Invision Studio se vám zobrazí úvodní dialog se seznamem posledních souborů, které jste si zobrazili.
Více informací najdete v článku uvedeném výše, nebo v Memory Recognition and Recall in User Interfaces.
Flexibilita a efektivita používání
Design by měl lidem vždy nabídnout nějaký způsob, díky kterému budou efektivnější v jeho používání. Typicky to jsou například různé zkratky, které nám usnadní dost práce a ušetří čas, mohou to ale být i různá přizpůsobení podle toho, jak se chováme a co potřebujeme.
Vždy bychom měli myslet na to, že se vždy najde například někdo, kdo:
- Náš produkt bude používat často a budou se mu hodit klávesové zkratky
- Bude u nás často nakupovat určité zboží, takže mu určité nabídky nabídneme co nejrychleji
- Si bude chtít produkt přispůsobit a nastavit tak, jak to vyhovuje jemu
Vždy bychom měli myslet na to, že design nemá být překážkou v používání, ale naopak – má dělat vše pro to, aby lidem co nejvíce pomohl v tom, co potřebují. A to jak pro experty, ale také pro nové uživatele.
Klávesové zkratky v aplikaci Adobe Photoshop. Zdroj: uxplanet.org Možnost využití klávesových zkratek v Google Analytics Na iPhone si můžete vyvolat rychlé možnosti zmáčknutím ikonky aplikace. V macOS si můžete upravit, které widgety chcete zobrazit.
Více informací najdete v článku uvedeném výše, nebo v Flexibility and Efficiency of Use: The 7th Usability Heuristic Explained.
Estetika a minimalistický design
Při návrhu uživatelského rozhraní bychom měli vždy přemýšlet nad tím, co lidé skutečně potřebují vidět a mít k dispozici a co můžeme vynechat, protože to lidé nebudou potřebovat nebo to využíjí velice výjimečně.
Je potřeba si uvědomit, že jakákoliv extra informace bude ubírat naši pozornost od těch důležitých věcí – nejen vizuální, ale náš mozek nad tím bude muset zbytečně přemýšlet, případně aby je to opravdu zbytečně nerozptilovalo.
Podle názvu tohoto principu to může vypadat, že jde o nějaký diktát určitého vizuálního stylu. Jak ale sám Jakob říká, je to spíš o tom, ať zbytečně nezatěžujeme lidi tím, co nepotřebují a uživatelské rozhraní plní svůj účel v podpoře primárních cílů uživatelů.
Více informací najdete v článku uvedeném výše, nebo ve videu Aesthetic and Minimalist Design.
Pomozte uživatelům rozpoznat, porozumět a zotavit se z chyb
Jak bylo uvedeno výše, měli bychom vždy dělat vše pro to, abychom lidem pomohli vyvarovat se chyb. Nicméně ač se budeme snažit sebevíc, vždy k nějaké chybě může dojít.
Pro tyto případy bychom se tedy měli snažit udělat chybové hlášky tak, aby:
- Jim lidé rozuměli a my jim jasně řekli kde je problém a jak jej opravit
- Je v rámci uživatelského rozhraní snadno našli a rozpoznali, například využívat vykřičníky, červenou barvu, atp.
Příklad chybové hlášky, kde popisují problém a nabízí řešení, včetně doplňujících informací, pokud by bylo potřeba. Zdroj: uxplanet.org Chybová hláška s tím, že jste zadali špatné heslo.
Více informací najdete v článku uvedeném výše, nebo ve videu Helping Users Overcome Errors.
Nápověda a dokumentace
Když si vezmeme vše co je výše uvedené, vyplývá nám z toho v podstatě to, že jakékoliv návrhy by měly být udělané tak, aby uživatel nepotřeboval pomoct – tedy nebylo by potřeba nic vysvětlit, popisovat, atp. Protože vše by měl snadno rozpoznat, měl věcem rozumět, neboť je to navržené pro něj.
Jsou ale případy, kdy je potřeba poskytnout nějakou formu dokumentace nebo nápovědy, aby člověk dokázal splnit to, kvůli čemu přišel. V případě potřeby je fajn, pokud taková dokumentace či nápověda:
- Je snadno dostupná v momentě, kdy ji člověk může potřebovat
- Obsahuje všechny potřebné kroky k tomu, aby člověk pochopil, co má dělat k dosažení toho, co potřebuje
Nemusíme si ale pod tím představit nějaké složité manuály. Super bude, pokud člověk v rozhraní najde například:
- Vysvětlivky ve formě krátkých popisků
- Tooltipy
- Průvodce, který jej v novém rozhraní provede
I k produktu jako je iPhone se někomu může hodit nápověda. Po přihlášení do knihovny O’Reilly se vám zobrazí průvodce. Zdroj: nngroup.com Support centrum služby Productboard Služba Zapier hezky v rámci UI vysvětluje, jak funguje a nabízí možnosti řešení přímo.
Více informací najdete v článku uvedeném výše, nebo v Help and Documentation: The 10th Usability Heuristic.