Detailed Design

Detailed Design

Tools

Voor het maken van de mockups voor de nieuwe site voor c-cinema is gekozen om gebruik te maken van marvelapp. Hierin kan makkelijk een mockup worden gemaakt van een website. Ook zorgt dit ervoor dat de knoppen die er in staan werken waardoor het goed te testen is.

Mockup

https://marvelapp.com/26475ga

Guidelines

Realism

In onze applicatie wordt gebruik gemaakt van realism door gebruik van afbeeldingen. Zo wordt er een vergrootglas gebruik om de zoekfunctie te laten zien. Ook zie je bij het overzicht van de films de bijbehorende posters en kijkwijzers.

Fitts’s Law

Er wordt gebruik gemaakt van grote klik velden. Bijvoorbeeld bij het kopen van tickets zit rechts onderin een button om de kaartjes te kopen. Hier moet je eerst bovenin een keuze maken en dan onderaan op de knop klikken.

Animations

We passen di onder andere toe door in het hoofdmenu het geklikte item van kleur veranderd

Consistency

We hebben op elke pagina de zelfde style, waardoor dit goed met elkaar overeen komt

Discoverability

We hebben geprobeerd onze tekst zo scanbaar mogelijk gemaakt door het gebruik maken van koppen.

Undo

Op elke web browser heb je een vorige knop boven aan het scherm. Ook kan je via ons hoofdmenu altijd weer terug komen op de home pagina.

Individuele bijdrage

Melvin

• Schermen gemaakt

Jeroen

• Schermen gemaakt
• 2 guidelines
• tool

Sander

• Schermen gemaakt
• guidelines
• alles op blog gezet

Paper Prototype and Guerilla Test

Paper Prototype and Guerilla Test

Flowcharts

1. Kijken waar de bioscoop staat.

2. Kijken welke films er draaien.

3. Kijken hoe laat een film draait.

 4. Kijken naar films die nog uit gaan komen in de bioscoop.

 5. Kaarten bestellen.

Totaal

Storyboards

Schetsen

Guerilla tests

Conclusie

Bij het zoeken van een filmtrailer was het soms niet duidelijk dat een gebruiker op de film moest klikken om de trailer te zien.

Feedback

De feedback die we deze week hebben gekregen is dat storyboards meer een globale indicatie geeft over hoe de user flow verloopt. Onze schetsen mogen ook netter(leesbaardere teksten en lineaal gebruiken).

Individually: Indicate what you contributed.

Sander

• Flow diagrammen
• 2 Guerilla tests
• Alles op het blog zetten
• Feedback

Jeroen

• Schetsen

Melvin

• Storyboards
• 1 Guerilla test

Information Architecture and Card Sorting

Information Architecture and Card Sorting

Goal: Determine information architecture of your application by using card sorting.

Introduction

In the previous assignment you determined what the users will do with your application. Now it is time to determine HOW they will do that. The first step is to get an idea of the mental model that the users have of the structure of your application. Which information should be found where? This will determine the interaction they will want to have with this information. But that is for later steps to come.

Goal of this workshop

Het doel van deze workshop is om duidelijk te krijgen hoe onze menu structuur in elkaar moet zitten en dit vervolgens te testen aan de hand van gebruikers.

Assignments.

• Create an information architecture (hierarchy) for your application.

Openingstijden	Ticket	Films	Bioscoop programma	Events
Telefoonnummer	Ticketprijs	Film Trailer	Nog uit te komen films	Catering
E-mail		Film omschrijving		Kinderfeestje
Adres		Film Kijkwijzer		Ladies night
Sponsors		Filmgenre
		Film tijd

• Compare your information architecture with the one created by the users during card sorting. What are differences?

De tweede van de personen hadden ongeveer hetzelfde idee. Deze hadden ieder 3 categorieën gemaakt namelijk: films, bioscoop gegevens en events. Deze hadden onder de film categorie ook het programma. De ticket en ticketprijs stonden onder de bioscoop gegevens. De gebruikers hadden wel een verschil waar ze sponsors plaatsen bij de nee was dit bij de films omdat het meer gezien werd als reclames en bij de andere bij events. Het laatse verschil zat in verwachte films wat de ene onder films plaatste en de andere onder events

