it-swarm-eu.dev

Mělo by přepínací tlačítko ukazovat jeho aktuální stav nebo stav, do kterého se změní?

Mám rychlou otázku ohledně tlačítek, která přepínají mezi dvěma státy. (Think Play/Pause nebo Shuffle/Regular Play.) Jak již název napovídá, měl by přepínač ukazovat jeho aktuální stav nebo stav, do kterého přejde?

Myslím, že lidé jsou zvyklí na konvenci Play/Pause. Hra Shuffle/Regular však může být matoucí, pokud namísto aktuálního stavu zobrazíte stav přechodu. Například vestavěný hudební přehrávač na konzole Xbox 360 to dělá takto: když je v režimu náhodného přehrávání, zobrazuje ikonu pro přímé přehrávání a naopak a vždy mě zaměňuje (jsem v náhodném režimu nebo přímé přehrávání).

Vidím to takto: Přehrávání/Pauza je spíš jako akce jako při zahájení nebo pozastavení přehrávání. Ano, v zákulisí je to stavový přechod, ale pro uživatele existuje akce. Zatímco Shuffle/Straight Play je možnost a je nejlepší ukázat aktuální stav (a možná jen jedna ikona a tlačítko změny ukazují, že je volba povolena/zakázána). Myšlenky?

461
Michael Brown

V About Face 2. (existuje v3, ale nemám to) Cooper a Reimann (2003, s. 341-2) zacházejí s tímto subjektem pod nadpis „Klopná tlačítka: Výběrový idiom, kterému je třeba se vyhnout“. Důrazně doporučujeme nahlédnout do této knihy, protože uvedu pouze výňatek:

Ovládací prvky tlačítka flip-flop jsou velmi efektivní. Šetří místo kontrolou dvou vzájemně se vylučujících možností pomocí jediného ovládacího prvku. Problém s ovládáním flip-flopu spočívá v tom, že nesplňují druhou povinnost každé kontroly - informovat uživatele o jejich aktuálním stavu. Pokud tlačítko říká ON, když je stav vypnutý, není jasné, jaké je nastavení. Pokud je však vypnutý, když je stav vypnutý, kde je tlačítko ON? Nepoužívejte je. Ne na tlačítkách a ne na nabídkách!

Autoři (a já o nich uvažuji jako o autoritě v daném tématu) představují dvě možná řešení: Měli byste vyhlásit akci tlačítka jako slovesnou frázi (např. Přepněte do režimu na výšku, čímž obětujete část uloženého prostoru) nebo zcela jinou techniku ​​ ( např. dvě přepínací tlačítka).

268
jensgram

Krátká odpověď:

Docela pozdní odpověď, ale jsem překvapen, že na to nikdo předtím nepřihlásil - je možné, že přepínač zobrazí aktuální stav a stav, do kterého se jednoduše změní tím, že text mimo tlačítko tlačítko místo na to.

Real Life Switches

Dlouhá odpověď:

Jak dotancohen zdůrazňuje:

Problém je v tom, že v angličtině jsou „on“ a „off“ příslovce i přídavná jména.

Tlačítka, která mají text mimo své tělo, využívají tuto skutečnost ke svému prospěchu! Číst dál...


iOS On-Off Switch

Zaměřme se na stav, který je modrý a řekneme například NA .

iOS ON

Dokážete zjistit, zda je přepínač aktuálně zapnutý, nebo zda bude pokračovat, pokud přesunete/klepnete/klepnete na posuvník? Je text zřejmý? Je zde „ON“ stav (přídavné jméno) nebo akce (sloveso)? Nejasný. Pomůže vám to rozhodnout barva použití? Pravděpodobně, ale ne jistě - uživatelé iOS mohou být zvyklí na stavy tohoto návrhu, ale není možné říci, jak by to mohli interpretovat uživatelé bez systému iOS. Chcete-li vidět, co tím myslím, vezměte si tento přepínač skutečného života, který má stejný design jako přepínač iOS - můžete si s jistotou říct, zda je vypínač v současnosti zapnutý?

Ambiguous Trip Switch

Spínač níže je v souladu s designem iOS, ale mnohem horší ...

Ambiguous On-Off Switch

... není ani jasné, která polovina kliky/kliky je!


Unambiguous On-Off Switch

Otázka z nabídky jensgramu ...

Pokud tlačítko říká ON, když je stav vypnutý, není jasné, jaké je nastavení. Pokud je však vypnutý, když je stav vypnutý, kde je tlačítko ON?

