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é.

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.

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.

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.

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:

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

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.

Ř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.

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.

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í.