Listrutor i Windows 7 & kombinationsrutor

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 eller kombinationsruta väljer användarna bland en lista med ömsesidigt uteslutande värden. Användare kan välja ett och bara ett alternativ. Med en standardlistruta är användarna begränsade till val i listan, men med en kombinationsruta kan de ange ett val som inte finns i listan.

En typisk kombinationsruta.

Följande termer är viktiga att förstå när du läser den här artikeln:

• En standardlistruta är en ruta som innehåller en lista över flera objekt, med flera objekt synliga.
• En listruta är en lista där det markerade objektet alltid är synligt och de andra visas på begäran genom att klicka på en listruta.
• En kombinationsruta är en kombination av en standardlistruta eller en listruta och en redigerbar textruta, vilket gör att användarna kan ange ett värde som inte finns i listan.
  • En redigerbar listruta är en kombination av en listruta och en redigerbar textruta.
  • En redigerbar listruta är en kombination av en standardlistruta och en redigerbar textruta.

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 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, kryssrutalista, listbyggare eller lägg till/ta bort lista i stället.
• Är alternativen kommandon? I så fall använder du en -menyknapp eller delningsknapp i stället. Använd listrutor och kombinationsrutor för objekt (substantiv) eller attribut (adjektiv), men inte kommandon (verb).
• Innehåller listan data i stället för programalternativ? Hur som helst är en listruta eller kombinationsruta ett lämpligt val. Däremot är alternativknappar endast lämpliga för ett litet antal programalternativ.

listrutor

• 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? Överväg att använda en listruta om du inte vill uppmuntra användare att göra ändringar genom att dölja alternativen. Om inte kan du överväga alternativknappar, en lista med en enda markering eller en redigerbar listruta, som lägger större vikt vid de alternativa valen.

  

  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.

• Vill du uppmärksamma alternativet? I så fall bör du överväga alternativknappar, en lista med en enda markering eller en redigerbar listruta, som tenderar att dra mer uppmärksamhet genom att ta mer skärmutrymme. Eftersom listrutorna är kompakta är de bra alternativ för alternativ som du vill underbetona.

• Är skärmutrymmet premium? I så fall använder du en listruta eftersom skärmutrymmet som används är fast och oberoende av antalet alternativ.

• Finns det andra listrutor i fönstret? I så fall bör du överväga att använda en listruta för konsekvens.

redigerbara listrutor

Förutom de principer som precis har angetts för listrutor gäller även följande:

• Är de möjliga alternativen begränsade? I så fall använder du en normal listruta i stället. Kombinationsrutor är för obegränsade indata, där användarna kan behöva ange ett värde som för närvarande inte finns i listan. Eftersom indata inte är tränade måste du hantera felet med ett felmeddelande om användarna anger text som inte är giltig.

• Kan du räkna upp de mest sannolika valen i förväg? Om inte använder du en textruta i stället.

• Används listrutan för att visa tidigare användarindata? Om användarna inte behöver granska den fullständiga listan över tidigare indata använder du en textruta med alternativet automatisk komplettering i stället.

  

  I det här exemplet kan användarna behöva granska sina tidigare indata, så en redigerbar listruta är ett bra val.

  

  I det här exemplet är en textruta med automatisk komplettering ett bra val.

• Behöver användarna hjälp med att välja giltiga värden? I så fall använder du en textruta med knappen Bläddra i stället.

  

  I det här exemplet kan användare klicka på "Till" för att hjälpa dem att välja giltiga värden.

• Är det viktigt att uppmuntra användarna att granska de alternativa alternativen eller bjuda in ändring? I så fall bör du överväga att använda en redigerbar listruta i stället. Med en redigerbar listruta kommer användarna inte att känna till alternativen förrän listan har tagits bort.

• Behöver användarna snabbt hitta ett objekt i en stor lista? (Endast Win32) I så fall använder du en kombinationsruta eftersom användarna kan välja ett objekt genom att skriva dess fullständiga namn. I listrutan Win32 väljs däremot endast objekt som baseras på det sista tecknet (så att skriva "Jun" i en lista med månader skulle matcha november, inte juni). I det här fallet använder du en kombinationsruta även om de möjliga alternativen är begränsade.

redigerbara listrutor

• Är de möjliga alternativen begränsade? I så fall använder du en listruta med en enda markering eller en normal listruta i stället. Kombinationsrutor är för obegränsade indata, där användare kan behöva ange ett värde som för närvarande inte finns i listan. Eftersom indata är obehindrat måste du hantera felet med ett felmeddelande om användarna anger text som inte är giltig.
• Kan du räkna upp de mest sannolika valen i förväg? Om inte använder du en textruta i stället.
• Är det viktigt att uppmuntra användarna att granska de alternativa alternativen eller bjuda in ändring? Om inte kan du överväga en redigerbar listruta i stället.
• Vill du uppmärksamma alternativet? Om inte kan du överväga en redigerbar listruta i stället. Eftersom listrutorna är kompakta är de bra alternativ för alternativ som du vill underbetona.
• Är skärmutrymmet premium? I så fall använder du en redigerbar listruta eftersom skärmutrymmet som används är fast och oberoende av antalet alternativ.

