Při vytváření formulářů se návrháři často potýkají s výběrem, který prvek uživatelského rozhraní poskytne požadovanou úroveň interakce při změně parametrů. Každý specialista má samozřejmě svá pravidla, ale každý by si měl pamatovat některé neměnné axiomy, které platí vždy a všude.
Výběr možností lze provést pomocí zaškrtávacích políček, přepínacích tlačítek, přepínacích tlačítek a rozevíracích tlačítek. Všechny možnosti jsou dobré, pokud se používají správně. Tento článek se zaměří na zaškrtávací políčka a přepínače.
Obsah
- Zaškrtávací políčka
- Spínače
- Doporučené postupy pro používání zaškrtávacích políček a přepínačů
- Označte zaškrtávací políčko cílovou oblast
- Interakce zaškrtávacího políčka se liší od interakce přepínače
- Závěr
Zaškrtávací políčka
Zaškrtávací políčka se používají, když existuje seznam možností a uživatel může vybrat libovolný počet z nich: jednu, několik nebo žádnou. Jinými slovy, každé zaškrtávací políčko je nezávislý ovládací prvek a zapnutí jednoho z nich nezruší účinek druhého.
Vlajky jsou opatřeny nápisy
Spínače
Vypínač je ovládací prvek, který něco zapíná a vypíná.
Přepínače umožňují volit mezi dvěma přímo protilehlými možnostmi.
Přepínače se obvykle používají k povolení nebo zakázání akce (spuštění nebo zastavení něčeho). Analogii lze udělat s vypínačem.
Osvětlení je nejběžnější aplikací pro vypínače
Doporučené postupy pro používání zaškrtávacích políček a přepínačů
Použijte standardní vzhled
Zaškrtávací políčko je jednoduše malý čtvereček se zaškrtnutím nebo křížkem.
Dvě pozice zaškrtávacích políček: zaškrtnuté nebo nezaškrtnuté
Přepínač by měl vypadat jako běžný přepínač se dvěma polohami.
Dvě polohy spínače: zapnuto nebo vypnuto
Musíte poskytnout jasnou a jednoznačnou interakci uživatele s ovládacím prvkem. Zde může pomoci malá animace – to je důležité zejména u mobilních aplikací, kde musí být uživatelské rozhraní hmatatelné.
Snažte se držet seznam možných možností svisle. Toto pravidlo platí pro zaškrtávací políčka i přepínače. Pokud se nemůžete vyhnout vodorovnému umístění, musíte prvky uspořádat v dostatečně velkém intervalu, abyste zabránili dvojí interpretaci toho, co každé zaškrtávací políčko vybere. Níže je uveden příklad s prvky příliš blízko u sebe.
Je těžké přijít na to, který přepínač stisknout pro výběr čtvrté možnosti
Aktuální poloha přepínače
Při navrhování spínačů je třeba se vyhnout nejistotě spojené se současným stavem. Jako příklad si vezměme vypínač z iOS 6 a podívejme se na něj v zapnutém stavu – je obarvený modře a zobrazuje se nápis ON.
Není jasné, zda je povoleno aktuální stav nebo navrhovaná akce
Dá se definitivně říct, jestli je vypínač v poloze zapnuto, nebo tam půjde, jen když pohnete posuvníkem? Je „povoleno“ stav nebo akce? Nejasný.
Nesmíte uvádět uživatele v omyl; Je velmi důležité rozlišovat mezi stavem a akcí. Ano, můžete použít barvu k dalšímu informování uživatelů, ale měli byste se ujistit, že aktuální zobrazení je jasné, jako v následujícím příkladu:
Barva písma označuje aktuální pozici
Použijte kladné potvrzení v textu zaškrtávacího políčka, aby uživatel přesně věděl, co se stane, když políčko zaškrtne. Vyhněte se frázím jako „Už mi neposílejte e-maily“, které by naznačovaly, že uživatel musí zaškrtnout políčko, aby se něco nestalo.
Vlajky by měly být označeny pozitivními příkazy, nikoli negativními „Ne. “
Označte zaškrtávací políčko cílovou oblast
Všechna zaškrtávací políčka jsou doprovázena štítky, ale na štítky nelze vždy kliknout. Vlajky jsou malých rozměrů a podle Fittsova zákona je těžké je trefit, ať už myší, nebo prstem. Chcete-li zvětšit oblast, na kterou lze kliknout, dejte uživatelům možnost vybrat požadovanou možnost nejen klepnutím na přesné pole, ale také podle štítku nebo souvisejících slov.
Umožněte uživateli provádět výběr kliknutím nejen na zaškrtávací políčko, ale také na štítek
Zaškrtávací políčka používejte pouze ke změně nastavení, nikoli jako ovládací tlačítka
Hlavní rozdíl mezi zaškrtávacím políčkem a přepínačem je v tom, že zaškrtávací políčko se používá ke změně stavu, zatímco přepínač se používá k povolení nebo zakázání akce.
V níže uvedeném příkladu poloha přepínače umožňuje jasně říci: bezdrátové připojení je zapnuto. V případě zaškrtávacího políčka musí uživatel uhodnout, zda je WiFi povoleno nebo zda musí být zaškrtnuto políčko, aby bylo povoleno.
Chcete-li zapnout/vypnout služby a hardwarové komponenty, jako je WiFi, použijte přepínače
Interakce zaškrtávacího políčka se liší od interakce přepínače
Můžete nastavit, aby se stav zaškrtávacího políčka nezměnil okamžitě (například jako součást odeslání formuláře), ale k akci přepínače by mělo dojít okamžitě.
Je dobrou uživatelskou praxí okamžitě změnit ovladatelný parametr pomocí přepínače – nikoli po kliknutí na tlačítko „Uložit“ nebo přechodu na předchozí stránku. To od tohoto ovládání v reálu očekáváme – přehodíme vypínač a světlo se rozsvítí.
Povolení Wi-Fi v iOS
Použijte zaškrtávací políčka, když se od uživatele očekává další akce, aby se změna projevila.
Použijte zaškrtávací políčka, když uživatel musí kliknout na tlačítko Odeslat nebo Další, aby uložil změny.
Závěr
Při vývoji rozhraní buďte důslední ve výběru jeho prvků. Dodržujte obecně uznávané standardy; to uživatelům umožní zažít pohodlné a předvídatelné ovládání. V opačném případě, pokud porušíte obecně uznávané standardy, bude vaše uživatelská zkušenost nepředvídatelná, jako by se mohlo kdykoli cokoli stát.
