Så här utformar du Gest-Driven UI
Kom ihåg de dagar då svängning och musklick var de mest använda triggarna för interaktion med en webbplats eller app? De dagarna är borta. När Apple introducerade den första iPhone blev multi-touch-tekniken mainstream och användarna lärde sig att de inte bara kunde peka och knacka på gränssnittet, utan också klämma, sprida och svepa. Gester blev de nya klicken.
Idag kan framgången för ett mobilgränssnitt utföras av hur effektivt det använder gester.
Hur man väljer en bra gest
När det gäller att integrera gester i ditt användargränssnitt är det viktigt att känna till din marknad och de andra appar som målgruppen kan använda. Försök att använda samma typer av gester i din app. På det här sättet optimerar du inte bara ditt användargränssnitt baserat på din målgrupps beteende utan också utformar ett bekvämare tillvägagångssätt för användare redan från början.
Undervisningsfärdigheter
Gester är ett måste i varje mobilapp, men det är alltid en utmaning att göra dem tydliga för användarna. Touch-gränssnitt ger många möjligheter att använda naturliga gester som knackar, svep och nypa för att få saker gjorda, men i motsats till grafiska användargränssnittskontroller är gestbaserade interaktioner ofta dolda från användarna. Så om inte användarna har förkunnande att en gest finns, kommer de inte att försöka.
Därför är design för upptäckt avgörande. Du måste vara säker på att du ger rätt signaler för signaler som hjälper användare att enkelt upptäcka hur de kan interagera med ett gränssnitt.
Undvik handledning och genomgångar under ombordstigning
Tutorials och walkthroughs är ganska populära praxis för geststyrda appar. Innehåller handledning i din app betyder i många fall att det finns några instruktioner för användaren för att förklara gränssnittet. En UI-handledning är dock inte det mest eleganta sättet att förklara en apps kärnfunktionalitet. Det stora problemet med uppåtgående handledning är att användarna måste komma ihåg alla dessa nya sätt att använda appen när de kommer in. För mycket information på en gång kan leda till mer förvirring. Till exempel börjar Clear appen med en obligatorisk 7-sidig handledning och användarna måste tålmodigt läsa all information och försöka begå den till sitt minne. Det är dålig design eftersom det kräver att användarna arbetar på förhand även innan de faktiskt försöker appen.
Utbilda i samband med åtgärden
När det gäller att lära användare att använda ditt användargränssnitt, skulle jag rekommendera att göra det huvudsakligen genom att utbilda i samband med åtgärden (när en användare faktiskt behöver det). För att lära människor en ny gest måste du börja långsamt. Med tanke på viss iteration kan instruktioner omvandlas till en mer gradvis upptäckt. Använd bara tips om tid och fokusera på att förklara en samspel snarare än att försöka förklara alla möjliga åtgärder i användargränssnittet. Hint vid gester genom att ge uppenbara, kontextuella ledtrådar.
Nedan ser du en skärmbild för gestusutbildning från YouTube-appen för Android. Appen har en gestbaserad interaktion men använder inte en handledning för att instruera användare. Istället använder den tips som visas vid den första lanseringen för nya användare, en i taget då användaren når den relevanta delen av appen. Tekniken är baserad på textkommandon som uppmanar användarna att utföra en gest och beskriver resultatet av interaktionen med en kort och tydlig beskrivning.
Använd animering för att kommunicera gester
Gester, användbara som de är, skulle inte vara något utan animering. Som designer kan du använda animering för att förmedla information om tillgängliga åtgärder. Till exempel, för att göra användarna medvetna om att de kan interagera med ett visst element, kan du skapa ett textkommando direkt på det interaktiva elementet och animera resultatet av interaktion som visas i exempel nedan.
Det finns tre populära tekniker för att hjälpa utbilda användare, baserat på användningen av animering. Den första är en antydningsrörelse. Hint-rörelse, eller animerad visuell ledtråd, visar en förhandsvisning av hur man interagerar med ett element när man utför åtgärden. Det syftar till att skapa föreningar mellan gesten och den handling som den utlöser. Pudding Monsters spelmekanik bygger till exempel endast på gester, men de tillåter användare att få den grundläggande idén om vad man ska göra utan att behöva gissa. Animation ger information om funktionalitet - ett scenario visas med animering och det blir omedelbart klart för användarna vad man ska göra.
En andra teknik är innehållstest. Innehållsbrott är subtila visuella ledtrådar som indikerar vad som är möjligt. Ett exempel nedan visar ett innehållsbrott för kort - det visar helt enkelt att andra kort finns bakom ett aktuellt kort och det gör det klart att swiping är möjligt.
Den tredje och sista tekniken som jag skulle vilja nämna är affordance. Du kan ge några delar av ditt användargränssnitt en hög fördel för att peka användare på funktioner i ett gränssnitt och använda studsar eller pulser som en indikator på en tillgänglig gest. Ett exempel på denna teknik finns i Apple iOS. När en användare knackar på kamerans ikon hoppar låsskärmen upp och visar kamerans app under.
Slutsats
Medan det är sant att beröringsgester är mest osynliga för oss finns det ett antal designtekniker som kan ge användarna en titt på vad som är möjligt. Just-time-tips, animeringstangenter och innehållstest är några av de sätt som dolda gester kan avslöjas.