Metlivi-bloggen

Så kombinerar du en tryckåtgärd med tydlig visuell eller taktil återkoppling

Ge en knapp i en mobilapp en omedelbar visuell respons när den trycks ned, och visa sedan resultatet när åtgärden är klar. Lägg bara till en kort haptisk signal när den förstärker samma händelse och passar åtgärdens betydelse. Den här sekvensen hjälper människor att skilja mellan ”appen registrerade mitt tryck” och ”uppgiften lyckades”, särskilt när det tar tid att få svar. Stegen nedan gäller en enskild knapp eller kontroll; plattformarnas detaljer skiljer sig åt, så använd operativsystemets standardmönster för interaktion när de finns.

15 oktober 20266 min läsningAv Metlivi Editorial Team
Avsnitt 1

Börja med att bestämma vad återkopplingen ska förmedla

Ett tryck kan leda till flera olika händelser: en kontroll trycks ned, en inställning ändras, en begäran startar eller en begäran lyckas eller misslyckas. Bestäm vilken händelse varje signal representerar innan du väljer en animation eller vibration. En trycksignal bekräftar inmatningen; en ändrad etikett eller ett markerat läge bekräftar en lokal tillståndsändring; en förloppsindikator visar att arbete pågår; ett meddelande om att det lyckades bekräftar att det är klart.

Håll dessa betydelser åtskilda. Om en knapp tillfälligt mörknar vid beröring betyder det inte att en nätverksbegäran har slutförts. Om det kan ta tid att skicka något ska ett tydligt förloppsläge visas tills appen känner till resultatet. Apple rekommenderar att en aktivitetsindikator visas i en knapp när en åtgärd inte slutförs omedelbart och föreslår att etiketten ändras för att tydliggöra vad som händer. Apples riktlinjer för knappar

Avsnitt 2

Skapa en enkel sekvens av tillstånd

Se återkopplingen som en sekvens som följer kontrollens faktiska tillstånd, i stället för en effekt som spelas upp varje gång knappen trycks ned. En användbar grundsekvens är:

  1. Redo: Visa åtgärden med en etikett eller välbekant symbol som tydligt förklarar dess syfte.
  2. Nedtryckt: Ge omedelbar visuell återkoppling på trycket, till exempel en subtil ändring av fyllning, storlek eller markering.
  3. Pågår: Visa förloppet om det dröjer innan åtgärden är klar, och förhindra oavsiktliga dubbla inskickningar när det är lämpligt för åtgärden.
  4. Klar eller misslyckad: Uppdatera gränssnittet med det faktiska resultatet. För en växlingsknapp visas det nya markerade läget; för en inskickning visas en kortfattad status om att det lyckades eller ett felmeddelande.

Apple anger att anpassade knappar alltid bör ha ett nedtryckt läge, eftersom de annars kan kännas okänsliga. I de övergripande riktlinjerna för återkoppling rekommenderas att presentationen anpassas efter informationens betydelse och att status visas nära objektet den beskriver. Apples riktlinjer för knappar och riktlinjer för återkoppling

Avsnitt 3

Välj en visuell signal som är lätt att förstå

Gör det nedtryckta läget synligt medan fingret är på kontrollen. En liten förändring av färg eller opacitet, en kort storleksändring eller en markering kan fungera, så länge kontrollen fortfarande känns igen och etiketten förblir läsbar. Använd inte enbart färg för att förmedla resultatet: komplettera med en tillståndsändring, text, ikon eller annan synlig skillnad som förklarar vad som hände.

För en växlingsknapp ska det markerade läget finnas kvar efter trycket; en tillfällig krusningseffekt visar inte i sig om inställningen är på. Vid en engångsåtgärd som ”Spara” kan knappen först visa att den tryckts ned, varefter appen visar ett sparat läge eller en status. Om en uppgift misslyckas ska felet förklaras nära den berörda kontrollen och nästa möjliga åtgärd framgå tydligt. Den exakta presentationen beror på appen och plattformen, men signalen ska spegla ett tillstånd som appen kan verifiera.

Avsnitt 4

Avgör om haptisk återkoppling tillför användbar information

