maandag 17 april 2017

Lessons Learned

Lessons Learned
Deze week reflecteren we op het vak en beschrijft ieder voor zich wat hij van het vak vindt.

Melvin

Describe how you experienced the UI design steps.
Soms erg overbodig.

Did you find the steps useful or not?
De stappen waar we onderzoek moesten doen voelden erg overbodig, omdat
al veel mensen al onderzoek gedaan hebben naar wat het best is voor de usergroups dat hoefde we niet opnieuw te doen.

Will you and/or How would you fit the UI design into the software engineering process for the future applications you will make?
Ik zal voortaan goed nadenken over wat de usergroup fijn vindt in de ui.
Om erachter te komen wat ze fijner vinden zal ik onderzoek doen.

How did you like thinking about design only (without coding)? Is it something you are good at or not? What are you good at?
Ik ben erg slecht in designen en iets beter in programmeren.

What was the easiest part and what was the hardest part?
Het lastige was het vinden van een website die wij zelf dachten te kunnen verbeteren. Het makkelijkste waren de test uitvoeren.

Which part are you most proud of? Which part are you least proud of?
Ben niet erg trost op het uiterlijk van de website. Onze presentaties.

For each assignment show how much time you spent.
5 uur

Do you have suggestions for changing the assignments?
Minder veldonderzoek meer theorie.

Jeroen 

Describe how you experienced the UI design steps.
Ik vond de stappen erg leerzaam omdat er dingen in terug kwamen waar ik nog nooit over na gedacht had.  Ik vond het echter niet erg leuk om de stappen te doorlopen.

Did you find the steps useful or not?
Sommige onderdelen waren handig om mee te krijgen anderen vond ik minder nodig. Het was bijvoorbeeld wel handig om vanuit de eindgebruiker te denken en daaruit een design te maken. Maar de card sorting session vond ik minder handig omdat er al veel websites zijn voor het zelfde doel en je hier kan kijken wat voor structuur goed werkt.

Will you and/or How would you fit the UI design into the software engineering process for the future applications you will make?
Ik zal langer stil staan bij het maken van een interface voorheen keek ik hier puur functioneel naar. Nu zal ik meer vanuit de gebruiker gaan kijken en wat fijn is voor deze doelgroep.

How did you like thinking about design only (without coding)? Is it something you are good at or not? What are you good at?
Om alleen aan het design te denken vond ik niet leuk om te doen. Ik was ook niet goed in het ontwerpen van de website maar dit is dan ook wel te zien.

What was the easiest part and what was the hardest part?
Het lastigste onderdeel vond ik toch wel het kiezen van een geschikte website. Ik had geen idee wat de een website goed of slecht zou maken. Hierdoor kon ik moeilijk bepalen welke website wij als groep zouden kunnen verbeteren. Hier hebben wij dan ook lang op vast gezeten als groep omdat mijn mede groepsgenoten het zelfde probleem hadden.
Het makkelijkste onderdeel vond ik de theoretische vragen zoals kiezen tussen user driven design of feature driven design te beantwoorden en beargumenteren.

Which part are you most proud of? Which part are you least proud of?
Ik ben het meest trots op de samenwerking binnen de groep. Wij hebben eerder in deze samenstelling gewerkt maar dit ging toen niet zo goed. Deze keer ging het stukken beter hier ben ik dus best trots op.
Ik ben het minst trots op het uiterlijk van onze website. Het ziet er niet uit maar ik zou ook niet weten hoe ik hem mooi zou kunnen maken.

For each assignment show how much time you spent.
6 uur

Do you have suggestions for changing the assignments?
Ik zou persoonlijk minder lang de tijd nemen om iedereen zijn opdracht te laten presenteren. Ik vond het persoonlijk vrij snel saai worden als we hier de hele ochtend mee bezig waren.

Sander

Ik vond het nuttig om de verschillende UI design stappen te doorlopen, wel vind ik dat sommige onderdelen nuttiger dan andere. Ik vond het creëren van personas bijvoorbeeld minder nuttig als je maar goed beschrijft wat de doelen van gebruikers in de applicatie zijn. Maar over het algemeen was het heel nuttig om als software student dit vak te hebben, het geeft toch een beter inzicht in hoe je een betere UI kan creëren.

In toekomstige applicaties wil zeker onderdelen van dit vak toepassen. Een van die dingen is het maken van schetsen voordat ik een UI ga maken, nu is het eerst alles programmeren en dan kijken hoe de UI eruit moet zien. Vaak is hier dan niet goed overnagedacht. Ook wil ik duidelijke doelen van mijn doelgroep vaststellen, zodat ik de UI hiervoor zo gebruiksvriendelijk te maken. verder wil ik de user interface meer testen nadat deze gemaakt is om te kijken of gebruikers er inderdaad goed mee overweg kunnen.

Ik ben niet zo goed in het ontwerpen van een applicatie. Een onderdeel waar wat ik wel redelijk kan is het creëren van personas en doelen bedenken waarom deze gebruikers nou een applicatie gebruiken. Een van de dingen die ik het moeilijkste vond was het ontwerpen van de website zelf. Ook was het nog lastig om een website te kiezen die we wilde verbeteren.

