it-swarm-eu.dev

Jak nejlépe reprezentovat ToggleButton (představující zapnuto / vypnuto) s možností uzamčení

Navrhuji ovládací prvek ToggleButton, který má schopnost být v uzamčeném stavu, ve kterém uživatelská interakce nebude moci dále přepínat ovládací prvek. Obecně bych si přál, aby se tlačítko v přirozeném schématu pravidel stanoveném v UXGuide společnosti Microsoft zdálo přirozené, ale nevadí mi, kdybych použil nějaký vlastní grafický nebo jedinečný koncept k označení skutečnosti, že ovládání je zamčené.

Pokud jde o vzhled tlačítka, mohu použít:

  • Styl iPhone přepínací tlačítko ON/OFF .
  • Přepínací tlačítko s vlastní grafickou ikonou, jako je tlačítko napájení, které se rozsvítí, když je aktivováno.
  • Obyčejné staré zaškrtávací políčko.

Pokud mám jít se zaškrtávacím políčkem, mohu použít deaktivovaný stav k vyjádření, že ovládací prvek je uzamčen, ale může to vypadat pro uživatele, jako by nastavení ovládacího prvku nebylo účinné, protože se obvykle zdá být ztlumeno přes šedivý styl . Pokud jde o další dvě možnosti, jediná rozumná věc, kterou si mohu vzpomenout, je přehnaný nějaký typ ikony stylu visacího zámku na nebo poblíž přepínacího tlačítka, když je uzamčeno.

Pokud mě někdo dovede správným směrem, bylo by to velmi oceněno.

Návrh č. 1: Níže je koncept, který jsem přišel s tím, že si myslím, že vypadá poněkud podobně jako přepínač iPhone, ale který byl inspirován tlačítko napájení mé konzole Wii . Také jsem zahrnul návrh Hishama ukázat ikonu zámku pouze v uzamčeném stavu. Tento koncept je specifičtější přepínat tlačítko, které reprezentuje stavy zapnuto/vypnuto, ale z tohoto důvodu se domnívám, že se zdá být dostačující.

mockup of Wii inspired toggle button

Návrh č. 2: Toto je další příklad z výše uvedeného příkladu, ale místo textu zapnuto/vypnuto používá ikonu všudypřítomného napájení. Kromě toho jsem použil šedý text namísto visacího zámku k označení, že je ovládací prvek zapnutý, ale dále jej nelze přepínat. Všiml jsem si, že jsem viděl několik případů, kdy se čára protínající kruh v symbolu napájení mění svou polohu v závislosti na tom, zda je napájení zapnuto nebo vypnuto, ale teď nemůžu najít žádné příklady tohoto.

power button representation

UPDATE: Protože někdy je kontext vše, vytvořil jsem hrubý, ale specifičtější model, abych ukázal, jak bude použit přepínací ovládací prvek, který vyvíjím. Obecně bych rád použil některé z konceptů, které zde vyvíjíme, na jiná běžnější uživatelská rozhraní, ale domníval jsem se, že bych měl alespoň podrobněji rozebrat to, co vede více tlačítek hardwarového stylu více slov. Z dlouhodobého hlediska, zda budu emulovat hardwarový vzhled, nebo ne, je důležité, že toto přepínací ovládání se bude opakovat na mnoha místech a bude sloužit stejnému účelu, takže možná v některých případech specializované přepínací ovládání, jako je ta, které jsem Navrhované řešení by bylo dobrým řešením, jinak by v některých případech mohl být tradičním uživatelským rozhraním dva přepínače pro stavy ZAPNUTO a VYPNUTO a poté pomocí štítků vysvětlit nebo pouze deaktivovat tyto ovládací prvky, když mají být v uzamčeném stavu. .

hardware controls mockup

Z tohoto příkladu je vidět, proč se také vzdálím od metafory visacího zámku, protože umístění ikony visacího zámku na přepínací tlačítko zapnuto/vypnuto může uživatele uvést v omyl v domnění, že je celý ovládací prvek uzamčen, což by tomu tak nebylo. Stav uzamčení/deaktivace má ovlivnit pouze schopnost zapnout/vypnout řízení efektů.

Některé související odkazy:

11
jpierson

Je pravda, že pozdě na párty, ale tady je moje 2c ...

Zdá se, že máte čtyři dostupné stavy:

  1. Na; uživatel ji může vypnout.
  2. Vypnuto; uživatel ji může zapnout.
  3. Zamčeno
  4. Uzamčeno.

Pokud na ovládacím prvku zobrazíte tlačítko (i když je zakázáno), naznačujete uživateli, že může hodnotu změnit - v mnoha aplikacích mohou být deaktivovaná tlačítka aktivována některými jinými akce, například tlačítko „Uložit“, které je aktivní pouze po změně pole.

Doporučuji tedy tlačítko zobrazit pouze tehdy, je-li stav pod kontrolou uživatelů.

Když je stav uzamčen, nezobrazovat vůbec žádné tlačítko - pouze zobrazovat aktuální stav.

