Tekstvakken

Met een tekstvak kunnen gebruikers een tekst of numerieke waarde weergeven, invoeren of bewerken.

Een typisch tekstvak.

Is dit de juiste controle?

Houd rekening met deze vragen om te bepalen:

• Is het praktisch om alle geldige waarden efficiënt op te sommen? Zo ja, kunt u een lijst met één selectie, lijstweergave, vervolgkeuzelijst, bewerkbare vervolgkeuzelijst of schuifregelaar in plaats daarvan.
• Zijn de geldige gegevens volledig onconstraind? Of zijn de geldige gegevens alleen beperkt door opmaak (beperkte lengte of tekentypen)? Zo ja, gebruik dan een tekstvak.
• Vertegenwoordigt de waarde een gegevenstype met een gespecialiseerd gemeenschappelijk besturingselement? Voorbeelden hiervan zijn datum, tijd of IPv4- of IPv6-adres. Als dat het geval is, gebruikt u het juiste besturingselement, zoals een datum besturingselement in plaats van een tekstvak.
• Als de gegevens numeriek zijn:
  • Ervaren gebruikers de instelling als een relatieve hoeveelheid? Zo ja, gebruik dan een schuifregelaar.
  • Profiteert de gebruiker van directe feedback over het effect van het instellen van wijzigingen? Zo ja, gebruik dan een schuifregelaar, mogelijk samen met een tekstvak. Gebruikers kunnen bijvoorbeeld eenvoudig een kleur kiezen met behulp van een schuifregelaar, omdat ze direct het effect van wijzigingen in tinten, verzadiging of helderheidswaarden kunnen zien.

Ontwerpconcepten

Hoewel tekstvakken het voordeel hebben dat ze zeer flexibel zijn, hebben ze het nadeel dat ze minimale beperkingen hebben. De enige beperkingen voor een bewerkbaar tekstvak zijn:

• U kunt desgewenst het maximum aantal tekens instellen.
• U kunt desgewenst invoer beperken tot alleen numerieke tekens (0 9).
• Als u een kringveldgebruikt, kunt u opties voor kringveldbesturingselementen beperken tot geldige waarden.

Afgezien van hun lengte en de optionele aanwezigheid van een kringveld, hebben tekstvakken geen visuele aanwijzingen die de geldige waarden of de opmaak voorstellen. Dit betekent dat u vertrouwt op labels om deze informatie over te brengen aan gebruikers. Als gebruikers tekst invoeren die ongeldig is, moet u de fout afhandelen met een foutbericht.

Als algemene regel moet u het meest beperkte besturingselement gebruiken dat u kunt. Gebruik niet-gekoppelde besturingselementen, zoals tekstvakken, als laatste redmiddel. Dat gezegd hebbende, houd bij het overwegen van beperkingen rekening met de behoeften van globale gebruikers. Een besturingselement dat is beperkt tot postcodes in de Verenigde Staten, wordt bijvoorbeeld niet geglobaliseerd, maar een niet-gebonden tekstvak dat een willekeurige postcode-indeling accepteert.

Gebruikspatronen

Een tekstvak is een flexibel besturingselement met verschillende mogelijke toepassingen.

