Listrutor

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 listruta kan användarna välja från en uppsättning värden som visas i en lista som alltid är synlig. Med en listruta med en enda markering väljer användarna ett objekt från en lista med ömsesidigt uteslutande värden. Med en listruta med flera val väljer användarna noll eller fler objekt från en lista med värden.

En typisk listruta med en enda markering.

Not

Riktlinjer för layout och listvyer visas i separata artiklar.

Är det här rätt kontroll?

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

• Innehåller listan data i stället för programalternativ? Hur som helst är en listruta ett lämpligt val oavsett antalet objekt. Däremot lämpar sig alternativknappar eller kryssrutor endast för ett litet antal programalternativ.
• Behöver användarna ändra vyer, gruppera, sortera efter kolumner eller ändra kolumnbredd och ordning? I så fall använder du en listvy i stället.
• Måste kontrollen vara en dragkälla eller ett släppmål? I så fall använder du en listvy i stället.
• Behöver listobjekten kopieras till eller klistras in från Urklipp? I så fall använder du en listvy i stället.

listor med en enda markering

• Används kontrollen för att välja ett alternativ från en lista över ömsesidigt uteslutande värden? Om inte använder du en annan kontroll. Om du vill välja flera alternativ använder du en standardlista med flera val, kryssruta, listbyggare eller lägg till/ta bort lista i stället.
• Finns det ett standardalternativ som rekommenderas för de flesta användare i de flesta situationer? Är det mycket viktigare att se det valda alternativet än att se alternativen? I så fall bör du överväga att använda en listruta om du inte vill uppmuntra användare att göra ändringar genom att dölja alternativen.

I det här exemplet är den högsta färgkvaliteten det bästa valet för de flesta användare, så en listruta är ett bra val för att tona ned alternativen.

• Kräver listan konstant interaktion? I så fall kan du använda en lista med en enda markering för att förenkla interaktionen.

I det här exemplet ändrar användarna ständigt det markerade objektet i listan Visa objekt för att ange förgrunds- och bakgrundsfärgerna. Att använda en listruta i det här fallet skulle vara mycket omständligt.

• Verkar inställningen vara en relativ kvantitet? Skulle användarna dra nytta av omedelbar feedback om effekten av att ställa in ändringar? I så fall bör du överväga att använda ett skjutreglage i stället.
• Finns det en betydande hierarkisk relation mellan listobjekten? I så fall använder du en trädvy kontroll i stället.
• Är skärmutrymmet premium? I så fall använder du en listruta i stället eftersom skärmutrymmet som används är fast och oberoende av antalet listobjekt.

Standard-listor med flera val och kryssrutor

• Är flera val viktiga för uppgiften eller används ofta? I så fall kan du använda en kryssruta för att göra flera val uppenbara, särskilt om dina målanvändare inte är avancerade. Många användare inser inte att en standardlista med flera val stöder flera val. Använd en standardlista med flera val om kryssrutorna skulle dra för mycket uppmärksamhet åt flera markeringar eller leda till för mycket skärmtrassel.
• Är stabiliteten för flera markeringar viktig? I så fall använder du en kryssruta, listbyggare eller lägg till/ta bort lista eftersom klicka på ändringar endast ett enskilt objekt i taget. Med en standardlista med flera val är det mycket enkelt att rensa alla val även av misstag.
• Används kontrollen för att välja noll eller fler objekt från en lista med värden? Om inte använder du en annan kontroll. Om du vill välja ett objekt använder du en lista med en enda markering i stället.

förhandsgranskningslistor

• Är alternativen enklare att välja med bilder än med enbart text? I så fall använder du en förhandsgranskningslista.

List builders och lägg till/ta bort listor

• Används kontrollen för att välja noll eller fler objekt från en lista med värden? Om inte använder du en annan kontroll. Om du vill välja ett objekt använder du en lista med en enda markering i stället.
• Spelar ordningen på de markerade objekten någon roll? I så fall stöder listverktyget och listmönster för att lägga till/ta bort, medan de andra mönstren för flera val inte gör det.
• Är det viktigt att användarna ser en sammanfattning av alla markerade objekt? I så fall visar listverktyget och listmönstren lägg till/ta bort endast de markerade objekten, medan de andra mönstren för flera val inte gör det.
• Är de möjliga valen obehindrade? I så fall använder du en lista för att lägga till/ta bort så att användarna kan välja värden som för närvarande inte finns i listan.
• Kräver det en särskild dialogruta för att välja objekt för att lägga till ett värde i listan? I så fall använder du en lägg till/ta bort-lista och visar dialogrutan när användarna klickar på Lägg till.
• Är skärmutrymmet premium? I så fall använder du en lägg till/ta bort-lista i stället eftersom den använder mindre skärmutrymme genom att inte alltid visa uppsättningen med alternativ.

