Tijdens het vak Interaction & Visualisation gaat het er om dat we een goede basis leggen voor het uiteindelijke ontwerp. Door middel van verschillende methodes zorg je er voor dat je een duidelijk beeld krijgt over wat je wilt ontwerpen. Je denkt na over het karakter van je concept en over hoe de gebruiker door je concept heen loopt. Ook is het belangrijk dat je nadenkt over de "look and feel" van je concept.
In het kort zorgt ons concept voor het verminderen van de vleesconsumptie, gezien dit volgens onderzoek de meest vervuilende sector is op gebied van CO2. Door middel van mensen aan te sporen een duurzamere keuze te maken en dus vleesproducten te vermijden wordt er minder C02 uitgestoten.
Voor een uitgebreide uitleg over het concept verwijs ik u naar de volgende pagina:
Project Behavioural Design individuele deel
In een applicatie heeft elk scherm een betekenis, het is dus belangrijk dat je blijft nadenken over hoe jouw schermen overzichtelijk zijn. En het is belangrijk dat elk scherm een functie heeft, een scherm zonder functie is een verspilling van pixels. In dit document wordt onder andere weergegeven wat de schermen uitstralen en hoe deze functioneren.
Scherm 1.0, oftewel de product scanner, is een scherm dat rechtstreeks uit de Albert Heijn app komt. Ik heb het scherm nagemaakt in Sketch en hier producten aan toegevoegd zodat er een duidelijke look en feel is van dit scherm.
Dit scherm wordt weergegeven op de handscanner van de Albert Heijn zelf. De gebruiker kan via dit scherm producten scannen. Als men de Albert Heijn app gebruikt wordt automatisch de camera van de telefoon geopend om zo de barcode van het product te scannen, gebruikt men de handscanner wordt er geen gebruik gemaakt van de camera en wordt er dus gebruik gemaakt van de fysieke knop op de handscanner zelf.
Nadat de gebruiker een product heeft gescanned wordt hij of zij door geleid naar "scherm 2.0", deze wordt hier onder besproken.
Dit scherm zorgt er voor dat de gebruiker na gaat denken over zijn of haar keuzes. Als de gebruiker een product heeft gescanned verschijnt dit scherm op de hand scanner. Dit scherm is enkele seconden in beeld en vertoont een korte animatie bij het verschijnen.
Op het scherm zijn verschillende belangrijke elementen:
Om gebruik te maken van de handscanner heeft men een bonuskaart nodig, deze wordt gescant en de handscanner wordt gegeven aan de klant. Op het scherm staat nu in de header een vriendelijke groet "Hey Sander", hiermee wordt de klant persoonlijk aangesproken en laat het zien dat men niet alleen maar een nummertje is bij de Albert Heijn. Het creëert persoonlijkheid.
Mocht de klant een anonieme bonuskaart hebben. Dan zou je de "Hey Sander" kunnen vervangen door een minder specifieke benaming, denk aan "Hey jij!" of "Hallo daar!".
Na het scannen van het product is het handig dat de gebruiker nog steeds kan zien over welk product het gaat. Ook wordt de prijs weergegeven aan de gebruiker, bij de prijs is het euro teken weggehaald om minder druk te leggen op het feit dat het over geld gaat.
Vervolgens kan de gebruiker zien hoe duurzaam het product is, de extra grote header geeft een contrast aan waardoor men weet dat de tekst daaronder niet bij het product zelf hoort.
In het concept wordt rekening gehouden met autonomie, mensen moeten zelf bepalen of dierenwelzijn (biologisch) of duurzame producten belangrijker zijn. Door aan te geven of een product wel of niet biologisch is kan de gebruiker zelf bepalen of dit product wordt aangeschaft. Mocht het product niet biologisch zijn zal de radiobutton niet gevuld zijn en zal de tekst een grijstint hebben.
Buiten het feit of een product biologisch is, is het ook belangrijk om te weten of het een seizoensproduct is of niet. Als men aardbeien wilt kopen in bijvoorbeeld de winter, zullen deze vanuit een ver land moeten komen (in dit geval Murano, Italië). Doordat deze van ver komen is er meer transport nodig en dat resulteert in meer CO2 uitstoot. Als de persoon van "scherm 1.0" naar "scherm 2.0" gaat vult de button zich door eerst groot op te lichten en vervolgens het juiste formaat te krijgen, dit duurt 1.5 seconden en loopt dus gelijk met de "Herkomst indicatie".
Om visueel weer te geven waar het product vandaan komst, en nog steeds in de huisstijl van de Albert Heijn te blijven, heb ik gekozen om de afstand vorm te geven door middel van een lichte blauw balk die vol loopt. De balk is gevuld na 1,5 seconden, doordat het relatief lang duurt tot de balk vol gelopen is geeft het aan dat het om iets serieus gaat en niet iets vrolijks. Je zou kunnen zeggen dat je de balk nog langzamer laat vollopen om zo nog meer effect te geven, alleen zit men tijdens het boodschappen doen niet te wachten op een lange wachttijd. Dit hindert het boodschappen doen. Buiten het feit dat de balk zich vult wordt er in de rechterhoek "3000 km" gezet (dit getal kan afwijken), hier komt te staan hoe ver het verste artikel van de Albert Heijn is. Dus stel het verste product is 2993 km ver weg, zou dat er staan. Dit is om aan te geven op welk niveau jij zit qua afstand.
Net als de "herkomst indicatie" wordt de product categorie weergegeven in een licht balk, dit maal is de balk groen van kleur. De kleur is bepaald op basis van verschillende productcategorieën. De uitleg van deze kleuren keuze wordt getoond bij de toelichting van "scherm 2.1". In tegenstelling tot de "herkomst indicatie" wordt deze balk niet gevuld doormiddel van een links naar rechts beweging. De "product categorie" balk verschijnt na één seconden, wederom wil je deze animatie niet te lang laten duren en zo het boodschappen doen hinderen.
Het kan zijn dat voor mensen de groene kleur onduidelijk vinden, door middel van de informatie button wordt een pop-up getoond die uitlegt geeft over de verschillende kleuren. Meer uitleg wordt gegeven bij "scherm 2.1".
Dit scherm is een toevoeging op het eerder getoonde scherm (scherm 2.0). Het is belangrijk dat iedereen snapt wat jij wilt bereiken met een scherm. Dit kan je doen door middel van extra informatie, ik heb deze informatie verwerkt in een pop-up die wordt geactiveerd door te klikken op de "informatie button" .
Ook dit scherm heeft enkele belangrijke elementen die naar voren komen:
Door middel van kleuren code geef ik aan hoe duurzaam een product is. De kleuren zijn gekozen op basis van algemene kennis, veel mensen weten dat rood een error of iets fouts aangeven, dat geel een middelmaat is en dus ergens tussen in ligt en als laatste weten mensen ook vaak dat groen, goed betekend. Je zou de kleuren kunnen vergelijken met een stoplicht, dat was ook een inspiratiebron voor dit kleurenpallet.
Wederom is de animatie van korte duur, de animatie doet 0,5 seconden over het verschijnen. Deze animatie duurt minder lang dan de animaties op scherm 2.0, dit is met opzet gedaan gezien de pop-up buiten informatie geven geen verdere toevoeging heeft. Ook is het zo dat als jij de pop-up een keer hebt gelezen weet je wat er staat. Open je hem dan per ongeluk hoef je niet te wachten tot hij verschenen is, en dan weer wachten tot de pop-up weer weg is.
Het concept is gebaseerd op het feit dat je je eigen koopgedrag terug kan zien. Het is de bedoeling dat men bewust wordt van zijn of haar koopgedrag. Door het verschaffen van verschillende informatie stukken en het laten zien van de ernst proberen wij het gedrag te veranderen.
Deze pagina wordt bereikt via de al bestaande app van Albert Heijn. Men kan via het menu naar "Meer" gaan en vervolgens de "Check & Reflect" tab kiezen.
De header van de analyse luid "Hoe ging het deze week?", onder deze header staat de benodigde data. Je laat de consument zien over welke dagen het gaat.
Vervolgens wordt de analyse balk getoond, deze balk geeft (in de zelfde kleuren als bij de pop-up op scherm 2.1) aan hoe goed jou koopgedrag was. Momenteel zegt de balk nog niks. De gebruiker klikt op de balk en vervolgens wordt er een pop-down venster geopend en laat de extra informatie zien. Hier wordt meer uitleg over gegeven bij de schermen 3.1 tot met 3.3.
Zoals eerder genoemd is Check & Reflect gebaseerd op het analyseren van je aankoopgedrag. Door de informatie op de bonuskaart is het mogelijk om de recentelijk aangeschafte producten te tonen. Je laat men zien wat ze deze week het vaakst kochten en welke producten minder duurzaam zijn. Producten met een rode uitroepteken zijn producten die erg slecht zijn voor het klimaat en worden daarom aangegeven met een contrasteren icoon.
Zoals eerder genoemd worden de eerder gekochten producten van deze week getoond in een lijst. Buiten het feit dat je ziet om welke producten het gaat zie je ook de hoeveelheid die je hebt aangeschaft. Hier mee laat je wederom aan de gebruiker zien of er goed of slecht boodschappen gedaan wordt.