Ontwerpen van een niet-Web beleving Interaction design jaar 2 deeltijd, kwartaal 2
Datum: Naam: Studentnummer:
december 2010 Stefan van Rees 0235938
Ontwerpen van een niet-Web beleving | Stefan van Rees
Inhoudsopgave
Deelopdracht 1 – analyze mobiele (web)apps...................................................................................................................................................... 3 ANWB app ............................................................................................................................................................................................... 3 Shazaam app ........................................................................................................................................................................................... 4 Deelopdracht 2 –functioneel ontwerp iSkate app ................................................................................................................................................. 5 iSkate uitleg, flow, wireframes ..................................................................................................................................................................... 5 iSkate startpagina wireframe ........................................................................................................................................................................ 6 iSkate favorieten in detail ........................................................................................................................................................................... 7 iSkate huidige locatie beoordelen .................................................................................................................................................................. 8 iSkate nieuws ........................................................................................................................................................................................... 9 iSkate schaatsweer ................................................................................................................................................................................... 10
Interaction design
Deelopdracht 3 –testplan voor het bruikbaarheidonderzoek ................................................................................................................................. 11 Onderzoeksvragen .................................................................................................................................................................................... 11 Testmethode .......................................................................................................................................................................................... 11 Respondenten ......................................................................................................................................................................................... 11 Observatie ............................................................................................................................................................................................. 12 Testscript .............................................................................................................................................................................................. 13 Afronding onderzoek ................................................................................................................................................................................. 14
2
Ontwerpen van een niet-Web niet beleving | Stefan van Rees
Deelopdracht 1: Analyse mobiele (web) (web)apps ANWB weer & verkeer app Met de ANWB app kan de automobilist direct informatie opvragen over de toestand op de Nederlandse wegen. Het gaat hierbij om files, omleidingen en route informatie. De gebruiker krijgt op het openingsscherm de belangrijkste informatie direct in beeld en kan een keuze maken waar hij/zij meer informatie over wil ontvangen. Wat is het meest waarschijnlijke gebruikscontext voor deze app ? De gebruikers zijn automobilisten die reizen in de spits. Een waarschijnlijke context zou kunnen k zijn dat de gebruiker de app zal raadplegen in huis voor vertrek. De gebruiker zal dan bezig zijn met de voorbereidingen voor de reis en waarschijnlijk ook andere dingen aan het doen zijn. Een ander mogelijkheid is het gebruik in de auto. De iPhone w wordt ordt in de houder op het dashboard geplaatst zodat de gebruiker direct de actuele informatie kan zien.
Waarom is deze app op deze manier ontworpen ? Waaraan in het interface herken je dit scenario? Op welke manier is er in het app ontwerp rekening gehouden met de gebruikscontext ? De gebruiker wil na opstarten van de app zo snel mogelijk de beschikking over de belangrijkste functies van de app. In dit geval is dat route-informatie en file informatie. Deze opzet is terug te vinden in de app doordat het hoofdscherm van de app direct de belangrijkste data weergeeft. Omdat de gebruiker niet veel tijd wil bestede besteden n aan deze app is de app zo ontworpen dat de buttons en navigatie eenvoudig is en de functies goed te vinden zijn. Alles oogt eenvoudig en overzichtelijk. Het scherm is goed uit te lezen ook tijdens autorijden. De buttons hadden iets groter gemogen want zijn zi tijdens autorijden wat lastig te bedienen.
Interaction design
Geef in grote lijnen het meest waarschijnlijke gebruiksscenario weer. Voor vertrek wil de automobilist weten of er files of wegversperringen zijn op zijn zij route. Hij/zij start de app op en zoekt de route op. Naar aanleiding van de verstrekte informatie past de gebruiker de route aan of niet. Na vertrek wordt de iPhone in de houder geplaatst. De app wordt opgestart en de route wordt geprogrammeerd. Tijdens het rijden houdt de gebruiker het scherm in de gaten en wordt via geluidssignalen op de hoogte gesteld als zich op de route iets voordoet. Verder is er tijdens het rijden geen interactie wat ook goed is om de aandacht van de chauffeur niet af te leiden.
3
Ontwerpen van een niet-Web niet beleving | Stefan van Rees
Shazam app Met de app Shazam kan de gebruiker een geluidsfragment opnemen. Shazam stuurt de data via een internetverbinding naar de server en geeft informatie over titel en artiest terug aan de gebruiker. Watt is het meest waarschijnlijke gebruikscontext voor deze app ? De locatie van de gebruiker kan in principe overal zijn; overal waar muziek klinkt. Shazam wordt voor korte tijd opgestart, luister een fragment, wacht op artiest en titel, app afsluiten. De gebruiker zal meestal ook andere dingen aan het doen zijn en gebruikt de app als er onverwacht een goed nummer beluisterd wordt als de artiest onbekend is. Geef in grote lijnen het meest waarschijnlijke gebruiksscenario weer. De gebruiker hoort onverwac onverwacht ht een goed nummer. Hij/zij besluit om erachter te komen wat de artiest en titel is van het muziekfragment. De app Shazam wordt opgestart. De opname button wordt ingedrukt en de gebruiker houdt voor 10 sec. de telefoon bij de luidspreker waar de muziek kli klinkt. nkt. De data wordt opgestuurd en de gebruiker wacht af wat er op het scherm zal verschijnen. Als de informatie in beeld verschijnt kan de gebruiker meerdere dingen doen; niets,de titel weten is voldoende, of via de ingebouwde link naar itunes gaan om dit n nummer aan te schaffen. Na gebruik van de app gaat de gebruiker verder met de handelingen waar hij al mee bezig was. Het heeft de gebruiker niet meer dan 1 minuut gekost.
Interaction design
Waarom is deze app op deze manier ontworpen ? Waaraan in het interface herken je dit scenario? s Op welke manier is er in het app ontwerp rekening gehouden met de gebruikscontext ? Shazam heeft eigenlijk maar 1 functie; muziek opnemen en vervolgens de informatie over die muziek tonen. Als de app opgestart wordt is er meteen een zeer grote bu button tton op het scherm te zien om direct muziek op te nemen. Het ontwerp sluit wat dit betreft goed aan bij de belangrijkste functie. Omdat de gebruiker vaak geen tijd zal hebben om te zoeken naar allerlei functies is ook om deze reden de belangrijkste functie groot in beeld. Overige functies staan in overzichtelijke buttons onder het hoofdscherm, deze zullen minder vaak gebruikt worden. Ook zal de gebruiker deze functies gebruiken als er meer tijd beschikbaar is.
4
Ontwerpen van een niet-Web beleving | Stefan van Rees
Deelopdracht 2: functioneel ontwerp iSkate app Met de iSkate app kan de fanatieke schaatser de kwaliteit van het ijs opzoeken op zijn favoriete locaties. De app maakt hierbij gebruik van gegevens die door andere schaatsers zijn opgegeven. Voor de iSkate app is een internetverbinding noodzakelijk. Gebruikscontext De gebruiker zal de app gebruiken om een schaatsroute te plannen. Via de app wordt bekeken of het zin heeft om af te reizen of niet. Gebruiker zal de tijd nemen om de app te gebruiken en dit waarschijnlijk thuis doen als onderdeel van de voorbreiding voor een schaatstocht.
Ontwerp overwegingen De app zal niet dagelijks gebruikt worden en moet daarom geschikt zijn voor beginners. In het ontwerp is hier rekening mee gehouden door deze eenvoudig en overzichtelijk te houden, er hoeft niet gezocht te worden naar `verborgen` knoppen en/of functies. Ook zal de app niet tijdens het schaatsen gebruikt worden maar ervoor of erna. Het ontwerp is daarom niet gemaakt voor gebruik tijdens beweging maar voor een gebruiker die in rust is. Klikbare wireframes Online te zien op http://www.cmdrotterdam.nl/iskate
Interaction design
Gebruiksscenario Er moet een plek gekozen worden om te gaan schaatsen. Gebruiker start de app op. Als zijn favoriete plek nog niet is toegevoegd gebeurt dit alsnog. De favoriete plek wordt in detail bekeken of daar wel geschaatst kan worden en hoe de kwaliteit van het ijs is. De gebruiker kan ervoor kiezen om op dat moment het laatste schaatsnieuws te bekijken en de weersverwachting te bekijken voor de gekozen dag.
5
Interaction design
Ontwerpen van een niet-Web beleving | Stefan van Rees
6
Interaction design
Ontwerpen van een niet-Web beleving | Stefan van Rees
7
Interaction design
Ontwerpen van een niet-Web beleving | Stefan van Rees
8
Interaction design
Ontwerpen van een niet-Web beleving | Stefan van Rees
9
Interaction design
Ontwerpen van een niet-Web beleving | Stefan van Rees
10
Ontwerpen van een niet-Web beleving | Stefan van Rees
Deelopdracht 3: testplan voor het bruikbaarheidonderzoek In dit onderzoek zal het prototype van de iSkate app door een aantal gebruikers getest gaan worden. Hierbij wordt gekeken wat gebruikers vinden van de app, of er verbeterpunten te vinden zijn en of de app gebruiksvriendelijk is
Onderzoeksvragen De volgende onderzoeksvragen proberen we beantwoord te krijgen in het bruikbaarheidonderzoek;
1. 2. 3. 4. 5. 6. 7.
Kan de gebruiker eenvoudig vinden waar goed schaatsijs te vinden is ? Is de gebruiker in staat om zijn/haar eigen favoriete schaatslocatie toe te voegen ? Lukt het de gebruiker om feedback te plaatsen over een bezochte schaatslocatie ? Kan de gebruiker het schaatsnieuws vinden ? Kan de gebruiker het weer vinden ? Heeft het schaatsnieuws toegevoegde waarde voor de gebruiker ? Heeft het weer toegevoegde waarde voor de gebruiker ?
De respondenten die in aanmerking komen om het onderzoek uit te voeren zijn allen in het bezit van een iphone. Gebruikers van een ander platform heeft geen zin aangezien de app specifiek voor de iphone ontworpen is. Bij voorkeur hebben de respondenten enige ervaring met het downloaden van diverse apps en zijn algemeen bekend met het gebruik van deze apps. Tenslotte heeft het de voorkeur als de respondent een schaatsliefhebber is. Verdere zaken als geslacht, leeftijd of afkomst zijn niet van belang om als respondent voor deze test in aanmerking te komen.
Testmethode / methodiek De respondent zal de iSkate app gaan testen op een iphone. Het onderzoek is onderverdeeld in de volgende onderdelen die ook in deze volgorde uitgevoerd zullen gaan worden. De tijdsduur per onderzoek is maximaal 45-60 minuten.
Interaction design
Respondenten
11
Ontwerpen van een niet-Web beleving | Stefan van Rees
• •
Verwelkomen respondent
•
Vraaggesprek Om iets meer over de respondent te weten te komen zullen er een aantal vragen gesteld worden.
•
Doorlopen van 3-5 scenario’s Er worden minimaal 3 scenario’s doorlopen, uitgevoerd en geobserveerd.
•
Vraaggesprek Na afloop worden er een aantal vragen gesteld over de werking van de app
•
Bedanken van respondent
Uitleg onderzoek De respondent moet weten wat de bedoeling is van het onderzoek en krijgt een korte uitleg over de werking van de app en wat we met het onderzoek willen bereiken.
Observatie
Interaction design
Tijdens de test zullen alle handelingen die de respondent uitvoert opgenomen met een videocamera. De iphone wordt in een houder gemonteerd om beweging en onduidelijk beeld te voorkomen. De camera wordt op een statief geplaatst en wordt ingezoomd op de iphone waarbij de handbewegingen van de respondent en het beeldscherm van de iphone duidelijk in beeld zijn. Ook wordt er een extra microfoon geïnstalleerd om opmerkingen van de respondent op te nemen. Naast geluid en video worden er door de onderzoeker aantekeningen gemaakt van alle opvallende gebeurtenissen tijdens het onderzoek.
12
Ontwerpen van een niet-Web beleving | Stefan van Rees
Testscript I - Verwelkomen respondent; de respondent wordt welkom geheten en alvast bedankt voor de medewerking aan het onderzoek. II - De volgende uitleg wordt aan de respondent gegeven; “De iSkate app is ontworpen om de schaatsliefhebber snel een eenvoudig informatie over schaatslocaties te verstrekken. Met dit onderzoek willen we testen of het ontwerp en de functionaliteit van de app gebruiksvriendelijk is en of het ontwerp verbeterd kan worden.
III - De volgende vragen zullen aan de respondent worden voorgelegd;
• • • • •
Bent u bekend met het downloaden en installeren van apps ? Kunt u een aantal apps noemen die u gebruikt ? Vindt u uzelf een beginnende, gemiddelde of ervaren iphone app gebruiker ? Kunt u voorbeelden geven van goede apps vor de iphone ? Kunt u voorbeelden geven van slechte apps voor de iphone ?
IV - Scenario:
• • • •
De iphone wordt in de houder geïnstalleerd De iSkate app wordt opgestart Camera en microfoon worden aangezet Respondent neemt zijn plaats in achter de iphone
• •
Er zijn geen favoriete schaatslocaties ingevoerd
•
De respondent krijgt nu de tijd om deze opdracht uit voeren.
De respondent krijgt de volgende opdracht: “Voer zelf een favoriete schaatslocatie in en zoek uit of daar de kwaliteit van het ijs goed genoeg is om daar te gaan schaatsen.”
Interaction design
Scenario 1
13
Ontwerpen van een niet-Web beleving | Stefan van Rees
Scenario 2
• •
Er zijn nu een aantal favorieten in de app ingevoerd
•
De respondent krijgt weer de tijd om deze opdracht uit te voeren.
De respondent krijgt nu de volgende opdracht: “Ongeacht of de kwaliteit van het ijs op de gevonden locatie goed of slecht is, plaats een oordeel over deze locatie en sla deze op.”
Scenario 3
• •
Er zijn een aantal favoriete schaatslocaties in de app opgeslagen.
•
De respondent krijgt de tijd om de opdracht uit te voeren
De opdracht wordt nu; “”Probeer uit te zoeken of je erachter kunt komen hoe het weer is op een van de favoriete schaatslocaties”
Alle handelingen zullen worden opgenomen en opvullende handelingen worden genoteerd. Als de respondent vragen heeft kunnen deze gesteld worden. V - De volgende vragen zullen aan de respondent worden voorgelegd na afronding van de scenario’s;
Vindt u de iSkate app eenvoudig en duidelijk in gebruik ? Vindt u het ontwerp van de schermen overzichtelijk ? Wat is uw eerste indruk van de iSkate app ? Vindt u dat de iSkate app voldoet aan de verwachtingen ? Zijn er algemene positieve of negatieve dingen die opvallend zijn ? Heeft u verder nog vragen, opmerkingen en/of toevoegingen wat betreft de iSkate app ?
VI - Tenslotte wordt de respondent vriendelijk bedankt voor de medewerking
Interaction design
• • • • • •
14
Ontwerpen van een niet-Web beleving | Stefan van Rees
Afronding onderzoek
Alle bevindingen en een beschrijving van het gehele onderzoek zullen in een rapport samengevat worden. Deze beschrijving zal in tekst en beeld worden weergegeven. Al het originele beeld- en geluidsmateriaal zal bewaard worden.
Interaction design
Afhankelijk van de resultaten van het onderzoek zal bekeken worden of de iSkate app verbeterd kan worden. Op basis van de uitkomsten zal de app aangepast gaan worden en opnieuw getest worden.
15