Zde je maketa:

Mockup of States

Uváděl jsem zde visací zámky, v souladu s vaším původním myšlením, ale myslím, že mohou být nadbytečné, protože nedostatek tlačítka jasně ukazuje, že stav nelze změnit.

6
Bevan

Doporučil bych přístup zobrazující ikonu zámku, ale ne jako překryv. Místo toho bych to dal vedle kontroly. U přepínacího tlačítka ON/OFF a zaškrtávacích políček ve stylu iPhone může jít doprava nebo doleva.

Pokud se ikona zámku musí zobrazovat pouze pro označení stavu zámku, tj. Uživatel na ni nemůže klepnutím odemknout, doporučuji, aby se nezobrazoval vůbec, když není ovládací prvek uzamčen.

3
Hisham

Souhlasím s názorem Roba Allena. Vaším úkolem je znovu vytvořit pole výběru čtyř stavů s metaforou obvykle spojenou se dvěma možnostmi. Metafora typu přepínače (kde je posílena vzájemná exkluzivita) může být pro uživatele pohodlnější, protože tento typ metafory podporuje pole pro volbu nátého stavu.

Pokud je však tlačítko něco, s čím byste se chtěli držet, je třeba trochu radikálnější vizuální zobrazení stavu uzamčení? Možná spárujete ikonu zámku s červeným okrajem tlačítka? Tímto způsobem jsou stavy ON (w/LED) a ON LOCKED (w/LED a červený rámeček + visací zámek) dostatečně odlišné, aby silně naznačovaly dva stavy. Ditto se stavy OFF.

Jediným potenciálním problémem s používáním barev jako reprezentace státu je samozřejmě to, že uživatelé nevidomých barev by si mohli nechat ujít vizuální stopu, která zvyšuje hodnotu ikony visacího zámku ...

3
Jason Lunsford

Nyní máte 3  4 stavy pro tlačítko, které jsou logicky spárovány, zapnuty, vypnuty v jedné skupině a uzamčeny (zapnuty) a uzamčeny (vypnuty) v druhé. Pomocí metafory a označování pomocí tlačítka můžete naznačovat pouze 2 z těchto stavů, vypnuto a zapnuto. To znamená, že netuším, že by mě v budoucnu na mě mohl čekat uzamčený stát. Jakmile na ně narazí uživatel, může si to pamatovat, ale nový uživatel neočekává uzamčený stav. Také pokud uživatel poprvé narazí na tento ovládací prvek v uzamčeném stavu (předtím, než uvidí ikonu napájení nebo štítek zapnutí/vypnutí), nemusí získat účel ovládacího prvku.

Místo toho, abyste se pokusili zmapovat ovládání stylu tlačítka (2 přirozené stavy), můžete použít jinou metaforu, která více napomáhá více stavům, jako je posuvný přepínač, knoflík nebo číselník se štítky nad smysluplnými pozicemi.

pravit

V reakci na vaše komentáře nesouhlasím s tím, že máte jako základní metaforu zaškrtávací políčko, protože vaše 2 sady států se vzájemně vylučují; to znamená, že nemůžete být současně vypnuti a zapnuti nebo vypnuti (zamčeni) a zapnuti (zamčeni). Věřím, že vaše základní metafora je místo toho dvojice seznamů přepínačů nebo přepínačů a zaškrtávacích políček uzamčeného stavu.

Vyzkoušet a reprezentovat to vše jedním tlačítkem a stále být použitelnými a objevitelnými zvuky jako příliš vysoká objednávka.

Úpravy 2

Ze souboru „Vložení peněz tam, kde jsou moje ústa“:

Rychlé a špinavé ovládání makety ...

enter image description here

2
Rob Allen

Vím, že tato otázka je stará, ale viděl jsem, že nemá odpověď. Myslím, že pro zapnutí/vypnutí by mělo být použito jednoduché přepínací tlačítko a pro uzamčený stav by mělo být tlačítko deaktivováno.

enter image description here

Další příklady: Návrh materiálu - ovládací prvky výběru.

2
Madalina Taina

Použil bych přepínač a šedě jej zamkl.

Proč?

  • Netrpí tím problémem příkaz versus stav. Představte si, že máte přehrávač médií pomocí tlačítka Přehrát/Pauza. Když na něm zobrazíte ikonu Přehrát, je to příkaz nebo stav? Toto je běžný problém u dvou stavových přepínačů.

  • Jasně zobrazuje stát. Příkaz a stav jsou na překrývajících se pozicích, takže předchozí problém netrpíte.

  • S mobilem to funguje dobře. Android a iOS jich mají spoustu. Dokonce i Windows 8 pro počítače má jejich vlastní verzi.

  • Být šedý je téměř konvencí věci s postižením. A budete respektovat princip designu vizuální setrvačnosti. Můžete tvrdit, že bych se neměl spoléhat na barvu, a je to tak, proto na jeho posuvník vložte ikonu klíče/visacího zámku/lomítka.

0
sergiol