... zde nikdy nevznikne, protože tlačítko neříká ZAPNUTO ani VYPNUTO - prostě stojí samo od sebe. Také neexistuje žádný zmatek ohledně kontextu slov ZAPNUTO a VYPNUTO - jsou to velmi jasně stavy (přídavná jména), protože kliknutí na ně (v normálním provedení) by nic neudělalo!

Může být zajímavé poznamenat, že modifikace tohoto designu by umožnila, aby text na druhé straně tlačítka umožňoval klikání/klepnutí. V takovém případě je slovo blíže ke spínači popisovačem stav, zatímco druhý je akce a role jsou obráceny, když je přepínač přepnut.

Modded On-Off Switch

Přesto se pohled uživatele na přepínač nezmění - v žádném okamžiku není uživatel zmaten aktuálním stavem přepínače. Ve skutečnosti by design mohl být dále vylepšen pro přívětivost pro uživatele zvýrazněním současného stavu:

Highlighted On-Off Switch


Win8 On-Off Switch

Barva tlačítka označuje aktuální stav (svítí = ON, jako v reálném životě) a slova Zapnuto/Vypnuto pod textem možnosti uživatele ujistí o aktuálním stavu.

414
SNag

Ať už se rozhodnete cokoli - nedělejte, co dělá Twitter.

Aargh don't change the button when I'm about to click it!

60
Daniel Alexiuc

Problém je v tom, že v angličtině jsou „on“ a „off“ příslovce i přídavná jména. Najděte tedy náhradní slova, která jsou buď slovesa nebo přídavná jména, která označují tlačítka pomocí:

Enable / Disable
Enabled / Disabled
Start / Stop
Running / Stopped

Cvičení

Velmi pozdě editovat: Podívejte se na tento úžasný přepínač, který navrhl můj spolupracovník, který uspěje v udržování terminologie „on/off“, ale jednoznačně to dělá:

on off switch

35
dotancohen

Přiměřeným kompromisem by bylo, kdyby tlačítko nebylo zvýrazněno (mělo by mít neutrální barvu pozadí), když je ve vypnutém stavu, a zvýraznit jej (změnit barvu pozadí), když je ve stavu zapnuto.

Například při pohledu na tento snímek obrazovky aplikace Spotify (web) si myslíte, že je zamíchání zapnuto nebo vypnuto?

Shuffle is most certainly on

26
Marks Polakovs

Myslím, že to máš docela dobře ve své otázce.

Pokud je přepínač akcí - Play/Pause - pak by měl ukázat, co se stane. Takže při pozastavení by to ukazovalo Play a pak při hraní show Pause.

Pokud je přepínač volbou - Shuffle/Lineární -, měl by zobrazovat aktuální stav.

Jak naznačíte, že uživateli je jedno tlačítko akce a druhé je možnost, nejsem si jistý ...

25
ChrisF

Řekl bych, že to záleží na případu, jak řekl ChrisF, že je důležité rozlišovat mezi akční tlačítko a stavové tlačítko.

Pokud má tlačítko text, můžete změnit text a ukázat, že klepnutím na něj něco uděláte (např .: „Zapnout přehrávání náhodným výběrem“). Avšak ve vašem případě, protože je to pouze ikona, měl bych jít pouze s náhodnou ikonou, která vypadá podle stavu povoleno/zakázáno. Pokud je zakázáno, mělo by být uživateli jasné, že jde o přímou hru. Dalo by se rozsvítit nebo zobrazit tlačítko při stisknutí dolů.

Chcete-li, aby byl jasnější, zvažte přidání popisku na kurzor.

20
mbillard

Překvapuje mě, že nevidím žádnou zmínku o technice používané v iOS (a jinde), kombinovaném tlačítku akce/stavu, kde jsou obě možnosti viditelné, seskupené a aktivní je jasně zvýrazněna.

Hrozné ascii umění demonstrovat:

[ ON | off ]

Airplane mode toggle on iOS

20
jezmck

Zastavil bych jen krátký výraz „nepoužívejte je“.

Navrhl bych, aby přepínací tlačítka byla přijatelná v případě, že existuje jasný stav zapnutí a vypnutí. K tomu může dojít například v případě, že máte řadu šedých tlačítek, která se po kliknutí na ně zbarví.

To je důvod, proč Play/Pause funguje v mnoha případech. Tlačítko přehrávání není tak přepínáním mezi dvěma stavy, jako povolit/zakázat. Když se rozsvítí jasně zeleně (hraju!), Změní barvu na šedou a zobrazí || když je pryč (nehraju!).

