Hur man anpassar UX för mobil

Så vad har psykologi att göra med det? När det gäller användarupplevelse, nästan allt.

Med så många typer av enheter och storlekar och så många olika sätt att designa webbplatser för de här enheterna, är användarupplevelsen som skapas av en design som bestämmer övergripande framgång för webbplatsen och huruvida en användare kommer tillbaka.

Vad är användarpsykologi?

Användarpsykologi är vetenskapen bakom vad folk vill ha och behöver när de besöker en webbplats eller mobilapp. Psykologi är förankrad i allt från huruvida en användare litar på ditt varumärke för hur de känner till det budskap du försöker förmedla.

Och design är en stor del av det. Allt från färg till bilder till mönster för hur webbplatsen fungerar kan påverka dessa känslor och känslomässiga samband.

Vart och ett av dessa element borde leda till en åtgärd från användaren. De flesta psykologiska läroböcker hänvisar till triggers som gör att människor kan agera och reagera. Dessa utlösare gäller även webbdesign, och ännu mer speciellt för mobildesign, där en användare nästan alltid måste fysiskt interagera med en webbplats för att få något att hända, till exempel att dra eller knacka på fingrarna på skärmen.

Sammanfogning: Om du gör något för användare, kommer de att göra något för dig. (De anmäler sig till ett nyhetsbrev, du ger dem en freebie.)
Inramning: Användarna gör jämförelser mellan saker. (Vill jag ha det här eller det? De flesta användare faller någonstans mitt i alla alternativ.)
Salience: Användare vill ha det som är viktigt nu. (Det är därför som e-handelswebbplatser lägger till relaterade objekt på skärmen under shoppingupplevelsen.)
Socialt bevis: Användarna tittar på andra för att se vad de ska göra. (Inverkan av sociala medier.)
Brist: Användare vill ha vad de inte kan ha. (Begränsat antal objekt.)
Kontrast: Vad står ut i användarens sinne. (Designteori 101.)

Två olika användarupplevelser

Medan triggarna är desamma oberoende av enheten är användarupplevelsen inte. Användare vill överväldigt att innehållet är detsamma oavsett enhet, men har olika idéer om hur man använder och interagerar med det innehållet.

Skrivbordswebbplatser är avsedda för läsning och perusing. Läsning och insamling av information kan resultera i en åtgärd, men användare har ofta en tydlig anledning till att gå till en webbplats, till exempel arbete. Inte alla dessa erfarenheter är baserade på underhållning eller nöje och de flesta av dem kanske inte är.

Stationära användare är fortfarande relativt kvar i sina online-interaktioner. Varje åtgärd görs med ett tangentbord eller en mus. Det finns bara ingen fysisk interaktion med enheten. (Få användare kommer någonsin att peka på skärmen.)

Användarupplevelsen för mobil är väsentligt annorlunda. Användare berör hela tiden enheten - höljet och skärmen. Så storleken på dessa element och hur de känner är ganska viktiga. Denna fysiska beröring gör det speciellt viktigt att designa element på skärmen, eftersom de måste vara lätta att röra, till skillnad från skrivbordsversioner där musklicket alltid är lika stort.

Användare av mobila enheter får ofta tillgång till webbplatser med olika intentioner. Underhållnings- eller uppdragsaktiviteter är vanligare än läsnings- och forskningsåtgärder. (Tänk bara på hur ofta du drar ut telefonen för att spela ett spel i raden i mataffären eller svara på ett textmeddelande.)

Fysiska skillnader påverkar också psykologin för mobil design. Du måste överväga ljusförhållanden, enhetstorlek och beröringsalternativ. Hur kommer dessa element tillsammans för en verklig användare?

Användarens förväntningar

Allt kommer ner till en central fråga: Vad vill mobilanvändaren och förvänta sig?

Till skillnad från med skrivbordswebbplatser, där användare förväntar sig en visuellt dynamisk och engagerande upplevelse som är relativt tvådimensionell, vill mobila användare att allt ska känna sig riktigt och leva i det tredimensionella rummet.

Mobila användare har kommit att förvänta sig vissa saker från gränssnittet:

Varje åtgärd måste vara tappable. (Och lätt att se och knacka på.)
Grafik och bilder ska laddas snabbt och kanske inte vara en del av mobilupplevelsen alls.
Alternativ måste vara kontextuella. Användare vill veta vad som är nästa och var de kan gå härifrån De behöver inte veta alla möjliga alternativ.
Webbplatser måste integreras med all mobilenhetsfunktionalitet, t.ex. kartläggning, samtal och integration med andra appar.
Interaktioner måste vara enkla och följa allmänt accepterade mönster. Mobila användare har nästan noll uppmärksamhet span. Om elementen inte fungerar första gången - och utan mycket tanke eller förklaring - är användaren förlorad.

Hur man utformar det

Den verkliga hemligheten kombinerar triggers och användarens förväntningar. sedan design för dem. Låt oss bryta ner några exempel på webbplatser som gör det bra och hur de kombinerar triggers och mobila förväntningar för en utmärkt användarupplevelse.

Mynta

