Dela via


Kryssrutorna

Not

Den här designguiden skapades för Windows 7 och har inte uppdaterats för nyare versioner av Windows. Mycket av vägledningen gäller fortfarande i princip, men presentationen och exemplen återspeglar inte vår nuvarande designvägledning.

Med en kryssruta fattar användarna ett beslut mellan två helt motsatta val. Kryssrutans etikett anger det valda tillståndet, medan innebörden av det avmarkerade tillståndet måste vara den entydiga motsatsen till det valda tillståndet. Därför bör kryssrutor endast användas för att aktivera eller inaktivera ett alternativ eller för att markera eller avmarkera ett objekt.

skärmbild av en av fyra kryssrutor som markerats

En typisk grupp med kryssrutor.

Not

Riktlinjer som rör layout visas i en separat artikel.

Är det här rätt kontroll?

Du kan ta ställning till följande frågor:

  • Används kryssrutan för att aktivera eller inaktivera ett alternativ eller för att markera eller avmarkera ett objekt? Om inte använder du en annan kontroll.

  • Är de markerade och rensade tillstånden tydliga och entydiga motsatser? Annars använder du alternativknappar eller en listruta så att du kan märka tillstånden oberoende av varandra.

  • När den används i en grupp, består gruppen av oberoende val, från vilka användare kan välja noll eller mer? Om inte kan du överväga kontroller för beroende alternativ, till exempel alternativknappar och kryssruteträdsvyer.

  • När den används i en grupp, består gruppen av beroende val, från vilka användare måste välja en eller flera? I så fall använder du en grupp med kryssrutor och hanterar felet när inget av alternativen har valts.

  • Är antalet alternativ i en grupp 10 eller färre? Eftersom skärmutrymmet som används är proportionellt mot antalet alternativ behåller du antalet kryssrutor till 10 eller färre. För fler än 10 alternativ använder du en kryssruta.

  • Skulle en radioknapp vara ett bättre val? Om kryssrutor endast lämpar sig för att aktivera eller inaktivera ett alternativ kan alternativknappar användas för helt olika alternativ. Om båda lösningarna är möjliga:

    • Använd alternativknappar om innebörden av den avmarkerade kryssrutan inte är helt uppenbar.

      felaktig:

      skärmbild av en kryssruta märkt liggande

      I det här exemplet är det motsatta valet från Liggande inte tydligt, så kryssrutan är inte ett bra val.

      rätt:

      skärmbild av två alternativknappar

      I det här exemplet är alternativen inte motsatser, så alternativknappar är det bättre valet.

    • Använd alternativknappar på guidesidor för att göra alternativen tydliga, även om en kryssruta annars är acceptabel.

    • Använd alternativknappar om du har tillräckligt med skärmutrymme och alternativen är tillräckligt viktiga för att vara en bra användning av det skärmutrymmet. Annars använder du en kryssruta eller en listruta.

      felaktig:

      skärmbild av show och visa inte förhållandeknappar

      I det här exemplet är alternativen inte tillräckligt viktiga för att använda alternativknappar.

      rätt:

      skärmbild av kryssrutan med visa inte meddelandet

      I det här exemplet är en kryssruta en effektiv användning av skärmutrymme för det här kringutrustningsalternativet.

  • Använd en kryssruta om det finns andra kryssrutor i fönstret.

  • Visar alternativet ett programalternativ i stället för data? Alternativets värden bör inte baseras på kontext eller andra data. För data använder du en kryssruta eller lista med flera val.

Användningsmönster

Kryssrutorna har flera användningsmönster:

