Dela via


Beröra

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.

Alla Microsoft Windows-program bör ha en bra touchupplevelse. Och att skapa en sådan upplevelse är lättare än du tror.

Touch refererar till att använda en eller flera fingrar för att ge indata via en enhetsvisning och interagera med Windows och appar. En pekoptimerad app har ett användargränssnitt och en interaktionsmodell som är utformad för att hantera de större, mindre exakta kontaktområdena, de olika formfaktorerna för touchenheter och de många ställningar och grepp som användarna kan använda när de använder en pekenhet.

Användare som interagerar med surfplattan med hjälp av touch

Varje indataenhet har sina styrkor. Tangentbordet passar bäst för textinmatning och ger kommandon med minimal handrörelse. Musen är bäst för effektiv, exakt pekar. Touch är bäst för objektmanipulering och att ge enkla kommandon. En penna passar bäst för frihandsuttryck, som med handskrift och ritning.

Windows 8.1 är optimerat för svarstider, noggrannhet och användarvänlighet med touch samtidigt som de stöder traditionella indatametoder (t.ex. mus, penna och tangentbord). Den hastighet, noggrannhet och taktila feedback som traditionella indatalägen ger är välbekanta och tilltalande för många användare och kan vara bättre lämpade för specifika interaktionsscenarier.

Du hittar riktlinjer som rör mus, penna och hjälpmedel i separata ämnen.

När du tänker på interaktionsupplevelsen för din app:

Anta inte att om ett användargränssnitt fungerar bra för en mus fungerar det också bra för touch. Även om bra musstöd är en början, har en bra touchupplevelse några ytterligare krav.

Anta att om ett användargränssnitt fungerar bra för ett finger fungerar det också bra för en penna. Att göra din app pekbar räcker långt för att också ge bra pennstöd. Den främsta skillnaden är att fingrarna har en trubbigare spets, så de behöver större mål.

Med touch kan du manipulera objekt och användargränssnitt direkt, vilket ger en snabbare, mer naturlig och engagerande upplevelse.

Ge en bra touch-upplevelse

Du bör se till att användarna kan utföra viktiga och viktiga uppgifter effektivt med hjälp av pekindata. Specifika appfunktioner, till exempel text- eller pixelmanipulering, kanske inte är lämpliga för beröring och kan reserveras för den lämpligaste indataenheten.

Om du inte har mycket erfarenhet av att utveckla touch-appar är det bäst att lära dig genom att göra det. Hämta en pekaktiverad dator, lägg musen och tangentbordet åt sidan och använd bara fingrarna för att interagera med din app. Om du har en surfplatta kan du experimentera med att hålla den i olika positioner, till exempel i knät, ligga platt på ett bord eller i armarna medan du står. Prova att använda den i stående och liggande orientering.

Touchoptimerade appar som fungerar bäst med touchinteraktion är vanligtvis:

  • Naturligt och intuitivt. Interaktioner är utformade för att motsvara hur användare interagerar med objekt i den verkliga världen.
  • Mindre påträngande. Att använda touch är tyst och därför mycket mindre distraherande än att skriva eller klicka.
  • Bärbar. Touch-enheter är mer kompakta eftersom många uppgifter kan utföras utan tangentbord, mus, penna eller pekplatta. De är också mer flexibla eftersom det inte krävs någon arbetsyta.
  • Direkt och engagerande. Touch får dig att känna att du manipulerar objekt direkt på skärmen.
  • Mindre exakt. Användare kan inte rikta objekt så exakt med pekfunktioner jämfört med en mus eller penna.

Touch ger en naturlig, verklig känsla för interaktion. Direkt manipulering och animering slutför det här intrycket genom att ge objekt en realistisk, dynamisk rörelse och feedback. Tänk dig till exempel ett kortspel. Det är inte bara bekvämt och enkelt att dra kort med ett finger, upplevelsen får en engagerande verklig känsla när du kan slänga, glida och snurra korten precis som du skulle göra med en fysisk kortlek. Och när du försöker flytta ett kort som inte kan flyttas, är det en bättre upplevelse att ha kortet motstå men inte förhindra rörelse, och slå sig tillbaka på plats när det släpps, för att tydligt indikera att åtgärden kändes igen men inte kan göras.

