Hoe UX voor mobiel aan te passen
Wat heeft de psychologie ermee te maken? Als het gaat om gebruikerservaring, bijna alles.
Met zoveel apparaattypen en -formaten en zo veel verschillende manieren om websites voor die apparaten te ontwerpen, bepaalt de gebruikerservaring die een ontwerper maakt, wat het algehele succes van de site is en of een gebruiker zal terugkeren.
Wat is gebruikerspsychologie?
Gebruikerspsychologie is de wetenschap achter wat mensen willen en nodig hebben wanneer ze een website of mobiele app bezoeken. Psychologie is geworteld in alles, van of een gebruiker jouw merk vertrouwt en hoe ze denken over de boodschap die je probeert over te brengen.
En design is daar een groot deel van. Alles, van kleuren tot afbeeldingen en patronen tot hoe de site werkt kan impact hebben die gevoelens en emotionele connecties.
Elk van deze elementen zou uiteindelijk moeten leiden tot een actie van de gebruiker. De meeste psychologieboeken verwijzen naar triggers die ervoor zorgen dat mensen handelen en reageren. Die triggers zijn ook van toepassing op webdesign, en meer in het bijzonder op mobiel ontwerp, waarbij een gebruiker bijna altijd fysiek moet communiceren met een website om iets te laten gebeuren, zoals het vegen of tikken van vingers op het scherm.
- Reciprocation: als je iets doet voor gebruikers, zullen ze iets voor je doen. (Ze schrijven zich in voor een nieuwsbrief, je geeft ze een freebie.)
- Framing: gebruikers zullen vergelijkingen maken tussen dingen. (Wil ik dit of dat? De meeste gebruikers vallen ergens in het midden van alle opties.)
- Salience: gebruikers willen wat er nu toe doet. (Dat is de reden waarom e-commerce websites gerelateerde items toevoegen aan het scherm tijdens de winkelervaring.)
- Sociaal bewijs: gebruikers kijken naar anderen om te zien wat ze moeten doen. (De invloed van sociale media.)
- Schaarste: gebruikers willen wat ze niet kunnen hebben. (Beperkt aantal items.)
- Contrast: wat opvalt in de geest van de gebruiker. (Ontwerptheorie 101.)
Twee verschillende gebruikerservaringen
Hoewel de triggers hetzelfde zijn, ongeacht het apparaat, is de gebruikerservaring dat niet. Gebruikers willen op een overweldigende manier dat de inhoud hetzelfde is, ongeacht het apparaat, maar hebben verschillende ideeën over het gebruik en de interactie met die inhoud.
Desktop-websites zijn bedoeld voor lezen en doorlezen. Het lees- en informatieverzamelingsproces kan resulteren in een actie, maar gebruikers hebben vaak een duidelijke reden om naar een website te gaan, zoals werk. Niet al deze ervaringen zijn gebaseerd op entertainment of plezier en de meesten misschien niet.
Desktopgebruikers zijn relatief ook nog steeds in hun online interacties. Elke actie wordt gedaan met een toetsenbord of muis. Er is gewoon niet veel fysieke interactie met het apparaat. (Weinig gebruikers zullen ooit het scherm aanraken.)
De gebruikerservaring voor mobiel is aanzienlijk anders. Gebruikers raken voortdurend het apparaat aan - behuizing en scherm. Dus de grootte van deze elementen en hoe ze zich voelen zijn vrij belangrijk. Dit gebruik van fysieke aanraking maakt het ontwerpen van elementen op het scherm vooral belangrijk, omdat ze gemakkelijk aan te raken zijn, in tegenstelling tot desktopversies waar de muisklik altijd dezelfde grootte heeft.
Gebruikers van mobiele apparaten hebben vaak toegang tot websites met verschillende intenties. Activiteiten voor het voltooien van activiteiten of taken komen vaker voor dan lees- en onderzoeksacties. (Denk er maar aan hoe vaak je je telefoon uittrekt om een spelletje in de rij bij de supermarkt te spelen of reageert op een sms-bericht.)
Fysieke verschillen hebben ook invloed op de psychologie van mobiel ontwerpen. Je moet rekening houden met lichtomstandigheden, apparaatgrootte en aanraakmogelijkheden. Hoe komen deze elementen samen voor een echte gebruiker?
Verwachtingen van de gebruiker
Het komt allemaal neer op een centrale vraag: wat wil en verwacht de mobiele gebruiker?
In tegenstelling tot desktopwebsites, waar gebruikers een visueel dynamische en aantrekkelijke ervaring verwachten die relatief tweedimensionaal is, willen mobiele gebruikers dat alles echt voelt en in de driedimensionale ruimte leeft.
Mobiele gebruikers verwachten bepaalde dingen van de interface:
- Elke actie moet tappable zijn. (En gemakkelijk te zien en tikken.)
- Afbeeldingen en afbeeldingen moeten snel worden geladen en maken mogelijk helemaal geen deel uit van de mobiele ervaring.
- Opties moeten contextueel zijn. Gebruikers willen weten wat de toekomst biedt en waar ze naartoe kunnen gaan; ze hoeven niet elke mogelijke optie te kennen.
- Websites moeten integreren met alle mobiele apparaatfunctionaliteit, zoals mapping, bellen en integratie met andere apps.
- Interacties moeten gemakkelijk zijn en algemeen aanvaarde patronen volgen. Mobiele gebruikers hebben bijna geen aandachtsspanne. Als elementen de eerste keer niet werken - en zonder veel nadenken of uitleg - is de gebruiker verloren.
Hoe het te ontwerpen
Het echte geheim is het combineren van triggers en gebruikersverwachtingen; ontwerp dan voor hen. Laten we een paar voorbeelden van sites opsommen die dit goed doen en hoe ze triggers en mobiele verwachtingen combineren voor een uitstekende gebruikerservaring.
Munt
Munt maakt gebruik van een kaart-achtige interface waarbij elke doos een klikbaar element is in het ontwerp van zijn mobiele app, terwijl de desktopversie meer klik-achtige koppelingen bevat. Heldere kleuren en veel witte ruimte dragen ook bij aan de gestroomlijnde mobiele versie.
Triggers: framing en opvallendheid zijn hier de belangrijkste triggers, want als gratis service vraagt mint je om je aan te melden voor tijdelijke aanbiedingen op basis van dingen die je waarschijnlijk denkt of nodig hebt, van creditcard tot verzekeringsaanbiedingen.
Mobiele verwachtingen: Mint laadt uitzonderlijk snel met up-to-date gebruikersgegevens. De mobiele app verwijdert veel van de zwaardere afbeeldingen die op de desktopsite verschijnen en gebruikt een eenvoudig verticaal patroon voor de gebruiker om informatie bij te houden. Het bevat ook een aantal leuke UX-tools zoals toegang tot de thumbprint op de iPhone en intuïtieve gebarencontrole om tussen elementen te bewegen.
distillateur
distillateur maakt gebruik van een responsief framework, zodat de inhoud er bijna hetzelfde uitziet en aanvoelt op zowel de desktopversie als de mobiele versie. Wat de site echter doet, is het potentieel van het mobiele formaat maximaliseren, met unieke manieren om door de inhoud te navigeren.
Triggers: u kunt gemakkelijk zien op welke manier deze site contrast gebruikt om gebruikersbetrokkenheid te creëren. Het gebruik van kleur en witruimte in beide websitevarianten is ontworpen om opwinding te creëren en aansporing tot actie aan te moedigen. (Kijk maar naar de felgekleurde knoppen en prominente plaatsingen.)
Mobiele verwachtingen: Distiller maakt gebruik van veel algemeen geaccepteerde patronen om gebruikers te betrekken, met een paar subtiele aanwijzingen voor het geval de gebruiker mogelijk hulp nodig heeft. Kijk bijvoorbeeld naar het tweede mobiele scherm: de kaartachtige elementen (die elk unieke links zijn) kunnen heen en weer worden geschoven om meer inhoud te zien en een streepjesbalk wordt gebruikt om gebruikers te laten zien hoeveel elementen er nog over zijn. De navigatie is ook aanzienlijk gestroomlijnd en verborgen in een hamburgersymbool, zodat gebruikers niet overweldigd worden door opties en zich vrij kunnen bewegen op de mobiele site.
Het weerkanaal
Het weerkanaal biedt exact dezelfde inhoud op de desktopsite en mobiele app, maar de ervaringen zijn drastisch anders. De desktop-site heeft meer informatie om te lezen en te bekijken, terwijl de app zich richt op wat de gebruiker nu moet weten.
Triggers: Salience (hierboven genoemd) en sociaal bewijs vormen een groot deel van wat de mobiele app van The Weather Channel anders maakt. Het beginscherm is het weer waarbij de gebruiker op dit moment staat. Met een vingerbeweging kunnen gebruikers voorwaarden rapporteren, delen op sociale media en onderdeel worden van het weerbericht van het bekende merk.
Mobiele verwachtingen: de app maakt gebruik van een modern, plat, kaart-achtig ontwerp om elk element eenvoudig te tappen. Er is geen menu om van te spreken, omdat het hele uitgangspunt contextueel is, waardoor gebruikers van het ene element naar het andere gaan op basis van hun keuzes.
Domino's Pizza
Domino's Pizza heeft een grote, openbare deal gemaakt over hoe gemakkelijk het is om te bestellen. En ze hebben gelijk. Hoewel de desktopsite een zeer traditioneel gevoel heeft, gebruikt de app tal van mobielspecifieke gebruikersinterfacetools, zoals spraakopdrachten, om het proces eenvoudig te maken.
Triggers: reciprocessen en framing zijn de sleutels tot de koopervaring, met tal van aanbiedingen en opties om uit te kiezen. Bovendien onthoudt de mobiele versie de voorkeuren van een gebruiker om het proces zo veel gemakkelijker te maken.
Mobiele verwachtingen: hoewel Domino's sommige functies gebruikt die niet gebruikelijk zijn bij dit soort apps, wordt dit goed uitgelegd (zoals het pictogram voor spraakopdrachten). Navigatie is contextueel opgebouwd en de app is ontworpen met veel contrast en kleine afbeeldingen die snel worden geladen.
De Tonight Show
De Tonight Show is ontworpen voor het entertainen van gebruikers op verschillende apparaten. De desktop en responsieve site, evenals de app, zien er allemaal hetzelfde uit en functioneren op dezelfde manier. De mobiele opties zijn gestroomlijnd met een verticale hiërarchie en elementen kunnen gemakkelijk worden bekeken.
Triggers: net als bij veel andere entertainmentwebsites, zorgen salience en sociaal bewijs ervoor dat mensen blijven terugkomen. Je wilt op de hoogte zijn van wat heet en populair is en dit is de plek om het te vinden.
Mobiele verwachtingen: een van de grote kleine trucs op de mobiele site is dat deze de gebruiker eerst vraagt of hij de app wil, alsof hij wil zeggen "wil je de beste ervaring die we te bieden hebben?" Dit is een geweldige tool voor gebruikers zijn gaan verwachten. Het is gemakkelijk om de app te vinden, want deze is slechts één tik verwijderd en gebruikers hoeven nergens naar op zoek te zijn; het is goed daar voor hen.
Conclusie
De meeste gebruikers willen en verwachten dezelfde inhoud van de website te vinden, ongeacht het apparaat, maar ze willen vaak dat de gebruikerservaring wordt afgestemd op het apparaat dat ze gebruiken.
Deze apparaatspecifieke gebruikerservaring zal helpen de loyaliteit van gebruikers te vergroten en de goede gevoelens die de meeste website-eigenaren hopen dat gebruikers over hen voelen. Simpel gezegd, het hebben van een goede desktop en ervaring en een goede mobiele gebruikerservaring is belangrijk; ze zijn misschien niet hetzelfde.
Ontwerpen voor gebruikers door te optimaliseren hoe zij over hun apparaten denken, deze gebruiken en gebruiken.