it-swarm-eu.dev

Měly by být štítky zaškrtávacích políček vpravo nebo vlevo?

Mám některá zaškrtávací políčka s textovými hodnotami různých délek (od 5 do 60 znaků) - což je upřednostňované rozvržení? Hodnota vlevo a zaškrtávací políčko vpravo nebo naopak?

87
Becskr

Přestože společnost Microsoft a Apple nejsou v tomto problému explicitní, Java Směrnice Swing Look and Feel Guidelines výslovně uvádějí, že štítek/hodnota by měla být vpravo od ovládacího prvk pro jazyky čtené zleva doprava. Stejné platí pro přepínače .

Starobylý styl motivu OSF také výslovně říká, že štítek je vpravo od zaškrtávacích políček a přepínačů (str. 9-133). A zatímco děláme archeologii, standardy IBM Common User Access uvádějí, že štítek je vpravo od zaškrtávacího políčka , ale jsou tichá na přepínačích .

Bez ohledu na explicitní standardy se očekává, že návrháři umístí štítek napravo od kontroly. Důvodem je pravděpodobně to, co intuitivní. Pokud máte sloupec zaškrtávacích políček s popisky různých délek, toto uspořádání umožňuje konzistentně zarovnat zaškrtávací políčka i začátek štítků bez velkých mezer mezi štítky a ovládacími prvky, úhledně postranními kroky při zarovnávání štítků které mají textová pole a rozevírací seznamy. Ve světě mrtvých stromů jsou štítky často vpravo od zaškrtávacích políček a ekvivalentů přepínačů (např. Bubliny na opticky naskenovaných formulářích), takže to uživatele nevyhodí.

66

Chcete-li vybrat jednu nebo více možností, štítek vpravo. To umožňuje snadné vizuální skenování a pojďme uživatele pohybem myši/prstu po přímce:

[ ] option 1

[ ] this is option 2

[ ] #3

Pokud by byl štítek nalevo, bylo by to trochu nepořádek:

option 1 [ ] 

this is option 2 [ ] 

#3 [ ] 

Navíc budete často mít štítek „group“ a přestože to určitě může být umístěno nahoře, je často na levé straně:

Pick one or more options:   [ ] option 1

                            [ ] this is option 2

                            [ ] #3

Mějte na paměti, že bez ohledu na umístění by na štítky mělo být možné kliknout také (použijte správné atributy FOR). Problém je v tom, že ne každý to ví a jeho cílem je samotné zaškrtávací políčko, takže jejich sladění pomůže.

Pokud však existuje pouze jedno zaškrtávací políčko - obvykle se používá pro explicitní procesy přihlášení nebo odhlášení, myslím, že je v pořádku dát to později, aby se z něj stal malý úkol (protože opravdu chcete, aby lidé plně využívali) přečtěte si štítek):

To opt in to our incessant spam emails we ask that you click this checkbox: [ ]
17
DA01

Pokud ignorujeme možnost pořadí čtení zleva (používá se v některých jazycích), domnívám se, že štítek by měl být vždy na pravé straně zaškrtávacího políčka.

Ve Windows je ve skutečnosti nemožné umístit štítek nalevo od zaškrtávacího políčka z technického hlediska. V jakémkoli prostředí pro vývoj softwaru Windows bude označení zaškrtávacího políčka automaticky na pravé straně zaškrtávacího políčka. Neexistuje způsob, jak to změnit. Někteří programátoři budou tvrdě pracovat, je vytvořit zaškrtávací políčko bez označení a poté umístit statický štítek vlevo od něj jako samostatný ovládací prvek. Kromě toho, že je ošklivý, má to nevýhodu starostu: uživatel nemůže klepnutím na štítek upravit stav zaškrtávacího políčka.

Mělo by tedy být vždy na pravé straně zaškrtávacího políčka. Nicméně ... vím, že někteří lidé (a s nimi nesouhlasím) mají pocit, že existuje výjimka: když je zaškrtávací políčko součástí seznamu jiných ovládacích prvků. Podívejte se na tento příklad:

enter image description here