Lyckligtvis, om din app redan är väl utformad, ger en bra touch upplevelse är lätt att göra. För detta ändamål är ett väl utformat program:

  • Säkerställer att de viktigaste uppgifterna kan utföras effektivt med hjälp av ett finger (åtminstone de uppgifter som inte omfattar många skrivåtgärder eller detaljerad bildpunktsmanipulering).
  • Använder stora kontroller för touch. Vanliga kontroller har en minsta storlek på 23 x 23 bildpunkter (13 x 13 DLL:er), och de vanligaste kontrollerna är minst 40 x 40 bildpunkter (23 x 22 DLL:er). För att undvika att beteendet inte svarar bör gränssnittselement ha minst 5 bildpunkter (3 DLL:er) utrymme mellan sig. För andra kontroller kontrollerar du att de har ett klickmål på minst 23 x 23 bildpunkter (13 x 13 DLU), även om deras statiska utseende är mycket mindre. Se standardstorlek för kontroll.
  • Stöder musinmatning. De interaktiva kontrollerna har tydliga och synliga priser. Objekt har standardbeteenden för vanliga musinteraktioner (enkel och dubbel vänsterklick, högerklicka, dra och hovra).
  • Stöder tangentbordsinmatning. Appen tillhandahåller vanliga genvägsnyckeltilldelningar, särskilt för navigerings- och redigeringskommandon som också kan genereras via pekgester.
  • Säkerställer hjälpmedel. Använder UI Automation eller Microsoft Active Accessibility (MSAA) för att ge programmatisk åtkomst till användargränssnittet för hjälpmedelstekniker. Appen svarar korrekt på ändringar av orientering, tema, nationella inställningar och systemmått.
  • Eliminerar onödiga interaktioner. Använd de säkraste och säkraste standardvärdena för att förhindra dataförlust eller systemåtkomst. Om säkerhet och säkerhet inte är faktorer väljer appen det mest sannolika eller lämpligaste alternativet.
  • Ger pekmotsvarighet för hovring. Förlita dig inte på hovring som det enda sättet att utföra en åtgärd.
  • Säkerställer att gester träder i kraft omedelbart. Håll kontaktpunkterna under användarens fingrar smidigt under hela gesten, vilket ger effekten av gestmappningen direkt till användarens rörelse.
  • Använder standardgester när det är möjligt. Anpassade gester endast för interaktioner som är unika för din app.
  • Säkerställer att oönskade eller destruktiva kommandon kan ångras eller korrigeras. Oavsiktliga åtgärder är mer sannolika när du använder touch.

Riktlinjer för pekindata

Med touch kan din Windows-app använda fysiska gester för att emulera direkt manipulering av gränssnittselement.

Tänk på de här metodtipsen när du utformar din pekaktiverade app:

Responsivitet är viktigt för att skapa touchupplevelser som känns direkt och engagerande. För att kännas direkt måste gester börja gälla omedelbart, och ett objekts kontaktpunkter måste hålla sig under användarens fingrar smidigt under hela gesten. Effekten av touch-indata bör mappas direkt till användarens rörelse, så om användaren till exempel roterar fingrarna 90 grader bör objektet också rotera 90 grader. Varje fördröjning, hackigt svar, förlust av kontakt eller felaktiga resultat förstör uppfattningen av direkt manipulation och även av kvalitet.

Konsekvens är viktigt för att skapa touchupplevelser som känns naturliga och intuitiva. När användarna har lärt sig en standardgest förväntar de sig att gesten ska ha samma effekt i alla appar. För att undvika förvirring och frustration, tilldela aldrig icke-standard betydelser till standardgester. Använd i stället anpassade gester för interaktioner som är unika för ditt program.