Etiket	Waarde
gegevensinvoer Een niet-gekoppeld tekstvak met één regel dat wordt gebruikt om korte tekenreeksen in te voeren of te bewerken.	Een niet-gekoppeld tekstvak met één regel.
opgemaakte gegevensinvoer Een set korte, vaste tekstvakken met één regel die wordt gebruikt om gegevens met een specifieke indeling in te voeren.	Een tekstvak dat wordt gebruikt voor opgemaakte gegevensinvoer. Opmerking: De functie automatisch afsluiten de invoerfocus van het ene tekstvak naar het volgende verplaatst. Een nadeel van deze benadering is dat de gegevens niet als één eenheid kunnen worden gekopieerd of geplakt.
ondersteunde gegevensinvoer Een niet-gekoppeld tekstvak met één regel dat wordt gebruikt om tekenreeksen in te voeren of te bewerken, gecombineerd met een opdrachtknop waarmee gebruikers geldige waarden kunnen selecteren.	In dit voorbeeld helpt de opdracht Bladeren gebruikers geldige waarden te selecteren.
tekstinvoer Een niet-gekoppeld tekstvak met meerdere regels dat wordt gebruikt om lange tekenreeksen in te voeren of te bewerken.	Een niet-gekoppeld tekstvak met meerdere regels.
numerieke invoer Een tekstvak met één regel, alleen numeriek, dat wordt gebruikt om getallen in te voeren of te bewerken, met een optioneel kringveld om invoer op basis van een muis mogelijk te maken.	Een tekstvak dat wordt gebruikt voor numerieke invoer. De combinatie van een tekstvak en het bijbehorende kringveld wordt een kringveldgenoemd.
invoer van wachtwoord en pincode Een niet-gekoppeld tekstvak met één regel dat wordt gebruikt om wachtwoorden en pincodes veilig in te voeren.	Een tekstvak dat wordt gebruikt om wachtwoorden in te voeren.
gegevensuitvoer Een tekstvak met één regel, alleen-lezen, altijd weergegeven zonder rand, dat wordt gebruikt om korte tekenreeksen weer te geven.	In tegenstelling tot statische tekst kunnen gegevens die worden weergegeven met behulp van een tekstvak worden geschoven (handig als de gegevens breder zijn dan het besturingselement), geselecteerd en gekopieerd. Een tekstvak met één regel, alleen-lezen dat wordt gebruikt om gegevens weer te geven.
tekstuitvoer Een tekstvak met meerdere regels, alleen-lezen dat wordt gebruikt om lange tekenreeksen weer te geven.	Een alleen-lezen tekstvak dat wordt gebruikt om gegevens weer te geven.

Richtsnoeren

Algemeen

• Bij het uitschakelen van een tekstvak schakelt u ook de bijbehorende labels, instructielabels, besturingselementen voor draaien en opdrachtknoppen uit.

• Automatisch aanvullen gebruiken om gebruikers te helpen bij het invoeren van gegevens die waarschijnlijk herhaaldelijk worden gebruikt. Voorbeelden hiervan zijn gebruikersnamen, adressen en bestandsnamen. Gebruik echter niet automatisch aanvullen voor tekstvakken die gevoelige informatie kunnen bevatten, zoals wachtwoorden, pincodes, creditcardnummers of medische gegevens.

• Zorg ervoor dat gebruikers niet onnodig schuiven. Als u verwacht dat gegevens groter zijn dan het tekstvak en u het tekstvak direct groter kunt maken zonder de indeling te schaden, kunt u het vak zo aanpassen dat u niet meer hoeft te schuiven.

  Onjuist:

  

  In dit voorbeeld moet het tekstvak veel langer worden gemaakt om de gegevens te verwerken.

• Schuifbalken:

  • Plaats geen horizontale schuifbalken op tekstvakken met meerdere regels. Gebruik in plaats daarvan verticale schuif- en lijnterugloop.
  • Plaats geen schuifbalken op tekstvakken met één regel.

• Voor numerieke invoer kunt u een kringveld gebruiken. Voor tekstinvoer gebruikt u in plaats daarvan een vervolgkeuzelijst of bewerkbare vervolgkeuzelijst.

• Gebruik de functie voor automatisch afsluiten niet, met uitzondering van opgemaakte gegevensinvoer. De automatische verschuiving van focus kan gebruikers verrassen.

Bewerkbare tekstvakken

• Beperk de lengte van de invoertekst wanneer u dat kunt. Als de geldige invoer bijvoorbeeld een getal tussen 0 en 999 is, gebruikt u een numeriek tekstvak dat is beperkt tot drie tekens. Alle delen van tekstvakken die gebruikmaken van opgemaakte gegevensinvoer, moeten een korte, vaste lengte hebben.