Användning Exempel
En enskild val En enda kryssruta används för att välja ett enskilt val.
skärmdump av en kryssruta med påminn mig etiketten
En enda kryssruta används för ett enskilt val.
Oberoende alternativ (noll eller fler) En grupp med kryssrutor används för att välja från en uppsättning med noll eller fler alternativ.
till skillnad från kontroller med enkel markering, till exempel alternativknappar, kan användarna välja valfri kombination av alternativ i en grupp med kryssrutor.
skärmbild av två av tre markerade kryssrutor
En grupp med kryssrutor används för oberoende val.
Beroende alternativ (en eller flera) En grupp med kryssrutor kan också användas för att välja från en uppsättning med ett eller flera alternativ.
du kan behöva representera ett val av ett eller flera beroende alternativ. eftersom microsoft?windows inte har en kontroll som har direkt stöd för den här typen av indata är den bästa lösningen att använda en grupp kryssrutor och hantera felet när inget av alternativen har valts.
skärmbild av en av två markerade kryssrutor
En grupp med kryssrutor används där minst ett protokoll måste markeras.
Blandat val Förutom de markerade och avmarkerade tillstånden har kryssrutorna också ett blandat tillstånd för flera markeringar för att indikera att alternativet är inställt för vissa, men inte alla, objekt.
skärmbild av en helblå skrivskyddad kryssruta
En kryssruta för blandat tillstånd.

Riktlinjer

Allmänt

  • Gruppera relaterade kryssrutor. Kombinera relaterade alternativ och avgränsa orelaterade alternativ i grupper om 10 eller färre, med flera grupper om det behövs.

    skärmbild av relaterade och orelaterade kryssrutor

    Ett exempel på grupper med relaterade, oberoende alternativ.

  • Överpröva användningen av grupprutor för att ordna grupper med kryssrutor detta leder ofta till onödig skärmtrassel.

  • kryssrutor i en logisk ordning, till exempel gruppera mycket relaterade alternativ eller placera de vanligaste alternativen först eller följa någon annan naturlig utveckling. Alfabetisk ordning rekommenderas inte eftersom den är språkberoende och därför inte kan lokaliseras.

  • Justera kryssrutor lodrätt, inte vågrätt. Vågrät justering är svårare att läsa.

    rätt:

    skärmbild av kryssrutor som är lodrätt

    I det här exemplet är kryssrutorna korrekt justerade.

    felaktig:

    skärmbild av kryssrutor som justeras vågrätt

    I det här exemplet är den vågräta justeringen svårare att läsa.

  • Använd inte det blandade tillståndet för att representera ett tredje tillstånd. Det blandade tillståndet används för att indikera att ett alternativ har angetts för vissa, men inte alla, underordnade objekt. Användare bör inte kunna ange ett blandat tillstånd direkt, snarare är det blandade tillståndet en återspegling av de underordnade objekten. Det blandade tillståndet används inte som ett tredje tillstånd för ett enskilt objekt. Om du vill representera ett tredje tillstånd använder du alternativknappar eller en listruta i stället.

    felaktig:

    kryssrutan skärmbild av en helblå tematjänst

    I det här exemplet ska det blandade tillståndet indikera att tematjänsten inte är installerad.

    rätt:

    skärmbild av listrutan med tre alternativ

    I det här exemplet kan användare välja från en lista med tre tydliga alternativ.

  • Om du klickar på en kryssruta för blandat tillstånd bör du bläddra igenom alla markerade, alla avmarkerade och de ursprungliga blandade tillstånden. Det är viktigt att kunna återställa det ursprungliga blandade tillståndet eftersom inställningarna kan vara komplexa eller okända för användaren. Annars är det enda sättet att återställa det blandade tillståndet med konfidens att avbryta uppgiften och börja om.

  • Använd inte kryssrutor som förloppsindikator. Använd en förloppsindikator kontroll i stället.

    felaktig:

    skärmbild av fyra kryssrutor som visar förloppet

    I det här exemplet används kryssrutor felaktigt som förloppsindikator.

    rätt:

    skärmbild av en delvis fylld förloppsindikator

    Exempel på en typisk förloppsindikator.

  • Visa inaktiverade kryssrutor med rätt markeringstillstånd. Även om användarna inte kan ändra dem förmedlar inaktiverade kryssrutor information så att de ska vara konsekventa med resultaten.

    felaktig:

    skärmbild av en av två kryssrutor nedtonade

    I det här exemplet bör alternativet "Läs alltid upp det här avsnittet" avmarkeras eftersom avsnittet inte läses när alternativet är inaktiverat.

  • Använd inte markeringen av en kryssruta för att:

    • Utför kommandon.
    • Visa andra fönster, till exempel en dialogruta för att samla in mer indata.
    • Visa andra kontroller som är relaterade till den valda kontrollen dynamiskt (skärmläsare kan inte identifiera sådana händelser).

