Interactieontwerp Groepsopdracht Week 3, Opdracht 2

Transcriptie

1 Interactieontwerp Groepsopdracht Week 3, Opdracht 2 Bas de Keulenaar ( ) Grafisch Ontwerper Annejet Robijn ( ) Interactie Ontwerper Angélique Siu ( ) Facilitator Lisanne van Vliet ( ) Technisch Ontwerper

2 Concept Veel studenten die studeren aan de UvA gebruiken Datanose dagelijks. Het gemak om even je rooster te checken op de website gaat voor de meeste studenten sneller via mobiele telefoon dan de laptop. Het is dus belangrijk dat het gebruik van Datanose op een mobiel gemakkelijk gaat, dit is op het moment niet het geval. Wij willen dit probleem graag oplossen met ons concept. Persona Pietje Groot is 19 jaar oud en is een informatiekunde student aan de UvA. Hij is een student die niet goed kan plannen en daardoor ook vaak te laat komt. Ook is Pietje erg vergeetachtig, hij vergeet wel eens dat hij een bepaalde les heeft. Pietje vindt het vooral belangrijk dat een website hem moet motiveren om te gebruiken. Wanneer een website te moeilijk of te onoverzichtelijk is heeft hij al geen zin om van de site gebruik te maken. Doelen van Pietje: - Beter gaan plannen - Meer motivatie hebben voor school Frustraties van Pietje: - Probeert vaak beter te plannen, maar houdt het niet lang vol - Blackboard en datanose lastig in gebruik Aan de hand van de volgende user stories hebben wij een mobiele website voor Datanose gemaakt, om het gebruik gemakkelijker te maken. User stories 1. Als ik mijn wekker zet, wil ik weten hoe laat ik de volgende ochtend naar school moet, zodat ik optijd kan opstaan en mij kan klaar maken. 2. Als ik mijn rooster bekijk op Datanose, wil ik niet de hele tijd moeten inzoomen op een bepaalde gedeelte van de website, zodat ik snel en gemakkelijk mijn rooster kan bekijken. 3. Als ik het gebouw binnen loop, wil ik weten in welk lokaal ik les heb, zodat ik mijn les kan volgen. 4. Als ik activiteiten wil plannen in mijn week, wil ik weten welke dagen en hoe laat ik les heb, zodat ik geen dubbele afspraken heb. 5. Als ik mijn rooster bekijk, wil ik dat deze (zolang ik wil) blijft staan, zodat ik snel mijn rooster kan bekijken als ik te laat ben. 6. Als ik tentamenweek heb, wil ik gemakkelijk kunnen zien welke tentamens ik op een bepaalde dag heb, zodat ik weet voor welk tentamen ik het eerst moet leren. Het doel van ons concept is dus om Datanose mobielvriendelijk te maken. Dit willen wij bereiken door allereerst alleen het bekijken van je rooster op de homepage te zetten. Doordat er maar één specifiek gedeelte van de originele website te zien is, wordt er voorkomen dat de letters te klein zijn en er ingezoomd moet worden. Als tweede verbetering willen wij het mogelijk maken om ingelogd te blijven met je studentnummer. Hierdoor kan de gebruiker snel zijn rooster of de andere mogelijke gegevens bekijken en hoeft hij niet telkens zijn studentnummer in te voeren na het verlaten van de browser. Er is ook een optie om uit te loggen, waardoor het bekijken van roosters van medestudenten ook mogelijk blijft. Ons laatste verbeterpunt is het toevoegen van de begin- en eindtijd van een les. Zo wordt er voorkomen dat een student de lestijden verkeerd afleest. De tijden staan nu niet alleen links van de kolommen, maar ook in het vakje van de les zelf. Interactie

3 Veel studenten bekijken hun rooster op hun telefoon. DataNose heeft ook een mobiele versie, maar deze is op het moment nog niet erg gebruiksvriendelijk. Met ons nieuwe ontwerp willen we dat veranderen. Als een gebruiker de website bezoekt, ziet hij direct zijn rooster. Daarvoor moet diegene wel eerst zijn studentnummer invullen, op dezelfde manier als waarop dat nu gaat in DataNose. Nadat een geldig studentnummer is ingevuld, verschijnt een persoonlijk rooster. We hebben ervoor gekozen om dit groot af te beelden en het lettertype groter te maken zodat het leesbaar is vanaf een klein scherm. Links en rechts van de januari staan pijltjes, om te wisselen van maand. Onderin het scherm staan twee pijltjes om te wisselen van week. Als je in het rooster klikt kom je op de dagplanning. Als je in de dagplanning op een afspraak klikt, komt meer informatie tevoorschijn. Hier is ook link naar apps die helpen bij de route naar de locatie. De kalender rechtsboven in het scherm is bedoeld om te kunnen wisselen van periode. Door hierop te klikken verandert een dagoverzicht in een weekoverzicht en een weekoverzicht in een maandoverzicht. DataNose heeft naast het rooster bekijken natuurlijk nog meer functies, zoals een overzicht van beschikbaarheid van lokalen. Deze functies zijn terug te vinden in het menu linksboven in het scherm. Deze worden niet verder uitgewerkt, omdat wij ervan uitgaan dat studenten de mobiele versie van DataNose vooral gebruiken om snel hun rooster te bekijken. Gebruikerstest Denise Visser - 19 jaar, studeert aan de Erasmus Universiteit Rotterdam, gebruikt geen DataNose. Is het duidelijk waar je op moet klikken als je een dagoverzicht wil zien? Ik zou ergens in het veld van de dag klikken of op de titel van de dag zelf. Is het duidelijk waar je op moet klikken als je een vanaf het dagoverzicht naar de volgende dag wil kijken? Ja, het lijkt mij logisch dat je dat op een pijltje klikt onderin het scherm. Waar zou je op klikken als je andere functies van DataNose wil gebruiken? Zoiets zo ik verwachten in een menu. Dat icoontje linksboven lijkt mij een menuknop, dus ik zou daarop klikken om naar andere functies te zoeken. Wat verwacht je dat er gebeurt als je op de kalender rechtsboven in het scherm klikt? Dat er instellingen komen, misschien kan ik daar kiezen of ik een week of een maand wil zien.