För listrutor är antalet objekt i listan inte en faktor för att välja kontrollen eftersom de skalas från tusentals objekt hela vägen ned till ett för listor med en enda markering (och ingen för listor med flera val). Eftersom listrutor kan användas för data kanske antalet objekt inte är känt i förväg.

Obs! Ibland implementeras en kontroll som ser ut som en listruta med hjälp av en listvy och vice versa. I sådana fall tillämpar du riktlinjerna baserat på användning, inte implementering.

Användningsmönster

Listrutor har flera användningsmönster:

Etikett	Värde
listor med en enda markering Tillåt användare att välja ett objekt i taget.	I det här exemplet kan användarna bara välja ett visningsobjekt.
Flervalslistor med standardtyp Tillåt användare att välja valfritt antal objekt, inklusive inga.	Standardlistor med flera val har exakt samma utseende som listor med en enda markering, så det finns ingen visuell ledtråd om att en listruta stöder flera val. Eftersom användarna måste identifiera den här möjligheten används det här listmönstret bäst för uppgifter där flera val inte är nödvändiga och används sällan. Det finns två olika lägen för flera val: flera och utökade. utökat markeringsläge är det överlägset vanligare, där markeringen kan utökas genom att dra eller med Skift+klicka och Ctrl+klicka för att välja grupper med sammanhängande respektive icke-intilliggande värden. I läge för flera valväxlar om du klickar på valfritt objekt dess markeringstillstånd oavsett skift- och Ctrl-tangenterna. Med tanke på detta ovanliga beteende är läget för flera val inaktuellt och du bör använda kryssrutelistor i stället. I det här exemplet kan användare välja valfritt antal objekt med hjälp av läget för flera val.
kryssrutan listar Precis som standardlistrutor med flera val tillåter kryssrutor användare att välja valfritt antal objekt, inklusive inga.	Till skillnad från standardlistor med flera val visar kryssrutorna tydligt att flera val är möjliga. Använd det här listmönstret för uppgifter där flera val är viktiga eller ofta används. I det här exemplet väljer användarna vanligtvis fler än ett objekt, så en kryssruta används. Med den här tydliga indikationen på flera val kan du anta att kryssrutor är att föredra framför standardlistor med flera val. I praktiken kräver få uppgifter flera val eller använder det kraftigt. med hjälp av en kryssruta i sådana fall drar för mycket uppmärksamhet åt markeringen. Därför är vanliga flervalslistor mycket vanligare.
förhandsgranskningslistor Kan vara en eller flera val, men de visar en förhandsgranskning av effekten av markeringen i stället för bara text.	I det här exemplet visar en förhandsgranskning av varje alternativ tydligt effekten av valet, vilket är effektivare än att använda enbart text.
List builders Tillåt användare att skapa en lista med alternativ genom att lägga till ett objekt i taget och eventuellt ange listordningen.	En listbyggare består av två listor med en enda markering: listan till vänster är en fast uppsättning alternativ och listan till höger är listan som skapas. Det finns två kommandoknappar mellan listorna: En knappen Lägg till som flyttar det markerade alternativet till listan som skapas och infogas före det markerade objektet. (Dubbelklicka på ett alternativobjekt har samma effekt.) En knappen Ta bort som tar bort det markerade objektet från den skapade listan och returnerar det till alternativlistan. (Dubbelklicka på ett objekt i den inbyggda listan har samma effekt.) Den skapade listan kan ha Flytta upp och Flytta ned kommandon för att ordna listobjekten. I det här exemplet används en listbyggare för att skapa ett verktygsfält genom att välja objekt från en uppsättning tillgängliga alternativ och ange deras ordning.
Lägg till/ta bort listor Tillåt användare att skapa en lista med alternativ genom att lägga till ett eller flera objekt i taget och eventuellt ange listordningen (t.ex. listbyggare).	Till skillnad från en listbyggare visas en dialogruta om du klickar på Lägg till för att välja objekt som ska läggas till i listan. Om du använder en separat dialogruta kan du välja objekt med stor flexibilitet. Du kan använda en specialiserad objektväljare eller till och med en gemensam dialogruta. Jämfört med listverktyget är den här varianten mer kompakt men kräver lite mer arbete för att lägga till objekt. I det här exemplet kan användare lägga till eller ta bort verktyg från en meny samt ange ordning. Listverktyget och listmönstren för att lägga till/ta bort är betydligt tyngre än de andra listorna med flera val, men de har två unika fördelar: Användarna har kontroll över listordningen, både när de skapar listan och efter. Användare kan granska en sammanfattning av de markerade objekten, vilket kan vara en betydande fördel om antalet val är stort. Deras nackdelar är att de kräver mycket mer skärmutrymme och kan vara svåra att använda när du skapar en stor lista med objekt från grunden. Därför används de bäst för att skapa korta listor eller ändra listor som redan finns.

