Shahab Sherafati
Geplaatst in: Food for thought

UX mobile design patterns

augustus 27, 2020

Deze UX georiënteerde mobile design patterns MOET je overwegen bij je volgende iteratie

UX is de reden waarom de hele wereld weet hoe een digitaal scherm aangestuurd moet worden. We kunnen en willen steeds meer doen met onze mobieltjes. Dat is zeer fascinerend maar brengt tegelijkertijd het gevaar met zich mee dat we door de bomen het bos niet meer zien. Ontwerpers moeten, desondanks dat technologie steeds meer toelaat, waken voor simplicity en consistency in hoe mensen hun smartphone gebruiken. Want alleen op die manier kunnen we de gebruiker mee laten groeien met de technologie, zonder bepaalde doelgroepen te moeten uitsluiten. Dit heet inclusive design. Deze, maar ook een aantal andere onmisbare patterns, wil ik graag met jullie delen in dit artikel.

1. One Handed Usage

One handed usage is een bekend begrip in UX landschap. Het is een design pattern die onmisbaar is geworden in de huidige trend waarin smartphones steeds groter en groter worden.

Toen Steve Jobs in 2007 de allereerste iPhone introduceerde noemde hij, als één van zijn belangrijkste ontwerpkeuzes, dat het toestel ten allen tijde met één hand bediend moet kunnen  worden. De meningen hierin zijn verdeeld, maar we kunnen niet ontkennen dat we al lang geleden van zijn ideologie zijn afgestapt. Dit kun je zelf uittesten. Pak je telefoon op zoals je hem altijd in één hand zou vasthouden en probeer, zonder te schuiven met je hand, het volledige oppervlak van je scherm te benaderen met je duim. Tenzij je een bovengemiddeld formaat hand hebt gaat dit je niet lukken. Dit brengt ons bij het volgende principe:

Het groene oppervlak is de neutrale zone. Hier kun je gemakkelijk bij met je duim. Geel wordt al een beetje ongemakkelijk en wil je het liefste zo min mogelijk naartoe bewegen. Rood is een oppervlak waar je niet bij kunt zonder je hand te bewegen. De laatste plek op het scherm waar je een “bestel nu” knop wilt plaatsen.

Het is ons allemaal vanzelfsprekend dat een toetsenbord altijd in het onderste gedeelte van je scherm verschijnt en dat de navigatie van een mobiele app bijna altijd onderaan gepositioneerd is. Nu begrijp je waarom!

Mobile

2. Inclusive Design

Je mobiele applicatie, maar ook je website, wil je ten alle tijde inclusief maken. Dit betekent dat je rekening wilt houden met alle mogelijke gebruikersgroepen zodat iedereen dezelfde ervaring kan hebben met jouw product. Hoe doe je dit? Je begint door je gebruiker te leren kennen. Wie zijn het. Wat doen ze. Wat willen ze graag, en wat vinden ze moeilijk? Weet je bijvoorbeeld dat jouw product zich op 45+ers richt? Dan wil je er zeker van zijn ook iemand die zijn leesbril is vergeten je app nog steeds kan gebruiken. Je kan geen wonderen verrichten, maar je kunt bijvoorbeeld wel een font kiezen die ook in kleine puntgroottes alsnog makkelijk leest. Of de gebruiker de tekst laten vergroten met een zoom functie.

3. Pagination 

Stel je voor dat er een onboarding vooraf gaat voordat jouw app voor het eerst gebruikt kan worden. Een goed voorbeeld is de Sonos app, die jou eerst stap voor stap door de installatie van je speakers begeleidt voordat hij werkt. Dit is de meest vervelende maar cruciale gedeelte van je mobiele applicatie. Maak het je gebruikers dan zo makkelijk mogelijk en stel ze gerust dat ze bijna klaar zijn. Bizar simpel maar extreem effectief tructje. Gebruik Pagination:

Dit is de onboarding van een mobiele applicatie die ik twee jaar geleden ontworpen heb. Ik had geen keus en moest de gebruiker cruciale informatie laten lezen voordat de app begon te werken. Zoals je kunt zien ging het om vrij veel informatie. Ik heb Pagination (de herkenbare bolletjes) gebruikt om aan te geven dat het maar 5 stappen zijn. Onbewust motiveert dit om door te lezen. Je kunt namelijk uitsluiten dat het oneindig veel pagina’s zijn waar je doorheen moet. Resultaat? Een lagere bounce rate!

4. Error & Forgiveness

Fouten maken is een onderdeel van de manier waarop mensen leven. Sterker nog, we leren ervan en komen sterker terug. We struikelen wanneer we leren lopen en we drukken op de verkeerde knoppen wanneer we de nieuwe gebruikersinterface leren kennen. Het is zeer onwaarschijnlijk dat dit snel zal veranderen. Als ontwerper wil je dat in gedachten houden. Een digitaal product moet erop gericht zijn fouten te voorkomen of te helpen herkennen nadat een gebruiker de fout in is gegaan. Je product moet tevens de negatieve impact van fouten minimaliseren wanneer ze zich voordoen. Bovendien moet het een manier bieden om de fouten om te keren wanneer ze  plaatsvinden. Hoe ziet dat er uit in het dagelijks leven?

Je wilt een wekker zetten. Het laatste wat mag gebeuren is dat je je verslaapt. Schuiver naar links of rechts? Wat is logisch en wie heeft dat bepaald? Met dit design principe wil je terug naar de basis van hoe de wereld werkt en hoe ons brein daarop ingesteld is. Bij groen licht steken we een kruispunt over en denken we in het algemeen aan een positief signaal. Daar tegenover voelt grijs als afstotend. Zo zie je in de voorbeeld rechts dat je aan en uit een stuk makkelijker te begrijpen zijn door hun kleur. Zou het voor jou net zo voor de hand liggend zijn als het voorbeeld rechts niet gekleurd was?

Een andere, zeer herkenbare, forgiveness pattern is de “are you sure” pop up. Misschien heb je wel per ongeluk op het kruisje gedrukt of was het niet per ongeluk, maar bedenk je je nu wel dat je toch nog even terug wilt naar waar je gebleven was. Wees eens eerlijk. Hoe vaak dat je overkomen? Hoeveel bounces zouden we hiermee kunnen voorkomen en hoe zou die de conversies beïnvloeden?