Haptik kan förstärka en tydlig händelse, till exempel ett knapptryck eller en bekräftad tillståndsändring. Det är valfritt: den visuella responsen måste fortfarande vara begriplig om enheten är ljudlös, haptik är inaktiverad eller personen inte känner signalen. Androids riktlinjer rekommenderar att haptik används sparsamt, att den är konsekvent vid liknande interaktioner och att den stämmer överens med den visuella eller ljudbaserade upplevelsen. De rekommenderar också att helt avstå från haptik hellre än att använda en surrande beröringseffekt. Androids designprinciper för haptik

Ett praktiskt val är att använda en lätt, kort signal för en meningsfull bekräftelse när plattformen erbjuder en lämplig standardeffekt. Undvik vibrationer vid varje tryck med lågt värde, upprepad rullning eller en händelse som inte motsvaras av någon synlig ändring. Om händelsen är viktig ska den visuella statusen förmedla innebörden; förlita dig inte på vibrationer för att skilja mellan framgång och misslyckande.

Avsnitt 5

Låt signalen komma vid rätt tillfälle

En tryckrespons hör hemma vid beröringen; en framgångsrespons hör hemma efter att framgång har bekräftats. För en åtgärd som slutförs direkt kan dessa ögonblick ligga nära varandra. Vid en fjärrsparning eller inskickning kan de skiljas åt av en märkbar väntetid. En haptisk framgångssignal när fingret trycker ned skulle påstå att åtgärden är klar innan appen har bekräftat det.

På Android använder den rekommenderade metoden View.performHapticFeedback åtgärdsorienterade konstanter, följer systeminställningarna för beröringsåterkoppling och kräver inte behörigheten VIBRATE. Plattformen har reservbeteenden för dessa konstanter när det behövs. Mer anpassade vibrationseffekter har andra krav på stöd och konfiguration, så för vanliga kontroller är den standardiserade, åtgärdsorienterade metoden att föredra. Androids implementeringsguide för haptisk återkoppling

Avsnitt 6

Tänk på plattformens beteende och hur ofta signalen används

Använd inbyggda kontroller när de redan ger den förväntade återkopplingen. Apple påpekar att standardkontroller som reglage, skjutreglage och väljare kan spela upp systemhaptik på iPhone-modeller som stöder det. Om du lägger till en egen effekt ovanpå kan signalen upprepas, så kontrollera kontrollens inbyggda beteende innan du lägger till ytterligare en signal. Apples riktlinjer för haptik

Även frekvensen spelar roll. Ett återkopplingsmönster som känns tydligt vid en enstaka formulärinskickning kan bli störande om det kopplas till en knapp som används ofta. Se till att samma betydelse uttrycks konsekvent vid likvärdiga åtgärder och spara starkare eller mer märkbara signaler till händelser som motiverar mer uppmärksamhet. Android rekommenderar särskilt att haptikens styrka anpassas både efter händelsens betydelse och hur ofta den inträffar. Androids designprinciper för haptik

Avsnitt 7

Kontrollera interaktionen innan du släpper appen

Testa hela sekvensen på de enheter och operativsystem som appen stöder. Tryck en gång och kontrollera att det nedtryckta läget visas direkt; kontrollera sedan att förloppet förblir synligt under en fördröjning och att framgång eller misslyckande visas först när resultatet är känt. Prova att trycka snabbt en andra gång och kontrollera att gränssnittet inte skapar förvirrande dubbel återkoppling eller oavsiktligt upprepar åtgärden.

Upprepa kontrollen med systemets beröringsåterkoppling avstängd och när enhetens haptik saknas eller inte stöds. De visuella tillstånden ska fortfarande förmedla åtgärden och resultatet. Jämför åtgärder som används ofta med sådana som används mer sällan och ta bort effekter som känns störande, osynkroniserade eller frikopplade från en synlig ändring. Androids standardåterkoppling för vyer följer systeminställningen som standard; anpassade metoder kan kräva extra stöd och kontroller av reservbeteenden. Androids guide till haptisk återkoppling

En tydlig kombination följer en enkel logik: visa att trycket registrerades, förmedla eventuell väntan och bekräfta resultatet när det faktiskt är känt. Låt haptik förstärka samma signal när det passar och se samtidigt till att det visuella gränssnittet är begripligt på egen hand.

Avsnitt 8

Källor

Relaterad läsning

Fortsätt utforska detta ämne