PB
  • Link naar pb
  • Afstudeerproject
  • Interessante begrippen
  • Inleiding
    • Inleiding en persoonlijke focus
    • Planning
    • Afstudeervaardigheden
    • Projectvoorstel en Design Briefs (V1/V2/V3)
  • Ontwerp probleem
    • Design Challenges en deelvragen
    • Probleemsituatie V1 zonder opdrachtgever
    • Probleemsituatie met opdrachtgever V2
  • Stepping Stones
    • Persona(s)
    • Empathy Map
    • Behavioral Plan
    • Stakeholder maps
  • Het onderzoek
    • Opbouw van onderzoek
    • Deskresearch
      • Conclusie & bevindingen
    • Theory of Planned Behavior
    • Zoektocht opdrachtgevers
    • Doelgroep toelichting
    • Best, good & bad practices: Stichtingen
    • Best, good & bad practices: Crowdfundingplatforms
    • Best, good & bad practices
      • Conclusie en bevindingen
    • Interview(s) opdrachtgever
    • Interview met de doelgroep
    • Expert Interviews
      • CBF Diederik van der Plas
      • Rode Kruis: Linda Ten Hage
      • Elise Chung
      • Conclusie & bevindingen
    • Literatuuronderzoek
    • Enquete
    • Focus group (discussion)
    • Programma van Eisen
    • Verschillende bruikbare (design) patterns
    • Investeren in social media
    • Usability Tests: Huidige website Stichting
  • Idee generatie
    • Klassiek brainstormen
    • Brainstormsessie (Maarten)
    • Hoe kun je's (Gitta)
    • Sketching
    • Scenario
    • Mogelijke concepten
    • Feedback Frenzy & groenlicht
  • Conceptualiseren
    • 3x Proof of concept: (Stichtingen, crowdfundingplatforms & Sharethemeal)
    • Flowcharts (V1/V2/V3/V4)
  • Prototyping
    • LoFi prototype
    • Mid-fi Prototype
    • A/B Testen
    • A/B testen: Inkoop rapport data visualisatie
    • Proof of concept: Donatie app testing
    • Proof of concept: Waardering voelen voor bijdrage
    • (zonder)HiFi Prototype
    • HiFi prototype V2.
    • Hifi Prototype V3.
  • Het product
    • Opbouw van het product
    • Vormgeving
    • Ontwerpkeuzes
  • Eindpresentatie
    • De eindpresentatie
    • TO DO
  • Logboek/Zelf reflectie
    • Logboek > reflectie
    • Persoonlijke Reflectie
  • Bronnen
    • Bronnenlijst
  • Workshops
    • Workshop 1
    • Workshop 3
  • Bijlage
    • Miro
    • Gedachtegangen
Powered by GitBook
On this page
  • Testplan
  • Conclusie
  1. Prototyping

HiFi prototype V2.

Opdrachtgever: Stichting Oekraïeners in Nederland

Testplan

Scenario

Je bent iemand die graag wil doneren aan een stichting maar wil deze stichting wel vertrouwen over dat je geld goed terecht komt. Soms zie je wel is advertenties voorbij komen maar je bent niet overtuigt van de meeste. Onder het scrollen op de verhalen van Instagram kom je ad tegen van Stichting Oekraïeners in Nederland. Je bent nieuwsgierig en klikt op de link die wordt aangeboden.

Wat wil ik te weten komen?

  • Ik wil erachter komen of het prototype helder te begrijpen is

  • Of de volgorde van de schermen als logisch aanvoelt

  • Het product als aangenaam wordt ervaren in gebruik. Krijg je als gebruiker het gevoel van eenheid op de app?

  • Zou dit concept een antwoord zijn op mijn design challenge? Missen er nog functionaliteiten?

  • Of de gebruiker nog meer wil dan alleen een bedrag doneren

  • Of het transparant is wat de stichting doet

  • Is het transparant waar je donatie heen gaat

  • Of het overtuigt om een donatie te doen (idealiter meerdere)