• Wees flexibel met gegevensindelingen. Als gebruikers waarschijnlijk tekst invoeren met een groot aantal verschillende indelingen, probeert u alle meest voorkomende indelingen te verwerken. Veel namen, getallen en id's kunnen bijvoorbeeld worden ingevoerd met optionele spaties en interpunctie, en het hoofdlettergebruik maakt vaak niet uit.

• Als u de waarschijnlijke indelingen niet kunt verwerken, moet u een specifieke indeling vereisen met behulp van opgemaakte gegevensinvoer of de geldige notaties in het label aangeven.

  aanvaardbaar:

  

  In dit voorbeeld vereist een tekstvak invoer in een specifieke indeling.

  Beter:

  

  In dit voorbeeld wordt het opgemaakte gegevensinvoerpatroon gebruikt om een specifieke indeling te vereisen.

  Beste:

  

  In dit voorbeeld verwerkt een tekstvak alle waarschijnlijke indelingen.

• Overweeg flexibiliteit bij het opmaken van de maximale invoerlengte. Een geldig creditcardnummer kan bijvoorbeeld maximaal 19 tekens bevatten, zodat het lastig is om getallen in te voeren met de langere notaties.

• Gebruik het opgemaakte gegevensinvoerpatroon niet als gebruikers waarschijnlijk lange, complexe gegevens zullen plakken. Reserveer in plaats daarvan het opgemaakte gegevensinvoerpatroon voor situaties waarin gebruikers de gegevens waarschijnlijker zullen typen.

  

  In dit voorbeeld wordt het opgemaakte gegevensinvoerpatroon niet gebruikt, zodat gebruikers IPv6-adressen kunnen plakken.

• Als gebruikers de volledige waarde waarschijnlijk opnieuw gaan invoeren, selecteert u alle tekst op invoerfocus. Als gebruikers de kans hebben om te bewerken, plaatst u de caret aan het einde van de tekst.

  

  In dit voorbeeld is de kans groter dat gebruikers deze vervangen dan bewerken, zodat de volledige waarde is geselecteerd voor de invoerfocus.

  

  In dit voorbeeld is het waarschijnlijker dat gebruikers trefwoorden toevoegen dan de tekst vervangen, zodat de caret aan het einde van de tekst wordt geplaatst.

• Gebruik altijd een tekstvak met meerdere regels als nieuwe regeltekens geldige invoer zijn.

• Wanneer het tekstvak voor een bestand of pad is, geeft u altijd een knop Bladeren op.

Numerieke tekstvakken

• Kies de handigste eenheid en label de eenheden. U kunt bijvoorbeeld milliliters gebruiken in plaats van liter (of omgekeerd), percentages in plaats van directe waarden (of omgekeerd), enzovoort.

  juist:

  

  In dit voorbeeld wordt de eenheid gelabeld, maar moeten gebruikers decimale getallen invoeren.

  Beter:

  

  In dit voorbeeld maakt het tekstvak gebruik van een handiger eenheid.

• Gebruik een spin-besturingselement wanneer het nuttig is. Soms zijn spin-besturingselementen echter niet praktisch, bijvoorbeeld wanneer gebruikers veel grote getallen moeten invoeren. Besturingselementen voor draaien gebruiken wanneer:

  • De invoer is waarschijnlijk een klein getal, meestal minder dan 100.
  • Gebruikers zullen waarschijnlijk een kleine wijziging aanbrengen in een bestaand getal.
  • Gebruikers gebruiken de muis waarschijnlijker dan het toetsenbord.

• numerieke tekst rechts uitlijnen wanneer:

  • Er is meer dan één numeriek tekstvak.
  • De tekstvakken worden verticaal uitgelijnd.
  • Gebruikers zullen waarschijnlijk de waarden toevoegen of vergelijken.

  juist:

  

  In dit voorbeeld is de numerieke tekst rechts uitgelijnd, zodat u eenvoudig waarden kunt vergelijken.

  Onjuist:

  

  In dit voorbeeld is de numerieke tekst onjuist links uitgelijnd.