Därefter ska vi beskriva Windows touch-språket, men innan vi går vidare, här är en kort lista med grundläggande pekindatavillkor.

  • Gest

    En gest är den fysiska handling eller rörelse som utförs på eller av indataenheten (finger, fingrar, penna/penna, mus och så vidare). Om du till exempel vill starta, aktivera eller anropa ett kommando använder du ett enda fingertryck för en pek- eller pekplatta (motsvarar ett vänsterklick med en mus, ett tryck med en penna eller Retur på ett tangentbord).

  • manipulation

    En manipulation är den omedelbara reaktionen eller svaret i realtid som ett objekt eller användargränssnitt har på en gest. Till exempel orsakar både bild- och svepgester vanligtvis att ett element eller användargränssnitt flyttas på något sätt.

    Det slutliga resultatet av en manipulation, hur det manifesteras av objektet på skärmen och i användargränssnittet, är interaktionen.

  • Interaktion

    Interaktioner beror på hur en manipulering tolkas och vilket kommando eller vilken åtgärd som är resultatet av manipulationen. Objekt kan till exempel flyttas med både bild- och svepgester, men resultatet skiljer sig beroende på om ett avståndströskelvärde överskrids. Bild kan användas för att dra ett objekt eller panorera en vy medan svep kan användas för att välja ett objekt eller visa ett appfält.

Windows touch-språket

Windows tillhandahåller en koncis uppsättning touchinteraktioner som används i hela systemet. Genom att använda det här touchspråket blir din app bekant för det som användarna redan vet. Detta ökar användarnas förtroende genom att göra appen enklare att lära sig och använda. Mer information om implementering av touchspråk finns i Gester, manipulationer och interaktioner.

Tryck och håll för att lära dig

Tryck- och håll-gesten visar detaljerad information eller undervisning av visuella objekt (till exempel en knappbeskrivning eller snabbmeny) utan att binda sig till en åtgärd eller ett kommando. Panorering är fortfarande möjligt om en glidande gest startas medan det visuella objektet visas.

Viktig

Du kan använda tryck och håll för markering i fall där både vågrät och lodrät panorering är aktiverad.

Inmatningstillstånd: En eller två fingrar i kontakt med skärmen.

Rörelse: Ingen rörelse.

Utgångstillstånd: Sista fingret upp avslutar gesten.

Effekt: Visa mer information.

touch-press-to-learn.png

Tryck och håll gest.

hovra

Hovring är en användbar interaktion eftersom den gör det möjligt för användare att få ytterligare information via tips innan de initierar en åtgärd. Om du ser de här tipsen kan användarna känna sig mer säkra och minska antalet fel.

Hovring stöds tyvärr inte av touchtekniker, så användarna kan inte hovra när de använder ett finger. Den enkla lösningen på det här problemet är att dra full nytta av hovring, men bara på sätt som inte krävs för att utföra en åtgärd. I praktiken innebär detta vanligtvis att åtgärden också kan utföras genom att klicka, men inte nödvändigtvis på exakt samma sätt.

Skärmbild som visar ett exempel på hovringsinteraktionen bredvid ett exempel på klickåtgärden.

I det här exemplet kan användarna se dagens datum genom att antingen hovra eller klicka.

Tryck för primär åtgärd

Genom att trycka på ett element anropas dess primära åtgärd, till exempel att starta en app eller köra ett kommando.

Inmatningstillstånd: Ett finger i kontakt med skärmen eller pekplattan och lyfts innan tidströskeln för en press- och undantagsinteraktion inträffar.

Rörelse: Ingen rörelse.

Avsluta tillstånd: Finger up avslutar gesten.

Effekt: Starta en app eller kör ett kommando.

touch-tap-primary.png

Tryckgesten.

Dra för att panorera

Bilden används främst för panorering av interaktioner men kan också användas för att flytta (där panorering är begränsad till en riktning), ritning eller skrivning. Bild kan också användas för att rikta små, tätt packade element genom att skrubba (dra fingret över relaterade objekt som alternativknappar).

Inmatningstillstånd: En eller två fingrar i kontakt med skärmen.

Rörelse: Dra, med ytterligare fingrar kvar i samma position i förhållande till varandra.

Utgångstillstånd: Sista fingret upp avslutar gesten.

Effekt: Flytta det underliggande objektet direkt och omedelbart när fingrarna rör sig. Se till att hålla kontaktpunkten under fingret under hela gesten.

touch-slide.png

Pangesten.

Svep för att välja, kommando och flytta