Ik ben het meest trots op hoe we hebben samengewerkt en ons gebruikersonderzoek naar de huidige website. Ik vind dat we daar goede informatie hebben kunnen uithalen. Waar ik minder trots op ben is het uiteindelijke resultaat, de website vind ik er niet heel goed uitzien.

Het verschilt per week hoelang ik bezig ben geweest met de opdrachten, vooral het maken van het final prototypen en de schetsen duurde wat langer. Maar ik ben gemiddeld wel ongeveer 5 uur bezig geweest(2/3 uur tijdens de les(zonder presentaties mee te rekenen) en de rest thuis).

Ik vond het vak opzicht goed ingedeeld, als een term niet helemaal duidelijk was stond dit meestal uitgelegd in het boek, ook stonden hier een paar duidelijke voorbeelden in. Een punt dat ik denk dat beter kan is het geven van wat meer context waarom het nuttig is, wat draagt elk punt bij aan creëren van een goede UI.



Final prototype

Final prototype

Deze week hebben wij een demo/presentatie voorbereid, waarin wij uitleggen hoe ons proces is verlopen, wat ons eindproduct is en hoe onze samenwerking is verlopen.

Link naar final prototype

https://marvelapp.com/26475ga/screen/26385621

Samenwerking

De samenwerking in de groep liep goed. Elke week hebben we samen naar de opdracht gekeken en besproken wat er moest gebeuren voor de volgende week. Dit hebben wij dan opgedeeld in taken en deze taken hebben wij verdeeld zodat iedereen ongeveer net zoveel werk had. Op deze manier hebben wij ervoor gezorgd dat de taken eerlijk verdeeld waren en alles af kwam. De communicatie in de groep liep goed bij het bespreken van de opdracht gaf iedereen input en als iemand ergens op vast liep kon deze hulp vragen aan de groep. De hele groep vond het lastig om te presenteren maar iedereen heeft dit toch gedaan. Het was soms wel lastig om elkaar te motiveren om er aan te gaan werken. Omdat het vak niet echt met onze sterkste kanten overeenkomt. Een punt dat beter kon was ook het oprijd beginnen aan een opdracht, vaak gebeurde dit de dag voor de oplevering waardoor er wel eens problemen ontbonden die niet op tijd opgelost konden worden.

Feedback

Bij het kaarten kopen weet ik nu niet welke dag het is. De uitwerking mist nu bijvoorbeeld het uitwerken van het bestellen van kaarten. Op basis van deze feedback hebben we ons prototype aangepast zodat er meer functionaliteit in zit, zoals het bestellen van kaarten. Ook hebben we overal een titel toegevoegd om duidelijk te maken op welke pagina een gebruiker zit. Een andere aanpassing die we hebben gedaan is het consistent maken van de layout, zodat die overal het zelfde thema heeft. We hebben de home pagina ook aangepast, zodat de pagina niet te leeg is.

dinsdag 4 april 2017

Usability Test

Usability Test


1.Type of test:Unmoderated

Task : buy a ticket for the movie split


2. Type of test : unmoderated

Task : find the overview of all movies


3.Type of test : unmoderated

Task : find the overview of all movies that are playing this week

4.Type of test : unmoderated
Task : find information about the 50+ event.






Resultaten

Na het uitvoeren van de testen zijn we nog op een aantal dingen gekomen die verbeterd moeten worden. Een van die dingen is het duidelijk maken van de klikbaarheid van de afbeeldingen op de home pagina. Dit geld ook voor de events pagina. Een ander punt is dat het zoeken niet duidelijk te zien was. Door deze testen uit te voeren hebben we onder andere de discoverability en scannability van de website, door te kijken of alles goed vindbaar was.

Conclusie

Uit de testen zijn er een aantal problemen gekomen. Zo is gebleken dat het niet altijd duidelijk is dat je op de films kan klikken in het overzicht van de films. Hier wordt een knop bij gemaakt zodat gebruikers hier op kunnen klikken. Dit moet het duidelijk maken dat er geklikt kan worden om naar de pagina van de desbetreffende film te gaan. Ook werd de pagina van het filmoverzicht verward met de pagina van de planning van de films. Dit is echter geen erge verwarring omdat de nodige informatie wel aanwezig is en je naar de film kan gaan. Op de pagina om een ticket te kopen was geen prijs aanwezig dit is nu toegevoegd.

Na de aanpassingen te hebben gedaan hebben wij een nieuwe usability test uitgevoerd waarin we de aanpassingen testen, Dit filmpje is hieronder te zien.


Het prototype


https://marvelapp.com/26475ga/screen/26385621

Feedback

De feedback die we deze week hebben gekregen is dat we een duidelijke conclusie moeten hebben met daarin beschrijven wat we gaan aanpassen en dit vervolgens het liefst ook weer testen. Ook mogen we best vertellen aan testers als er nog iets niet is("normaal zou je naar een pagina gaat met... maar dat werkt nog niet."). We hebben een conclusie toegevoegd waarin staat beschreven wat we hebben aangepast. Ook hebben we daarna nog een test uitgevoerd.

Individuele bijdrage

Melvin
  • Tests uitgevoerd
  • Tests omschreven
Jeroen
  • Tests uitgevoerd
  • Tests omschreven
  • Conclusie
Sander
  • Tests uitgevoerd
  • resultaten
  • alles op blog gezet
  • Feedback


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?

    video
    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