Riktlinjer

Presentation

• Sortera listobjekt i logisk ordning till exempel gruppera relaterade alternativ, placera de vanligaste objekten först eller använda alfabetisk ordning. Sortera namn i alfabetisk ordning, tal i numerisk ordning och datum i kronologisk ordning. Listor med 12 eller fler objekt bör sorteras alfabetiskt för att göra det lättare att hitta objekt.

Rätt:

I det här exemplet sorteras listruteobjekten efter deras rumsliga relation.

Felaktig:

I det här exemplet finns det så många listobjekt att de ska sorteras i alfabetisk ordning.

Rätt:

I det här exemplet är listobjekten lättare att hitta eftersom de sorteras i alfabetisk ordning. Objektet "Alla Windows-produkter" är dock i början av listan, oavsett sorteringsordning.

• Platsalternativ som representerar Alla eller Ingen i början av listan, oavsett sorteringsordning för de återstående objekten.
• Omsluta metaalternativ inom parenteser.

I det här exemplet är "(none)" ett metaalternativ eftersom det inte är ett giltigt värde för valet, snarare anger det att själva alternativet inte används.

• Det finns inga tomma listobjekt som använder metaalternativ i stället. Användarna vet inte hur de ska tolka tomma objekt, medan innebörden av metaalternativ är explicit.

Felaktig:

I det här exemplet är innebörden av det tomma objektet oklar.

Rätt:

I det här exemplet används metaalternativet "(none)" i stället.

Interaktion

• Överväg att ange dubbelklicksbeteende. Dubbelklicka bör ha samma effekt som att välja ett objekt och utföra standardkommandot.
• Gör dubbelklicksbeteendet redundant. Det bör alltid finnas en kommandoknapp eller ett snabbmenykommando som har samma effekt.
• Om användarna inte kan göra något med de markerade objekten ska du inte tillåta val.

Rätt:

Den här listrutan visar en skrivskyddad lista över ändringar. det finns inget behov av att välja.

• Inaktivera även eventuella associerade etiketter och kommandoknappar när du inaktiverar en listruta.
• Använd inte ändringen av det markerade objektet i en listruta 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). Undantag: Du kan dynamiskt ändra statisk text som används för att beskriva det markerade objektet.

Acceptabelt:

Om du ändrar det markerade objektet i det här exemplet ändras beskrivningen.

• Undvik vågrät rullning. Multicolumn-listor förlitar sig på vågrät rullning, vilket vanligtvis är svårare att använda än lodrät rullning. Flerkolumnslistor som kräver vågrät rullning kan användas när du har många alfabetiskt sorterade objekt och tillräckligt med skärmutrymme för en bred kontroll.

Acceptabelt:

I det här exemplet används flera kolumner som kräver vågrät rullning eftersom det finns många objekt och gott om tillgängligt skärmutrymme för en bred kontroll.

Listor med flera val

• Överväg att visa antalet markerade objekt under listan, särskilt om användarna sannolikt kommer att välja flera objekt. Den här informationen ger inte bara användbar feedback, utan visar också tydligt att listrutan stöder flera val.

I det här exemplet visas antalet markerade objekt under listan.

• Du kan ange andra urvalsmått som kan vara mer meningsfulla, till exempel de resurser som krävs för valen.

I det här exemplet är diskutrymmet som krävs för att installera komponenterna mer meningsfullt än antalet markerade objekt.

• Om det finns potentiellt många listobjekt och det är troligt att du väljer eller rensar dem alla lägger du till Välj alla och Rensa alla kommandoknappar.
• För standardlistor med flera val ska du inte använda läget för flera val eftersom det här markeringsläget är inaktuellt. För motsvarande beteende använder du en kryssruta i stället.

Standardvärden

• Välj det säkraste alternativet (för att förhindra förlust av data eller systemåtkomst) och det säkraste alternativet som standard. Om säkerhet och säkerhet inte är faktorer väljer du det mest sannolika eller praktiska alternativet.

Undantag: Markera inga objekt om kontrollen representerar en egenskap i ett blandat tillstånd, vilket händer när du visar en egenskap för flera objekt som inte har samma inställning.

Rekommenderad storlek och avstånd

Rekommenderad storlek och avstånd för listrutor.