• Altijd geldwaarden rechts uitlijnen.

• Wijs geen speciale betekenissen toe aan specifieke numerieke waarden, zelfs als deze speciale betekenissen intern door uw toepassing worden gebruikt. Gebruik in plaats daarvan selectievakjes of keuzerondjes voor een expliciete gebruikersselectie.

  Onjuist:

  

  In dit voorbeeld heeft de waarde -1 een speciale betekenis.

  juist:

  opslaan in cache

  In dit voorbeeld maakt een selectievakje de optie expliciet.

Invoer voor wachtwoord en pincode

• Gebruik altijd het algemene besturingselement voor wachtwoorden in plaats van uw eigen beheer te maken. Voor wachtwoorden en pincodes moet een speciale behandeling veilig worden afgehandeld.

Zie Ballonnenvoor meer richtlijnen en voorbeelden.

Tekstuele uitvoer

• Overweeg om de witte achtergrondsysteemkleur te gebruiken voor grote, alleen-lezen tekst met meerdere regels. Een witte achtergrond maakt de tekst gemakkelijker te lezen. Veel tekst op een grijze achtergrond ontmoedigt het lezen.

Zie Lettertypenvoor meer informatie over achtergrondkleuren.

Gegevensuitvoer

• Gebruik geen rand voor tekstvakken met één regel en alleen-lezen. De rand is een visuele aanwijzing dat de tekst kan worden bewerkt.
• Schakel geen tekstvakken met één regel en alleen-lezen uit. Hierdoor kunnen gebruikers de tekst niet selecteren en kopiëren naar het klembord. Het voorkomt ook dat gebruikers door de gegevens schuiven als deze de grootte van de gegevens overschrijdt.
• Stel geen tabstop in op een tekstvak met één regel, alleen-lezen, tenzij de gebruiker waarschijnlijk moet schuiven of de tekst moet kopiëren.

Invoervalidatie en foutafhandeling

Omdat tekstvakken meestal niet beperkt zijn om alleen geldige invoer te accepteren, moet u mogelijk de invoer valideren en eventuele problemen afhandelen. Valideer de verschillende typen invoerproblemen als volgt:

• Als de gebruiker een ongeldig teken invoert, negeert u het teken en geeft u een invoerprobleemballon weer met de geldige tekens.

  

  In dit voorbeeld rapporteert een ballon een onjuist invoerteken.

• Als de invoergegevens een waarde of indeling hebben die niet geldig is, geeft u een invoerprobleemballon weer wanneer het tekstvak de invoerfocus verliest.

• Als de invoergegevens inconsistent zijn met andere besturingselementen in het venster, geeft u een foutbericht wanneer de volledige invoer is voltooid, bijvoorbeeld wanneer gebruikers op OK klikken voor een modaal dialoogvenster.

Wis ongeldige invoergegevens alleen als gebruikers fouten niet eenvoudig kunnen corrigeren. Hierdoor kunnen gebruikers fouten corrigeren zonder opnieuw te beginnen. U moet bijvoorbeeld onjuiste wachtwoorden en pincodes wissen omdat gebruikers ze niet eenvoudig kunnen corrigeren.

Zie Foutberichten en Ballonnenvoor meer richtlijnen en voorbeelden.

Gevraagd

Een prompt is een label of korte instructie die in een tekstvak wordt geplaatst als standaardwaarde. In tegenstelling tot statische tekst verdwijnen prompts van het scherm zodra gebruikers iets in het tekstvak typen of de invoerfocus krijgt.

Een typische prompt.

Gebruik een prompt wanneer:

