Ovládací prvky, které přepínají mezi těmito dvěma stavy, by měly uživatelům objasnit, že aktuální stav i stav, do kterého systém přejde po kliknutí na tento prvek.
Původní
Na nedávné schůzce s klientem v aplikaci WebEx jsem zpanikařil, protože jsem nemohl zapnout mikrofon. Potřeboval jsem předložit 6hodinovou prezentaci, ale jak to mám udělat, když nerozumím ani tomu, jak zapnout zvuk? Stále jsem klikal na ikonu přeškrtnutého mikrofonu, ale bez ohledu na to, co jsem udělal, zůstal na stejné pozici.
Zde je snímek obrazovky:
Ve stresu jsem zcela ignoroval změnu barvy ikony! Nakonec jsem si uvědomil, že navzdory skutečnosti, že mikrofon byl v obou státech přeškrtnutý, měla červená barva signalizovat, že tlačítko je aktivní a nebylo mě slyšet.
Mnohokrát jsem viděl, jak se uživatelé této pasti stali obětí. Tlačítko Ztlumit se používá k přepínání mezi dvěma stavy systému (Mikrofon vypnutý a Mikrofon zapnutý), problém však je, že uživatelé obtížně identifikují aktuální stav a to, na co se přepnou. (Na rozdíl od osvědčených postupů při navrhování tlačítek chybí implementaci WebEx textový štítek pro tlačítko ztlumení.)
Dvě informace, dva ovládací prvky
V situaci, kdy uživatelé mohou pro přepínání mezi dvěma možnými stavy (pro jednoduchost je povolme zapnout a vypnout) existují dva, i když související, ale ne identické kousky informací, které jsou pro uživatele relevantní:
- Aktuální stav systém (zapnutý nebo vypnutý)
- Co se stane, když uživatel klikne na tlačítko, je další stav, který lze zapnout, v závislosti na aktuálním stavu (v příkladu mikrofonu zapnout nebo vypnout zvuk)
Zřejmý způsob k jejich implementaci jsou dva různé prvky uživatelského rozhraní: indikátor stavu a tlačítko pro změnu stavu. Například v aplikaci Tesla používá obrazovka Controls tento přístup: máte indikátor stavu, který ukazuje, že je vůz zamčený, a tlačítko pro odemknutí. Stisknutím indikátoru stavu nic neděláte, ale stisknutím tlačítka vozidlo odemknete.
Tesla pro iPhone: (vlevo) ikona nad tlačítkem pro odemknutí slouží jako indikátor stavu; Tlačítko Odemknout je stavový přepínač, který jasně uvádí, co se stane, když jej stisknete. (Vpravo) Stav a štítek tlačítka se změní poté, co uživatel odemkne vozidlo.
Dvě informace, jeden ovládací prvek
Je skvělé, pokud máte dvoustátní systém, který se navzájem doplňuje. Jinými slovy lze předpokládat, že pomocí jednoho ovládacího prvku – stavového přepínacího tlačítka lze přenášet dvě informace. Je to proto, že pokud uživatelé znali jednoho z nich (alespoň teoreticky), mohli by odvodit další.
Nezapomeňte však, že jakýkoli typ uvažování vyžaduje čas a kognitivní úsilí a lidé často nemají čas rychle reagovat. Pokud se pokusím zapnout mikrofon, všichni na mě buď čekají, nebo mě ignorují, pokračují v konverzaci, takže nemám čas se zastavit, přemýšlet o rozhraní a vyvodit závěry.
Nicméně někdy lze stát snadno určit pomocí jiných ukazatelů. Například ve videopřehrávači je pouze jeden ovládací prvek (tlačítko „Přehrát“), který označuje neaktivní stav. Existuje však dostatek informací k pochopení toho, že se video přehrává – uživatel může na obrazovce slyšet nebo vidět dynamický obraz.
Pokud se rozhodnete použít jeden ovládací prvek k označení obou států, jak byste měli tento ovládací prvek označit?
Zde v této situaci je třeba vzít v úvahu dvě alternativy:
- Ikona tlačítka označuje stav, do kterého systém vstoupí. Pokud na něj uživatel klikne, tento prvek mu řekne, co bude stane se další.
Toto je standardní vodítko pro design tlačítek. Registrační tlačítko na webu bude mít název „Registrovat“ a tlačítko pro odeslání formuláře v internetovém obchodě bude mít název „Koupit“ nebo „Objednat“.
Pokud se toto tlačítko používá k přepínání mezi dva státy, mělo by se to změnit samo, například příklad Tesly výše nebo příklad OBS níže.
Pokud není k dispozici žádný textový popis (pravděpodobně proto, že je ikona dostačující), měla by se ikona změnit v závislosti na stavu, ve kterém pohybuje systémem. Klasickým příkladem je interakce mezi tlačítky přehrávání a pozastavení zobrazenými ve výše uvedeném příkladu YouTube a přítomná ve většině přehrávačů videa.
2. Tlačítko označuje jeho aktivní stav stínem. To se stalo s tlačítky zapnutí/vypnutí: při stisknutí nezměnili svůj vzhled, ale stiskli dolů, jako tlačítka v reálném životě. V designu uživatelského rozhraní, aby tuto metaforu vyjádřili, návrháři obvykle přidávají vržený stín, který označuje, že na tlačítko bylo kliknuto a je nyní aktivní.
< p>Pochopení tohoto designu jasně závisí na rozpoznání stínu jako indikátoru aktivního stavu. Tento design by se NEMĚL spoléhat na to, že si uživatel zapamatuje barvu tlačítka v obou stavech a bude vědět, který z nich představuje aktivní. Aby to fungovalo, mělo by být naprosto zřejmé, že aktivní stav je při stisknutí tlačítka, což je někdy ve světě plochého designu obtížné dosáhnout.
Vraťme se k příkladu WebEx. Při pohledu zpět vidíme, že WebEx použil jeden ovládací prvek k označení jak aktuálního stavu, tak toho, co se bude dít dále, a implementoval druhé rozhodnutí o návrhu signalizující aktivní stav. Červená jako indikátor aktivního stavu byla bohužel špatnou volbou z několika důvodů:
- Červená barva se v rozhraní používá libovolně – například tlačítko × (Zavřít) je také červené a ne vždy označuje aktivní stav. (Pokud červená znamená aktivní stav, co by to měl znamenat červený křížek?)
- Jiná barva (modrá) se používá k označení aktivního stavu pro ostatní tlačítka, například Video a Chat (tj. Modrá ikona označuje že je video zahrnuto).
Při absenci jasného indikátoru aktivního stavu se uživatel může spolehnout na ikonu tlačítka, aby pochopil, co se děje. Pokud je statická, způsobí to jen zmatek.
Mimochodem, aplikace Telefon v iPhone používá stejnou implementaci, pouze s tím rozdílem, že je konzistentnější než WebEx a k označení používá bílou výplň aktivní stavy. I tak je obtížné určit aktivní stav tlačítka.
Telefonní aplikace pro iPhone: Tlačítko Ztlumit se nemění, ale označuje aktivní stav s bílou výplní. Zatímco bílá je pravděpodobně lepší ve stínování než cokoli jiného, není charakteristickým znakem aktivního stavu.
Doporučení
Jaké je tedy obecné doporučení pro tlačítka přepínání stavu , které slouží jako ukazatele samy o sobě? Nejbezpečnějším řešením je použít 2 prvky uživatelského rozhraní: jeden pro aktuální stav a druhý pro jeho přepínání, jako v příkladu Tesla.
Pokud chcete, můžete tyto dva prvky kombinovat do jednoho, jako to dělá Zoom. Ovládání zvuku mikrofonu se skládá ze dvou samostatných komponent:
- Textový štítek, který označuje, co se stane, když uživatel klikne na tento ovládací prvek.
- Ikona zobrazující aktuální stav systém
Kliknutím na kteroukoli z nich změníte stav.
Nová verze společnosti WebEx používá stejný design.
Nezapomeňte, že vaším cílem při zapnutí/vypnutí je zajistit, aby uživatelé rychle porozuměli oběma:
- Aktuální stav a
- Co se stane, když kliknou na tento ovládací prvek
Vyhodnoťte oba stavy, kterými systém projde.
- Je zřejmé, že to jsou dva opačné stavy?
- Pokud ne, je lepší použít design se dvěma ovládacími prvky, jedním pro aktuální stav a druhým pro přechod do jiného stavu.
- Pokud ano (možná proto, že existují přísné shody a standardizované vzory), můžete může zvážit jeden designový prvek, který jednoduše říká, co bude dělat.
2. Existují externí podněty (jako zvuky nebo animace), které mohou uživatelům pomoci určit aktuální stav?
- Pokud ne, použijte design se dvěma ovládacími prvky, indikátor stavu (pro jasné vyjádření aktuálního stavu) a přepínací tlačítko.
- Pokud ano, jedním z návrhových prvků, které je třeba vzít v úvahu, je stavové přepínací tlačítko.
3. Budou uživatelé muset rychle identifikovat stav a změnit jej (jako je tomu u tlačítka Ztlumit)?
- Pokud ano, stačí vytvořit ikonu k označení stavu a tlačítko pro jeho změnu.
- Pokud ne, vyzkoušejte přepínací tlačítko stavu.
Vyhledejte další zajímavé a relevantní články v našem blogu a telegramovém kanálu.