Skjuter fingret ett kort avstånd, vinkelrätt mot panoreringsriktningen (där panorering är begränsad till en riktning), väljer objekt i en lista eller ett rutnät. Visa appfältet med relevanta kommandon när objekt väljs.

Inmatningstillstånd: En eller flera fingrar trycker på skärmen.

Rörelse: Dra ett kort avstånd och lyft innan avståndets tröskelvärde för en flyttinteraktion inträffar.

Utgångstillstånd: Sista fingret upp avslutar gesten.

Effekt: Underliggande objekt är markerat eller flyttat, eller så visas appfältet. Se till att hålla kontaktpunkten under fingret under hela gesten.

d:\sdkenlistment\m-ux-design\m-ux-design\images\touch-swipe.png

Svepgesten.

Nyp och sträck ut för att zooma

Gesterna pinch och stretch används för tre typer av interaktioner: optisk zoom, storleksändring och semantisk zoom.

Optisk zoom justerar förstoringsnivån för hela innehållsområdet för att få en mer detaljerad vy över innehållet. Däremot är storleksändring en teknik för att justera den relativa storleken på ett eller flera objekt i ett innehållsområde utan att ändra vyn till innehållsområdet.

Semantisk zoom är en pekoptimerad teknik för att presentera och navigera strukturerade data eller innehåll i en enda vy (till exempel mappstrukturen på en dator, ett bibliotek med dokument eller ett fotoalbum) utan att behöva panorera, rulla eller trädvykontroller. Semantisk zoom ger två olika vyer av samma innehåll genom att låta dig se mer information när du zoomar in och mindre detaljer när du zoomar ut.

Inmatningstillstånd: Två fingrar i kontakt med skärmen samtidigt.

Rörelse: Fingrarna rör sig isär (stretcha) eller tillsammans (nypa) längs en axel.

Utgångstillstånd: Alla fingeruppdelar gesten.

Effekt: Zooma in eller ut det underliggande objektet direkt och omedelbart när fingrarna separeras eller närmar sig på axeln. Se till att hålla kontaktpunkterna under fingret under hela gesten.

landing-areazoom.png

Zoomgesten.

Vrid för att rotera

Om du roterar med två eller flera fingrar roteras ett objekt. Rotera själva enheten för att rotera hela skärmen.

Inmatningstillstånd: Två fingrar i kontakt med skärmen samtidigt.

Rörelse: Ena eller båda fingrarna roterar runt den andra och rör sig vinkelrätt mot linjen mellan dem.

Utgångstillstånd: Alla fingeruppdelar gesten.

Effekt: Rotera det underliggande objektet lika mycket som fingrarna har roterats. Se till att hålla kontaktpunkterna under fingret under hela gesten.

touch-turn.png

Rotationsgesten.

Rotation är bara meningsfullt för vissa typer av objekt, så det mappas inte till en Windows-interaktion i systemet.

Rotation görs ofta på olika sätt av olika personer. Vissa föredrar att rotera ett finger runt ett pivotfinger, medan andra föredrar att rotera båda fingrarna i en cirkulär rörelse. De flesta använder en kombination av de två, med ett finger som rör sig mer än det andra. Jämn rotation till valfri vinkel är den bästa interaktionen, men i många sammanhang, till exempel fotovisning, är det bäst att reglera till närmaste 90 graders rotation när användaren släpper taget. Vid fotoredigering kan du använda en liten rotation för att räta ut fotot.

Svep från gränsen för appkommandon

Om du sveper fingret en kort bit från skärmens nederkant eller övre kant visas appkommandon i ett appfält.

Inmatningstillstånd: En eller flera fingrar rör vid ramen.

Rörelse: Dra en kort bit till skärmen och lyft.

Utgångstillstånd: Sista fingret upp avslutar gesten.

Effekt: Appfältet visas.

touch-swipe-bottom-edge.png

touch-swipe-side-edge.png

Svep från kantgesten.

Utvecklare: Mer information finns i DIRECTMANIPULATION_CONFIGURATION uppräkning.

Kontrollera användning