De derde persoon die werd onderzocht had zes categorieën gemaakt namelijk: contact, tickets, events. horeca, programma en films. Deze verdeling komt meer overeen met wat wij zelf bedacht hadden. Ook kwam hier uit dat we iets misten over de parkeergelegenheid en dat sponsors niet nodig was.

Determine your final information architecture based on the above steps.

Algemene informatie	Films	Overig
Openingstijden	Bioscoop programma	Events
Telefoonnummer	Nog uit te komen films	Catering
E-mail	Ticket	Kinderfeestje
Adres	Ticketprijs	Ladies night
parkeergelegenheid	Film Trailer
	Film omschrijving
	Film Kijkwijzer
	Filmgenre
	Film tijd

Feedback

Als feedback hebben we gekregen om de kaartjes wat duidelijker te maken. En om het doel en de taak van de opdracht beter te beschrijven. We hebben het doel en de taak van de opdracht omschreven onder het kopje goal of this workshop. De feedback over de kaartjes hebben we ter kennis aangenomen en zullen we duidelijker doen als we ooit nog eens een card sorting session doen.

Individually: Indicate what you contributed.

Melvin:

• 1 card sorting sessie

• Groeps architectuur gemaakt samen met Jeroen
• Final architecture in gevuld

Jeroen:

