Sådan designes Gesture-Driven UI
Husk de dage, hvor hovering og klik med musen var de mest anvendte udløsere til interaktion med et websted eller en app? Disse dage er væk. Da Apple introducerede den første iPhone, blev multi-touch-teknologien mainstream, og brugerne lærte, at de ikke kun kunne pege og trykke på grænsefladen, men også knibe, sprede og udskyde. Gestures blev de nye klik.
I dag kan succesen med en mobil brugergrænseflade laves af, hvor effektivt det bruger bevægelser.
Hvordan man vælger en god gestus
Når det kommer til at inkorporere bevægelser i din brugergrænseflade, er det vigtigt at kende dit marked og de andre apps, som målgruppen kan bruge. Prøv at anvende de samme typer af gestus i din app. På denne måde optimerer du ikke kun dit brugerinterface baseret på dit målmarkeds adfærd, men designer også en mere behagelig tilgang til brugerne lige fra starten.
Undervisningsbevægelser
Gendannelser er et must i hver mobilapp, men det er altid en udfordring at gøre dem indlysende for brugerne. Touch-grænseflader giver mange muligheder for at bruge naturlige bevægelser som tryk, strejf og kniv for at få tingene gjort, men i modsætning til grafiske brugergrænsefladskontroller er gestusbaserede interaktioner ofte skjult for brugere. Så medmindre brugerne har forudgående viden om, at der er en gestus, vil de ikke forsøge.
Derfor er design til opdagelse afgørende. Du skal være sikker på, at du angiver de rigtige indikatorer for visuelle signaler, som hjælper brugerne med at opdage, hvordan de kan interagere med en grænseflade.
Undgå tutorials og walkthroughs under ombordstigning
Tutorials og walkthroughs er en ganske populær praksis for gest-drevne apps. Inddragelse af vejledninger i din app betyder i mange tilfælde at vise nogle instruktioner til brugeren for at forklare grænsefladen. Men en brugervejledning er ikke den mest elegante måde at forklare kernefunktionaliteten af en app på. Det store problem med upfront tutorials er, at brugerne skal huske alle disse nye måder at bruge appen på, når de kommer ind. For meget information på én gang kan føre til mere forvirring. For eksempel starter Clear-appen med en obligatorisk 7-siders vejledning, og brugerne skal tålmodigt læse alle oplysningerne og forsøge at forpligte den til deres hukommelse. Det er dårligt design, fordi det kræver, at brugerne arbejder på forhånd, før de faktisk prøver appen.
Uddanne i forbindelse med handlingen
Når det drejer sig om at lære brugere at bruge dit brugerinterface, vil jeg anbefale at gøre det hovedsageligt ved at uddanne i forbindelse med handlingen (når en bruger rent faktisk har brug for det). For at lære folk en ny gest må man starte langsomt. I betragtning af en vis iteration kan instruktioner omdannes til en mere gradvis opdagelse. Brug lige tidspunkter og fokus på at forklare en enkelt interaktion i stedet for at forsøge at forklare alle mulige handlinger i brugergrænsefladen. Hint ved gestus ved at give indlysende, kontekstuelle spor.
Nedenfor kan du se en gestusuddannelsesskærm fra YouTube-appen til Android. Appen har en gestusbaseret interaktion, men bruger ikke en vejledning til at instruere brugere. I stedet bruger det hints, der vises ved den første lancering til nye brugere, en ad gangen, da brugeren når det relevante afsnit af appen. Teknikken er baseret på tekstkommandoer, der opfordrer brugere til at udføre en gestus og beskriver resultatet af interaktionen med en kort og klar beskrivelse.
Brug animation til at kommunikere gestus
Gange, anvendelige som de er, ville være intet uden animation. Som designer kan du bruge animation til at formidle information om tilgængelige handlinger. For eksempel for at gøre brugerne opmærksomme på, at de kan interagere med et bestemt element, kan du oprette en tekstkommando lige på det interaktive element og animere resultatet af interaktion som vist i eksempel nedenfor.
Der er tre populære teknikker til at hjælpe uddanne brugere, baseret på brug af animation. Den første er en hint bevægelse. Hint-bevægelse eller animeret visuel hint viser et eksempel på, hvordan man interagerer med et element, når handlingen udføres. Det sigter mod at skabe sammenhænge mellem gestus og handling, som den udløser. For eksempel er Pudding Monsters spilmekanik udelukkende baseret på bevægelser, men de giver brugerne mulighed for at få den grundlæggende ide om hvad man skal gøre uden at skulle gætte. Animation formidler information om funktionalitet - et scenario vises med animation, og det bliver straks klart for brugerne, hvad de skal gøre.
En anden teknik er indholdsproblemer. Indholdsfortyndelser er subtile visuelle spor, der angiver, hvad der er muligt. Et eksempel nedenfor viser et indholdsspørgsmål for kort - det viser blot, at der findes andre kort bag et kort, og det gør det klart, at swiping er muligt.
Den tredje og sidste teknik, som jeg gerne vil nævne, er rådgivning. Du kan give nogle elementer i dit brugerinterface en høj fordel for at pege brugerne på funktioner i en grænseflade og bruge bounces eller impulser som indikator for en tilgængelig gestus. Et eksempel på denne teknik findes i Apple iOS. Når en bruger tapper kameraikonet, springer låseskærmen op og afslører kameraets app nedenunder.
Konklusion
Selvom det er sandt, at berøringsbevægelser for det meste er usynlige for os, er der en række designteknikker, der kan give brugerne et kig på hvad der er muligt. Just in time tips, animation cues og indhold teases er nogle af de måder skjulte gestus kan afsløres.