4 Grafisch design Doordat de DataNose site van de UvA, alleen duidelijk functionaliteit biedt voor gebruik op de computer, is er bij het grafisch design sterk nagedacht over de mobiele usability. Er is gekozen voor een simpele agenda structuur. Deze structuur werkt erg goed op mobiele apparaten doordat de labels en knoppen erg groot zijn. Ook is er gekozen voor duidelijke kleuren met allen een betekenis: Rood: Tentamens en hertentamens; Groen: Werkcolleges; Blauw: Hoorcolleges. Door het gebruik van kleuren als legenda, is het voor gebruikers snel duidelijk welke gebeurtenissen zich afspelen op welke dag. Tot slot is er voor gekozen om de achtergrond van de mobiele website simpel te houden, dit bespaart de gebruiker op laadtijd en datagebruik.

5 Technisch rapport Het goed werkend krijgen van Datanose op een mobiele devices is een haalbaar streven. Er zijn echter een aantal aandachtspunten waarmee rekening gehouden moet worden: Responsive website Op dit moment is het grootste probleem van de datanose website, dat de site niet responsive is. De interface van de site werkt niet goed op verschillende devices. Datanose werkt daarom bijvoorbeeld niet goed op mobiele telefoons. Als men Datanose opent op een mobiele telefoon, is alles erg uit gezoomd. Als er bijvoorbeeld naar het rooster wordt gekeken past dit niet op het hele scherm, waardoor de pagina moet worden versleept om dit volledig te kunnen bekijken. Ook de tekst die op de pagina staat is niet leesbaar. Doordat de pagina is uitgezoomd zijn de letters te klein geworden om te lezen. Om dit probleem op te lossen moet de site responsive worden gemaakt. De beste manier om dit voor elkaar te krijgen is door een <meta> tag toe te voegen in de code. Een meta tag geeft de webbrowser instructies over hoe hij moet omgaan met de layout van datanose en hoe hij bepaalde onderdelen moet schalen. Een voorbeeld van een meta tag is: < meta name ="mobile" content ="width=device-width, initial-scale=1.0"> In bovenstaande tag zorgt het 'width=device-width' stuk ervoor dat de browser de breedte van het scherm van het device aanhoudt. Het initial-scale stuk bepaald vervolgens hoever de website ingezoomd moet zijn en welke schaal er gebruikt moet worden. Door het toevoegen van deze meta-tag wordt de website dus altijd in verhouding geladen, ongeacht het device waarop dit gebeurd. Het langer vasthouden van sessies Mensen vinden het vervelend als ze telkens weer opnieuw moeten inloggen op het moment dat ze een website bezoeken. Helemaal als deze bezoeken kort achter elkaar zijn. Zo kunnen wij ons bijvoorbeeld voorstellen dat een student Datanose opent en naar zijn rooster kijkt, maar de informatie niet bewust in zich opneemt omdat hij met zijn hoofd al bij de aankomende werkgroep zit. Als de student de website van Datanose kort daarna weer opent, is het uiterst vervelend als hij opnieuw moet inloggen. Om dit probleem op te lossen, kan een "remember me"-functie worden geschreven. Het doel van deze functie is dat de browser de inloggegevens van de student onthoudt en deze automatisch ophaalt op het moment dat de student Datanose opent. Datanose biedt deze functionaliteit op dit moment niet, terwijl dit wel gemakkelijk te implementeren is. De eerste keer dat de student datanose op zijn mobiele device opent, krijgt hij of zij een cookie toegewezen. In de code van Datanose wordt de informatie van deze inlog bewaard in de variabele $_COOKIE. Cookies hebben echter een vervaldatum. Op het moment dat deze datum bereikt wordt, zal alle informatie uit de $_COOKIE variabele gewist worden. De student moet dan alsnog opnieuw inloggen als hij Datanose opent. Een simpele oplossing om dit te voorkomen is door de vervaldatum zo ver in de toekomst te zetten, dat er met grote zekerheid voorspeld kan worden dat de student Datanose dan niet meer zal gebruiken. Hiervoor kan bijvoorbeeld een periode van 20 jaar worden gebruikt. De cookie instelling ziet er als volgt uit: setcookie( "CookieName", "CookieValue", time() + ( 20 * 365 * 24 * 60 * 60 ) ); 9292/maps/kaarten verwerken