Opdrachten en vragen

  1. Dit is de eerste keer op de app, wat ga je doen?

  2. Probeer is uit te zoeken wat er gebeurt met je donatie

  3. Probeer is uit te zoeken hoe je een reward kan halen

  4. Probeer is uit te zoeken waar je de kosten van de stichting terug kan vinden (ter transparantie)

  5. Probeer is een bericht te delen met een vriend(in)

  6. Probeer uit te zoeken of beeldmateriaal kan vinden van wat de stichting in koopt

  7. Ga op zoek naar een weetje/feitje

  8. Ga voor jezelf na of het duidelijk is waar je donatie heen gaat

  9. Ga voor jezelf na of je het een betrouwbare digitale omgeving vindt, waar ligt dat aan?

  10. Ga voor jezelf na of je voor dit platform zou doneren, waar ligt dit aan?

  11. Probeer je vrienden ook stimuleren om te doneren

Profiel: Marketing Designer

Leeftijd: 25

Locatie: Fysiek bij haar thuis

Opname: beschikbaar maar te groot bestand om in dit programma te zetten

Samenvattend

Tijdens de onboarding vond de testpersoon vond dat de tekst niet helemaal lekker liep en toen ze terug wilde kon dit niet omdat de back button ontbrak. Toen ze probeerde uit te zoeken wat er gebeurde met haar donaties kwam ze de uitleg tegen wat ze wilde skippen maar het viel haar niet op dat dit mogelijk was. Vervolgens noemde ze na de animatie over wat er gebeurde met haar geld dat dit erg fijn was maar dat ze voor de donatie ook wel informatie zou willen over deze kosten verdeling. Daarnaast geeft Paypal haar vertrouwen. Als ze een reward wil behalen is het niet duidelijk waar ze dat kan doen, uiteindelijk komt ze er wel. Onder deze opdracht kwam ze de zonnebloem tegen het verhaaltje van de zonnebloem maar dit verhaaltje kon ze eerst niet achter komen. Hier moest ik haar een hint voor geven. Het verhaaltje vind ze erg mooi en triggert haar tot actie.

Wat ging er goed?

  • De bolletjes die in veel bestaande patterns wordt gebruikt werd niet herkent als scroll indicator dus hiervoor is het belangrijk om tekst toe te voegen.

  • Keep users in Control kan verbeterd worden door back buttons toe te voegen

  • Skip button mag opvallender

  • Kosten verdeling mag ook ergens voor de animatie worden laten zien

  • Paypal wordt als betrouwbaar middel gezien doordat dit middel verzekerd is (Veilig online betalen? - Is PayPal veilig? | PayPal NL, z.d.).

  • Als je een reward hebt gehaald, feedback geven over hoe dit terug te vinden is.

  • De perceived affordance was dat er gedrukt kon worden op de bloem want er kon geswiped worden maar dat werd niet gedaan.

  • Het verhaal zou eerder gedeeld worden dan (do you know this story? Many bla bla... Spread this story)

  • De discoverability kan nog een verbeterslag maken omdat het voor de gebruiker nog veel zoeken is. Eventueel een hamburger menu zou hier bij helpen.

Wat ging er minder goed?

  • Zij geeft aan het platform te vertrouwen door de uitstraling, paypal en sympathie is opgewekt. De verzekering van Paypal geeft het meeste stimulans.

  • Er wordt alleen na de donatie sympathie opgewekt door het verhaaltje. Dit zou van te voren ook mooi zijn.

Profiel: Software tester

Leeftijd: 24 jaar

Locatie: Online via Teams

Opname: beschikbaar maar te groot bestand om in dit programma te zetten

Samenvattend