• 1 card sorting sessie (https://www.youtube.com/watch?v=mDVo0y6WjlA )
• architecture bedacht
• architecture van tests geanalyseerd
• uiteindelijke architecture gemaakt

Sander:

• 1 card sorting sessie
• Groepa architectuuropzet
• Alles in blog formaat zetten
• Feedback verwerkt

Design Choice and Text Usability

Design Choice and Text Usability

Determine if you need user- or activity centered design. Explain your choice.

Activity centered ,omdat de site zijn target audience erg breed is. Dit zorgt ervoor dat het erg lastig is om in de design van de website met iedereen rekening te houden. Daarom hebben wij gekozen voor activity centered design .

Make a list of the activities or tasks your users can perform with your application. Determine why each task is of benefit to your users in reaching their goals. Of course you only can describe WHAT they can do, not yet HOW they have to do it.

Kaartjes kopen: Hierdoor hoeven de gebruikers niet in de rij te staan bij de kassa en kan het niet zijn dat de film is uitverkocht als ze daar aankomen en dus niet naar binnen kunnen.

1. Bestellen kaarten: Online kaarten bestellen, zodat ze bij aankomst geen kaarten meer hoeven te kopen.
2. Kaarten uitprinten: Nadat de kaarten zijn gekocht moet de koper een bewijs hebben dat hij kaarten heeft besteld.
3. Kijken welke films er draaien: Als mensen kaarten willen kopen moeten ze kunnen kijken welke films er draaien en wanneer.

Bezoek Plannen

1. Kijken welke films er draaien: Als mensen naar de bioscoop willen gaan kunnen ze op de website zien wat er draait en een film uitkiezen.
2. Kijken hoe laat een film draait: Wanneer mensen een bepaalde film willen zien kunnen deze met andere mensen bespreken om op bepaalde momenten af te spreken.
3. Kijken naar films die nog uit gaan komen in de bioscoop :zodat de gebruikers kunnen plannen wanneer ze tickets willen kopen .
4. Kijken waar de bioscoop staat: Als je naar de bioscoop gaat is het handig om te weten waar deze staat.

Application

Wij gaan een website maken voor de bioscoop c-cinema, deze website moet zowel op desktop als op mobile goed werken. Gebruikers moeten snel kunnen vinden welke films er draaien en hoe laat de films draaien. Het bestellen van kaartjes moet makkelijk en snel gebeuren.

Text usability

Om te zorgen dat ons verhaal goed overgebracht wordt hebben wij een aantal dingen toegepast, een hiervan is het gebruik van koppen die duidelijk weergeven waar de tekst over gaat. Andere punten die we gebruiken is een goed leesbaar lettertype, alinea’s, witregels en gebruiken we geen afkortingen. We gebruiken geen afkortingen, omdat we er zo voor zorgen dat iedereen ons verhaal kan volgen ongeacht kennis van de begrippen rond user interfaces. Een punt dat we gaan verbeteren bij de volgende weken is het gebruik van afbeeldingen om de tekst te verduidelijken.

Kloze test 

Op onze stuk beschrijving van onze applicatie hebben wij een Kloze test uitgevoerd. De tekst die gebruikt is staat hieronder.

Wij gaan een website maken voor de bioscoop c-cinema, deze website moet zowel op desktop als op mobile goed werken. Gebruikers moeten snel kunnen vinden welke films er draaien en hoe laat de films draaien. Het bestellen van kaartjes moet makkelijk en snel gebeuren.

Resultaten

Wij gaan een website maken voor de bioscoop c-cinema-, deze website moet zowel op desktop als op een mobiel goed werken. Gebruikers moeten snel de informatie kunnen vinden welke films er draaien en hoe laat de films draaien. het bestellen van kaartjes moet makkelijk en snel gebeuren.

Wij gaan een website maken voor de bioscoop c-cinema, deze website moet zowel op desktop als op mobile goed werken. Gebruikers moeten snel kunnen vinden welke films er draaien en hoe laat de films draaien. Het bestellen van kaartjes moet makkelijk en snel gebeuren.

Cloze test

Wij gaan een website maken ____ de bioscoop c-cinema-, deze website ____ zowel op desktop als op ______ goed werken. Gebruikers moeten snel ______ vinden welke films er draaien __ hoe laat de films draaien. ___ bestellen van kaartjes moet makkelijk __ snel gebeuren.

Persoon nr 1(Jongeman 20 jaar):

Wij gaan een website maken voor de bioscoop c-cinema-, deze website is zowel op desktop als op mobiel goed werken. Gebruikers moeten snel kunnen vinden welke films er draaien en hoe laat de films draaien. het bestellen van kaartjes moet makkelijk en snel gebeuren.

Persoon nr 2(Jongeman 20 jaar):

Wij gaan een website maken voor de bioscoop c-cinema-, deze website moet zowel op desktop als op mobiel goed werken. Gebruikers moeten snel kunnen vinden welke films er draaien en hoe laat de films draaien. het bestellen van kaartjes moet makkelijk en snel gebeuren.

Persoon nr 3(Jongeman 19 jaar):

Wij gaan een website maken voor de bioscoop c-cinema-, deze website moet zowel op desktop als op een mobiel goed werken. Gebruikers moeten snel de informatie kunnen vinden welke films er draaien en hoe laat de films draaien. het bestellen van kaartjes moet makkelijk en snel gebeuren.

Wij gaan een website ____ voor de bioscoop c-cinema-, ____ website moet zowel op ____ als op mobile goed ___.Gebruikers moeten snel kunnen ___ welke films er draaien ___ hoe laat de films ____. Het bestellen van kaartjes ___ makkelijk en snel gebeuren.

Persoon nr4(Vrouw 52 jaar)

Wij gaan een website maken voor de bioscoop c-cinema-, de website moet zowel op computer als op mobile goed zijn. Gebruikers moeten snel kunnen zien welke films er draaien en hoe laat de films beginnen. Het bestellen van kaartjes moet makkelijk en snel gebeuren.

persoon nr5(Jongeman 22 jaar)

Wij gaan een website bouwen voor de bioscoop c-cinema-, de website moet zowel op computer als op mobile goed werken .Gebruikers moeten snel kunnen kijken welke films er draaien en hoe laat de films beginnen. Het bestellen van kaartjes moet makkelijk en snel gebeuren.

persoon nr5(Vrouw 54 jaar)

Wij gaan een website maken voor de bioscoop c-cinema-, de website moet zowel op websites als op mobile goed werken .Gebruikers moeten snel kunnen vinden welke films er draaien en hoe laat de films starten. Het bestellen van kaartjes kan makkelijk en snel gebeuren.

Feedback

De feedback die wij deze week kregen was om de close testen uit te voeren en om individuele bijdrage toe te voegen, ook moesten wij nog even goed kijken naar onze taken onder de doelen. We hebben een kopje individuele bijdrage toegevoegd, ook hebben we een kloze test uitgevoerd. Verder hebben wij de taken/doelen wat aangepast.

Individuele bijdrage

Jeroen

• 2 Cloze tests
• activity entered design

Melvin

• 2 Cloze tests
• Inleidende tekst

Sander

• 1 Close tests
• Text usability
• Feedback
• Blogpost maken