Ostatní tlačítka dělají to samé, takže konzistence přidává na dotaci. Pravděpodobně také vychází z našich historických vnímání magnetofonu nebo videorekordéru, který měl tlačítka, která jste stiskli (tj. Ve stavu) nebo v depresi (tj. Ve stavu vypnuto) a myslím, že je to skvělý mentální model, který je třeba mít na paměti při zvažování přepínání .

Ale v každém případě, kdy nejsou jednoduše „aktivovány“, kde byste přepínač nemohli nahradit ošklivějším zaškrtávacím políčkem, ze všech důvodů, které již byly zmíněny, bych standardně nastavil „nepoužívat je“.

SČÍTÁNÍ

Dnes jsem si všiml, že Evernote má docela efektivní přepínání. Přistoupili k přechodu myší, což ve skutečnosti fungovalo docela dobře. Všimněte si, že toto je další případ ovládání stylu zapnuto/vypnuto.

toggled off

toggled on

DOPLŇUJÍCÍ PŘIDAT

Dnes jsem našel tento zajímavý přepínač a připomněli mi to UX Q&A. Všimněte si, jak je stav okamžitě zřejmý, a skutečnost, že se změní, když se dotknete, je také zřejmý pomocí texturovaného "popisovače" (tj. Dotace) - vím jen, že když chytím ten zvednutý knoflík, přepne se na opačnou stranu a řekni opak toho, co říká nyní; je to jako toaleta letadla.

Takže se jim dá dobře.

toggled offtoggled on

20
Kato

Zde je již 18 odpovědí, takže by to mohlo být pozdě na večírek, ale v takových situacích má smysl používat zaškrtávací políčka. Nějaké příklady:

enter image description here

A když je vybrána:

enter image description here

Toto je podobné přístupu „dim/lit“, který používá Facebook jako „Like“ , ale pro lepší viditelnost je v kombinaci se zaškrtávacím políčkem. V každém případě je klíčovým bodem použití pouze jednoho slova (nebo sady slov) namísto pokusu přimět uživatele, aby rozhodoval mezi více slovy.

Také to udělejte bod, abyste se vyhnuli použití negativních předpon. (" Ne ", " Non - ", " Un - "," Dis - "," Im - "," Mis - "," In - "," Il - "," Ir - ") jinak by pak uživatel musel udělat" dvojitou záporku "ve své mysli, když měl  un zaškrtnuto políčko:

enter image description here

20
Pacerier

Použil jsem tlačítko Přepnout pro "Přidat" a "Odebrat" prvky do kolekce pomocí jednoduchého Přepínací tlačítko (jeden se stavem viditelným současně), který měl následující stavy.

  • PŘIDAT (pokud na tlačítko nebylo nikdy kliknuto)

  • ODSTRANIT (pokud bylo na tlačítko dříve kliknuto a položka byla nyní součástí kolekce)

Ale toto mě vždycky přitisklo jako pro začínajícího uživatele (50+), bylo zpočátku těžké pochopit, co se stalo a proč se tlačítko ptá na „Odebrat“ ještě předtím, než jsem se dozvěděl, že položka je nyní součástí sbírky. Chybějící bit v tomto případě byla oznamovací zpráva, která by řekla „Položka byla úspěšně přidána“. Používám stavovou zprávu založenou na Javascriptu, která se zobrazí v horní části obrazovky (pomocí http://Twitter.github.com/bootstrap/javascript.html#alerts ), ale protože byla vizuálně přemístěna z prvek interakce, vyřešil jsem pouze část problému pro některé uživatele.

Další vydání

Tlačítko po každém kliknutí změní svůj „postoj“ nebo „převrátí jeho strany“. Někdy se říká „Jsem tlačítko pro přidání“ a někdy stejné tlačítko (ve stejném sloupci mezi ostatními tlačítky pro přidání) se říká „Jsem tlačítko pro odstranění“. Změna barev pomáhá, ale stále jsou to dvě protilehlé role převzaté jedním tlačítkem. NOT SO PRÁVO).

Moje řešení:

Mým řešením tohoto drobného a dobře diskutovaného problému je nahradit přepínací tlačítko něčím takovým.

Tlačítko, které má titulek „Přidat“, když na něj po klepnutí neklikne Tlačítko se nahradí zprávou „Úspěšně přidáno“ a zobrazí malé tlačítko 24x24, které má štítek „X“ a které vám umožní zrušit poslední akt, který je vždy „Přidat“. . Nikdy tedy nekliknete na tlačítko „Odstranit“, ale pouze „zrušíte“ předchozí „Přidat operaci“. Na stránce také nemusíte zobrazovat samostatné oznámení „Úspěšně přidáno“. Nevýhodou tohoto přístupu je, že potřebujete více místa, abyste mohli umístit štítek „Úspěšně přidáno“ a tlačítko „Zrušit“, ale podle mého názoru je to jeden z méně matoucích přístupů.