Här tillhandahåller vi några riktlinjer för att optimera kontroller för pekanvändning.

  • Använd vanliga kontroller. De vanligaste kontrollerna är utformade för att stödja en bra touchupplevelse.
  • Välj anpassade kontroller som är utformade för att stödja touch. Du kan behöva anpassade kontroller för att stödja programmets särskilda upplevelser. Välj anpassade kontroller som:
    • Kan vara tillräckligt stor för enkel inriktning och manipulering.
    • När de manipuleras rör du dig och reagerar på det sätt som verkliga objekt rör sig och reagerar, till exempel genom att ha momentum och friktion.
    • Är förlåtande genom att tillåta användare att enkelt korrigera misstag.
    • Är förlåtande för felaktighet med att klicka och dra. Objekt som tappas nära målet bör hamna på rätt plats.
    • Få tydlig visuell feedback när fingret är över kontrollen.
  • Använd begränsade kontroller. Begränsade kontroller som listor och skjutreglage, när de är utformade för enkel pekinriktning, kan vara bättre än obehindrade kontroller som textrutor eftersom de minskar behovet av textinmatning.
  • Ange lämpliga 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, vilket eliminerar onödig interaktion.
  • Ange automatiskt slutförande av text. Innehåller en lista över de mest sannolika värdena, eller de senaste indatavärdena, för att göra textinmatningen mycket enklare.
  • För viktiga uppgifter som använder flera valanger du ett alternativ för att använda en kryssruta i stället om en standardlista med flera val används.

Kontrollstorlekar och pekinriktning

På grund av fingertoppens stora yta kan små kontroller som är för nära varandra vara svåra att rikta in sig på exakt.

Som en allmän regel är en kontrollstorlek på 23 x 23 bildpunkter (13 x 13 DLL:er) en bra minsta interaktiva kontrollstorlek för alla indataenheter. Däremot är spinnkontrollerna på 15 x 11 bildpunkter alldeles för små för att kunna användas effektivt med touch.

Skärmbild som visar bredden och höjden på upp- och nedmarkeringsknapparna, som mäter 9 DLL:er (15 bildpunkter) brett med 5 DLL:er (9 bildpunkter) högt.

Tänk på att den minsta storleken verkligen baseras på fysiskt område, inte layoutmått som bildpunkter eller DLL:er. Forskning visar att det minsta målområdet för effektiv och korrekt interaktion med ett finger är 6x6 millimeter (mm). Det här området översätts till layoutmått som detta:

Teckensnitt Millimeter Relativa bildpunkter DLL:er
9-poängs-Segoe-användargränssnitt 6x6 23x23 13x13
8 poäng Tahoma 6x6 23x23 15x14

Dessutom visar forskning att en minsta storlek på 10x10 mm (cirka 40 x 40 bildpunkter) ger bättre hastighet och noggrannhet, och även känns bekvämare för användarna. När det är praktiskt använder du den här större storleken för kommandoknappar som används för de viktigaste eller mest använda kommandona.

Målet är inte att ha gigantiska kontroller, bara de som enkelt används med beröring.

Skärmbild som visar Microsoft Word-verktygsfältet med knappen

I det här exemplet använder Microsoft Word knappar som är större än 10x10 mm för de viktigaste kommandona.

Skärmbild som visar Windows-kalkylatorn.

Den här versionen av Kalkylatorn använder knappar som är större än 10x10 mm för de kommandon som används oftast.

Det finns ingen perfekt storlek för pekmål. Olika storlekar fungerar för olika situationer. Åtgärder med allvarliga konsekvenser (till exempel ta bort och stänga) eller ofta använda åtgärder bör använda stora pekmål. Sällan använda åtgärder med mindre konsekvenser kan använda små mål.

Riktlinjer för målstorlek för anpassade kontroller

Storleksguide Beskrivning
7x7 rekommenderad minsta storlek
7x7 mm: Rekommenderad minsta storlek
7x7 mm är en bra minimistorlek om du vidrör fel mål kan korrigeras i en eller två gester eller inom fem sekunder. Utfyllnad mellan mål är lika viktigt som målstorlek.
9x9 rekommenderad storlek för noggrannhet
När noggrannhet spelar roll
Stäng, ta bort och andra åtgärder med allvarliga konsekvenser har inte råd med oavsiktliga tryckningar. Använd 9x9 mm-mål om du vidrör fel mål kräver mer än två gester, fem sekunder eller en större kontextändring för att korrigera.
5 x 5 minsta storlek
När den inte passar
Om du hittar dig själv klämma saker att passa, är det okej att använda 5x5 mm mål så länge vidrör fel mål kan korrigeras med en gest. Att använda 2 mm utfyllnad mellan mål är mycket viktigt i det här fallet.

