Aanraken

Alle Microsoft Windows-toepassingen moeten een geweldige touch-ervaring hebben. En het creëren van een dergelijke ervaring is gemakkelijker dan u denkt.

Aanraken verwijst naar het gebruik van een of meer vingers om invoer te bieden via een apparaatweergave en interactie met Windows en apps. Een app die is geoptimaliseerd voor aanraakbediening heeft een gebruikersinterface en interactiemodel dat is ontworpen voor de grotere, minder nauwkeurige contactgebieden van aanraking, de verschillende vormfactoren van aanraakapparaten en de vele houdingen en grips die gebruikers kunnen aannemen wanneer ze een aanraakapparaat gebruiken.

Elk invoerapparaat heeft zijn sterke punten. Het toetsenbord is het beste voor tekstinvoer en het geven van opdrachten met minimale handbewegingen. De muis is het beste voor efficiënt, nauwkeurig wijzen. Aanraken is het beste voor objectmanipulatie en het geven van eenvoudige opdrachten. Een pen is het beste voor vrije-vormexpressie, zoals met handschrift en tekening.

Windows 8.1 is geoptimaliseerd voor reactiesnelheid, nauwkeurigheid en gebruiksgemak met aanraking en biedt volledige ondersteuning voor traditionele invoermethoden (zoals muis, pen en toetsenbord). De snelheid, nauwkeurigheid en tactiele feedback die traditionele invoermodi bieden, zijn vertrouwd en aantrekkelijk voor veel gebruikers en mogelijk beter geschikt voor specifieke interactiescenario's.

U vindt richtlijnen met betrekking tot muis, pen en toegankelijkheid in afzonderlijke onderwerpen.

Wanneer u nadenkt over de interactie-ervaring voor uw app:

Stel niet dat als een gebruikersinterface goed werkt voor een muis, het ook goed werkt voor aanraking. Hoewel goede muisondersteuning een begin is, heeft een goede touch-ervaring een aantal extra vereisten.

Stel dat als een gebruikersinterface goed werkt voor een vinger, het ook goed werkt voor een pen. Door uw app aanraakbaar te maken, kunt u ook een goede penondersteuning bieden. Het belangrijkste verschil is dat vingers een bluntertip hebben, zodat ze grotere doelen nodig hebben.

Met aanraking kunt u objecten en gebruikersinterface rechtstreeks bewerken, wat zorgt voor een snellere, natuurlijkere en aantrekkelijke ervaring.

Een geweldige touch-ervaring bieden

U moet ervoor zorgen dat gebruikers kritieke en belangrijke taken efficiënt kunnen uitvoeren met behulp van aanraakinvoer. Specifieke app-functionaliteit, zoals tekst of pixelmanipulatie, is mogelijk niet geschikt voor aanraking en kan worden gereserveerd voor het meest geschikte invoerapparaat.

Als u niet veel ervaring hebt met het ontwikkelen van touch-apps, kunt u het beste leren door te doen. Download een computer met aanraakbediening, plaats de muis en het toetsenbord opzij en gebruik alleen uw vingers om met uw app te communiceren. Als u een tablet hebt, experimenteert u met het vasthouden op verschillende posities, zoals op uw schoot, vlak op een tafel of in uw armen terwijl u staat. Probeer het te gebruiken in staande en liggende afdrukstand.

Apps die het meest geschikt zijn voor aanraakbediening, zijn doorgaans:

• Natuurlijk en intuïtief. Interacties zijn ontworpen om te corresponderen met de interactie van gebruikers met objecten in de echte wereld.
• Minder opdringerig. Het gebruik van aanraking is stil en daardoor veel minder afleidend dan typen of klikken.
• Draagbaar. Aanraakapparaten zijn compacter omdat veel taken kunnen worden voltooid zonder een toetsenbord, muis, pen of touchpad. Ze zijn ook flexibeler omdat een werkoppervlak niet vereist is.
• Direct en aantrekkelijk. Met Touch voelt u alsof u objecten op het scherm rechtstreeks bewerkt.
• Minder nauwkeurig. Gebruikers kunnen objecten niet zo nauwkeurig richten met aanraking, vergeleken met een muis of pen.

Touch biedt een natuurlijke, echte gevoel om interactie te hebben. Directe manipulatie en animatie voltooien deze indruk door objecten een realistische, dynamische beweging en feedback te geven. Denk bijvoorbeeld aan een kaartspel. Het is niet alleen handig en gemakkelijk om kaarten met een vinger te slepen, de ervaring krijgt een aantrekkelijke praktijkgevoel wanneer u kunt tossen, glijden en de kaarten draaien net zoals u een fysiek dek zou doen. En wanneer u een kaart probeert te verplaatsen die niet kan worden verplaatst, is het een betere ervaring om de kaart weerstand te bieden, maar niet beweging te voorkomen, en zich terug te bewegen wanneer ze losgelaten worden, om duidelijk aan te geven dat de actie is herkend, maar niet kan worden uitgevoerd.