För listrutor antalet objekt i listan inte är en faktor för att välja kontrollen eftersom de skalas från tusentals objekt hela vägen ned till ett. Redigerbara listrutor skalas från tusentals objekt ned till inga, eftersom användarna kan ange ett värde som inte finns i listan. Eftersom listrutor kan användas för data kanske antalet objekt inte är kända i förväg och kanske inte kan garanteras. Inkludera alltid minst tre objekt i redigerbara listrutor för att justera ytterligare skärmutrymme.

Användningsmönster

Listrutor och kombinationsrutor har flera användningsmönster:

Användning	Exempel
listruta en standardlistruta med en fast uppsättning fördefinierade värden.	När det är stängt visas endast det markerade objektet. När användarna klickar på listrutan visas alla alternativ. Om du vill ändra värdet kan användarna öppna listan och klicka på ett annat värde. I det här exemplet är listan i sitt normala tillstånd. I det här exemplet har listan tagits bort.
listrutan Förhandsversion en listruta som förhandsgranskar resultatet av markeringen för att hjälpa användarna att välja.	I de här exemplen förhandsgranskar listrutorna resultatet av markeringen.
listrutan Redigerbar en nedrullningsbar kombinationsruta som gör att användarna kan ange ett värde som inte finns i listrutan.	Exempel på en redigerbar listruta i redigeringslägen och nedrullningsbara lägen. Använd den här kontrollen när du vill ge flexibiliteten i en textruta, men ändå vill hjälpa användarna genom att tillhandahålla en bekväm lista över troliga alternativ.
redigerbara listrutor en vanlig kombinationsruta, vilket gör att användarna kan ange ett värde som inte finns i listan med alltid synliga värden.	I de här exemplen visas alltid de redigerbara listrutorna. Den här kontrollen är ett bättre alternativ än den redigerbara listrutan när det är viktigt att uppmuntra användare att granska de alternativa valen eller bjuda in ändring.

Riktlinjer

Allmänt

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

Presentation

• Sortera listobjekt i logisk ordning, till exempel gruppera mycket relaterade alternativ, placera de vanligaste alternativen 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 listobjekten efter deras rumsliga relation.

  Felaktig:

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

  Rätt:

  I det här exemplet sorteras listobjekten i alfabetisk ordning förutom det alternativ som representerar alla objekt.

• 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 i stället för att det beskriver att själva alternativet inte används.

• Inaktivera även eventuella associerade etiketter och kommandoknappar när du inaktiverar en listruta eller kombinationsruta.

Listrutor

• När en enda listruta används för att ändra vyn för en associerad kontroll ändra vyn omedelbart vid markeringen i stället för att kräva en separat kommandoknapp. Använd endast en separat kommandoknapp om det tar lång tid att återge listan. Men listrubriker och menyknappar är de önskade kontrollerna för detta ändamål.

• Har inte tomma listobjektanvända metaalternativ i stället. Användarna vet inte hur de ska tolka tomma objekt, medan innebörden av metaalternativ är explicit.

  Rätt:

  Felaktig:

  I det felaktiga exemplet är innebörden av det tomma alternativet oklar.

Listrutor för förhandsversion

• Använd förhandsgranskningar i listobjekten när det är bättre att visa med bilder än att beskriva med enbart text.

  

  I det här exemplet förklarar förhandsversionen alternativen mycket bättre än enbart text.

• Använd inte onödiga, ohjälpsamma ikoner i förhandsversioner.

  Felaktig:

  I det här exemplet är förhandsgranskningsikonerna onödiga eftersom de inte kommunicerar någon information.

Kombinationsrutor

• Begränsa längden på indatatexten när du kan. Om till exempel giltiga indata är ett tal mellan 0 och 999 använder du en kombinationsruta som är begränsad till tre tecken.

• Om det finns många möjliga alternativ kan du fokusera listinnehållet på de mest sannolika alternativen. Eftersom användare kan ange värden som inte finns i listan behöver kombinationsrutor inte visa alla alternativ, bara de troliga valen eller ett representativt exempel.

  

  I det här exemplet visas inte många giltiga alternativ, till exempel 15 eller teckensnitt i halv storlek, till exempel 9,5.

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: Visa ett tomt standardvärde om kontrollen representerar en egenskap i ett blandat tillstånd, vilket inträffar när du visar en egenskap för flera objekt som inte har samma inställning.

Uppmanas

En fråga är en etikett eller en kort instruktion som placeras i en redigerbar listruta som standardvärde. Till skillnad från statisk text försvinner uppmaningar från skärmen när användarna skriver in något i kombinationsrutan eller får indatafokus.