Riktlinjer för målstorlek för vanliga kontroller

  • Använd de rekommenderade kontrollstorlekarna för vanliga kontroller. Den rekommenderade kontrollstorleken uppfyller minimistorleken på 23 x 23 bildpunkter (13 x 13 DLU), förutom kryssrutor och alternativknappar (deras textbredd kompenserar något), spinnkontroller (som inte kan användas med pekkontakt, men som är redundanta) och delare.

    Skärmbild som visar ett exempel på vanliga kontroller, inklusive ljudkontroller, knappen

    De rekommenderade kontrollstorlekarna är lätt att röra vid.

  • För kommandoknappar som används för de viktigaste eller vanligaste kommandona använder du en minsta storlek på 40 x 40 bildpunkter (23 x 22 DLL:er) när det är praktiskt. Detta ger bättre hastighet och noggrannhet och känns också bekvämare för användarna.

    Skärmbild som visar flera storlekar på en e-postknapp med knappen Skicka, med de minsta till största storlekarna från vänster till höger.

    När det är praktiskt använder du större kommandoknappar för viktiga eller ofta använda kommandon.

  • För andra kontroller:

    • Använd större klickmål. För små kontroller gör du målstorleken större än det statiskt synliga användargränssnittselementet. Till exempel kan ikonknappar på 16 x 16 bildpunkter ha en klickknapp på 23 x 23 bildpunkter och textelement kan ha markeringsrektanglar som är 8 bildpunkter bredare än texten och 23 bildpunkter höga.

      Korrekt:

      Skärmbild som visar ett verktygsfält med rätt målstorlek.

      Felaktig:

      Skärmbild som visar ett U I-träd med ett felaktigt storleksanpassat målområde.

      Korrekt:

      Skärmbild som visar ett U I-träd med rätt storlek för målområdet.

      I rätt exempel är klickmålen större än de statiskt synliga gränssnittselementen.

    • Använd redundanta klickmål. Det är acceptabelt att klickmål är mindre än den minsta storleken om kontrollen har redundanta funktioner.

      Till exempel är de progressiva röjningstrianglar som används av trädvisningskontrollen bara 6 x 9 bildpunkter, men deras funktioner är redundanta med tillhörande objektetiketter.

      Skärmbild som visar ett U I-träd med redundanta klickmål.

      Trianglarna i trädvyn är för små för att vara lätt att röra vid, men de är redundanta i funktioner med sina större associerade etiketter.

      Respektera systemmått. Hårdkoda inte storlekar. Om det behövs kan användarna ändra systemmått eller dpi för att tillgodose sina behov. Men behandla detta som en sista utväg eftersom användarna normalt inte ska behöva justera systeminställningarna för att göra användargränssnittet användbart.

      Skärmbild som visar en standardmenyhöjd till vänster och en större menyhöjd till höger.

      I det här exemplet ändrades systemmåttet för menyhöjd.

Redigera text

Redigering av text är en av de mest utmanande interaktionerna när du använder ett finger. Med hjälp av begränsade kontroller, lämpliga standardvärden och automatisk komplettering eliminerar eller minskar behovet av att mata in text. Men om din app omfattar redigering av text kan du göra användarna mer produktiva genom att automatiskt zooma indatagränssnittet upp till 150 procent som standard när touch används.

Ett e-postprogram kan till exempel visa användargränssnittet i normal pekbar storlek, men zooma indatagränssnittet till 150 procent för att skapa meddelanden.

Skärmbild som visar ett e-postmeddelande med U I.

I det här exemplet zoomas indatagränssnittet till 150 procent.

Kontrolllayout och avstånd