De test persoon begint met de onboarding waar zij het duidelijk vindt wat de stichting doet door de storytelling. Wanneer ze het vinkje ziet, snapt ze dat ze alle informatie heeft gelezen en klikt ze gelijk op donate. Bij de opdracht om een reward te bekijken wilde ze naar 'Profile' gaan. Ze vindt het onduidelijk waar ze precies is door het gebrek aan feedback in de navigatie. Onder het doen van de donatie zou ze de informatie van wat er gebeurt met haar geld ook van te voren willen zien en de animatie die na het doneren komt vindt ze te snel gaan waardoor ze het niet kan lezen. Ze vindt de feedback over dat ze 5 euro had gekozen fijn maar bij de vervolg stap om een payment methode te kiezen wordt er niet begrepen dat er naar beneden gescrollt moet worden. Vervolgens kost het zoeken van een reward veel tijd. Het is niet duidelijk waar de rewards staan ondanks dat het wel stimuleert. De inconsistentie van my flower en your flower zorgt voor verwarring.

Wat ging er goed?

  • De storytelling in de onboarding geeft een duidelijk beeld van wat de stichting doet

  • Perceived affordance van de scroll bolletjes staat gelijk met wat hoe ze er mee interacteerde

  • De informatie over wat er gebeurt met haar donatie na het doneren wordt als fijn ervaren maar mag ook nog voor het doneren.

  • Animatie na inloggen dat je bent ingelogd geeft fijne bevestiging

  • De tekst over de zonnebloem kan tot actie leiden Incentive geven. (Interface exist to enable interaction)

  • Rewards stimuleren

  • Het beeldmateriaal is effectief maar het moet wel up to date zijn en het gebruik van video's

  • Voor de discoverability een faq ergens neer zetten

Wat ging er minder goed?

  • Qua discoverability ontbreekt het. Het is te veel zoeken naar functies zoals de confirm button van een donatie en de tekst bij de zonnebloem

  • Het zelfde geval voor het scherm waarbij er een payment wordt gekozen. De confirm button werd niet ontdekt.

  • De perceived affordance van de knop bij de onboarding was alleen een progress indicator terwijl het ook een knop is.

  • Ze kon niet altijd naar een vorige stap (Keep Users in Control)

  • Animatie van hoe een donatie wordt verdeeld langzamer afspelen

  • Onduidelijk waar de rewards staan

  • Tekst in dank scherm 'Overview of medals' komt niet terug (incosistent)

  • My flower en your flower (Inconsistent)

  • Dat de bloem in leven gehouden moet worden is onduidelijk

  • Beeldmateriaal als video's zouden ook fijn zijn

Profiel: Afstuderend CMD'er

Leeftijd: 24

Locatie: Online via Teams

Opname: beschikbaar maar te groot bestand om in dit programma te zetten

Samenvattend

Onboaring:

  • Benieuwd naar meer vanaf het eerste scherm

  • Qua tekst? Which war.

  • De button lijkt te verwarren met YouTube en het lijkt op een timer op eerste gezicht

  • Tweede scherm tekst van ‘ did you know’

  • Het scherm over ‘ events & activism’ eerder verwacht ( provide a natural step)

  • Knop rechtsonder voelt als een timer door de dunne lijn die om de knop zit. Het scheelt aan de perceived affordance waarbij de knop niet werd begrepen zoals de knop eigenlijk zou moeten. De affordance was dat het “progressie balkje” feed forward zou geven over dat er meer schermen bij de onboarding horen maar de perceived affordance was dat het een timer is.

  • Back button mist

  • Donate call to action als je wil doneren met skip uitleg (skip and donate right away) Clarity probeer ik hier + Feed forward ipv via de knop rechtsonder aangeven dmv 1/5 + What we do tekst staat goede informatie in

Purchase rapport scherm - Perceived affordance is dat ze op het diagram kan tikken en kan swipen. Dus niet alleen swipen. - Ook zijn contrasten belangrijk voor haar qua kleur. Blauwtinten of tintengeel. Dit zou uitnodigen om er mee te interactieren. - Er werd meer discoverability verwacht omtrent de producten en wat er mee wordt gedaan (dit kan gelinkt worden aan de laatste nieuws updates). De getallen geven ook een indruk dat er heel veel geld wordt gedoneerd. Is mijn donatie dan nog wel nodig? Werd gezegd. Maar als dit gekoppeld wordt aan latest news en hier een patroon in zit dan komt er een gevoel van urgentie en geloofwaardigheid naar boven waar dan meer sympathie bij komt kijken. Ik zie dat ze actief bezig zijn. Daadkracht moet worden laten zien. + Locatie waar donatie heen gaat is zeer passend Wat gebeurde er toen ze wilde weten wat er met haar donatie zou gebeuren