Visa inte det här <objektet> igen

  • Överväg att använda alternativet Visa inte det här <objektet> igen så att användarna endast kan ignorera en återkommande dialogruta om det inte finns något bättre alternativ. Försök att avgöra i förväg om användarna verkligen behöver dialogrutan. Om de gör det visar du alltid dialogrutan, och om de inte gör det eliminerar du dialogrutan.

Fler riktlinjer och exempel finns i dialogrutor.

Underordnade kontroller

  • Placera underordnade kontroller till höger om eller under (indrag, spola med kryssrutans etikett) kryssrutan och dess etikett. Avsluta kryssrutans etikett med ett kolon.

    skärmbild av textrutan nedan kryssrutan etikett

    I det här exemplet delar kryssrutan och dess underordnade kontroll kryssrutans etikett och dess åtkomstnyckel.

  • Låt beroende redigerbara textrutor och listrutor vara aktiverade om de delar kryssrutans etikett. När användarna skriver eller klistrar in något i rutan väljer du motsvarande alternativ automatiskt. Detta förenklar interaktionen.

    skärmbild av sidhuvud- och sidfotstextrutor

    I det här exemplet väljer du automatiskt alternativet att ange ett sidhuvud eller en sidfot.

  • Om du kapslar kryssrutor med alternativknappar eller andra kryssrutor inaktivera dessa underordnade kontroller tills alternativet på hög nivå har valts. På så sätt undviks förvirring om innebörden av de underordnade kontrollerna.

  • Gör underordnade kontroller till en kryssruta som är sammanhängande med kryssrutan i tabbordningen.

  • Om du markerar ett alternativ innebär att du markerar underordnade kryssrutor markerar du uttryckligen kryssrutorna för att göra relationen tydlig.

    felaktig:

    skärmbild: markerad knapp, avmarkerade kryssrutor

    I det här exemplet är de underordnade kryssrutorna inte markerade.

    rätt:

    skärmbild: markerad knapp, markerade kryssrutor

    I det här exemplet markeras de underordnade kryssrutorna, vilket gör deras relation till det valda alternativet tydlig.

  • Använd beroende kryssrutor om alternativen lägger till onödig komplexitet. Kryssrutor bör vara oberoende alternativ, men ibland ger alternativ som alternativknappar onödig komplexitet.

    rätt:

    skärmbild av förvirrande knappar och kryssrutor

    I det här exemplet är användningen av alternativknappar korrekt, men skapar onödig komplexitet.

    Bättre:

    skärmbild av kryssrutor

    I det här exemplet är det enklare att använda kryssrutor och användarna kan fokusera på att välja önskade alternativ i stället för på deras komplexa relation.

    Viktigt: Använd endast den här riktlinjen i mycket sällsynta fall, när du visar beroendena ger betydande komplexitet utan att skapa klarhet. I föregående exempel är det osannolikt att användarna skulle försöka välja både upphöjd och nedsänkt, och om de gjorde det skulle det vara lätt att förstå att de var exklusiva alternativ.

Standardvärden

  • Om en kryssruta är för ett användaralternativ ange det säkraste (för att förhindra förlust av data eller systemåtkomst), det säkraste och privataste tillståndet som standard. Om säkerhet och säkerhet inte är faktorer väljer du det mest sannolika eller praktiska värdet.

bild på föreslagna kryssrutans storlek och avstånd

Rekommenderad storlek och avstånd för kryssrutor.

Etiketter