Gelukkig, als uw app al goed is ontworpen, is het eenvoudig om een geweldige touch-ervaring te bieden. Voor dit doel is een goed ontworpen programma:

• Zorgt ervoor dat de belangrijkste taken efficiënt kunnen worden uitgevoerd met behulp van een vinger (ten minste de taken waarvoor niet veel typen of gedetailleerde pixelbewerkingen nodig zijn).
• Maakt gebruik van grote besturingselementen voor aanraking. Algemene besturingselementen hebben een minimale grootte van 23x23 pixels (13x13 DLL's) en de meest gebruikte besturingselementen zijn ten minste 40x40 pixels (23x22 DLL's). Om niet-reagerend gedrag te voorkomen, moeten UI-elementen ten minste 5 pixels (3 DLL's) tussen de elementen hebben. Voor andere besturingselementen moet u ervoor zorgen dat ze ten minste een 23x23 pixel (13x13 DLU) klikdoel hebben, zelfs als hun statische uiterlijk veel kleiner is. Zie de standaardgrootte van besturingselementen.
• Ondersteunt muisinvoer. De interactieve besturingselementen hebben duidelijke, zichtbare betaalbaarheid. Objecten hebben standaardgedrag voor de standaard muisinteracties (één en dubbelklik met de rechtermuisknop, slepen en aanwijzen).
• Ondersteunt toetsenbordinvoer. De app biedt standaard sneltoetstoewijzingen, met name voor navigatie- en bewerkingsopdrachten die ook kunnen worden gegenereerd via aanraakbewegingen.
• Zorgt voor toegankelijkheid. Maakt gebruik van UI Automation of Microsoft Active Accessibility (MSAA) om programmatische toegang te bieden tot de gebruikersinterface voor ondersteunende technologieën. De app reageert op de juiste manier op afdrukstand, thema, landinstellingen en metrische gegevens van het systeem.
• Elimineert onnodige interacties. Gebruik de veiligste en veiligste standaardwaarden om verlies van gegevens of systeemtoegang te voorkomen. Als veiligheid en beveiliging geen factoren zijn, selecteert de app de meest waarschijnlijke of handige optie.
• Biedt aanraakequivalent voor aanwijzen. Vertrouw niet op aanwijzen als de enige manier om een actie uit te voeren.
• Zorgt ervoor dat bewegingen onmiddellijk van kracht worden. Houd contactpunten onder de vingers van de gebruiker soepel gedurende het gebaar, waardoor het effect van de beweging van de gebruiker rechtstreeks aan de beweging van de gebruiker wordt toegewezen.
• Gebruikt waar mogelijk standaardbewegingen. Aangepaste gebaren alleen voor interacties die uniek zijn voor uw app.
• Zorgt ervoor dat ongewenste of destructieve opdrachten kunnen worden omgekeerd of gecorrigeerd. Onbedoelde acties zijn waarschijnlijker bij het gebruik van aanraking.

Richtlijnen voor aanraakinvoer

Met aanraking kan uw Windows-app fysieke gebaren gebruiken om de directe manipulatie van UI-elementen te emuleren.

Houd rekening met deze aanbevolen procedures bij het ontwerpen van uw app met aanraakbediening:

Reactiesnelheid is essentieel voor het creëren van aanraakervaringen die direct en aantrekkelijk zijn. Als u zich direct wilt voelen, moeten bewegingen onmiddellijk van kracht worden en moeten de contactpunten van een object soepel onder de vingers van de gebruiker blijven tijdens het gebaar. Het effect van aanraakinvoer moet rechtstreeks worden toegewezen aan de beweging van de gebruiker, dus als de gebruiker bijvoorbeeld zijn vingers 90 graden draait, moet het object ook 90 graden draaien. Elke vertraging, hakkende reactie, verlies van contact of onnauwkeurige resultaten vernietigt de perceptie van directe manipulatie en ook van kwaliteit.

Consistentie is essentieel voor het creëren van aanraakervaringen die zich natuurlijk en intuïtief voelen. Zodra gebruikers een standaardbeweging hebben geleerd, verwachten ze dat beweging hetzelfde effect heeft voor alle apps. Om verwarring en frustratie te voorkomen, moet u nooit niet-standaardbetekeningen toewijzen aan standaardbewegingen. Gebruik in plaats daarvan aangepaste gebaren voor interacties die uniek zijn voor uw programma.

Hierna beschrijven we de windows-aanraaktaal, maar voordat we verdergaan, volgt een korte lijst met eenvoudige aanraakinvoertermen.

• beweging

  Een beweging is de fysieke handeling of beweging die wordt uitgevoerd op of door het invoerapparaat (vinger, vingers, pen/stylus, muis, enzovoort). Als u bijvoorbeeld een opdracht wilt starten, activeren of aanroepen, gebruikt u één vingertik voor een aanraak- of touchpad-apparaat (vergelijkbaar met een linkerklik met een muis, een tik met een pen of Enter op een toetsenbord).

• Manipulatie

  Een manipulatie is de onmiddellijke, realtime reactie of reactie van een object of gebruikersinterface op een gebaar. Als u bijvoorbeeld zowel de dia- als veegbewegingen gebruikt, wordt een element of gebruikersinterface meestal op een of andere manier verplaatst.

  Het uiteindelijke resultaat van een manipulatie, hoe het wordt gemanifesteerd door het object op het scherm en in de gebruikersinterface, is de interactie.

• Interactie

  Interacties zijn afhankelijk van hoe een manipulatie wordt geïnterpreteerd en de opdracht of actie die het gevolg is van de manipulatie. Objecten kunnen bijvoorbeeld worden verplaatst met zowel de dia als veegbewegingen, maar de resultaten verschillen, afhankelijk van of een drempelwaarde voor afstand wordt overschreden. Dia kan worden gebruikt om een object te slepen of een weergave te pannen terwijl swipe kan worden gebruikt om een item te selecteren of een app-balk weer te geven.

De windows-aanraaktaal

Windows biedt een beknopte set aanraakinteracties die in het hele systeem worden gebruikt. Door deze aanraaktaal consistent toe te passen, voelt uw app zich vertrouwd met wat gebruikers al weten. Dit verhoogt het vertrouwen van gebruikers door uw app gemakkelijker te leren en te gebruiken. Zie Gebaren, manipulaties en interacties voor meer informatie over de implementatie van aanraaktalen.

Houd vast om te leren

Met de beweging voor drukken en vasthouden worden gedetailleerde informatie of leervisuals (bijvoorbeeld een knopinfo of contextmenu) weergegeven zonder een actie of opdracht vast te leggen. Pannen is nog steeds mogelijk als er een schuifbeweging wordt gestart terwijl de visual wordt weergegeven.

Invoerstatus: een of twee vingers in contact met het scherm.

Beweging: Geen beweging.

Eindstatus: Laatste vinger eindigt het gebaar.

Effect: Meer informatie weergeven.

De drukbeweging en houd vast.

aanwijzen

Aanwijzen is een nuttige interactie omdat gebruikers hiermee aanvullende informatie kunnen krijgen via tips voordat ze een actie starten. Als u deze tips ziet, voelen gebruikers zich betrouwbaarder en vermindert u fouten.

De muisaanwijzer wordt helaas niet ondersteund door aanraaktechnologieën, zodat gebruikers niet kunnen bewegen wanneer ze een vinger gebruiken. De eenvoudige oplossing voor dit probleem is om optimaal te profiteren van de muisaanwijzer, maar alleen op manieren die niet nodig zijn om een actie uit te voeren. In de praktijk betekent dit meestal dat de actie ook kan worden uitgevoerd door te klikken, maar niet noodzakelijkerwijs op exact dezelfde manier.

In dit voorbeeld kunnen gebruikers de datum van vandaag zien door de muisaanwijzer of klik erop te houden.

Tikken voor primaire actie

Als u op een element tikt, wordt de primaire actie aangeroepen, bijvoorbeeld door een app te starten of een opdracht uit te voeren.

Invoerstatus: één vinger in contact met het scherm of touchpad en opgeheven voordat de tijdsdrempel voor een druk- en wachtinteractie plaatsvindt.

Beweging: Geen beweging.

Eindstatus: Vinger eindigt het gebaar.

Effect: Start een app of voer een opdracht uit.

De tikbeweging.

dia om te pannen

Dia wordt voornamelijk gebruikt voor panninginteracties, maar kan ook worden gebruikt voor het verplaatsen (waarbij pannen beperkt is tot één richting), tekenen of schrijven. Dia kan ook worden gebruikt om kleine, dicht verpakte elementen te bereiken door te scrubpen (schuif de vinger over gerelateerde objecten zoals keuzerondjes).

Invoerstatus: een of twee vingers in contact met het scherm.

Beweging: Sleep met eventuele extra vingers die op dezelfde positie ten opzichte van elkaar blijven.

Eindstatus: Laatste vinger eindigt het gebaar.

Effect: Verplaats het onderliggende object direct en onmiddellijk wanneer de vingers bewegen. Zorg ervoor dat u het contactpunt onder de vinger houdt tijdens het gebaar.

Het gebaar van de pan.

Swipe om te selecteren, te opdracht geven en te verplaatsen

Als u met de vinger een korte afstand schuift, loodrecht op de panningrichting (waarbij pannen beperkt is tot één richting), selecteert u objecten in een lijst of raster. Geef de app-balk weer met relevante opdrachten wanneer objecten zijn geselecteerd.

Invoerstatus: een of meer vingers raken het scherm aan.

Beweging: Sleep een korte afstand en lift voordat de afstandsdrempel voor een verplaatsingsinteractie plaatsvindt.

Eindstatus: Laatste vinger eindigt het gebaar.

Effect: Het onderliggende object is geselecteerd of verplaatst of de app-balk wordt weergegeven. Zorg ervoor dat u het contactpunt onder de vinger houdt tijdens het gebaar.

De veegbeweging.

Knijpen en uitrekken om te zoomen

De knijp- en stretchbewegingen worden gebruikt voor drie soorten interacties: optische zoom, formaat wijzigen en semantische zoom.

Met optische zoom wordt het vergrotingsniveau van het gehele inhoudsgebied aangepast om een gedetailleerdere weergave van de inhoud te krijgen. Het wijzigen van de grootte is daarentegen een techniek voor het aanpassen van de relatieve grootte van een of meer objecten in een inhoudsgebied zonder de weergave in het inhoudsgebied te wijzigen.

Semantische zoom is een techniek die is geoptimaliseerd voor aanraakbediening voor het presenteren en navigeren van gestructureerde gegevens of inhoud in één weergave (zoals de mapstructuur van een computer, een bibliotheek met documenten of een fotoalbum) zonder dat u hoeft te pannen, schuiven of structuurweergavebesturingselementen hoeft te gebruiken. Semantische zoom biedt twee verschillende weergaven van dezelfde inhoud door u meer details te laten zien terwijl u inzoomt en minder details terwijl u uitzoomt.

Invoerstatus: twee vingers in contact met het scherm tegelijk.

Beweging: Vingers bewegen zich uit elkaar (uitrekken) of samen (knijpen) langs een as.

Eindstatus: Elke vinger eindigt op het gebaar.

Effect: Zoom het onderliggende object rechtstreeks in of uit als de vingers zich scheiden of naderen op de as. Zorg ervoor dat u de contactpunten onder de vinger houdt tijdens het gebaar.

De zoombeweging.

Draai om te draaien

Als u met twee of meer vingers draait, wordt een object gedraaid. Draai het apparaat zelf om het hele scherm te draaien.

Invoerstatus: twee vingers in contact met het scherm tegelijk.

Beweging: Een of beide vingers draaien rond de andere, loodrecht bewegen naar de lijn ertussen.

Eindstatus: Elke vinger eindigt op het gebaar.

Effect: Draai het onderliggende object dezelfde hoeveelheid als de vingers hebben gedraaid. Zorg ervoor dat u de contactpunten onder de vinger houdt tijdens het gebaar.

Het draaibeweging.

Rotatie is alleen zinvol voor bepaalde typen objecten, dus deze is niet toegewezen aan een systeeminteractie van Windows.

Rotatie wordt vaak anders uitgevoerd door verschillende personen. Sommige mensen geven er de voorkeur aan om één vinger rond een draaivinger te draaien, terwijl anderen liever beide vingers in een cirkelvormige beweging draaien. De meeste mensen gebruiken een combinatie van de twee, waarbij één vinger meer beweegt dan de andere. Hoewel vloeiende draaiing naar elke hoek de beste interactie is, is het in veel contexten, zoals het weergeven van foto's, het beste om de dichtstbijzijnde draaiing van 90 graden te bepalen zodra de gebruiker kan gaan. Bij het bewerken van foto's kunt u een kleine draaiing gebruiken om de foto recht te maken.

veeg vanaf de rand voor app-opdrachten

Als u de vinger een korte afstand van de onder- of bovenrand van het scherm veegt, worden app-opdrachten in een app-balk weergegeven.

Invoerstatus: Een of meer vingers raken de omlijsting aan.

Beweging: Sleep een korte afstand naar het scherm en til deze op.

Eindstatus: Laatste vinger eindigt het gebaar.

Effect: De app-balk wordt weergegeven.

De veegbeweging vanaf de rand.

Ontwikkelaars: Zie DIRECTMANIPULATION_CONFIGURATION opsomming voor meer informatie.

Gebruik beheren

Hier geven we enkele richtlijnen voor het optimaliseren van besturingselementen voor aanraakgebruik.

• Algemene besturingselementen gebruiken. De meest voorkomende besturingselementen zijn ontworpen ter ondersteuning van een goede touch-ervaring.
• Kies aangepaste besturingselementen die zijn ontworpen om aanraakbediening te ondersteunen. Mogelijk hebt u aangepaste besturingselementen nodig om de speciale ervaringen van uw programma te ondersteunen. Kies aangepaste besturingselementen die:
  • Kan groot genoeg zijn om gemakkelijk te richten en te manipuleren.
  • Verplaats en reageer bij manipulatie op de manier waarop echte objecten bewegen en reageren, zoals door momentum en wrijving.
  • Zijn vergevend door gebruikers in staat te stellen om fouten eenvoudig te corrigeren.
  • Zijn vergevend van onnauwkeurigheid met klikken en slepen. Objecten die in de buurt van hun bestemming zijn geplaatst, moeten op de juiste plaats vallen.
  • Zorg voor duidelijke visuele feedback wanneer de vinger over het besturingselement loopt.
• Gebruik beperkte besturingselementen. Beperkte besturingselementen, zoals lijsten en schuifregelaars, kunnen beter zijn dan niet-beperkte besturingselementen, zoals tekstvakken, omdat ze de behoefte aan tekstinvoer verminderen.
• Geef de juiste standaardwaarden op. Selecteer de veiligste optie (om verlies van gegevens of systeemtoegang te voorkomen) en de veiligste optie standaard. Als veiligheid en beveiliging geen factoren zijn, selecteert u de meest waarschijnlijke of handige optie, waardoor onnodige interactie wordt voorkomen.
• Automatisch aanvullen van tekst opgeven. Biedt een lijst met meest waarschijnlijke waarden, of meest recent invoerwaarden, om tekstinvoer veel eenvoudiger te maken.
• Voor belangrijke taken die meerdere selectie-gebruiken, kunt u in plaats daarvan een keuzelijst met meerdere keuzemogelijkheden opgeven als een standaardlijst met meerdere keuzemogelijkheden wordt gebruikt.

Besturingselementgrootten en aanraakdoel

Vanwege het grote oppervlak van de vingertoppen kunnen kleine besturingselementen die te dicht bij elkaar liggen moeilijk te richten zijn.

In de regel is een besturingsgrootte van 23x23 pixels (13x13 DLL's) een goede minimale interactieve besturingsgrootte voor elk invoerapparaat. De draaiknoppen op 15x11 pixels zijn daarentegen veel te klein om effectief met aanraking te worden gebruikt.

Houd er rekening mee dat de minimale grootte echt is gebaseerd op fysiek gebied, niet metrische indelingsgegevens zoals pixels of DLL's. Onderzoek geeft aan dat het minimale doelgebied voor efficiënte, nauwkeurige interactie met behulp van een vinger 6x6 millimeter (mm) is. In dit gebied worden metrische indelingsgegevens als volgt omgezet:

Lettertype	Millimeters	Relatieve pixels	DLL's
9 punt Segoe UI	6x6	23x23	13x13
8 punt Tahoma	6x6	23x23	15x14

Bovendien blijkt uit onderzoek dat een minimumgrootte van 10x10 mm (ongeveer 40x40 pixels) een betere snelheid en nauwkeurigheid mogelijk maakt en ook comfortabeler voelt voor gebruikers. Als u dit praktisch doet, gebruikt u deze grotere grootte voor opdrachtknoppen die worden gebruikt voor de belangrijkste of veelgebruikte opdrachten.

Het doel is niet om gigantische besturingselementen te hebben, alleen degenen die gemakkelijk met aanraking worden gebruikt.

In dit voorbeeld gebruikt Microsoft Word knoppen die groter zijn dan 10x10 mm voor de belangrijkste opdrachten.

Deze versie van Calculator gebruikt knoppen die groter zijn dan 10x10 mm voor de meest gebruikte opdrachten.

Er is geen perfecte grootte voor aanraakdoelen. Verschillende grootten werken voor verschillende situaties. Acties met ernstige gevolgen (zoals verwijderen en sluiten) of veelgebruikte acties moeten grote aanraakdoelen gebruiken. Zelden gebruikte acties met kleine gevolgen kunnen kleine doelen gebruiken.

richtlijnen voor doelgrootte voor aangepaste besturingselementen

Richtlijn voor grootte	Beschrijving
	7x7 mm: Aanbevolen minimumgrootte 7x7 mm is een goede minimumgrootte als het aanraken van het verkeerde doel kan worden gecorrigeerd in een of twee gebaren of binnen vijf seconden. Opvulling tussen doelen is net zo belangrijk als de doelgrootte.
	Wanneer nauwkeurigheid van belang is Sluiten, verwijderen en andere acties met ernstige gevolgen kunnen zich niet per ongeluk tikken veroorloven. Gebruik doelen van 9x9 mm als het aanraken van het verkeerde doel meer dan twee gebaren, vijf seconden of een belangrijke contextwijziging vereist om te corrigeren.
	Wanneer het niet past Als u merkt dat u dingen passend vindt, kunt u 5x5 mm doelen gebruiken zolang het aanraken van het verkeerde doel met één gebaar kan worden gecorrigeerd. Het gebruik van 2 mm opvulling tussen doelen is in dit geval uiterst belangrijk.

richtlijnen voor doelgrootte voor algemene besturingselementen

• Voor algemene besturingselementen gebruikt u de aanbevolen besturingsgrootten. De aanbevolen grootte van het besturingselement voldoet aan de minimale grootte van 23x23 pixel (13x13 DLU), met uitzondering van selectievakjes en keuzerondjes (hun tekstbreedte compenseert enigszins), draaiknoppen (die niet bruikbaar zijn met aanraking, maar zijn overbodig) en splitters.

  

  De aanbevolen besturingsgrootten zijn gemakkelijk aan te raken.

• Voor opdrachtknoppen die worden gebruikt voor de belangrijkste of veelgebruikte opdrachten, gebruikt u een minimale grootte van 40x40 pixels (23x22 DLL's) wanneer dit praktisch is. Dit levert betere snelheid en nauwkeurigheid op, en voelt ook comfortabeler voor gebruikers.

  

  Wanneer u dat praktisch kunt doen, gebruikt u grotere opdrachtknoppen voor belangrijke of veelgebruikte opdrachten.

• Voor andere besturingselementen:

  • Gebruik grotere klikdoelen. Voor kleine besturingselementen maakt u de doelgrootte groter dan het statisch zichtbare UI-element. Pictogrammenknoppen van 16x16 pixels kunnen bijvoorbeeld een doelknoppen van 23x23 pixels hebben en tekstelementen kunnen selectierechthoeken hebben van 8 pixels breder dan de tekst en 23 pixels hoog.

    Juist:

    

    Onjuist:

    

    Juist:

    

    In de juiste voorbeelden zijn de klikdoelen groter dan de statisch zichtbare UI-elementen.

  • Gebruik redundante klikdoelen. Het is acceptabel dat klikdoelen kleiner zijn dan de minimale grootte als dat besturingselement redundante functionaliteit heeft.

    De progressieve driehoeken voor openbaarmaking die door het besturingselement voor de structuurweergave worden gebruikt, zijn bijvoorbeeld slechts 6x9 pixels, maar hun functionaliteit is overbodig met de bijbehorende itemlabels.

    

    De driehoeken van de structuurweergave zijn te klein om gemakkelijk aan te raken, maar ze zijn redundant in functionaliteit met hun grotere gekoppelde labels.

    Respecteer metrische systeemgegevens. Maak geen hardcodegrootten. Indien nodig kunnen gebruikers de metrische systeemgegevens of dpi wijzigen om aan hun behoeften te voldoen. Behandel dit echter als laatste redmiddel omdat gebruikers normaal gesproken geen systeeminstellingen hoeven aan te passen om de gebruikersinterface bruikbaar te maken.

    

    In dit voorbeeld is de metrische systeemwaarde voor menuhoogte gewijzigd.

Tekst bewerken

Tekst bewerken is een van de meest uitdagende interacties wanneer u een vinger gebruikt. Als u beperkte besturingselementen gebruikt, worden de juiste standaardwaarden en automatisch aanvullen geëlimineerd of verkleint u de noodzaak om tekst in te voeren. Maar als uw app tekst bewerkt, kunt u gebruikers productiever maken door de invoergebruikersinterface automatisch in te zoomen op 150 procent wanneer aanraking wordt gebruikt.

Een e-mailprogramma kan bijvoorbeeld de gebruikersinterface op normale aanraakbare grootte weergeven, maar zoom de invoergebruikersinterface in op 150 procent om berichten op te stellen.

In dit voorbeeld wordt de invoerinterface ingezoomd op 150 procent.

Besturingselementindeling en afstand

De afstand tussen besturingselementen is een belangrijke factor bij het gemakkelijk aanraken van besturingselementen. Het doel is sneller, maar minder nauwkeurig wanneer u een vinger gebruikt als het aanwijzende apparaat, waardoor gebruikers vaker buiten hun beoogde doel tikken. Wanneer interactieve besturingselementen zeer dicht bij elkaar worden geplaatst, maar niet daadwerkelijk aanraken, kunnen gebruikers klikken op inactieve ruimte tussen de besturingselementen. Omdat klikken op inactieve ruimte geen resultaat of visuele feedback heeft, zijn gebruikers vaak niet zeker wat er mis is gegaan.

De afstand dynamisch aanpassen op basis van het gebruikte invoerapparaat. Dit is met name handig met tijdelijke gebruikersinterface, zoals menu's en flyouts.

Geef minimaal 5 pixels (3 DLL's) ruimte tussen de doelregio's van interactieve besturingselementen. Als kleine besturingselementen te dicht zijn gespoerd, moet de gebruiker met precisie tikken om te voorkomen dat het verkeerde object wordt getikt.

Maak besturingselementen in groepen gemakkelijker te onderscheiden met behulp van meer dan de aanbevolen verticale afstand tussen besturingselementen. Keuzerondjes met 19 pixels hoog zijn bijvoorbeeld korter dan de minimaal aanbevolen grootte van 23 pixels. Wanneer u verticale ruimte beschikbaar hebt, kunt u ongeveer hetzelfde effect bereiken als de aanbevolen grootte door een extra afstand van 4 pixels aan de standaard 7 pixels toe te voegen.

Juist:

Beter:

In het betere voorbeeld maakt de extra afstand tussen de keuzerondjes ze gemakkelijker te onderscheiden.

Er kunnen situaties zijn waarin extra afstand wenselijk zou zijn bij het gebruik van aanraking, maar niet wanneer u de muis of het toetsenbord gebruikt. In dergelijke gevallen gebruikt u alleen een ruimer ontwerp wanneer een actie wordt gestart met aanraking.

Kies een indeling die besturingselementen dicht bij de locatie plaatst waar ze waarschijnlijk worden gebruikt. Houd waar mogelijk taakinteracties binnen een klein gebied en zoek besturingselementen dicht bij de locatie waar ze waarschijnlijk worden gebruikt. Vermijd handbewegingen op lange afstand, met name voor algemene taken en voor slepen.

Houd er rekening mee dat de huidige locatie van de aanwijzer het dichtst bij een doel ligt, waardoor deze eenvoudig te verkrijgen is. Contextmenu's profiteren dus optimaal van de wet van Fitts, net als de miniwerkbalken die door Microsoft Office worden gebruikt.

Vermijd het plaatsen van kleine besturingselementen aan de rand van de app of het scherm. Kleine doelen in de buurt van randen kunnen moeilijk te raken zijn (weergaveranden kunnen de randbewegingen verstoren). Om ervoor te zorgen dat besturingselementen gemakkelijk te richten zijn wanneer een venster wordt gemaximaliseerd, moet u ze ten minste 23x23 pixels (13x13 DLL's) maken of ze weg van de vensterrand plaatsen.

Gebruik de aanbevolen afstand. De aanbevolen afstand is aanraakvriendelijk. Als uw app echter baat kan hebben bij een grotere grootte en afstand, kunt u de aanbevolen grootte en afstand overwegen om zo nodig minimale grootten te zijn.

Geef ten minste 5 pixels (3 DLL's) ruimte tussen interactieve besturingselementen. Dit voorkomt verwarring wanneer gebruikers buiten hun beoogde doel tikken.

Overweeg om meer dan de aanbevolen verticale afstand toe te voegen binnen groepen besturingselementen, zoals opdrachtkoppelingen, selectievakjes en keuzerondjes, en tussen de groepen. Hierdoor kunnen ze gemakkelijker onderscheid maken.

Overweeg om meer dan de aanbevolen verticale afstand dynamisch toe te voegen wanneer een actie wordt gestart met aanraking. Dit maakt objecten gemakkelijker te onderscheiden, maar zonder dat u meer ruimte nodig hebt bij het gebruik van een toetsenbord of muis. Vergroot de afstand met een derde van de normale grootte of ten minste 8 pixels.

In dit voorbeeld zijn Snelmenu's op de taakbalk van Windows 7 ruimer wanneer ze met aanraakscherm worden weergegeven.

Interactie

Als u de juiste besturingselementen gebruikt, maakt u slechts een deel van de manier om een app met aanraakbediening te gebruiken, moet u ook rekening houden met het algehele interactiemodel dat door deze besturingselementen wordt ondersteund. Hier volgen enkele richtlijnen om u hierbij te helpen.

• Maak de aanwijzer redundant. Hover wordt niet ondersteund door de meeste aanraaktechnologieën, zodat gebruikers met dergelijke touchscreens geen taken kunnen uitvoeren waarvoor het aanwijzen is vereist.

• Voor apps die tekstinvoer nodig hebben, integreert u de functie voor het schermtoetsenbord volledig door:

  • Geef de juiste standaardwaarden op voor gebruikersinvoer.
  • Geef indien nodig suggesties voor automatisch aanvullen.

  Notitie

  Ontwikkelaars: Zie ITextInputPanelvoor meer informatie over het integreren van het schermtoetsenbord.

• Gebruikers toestaan om in te zoomen op de gebruikersinterface van inhoud als uw programma taken bevat waarvoor bewerkingstekst is vereist. Overweeg automatisch in te zoomen op 150 procent wanneer aanraking wordt gebruikt.

• Zorg voor vloeiende, responsieve pannen en zoomen waar nodig. Teken snel opnieuw na een pannen of zoom om responsief te blijven. Dit is nodig om directe manipulatie echt direct te laten voelen.

• Zorg er tijdens een pan of zoom voor dat de contactpunten onder de vinger blijven tijdens het gebaar. Anders is het pannen of zoomen moeilijk te bedienen.

• Omdat bewegingen worden onthouden, wijst u deze betekenissen toe die consistent zijn in alle apps. Geef geen andere betekenis aan bewegingen met vaste semantiek. Gebruik in plaats daarvan een geschikte app-specifieke beweging.

Vergiffenis

Directe manipulatie maakt een natuurlijke, expressieve, efficiënte en aantrekkelijke aanraking. Als er echter sprake is van directe manipulatie, kan er onbedoelde manipulatie zijn en daarom de noodzaak van vergeving.

Vergeving is de mogelijkheid om een ongewenste actie eenvoudig te omkeren of corrigeren. U maakt een aanraakervaring vergeefs door ongedaan te maken, goede visuele feedback te geven, een duidelijke fysieke scheiding te hebben tussen veelgebruikte opdrachten en destructieve opdrachten, en gebruikers in staat te stellen fouten eenvoudig te corrigeren. Gekoppeld aan vergeving voorkomt dat ongewenste acties in de eerste plaats plaatsvinden, wat u kunt doen met behulp van beperkte besturingselementen en bevestigingen voor riskante acties of opdrachten die onbedoelde gevolgen hebben.

• Geef een opdracht Ongedaan maken op. Het is raadzaam om een eenvoudige manier te bieden om alle opdrachten ongedaan te maken, maar uw app kan enkele opdrachten hebben waarvan het effect niet ongedaan kan worden gemaakt.

• Wanneer u praktisch bent, geeft u goede feedback over vinger omlaag, maar voert u geen acties uit totdat u met uw vinger omhoog gaat. Hierdoor kunnen gebruikers fouten corrigeren voordat ze ze maken.

• Wanneer dit praktisch is, kunnen gebruikers fouten eenvoudig corrigeren. Als een actie van kracht wordt op de vinger omhoog, kunnen gebruikers fouten corrigeren door te schuiven terwijl de vinger nog steeds omlaag is.

• Wanneer het praktisch is, geeft u aan dat een directe manipulatie niet kan worden uitgevoerd door de beweging te weerstaan. Sta toe dat de beweging plaatsvindt, maar laat het object op zijn plaats staan wanneer het wordt vrijgegeven om duidelijk aan te geven dat de actie is herkend, maar niet kan worden uitgevoerd.

• Zorg voor duidelijke fysieke scheiding tussen veelgebruikte opdrachten en destructieve opdrachten. Anders kunnen gebruikers per ongeluk destructieve opdrachten aanraken. Een opdracht wordt beschouwd als destructief als het effect wijdverspreid is en kan niet eenvoudig ongedaan worden gemaakt of het effect is niet onmiddellijk merkbaar.

• Bevestig opdrachten voor riskante acties of opdrachten die onbedoelde gevolgen hebben. Gebruik hiervoor een bevestigingsdialoogvenster.

• Overweeg om andere acties te bevestigen die gebruikers per ongeluk uitvoeren wanneer ze aanraakschermen gebruiken en die onopgemerkt blijven of moeilijk ongedaan te maken zijn. Normaal gesproken worden deze routinebevestigingen genoemd en worden ze afgeraden op basis van de veronderstelling dat gebruikers dergelijke opdrachten niet vaak per ongeluk met een muis of toetsenbord uitgeven. Als u onnodige bevestigingen wilt voorkomen, dient u deze bevestigingen alleen weer te geven als de opdracht is gestart met aanraken.

  Routinebevestigingen zijn acceptabel voor interacties die gebruikers vaak per ongeluk met aanraking doen.

  Ontwikkelaars: U kunt onderscheid maken tussen muis- en aanraakevenementen met behulp van de INPUT_MESSAGE_SOURCE-API.