Human Computer Interaction

ONTWERPOPDRACHT HUMAN COMPUTER INTERACTION

Naam Omar Vasquez Jesus Studentnummer 500704100 Klas Roze Docent H.E.M. van Vugt Vak Human Computer Intercation Opdracht Ontwerpopdracht Casus Ben & Jerry’s Versie 1 Datum 25 - 3 - 2015

ANNOTATIES 1. De naam van de actiesite: Ben & Jerry’s traktatie.

1

2. Het informatie icoontje geeft belangrijke informatie weer die van belang kan zijn voor de bezoeker van de website.

3

2

4

3. Aan deze kant van het menu kan je zien met welke topic je bezig bent in het bestelproces.

4. Dit handje kan je indrukken om naar de volgende fase van het bestelproces te gaan.

5 6

Human Computer Interaction Ontwerpopdracht Versie 1 Scherm 1

5. Hier kan je het formaat van de traktatiedoos kiezen, er is keus uit 9,16,25 en 36.

6. Sequencing wordt toegepast, zodat de gebruiker weet hoe ver hij is met het bestelproces en ook altijd terug kan voor het herinstellen van keuzes.

2

ANNOTATIES 1. Het icoon van de doos in het geel geeft het aantal dozen aan dat je momenteel geselecteerd hebt.

2. Als je op de doos klikt schuift het aantal dat je hebt geselecteerd naar beneden.

1 2

3. Hier staan alle social media links, door er op te drukken wordt je doorverwezen naar de Ben & Jerry’s pagina van Facebook, twitter etc.

4

4. Er kunnen meerdere dozen besteld worden

3

Human Computer Interaction Ontwerpopdracht Versie 1 Scherm 1.1

3

ANNOTATIES 1. De geselecteerde doos is zicht-

2 1 3

baar, hier zie je ook dat die is uitgeschoven (je kan nu ook de 2e doos selecteren).

