Při návrhu UI je potřeba přemýšlet

Trendy se na webu často mění. To co platí dnes již nemusí platit zítra. Nejedná se pouze o technologie, ale i o samotný design, pro který dnes platí mnoho pravidel. Celkový dojem se dotváří i pomocí mnoha prvků, např. tlačítek nebo posuvníků. Avšak ty nejdůležitější z nich si grafici a návrháři rádi přizpůsobují a výsledek není vždy ideální – především vzhledem k uživatelům.

Často i ty nejpoužívanější weby, jako je Gmail nebo Twitter, modifikují některé prvky a výsledek není pro uživatele nejlepší. Například @jantichy se o tom zmínil jedním tweetem. Prvky mají jinou podobu než na kterou jsou uživatele zvyklí, jsou špatně uchopitelné nebo špatně navržené.

Nenuťte uživatele přemýšlet

Nejsem první ani poslední, kdo podobnou myšlenkou argumentuje. Je totiž tou nejdůležitější myšlenkou pro navrhování webů – vlastně pro navrhování čehokoliv. Do titulku jsem se inspiroval názvem knihy Don’t make me think: A Common Sense Approach to Web Usability od Steve Krug.

Při procházení webu jsem narazil na zajímavé příklady, které mohou uživatelům působit poměrně značné problémy. Jedná se o samostatné webové prvky, u kterých jsem se následně pokusil s pomocí samotných uživatelů zjistit problémy. Položil jsem jim pár jednoduchých otázek a dal několik jednoduchých úkolů.

Zajímalo mě především:

  • Co očekávají, že se stane.
  • Jakou podobu prvku znají.
  • Jak budou postupovat při používání.

Je možné se setkat s uživatelem, který nebude mít s problematickým prvkem sebemenší potíže. S takovým se ale v praxi setkáme pouze výjimečně a žádné zajímavé zjištění nám nepřinese.

Proč měnit podobu UI

Mnoho lidí by řeklo, že odpověď je jasná. Ono je to dle mého názoru poněkud složitější, především kvůli tomu, že uživatelé jsou na určitou podobu zvyklí a změna by mohla způsobit jejich dezorientaci.

Vzhled prvků operačního systému Mac OS.
Vzhled prvků operačního systému Mac OS.
Zdroj www.wikipedia.com

Podobu UI měníme například v tom případě, pokud chceme nabídnout lepší prožitek z navrženého designu.

Na co si dát pozor

Při grafických změnách je potřeba ponechat prvkům jejich standardní funkčnost, na kterou jsou uživatelé zvyklý. Důležité je také použít prvky je ve správném smyslu. Podle mého osobní průzkumu většina uživatelů standardní prvky webu zná, některé se dnes nepoužívají a s jejich rozeznáním byly potíže.

Funkčnost

Pokud se rozhodneme změnit podobu, například výběrového prvku – select boxu (prvku pro výběr více možností z rozbalovacího seznamu), musíme počítat s tím, že uživatelé mohou položku vybrat více způsoby:

  • Stisknutím klávesy počátečního písmene položky.
  • Posuvníkem na požadovanou položku.
  • Pomocí kurzorových kláves.
  • Kolečkem myši.

Výběr prvků z roletky - tzv. select box Ani na jednu možnost bychom neměli zapomenout, protože nemůžeme počítat s tím, že uživatelé budou prvky vybírat námi navrženým způsobem. Viz Průzkum znalostí a chování uživatelů na internetu z ledna 2011 od Dobrého webu.

Často je možné se na webu setkat s tím, že lze použít pouze jednu možnost z výše uvedených – posouvání pomocí posuvníku. U dlouhých seznamů je to ta nejméně vhodná možnost.

Smysl

Co jsem myslel “použitím ve správném smyslu”? Představme si například výběr položek pomocí tlačítek.

Výběr položek pomocí tlačítka, zatím nevybráno.
Výběr položek pomocí tlačítka, zatím nevybráno.

Co bychom očekávali, že se stane? Respondenti očekávali výběr položky a následné přesměrování na další stránku. Tlačítka jsou chápána ve smyslu potvrzení volby a ne k samotnému výběru. Výsledek v tomto případě vypadal takto:

Výběr položek pomocí tlačítka - u vybrané položky je tlačítko zamáčknuté.
Výběr položek pomocí tlačítka – u vybrané položky je tlačítko zamáčknuté.

Volbu bylo nutné ještě potvrdit pomocí tlačítka Odeslat.

V podobném případě by, pokud by šlo vybrat pouze jednu položku, tlačítko bylo jistě vhodnější než použití radio buttonů (snížil by se počet kliků). Pokud bychom však chtěli vybrat více položek, lepší přehled výsledku výběru bychom dosáhli pomocí checkboxů. Uživatelé možnost výběru podobným způsobem očekávali.

S čím se dá na webu setkat

Snažil jsem se vybrat některé zajímavé příklady, kdy vlastní způsob řešení není úplně ideální. Nejde pouze o příklady na skutečně fungujících stránkách, ale i ze stránek s turoriály.