Ze scrollt naar beneden en ze weet niet precies waar ze moet zoeken. Daarna heeft ze het gevoel dat ze bij ‘purchase rapport’ de opdracht heeft behaald maar dat is niet zo.

Je wil doneren, hoe zou je dat doen? Ze verwacht bij Who we are / What we do. De clarity over waar de kosten te vinden zijn ontbreekt. Dit zou goed kunnen liggen aan de perceived affordance van de knop ‘Purchase rapport’ - Payment knop andere bewoording beter maar wordt wel begrepen - Feedback toevoegen in deze flow - Animatie na donatie gaat erg snel - Provide Natural next step bij bevestigen donatie voelt niet natuurlijk aan. Provide Natural next step. - Ergens in deze flow nog duidelijk maken over breakdown donations - Als je donatie hebt bevestigd: bevestig donatie > processing donation > Animatie met minimale verandering voor smoothness / aesthetics + button bedrag kiezen erg effectief + Animatie is interessant

Wat gebeurde er Bij een reward halen? + the flower instructie na het inloggen voelt natuurlijk aan als volgende stap + Inloggen gaat goed, is duidelijk + Vervolg stap van inloggen voelt natuurlijk en logisch - twijfelt even over waar ze heen moet vanaf het home scherm - Familiarity in de button voor de flower om naar reward te gaan is niet duidelijk Wat gebeurde er toen het bericht werd gedeeld? - Het woord flower wordt geassocieerd met vagina - Feedback geven over dat het gedeeld is + voor de rest is het duidelijk

*ze vindt het vervelend dat ze voordat ze kan beginnen met de applicatie veel acties moet ondernemen zoals notificaties. Dit vindt ze fijner dat dat later gebeurd. *De opsomming van de achievements zijn fijn om te weten *Feedback in navigatie belangrijk *Leuk om toe te voegen dat je bedrag kan kiezen voor de interactiviteit *Select your bank drop down toevoegen *Responsive disclosure toepassen op het bedrag kiezen scherm over wat er gebeurd met je donatie OF een korte video met een ‘A short breakdown of donations’ *De test hebben bijgedragen aan een verbeterde usability in de applicatie waardoor er minder frictie en frustratie ontstaat onder het gebruik van de app. Doordat de perceived affordance van knoppen, teksten en flows vaak niet zo werd verwacht is het belangrijk hier in het volgende prototype extra aandacht aan te besteden. *Alleen uitleg als je je account hebt gemaakt (los van de onboarding) *Personaliseren van account: ben je een tulp of een zonnebloem

Wat ging er goed?

  • Curiosity wordt op gewekt door de onboarding. De tekst wordt aandachtig gelezen

  • Perceived affordance van de bolletjes werd deels goed begrepen als verhaallijn

  • 'What we do' goede informatie

  • Locatie waar de donatie heen gaat

  • Visueel zien de buttons er goed uit

  • Animaties zijn interessant

  • Dat er een instructie kwam na het inloggen voelde natuurlijk aan. Vooral voor the flower (provide natural next step)

  • Inloggen gaat goed en is duidelijk

  • Andere manieren van inloggen is gebruiksvriendelijk

  • Opsomming van achievements geven een duidelijk beeld

