dinsdag 28 maart 2017

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

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

dinsdag 21 maart 2017

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
  • dinsdag 14 maart 2017

    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:
    Sander:
    • 1 card sorting sessie
    • Groepa architectuuropzet
    • Alles in blog formaat zetten
    • Feedback verwerkt





    dinsdag 7 maart 2017

    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

    • Cloze tests
    • activity entered design
    Melvin
    • 2 Cloze tests
    • Inleidende tekst
    Sander
    • 1 Close tests
    • Text usability
    • Feedback
    • Blogpost maken