En vanlig fråga.

Använd en fråga när:

• Skärmutrymmet är på en sådan premie att det inte är önskvärt att använda en etikett eller instruktion, till exempel i ett verktygsfält.
• Uppmaningen är främst till för att identifiera syftet med listan på ett kompakt sätt. Det får inte vara viktig information som användarna behöver se när de använder kombinationsrutan.

Använd inte uppmaningar bara för att uppmana användarna att välja något i listan eller för att klicka på knappar. Till exempel är frågor som Välj ett alternativ eller Ange ett filnamn och klickar sedan på Skicka onödiga.

När du använder prompter:

• Rita prompttexten i kursiv grå och riktig text i normal svart. Prompttexten får inte förväxlas med verklig text.
• Behåll snabbtexten koncis. Du kan använda fragment i stället för fullständiga meningar.
• Använd versalisering i meningsformat.
• Använd inte avslutande skiljetecken eller ellipser.
• Prompttexten bör inte vara redigerbar och bör försvinna när användarna klickar på eller tar en flik i textrutan.
  • Undantag: Uppmaningen visas om textrutan har standardinmatningsfokus och bara försvinner när användaren börjar skriva.
• Prompttexten återställs om textrutan fortfarande är tom när den förlorar indatafokus.

Felaktig:

I det här exemplet är skärmutrymmet inte premium. När en redigerbar listruta har fyllts i är det svårt för användarna att komma ihåg vad den är till för. och prompttexten kan redigeras och ritas på samma sätt som verklig text.

Rekommenderad storlek och avstånd

Rekommenderad storlek och avstånd för listrutor och kombinationsrutor.

• Välj en bredd som är lämplig för de längsta giltiga data. Listrutor kan inte rullas vågrätt, så användarna kan bara se vad som visas i kontrollen. (Observera dock att kombinationsrutor kan ha funktionen AutoScroll aktiverad.)
• 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 listlängd som eliminerar onödig lodrät rullning. Eftersom listrutor visas på begäran bör deras listor visa upp till 30 objekt. Redigerbara listrutor (de som inte har en nedrullningsbar knapp) bör visa mellan 3 och 12 objekt.

Etiketter

Kontrolletiketter

• Skriv etiketten som ett ord eller en fras, inte som en mening, och avsluta den med ett kolon. undantag:

  • Redigerbara listrutor med prompter som finns där utrymmet är på premiumnivå.
  • Om en listruta eller kombinationsruta är underordnad en alternativknapp eller kryssruta och introduceras av dess etikett som slutar med ett kolon ska du inte placera någon ytterligare etikett på kontrollen.

• Tilldela en unik åtkomstnyckel för varje etikett. 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 finns till vänster justerar du etiketttexten lodrätt med kontrolltexten.

  Rätt:

  I det här exemplet är etiketten korrekt justerad med kontrolltexten.

  Felaktig:

  I det här exemplet är etiketten felaktigt justerad med kontrolltexten.

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

• Gör inte innehållet i listrutan eller kombinationsrutan (eller dess enhetsetikett) till en del av en mening, eftersom detta inte kan lokaliseras.

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

• Om du behöver lägga till instruktionstext om en listruta eller kombinationsruta 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 den här informationen antingen inom parenteser mellan etiketten och kolonet eller utan parenteser under kontrollen.

  

  Det här exemplet visar ytterligare information som placeras under kontrollen.

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. inkludera antingen lista eller ruta, beroende på vilket som är tydligare.
• För listalternativ använder du den exakta alternativtexten, inklusive dess versaler.
• I programmering och annan teknisk dokumentation refererar du till listrutor som listrutor. Överallt annars använder du antingen lista eller ruta, beroende på vilket som är tydligare.
• Om du vill beskriva användarinteraktion använder du klicka.
• Formatera etikett- och listalternativen med fet text när det är möjligt. Annars placerar du endast etiketten och alternativen inom citattecken om det behövs för att förhindra förvirring.

Exempel: I listan Teckenstorlek klickar du på Stora teckensnitt.

När du refererar till kombinationsrutor:

• Använd den exakta etiketttexten, inklusive dess versaler, men ta inte med understrecket eller kolonet för åtkomstnyckeln. inkludera ordrutan.
• För listalternativ använder du den exakta alternativtexten, inklusive dess versaler.
• I programmering och annan teknisk dokumentation refererar du till kombinationsrutor som kombinationsrutor. Överallt annars, använd låda.
• Om du vill beskriva användarinteraktion använder du retur.
• Formatera etikett- och listalternativen med fet text när det är möjligt. Annars placerar du endast etiketten och alternativen inom citattecken om det behövs för att förhindra förvirring.

Exempel: I rutan Teckensnitt anger du det teckensnitt som du vill använda.