Textrutor
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 textruta kan användare visa, ange eller redigera en text eller ett numeriskt värde.
En typisk textruta.
Not
Riktlinjer för layout, teckensnittoch ballonger visas i separata artiklar.
Är det här rätt kontroll?
Du kan ta ställning till följande frågor:
- Är det praktiskt att räkna upp alla giltiga värden effektivt? I så fall bör du överväga en lista med en enda markering, listvy, listruta, redigerbar listruta eller skjutreglage i stället.
- Är giltiga data helt obehindrat? Eller begränsas giltiga data endast av format (begränsad längd eller teckentyper)? I så fall använder du en textruta.
- Representerar värdet en datatyp som har en specialiserad gemensam kontroll? Exempel är datum, tid eller IPv4- eller IPv6-adress. I så fall använder du lämplig kontroll, till exempel en datumkontroll i stället för en textruta.
- Om data är numeriska:
- Uppfattar användarna inställningen som en relativ kvantitet? I så fall använder du ett skjutreglage.
- Skulle användaren dra nytta av omedelbar feedback om effekten av att ställa in ändringar? I så fall använder du ett skjutreglage, eventuellt tillsammans med en textruta. Användare kan till exempel enkelt välja en färg med hjälp av ett skjutreglage eftersom de omedelbart kan se effekten av ändringar i värden för nyans, mättnad eller ljusstyrka.
Designbegrepp
Medan textrutor har fördelen att vara mycket flexibla, har de nackdelen med att ha minimala begränsningar. De enda begränsningarna för en redigerbar textruta är:
- Du kan också ange det maximala antalet tecken.
- Du kan också begränsa indata till numeriska tecken (endast 0 9).
- Om du använder en spinnkontrollkan du begränsa val av spinnkontroll till giltiga värden.
Förutom längden och den valfria förekomsten av en spinnkontroll har textrutor inte några visuella ledtrådar som tyder på giltiga värden eller deras format. Det innebär att förlita sig på etiketter för att förmedla den här informationen till användarna. Om användarna anger text som inte är giltig måste du hantera felet med ett felmeddelande.
Som en allmän regel du bör använda den mest begränsade kontrollen som du kan. Använd obegränsade kontroller som textrutor som en sista utväg. När du överväger begränsningar bör du ha i åtanke de globala användarnas behov. Till exempel är en kontroll som är begränsad till USA postnummer inte globaliserad, men en obehindrat textruta som accepterar något postnummerformat är.
Användningsmönster
En textruta är en flexibel kontroll med flera möjliga användningsområden.
| Etikett | Värde |
|---|---|
|
Dataindata En textruta med en rad utan träning som används för att ange eller redigera korta strängar. |
En textruta som inte är tränad med en rad. |
|
Formaterad En uppsättning korta textrutor med fast storlek och en rad som används för att ange data med ett visst format. |
En textruta som används för formaterad datainmatning. Obs! Funktionen automatiskt avsluta flyttar automatiskt indatafokus från en textruta till nästa. En nackdel med den här metoden är att data inte kan kopieras eller klistras in som en enda enhet. |
|
assisterad datainmatning En textruta med en rad, utan träning som används för att ange eller redigera strängar, kombinerad med en kommandoknapp som hjälper användarna att välja giltiga värden. |
I det här exemplet hjälper kommandot Bläddra användare att välja giltiga värden. |
|
Textinmatning En textruta med flera rader som inte är tränad och som används för att ange eller redigera långa strängar. |
En textruta med flera rader utan träning. |
|
numeriska indata En textruta med en rad, endast numeriskt som används för att ange eller redigera siffror, med en valfri spinnkontroll för att underlätta musbaserade indata. |
En textruta som används för numeriska indata. Kombinationen av en textruta och dess associerade spinnkontroll kallas för en spin box. |
|
indata för lösenord och PIN-kod En textruta med en rad utan träning som används för att ange lösenord och PIN-koder på ett säkert sätt. |
En textruta som används för att ange lösenord. |
|
Datautdata En skrivskyddad textruta med en rad, som alltid visas utan kantlinje, används för att visa korta strängar. |
Till skillnad från statisk text kan data som visas med hjälp av en textruta rullas (användbara om data är bredare än kontrollen), markeras och kopieras.
En skrivskyddad textruta med en rad som används för att visa data. |
|
textutdata En skrivskyddad textruta med flera rader som används för att visa långa strängar. |
En skrivskyddad textruta som används för att visa data. |
Riktlinjer
Allmänt
Inaktivera även associerade etiketter, instruktionsetiketter, spinnkontroller och kommandoknappar när du inaktiverar en textruta.
Använd automatisk komplettering för att hjälpa användare att ange data som sannolikt kommer att användas upprepade gånger. Exempel är användarnamn, adresser och filnamn. Använd dock inte automatisk komplettering för textrutor som kan innehålla känslig information, till exempel lösenord, PIN-koder, kreditkortsnummer eller medicinsk information.
Få inte användarna att rulla i onödan. Om du förväntar dig att data ska vara större än textrutan och du enkelt kan göra textrutan större utan att skada layouten, storleksanpassa rutan för att eliminera behovet av rullning.
felaktig:
I det här exemplet bör textrutan göras mycket längre för att hantera dess data.
Rullningslister:
- Placera inte vågräta rullningslister i textrutor med flera rader. Använd lodrät rullning och radhantering i stället.
- Placera inga rullningslister på enradstextrutor.
För numeriska indata kan du använda en rotationskontroll. För textinmatning använder du en listruta eller en redigerbar listruta i stället.
Använd inte funktionen för automatisk avslut förutom formaterade dataindata. Den automatiska fokusväxlingen kan överraska användarna.
Redigerbara textrutor
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 numerisk textruta som är begränsad till tre tecken. Alla delar av textrutor som använder formaterad datainmatning måste ha en kort, fast längd.
Var flexibel med dataformat. Om användarna sannolikt kommer att ange text med en mängd olika format kan du försöka hantera alla de vanligaste. Till exempel kan många namn, siffror och identifierare anges med valfria blanksteg och skiljetecken, och versaler spelar ofta ingen roll.
Om du inte kan hantera de troliga formaten behöver du ett visst format med formaterade dataindata eller anger giltiga format i etiketten.
acceptabelt:
I det här exemplet kräver en textruta indata i ett visst format.
Bättre:
I det här exemplet används det formaterade datainmatningsmönstret för att kräva ett specifikt format.
Bäst:
I det här exemplet hanterar en textruta alla sannolika format.
Överväg att formatera flexibilitet när du väljer den maximala indatalängden. Ett giltigt kreditkortsnummer kan till exempel använda upp till 19 tecken, så att begränsa längden till något kortare skulle göra det svårt att ange siffror med de längre formaten.
Använd inte det formaterade datainmatningsmönstret om användarna är mer benägna att klistra in långa, komplexa data. Reservera i stället det formaterade datainmatningsmönstret för situationer där användarna är mer benägna att skriva data.
I det här exemplet används inte det formaterade datainmatningsmönstret, så att användarna kan klistra in IPv6-adresser.
Om användarna är mer benägna att ange hela värdet igen markerar du all text i indatafokus. Om användarna är mer benägna att redigera placerar du caret i slutet av texten.
I det här exemplet är det mer troligt att användarna ersätter än redigerar, så hela värdet väljs i indatafokus.
I det här exemplet är det mer troligt att användarna lägger till nyckelord än att ersätta texten, så att caret placeras i slutet av texten.
Använd alltid en textruta med flera rader om nya radtecken är giltiga indata.
När textrutan är för en fil eller sökväg anger du alltid knappen Bläddra.
Numeriska textrutor
Välj den mest praktiska enheten och märk enheterna. Överväg till exempel att använda milliliter i stället för liter (eller vice versa), procentsatser i stället för direkta värden (eller vice versa) och så vidare.
rätt:
I det här exemplet är enheten märkt, men användaren måste ange decimaltal.
Bättre:
I det här exemplet använder textrutan en mer praktisk enhet.
Använd en spinnkontroll när det är till hjälp. Ibland är det dock inte praktiskt att snurra kontroller, till exempel när användarna behöver ange många stora nummer. Använd spinnkontroller när:
- Indata kommer sannolikt att vara ett litet tal, vanligtvis under 100.
- Användarna kommer sannolikt att göra en liten ändring i ett befintligt nummer.
- Användare är mer benägna att använda musen än tangentbordet.
högerjustera numerisk text när:
- Det finns mer än en numerisk textruta.
- Textrutorna är lodrätt justerade.
- Användarna kommer sannolikt att lägga till eller jämföra värdena.
rätt:
I det här exemplet är den numeriska texten rättjusterad för att göra det enkelt att jämföra värden.
felaktig:
I det här exemplet är den numeriska texten felaktigt vänsterjusterad.
Alltid högerjusterade monetära värden.
Tilldela inte särskilda betydelser till specifika numeriska värden, även om dessa särskilda betydelser används internt av ditt program. Använd i stället kryssrutor eller alternativknappar för ett explicit användarval.
felaktig:
I det här exemplet har värdet -1 en särskild betydelse.
rätt:
I det här exemplet gör en kryssruta alternativet explicit.
Indata för lösenord och PIN-kod
- Använd alltid den vanliga lösenordskontrollen i stället för att skapa din egen. Lösenord och PIN-koder kräver särskild behandling för att hanteras på ett säkert sätt.
Fler riktlinjer och exempel finns i Balloons.
Textutdata
- Överväg att använda den vita bakgrundssystemfärgen för stor, skrivskyddad text med flera rader. En vit bakgrund gör texten lättare att läsa. Massor av text på en grå bakgrund avråder från att läsa.
Mer information om bakgrundsfärger finns i Teckensnitt.
Datautdata
- Använd inte en kantlinje för skrivskyddade textrutor med en rad. Kantlinjen är en visuell ledtråd om att texten kan redigeras.
- Inaktivera inte skrivskyddade textrutor med en rad. Detta hindrar användare från att välja och kopiera texten till Urklipp. Det hindrar också användare från att rulla data om de överskrider storleken på dess gränser.
- Ställ inte in ett tabbstopp på en rad, skrivskyddad textruta såvida inte användaren sannolikt behöver rulla eller kopiera texten.
Hantering av indataverifiering och fel
Eftersom textrutor vanligtvis inte är begränsade till att endast acceptera giltiga indata kan du behöva verifiera indata och hantera eventuella problem. Verifiera de olika typerna av indataproblem på följande sätt:
Om användaren anger ett tecken som inte är giltigt ignorerar du tecknet och visar en indataproblemballong som förklarar de giltiga tecknen.
I det här exemplet rapporterar en pratbubblan ett felaktigt indatatecken.
Om indata har ett värde eller format som inte är giltigt visar du en indataproblemballong när textrutan förlorar indatafokus.
Om indata är inkonsekventa med andra kontroller i fönstret ger du ett felmeddelande när hela indata har slutförts, till exempel när användare klickar på OK för en modal dialogruta.
Rensa inte ogiltiga indata såvida inte användarna inte enkelt kan korrigera fel. På så sätt kan användarna korrigera misstag utan att börja om. Du bör till exempel rensa felaktiga lösenord och PIN-koder eftersom användarna inte kan korrigera dem på ett enkelt sätt.
Fler riktlinjer och exempel finns i Felmeddelanden och Balloons.
Uppmanas
En fråga är en etikett eller en kort instruktion som placeras i en textruta 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 textrutan 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 textrutan på ett kompakt sätt. Det får inte vara viktig information som användaren behöver se när du använder textrutan.
Använd inte uppmaningar bara för att uppmana användarna att skriva något eller klicka på knappar. Skriv till exempel inte prompttext med texten Ange ett filnamn och klicka sedan på Skicka.
När du använder prompter:
- Rita prompttexten i kursiv grå och den faktiska indatatexten 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: Om textrutan har standardinmatningsfokus visas uppmaningen och försvinner när användaren börjar skriva.
- Prompttexten återställs om textrutan fortfarande är tom när den förlorar indatafokus.
Rekommenderad storlek och avstånd
Rekommenderad storlek och avstånd för textrutor.
Bredden på en textruta är en visuell ledtråd till den förväntade indatastorleken. Vid storleksändring av textrutor:
- Välj en bredd som är lämplig för de längsta giltiga data. I de flesta fall bör användarna inte behöva rulla den längsta sannolika strängen som de kommer att ange eller visa.
- Inkludera ytterligare 30 procent (upp till 200 procent för kortare text) för all text (men inte siffror) som ska lokaliseras.
- Om den förväntade indatan inte har någon särskild storlek väljer du en bredd som överensstämmer med de andra textrutorna eller kontrollerna i fönstret.
- Storlek på flerradstextrutor för att visa ett helt antal textrader.
Etiketter
Textruteetiketter
Alla textrutor behöver etiketter. Skriv etiketten som ett ord eller en fras, inte som en mening, sluta med ett kolon och använd statisk text.
undantag:
Textrutor med prompter som finns där utrymmet är premium.
För etikettering ska en grupp med textrutor som används för formaterad datainmatning behandlas som en enda textruta.
Om en textruta är underordnad en alternativknapp eller kryssruta och introduceras av dess etikett som slutar med ett kolon ska du inte placera någon ytterligare etikett i textrutan.
Utelämna kontrolletiketter som återställer huvudinstruktionen. I det här fallet tar huvudinstruktionen kolonet (om det inte är en fråga) och åtkomstnyckeln.
acceptabelt:
I det här exemplet är textruteetiketten bara en omskrivning av huvudinstruktionen.
Bättre:
I det här exemplet tas den redundanta etiketten bort, så huvudinstruktionen tar kolon- och åtkomstnyckeln.
Tilldela en unik åtkomstnyckel. Riktlinjer för åtkomstnyckeltilldelning finns i Tangentbord.
Använd versalisering i meningsformat.
Placera etiketten till vänster om eller ovanför textrutan och justera etiketten mot textrutans vänstra kant. Om etiketten finns till vänster justerar du etiketttexten lodrätt med textrutans text.
rätt:
I de här exemplen justeras etiketten överst med textrutans vänstra kant och etiketten till vänster justeras med texten i textrutan.
felaktig:
I dessa felaktiga exempel justeras etiketten överst med texten i textrutan och etiketten till vänster justeras mot textrutans överkant.
Du kan ange enheter (till exempel sekunder eller anslutningar) inom parenteser efter etiketten.
Om en textruta accepterar ett godtyckligt litet maximalt antal tecken kan du ange maximalt antal indata i etiketten. Textrutans bredd bör också föreslå den maximala storleken.
I det här exemplet ger etiketten det maximala antalet tecken.
Gör inte innehållet i textrutan (eller dess enhetsetikett) till en del av en mening, eftersom detta inte kan lokaliseras.
Om textrutan kan användas för att ange flera objekt gör du det tydligt hur objekten i etiketten ska separeras.
I det här exemplet anges objektavgränsaren i etiketten.
Riktlinjer för att ange nödvändiga indata finns i Obligatoriska indata i dialogrutor.
Instruktionsetiketter
Om du behöver lägga till instruktionstext om en textruta 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 textrutan.
I det här exemplet placeras ytterligare information under textrutan.
Promptetiketter
- 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.
- Om uppmaningen uppmanar användarna att ange information som ska hanteras av en knapp bredvid textrutan, placerar du bara knappen bredvid textrutan. Använd inte uppmaningen för att uppmana användarna att klicka på knappen (skriv till exempel inte fråga text som säger, Dra en fil och klicka sedan på Skicka).
Dokumentation
När du refererar till textrutor:
Använd typ för att referera till användarinteraktioner som kräver att du skriver eller klistrar in. Använd annars ange om användarna kan placera information i textrutan på annat sätt, till exempel genom att välja värdet från en lista eller använda knappen Bläddra.
Använd select för att referera till en post i en skrivskyddad textruta.
Använd den exakta etiketttexten, inklusive dess versaler, och inkludera ordrutan. Ta inte med understrecket eller kolonet för åtkomstnyckeln. Referera inte till en textruta som en textruta eller ett fält.
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: Skriv in lösenordet i rutan Lösenord och klicka sedan på OK.
Om textrutan kräver ett visst format dokumenterar du endast det mest använda godkända formatet. Låt användarna identifiera andra format på egen hand. Du vill vara flexibel med dataformat, men det bör inte resultera i komplex dokumentation.
rätt:
Ange delens serienummer med formatet 1234-56-7890.
felaktig:
Ange delens serienummer med något av följande format:
1234567890
1234-56-7890
1234 56 7890