Avståndet mellan kontrollerna är en viktig faktor för att göra kontrollerna lätt att röra vid. Målinriktningen är snabbare men mindre exakt när du använder ett finger som pekenhet, vilket resulterar i att användarna oftare knackar utanför sitt avsedda mål. När interaktiva kontroller placeras mycket nära varandra men faktiskt inte vidrör varandra kan användarna klicka på inaktivt utrymme mellan kontrollerna. Eftersom det inte finns något resultat eller visuell feedback om att klicka på inaktivt utrymme är användarna ofta osäkra på vad som gick fel.

Justera avståndet dynamiskt baserat på den indataenhet som används. Detta är särskilt användbart med tillfälligt användargränssnitt, till exempel menyer och utfällbara menyer.

Ange minst 5 bildpunkter (3 DLL:er) utrymme mellan målregionerna för interaktiva kontroller. Om små kontroller är för nära fördelade måste användaren trycka med precision för att undvika att trycka på fel objekt.

Gör kontroller i grupper enklare att skilja mellan genom att använda mer än det rekommenderade lodräta avståndet mellan kontrollerna. Alternativknappar med 19 bildpunkter är till exempel kortare än den minsta rekommenderade storleken på 23 bildpunkter. När du har lodrätt utrymme tillgängligt kan du uppnå ungefär samma effekt som den rekommenderade storleksändringen genom att lägga till ytterligare 4 bildpunkters avstånd till standardstorleken 7 bildpunkter.

Korrekt:

Skärmbild som visar ett standardexempel på lodrätt avstånd mellan kontroller.

Bättre:

Skärmbild som visar ett exempel på kontroller med mer lodrätt avstånd.

I det bättre exemplet gör det extra avståndet mellan alternativknapparna dem lättare att skilja mellan.

Det kan finnas situationer där extra avstånd skulle vara önskvärt när du använder touch, men inte när du använder musen eller tangentbordet. I sådana fall använder du bara en mer rymlig design när en åtgärd initieras med touch.

Välj en layout som placerar kontroller nära där de troligen kommer att användas. Håll aktivitetsinteraktioner inom ett litet område när det är möjligt och leta upp kontroller nära där de troligen kommer att användas. Undvik långväga handrörelser, särskilt för vanliga uppgifter och för drag.

Tänk på att den aktuella pekarplatsen är det närmaste ett mål kan vara, vilket gör det trivialt att hämta. Snabbmenyer drar därför full nytta av Fitts lag, liksom de miniverktygsfält som används av Microsoft Office.

Skärmbild som visar ett exempel på en snabbmeny och ett miniverktygsfält från Microsoft Office sida vid sida.

Undvik att placera små kontroller nära appens kant eller skärmen. Små mål nära kanter kan vara svåra att röra (skärmramar kan störa kantgester). För att säkerställa att kontrollerna är lätta att rikta in sig på när ett fönster är maximerat kan du antingen göra dem minst 23 x 23 bildpunkter (13 x 13 DLL:er) eller placera dem bort från fönsterkanten.

Använd det rekommenderade avståndet. Det rekommenderade avståndet är beröringsvänligt. Men om din app kan dra nytta av större storlek och avstånd bör du överväga att den rekommenderade storleken och avståndet är minimum när det är lämpligt.

Ange minst 5 bildpunkter (3 DLL:er) utrymme mellan interaktiva kontroller. Detta förhindrar förvirring när användare trycker utanför sitt avsedda mål.

Överväg att lägga till mer än det rekommenderade lodräta avståndet i grupper med kontroller, till exempel kommandolänkar, kryssrutor och alternativknappar samt mellan grupperna. Om du gör det blir det lättare att särskilja dem.

Överväg att lägga till mer än det rekommenderade lodräta avståndet dynamiskt när en åtgärd initieras med touch. Om du gör det blir det enklare att särskilja objekt, men utan att ta mer utrymme när du använder tangentbord eller mus. Öka avståndet med en tredjedel av dess normala storlek eller minst 8 bildpunkter.

bild

I det här exemplet är Snabblistor för Windows 7-aktivitetsfältet mer rymliga när de visas med touch.

Interaktion