• Välj en listrutas bredd som är lämplig för de längsta giltiga data. Standardlistrutor kan inte rullas vågrätt, så användarna kan bara se vad som visas i kontrollen.
• Inkludera ytterligare 30 procent (upp till 200 procent för kortare text) för all text (men inte siffror) som ska lokaliseras.
• Välj en listrutehöjd som visar ett heltal med objekt. Undvik att trunkera objekt lodrätt.
• Välj en listrutehöjd som eliminerar onödig lodrät rullning. Listrutor ska visa mellan 3 och 20 objekt utan att behöva rulla. Överväg att göra en listruta något längre om du gör det eliminerar den lodräta rullningslisten. Listor med potentiellt många objekt bör visa minst fem objekt för att underlätta rullning genom att visa fler objekt i taget och göra rullningslisten enklare att placera.
• Om användarna har nytta av att göra listrutan större kan du ändra storlek på listrutan och dess överordnade fönster. På så sätt kan användarna justera listrutans storlek efter behov. Storleksbara listrutor bör dock visa inte mindre än tre objekt.

Etiketter

Kontrolletiketter

• Alla listrutor behöver etiketter. Skriv etiketten som ett ord eller en fras, inte som en mening; använd ett kolon i slutet av etiketten.

Undantag: Utelämna etiketten om det bara är en omskrivning av en dialogrutas huvudinstruktion. I det här fallet tar huvudinstruktionen kolonet (om det inte är en fråga) och åtkomstnyckeln.

acceptabelt:

I det här exemplet genererar listruteetiketten bara huvudinstruktionen.

Bättre:

I det här exemplet tas den redundanta etiketten bort, så huvudinstruktionen tar kolon- och åtkomstnyckeln.

• Om en listruta är underordnad en alternativknapp eller kryssruta och introduceras av kontrollens etikett som slutar med ett kolon ska du inte placera någon ytterligare etikett i listrutekontrollen.

I det här exemplet är listrutan underordnad en alternativknapp och delar etiketten.

• Tilldela en unik åtkomstnyckel. Riktlinjer finns i Tangentbord.
• Använd versalisering i meningsformat.
• Placera etiketten till vänster om eller ovanför kontrollen och justera etiketten mot kontrollens vänstra kant.
  • Om etiketten är till vänster justerar du etiketttexten lodrätt med den första textraden i kontrollen.

Rätt:

I de här exemplen justeras etiketten längst upp med listrutans vänstra kant och etiketten till vänster överensstämmer med texten i listrutan.

Felaktig:

I de här felaktiga exemplen justeras etiketten överst med texten i listrutan och etiketten till vänster justeras mot listrutans överkant.

• För listrutor med flera val använder du en etikett som tydligt anger att flera val är möjliga. Kryssrutelistetiketter kan vara mindre explicita.

Rätt:

I det här exemplet anger etiketten tydligt att flera val är möjliga.

Felaktig:

I det här exemplet innehåller etiketten ingen uppenbar information om flera val.

Bäst:

I det här exemplet visar kryssrutorna tydligt att flera val är möjliga, så etiketten behöver inte vara explicit.

• Du kan ange enheter (sekunder, anslutningar och så vidare) inom parenteser efter etiketten.

Alternativtext

• Tilldela ett unikt namn till varje alternativ.
• Använd versalisering i meningsformat, såvida inte ett objekt är ett lämpligt substantiv.
• Skriv etiketten som ett ord eller en fras, inte som en mening, och använd inga avslutande skiljetecken.
• Använd parallell frasering och försök att hålla längden ungefär densamma för alla alternativ.

Instruktionstext och tilläggstext

• Om du behöver lägga till instruktionstext om en listruta lägger du till den ovanför etiketten. Använd fullständiga meningar med avslutande skiljetecken.
• Använd versalisering i meningsformat.
• Ytterligare information som är användbar men inte nödvändig bör hållas kort. Placera texten antingen inom parenteser mellan etiketten och kolonet eller utan parenteser under kontrollen.

I det här exemplet placeras kompletterande text under listan.

Dokumentation

När du refererar till listrutor:

• Använd den exakta etiketttexten, inklusive dess versaler, men ta inte med understrecket eller kolonet för åtkomstnyckeln. Ta med ordlistan. Referera inte till en listruta som en listruta eller ett fält.
• För listobjekt använder du den exakta objekttexten, inklusive dess versaler.
• I programmering och annan teknisk dokumentation refererar du till listrutor som listrutor. Använd listan överallt annars.
• Om du vill beskriva användarinteraktion använder du välj.
• Formatera etiketten och listobjekten med fet text när det är möjligt. Annars placerar du endast etiketten och objekten inom citattecken om det behövs för att förhindra förvirring.

Exempel: I listan Gå till vilken väljer du Bokmärke.