Svep-till-åtgärd UX: Gör dolda gester upptäckbara och säkra
Hur man designar svepåtgärder i listor: betecknare, trösklar, fullsvepbekräftelser, ångra, tillgänglighet och varför svep aldrig borde vara det enda sättet.
Core Takeaway
Svepåtgärder är en snabb genväg för frekventa liståtgärder som arkivering eller radering, men de är dolda, så de får aldrig vara det enda sättet att göra något. Använd dem för förväntade handlingar, visa en tydlig tröskel när objektet rör sig, låt ett partiellt svep avslöja och ett helt svep begå, och erbjuda ångra för destruktiva handlingar.
Användbarhetsproblemen
Nielsen Norman Group hittade återkommande problem med svep för att avslöja-åtgärder: brist på tecken gör det oklart var svep fungerar, icke-standardiserade åtgärder bakom svep överraskar personer som förväntar sig radering eller arkivering, att dölja många åtgärder bakom ett svep gör dem svåra att upptäcka, och svep kan vara tvetydigt när samma gest också navigerar mellan sektioner.
Hur svepåtgärder ska bete sig
Material Design beskriver det vanliga mönstret på Android: listobjekt kan avslöja knappar vid svep, och den primära åtgärden är det sista, ändjusterade alternativet, som ett helt svep utlöser direkt.
- Fortsätt svepa för vanliga, förväntade åtgärder: arkivera, ta bort, markera som läst.
- Visa åtgärden och dess färg när objektet flyttas och ändra det synligt vid commit-tröskeln.
- Fjädra tillbaka föremålet om det släpps före tröskeln.
- Erbjud att ångra, eller be om bekräftelse, för destruktiva handlingar.
- Blanda inte horisontella svepåtgärder med horisontell svepnavigering på samma skärm.
Aldrig det enda sättet
Eftersom svep är osynligt, placera samma åtgärder i en synlig meny, långtrycksmeny eller detaljskärm. Detta omfattar också tillgänglighet: skärmläsare och personer som inte kan utföra exakta gester behöver en rutt som inte är gester, och plattformar tillhandahåller tillgänglighetsåtgärder för just detta ändamål.
Rörelse gör att svep känns pålitligt
Föremålet ska spåra fingret exakt, och vid frigöring får en fjäder som bär fingrets hastighet att commit eller snap-back känns fysiskt. En kort haptisk knackning vid tröskeln, där plattformen stöder den, bekräftar åtgärden innan fingret lyfts.
Nyckel Principles att komma ihåg
- Svep är dolt: tillhandahåll alltid ett synligt alternativ
- Använd den för frekventa, förväntade åtgärder
- Partiell svep avslöjar, full svep begår, tidig release fjädrar tillbaka
- Ångra eller bekräfta destruktiva handlingar
- Undvik motstridiga horisontella gester på en skärm
Vanliga frågor
Källor
- Using Swipe to Trigger Contextual Actions — Nielsen Norman Group
- Lists guidelines — Material Design 3