Takže existují lidé, kteří se domnívají, že je to správné, protože zarovnání vypadá hezčí. Já ne. Myslím, že poloha zaškrtávacího políčka je správná, ale poloha štítku není správná. Vidíte to kluci jako výjimku?

16
Bart Gijssens

Základním předpokladem je, že chcete použít možnost nejčitelnější.

Jedním z důležitých aspektů je skenovatelnost, jak snadné je získat přehled bez vědomého zvážení každé položky v plném rozsahu. Pro tento účel je důležité, aby zaškrtávací políčka měla konstantní šířku. Pokud tedy jednu stranu políček zarovnáte svisle, bude druhá strana také zarovnána svisle. Text je proměnná šířka, takže to obecně nelze dosáhnout bez roztažení textu (což může velmi obtížně číst). Obecně se doporučuje umístit důležitá slova na začátek vět, takže u textu LTR bychom měli upřednostňovat zarovnání doleva před zarovnání doprava.

Dalším problémem je blízkost, jak blízko jsou relevantní informace spolu. Pokud umístíme zaškrtávací políčka napravo od štítku a zarovnáme je svisle, budou od štítků dále, než kdybychom je umístili doleva. Zdá se tedy, že odpověď je dát na levou stranu.

Na druhou stranu je třeba ve formuláři zvážit konzistenci. Většina ovládacích prvků formuláře není konstantní šířka a jejich umístění vlevo od jejich štítků může často způsobit nepříjemný tok (například vložením pole pro zadání narozenin nalevo od štítku), kde uživatel musí jít tam a zpět. pro naskenování formuláře. Kompromisem by bylo použití ovládacích prvků zarovnaných doleva, pouze pokud jsou všechny konstantní a stejné šířky.

Další věc, kterou je třeba zvážit, je, že sada přepínačů je ekvivalentní výchozímu HTML <select> list, zatímco zaškrtávací políčka jsou ekvivalentní s <select multiple="multiple">.

8
l0b0

Moje okamžitá odpověď je, že zaškrtávací políčko by mělo být na levé straně štítku, ale před odpovědí jsem chtěl doporučení ověřit.

Je smutné, že pokyny pro uživatelské rozhraní společnosti Microsoft, Sun a IBM v tomto ohledu nejsou výslovné (mají tendenci hovořit o tom, kdy používat zaškrtávací políčka přes přepínač atd.), Ale všechny jejich příklady používají konvenci ovládání a označování.

Takže bych si to vybral.

7
Matt Goddard

Z pohledu programátora by pole mělo přijít před text, protože je snazší zarovnání. Z pohledu uživatele by měl být text na prvním místě, protože 1) přečteme si, o čem je toto zaškrtávací políčko, 2) rozhodneme se, zda na něj klikneme nebo ne, v tomto pořadí. Rozložení by tedy mělo odrážet průběh akcí uživatele.

3
Boris

Závisí to na použití zaškrtávacího políčka.

Zaškrtávací políčka výběr (např. V seznamu položek) by měl být „před“ textem (takže doleva v jazyce zleva doprava, jako je angličtina). To vám umožní zarovnat položky doleva a nechat zaškrtávací políčka stále zarovnána bez zbytečných mezer. Také umístí mechanismus výběru na začátek štítku - lidé nemají tendenci číst celý štítek, ale místo toho jej skenovat, a to začíná v levém středu.

V kontrolním seznam by měla být zaškrtávací políčka před textem, bez otázek. Uživatelé se snaží zaškrtnout políčka a skenují výše.

Zaškrtávací políčka Možnosti v kontextu dalších možností může být za štítkem. Obecně se však snažím držet dál od zaškrtávacích políček možností, protože jsou spíše nekomunikativní. Novější ovládací prvky, jako je posuvná skříňka iPhonu, jsou více komunikativní, nebo byste mohli použít bistátová tlačítka, rozbalovací nabídky nebo jiné metody, které uživateli poskytnou lepší přehled než jednoduché „zaškrtnuté/nekontrolované“.

3
Alex Feinman

Desktop GUI Toolkits jako SWT zapouzdřují zaškrtávací políčka jako variantu Button-widget, kde se textová vlastnost tlačítka stává popiskem. Bude to vykresleno, alespoň na systémech, které znám, napravo od zaškrtávacího políčka. Takže na rozdíl od html nemusíte ani dělat výběr.

