Usnadněte lidem práci s UI díky správným kurzorům

Stále více lidí se začíná orientovat na design produktů pro mobilní zařízení. Což je vzhledem k neustále rostoucímu zájmu dobře. Když se dnes venku kamkoliv rozhlédnu, vidím lidi „ťukat“ do krabiček.

Neměli bychom ale zapomínat na stále nejvíce používané zařízení – počítač, který lidé typicky ovládají pomocí klávesnice a myši. A právě myš – tedy její kurzor – je hlavním interakčním bodem v rámci digitálního rozhraní. A proto musí lidem pomáhat.

Podíval jsem se na mnoho webů a kurzory jsou asi nejvíce zanedbávaný element. A to i přes to, že dnešní CSS styly umožňují využít nejrůznější kurzory. Nezapomínejte na tento prvek a usnadněte lidem práci s pochopením a ovládáním vašich webů a aplikací.

Počítače jsou stále „in“

Může se zdát, že v dnešní záplavě nejrůznějších zařízení není potřeba produktům pro počítače věnovat tolik péče. Opak je ale pravdou – stále tvoří většinu. Podíval jsem se do Google Analytics na několik webů – například na náš web GoodData.

Lidé si web GoodData typicky prohlíží na počítačích.
Lidé si web GoodData typicky prohlíží na počítačích.

Jak můžete vidět, více jak 90 % lidí si náš web prohlíží na počítači. Na dalších webech také – typicky kolem 80–90 %. A věřím, že to ještě pár let vydrží. Proto bych klasické počítače určitě nezanedbával.

Kurzor jako typ „affordance“

Nejsem si jist, nakolik je pojem „affordances“ známý. Například Don Norman jej zmiňoval ve své knize Design of Everyday Things. A když později rozvinul původní myšlenku James J. Gibsona ve smyslu HCI.

Zjednodušeně tento pojem znamená, že lidé dokáží snadno pochopit smysl a použití jednotlivých prvků. Především díky vizuálnímu stylu, tvaru, zpětné vazbě, atp.

Důležitou roli hraje právě vizuální styl – tvary, barva, atd. V dnešním světě ale může být pro lidi identifikace složitější, hlavně pokud je designér fanouškem „flat“ stylu. A právě kurzor v pochopení prvků pomůže – podívejte se na ukázku na Codepen.io.

Různé kurzory se běžně využívají v operačních systémech, třeba když chcete přesunout složku na jiné místo ve vašem počítači. Když na dané místo přesunout nejde, kurzor se změní:

Indikace kurzoru, že složku nelze přesunout

A to samé v případě, kdy přesouváte soubory z USB disku. Kurzor Vám napoví, že se soubor zkopíruje:

Indikace kurzoru, že lze složku zkopírovat.

Ve smyslu affordances je kurzor tzv. perceived affordance. Tedy prvek, který jsme se naučili v rámci digitálních produktů vnímat a chápat (viz článek Affordances and Design od Dona Normana). Nebo tzv. sensory affordance podle Rexe Harstona. Tedy prvek, který vnímáme pomocí smyslu (viz jeho skvělá studie Cognitive, Physical, Sensory, and Functional Affordances in Interaction Design).

Kurzor pomůže lidem pochopit UI

Velice důležitým faktorem jednoduchosti interakce s digitálními produkty je schopnost rozeznat a identifikovat prvky, se kterými lze pracovat – interagovat – a jakým způsobem. Například:

  • S posuvníkem lze hýbat do stran (podívejte se na ukázku na Codepen.io).
  • Lze změnit velikost obrázku.
  • Na odkaz lze kliknout.

Pro webové prvky je ale potřeba kurzory doplnit. Typicky totiž nejsou pro jednotlivé prvky, a jejich různé stavy, definované.

Příklad typů kurzorů z Mac OS, které lze na webu využívat v rámci prohlížečů
Příklad typů kurzorů z Mac OS, které lze na webu využívat v rámci prohlížečů.
Zdroj: tutsplus.com

Výhodou kurzorů je, že pro jednotlivé interakce využívají jednoduchou symboliku, čímž je lidé vnímají mnohem rychleji než texty. Například pokud byste chtěli vysvětlit možnost hýbat s posuvníkem pomocí tooltipu.

Příklady – jak na to

Na webu je implementace kurzorů velice jednoduchá – stačí k tomu jedna CSS vlastnost. A vhodně vybraný typ kurzoru.

element {
cursor: <cursor-type>;
}

Například když chcete odlišit aktivní a neaktivní tlačítka:

HTML:

<button>Klikni</button>
<button disabled>Klikni</button&gt

CSS:

button {
cursor: pointer;
}
button:disabled {
cursor: not-allowed;
}

Podívejte se ukázku na Codepen.io.

Nebo pokud chcete využít prvek i pro zpětnou vazbu. Třeba jako to řeší Twitter Bootstrap pomocí stavových tlačítek:

  • Když kliknete na tlačítko, zobrazí se daný stav a tlačítko se zneaktivní.
  • Zneaktivnění zamezí případnému double-clicku.
  • Po dokončení se opět vrátí do aktivního stavu.

Díky kurzorům je možné i takový stav lépe identifikovat. A nenutit lidi číst status text v rámci tlačítka.

HTML:

<button>Save changes</button>

CSS:

button {
cursor: pointer;
}

.loading {
cursor: progress;
}

JavaScript (jQuery):

$("button").click(function(){
var btn = $(this);

btn.attr("disabled", true);
btn.addClass("loading");
btn.text("Saving ...");
  
window.setTimeout(function(){
btn.removeClass("loading");
btn.attr("disabled", false);
btn.text("Saved!");
}, 2000);
});

Podívej se na ukázku na Codepen.io.

Umocněte pochopení možné interakce

Když se podíváte na různé pattern libraries, style guides, atp., kurzory jsou často opomíjené. V Twitter Bootstrap je v podstatě dostupný pouze kurzor pro aktivní „klikatelné“ prvky. To samé v Zurb Foundration. Ale například MailChimp Pattern Library využívá i jiné typy kurzorů.

Může se tak zdát, že kurzory jsou to poslední, o co by se měl designér zajímat. Myslím si ale, že opak je pravdou – i vzhledem ke snadnosti implementace.

Odlištete se od ostatních a použíjte vhodné kurzory. A usnadněte lidem práci s vaším digitálním produktem. Díky tomu rychleji rozeznají jednotlivé interakce a rychleji se s produktem naučit pracovat.

Napsat komentář