• Schermruimte is zo premium dat het gebruik van een label of instructie ongewenst is, zoals op een werkbalk.
• De prompt is voornamelijk bedoeld om het doel van het tekstvak op een compacte manier te identificeren. Het mag geen cruciale informatie zijn die de gebruiker moet zien tijdens het gebruik van het tekstvak.

Gebruik geen prompts om gebruikers om te leiden om iets te typen of om op knoppen te klikken. Schrijf bijvoorbeeld geen prompttekst met de tekst Typ een bestandsnaam en klik vervolgens op Verzenden.

Wanneer u prompts gebruikt:

• Teken de prompttekst cursief grijs en de werkelijke invoertekst in normaal zwart. De prompttekst mag niet worden verward met echte tekst.
• Houd de prompttekst beknopt. U kunt fragmenten gebruiken in plaats van volledige zinnen.
• Gebruik hoofdlettergebruik in zinsstijl.
• Gebruik geen eindetekens of beletseltekens.
• De prompttekst mag niet bewerkbaar zijn en moet verdwijnen zodra gebruikers in het tekstvak klikken of taben.
  • Uitzondering: Als het tekstvak de standaardinvoerfocus heeft, wordt de prompt weergegeven en verdwijnt deze zodra de gebruiker begint te typen.
• De prompttekst wordt hersteld als het tekstvak nog steeds leeg is wanneer de invoerfocus verloren gaat.

Aanbevolen grootte en afstand

Aanbevolen grootte en afstand voor tekstvakken.

De breedte van een tekstvak is een visuele aanwijzing van de verwachte invoergrootte. Bij het wijzigen van de grootte van tekstvakken:

• Kies een breedte die geschikt is voor de langste geldige gegevens. In de meeste gevallen hoeven gebruikers niet te schuiven naar de langste tekenreeks die ze invoeren of weergeven.
• Neem nog eens 30 procent (tot 200 procent voor kortere tekst) op voor tekst (maar geen getallen) die worden gelokaliseerd.
• Als de verwachte invoer geen bepaalde grootte heeft, kiest u een breedte die consistent is met de andere tekstvakken of besturingselementen in het venster.
• De grootte van tekstvakken met meerdere regels aanpassen om een integraal aantal regels tekst weer te geven.

Labels

Tekstvaklabels

• Alle tekstvakken hebben labels nodig. Schrijf het label als een woord of woordgroep, niet als een zin, eindigend met een dubbele punt en gebruik statische tekst.

  Uitzonderingen:

  • Tekstvakken met aanwijzingen die zich bevinden waar de ruimte zich in een Premium bevindt.

  • Voor het labelen moet een groep tekstvakken die worden gebruikt voor opgemaakte gegevensinvoer als één tekstvak worden behandeld.

  • Als een tekstvak ondergeschikt is aan een keuzerondje of selectievakje en wordt geïntroduceerd door het label dat eindigt op een dubbele punt, plaatst u geen extra label in het tekstvak.

  • Laat besturingslabels weg die de hoofdinstructie aanpassen. In dit geval neemt de hoofdinstructie de dubbele punt (tenzij het een vraag is) en de toegangssleutel.

    aanvaardbaar:

    

    In dit voorbeeld is het tekstvaklabel slechts een aanpassing van de hoofdinstructie.

    Beter:

    

    In dit voorbeeld wordt het redundante label verwijderd, dus de hoofdinstructie neemt de dubbele punt en toegangssleutel.

• Wijs een unieke toegangssleutel toe. Zie Toetsenbordvoor richtlijnen voor toewijzing van toegangssleutels.

• Gebruik hoofdlettergebruik in zinsstijl.

• Plaats het label links van of boven het tekstvak en lijn het label uit met de linkerrand van het tekstvak. Als het label zich links bevindt, lijnt u de labeltekst verticaal uit met de tekstvaktekst.

  juist:

  

  

  In deze voorbeelden wordt het label bovenaan uitgelijnd met de linkerrand van het tekstvak en wordt het label aan de linkerkant uitgelijnd met de tekst in het tekstvak.

  Onjuist:

  

  

  In deze onjuiste voorbeelden wordt het label bovenaan uitgelijnd met de tekst in het tekstvak en wordt het label aan de linkerkant uitgelijnd met de bovenkant van het tekstvak.