Posuvníky

Posuvníky zažívají asi největší revoluci. Trendem je miniaturizace, případně jejich úplné odstranění. A přitom je to tak užitečný prvek.

Gmail

Posuvník v Gmail - jeho podoba je stejná ve všech Google aplikacích.
Posuvník v Gmail – jeho podoba je stejná ve všech Google aplikacích.

Google ve svých aplikacích nedávno provedl poměrně radikální redesign. Někomu se líbí, někdo redesign proklíná. Osobně se snažím si držet starou podobnu služeb nebo nastavitelné téma (jako v případě Gmailu).

Nový vzhled je totiž v některých případech:

  • Méně použitelný,
  • Odebral barvu důležitým prvkům,
  • V české variantě ještě není dokončený.

Posuvník je v aplikacích dost malý a nevýrazný. V Gmailu se mi při více otevřených filtrech stávalo, že jsem se nemohl dostat na konec tohoto seznamu. Posuvník totiž v grafice zapadl.

Výsledek sezení s uživateli:

  • V některých grafických tématech uživatelé posuvník delší dobu hledali.
  • Na větším monitoru byl problém s uchopením posuvníku.
  • Ve standardním designu nebyl při používání kolečka myši problém s identifikací pozice na stránce.
  • Očekávali větší a výraznější posuvník – především kvůli identifikaci pozice na stránce.

Scrolling Visibility

Při procházení stránek Codrops (twitter @codrops), kde jsou často velice zajímavé tutoriály ohledně jQuery nebo CSS3, jsem narazil na zajímavý příklad schovávání posuvníku – Scrolling Visibility.

Klasický box s textem. Jak je to ale dlouhé? Tři položky?
Klasický box s textem. Jak je to ale dlouhé? Tři položky?

Řekli byste, jestli je v seznamu více položek? Pokud ano, podle čeho byste to poznali?

Je to dost špatné řešení – především Example 1. Věřím tomu, že je někdo schopen něco podobného na webové stránky nasadit a když návštěvník uvidí, že na stránce není další obsah, odejde. V případě obsahových stránek je to nejhorší výsledek.

Výsledek sezení s uživateli:

  • Někteří netušili, že box nabízí více obsahu.
  • Při najetí se posuvník ztratil, uživatelé byli vyvedení z míry.
  • Nutnost dělat více přesných akcí pro zobrazení posuvníku bylo nepředpokládané.

Checkboxy

Lidé základní prvky webu znají – pamatují si jejich funkci i význam. Proto je často matoucí, když prvek dělá něco jiného, než očekávají (jak jsem zmiňoval v úvodu). V případě checkboxů vědí, že se používá pro výběr více možností ze seznamu – zatímco radio button se používá pro výběr jedné položky.

O2.cz

Na webové stránky o2.cz jsem zavítal ze zvědavosti, co nového mají na svém webu. Všiml jsem si určité zajímavosti při výběru tarifu, jak ukazuje obrázek níže.

Výběr doplňkových služeb k vybranému tarifu pomocí checkboxů.
Výběr doplňkových služeb k vybranému tarifu pomocí checkboxů.

Sám jsem měl s očekáváním výsledku poněkud problém. Co byste očekávali, že se stane?

Při použití výběrových prvků je nutné počítat s tím, že lidé na webu prvky znají. Jejich nevhodné použití by mohlo ve výsledku zmást a vždy je lepší nastavit správná očekávání, než uživatele již v úvodu “vyděsit”.

Výběr doplňkových služeb totiž funguje jako v případě použití radiobuttonů. Při zvolení jedné položky a následnému výběru druhé se přepínače automaticky přepnou.

Výsledek sezení s uživateli:

  • Uživatelé čekali, že budou muset při změně výběru muset odznačit předchozí volbu.
  • Formulář jim následně dával smysl, ale byli zmatení.
  • Výběr pomocí radio buttonů jim dává smysl.
Výběr doplňkových služeb k vybranému tarifu - s vypnutým Javascriptem (a chybou).
Výběr doplňkových služeb k vybranému tarifu – s vypnutým Javascriptem (a chybou).

Bavil jsem se o tomto případu s @Vokronor, který vyjádřil nadšení pro variantu bez JavaScriptu. Pokud by ve formuláři nebyla chyba, také bych se klonil k tomuto řešení (avšak trochu bych ho upravil). Uživateli to ušetří minimálně jedno kliknutí.

Znáte další podobné případy?

Záměrně jsem uvedl pouze tři konkrétní případy. Na Internetu jsem jich nalezl více, ale zajímaly by mě zkušenosti dalších uživatelů Internetu a jejich zkušenosti z procházení stránek.

Komentáře

  1. Smutné je, že tento necitlivý přístup k posuvníkům prosazuje Apple, který se jinak snaží na UX velmi dbát a staví si na něm konkurenční výhodu. Začalo to na iPadech, kde nebylo patrné, zda selectbox obsahuje další položky, vrcholu to dosáhlo s OS X Lion, kde jsou posuvníky zcela skryté.

Napsat komentář