Wat ging er minder goed?

  • Het is in de onboarding nog niet duidelijk genoeg dat het om Oekraïne gaat

  • De feed forward bij het progressie balkje in de knop die ook dient om te vertellen dat je verder kan klikken wordt begrepen als een play knop van youtube. De trigger van het icoontje wordt alleen begrepen in de laatste stap wanneer de knop een vinkje krijgt ipv een pijl

  • Er kan beter rekening gehouden worden met een natuurlijke stap. Zo past 'Did you know' er minder goed tussen ( Provide a natural step )

  • Keep Users in Control door back button toe te voegen

  • De donate knop geeft een lelijke uitstraling en kan ook meer vertellen over dat je hier mee een bepaalde actie doet (feed forward)

  • Op het purchase rapport zou ze de diagram willen intikken niet alleen swipen

  • Visual Hierarchy ontbreekt een beetje doordat er 1 kleur wordt gebruikt

  • Discoverability van de inkoop van producten werd een koppeling verwacht met het laatste nieuws want anders blijven de cijfers zo oppervlakkig. Daadkracht kan worden aangetoond via de latest news.

  • Tekst van de payment knop

  • Animatie gaat te snel

  • Er mist feedback na het bevestigen van de betaling. Nu voelt het onnatuurlijk

  • Dat reward achter de flower zit, is niet duidelijk

Perceived affordance van de bolletjes werd begrepen als verhaal lijn en door het ontbreken van de back button begreep ze niet dat ze terug kon scrollen. Visual Hierarchy kan verbetert worden door het toepassen van verschillende kleuren

Conclusie

Uit deze drie Usability test van de Progressive Web App voor de Stichting Oekraïeners in Nederland versie 1 concludeer ik dat het product er qua uitstraling betrouwbaar uit ziet. Ook zijn de belangrijkste functies aanwezig en zijn de call-to-actions daar naar toe bijna allemaal duidelijk. Qua interactie kan er nog een flinke verbeterslag gemaakt worden. Zo ontbreekt het nog aan het voldoen van interactie termen die belangrijk zijn voor de gebruiker om een fijne belevings-ervaring te hebben. De interactie termen waar extra aandacht voor moet komen in het volgende prototype zijn:

De onboarding

  1. Duidelijk wat de stichting doet in de onboarding alleen Oekraïne als thema mag meer uitgelicht worden

  2. Did you know uit de onboarding halen want brengt verwarring

  3. Knop om verder te gaan wordt als timer beschouwd. Bolletjes om heen en weer te swipen wordt niet helemaal goed begrepen

  4. De back button mist

  5. Donate met uitleg de onboarding te skippen toe voegen

Navigatie

  • Feedback in de navigatie over waar je je bevindt

  • Altijd naar stap terug kunnen (keep users in control)

  • Blijf consistent in tekst bij knoppen (my flower/your flower)

Animaties

  • langzamer afspelen

Gamification

  • De progress indicator over de bloem wordt niet gezien

  • Rewards eerder naar voren brengen (pop up?)

  • Na thank you page: tekst veranderen > 'overview of medals'

  • Swipe for story

Knoppen

  • Skip button van in de zero state (first use experience) opvallender maken

  • Ook de knop om betaling te bevestigen valt weg uit het scherm

  • Verbetering op gebied van discoverability

Flow

  • Daadkracht aantonen door latest news te linken met latest updates

  • Feedback na donatie maar ook voor de donatie over

Extra:

  • Beeldmateriaal toevoegen

  • Notifications toevoegen: Reward krijgen > notification hint > notifications opent (1. welkom, 2 overview rewards) gebruik van 'bring the data forward'

  • Bij het opstarten laten zien waarmee je kan betalen, geeft vertrouwen

  • Break down of donations

  • *Select your bank drop down toevoegen

  • *Leuk om toe te voegen dat je bedrag kan kiezen voor de interactiviteit

  • *Responsive disclosure toepassen op het bedrag kiezen scherm over wat er gebeurd met je donatie OF een korte video met een ‘A short breakdown of donations’

  • *Alleen uitleg als je je account hebt gemaakt (los van de onboarding)

