POSTNL opdracht - pakketautomaat Opdracht - case scenario Een standaard consument die een pakket verzendt via www. PostNL/versturen en de Pakket- en briefautomaat gebruikt om zijn/haar pakket aan te bieden aan PostNL. Na het online aanmelden gaat diegene zelf het pakket afleveren bij automaat. Rowan Zomerdijk 500683991 Behavioural Patterns - profilering Marije ten Brink 1
Hierarchical Task Analysis Taken en subtaken Wat wilt de gebruiker versturen? - Brief of pakket? - Land van bestemming - Formaat pakket Betalen: - Winkelmand bewerken - Betaalopties Frankeren: - Order bekijken - Printen of online barcode Pakketautomaat: - Versturen of ophalen bij pakketautomaat - Versturen niet mogelijk - Automaat zit vol - Naar andere automaat toe User Task Flow Keuze van wat versturen en gegevens pakket op website 2
Morfologisch overzicht Wat versturen? Betalen Frankeren Pakketautomaat In het oranje kader wordt aangegeven op welke schermen ik mij ga richten om te verbeteren. In het herontwerp wordt goed naar de microinteracties gekeken, onderdeel daarvan zijn triggers, rules en feedback. Verder wordt er rekening gehouden met de gebruiker en natuurlijk het scenario dat zich af kan spelen. 3
Flowchart In deze flowchart is de flow van de schermen op de pakketautomaat te zien. In het oranje kader wordt ook hier aangegeven op welke schermen ik mij ga richten in het scenario die zich voordoet Scherm 1 Scherm 2 4
Scherm 1 - wireframes en states 1 2 3 4 1 1. Op het kaartje is met een rode pin aangegeven waar je je bevindt, deze is rood omdat de automaat vol is. 2. Doordat er op de knop rechts is geklikt, wordt de locatie groen aangeduid, visuele feedback van de gekozen locatie. 3. Dit is de andere locatie die rechtsonder niet is aangeklikt. - Goed dat er van nee, terug naar begin is gemaakt. - Zet vrije of beschikbare tussen de woorden andere locaties: 1. Er is gekozen voor een lijst waar de locaties in volgorde van afstand worden weergegeven. - Het rijtje is een goed idee, met het pijltje wordt de trigger duidelijker. 1. Het icoon waar je je nu bevindt is aangegeven als een mannetje, dit ben je dus zelf. 2. De locaties hebben een betere trigger gekregen doordat de locaties nu meer een button zijn geworden waarbij het duidelijk is dat er op gedrukt kan worden. - Knoppen van de locaties moeten duidelijker, denk goed na over wat de rule gaat doen. - Afstand naar de locaties toe mist hier. - In basis de beste optie van de 4. 1. Er is gekozen voor een visueel kopie van de automaat zodat het duidelijk is waar je je nu bevindt. 2. De pijlen maken duidelijk welke kant je moet oplopen voor de andere locaties. - Lastig te begrijpen voor mensen wanneer ze een scherm uit een hoek van achter hen zien. - Mist een route van boven naar de andere locaties. 5
Scherm 2 - wireframes en states 1 2 3 4 1. Er wordt een lijst aan de zijkant weergegeven als rule hoe de route naar de andere locatie loopt. 2. De route wordt als feedback aangestipt in oranje-blauwe kleuren. - Niet handig wanneer de locatie links wordt aangeklikt en het blok wordt links weergegeven dit kan verwarrend zijn. 1. Er komt een tooltip omhoog waarop de route in stappen wordt uitgelegd. 2. Op de route wordt de afstand weergegeven voor de gebruiker. - Afstand is handig om er bij te zetten. - De tooltip geeft goede feedback op de route van de aangeklikte locatie. 1. De lijn wordt als stippenlijn weergegeven om de gebruiker in loopstappen te laten denken. 2. De route en de foto van de bruna worden getoond, zo krijgt de gebruiker direct een visuele weergave van het gebouw te zien, dit zorgt voor feedback en herkenning bij de gebruiker. - Poppetje moet de kant op kijken waarnaar de persoon voor de automaat ook heen kijkt. - De stippenlijn is duidelijk en valt goed op en je krijgt het idee dat het op loopafstand is. - Foto is leuk maar wordt misschien te vol. 1. Wanneer je op een locatie drukt, verschijnen er twee iconen. De gebruiker kan dan kiezen voor een route of een foto van de locatie. - De extra klik kan vervelend en ingewikkeld zijn voor mensen. 6
Schermen - Keypath met rules Scherm 1 ontwerp Scherm rules Scherm 2 ontwerp Naar aanleiding van de eerdere schetsen heb ik gekozen om het derde schetsontwerp op te pakken voor het uiteindelijke ontwerp. Hierboven is het scherm ontworpen. Er is nagedacht over bepaalde triggers, zo moet de blauwe tekst onderin het beste opvallen. Ook is er onderscheid in de twee locaties, de dischtstbijzijnde locatie is groter weergegeven dan de locatie die verderweg ligt. In dit scherm is de rule te zien, zo wordt de stippenlijn per streepje weergegeven tot het einde. Zo krijgt de gebruiker een gevoel voor de route die gelopen moet worden. Ook wordt er een laad icoon getoond zodat de gebruiker duidelijk ziet dat daar iets gebeurd op het scherm. De tooltip wordt groter geschaald en dit gaat geleidelijk in de vorm van een animatie. Na de getekende wireframes heb ik feedback gekregen, deze feedback heb ik meegenomen naar het ontwerp van dit scherm. De basis is meegenomen van wireflow nummer 2. Hierboven is het scherm ontworpen. De blauwe stippenlijn geeft feedback over de route hoe de gebruiker het beste op de andere locatie komt. Verder is er gekozen voor een tooltip waarin de route wordt beschreven. Ook is er van de terug knop gekozen voor een tekstuele verandering, namelijk; Ik weet de route, terug naar start hierbij weet je zeker dat de gebruiker weet wat hij moet gaan doen. 7
Loops Micro-interactie states Primera 120m Sorry, deze automaat is vol Bruna 95m... In dit scherm wordt er gekeken hoeveel plekken er beschikbaar zijn op de andere locatie. De loop checkt dit wanneer de locatie wordt aangeraakt. Sorry, deze automaat is vol Primera 120m Bruna 95m 5 vakken beschikbaar - Na 10 m rechts op de Diemerparklaan - Na 50 m rechts de Erich Salomonstraat - Na 35 m aan je linkerhand Sorry, deze automaat is vol Primera 120m Bruna 95m Geen vakken beschikbaar Terug naar start Ik weet de route, terug naar start Ik weet de route, terug naar start Wanneer de loop heeft gecheckt of en hoeveel plekken er beschikbaar zijn bij de andere locatie, dan zal die dat weergeven op dit scherm. Wanneer er geen plekken beschikbaar zijn op een andere locatie geeft het scherm in rood weer dat er geen vakken beschikbaar zijn. Ook de route wordt dan niet weergegeven. Het is een goed gevonden loop, misschien kan er eerder in het proces aan worden gegeven of er plekken beschikbaar zijn ja of nee? En hoeveel? Hoofdinteractie: Het kiezen van een andere locatie, waar het pakket wel bezorgd kan worden. 1a: Knop voor afronden, afbeelding hierboven terug naar start 1b: Wanneer de knop wordt ingedrukt. 1c: Kort voordat je wordt doorgestuurd naar begin scherm. 2a: Waar je nu zelf staat. 2b: Route om naar gekozen locatie te komen. (animatie) 2c: Route is uitgestippeld. 3a: Knop voor andere locatie. 3b: De locatie klapt uit en laadt de beschikbare plekken in. 3c: Beschikbare plekken worden weergegeven. Het kan persoonlijker. Laat beschikbare plekken eerder zien. Minder schaduw om de locaties heen. Inzoomen wanneer route wordt weergegeven. Default Clicked Done 1a 1b 1c Default Clicked Done 2a 2b 2c - Na 10 m rechts op de Diemerparklaan - Na 50 m rechts de Erich Salomonstraat - Na 35 m aan je linkerhand Default Clicked Done 3a 3b 3c 8
Eindontwerp schermen + iteratie Naar aanleiding van de ontworpen micro-interacties en loops en daar de feedback van. Zijn er schermen ontworpen, dit zijn de schermen die worden voorgesteld aan PostNL. Voor de case en bijbehorende situatie: Een standaard consument die een pakket verzendt via www.postnl/ versturen en de Pakket- en briefautomaat gebruikt om zijn/haar pakket aan te bieden aan PostNL. Na het online aanmelden gaat diegene zelf het pakket afleveren bij automaat. Echter is de automaat vol en wordt de gebruiker gestuurd naar een andere locatie. Scherm 1 1. Dit mannetje is een visuele weergave van waar de persoon zichzelf bevindt. Eerder had ik alleen het mannetje, nu is er een cirkel onder gepositioneerd om meer duidelijkheid te geven dat dat de plek is van de volle automaat. 2. Dit zijn andere locaties die wel plekken vrij hebben, wanneer er geen plekken vrij zijn bij een andere automaat wordt deze niet weergegeven. N.a.v. feedback heb ik de vrije plekken weergegeven voordat je er daadwerkelijk op moet klikken. 3. De knop om terug te gaan naar het hoofdscherm heet n.a.v. feedback nu afronden. Scherm 1 PBA Maria Austria 120m 2 plekken vrij Iteratie scherm 1 PBA Maria Austria 120m 2 plekken vrij 1 2 3 Scherm 2 PBA Maria Austria 120m 2 plekken vrij Iteratie scherm 2 2 - Na 10 m rechts op de Diemerparklaan - Na 50 m rechts de Erich Salomonstraat - Na 35 m aan je linkerhand 3 x 1 Iteratie scherm 1 In het bovenste scherm is er nog gekozen om de volle locaties niet weer te geven, in de iteratieslag is er toch gekozen om deze locaties wel weer te geven. Deze worden wel in het rood aangegeven. Zo weet de gebruiker dat deze vol is en is dit geen trigger, toch weet de gebruiker dat de locatie er is voor een volgende keer. - Na 10 m rechts op de Diemerparklaan - Na 50 m rechts de Erich Salomonstraat - Na 35 m aan je linkerhand Scherm 2 1. De plattegrond is meer ingezoomd om meer focus te leggen op de gestippelde route naar de andere locatie. PBA Diemerpark 190m geen plekken vrij 2. Het mannetje loopt tussen scherm 1 en scherm 2 als rule naar de andere locatie, dit is een visuele weergave van de gebruiker en die zal zichzelf hierin herkennen. 3. De route wordt alsnog weergegeven in de popup in het oranje vlak. Iteratie scherm 1 In het bovenste scherm is er nog geen duidelijke mogelijkheid om terug te keren naar een andere locatie dan de gekozen locatie. Door middel van een kruisje kun je de locatie nu weg klikken. De knop afronden in de popup is er bijgekomen, omdat de gebruiker steeds focus heeft op dit deel van het beeld en kan dus ook op deze manier afronden. Verder zijn andere locaties weg om de focus op de gekozen locatie te houden. Ik heb de afstand in meters gehouden omdat je niet weet of de gebruiker met een fiets, auto of lopend is. 9
Rules, trigger en feedback Scherm 1 Scherm 2 PBA Maria Austria 120m 2 plekken vrij - Na 10 m rechts op de Diemerparklaan x - Na 50 m rechts de Erich Salomonstraat - Na 35 m aan je linkerhand PBA Diemerpark 190m geen plekken vrij Triggers - Het pijltje naar rechts op de locaties is een trigger voor de gebruiker. Rules - Smart default dat één locatie rood is. Feedback - De tekst onder de locatie die aangeeft hoeveel en of er nog plekken beschikbaar zijn. Triggers - Het kruisje om de popup weg te halen. - De knop afronden. Rules - De lijn die getrokken is voor de route. Met het mannetje die naar de locatie toe loopt. (animatie) - De plattegrond die is ingezoomd voor de gebruiker. Feedback - De route die wordt beschreven in de popup. - De popup zelf die groot verschijnt. 10