2. Op het gele vierkantje is het formaat van de dozen zichtbaar. (heb je bijvoorbeeld een doos van het formaat 16 dan zal er een nieuwe doos daaronder zichtbaar zijn. Deze kan je dan ook weer uitschuiven.

3. De doos die niet geselecteerd is, zie je inde vorm van een gele silhouette.

Human Computer Interaction Ontwerpopdracht Versie 1 Scherm 1.2

4

ANNOTATIES 1. Als je klaar bent om naar de volgende stap in het bestelproces te gaan zal het handje een groene goed krijgen, zodat je weet dat je klaar bent dit is een vorm van feedforward.

1

Human Computer Interaction Ontwerpopdracht Versie 1 Scherm 1.3

5

ANNOTATIES 1. Het handje geeft een groene gloed nu weet je dat je door kan gaan naar de volgende stap.

1

2. Hier zie je dat de stap groen is geworden inplaats van geel je weet nu dat deze stap voltooid is en dat je verder kan gaan naar de volgende stap dit is een vorm van sequencing.

2

Human Computer Interaction Ontwerpopdracht Versie 1 Scherm 1.4

6

ANNOTATIES 1. Je hebt de keus uit 6 verschillende motieven.

2. Ben je iets vergeten of wil je iets veranderen in de vorige stap met dit handje kan je terug.

1

3. Hier zie de motieven waar uit je kan kiezen. Als je een motief geselecteerd hebt zal deze een groene gloed krijgen.

2

4. De huidige stap waar je, je nu bevindt wordt aangegeven meet een gele kleur.

3

4

Human Computer Interaction Ontwerpopdracht Versie 1 Scherm 2

7

ANNOTATIES 1. Hier zie dat het geselecteerde motief een groene gloed heeft.

2. Je hebt een motief gekozen nu kan je verder gaan naar de volgende stap (de hand heeft een groene gloed).

2

1

Human Computer Interaction Ontwerpopdracht Versie 1 Scherm 2.1

8

ANNOTATIES 1. Er kan gekozen worden voorbekertjes ijs of ijsjes op stokjes (1 soort per bestelling).

1.1 Er kan gekozen worden voor ijsjes met allemaal dezelfde smaak of er kan zelf een assortiment smaken samengesteld worden.

1 2

1.2 Melding, de Ben & Jerry’s ijs is niet gechikt voor kinderen die lactose-intolerant zijn.

2. Hier kan je de keus maken tussen bekertjes of ijs op een stokje.

3

Human Computer Interaction Ontwerpopdracht Versie 1 Scherm 3

3. Er kan gekozen worden voor ijsjes met allemaal dezelfde smaak of er kan zelfs een assortiment smaken samengesteld worden.

9

ANNOTATIES 1. Hier kan je kiezen uit de verschillende smaken, je kan ook zelf verschillende smaken samen stellen per doos.

1 3 2

Human Computer Interaction Ontwerpopdracht Versie 1 Scherm 3.1

2. Op de smaken waar een pinda achter staat moet rekening worden gehouden met mensen die een mogelijke allergie hebben.

3. De smaak die geselecteerd is heeft een grijze kleur, ook komt er een vinje naast zodat je zeker weet dat je het geselecteerd hebt.

10

ANNOTATIES 1. Er passen maximaal 2 regels tekst van elk 16 karakters op de verpakking van de ijsjes.

1.1 De kleur van de tekst is wit. Voor de achtergrond/outline van de tekst kan gekozen worden uit 6 kleuren.

1 2

1.2 Bij de keuze voor een assortiment smaken kan een verschillende tekst op elk ijsje gezet worden.

2. Hier kan je de kleur van de outline/achtegrond kiezen.

3

Human Computer Interaction Ontwerpopdracht Versie 1 Scherm 4

3. Hier is het aantal te zien van de ijsjes per doos. Je kan de tekst per ijsje veranderen.

11

ANNOTATIES 1. Hier zie de aantal ijsjes per doos, in dit geval zijn dat er 9, selecteer het ijsje om een persoonlijke tekst toe te voegen.

1

Human Computer Interaction Ontwerpopdracht Versie 1 Scherm 4.1

12

ANNOTATIES 1. Het geselecteerde ijsje heeft een groene gloed.

1

Human Computer Interaction Ontwerpopdracht Versie 1 Scherm 4.2

13

ANNOTATIES 1. Bij elke bestelling wordt als cadeautje naar keuze één gratis Ben & Jerry’s ijsprinsessen-tiara of Ben & Jerry’s Noormannen-kroon gegeven.

1.1 Voor tweelingen/drielingen/… kunnen extra tiaras of kronen voor 1 euro per stuk besteld worden.

1 3

2

2. Het geselecteerde cadeautje heeft een groene gloed.

3. Na dat je je cadeau(‘s) hebt gekozen kan je hier zien hoeveel je er hebt gekozen. In het gele vierkantje staat het aantal aangegeven.

Human Computer Interaction Ontwerpopdracht Versie 1 Scherm 5

14

Human Computer Interaction Ontwerpopdracht Versie 1 Scherm 5.1

15

ANNOTATIES 1. Let op je kan alleem met creditcard betalen

1

Human Computer Interaction Ontwerpopdracht Versie 1 Scherm 6

16

ANNOTATIES 1. Na het invullen van de gegevens geeft het handje een groene gloed je bent klaar en kan nu naar de volgende stap.

1

Human Computer Interaction Ontwerpopdracht Versie 1 Scherm 6.1

17

ANNOTATIES 1. Voor aflevering kan gekozen worden tussen bezorgen of afhalen bij een Albert Heijn filiaal.

1

Human Computer Interaction Ontwerpopdracht Versie 1 Scherm 7

18

ANNOTATIES 1. De gemaakte keus zal een groene gloed krijgen.

1

Human Computer Interaction Ontwerpopdracht Versie 1 Scherm 7.1

19

ANNOTATIES 1. De keus is gemaakt je kan nu naar de volgende stap.

1

Human Computer Interaction Ontwerpopdracht Versie 1 Scherm 7.2

20

ANNOTATIES 1. Kies hier een datum voor aflevering bij een filiaal.

2. Kies hier de filiaal waar je jouw bestelling wilt ophalen.

2 1

Human Computer Interaction Ontwerpopdracht Versie 1 Scherm 8

21

ANNOTATIES 1. Je hebt alles ingevuld en kan nu door naar de volgende stap.

1

Human Computer Interaction Ontwerpopdracht Versie 1 Scherm 8.1

22

Human Computer Interaction Ontwerpopdracht Versie 1 Scherm 9

23

ANNOTATIES 1. Je bent nu klaar met het invullen van de creditcard gegevens en kan nu door naar de volgende stap.

1

Human Computer Interaction Ontwerpopdracht Versie 1 Scherm 9.1

24

Human Computer Interaction Ontwerpopdracht Versie 1 Scherm 9.2

25

ANNOTATIES 1. Hier is te zien wat je tot nu toe

1

Human Computer Interaction Ontwerpopdracht Versie 1 Scherm 9.3

hebt besteld en de prijs, ook zie je de totaal prijs.

26

ANNOTATIES 1. Melding, dat de bestelling succesvol geplaatst is.

1

Human Computer Interaction Ontwerpopdracht Versie 1 Scherm 10

27

ANNOTATIES 1. Melding, dat je iets vergeten bent te doen of in te vullen tijdens het bestelproces.

1

Human Computer Interaction Ontwerpopdracht Versie 1 Scherm 10.1

28

ANNOTATIES 1. Melding, dat je nog niet alle stappen hebt doorlopen.

1

Human Computer Interaction Ontwerpopdracht Versie 1 Scherm 10.2

29