3
Jörn Zaefferer

Id hlas pro "label přichází po" v LTR jazycích, jednoduché, lidé budou skenovat dolů volby a provádět kontroly kliknutím na začátek štítku (to by mělo být podporováno), nebo pokud jsou méně důvtipný počítač, hledat zaškrtněte políčko, pokud existuje asi 5 zaškrtávacích políček různých délek štítků, představte si cestu, kterou musí jejich ruce a oči a mozky udělat ze štítku na odpovídající zaškrtávací políčko ... bolestivé! zaškrtávací políčko proto musí být co nejblíže ke štítku, aby se minimalizovala tato cesta

2
Ayyash

Takže pro Windows nebo Apple software) se zdá být jasné umístit zaškrtávací pole vlevo. Pokud je to v pořádku, aby byly respektovány Gelstatovy principy, musí být štítky zarovnány vpravo, aby byla zaškrtávací políčka zarovnána vertikálně. ..

Ale pro mobilní zařízení software zaškrtávací políčko na pravé straně štítků se zdá lepší pro usnadnění přístupu. ..

Podívejte se na SMS správce smartphonu, když chcete odstranit některé zprávy ....

2
pierre lebailly

Také bych hlasoval za následování modelu „control-then-label“, na který někdo odkazoval, ale s výhradou, že by měl mít kontext přednost před konvencí.

Například: Existuje online vládní asistenční formulář, který vyžaduje, aby uživatelé před zahájením shromažďovali několik dokumentů. Systém umožňuje uživatelům přistoupit ke kroku 1 formuláře, pouze pokud odhlásili každou z položek v seznamu. V tomto případě jsou zaškrtávací políčka tvořena kontrolním seznamem, přičemž drtivá většina z nich dala políčka vlevo.

Na druhou stranu, řekněme, že máme nějaký typ maloobchodní/prodejní aplikace se sekcí správy zaměstnanců a vy z jakéhokoli důvodu můžete pomocí zaškrtávacího políčka vybrat více uživatelů, například:

Name         Title               Hire Date         Select
--------     ---------------     ---------         ------
John Doe     Sales Associate     9/12/03           [x]
Jane Doe     Regional Manager    12/3/01           [x]

V tomto případě si myslím, že by zaškrtávací políčka měla sedět vpravo, protože konotace je jiná (vyberete položky pro další akci, nikoli pro vyloučení ze seznamu). IOS (nic zvláštního v HIG, podivně) a Android ( http://developer.Android.com/guide/topics/ui/controls/checkbox.html = =) vyplávejte zaškrtávací políčka napravo. Pro mě to má největší smysl pro tento typ aplikace, protože to dává určitým vizuálním rozlišením zaškrtávací políčka; plovoucí ponechání v tomto případě by podle mého názoru bylo trochu otřesné zarovnání- moudrý.

1
Brian

Neexistuje žádná velikost pro všechny, ale jedna věc, na kterou se musíme dívat, je konzistence. Všimnete si, že někteří předstírají, že mít zaškrtávací políčko vlevo a štítek vpravo umožňuje lepší zarovnání ... a přesto by se pravděpodobně nikdy neobhajoval, aby byl ovládací prvek editačního pole viděn vlevo od popisného štítku. Pokud by zarovnání bylo tak důležité, udělali by to také.

Někteří uvádějí, že čtení zleva doprava je důležité pro to, aby bylo zaškrtávací políčko nalevo od štítku ... jako by čtení textu nejprve a přímé zaškrtnutí políčka (odpověď na tento text) bylo méně intuitivní než mít Zaškrtávací políčko ... přeskočí, aby se přečetl štítek, a poté skenováním zpět doleva vloží váš vstup (v podstatě odpověď na štítek). Je těžké pochopit, jak nutnost poskytnout odpověď před otázkou je zásadně intuitivnější.

Takže alespoň pro rozhraní typu formuláře s mnoha vstupy je jasné, že zaškrtávací políčka by měla být napravo jako všechny ostatní ovládací prvky vstupu.

0
Jack Lewis