Mynta använder ett gränssnitt i kortstil där varje låda är ett klickbart element i sin mobilappdesign medan skrivbordsversionen innehåller fler klicklänkar. Ljus färg och gott om vitt utrymme bidrar också till den strömlinjeformade mobilversionen.

Triggers: Framing och salience är de viktigaste triggarna här, för som en kostnadsfri tjänst begär mint dig att anmäla dig till begränsade tidserbjudanden baserat på saker du troligen tänker på eller behöver, från kreditkort till försäkringserbjudanden.

Mobila förväntningar: Mintbelastningar är exceptionellt snabba med aktuell användardata. Den mobila appen släpper många av de tyngre bilderna som visas på skrivbordet och använder ett enkelt vertikalt mönster för användaren att spåra information. Det innehåller också några fina UX-verktyg, till exempel åtkomst till tummarna på iPhone och intuitiv gestkontroll för att flytta mellan element.

Destillator

Destillator använder en responsiv ram så att innehåll ser ut och känns nästan exakt detsamma på både skrivbordet och mobilversionerna. Vad webbplatsen gör är dock att maximera potentialen i mobilformatet, med unika sätt att navigera i innehållet.

Utlösare: Du kan enkelt se hur denna webbplats använder kontrast för att skapa användarengagemang. Användningen av färg och vitt utrymme i båda webbsidevariationerna är utformat för att skapa spänning och uppmuntra samtal till handling. (Se bara på de ljust färgade knapparna och framträdande placeringar.)

Mobila förväntningar: Distiller använder mycket vanligt accepterade mönster för att få användarna att engagera sig, med några subtila signaler bara om användaren kan behöva hjälp. Titta på den andra mobila skärmen, till exempel: Kortelementen (som är alla unika länkar) kan svepas fram och tillbaka för att se mer innehåll och en prickformatfält används för att visa användarna hur många element som finns kvar. Navigationen är också strömlinjeformad och dold i en hamburgerikon så att användare inte överväldigas av alternativ och kan flytta sig fritt på mobilen.

Väder Kanalen

Väder Kanalen ger exakt samma innehåll på skrivbordssidan och mobilappen, men erfarenheterna är drastiskt annorlunda. Skrivbordssidan har mer information att läsa och titta igenom, medan appen fokuserar på vad användaren behöver veta nu.

Utlösare: Salience (nämnd ovan) och socialt bevis är en stor del av vad som gör Weather Mobile mobilapp annorlunda. Öppningsskärmen är väder där användaren står vid den här tiden. Med ett fingeravtryck kan användarna rapportera förhållanden, dela på sociala medier och bli en del av det välkända varumärkets väderhistoria.

Mobila förväntningar: Appen använder en modern, platt kortdesign för att göra varje element lätt att knacka på. Det finns ingen meny att tala om eftersom hela premissen är kontextuell, vilket leder användare från ett element till nästa baserat på deras val.

Dominos Pizza

Dominos Pizza har gjort en stor, offentlig affär om hur lätt det är att beställa. Och de har rätt. Medan skrivbordssidan har en mycket traditionell känsla, använder appen massor av mobila specifika användargränssnittsverktyg - till exempel röstorder - för att göra processen lätt.

Utlösare: Reciprocation och framställning är nyckeln till köpupplevelsen, med massor av erbjudanden och alternativ att välja mellan. Dessutom minns den mobila versionen av användarens inställningar för att göra processen så lättare.

Mobila förväntningar: Medan domino använder vissa funktioner som inte är vanliga bland dessa typer av appar, förklaras det bra (till exempel ikonen för röstordning). Navigation är inbyggd i kontextuellt och appen är designad med mycket kontrast och små bilder som laddas snabbt.

Tonight Show

Tonight Show är utformad för underhållande användare över enheter. Skrivbordet och den lyhörda webbplatsen, liksom appen, alla ser ut och fungerar på samma sätt. De mobila alternativen är strömlinjeformade med en vertikal hierarki och element är lätta att ta för att titta på.

Triggers: Som med många andra nöjesställen är salience och socialt bevis det som håller folk tillbaka. Du vill vara medveten om vad som är varmt och trending och det här är platsen att hitta den.

Mobila förväntningar: En av de stora lilla tripparna på mobilplatsen är att den först frågar användaren om de vill ha appen, som om man vill säga "vill du ha den bästa upplevelsen vi har att erbjuda?" Detta är ett bra verktyg som användare har kommit att förvänta sig. Det är lätt att hitta appen eftersom det bara är en knapptryckning och användarna behöver inte leta efter någonting. Det är okej där framför dem.

Slutsats

De flesta användare vill ha och förväntar sig att hitta samma webbplatsinnehåll oavsett enhet, men de vill ofta att användarupplevelsen ska skräddarsys för den enhet de använder.

Denna enhetsspecifika användarupplevelse kommer att bidra till att öka användarlojaliteten och de goda känslorna som de flesta webbplatsägare hoppas att användarna känner för dem. Enkelt uttryckt är det viktigt att ha en bra skrivbord och erfarenhet och en bra mobilanvändarupplevelse. de kanske inte är samma sak.

Design för användare genom att optimera hur de känner, använder och interagerar med sina enheter.

responsiv design