Sign2Pay
Eenmalig doneren.
UXD
Opdrachtgever: HU – WNF
Jaar: 2015
Opdracht
“Ontwikkel een mobiel platform voor het Wereld Natuur Fonds (WNF) die het mogelijk maakt om op een eenvoudige manier geld te doneren.”
Voor mijn studie mocht ik, samen met nog twee studenten, voor het Wereld Natuur Fonds (WNF) een mobiel platform ontwikkelen die het mogelijk maakt om op een eenvoudige manier geld te doneren. Ik was verantwoordelijk voor o.a. de visualisatie van de schermen en het klikbaar maken van het prototype (in Marvel).
1
2
3
4
5
6
1
Spark trigger
De afbeeldingen in onze mobiele toepassing dienen als spark triggers. Deze spelen in op de motivatie van de gebruiker. We spelen hiermee tevens in op de core motivation Hope vs. Fear.
Mental Note: Affect Heuristic
Emoties bepalen voor een groot gedeelte ons gedrag. De vraag is hoe je in jouw design dusdanig de emoties van de gebruiker kunt sturen om het gewenste gedrag te behalen. Een goede eerste indruk van onze mobiele toepassing kan ervoor zorgen dat foutjes in het verdere proces van de mobiele toepassing ‘vergeven’ worden, omdat de eerste indruk zo goed was. Door het gebruik van kwalitatieve en representatieve foto’s van dieren, willen we inspelen op de emotie van de gebruiker. We willen hen laten zien wat voor prachtige dieren er op de wereld leven en dat we er alles aan moeten doen om deze te behouden. Ook moet de manier van doneren dusdanig gemakkelijk zijn dat deze voor een positieve ervaring zal zorgen van onze gebruikers.
Mental Note: Aestetic-Usabilty Effect
Smaakvolle designs werken beter, althans gebruikers ervaren mooie design als makkelijker in gebruik. Vaak is het ook zo dat een smaakvol design ook een betere usability heeft.
Onze visualisatie is gebaseerd op de huisstijl van WWF Together. Het WWF heeft met deze huisstijl meerdere design-awards gewonnen, waardoor we kunnen stellen dat dit design als mooi en goed wordt ervaren. Of dit ook automatisch betekent dat onze mobiele toepassing gebruiksvriendelijk is, dienen we een usabilitytest uit te voeren.
2
Betaalmethode
Ability
De mogelijkheid om zelf een bedrag in te vullen speelt in op ability. De gebruikers kunnen zelf een bedrag kiezen dat zij gemakkelijk kunnen missen.
Mental Note: Autonomy
De mens heeft de behoefte om zelf zijn/haar keuzes te maken. Mensen vinden het fijn om controle over iets of invloed op iets te hebben. Welke opties kun je de gebruiker bieden om dat gevoel van controle te geven? Wij hebben er voor gekozen om de gebruiker zelf een bedrag te laten kiezen die zij willen doneren aan het WNF. Daarnaast willen we hen ook de mogelijkheid bieden om voor een betalingsmogelijkheid te kiezen die bij hen past.
Mental Note: Peak-End-Rule
Mensen hebben de neiging om een hele ervaring te beoordelen op de hoogtepunten , dieptepunten en/ of laatste fases van het proces. Voor een ontwerp moet je nagaan wat de hoogtepunten en eindes zijn van jouw ontwerp. Door deze hoogtepunten en eindes van processen te verbeteren, kun je de gebruikerservaring van jouw product verbeteren en ervoor zorgen dat gebruiker een goed beeld heeft van jouw product.
Hoogtepunten in onze mobiele toepassingen zijn het gemakkelijk kunnen doneren, het betalen via Sign2Pay en de transparantie over waar de gedoneerde euro is gebleven. De laatste stap in het doneer- proces is het klikken op de ‘Doneer’-knop. We moeten er daarom voor zorgen dat deze elementen zo goed mogelijk werken.
Design pattern: Fill-in-the-Blanks
Op de doneer-pagina’s hebben we gebruik gemaakt van de pattern Fill-in-the-Blanks. We hebben er namelijk voor gekozen om de betaalmethode alvast voor de gebruiker in te vullen met Sign2Pay. Doordat we het al voor hebben gedaan, weet de gebruiker hoe deze stap ingevuld dient te worden. Door op de betaalmethode te klikken, kan de gebruiker uit gegeven betaalmethoden kiezen.
3
Doneer
Mental Note: Authority
Mensen hebben de behoefte om (het advies van) een autoriteit te volgen. Mensen zijn op zoek naar begeleiding en de juiste richting. Als ontwerper moet je je afvragen hoe goed je de gebruiker door de website heen leidt. De stappen van het doneren moeten zo duidelijk mogelijk zijn. Daarom hebben we gebruik gemaakt van een verticale flow, waarbij de prominent ‘done’ button onderaan is geplaatst. Hierdoor zal het oog van de gebruiker over de opties om een bedrag in te vullen en een betaalmogelijkheid te kiezen vallen en zal duidelijk worden welke stappen ondernomen dienen te worden om een donatie te doen.
Design pattern: Generous Borders
Bij mobiele interfaces is het belangrijk dat knoppen en andere klikbare items van genoeg marge en witruimte worden voorzien, zodat de gebruiker gemakkelijk een bepaald item kan aanklikken en niet per ongeluk een ander item aanklikt. De prominent ‘done’ buttons op de pagina’s zijn van voldoende grootte, waardoor het zeer onwaarschijnlijk zal zijn dat de gebruiker mis klikt. De pijltjes en bottom navigation zorgen er voor dat de gebruiker gemakkelijk door de verschillende pagina’s kan navigeren.
4
Sign2Pay
Mental Note: Surprise
Het menselijk brein wordt blij van verassingen die een dagelijkse routine verbreken. Je kunt de aandacht van de gebruiker trekken door iets geheel anders te doen dan het verwachtingspatroon of datgene dat de concurrentie al doet. Wij hebben gekozen voor de betalingsmogelijkheid Sign2Pay. Hierin zijn we onderscheidend t.o.v. de concurrentie. Het zal daarom als verassing komen voor de gebruikers dat zij, door het zetten van een handtekening, kunnen doneren.
5
Informatie
Mental Note: Need for Certainty
De mens heeft behoefte aan zekerheid en is eerder geneigd over te gaan tot actie wanneer die zekerheid er is. De gebruiker voorzien van de juiste informatie is nodig om de gebruiker het gevoel te geven dat hij/zij met vertrouwen een donatie kan doen.
Uit het doelgroeponderzoek is gebleken dat onze doelgroep zich bij het WNF afvraagt waar de gedoneerde euro blijft. Ze hebben behoefte aan een stukje transparantie. Die transparantie willen wij hen bieden door een overzicht te tonen van waar de euro blijft. Het percentage (82%) duidt aan hoeveel van de euro besteedt wordt aan het dier in nood. De wereldbol geeft aan op welk werelddeel de dieren leven waarvoor de gebruiker zich zojuist heeft ingezet. De tekst ondersteunt dit.
6
Navigatie
Mental Note: Chunking
We hebben best veel content om te tonen. Het is handig om deze content te groeperen, zodat onze gebruikers niet het overzicht verliezen. We hebben onze content verdeeld over drie menu-items: informatie over een specifiek dier, doneren en een totaaloverzicht aan dieren waarvoor het WNF zich inzet. Door deze menu-knoppen wordt de informatie gemakkelijker te raadplegen voor de gebruiker. Ook hebben we consistentie aangebracht in onze schermen. De doneer-pagina’s zijn voor ieder dier hetzelfde. Ook de informatie-pagina’s over de neushoorn, tijger en de olifant zijn hetzelfde vormgegeven. Hierdoor is er een zeker patroon te herkennen in onze mobiele toepassing.
Design pattern: Module Tabs
Binnen onze interface heeft de gebruiker de mogelijkheid om te allen tijden te switchen tussen verschillende menu-items. De drie menu-items vormen verschillende tabs, waarbij elke tab afzonderlijk van elkaar te bezichtigen is. We willen veel laten zien, maar hebben hier niet altijd de ruimte voor.
Het gebruiken van tabs maakt het mogelijk om tegelijkertijd een minimale menu-structuur te bieden, waarbij toch alle content getoond kan worden. De gebruiker bekijkt pagina voor pagina en wordt niet geconfronteerd met alle content op dezelfde tijd.
Design pattern: Bottom Navigation
Onderaan de interface vindt de gebruiker de bottom navigation. Dit zijn de knoppen ‘Info over specifiek dier’, ‘Doneren’ en ‘Atlas’. Dit zijn de hoofdknoppen van de applicatie en zijn door de gehele applicatie aanklikbaar.
Nieuwe betaalmethode
WNF zag graag dat de donaties m.b.v. een nieuwe betaalmethode overgemaakt konden worden. Er is daarom voor gekozen om de betaalmethode ‘Sign2Pay’ te verwerken in het platform. Met deze methode is het zetten van een handtekening voldoende om een bedrag over te maken. Deze methode staat ook symboliek voor het ondertekenen van een petitie voor het ondersteunen van de bedreigde dieren.
1
2
3
4
1
Informatiepagina
Design pattern: One-Window Drilldown
Wanneer de gebruiker op ‘Illegale handel’ of ‘Verloren grond’ klikt, wordt de gebruiker doorgeleid naar de pagina waar meer informatie over deze twee onderwerpen te lezen is. De huidige pagina wordt dus vervangen door een nieuwe pagina, omdat de nieuwe pagina dusdanig veel ruimte in beslag neemt dat deze een eigen pagina vereist. We kunnen nu eenmaal niet alle content op dezelfde pagina kwijt. De gebruiker kan met de terug-knop terugkeren naar de vorige pagina.
2
Typografie
Design pattern: Contrasting Font Weights
Door tenminste twee contrasterende fonts te gebruiken, kun je op een duidelijke manier de verschillen tussen bepaalde informatie laten zien. Daarnaast is het een manier om de verschillende pagina’s te organiseren en om een structuur aan te brengen. We hebben gekozen voor twee fonts: Bebas Neue en Calisto MT.
3
Motion
Design pattern: Animates Transitions
Animated transitions worden onder andere gebruikt wanneer gebruikers van de ene pagina naar een andere pagina navigeren. Zo zullen de pagina’s langzaam naar links verschuiven als de gebruiker op de >-pijltjes klikt. De gebruiker weet op deze manier weet dat hij/zij zojuist is overgestapt naar een andere pagina. De animatie beweegt natuurlijk en soepel, waardoor de gebruiker geen hinder ondervindt van deze overgang.
4
Achtergrond
Design pattern: Deep Background
Op alle pagina’s wordt gebruik gemaakt van een Deep Background. De onderste laag van de pagina’s is opgebouwd vanuit een licht grijze low-poly design. Daar overheen zijn, in de ‘communicatielaag’, de foto’s, tekst en buttons geplaatst. Door het werken met een Deep Background ontstaat er diepte in de interface.
Geen verplichtingen
Binnen het platform kunnen gebruikers meer informatie over een bedreigd diersoort vinden. Het is voor de gebruiker mogelijk om per diersoort een donatie te doen, waarbij ook het gewenste bedrag door de gebruiker kan worden gekozen. De gebruiker kan dan overgaan tot het eenmalig doneren. Geen poespas, geen verplichtingen.
Meer weten over dit project?
Neem contact op.