Slik tilpasser du UX for mobil
Så hva har psykologi å gjøre med det? Når det gjelder brukeropplevelse, nesten alt.
Med så mange enhetstyper og -størrelser og så mange forskjellige måter å designe nettsteder for disse enhetene, er brukeropplevelsen en skaper av design som bestemmer total suksess på nettstedet, og om en bruker kommer tilbake.
Hva er brukerpsykologi?
Brukerpsykologi er vitenskapen bak det folk ønsker og trenger når de besøker et nettsted eller en mobilapp. Psykologi er forankret i alt fra hvorvidt en bruker stoler merkevaren på hvordan de føler seg om meldingen du prøver å formidle.
Og design er en stor del av det. Alt fra farge til bilder til mønstre for hvordan nettstedet fungerer kan påvirke de følelsene og følelsesmessige forbindelser.
Hvert av disse elementene skal i siste instans føre til en handling fra brukeren. De fleste psykologi lærebøker referanse utløser som får folk til å handle og reagere. Disse utløsere gjelder også for webdesign, og enda mer spesielt for mobildesign, hvor en bruker nesten alltid må samhandle fysisk med et nettsted for å få noe til å skje, for eksempel sveip eller trykk fingrene på skjermen.
- Gjenvinning: Hvis du gjør noe for brukere, vil de gjøre noe for deg. (De registrerer seg for et nyhetsbrev, du gir dem en freebie.)
- Innramming: Brukerne vil gjøre sammenligninger mellom ting. (Ønsker jeg dette eller det? De fleste brukere faller et sted midt i alle alternativene.)
- Salience: Brukerne vil ha det som betyr noe nå. (Det er derfor e-handelswebsteder legger til relaterte elementer på skjermen under shoppingopplevelsen.)
- Sosialt bevis: Brukerne ser til andre for å se hva de skal gjøre. (Påvirkningen av sosiale medier.)
- Skarphet: Brukere vil ha det de ikke kan ha. (Begrenset antall elementer.)
- Kontrast: Det skiller seg ut i brukerens sinn. (Designteori 101.)
To forskjellige brukeropplevelser
Mens utløserne er de samme uavhengig av enheten, er brukeropplevelsen ikke. Brukere vil overveldende ha innholdet til å være det samme uansett enhet, men har forskjellige ideer om hvordan man bruker og samhandler med det innholdet.
Stasjonære nettsteder er for lesing og perusing. Lese- og innsamlingsprosessen kan føre til en handling, men brukerne har ofte en klar grunn til å gå til et nettsted, for eksempel arbeid. Ikke alle disse opplevelsene er basert på underholdning eller glede, og de fleste av dem kan ikke være.
Desktop-brukere er relativt fortsatt i deres online-interaksjoner også. Hver handling er utført med et tastatur eller en mus. Det er bare ikke mye fysisk samhandling med enheten. (Få brukere vil alltid berøre skjermen.)
Brukeropplevelsen for mobil er betydelig forskjellig. Brukerne berører alltid enheten - omhylling og skjerm. Så størrelsen på disse elementene og hvordan de føler seg er ganske viktige. Denne bruken av fysisk berøring gjør det spesielt viktig å designe elementer på skjermen, fordi de må være lette å berøre, i motsetning til desktopversjoner der museklikk alltid har samme størrelse.
Brukerne av mobilenheter får ofte tilgang til nettsteder med ulike hensikter. Underholdning eller oppgavegjennomføring er mer vanlig enn lese- og forskningsaksjoner. (Tenk bare på hvor ofte du trekker ut telefonen din for å spille et spill i kø på matbutikken eller svare på en tekstmelding.)
Fysiske forskjeller påvirker også psykologien i mobildesign. Du må vurdere lysforhold, enhetsstørrelse og berøringsalternativer. Hvordan kommer disse elementene sammen for en faktisk bruker?
Brukerens forventninger
Alt kommer ned til et sentralt spørsmål: Hva ønsker den mobile brukeren og forventer?
I motsetning til desktop-nettsteder, hvor brukere forventer en visuelt dynamisk og engasjerende opplevelse som er relativt todimensjonal, vil mobilbrukere at alt skal føles ekte og leve i det tredimensjonale rommet.
Mobilbrukere har kommet til å forvente visse ting fra grensesnittet:
- Hver handling må være tappable. (Og lett å se og trykke på.)
- Grafikk og bilder bør lastes raskt, og kan ikke være en del av mobilopplevelsen i det hele tatt.
- Valg må være kontekstuell. Brukere vil vite hva som er neste og hvor de kan gå herfra; de trenger ikke å vite alle mulige muligheter.
- Nettsteder må integreres med all mobilenhetsfunksjonalitet, for eksempel kartlegging, samtale og integrasjon med andre apper.
- Interaksjoner må være enkle og følge allment aksepterte mønstre. Mobilbrukere har nesten ingen oppmerksomhetsspenning. Hvis elementene ikke virker første gang - og uten mye tanke eller forklaring - er brukeren tapt.
Hvordan designe den
Den faktiske hemmeligheten er å kombinere utløsere og brukerens forventninger; deretter design for dem. La oss bryte ned noen få eksempler på nettsteder som gjør dette bra, og hvordan de kombinerer utløsere og mobile forventninger til en utmerket brukeropplevelse.
Mint
Mint bruker et kortstil-grensesnitt hvor hver boks er et klikkbart element i sin mobile appdesign, mens desktopversjonen inneholder flere klikkstilkoblinger. Lys farger og rikelig med hvitt mellomrom bidrar også til den strømlinede mobile versjonen.
Utløser: Innramming og salience er nøkkelen utløser her, fordi som en gratis tjeneste krever mynte deg å registrere deg for begrensede tilbud på grunnlag av ting du sannsynligvis tenker på eller trenger, fra kredittkort til forsikringstilbud.
Mobile forventninger: Mint laster svært raskt med oppdatert brukerdata. Mobilappen faller mange av de tyngre bildene som vises på skrivebordssiden, og bruker et enkelt vertikalt mønster for brukeren å spore informasjon. Den inneholder også noen fine UX-verktøy som tommelfingeradgang på iPhone og intuitiv gestkontroll for å flytte mellom elementer.
Distiller
Distiller bruker et responsivt rammeverk slik at innholdet ser ut og føles nesten nøyaktig det samme på både desktop og mobile versjoner. Hva nettstedet gjør, men maksimerer potensialet i mobilformatet, med unike måter å navigere på innholdet.
Utløser: Du kan enkelt se hvordan dette nettstedet bruker kontrast for å skape brukerengasjement. Bruken av farge og hvitt mellomrom på begge websidevarianter er designet for å skape spenning og oppmuntre til handling. (Bare se på de fargerike knappene og fremtredende plasseringer.)
Mobile forventninger: Distiller bruker mange vanlige aksepterte mønstre for å få brukerne til å engasjere seg, med noen få subtile signaler bare hvis brukeren trenger hjelp. Se på den andre mobile skjermen, for eksempel: Kortelementene (som er hver unike koblinger) kan swiped frem og tilbake for å se mer innhold, og en prikkstangslinje brukes til å vise brukerne hvor mange elementer som er igjen. Navigasjonen er også strømlinjeformet betydelig og skjult i et hamburgerikon, slik at brukerne ikke blir overveldet av alternativer og kan bevege seg fritt på mobilnettstedet.
Værkanalen
Værkanalen gir nøyaktig samme innhold på skrivebordssiden og mobilappen, men erfaringene er drastisk forskjellige. Skrivebordssiden har mer informasjon å lese og se gjennom, mens appen fokuserer på hva brukeren trenger å vite nå.
Utløser: Salience (nevnt ovenfor) og sosialt bevis er en stor del av det som gjør The Weather Channel mobilapp annerledes. Åpningsskjermen er vær der brukeren står på dette tidspunktet. Med en fingerpinne kan brukerne rapportere forhold, dele på sosiale medier og bli en del av det velkjente merkets værhistorie.
Mobile forventninger: Appen bruker en moderne, flat, kort stil design for å gjøre hvert element enkelt å trykke. Det er ingen meny å snakke om fordi hele premisset er kontekstuell, som fører brukere fra ett element til det neste basert på deres valg.
Domino's Pizza
Domino's Pizza har gjort en stor, offentlig avtale om hvor lett det er å bestille. Og de har rett. Selv om skrivebordssiden har en veldig tradisjonell følelse, bruker appen mange mobile, spesifikke brukergrensesnittsverktøy - for eksempel taleplanlegging - for å gjøre prosessen enkel.
Utløser: Tilbakegang og innramming er nøkkelen til kjøpsopplevelsen, med mange tilbud og muligheter å velge mellom. I tillegg husker mobilversjonen brukerens preferanser for å gjøre prosessen så mye enklere.
Mobile forventninger: Mens Domino bruker noen funksjonalitet som ikke er vanlig blant disse typer apper, forklares det godt (for eksempel ikonet for talepåordning). Navigasjonen er innebygd i kontekst og appen er designet med mye kontrast og små bilder som lastes raskt.
The Tonight Show
The Tonight Show er designet for underholdende brukere på tvers av enheter. Den stasjonære og lydhøre siden, samt appen, alle ser ut og fungerer på samme måte. De mobile alternativene er strømlinjeformet med et vertikalt hierarki, og elementene er enkle å ta for å se.
Utløser: Som med mange andre underholdningssteder, er salience og sosialt bevis det som holder folk tilbake. Du vil være i vet med det som er varmt og trending, og dette er stedet å finne det.
Mobile forventninger: En av de store, små triksene på mobilnettstedet er at den først spør brukeren om de vil ha appen, som om å si "vil du ha den beste opplevelsen vi har å tilby?" Dette er et flott verktøy som brukere har kommet til å forvente. Det er lett å finne appen fordi det bare er ett trykk unna, og brukerne trenger ikke å lete etter noe. det er greit der foran dem.
Konklusjon
De fleste brukere vil og forventer å finne samme innhold på nettstedet uavhengig av enhet, men de vil ofte at brukeropplevelsen skal skreddersys til enheten de bruker.
Denne enhetsspesifikke brukeropplevelsen vil bidra til å øke brukerlojaliteten og de gode følelsene som de fleste web-eiere håper brukere føler om dem. Enkelt sagt, å ha en god desktop og erfaring og en god mobil brukeropplevelse er viktig; de er kanskje ikke det samme.
Design for brukere ved å optimalisere hvordan de føler om, bruker og samhandler med enhetene sine.