Ben ik achter deze punten gekomen:

  • Ik wil erachter komen of het prototype helder te begrijpen is Onboarding: - Duidelijk wat de stichting doet in de onboarding alleen Oekraïne als thema mag meer uitgelicht worden - Did you know was onverwacht - Knop om verder te gaan wordt als timer beschouwd - Bolletjes om heen en weer te swipen wordt niet begrepen

  • Of de volgorde van de schermen als logisch aanvoelt Er kan een verbeterslag gemaakt worden om beter in te spelen op 'Provide a natural next step'. Sommige flows voelen als onnatuurlijk aan zoals na het kiezen van het bedrag, betalingsmethode en de animatie ontbreekt het aan een tussen scherm. - Stappen bij flow om te doneren mogen natuurlijker overkomen e -

  • Het product als aangenaam wordt ervaren in gebruik. Krijg je als gebruiker het gevoel van eenheid op de app? De animaties kunnen nog wat smoother overlopen en langzamer afgespeeld worden. Ook mag er meer rekening gehouden worden met dat gebruikers soms terug willen naar de vorige stap (Keep users in Control). Daarnaast zou er met het diagram op het purchase rapport meer interactie moeten komen - Back buttons toevoegen waar nodig is - Meer interactie met diagram en kleur gebruik

  • Zou dit concept een antwoord zijn op mijn design challenge? Missen er nog functionaliteiten?

  • Of de gebruiker nog meer wil dan alleen een bedrag doneren - Qua informatie is er ook behoefte aan het laatste nieuws - Er is behoefte aan informatie vooraf het doneren over hoe de donatie wordt gespendeerd.

  • Of het transparant is wat de stichting doet Ja, via de onboarding, inkoop rapport en het beeldmateriaal wordt hier een redelijk duidelijk beeld gegeven. Dit zou nog wel verbeterd kunnen worden door het toevoegen van video's.

  • Is het transparant waar je donatie heen gaat Als de informatie over de verdeling van het doneren ook eerder wordt laten zien (voordat je een donatie hebt gedaan)

  • Of het overtuigt om een donatie te doen (idealiter meerdere)

  • De perceived affordance was dat er gedrukt kon worden op de bloem want er kon geswiped worden maar dat werd niet gedaan.

  • Het verhaal zou eerder gedeeld worden dan (do you know this story? Many bla bla... Spread this story)

  • De discoverability kan nog een verbeterslag maken omdat het voor de gebruiker nog veel zoeken is. Eventueel een hamburger menu zou hier bij helpen.

  • Curiosity wordt op gewekt door de onboarding. De tekst wordt aandachtig gelezen

  • Perceived affordance van de bolletjes werd deels goed begrepen als verhaallijn

  • 'What we do' goede informatie

  • Locatie waar de donatie heen gaat

  • Visueel zien de buttons er goed uit

  • Animaties zijn interessant

  • Dat er een instructie kwam na het inloggen voelde natuurlijk aan. Vooral voor the flower (provide natural next step)

  • Inloggen gaat goed en is duidelijk

  • Andere manieren van inloggen is gebruiksvriendelijk

  • Opsomming van achievements geven een duidelijk beeld

  • Er wordt alleen na de donatie sympathie opgewekt door het verhaaltje. Dit zou van te voren ook mooi zijn.

  • Zij geeft aan het platform te vertrouwen door de uitstraling, paypal en sympathie is opgewekt. De verzekering van Paypal geeft het meeste stimulans.

  • Voor de discoverability een faq ergens neer zetten

  • Het beeldmateriaal is effectief maar het moet wel up to date zijn en het gebruik van video's

  • Rewards stimuleren

  • De tekst over de zonnebloem kan tot actie leiden Incentive geven. (Interface exist to enable interaction)

  • Animatie na inloggen dat je bent ingelogd geeft fijne bevestiging

  • De informatie over wat er gebeurt met haar donatie na het doneren wordt als fijn ervaren maar mag ook nog voor het doneren.

  • Perceived affordance van de scroll bolletjes staat gelijk met wat hoe ze er mee interacteerde

  • De storytelling in de onboarding geeft een duidelijk beeld van wat de stichting doet

Previous(zonder)HiFi PrototypeNextHifi Prototype V3.

Last updated 2 years ago