Kryssruta etiketter

  • Markera varje kryssruta.

  • Tilldela en unik åtkomstnyckel till varje etikett. Riktlinjer finns i Tangentbord.

  • Använd versalisering i meningsformat.

  • Skriv etiketten som en fras eller imperativ mening och använd ingen avslutande skiljetecken.

    • Undantag: Om en kryssruta också etiketterar en underordnad kontroll som följer den avslutar du etiketten med ett kolon.
  • Skriv etiketten så att den beskriver det markerade tillståndet för kryssrutan.

  • För en grupp med kryssrutor använder du parallell frasering och försöker hålla längden ungefär densamma för alla etiketter.

  • För en grupp med kryssrutor fokuserar du etiketttexten på skillnaderna mellan alternativen. Om alla alternativ har samma inledande text flyttar du texten till gruppetiketten.

  • Använd positiv frasering. Frasa inte en etikett så att markera en kryssruta innebär att inte utföra en åtgärd.

    • Undantag:Visa inte kryssrutorna för det här <objektet> igen.

    felaktig:

    skärmbild av negativ etikett

    I det här exemplet använder alternativet inte positiv frasering.

  • Beskriv bara alternativet med etiketten. Håll etiketterna korta så att det är enkelt att referera till dem i meddelanden och dokumentation. Om alternativet kräver ytterligare förklaring anger du förklaringen i en statisk text kontroll med hjälp av fullständiga meningar och avslutande skiljetecken.

    Not

    Att lägga till en förklaring till en kryssruta i en grupp innebär inte att du måste ge förklaringar till alla kryssrutor i gruppen. Ange relevant information i etiketten om du kan och använd endast förklaringar när det behövs. Upprepa inte bara etiketten för konsekvens.

    skärmbild av kryssruta, etikett och beskrivning

    I det här exemplet har en kryssruta ytterligare förklarande text under sig.

  • Om du rekommenderar ett alternativ bör du överväga att lägga till "(rekommenderas)" i etiketten. Se till att lägga till i kontrolletiketten, inte tilläggsanteckningarna.

  • Om du måste använda flerradsetiketter justerar du etikettens överkant med kryssrutan .

  • Använd inte en underordnad kontroll, de värden den innehåller eller dess enhetsetikett för att skapa en mening eller fras. En sådan design kan inte lokaliseras eftersom meningsstrukturen varierar med språket.

    felaktig:

    skärmbild av kryssrutans etikett med textrutan i

    I det här exemplet placeras textrutan felaktigt i kryssrutans etikett.

Kryssruta gruppetiketter

  • Använd gruppetiketten för att förklara syftet med gruppen, inte hur du gör markeringen. Anta att användarna vet hur de använder kryssrutor. Säg till exempel inte "Välj något av följande alternativ".

  • Avsluta varje etikett med ett kolon.

  • Tilldela inte en åtkomstnyckel till etiketten. Det är inte nödvändigt och det gör de andra åtkomstnycklarna svårare att tilldela.

  • Om du vill välja ett eller flera beroende alternativ förklarar du kravet på etiketten.

    rätt:

    skärmbild av etiketten för två kontroller: protokoll

    I det här exemplet kan användarna tro att de bara kan göra ett val.

    Bättre:

    skärmbild av etiketten: Protokoll väljer en eller flera

    I det här exemplet är det tydligt att användare kan göra fler än en markering.

Dokumentation

När du refererar till kryssrutor:

  • Använd den exakta etiketttexten, inklusive dess versaler, men ta inte med understrecket eller kolonet för åtkomstnyckeln. Markera kryssrutan Inkludera ordet.

  • Referera till en kryssruta som en kryssruta, inte alternativ, kryssruta eller bara ruta, eftersom endast rutan är tvetydig för språkvarianter.

  • Om du vill beskriva användarinteraktion använder du välj och avmarkera.

  • Formatera etiketten med fet text när det är möjligt. Annars placerar du etiketten endast inom citattecken om det behövs för att förhindra förvirring.

    Exempel: Markera kryssrutan Understrykning.