Sådan tilpasses UX til mobil
Så hvad har psykologi at gøre med det? Når det kommer til brugeroplevelse, næsten alt.
Med så mange enhedstyper og -størrelser og så mange forskellige måder at designe hjemmesider på for disse enheder, er brugeroplevelsen, der skabes af designer, det, der afgør den samlede succes af webstedet, og om en bruger vender tilbage.
Hvad er brugerpsykologi?
Brugerpsykologi er videnskaben bag det, folk ønsker og har brug for, når de besøger et websted eller en mobilapp. Psykologi er forankret i alt fra, om en bruger stoler på dit mærke for, hvordan de føler sig om den besked, du forsøger at formidle.
Og design er en stor del af det. Alt fra farve til billeder til mønstre for, hvordan webstedet virker kan påvirke disse følelser og følelsesmæssige forbindelser.
Hvert af disse elementer bør i sidste ende føre til en handling fra brugeren. De fleste psykologi lærebøger refererer udløser, der får folk til at handle og reagere. Disse udløsere gælder også for webdesign og endnu mere specifikt til mobildesign, hvor en bruger næsten altid skal interagere fysisk med et websted for at få noget til at ske, som f.eks. Stryge eller trykke fingrene på skærmen.
- Gendannelse: Hvis du gør noget for brugerne, vil de gøre noget for dig. (De tilmelde sig et nyhedsbrev, du giver dem en freebie.)
- Indramning: Brugerne vil lave sammenligninger mellem tingene. (Ønsker jeg dette eller det? De fleste brugere falder et sted midt i alle muligheder.)
- Salience: Brugere vil have, hvad der betyder noget nu. (Det er derfor, at e-handelswebsteder tilføjer relaterede varer til skærmen under indkøbsoplevelsen.)
- Socialt bevis: Brugerne ser til andre for at se, hvad de skal gøre. (Social mediernes indflydelse.)
- Mangel: Brugere vil have, hvad de ikke kan have. (Begrænset antal genstande.)
- Kontrast: Hvad skiller sig ud i brugerens sind. (Designteori 101.)
To forskellige brugeroplevelser
Mens udløserne er de samme uanset enhed, er brugeroplevelsen ikke. Brugere ønsker overvældende at indholdet er det samme uanset enhed, men har forskellige ideer om, hvordan man bruger og interagerer med det pågældende indhold.
Desktop-websites er til læsning og perusing. Indlæsnings- og informationsindsamlingsprocessen kan resultere i en handling, men brugerne har ofte en særskilt begrundelse for at gå til en hjemmeside, såsom arbejde. Ikke alle disse oplevelser er baseret på underholdning eller fornøjelse, og de fleste af dem er måske ikke.
Desktop brugere er relativt stadig i deres online interaktioner også. Hver handling foregår med et tastatur eller en mus. Der er bare ikke meget fysisk interaktion med enheden. (Få brugere vil altid røre skærmen.)
Brugeroplevelsen til mobil er væsentligt anderledes. Brugere berører hele tiden enheden - kabinettet og skærmen. Så størrelsen på disse elementer og hvordan de føler sig, er ret vigtige. Denne fysiske berøring gør det særligt vigtigt at designe elementer på skærmen, fordi de skal være lette at berøre, i modsætning til desktopversioner, hvor musekliket altid er den samme størrelse.
Brugerne af mobilenheder har ofte adgang til websteder med forskellige hensigter. Underholdnings- eller opgaveudførelsesaktiviteter er mere almindelige end læsnings- og forskningsaktioner. (Tænk bare på hvor ofte du trækker din telefon ud for at spille et spil i kø på købmanden eller svar på en sms.)
Fysiske forskelle påvirker også psykologien i mobildesign. Du skal overveje lysforhold, enhedsstørrelse og touch-muligheder. Hvordan kommer disse elementer sammen for en faktisk bruger?
Brugernes forventninger
Det hele kommer ned på et centralt spørgsmål: Hvad ønsker den mobile bruger og forventer?
I modsætning til desktop-websites, hvor brugere forventer en visuelt dynamisk og engagerende oplevelse, der er forholdsvis todimensionel, vil mobile brugere have alt til at føle sig rigtigt og leve i det tredimensionale rum.
Mobile brugere er kommet til at forvente visse ting fra grænsefladen:
- Hver handling skal tappes. (Og let at se og trykke på.)
- Grafik og billeder skal indlæses hurtigt, og det kan ikke være en del af mobiloplevelsen overhovedet.
- Valg skal være kontekstuelle. Brugere vil vide, hvad der er næste, og hvor de kan gå herfra; de behøver ikke at kende alle mulige muligheder.
- Websites skal integreres med al mobil enhedens funktionalitet, såsom kortlægning, opkald og integration med andre apps.
- Interaktioner skal være lette og følge almindeligt accepterede mønstre. Mobile brugere har næsten nul opmærksomhed span. Hvis elementer ikke virker første gang - og uden megen tanke eller forklaring - er brugeren tabt.
Hvordan man designer det
Den egentlige hemmelighed er at kombinere udløsere og brugernes forventninger; derefter design for dem. Lad os nedbryde et par eksempler på websteder, der gør det godt, og hvordan de kombinerer udløsere og mobile forventninger til en fremragende brugeroplevelse.
Mint
Mint bruger en kortstil-grænseflade, hvor hver boks er et klikbart element i dets mobilappedesign, mens desktopversionen indeholder flere klikstilknytninger. Lys farve og masser af hvidt rum bidrager også til den strømlinede mobile version.
Triggers: Indramning og salience er de vigtigste udløsere her, for som en gratis tjeneste beder mint dig om at tilmelde dig begrænset tilbud på basis af ting, du sandsynligvis tænker på eller har brug for, fra kreditkort til forsikringstilbud.
Mobile forventninger: Mint laster usædvanligt hurtigt med opdaterede brugerdata. Mobilappen dråber mange af de tungere billeder, der vises på skrivebordssiden, og bruger et simpelt vertikalt mønster for brugeren til at spore oplysninger. Det indeholder også nogle gode UX-værktøjer som f.eks. Fingeraftryksadgang på iPhone og intuitiv gestyring for at flytte mellem elementer.
Distiller
Distiller bruger en lydhør ramme, så indholdet ser ud og føles næsten nøjagtigt det samme på både desktop og mobile versioner. Hvad webstedet gør dog maksimerer potentialet i mobilformatet, med unikke måder at navigere på indholdet.
Udløser: Du kan nemt se, hvordan dette websted bruger kontrast til at skabe brugerengagement. Brugen af farve og hvidt mellemrum på begge websidevarianter er designet til at skabe spænding og opfordre til handling. (Se bare på de farvede knapper og fremtrædende placeringer.)
Mobile forventninger: Distiller bruger masser af almindeligt accepterede mønstre for at få brugerne til at engagere sig, med nogle få subtile signaler, bare hvis brugeren måske har brug for hjælp. Kig på den anden mobile skærm, for eksempel: Kortelementerne (som er hver unikke links) kan swiped frem og tilbage for at se mere indhold, og en prikstangslinje bruges til at vise brugerne, hvor mange elementer der er tilbage. Navigationen er også strømlinet betydeligt og skjult i et hamburgerikon, så brugerne ikke overvældes af muligheder og kan bevæge sig frit på mobilstedet.
Vejrkanalen
Vejrkanalen giver nøjagtig det samme indhold på sit skrivebord og mobilapp, men erfaringerne er drastisk forskellige. Desktop-webstedet har flere oplysninger til at læse og se igennem, mens appen fokuserer på, hvad brugeren skal vide nu.
Udløser: Salience (nævnt ovenfor) og socialt bevis er en stor del af, hvad der gør The Weather Channel mobile app anderledes. Åbningsskærmen er vejr hvor brugeren står på dette tidspunkt. Med en fingerflap kan brugerne rapportere om forhold, dele på sociale medier og blive en del af det velkendte mærkes vejrhistorie.
Mobile forventninger: App'en bruger et moderne, fladt kortdesign, der gør hvert element nemt at trykke på. Der er ingen menu at tale om, fordi hele forudsætningen er kontekstuelle, der fører brugere fra et element til det næste baseret på deres valg.
Domino's Pizza
Domino's Pizza har lavet en stor, offentlig aftale om, hvor let det er at bestille. Og de har ret. Selvom skrivebordssiden har en meget traditionel stemning, bruger appen masser af mobile specifikke brugergrænsefladeværktøjer - som f.eks. Stemmeordre - for at gøre processen let.
Udløser: Gendannelse og indramning er nøglen til købsoplevelsen, med masser af tilbud og muligheder at vælge imellem. Den mobile version husker desuden en brugers præferencer for at gøre processen meget lettere.
Mobile forventninger: Mens Dominos bruger nogle funktioner, der ikke er almindelige blandt disse typer apps, forklares det godt (f.eks. Ordreikonet). Navigation er bygget op kontekstmæssigt, og appen er designet med masser af kontrast og små billeder, der hurtigt indlæses.
Tonight Show
Tonight Show er designet til underholdende brugere på tværs af enheder. Skrivebordet og det reaktive websted, samt appen, alle ser ud og fungerer på samme måde. De mobile muligheder er strømlinet med et vertikalt hierarki, og elementer er nemme at tage for at se.
Udløsere: Som med mange andre underholdningssteder er salighed og socialt bevis det, der holder folk tilbage. Du vil være i viden med, hvad der er varmt og trending, og dette er stedet at finde det.
Mobile forventninger: Et af de store små tricks på mobilwebsite er, at det først spørger brugeren, hvis de vil have appen, som om at sige "vil du have den bedste oplevelse, vi har at tilbyde?" Dette er et godt værktøj, som brugere er kommet til at forvente. Det er let at finde appen, fordi det kun er et tryk væk, og brugerne behøver ikke at lede efter noget. det er okay der foran dem.
Konklusion
De fleste brugere ønsker og forventer at finde det samme indhold på internettet, uanset enhed, men de ønsker ofte, at brugeroplevelsen skal skræddersys til den enhed, de bruger.
Denne enhedsspecifikke brugeroplevelse vil medvirke til at øge brugernes loyalitet og de gode følelser, som de fleste webstedsejere håber, at brugerne føler om dem. Kort sagt, at have et godt skrivebord og erfaring og en god mobil brugeroplevelse er vigtig; de er måske ikke det samme.
Design for brugere ved at optimere, hvordan de føler om, bruger og interagerer med deres enheder.