Verschillende bruikbare (design) patterns
Bronnen voor inspiratie: http://www.welie.com/patterns
http://ui-patterns.com/patterns
http://www.mobile-patterns.com/
Find common solutions for recurring problems and a description of the context in which these solutions work best
Waarom deze methode?
Vindt overeenkomende oplossing voor de problemen die ik probeer op te lossen
Vindt een beschrijving van een context waarin de oplossing het beste werkt
Hoe?
Patrooncollecties zijn te vinden in online repositories en boeken over bepaalde onderwerpen (zoals ontwerpen voor mobiel of ontwerpen voor het sociale web). Zoek naar details over de context waarin een patroon het beste werkt. Zelfs als je van plan bent het patroon te doorbreken, zorg er dan voor dat je weet wat het is en welke spanningen het voor de gebruiker oplost.
Bijv: Hoe kan ik een kostenverdeling het beste overbrengen?
Wat heb ik nodig?
Passende pattern collectie / creativiteit om binnen de beperkingen van t patroon te blijven maar te experimenteren
Welke bestaande patterns lossen de problemen op die aansluiten op de gebruikerseisen en eisen van de opdrachtgever?
Onderzochte bestaande patterns:
Track en trace
Een donatie doen
Updates geven (notificaties)
Daadwerkelijke video's van een ramp situatie
Resultaten laten zien van een donatie
Track en trace
Post NL gebruikt een track en trace om te laten weten aan degene die een online bestelling heeft gedaan waar de bestelling blijft. Het geeft jouw, als klant, een duidelijke indicatie over waar jouw bestelling zich bevindt en wanneer het aan komt.
De progress bar zorgt er voor dat er informatie wordt gegeven over het proces van de bestelling
De progress bar houdt de gebruiker in contact met het product
Progress indicator geeft informatie over de status van de bestelling
De locatie van de bestemming van de bestemming wordt bekend
Dit bestaande patterns wil ik graag meenemen in mijn ontwerp. Vooral de progress bar + indicator zijn handige middelen waar mensen informatie krijgen over hun bestelling is. Via sequencing deel je het bestellingsproces op in 4 delen. Dit werkt normaliter motiverend als het gaat om bepaalde taken uitvoeren vanuit de gebruiker. Nu is het zo dat er hier geen taken worden uitgevoerd vanuit de gebruiker maar vanuit de organisatie. Taken als bijvoorbeeld: Bestelling bevestigen, bestelling verzamelen, vervoeren van bestelling en het arriveren van de bestelling. Met het delen van deze informatie wordt er bewustzijn en transparantie gecreëerd bij de gebruiker.
Alternatief: track en trace
Ook heb ik deze applicatie gevonden waarvan ik de naam niet weet die ook track en trace gebruikt voor het informatie overbrengen van de bestellingen. Deze bestaande oplossing laat communiceert goed met de gebruiker welke bestellingen er zijn geweest en waar ze naar toe gaan. Door middel van kleurgebruik en indicatoren kun je zien wanneer een donatie/bestelling is gearriveerd of niet. Een iets geavanceerde vorm van track en trace van de PostNL.
Updates geven over bijvoorbeel verloop van de ramp in Oekraïne of verloop van je donatie (in verbinding met track en trace)
In de nieuwe IOS 16 is het mogelijk om notificaties te sturen op het scherm waarin een kleine visualisatie wordt gegeven van het proces van betaling via Apple Pay. Ik zie hier in inspiratie dat dit ook zou kunnen voor het laten zien van het verloop van de donatie.
Andere notificaties kunnen natuurlijk ook op dezelfde wijze zoals iedereen gewend is laten zien worden op mobiel.
Het enige wat belangrijk is, is dat bij het gebruik van progressive web apps rekening moet worden gehouden met dat er een functie moet worden aangezet. Op de Iphone moet je dan de 'Built-in Web Notifications' aan zetten om te zorgen dat jij updates ontvangt op je mobiel vanuit de website.
Een financiële donatie doen
Deze bestaande oplossing om een donatie te doen wil ik graag meenemen omdat het op een simpele, duidelijke en snelle manier geeft om een financiële donatie te doen.
Het is duidelijk dat je op de home pagina verschillende projecten kan kiezen waar aan je kan doneren. Ook is de metafoor die zij gebruiken voor de financiële donaties een sterk middel namelijk maaltijden. Je geeft maaltijden met het geld wat je doneert. Echter is deze organisatie wel verbonden met het WFP (World Food program) waardoor dit mogelijk is. Er wordt iets aan het bedrag gekoppeld waardoor er een duidelijk beeld is wat er met jouw geld gedaan kan worden. Ook kun je aangeven of je eenmalig of maandelijks doneert.
Een andere stichting die het bestaande pattern van doneren oplost is GIRO 555, zij hanteren ook zo'n makkelijke en simpele manier als je een donatie zou willen doen. In drie stappen binnen de website kun je aangeven hoeveel je wil doneren en via welke methode. Daarna kun je via een externe link de betaling bevestigen en de donatie voltooien.
Daadwerkelijke video's van de situatie
Op de home pagina van Share The Meal wil ik graag meenemen hoe zij gebruik maken van de video's die ze per project laten zien.
Resultaten overbrengen aan de gebruiker (van een donatie)
Het overbrengen van informatie over een donatie is wat vaag. Waar ik achter wil komen is welke bestaande patterns er zijn om informatie over te brengen aan de gebruiker met betrekking tot het effect van binnenkomend geld. Wat wordt er met het geld gedaan?
Het WNF hanteert een dropdown menu om de veelgestelde vragen te beantwoorden waarin ze laten zien wat er met het geld gedaan wordt en hoe het wordt besteed.
Deze weergave van het laten zien van een donatie lijkt mij handig om mee te nemen in mijn ontwerp. Het is een simpele manier om een belangrijke vraag te beantwoorden voor de gebruiker namelijk: Wat wordt er gedaan met je geld. Met ondersteuning van het diagram worden verschillende percentages gegeven over hoe de organisatie het binnenkomende geld verdeelt over de kosten binnen de organisatie. De percentages geven een snelle weergave en een beeld bij hoe het geld verdeelt wordt.
Het vragen van gegevens
Opnieuw doet ShareTheMeal dit op een manier waarvan ik denk dat dit het beste aansluit aan de wensen van de gebruiker. De gebruiker wil zo min mogelijk gegevens geven. E-mail, telefoonnummer en naam zijn genoeg. Bij sharethemeal kun je inloggen via google of apple en anders hoef je alleen een e-mail adres in te vullen. Deze verifieer je door de ontvangen code op je e-mail in te vullen in de app waarmee jouw account is ingelogd.
Het is gewenst dat het product het inkoop rapport op een interessantere manier kan overbrengen
Om de behoefte van de stichting te vervullen is het de bedoeling om een "saai" inkooprapportage te upgraden tot een interessantere en leukere weergave van alle cijfers en gegevens. Een bestaande oplossing die een regelmatig rapport bij houdt is bijvoorbeeld deze applicatie (naam is onbekend). Er wordt een duidelijke weergave gemaakt van de categorieën en de producten per dag.
Het is gewenst dat het product in speelt op de emotie van de doelgroep
Volgens deskresearch is gebleken dat je op verschillende manieren op jongvolwassenen kan inspelen. Zo wordt er storytelling gebruikt om persoonlijke verhalen te delen van slachtoffers of vrijwilligers, worden er foto's gebruikt van slachtoffers die recht in de camera kijken en seizoensgebonden headlines waarbij framing wordt toegepast. Bestaande patterns die dit goed doen zijn Movement on the Ground, Unicef en Warchild.
In dit bestaande patterns zie je dat er rekening wordt gehouden met het seizoen door aan te geven dat er een wintercampagne is. De foto op het tweede scherm laat een kind zien die recht in de camera kijkt. En tot slot gebruikt WarChild een speciale pagina voor verhalen van kinderen.
Ik wil deze patterns mee nemen in het ontwerp om een verbetering te maken op de website qua inspeling op de emoties van de gebruiker. Door de persoonlijke verhalen te verwerken in het product en foto's te gebruiken zoals hierboven maar ook seizoensgebonden titels verwerken.
Pattern inlog (rekening houdend met gebruikerseis dat er alleen gegevens over mail, tel nummer en naam worden gevraagd)
Airbnb heeft een patterns voor het inloggen voor de gebruiker waarvan ik denk dat dit ook goed zou aansluiten voor mijn ontwerp. Het heeft een vrolijke uitstraling en gebruikt 1 task per screen. Ook worden de stappen die je als gebruiker bij het inloggen moet doorlopen, 1 voor 1 gedaan. Eerst naam, dan mail en dan wachtwoord. Het principe van een taak opdelen in meerdere kleinere taken, noem je 'sequencing'. Dit principe wordt toegepast omdat meerdere kleine taken meer motiveert dan 1 grote taak (CMD HCI Reader, 2022)
Pattern om bericht te delen
WWF maakt gebruik van de camera om mensen te motiveren aandacht te vragen voor de panda en voor andere dieren. Via je camera kun je een foto maken, die je vervolgens kan delen via welk platform jij dan ook wil. Ik wil dit meenemen als inspiratie voor het delen met anderen. Dit is namelijk een motivator voor jongvolwassenen waardoor zij zullen doneren en zullen delen met meerdere mensen zodat uiteindelijk het doel van de opdrachtgever om meer financiële donaties te kunnen ontvangen, verwezenlijkt kan worden.
Onboarding
Last updated