enter image description here

12
Salman Ehsan

V mnoha případech může být užitečné nebo možné se těmto knoflíkům vyhnout.

Např. v případě náhodného/pravidelného hraní: stačí použít zaškrtávací políčko s označením „zamíchat“ vedle něj a nikdo nebude zmaten ...

A v případě tlačítka play/shuffle není možná nutné změnit ani štítek na tlačítku. Můžete použít tlačítko „stisknuto“ pro označení „přehrávání“ a tlačítko „nahoru“ pro označení „nehraje“. Nebo můžete dát indikátor někde jinde do uživatelského rozhraní (to je to, co můj stereo systém dělá ...).

Není to proto, že by některá společnost začala používat určitý widget, že by to najednou mělo být použito pro všechno ...

11
JanC

Na Facebooku je podobné tlačítko dobrým příkladem pro přepínací tlačítko.

Na Facebooku aplikace pro Android je podobné tlačítko na tlačítku a je-li vypnuto, je to šedé a při zapnutí zvýrazněné modře. Viz obrázky níže.

V zásadě s nimi souhlasím - zdůrazněte pozitivní a nemluvte s mozky uživatelů (minimální změna).

Nejsem si jistý, zda je to dobrý způsob pro slepotu barev. Možná by to měli udělat odvážněji.

enter image description hereenter image description here

Na Facebooku web-app je vzorec odlišný. Text tlačítka se změní a označuje akci - co se stane po kliknutí. To je matoucí. VUT v Brně, to má smysl, protože mají spoustu místa a mají samostatnou indikaci, že se uživateli příspěvek líbí.

enter image description hereenter image description here

9
AlikElzin-kilaka

Doporučuji sledovat následující video (z roku 1991!), Které bylo klíčové pro současný design přepínače iOS, například: https://www.youtube.com/watch?v=wFWbdxicvK

A odpovídající příspěvek: http://dl.acm.org/citation.cfm?id=143079

Zde jsou přepínače, které porovnávali: The toggles they compared A výsledky přednostně: Results of the preference test

7
Riche Design

Označená tlačítka (přepínací tlačítka) jsou, jak zdůrazňujete, často matoucí nebo dokonce dvojznačná. Namísto,
zobrazit stav a akce, takto:

Online Go offline

Máme tedy nekliknutelný štítek jasně označující aktuální stav a klikatelné tlačítko k provedení akce ke změně stavu.

Pokud kliknete na tlačítko „Přejít do režimu offline“, štítek se změní na „Offline“ a tlačítko se změní na „Přejít online“.

Jediným způsobem, jak být zcela jasný, je zobrazit aktuální stav i akci současně. Rádiová tlačítka by to dokázala, ale řešení etikety + tlačítka je lepší, protože nabízí jasné vizuální rozlišení mezi nimi. Také je přirozeně kompaktnější než přepínače.

Pokud jde o alternativy, myslím, že je dohodnuto, že přepínací tlačítka mohou být problematická. I zaškrtávací políčka mohou být matoucí:

 Online

Zaškrtávací políčko není zaškrtnuto, takže aplikace je offline. Ale to není úplně jasné. Pokud se na to podíváte, první věc, kterou vidíte, je Slovo „online“, takže je snadné vyvodit nesprávný závěr.

Problém je, že vše, co vidíte, je jediný štítek. Než se rozhodnete, zda štítek označuje stav nebo příkaz, musíte chvíli přemýšlet. Tento problém je běžný u zaškrtávacích políček a tlačítek a pokus o důsledné používání přídavných jmen (nebo sloves nebo cokoli) může věci vylepšit, ale problém nezmizí.

6
Bennett McElwee

V příkladu Přehrát/Pauza bych normálně zobrazoval aktuální stav a opak při přejetí myší (pokud je to vhodné, tj. Nikoli na dotykových obrazovkách). Tato položka má 2 přirozené stavy a žádné sjednocující sloveso. Na druhou stranu zapnuto/vypnuto může být zjednodušeno na Napájení se zapnutým stavem a vypnutým stavem.

4
Rob Allen

Já bych vždy chodil s aktuální stav. Myslím, že idiom play/pause je výjimkou spíše než pravidlem. Myslím, že hra/pauza je, jako by byla, možná zdrženlivostí z dob starých kazetových kazet. Když se na přehrávačích CD kombinovalo přehrávání/pauza, vzpomínám si, jak cool a inovativní to bylo.