Med rätt kontroller får du bara en del av vägen till en pekoptimerad app. Du måste också överväga den övergripande interaktionsmodell som kontrollerna stöder. Här följer några riktlinjer som hjälper dig med detta.

  • Gör hovringsredundant. Hovring stöds inte av de flesta touchtekniker, så användare med sådana pekskärmar kan inte utföra några uppgifter som kräver hovring.

  • För appar som behöver textinmatning integrerar du funktionen för pektangentbord helt genom att:

    • Ange lämpliga standardvärden för användarindata.
    • Ge förslag för automatisk komplettering när det är lämpligt.

    Not

    Utvecklare: Mer information om hur du integrerar pektangentbordet finns i ITextInputPanel.

  • Tillåt användare att zooma innehållsgränssnittet om programmet har uppgifter som kräver redigering av text. Överväg att zooma automatiskt till 150 procent när touch används.

  • Ge smidig, dynamisk panorering och zoomning när det är lämpligt. Rita snabbt om efter en panorering eller zoom för att förbli dynamisk. Att göra det är nödvändigt för att få direkt manipulation att kännas verkligt direkt.

  • Under en panorering eller zoomning ska du se till att kontaktpunkterna håller sig under fingret under hela gesten. Annars är det svårt att kontrollera panorering eller zoomning.

  • Eftersom gester memoreras tilldelar du dem betydelser som är konsekventa mellan appar. Ge inte olika betydelser till gester med fasta semantik. Använd en lämplig appspecifik gest i stället.

Förlåtelse

Direkt manipulering gör beröring naturlig, uttrycksfull, effektiv och engagerande. Men om det sker direkt manipulering kan det ske oavsiktlig manipulering och därför behovet av förlåtelse.

Förlåtelse är förmågan att vända eller korrigera en oönstrade åtgärd enkelt. Du gör en touchupplevelse av att förlåta genom att ge ångra, ge bra visuell feedback, ha en tydlig fysisk separation mellan vanliga kommandon och destruktiva kommandon och göra det möjligt för användare att enkelt korrigera misstag. Associerad med förlåtelse hindrar oönskade åtgärder från att ske i första hand, vilket du kan göra genom att använda begränsade kontroller och bekräftelser för riskfyllda åtgärder eller kommandon som har oavsiktliga konsekvenser.

  • Ange kommandot Ångra. Det är bäst att tillhandahålla ett enkelt sätt att ångra alla kommandon, men din app kan ha vissa kommandon vars effekt inte kan ångras.

  • När det är praktiskt, ge bra feedback på fingret ner, men vidta inte åtgärder förrän finger upp. På så sätt kan användarna rätta till misstag innan de gör dem.

  • När det är praktiskt kan användarna enkelt rätta till misstag. Om en åtgärd träder i kraft på finger up kan användarna korrigera misstag genom att glida medan fingret fortfarande är nere.

  • När det är praktiskt kan du ange att en direkt manipulering inte kan utföras genom att motstå rörelsen. Tillåt att förflyttningen sker, men låt objektet återställas när det släpps för att tydligt indikera att åtgärden kändes igen men inte kan göras.

  • Ha tydlig fysisk separation mellan kommandon som används ofta och destruktiva kommandon. Annars kan användare oavsiktligt röra destruktiva kommandon. Ett kommando anses vara destruktivt om dess effekt är utbredd och antingen inte kan ångras eller om effekten inte märks omedelbart.

  • Bekräfta kommandon för riskfyllda åtgärder eller kommandon som har oavsiktliga konsekvenser. Använd en bekräftelsedialogruta för detta ändamål.

  • Överväg att bekräfta andra åtgärder som användarna brukar göra av misstag när de använder touch och som antingen går obemärkt förbi eller är svåra att ångra. Normalt kallas dessa för rutinbekräftelser och rekommenderas inte baserat på antagandet att användarna inte ofta utfärdar sådana kommandon av misstag med en mus eller ett tangentbord. Om du vill förhindra onödiga bekräftelser kan du bara presentera dessa bekräftelser om kommandot initierades med hjälp av touch.

    Rutinmässiga bekräftelser är acceptabla för interaktioner som användarna ofta oavsiktligt använder med touch.

    Utvecklare: Du kan skilja mellan mushändelser och touchhändelser med hjälp av INPUT_MESSAGE_SOURCE-API:et.