• U kunt eenheden (bijvoorbeeld seconden of verbindingen) tussen haakjes na het label opgeven.

• Als een tekstvak een willekeurig klein maximum aantal tekens accepteert, kunt u de maximale invoer in het label aangeven. De breedte van het tekstvak moet ook de maximale grootte voorstellen.

  

  In dit voorbeeld geeft het label het maximum aantal tekens.

• Maak de inhoud van het tekstvak (of het bijbehorende eenhedenlabel) deel van een zin niet, omdat dit niet kan worden gelokaliseerd.

• Als het tekstvak kan worden gebruikt om verschillende items in te voeren, maakt u duidelijk hoe u de items in het label scheidt.

  

  In dit voorbeeld wordt het itemscheidingsteken weergegeven in het label.

• Zie Vereiste invoer in dialoogvenstersvoor richtlijnen voor het aangeven van vereiste invoer.

Instructielabels

• Als u instructietekst over een tekstvak wilt toevoegen, voegt u deze toe boven het label. Gebruik volledige zinnen met eindepunctie.

• Gebruik hoofdlettergebruik in zinsstijl.

• Aanvullende informatie die nuttig, maar niet nodig is, moet kort worden gehouden. Plaats deze informatie tussen haakjes tussen het label en de dubbele punt, of zonder haakjes onder het tekstvak.

  

  In dit voorbeeld wordt onder het tekstvak aanvullende informatie geplaatst.

Promptlabels

• Houd de prompttekst beknopt. U kunt fragmenten gebruiken in plaats van volledige zinnen.
• Gebruik hoofdlettergebruik in zinsstijl.
• Gebruik geen eindetekens of beletseltekens.
• Als gebruikers worden gevraagd om informatie in te voeren waarop een knop naast het tekstvak wordt gereageerd, plaatst u de knop naast het tekstvak. Gebruik de prompt niet om gebruikers om te leiden om op de knop te klikken (schrijf bijvoorbeeld geen prompttekst met de tekst Slepen van een bestand en klik vervolgens op Verzenden).

Documentatie

Wanneer u naar tekstvakken verwijst:

• Gebruik het type om te verwijzen naar gebruikersinteracties waarvoor typen of plakken is vereist; gebruik anders Enter als gebruikers informatie in het tekstvak kunnen plaatsen met andere middelen, zoals het selecteren van de waarde in een lijst of met de knop Bladeren.

• Selecteer deze optie om te verwijzen naar een item in een tekstvak met het kenmerk Alleen-lezen.

• Gebruik de exacte labeltekst, inclusief hoofdlettergebruik, en neem het woordvak op. Neem het onderstrepingsteken of dubbele punt van de toegangssleutel niet op. Verwijs niet naar een tekstvak als een tekstvak of een veld.

• Maak het label indien mogelijk op met vetgedrukte tekst. Anders plaatst u het label alleen tussen aanhalingstekens indien nodig om verwarring te voorkomen.

  Voorbeeld: Typ uw wachtwoord in het vak Wachtwoord en klik vervolgens op OK-.

• Als voor het tekstvak een specifieke indeling is vereist, documentt u alleen de meest gebruikte aanvaardbare indeling. Gebruikers zelf andere indelingen laten detecteren. U wilt flexibel zijn met gegevensindelingen, maar dit moet niet resulteren in complexe documentatie.

  juist:

  Voer het serienummer van het onderdeel in met de notatie 1234-56-7890.

  Onjuist:

  Voer het serienummer van het onderdeel in met een van de volgende notaties:

  1234567890

  1234-56-7890

  1234 56 7890