Každopádně jedním ze způsobů, jak objasnit, že aktuální stav je „vybrán“, je udělat tlačítko záře trochu, nebo ho nastínit nějakým kouzelně vyhlížejícím modře.

enter image description here

Kouzelná modrá obvykle znamená, že nějaký stav je „zapnutý“

Takže výše uvedené tlačítko je ve skutečnosti tlačítko se třemi stavy od iTunes. Má 3 stavy: opakování vypnuto, opakování všeho a opakování 1. Je docela jasné, co se tady děje z obličeje tlačítka. Opakování 1 je zapnuto .

Jako další příklad mám 3 různá nastavení kamer, která jsou přepínána jediným tlačítkem: ortografické 1-up, ortografické 4-up a perspektiva. Jediným tlačítkem cyklicky procházíte těmito 3 stavy a na čelní straně tlačítka zobrazuji aktuální stav .

Jednotlivá tlačítka pro více stavů nejsou , která matou, jakmile si na ně zvyknete. Jsou skvělé, protože skupina vzájemně se vylučující nastavení a ukládají nepořádek uživatelské rozhraní s mnoha odlišnými tlačítky. Svým způsobem jsou jako kompaktní přepínač.

Další možnosti, na které bych mohl myslet, jsou:

  • Zobrazit aktuální stav a pop-up menu pro změnu stavu (i když existují pouze 2 možnosti)

Příkladem je to, jak vám Mac os zobrazuje stav vašeho BlueTooth nebo Letiště - má dokonce vyskakovací okno s plnými větami o tom, co každá akce udělá:

enter image description here

Zobrazuje jeho aktuální stav (vybledlá šedá znamená vypnuto) a zobrazuje další stavy pomocí rozbalovací nabídky s plnými větami.

3
bobobobo

Štítek na přepínacím tlačítku jako Play/Pause by se neměl měnit. Samotné tlačítko by mělo vizuálně naznačovat, že je stisknuto (opouští štítek „Přehrát“). Tím se eliminuje veškerý zmatek.

2
Denzo

@ Katoovy odpovědi na obrázky z Evernote to daly jasně najevo: existuje štítek komunikující to, co je ovládáno přepínačem („Automatické ukládání“), a přepínač, který slouží jako indikátor stavu (O | I).
Problém s některými přepínači se pokouší použít stejný bit pro dva různé účely: sdělování stavu a sdělování této akce.
Například světla mého domu mají anonymní přepínač a jasný indikátor, což je samotné světlo (když dojde k selhání žárovky, obvykle nemůžeme zjistit, zda je přepínač v poloze zapnuto nebo vypnuto) .
Hra | pauza uspořádání má také jasný indikátor, zvuk samotné hudby. Přepínač plní jednu funkci (ovládání), hudba plní druhou (stav komunikace).
Přepínač shffle vs. lineární přepíná stav, ale nekomunikuje jej. Budete muset uchopit pouzdro na CD, počkat na dokončení tématu a zkontrolovat, zda ten, který začíná po, je další v seznamu nebo ne (a opakujte, abyste si byli jisti). Ale pokud si myslíte, že je to zamíchat ne-zamíchat binární volbu, pak můžete označit po chování, které ovládá („zamíchat“ jako sloveso) a osvětlit jej stavem.
Jak to vidím, v každém případě musíte sdělit stát.
Můj přítel je šílený dálkovým ovládáním zámku svého auta. Má stav vytištěný a neví, zda se jedná o akci nebo zpětnou vazbu.

1
Juan Lanus

Pro snížení nejednoznačnosti navrhuji:

  1. Tuto akci použijte jako text přepínacího tlačítka, nikoli jako stav.

  2. Ujistěte se, že tlačítko není zvýrazněno.

  3. Zvýrazněte akci na myši nad/zaměření zdůraznit, co se stane.

  4. Zvýrazněte aktuální stav a umístěte jej vedle tlačítka.

Např...

enter image description here

(další příklady: "zapnout" + "vypnout", "vypnout" + "zapnout")


Nebo můžete použít posuvníky a

  1. Zvýrazněte aktuální stav, který by se měl objevit na ovládacím prvku palce

  2. Umístěte akci, která převádí stav do prázdné oblasti (nezvýrazněte jej)

Např...

enter image description here

(Představte si, že ovládací prvek palce vypadá jako ovládací prvek palce a ne jako tlačítko)


Převzato z mé odpovědi na zavřená duplicitní otázka s některými vylepšeními!

0
Danny Varod