CHI 2008-2009
1/12
Opgave 2: Papieren Prototype Thomas Van Durme, 1e Master CW Jelle Van Gompel, 1e Master CW Bart Timmermans, 2e Master CW Abstract — Dit verslag geeft een korte samenvatting van de werkwijze bij het uitdenken en ontwerpen van een concreet idee voor een Facebookapplicatie. Eerst en vooral biedt een ruwe brainstormsessie een enorm aantal willekeurige ideeën, die vervolgens selectief worden gerangschikt op basis van verschillende criteria. Sommige ideeën worden ook resoluut verworpen. Het aandelen spel met woorden komt hierbij als winnaar uit de bus. In een volgende stap worden ruwe schetsen van de GUI gemaakt en gebruikt om een schermtransitiediagramma op te stellen. Dit diagramma moet de gebruiker duidelijk maken wat hij te zien krijgt als hij op een bepaalde knop drukt. Het globaal verloop van de applicatie is op die manier vastgelegd. Ten slotte worden de meer gedetailleerde papieren prototypes als uitgangspunt genomen voor een think aloud-test. Terwijl een persoon als systeem fungeert en de gepaste papieren prototype-schermen aanbiedt, wordt aan de gebruiker gevraagd een actie succesvol uit te voeren en luidop zijn denkpatroon te citeren. Op die manier ontstaat een eerste idee over de mankementen en/of slechte punten in de interface. Rekening houdend met deze observaties, kan de gebruikersinterface beter gericht worden naar de noden van de gebruiker toe. Ingediend op: 29 maart 2009
—————————— ——————————
1
INLEIDING
Dit verslag levert een overzicht van de geboorte van de facebook applicatie “WordStock”. Belangrijk hierbij is de verworven inzichten uit de vorige iteratie niet uit het oog te verliezen. In de vorige iteratie heeft het team duidelijk geleerd met kritisch oog naar een gebruikersinterface te kijken. Kritiek geven op iets bestaands is natuurlijk altijd makkelijker dan zelf iets nieuws te bedenken. Daarom zal in deze iteratie getracht worden rekening te houden met dit kritisch oog van de gebruiker. Dit kan het best aangevoeld worden door het zelf bedenken, ontwerpen en ontwikkelen van een applicatie. In een eerste hoofdstuk wordt geschetst hoe het idee achter de applicatie tot stand is gekomen. Dit idee is ontsproten uit een intensieve brainstorm sessie gevolgd door een analytische selectie procedure van de ideeën uit de sessie. Na het tot stand komen van de functionele vereisten van de applicatie, werd begonnen aan het schetsen van het uiterlijk van de applicatie. Deze worden besproken in het derde hoofdstuk. In het volgende hoofdstuk wordt beschreven hoe, aan de hand van de schetsen, doorheen de applicatie kan genavigeerd worden. Het resultaat van dit alles is een papieren versie van de applicatie waarmee een think aloud evaluatie kon uitgevoerd worden. De resultaten van de evaluatie en conclusies die hieruit getrokken kunnen worden vormen het onderwerp van het laatste hoofdstuk.
2
BREINSTORM
2.1 Verloop De brainstormsessie start met pen en papier en het centrale woord FacebookApp. Redelijk vlot en op korte tijd worden enorm veel ideeën verzameld. Geen enkel idee wordt verworpen of afgekraakt en alles wordt genoteerd. Vaak wordt een algemeen idee, dat werd aangebracht door de ene persoon, uitgediept door de rest van het team. De online tool, MindMeister, bewijst zich hier bijzonder nuttig voor het maken van een brainstorm map. Met deze tool wordt de map niet alleen rechtstreeks online bijgehouden, ook wordt vervelend diagram tekenwerk bespaard. De brainstorm sessie zelf duurt ongeveer een klein uur met een korte pauze van vijf minuten. Na dit kleine uur bevinden er zich bijna 70 items op de brainstormmap. Bij afloop van de brainstorm sessie worden de algemene idee-concepten gescheiden van de concreet uitgewerkte ideeën. Vervolgens wordt elk concreet idee geanalyseerd op basis van ondertstaande criteria. • Absurd Applicaties die te absurd zijn, en eerder zijn ontsproten uit een te ver doorgedreven fantasie, worden relatief snel verworpen. Het gaat hier vooral om applicaties die ofwel té ‘inside-joke’-gericht zijn of waarvan het nut heel ver te zoeken is (bvb. de agenda van je vrienden aanpassen). Het zijn applicaties waarvan vermoedt wordt dat niemand er iets aan heeft, als ze zouden bestaan.
CHI 2008-2009
•
Complexiteit Hoewel dit eigenlijk geen criteria zou mogen zijn voor verwerping, speelt het toch een rol bij de keuze van een goede applicatie. Het gaat hier vaak om complex grafische applicaties (bvb. hoe je vrienden eruit zien binnen 10 jaar), maar ook om applicaties waarvan de technische scope ver buiten dit vak ligt.
•
Originaliteit Meestal worden nieuwe soorten applicaties verkozen boven kopiën van reeds bestaande applicaties. Meestal, omdat soms een bestaand idee kan worden geïmplementeerd op een manier die misschien beter werkt dan degene waarop ze is gebaseerd.
•
Gebruikersinteresse Binnen dit criterium wordt elk applicatie-idee te bekeken door de bril van een gebruiker. Zo worden applicaties bekomen waar de gebruikersgroep die eventueel geïnteresseerd zou zijn, te klein blijkt (bvb. Linuxterminal interface, een interface om facebook operaties uit te voeren via de commandoshell van linux), of applicaties waarvan de gemiddelde interessegraad bijzonder laag zal liggen (bvb. dansende paperclip, een applicatie waarbij nieuwe facebook events worden meegegedeeld door een dansende paperclip).
•
Statisch/dynamisch karakter En spel dat snel verveelt zal door weinig mensen lang volgehouden worden. Dergelijke applicatie was bijvoorbeeld een hoger/lager kaartenspel. Een toepassing moet verslavend werken, of moet alleszins kunnen blijven gebruikt worden, en mag niet ‘doodbloeden’ na zijn eerste gebruik. Vaak worden weinig-grafische multiplayer games leuker geacht dan sterk-grafische singleplayer games. Via deze laatste observatie wordt dan ook het criterium statisch/dynamisch vastgelegd. Facebook vormt een ideale framework om gebruikers via een applicatie of spel met elkaar te laten interageren. Applicaties waarin je je eigen muziek kan raten bijvoorbeeld lijken misschien wel leuk, maar zijn weinig dynamisch eens je dit eenmalig gedaan hebt.
2.2 Mindmap De afgewerkte mindmap-versie van de brainstormsessie is terug te vinden in FIGUUR 1. 2.4 Analyse Elk criteria uit punt 2.1, is natuurlijk geen doorslaggevend criterium op zich. Het gaat veelal om een combinatie van criteria, of gewoon over het feit dat de knoop ergens moet worden doorgehakt. Zo is het onderscheid bij de aanvaarde ideeën gemaakt via stemming op basis van persoonlijke voorkeur van elk teamlid afzonderlijk. De kleur van de bolletjes naast de aanvaarde ideeën geeft aan welk idee de meeste stemmen haalde. • rood: weinig stemmen • oranje: matig aantal stemmen • groen: veel stemmen Uiteindelijk wordt onderstaande top 3 bekomen: 1. Aandeelwoorden-spel, een spel waarin je in plaats van echte aandelen woorden koopt. Eén woord is meer waard dan het andere als het meer in het nieuws voorkomt (bijvoorbeeld aantal hits op news.google.com). Het is de bedoeling om te anticiperen op wat er in het nieuws gaat gebeuren, dit woord te kopen, en daarna terug te verkopen wanneer het zijn hoogtepunt bereikt heeft. 2. “Ge-zijt-zelf-den-tamagochi”, een spel waarin je jezelf eten en aandacht moet geven. Vermoed wordt dat de band bij deze tamagochi applicatie groot zal zijn omdat het de eigen persoon betreft. 3. Teken op de profielfoto van je vrienden, bij deze applicatie kunnen mensen op andere personen hun profielfoto tekeken. Via een puntensysteem wordt een maximum aantal wijzigingen aan iemand anders zijn foto opgelegd. Uit deze top 3 wordt de eerste toepassing unaniem als definitieve applicatie gekozen. De derde applicatie lijkt ook een heel leuk idee, maar uiteindelijk iets te zinloos, en gaat waarschijnlijk snel vervelen. De tweede applicatie biedt dan weer weinig interactiviteit met vrienden (tenzij het natuurlijk wordt uitgebreid naar een soort SecondLife-versie) en bovendien lijkt de tamagochi-hype lichtjes voorbijgestreefd. In deze tijd van financiële crisis en de poker-hype, lijkt het aandeelwoordenspel de meest opportune applicatie om verder uit te bouwen.
2/12
CHI 2008-2009
3
SCHETSEN
3.1 Toelichting In de eerste plaats wordt een lijst met functionaliteitsvereisten voor de applicatie opgesteld. Dit gaat van ‘aandelen kopen/verkopen’ tot ‘vrienden uitnodigen’ etc. Elke functionaliteit van deze ongestructureerde lijst wordt vervolgens gecategoriseerd. Het is snel duidelijk dat de notie van een profiel dient te bestaan waar de gebruikersinformatie en zijn aandelen worden bijgehouden. Een tweede vereiste is het aanbieden van de mogelijkheid tot koop of verkoop. Daarnaast dient ook de spelstatus van vrienden geraadpleegd te worden. Dit alles leidt tot een beslissing omtrent het globale verloop van de applicatie. Een tab-structuur lijkt geschikt om de functionaliteit van de applicatie in te plaatsen. Veel aandacht dient uit te gaan naar een goede positionering en naamgeving van de tabbladen. Een logische opdeling lijkt om de tab die de aandelen-portefeuille van de gebruiker weergeeft, te scheiden van de tab die de markt weergeeft waar aandelen kunnen gekocht en verkocht worden. Voorts is er een tab die de ranking weergeeft tussen de eindgebruikers, en de klassieke Invite Friends-tab die de gebruiker stimuleert zijn vrienden bij deze applicatie te betrekken. Initieel werd ook een Home-tab gemaakt, maar deze bleek al snel gemerged te kunnen worden met de MyShares-tab. Alle info van de gebruiker zal dus ook opgenomen worden in deze laatste tab. 3.2 Schetsen FIGUUR 2 geeft een klein overzicht weer van alle schetsen die gebruikt werden. De aparte schetsen zijn te vinden in FIGUUR 3, 4, 5 en 6.
4
SCHERM-TRANSITIEDIAGRAM
4.1 Toelichting Een schermtransitiediagramma is vrij eenvoudig aangezien er met tabs wordt gewerkt, nl. My Shares, Stockmarket, Ranking en Invite Friends. Tussen deze tabs schakelen, gebeurt door op deze tab te klikken. Om het overzichtelijk te houden, zijn niet al deze pijlen getekend in het diagramma, maar het weze duidelijk dat van elke tab naar elke andere tab kan overgegaan worden. Zowel in de My Shares als in de Stockmarket-tab, doet een klik op de Detail-button, een pop-up met alle details van deze share zien. Alle pop-ups zijn rechts van de stippellijn getekend. De Search-button in de Stockmarket-tab zal leiden tot een andere pop-up waarin een meer gedetailleerd resultaat is te zien van de opgegeven zoekopdracht. Elke share die wordt gevonden, zal ook via dezelfde Detail-pop-up gedetailleerd kunnen worden bekeken. De Invite-button en de Buy/Sell-button (niet getekend) kunnen eventueel ook nog uitgebreid worden met een kleine pop-up die dient als bevestiging of de gewenste actie al dan niet met succes voltooid is. 4.2 Diagram In FIGUUR 7 staan aan de linkerkant de 4 verschillende tabs, en aan de rechterkant de pop-ups. Het hele scherm is niet gedetailleerd getekend, aangezien dit gemakkelijk afgeleid kan worden uit de papieren prototypes van hoofdstuk 5. Enkel de relevante transitie-informatie (zoals buttons, tabs en search-fields) zijn weergegeven in dit diagramma.
5
PAPIEREN PROTOTYPE
5.1 Toelichting Het aanmaken van de papieren prototypes gebeurt in groep. Één iemand van het team werkt de tekeningen uit terwijl de rest beoordeelt, commentaar geeft en/of verbetert waar nodig. Aangezien de structuur van de applicatie relatief vastligt bij de schetsen, gaat het hier vooral om details, zoals bijvoorbeeld de exacte plaatsing van een knop. Dit leidt al snel tot een resultaat dat voor de think aloud-test kan worden gebruikt. Verdere verfijning in precies tekenwerk lijkt op dit punt overbodig, zolang de structuur en alle details maar zichtbaar zijn. 5.2 Prototype De papieren prototypes zijn te vinden in FIGUUR 8, 9, 10 en 11. Dit zijn de 4 verschillende tabs. FIGUUR 12 en 13 geven vervolgens de 2 pop-ups weer.
6
THINK ALOUD
6.1 Verloop Door middel van de papieren prototypes, worden nu twee personen onderworpen aan de think aloud-test. Één teamlid speelt de rol van systeem en schotelt de proefpersoon de juiste papieren schermpjes voor, terwijl de proefpersoon wordt gevraagd het spel te verkennen en te spelen. Bij aanvang, wordt de proefpersoon wel kort ingelicht dat het over een Facebook-applicatie gaat waar je Google-zoekwoorden als aandeel kan kopen en verkopen. Hieronder worden de geobserveerde resultaten van deze test weergegeven. Aangezien de resultaten van deze twee proefpersonen gelijkaardig zijn, lijkt het op dit moment overbodig nog meer proefpersonen aan deze test te onderwerpen. Eventueel kan na de doorgevoerde wijzigingen, nog een paar keer extra over de think aloud-test geïtereerd worden.
3/12
CHI 2008-2009
Ine (1e bachelor Burgerlijk Ir, voldoende PC-ervaring, geen Facebook-ervaring, geen beurservaring) • Merkt op dat de tab-namen geen onderling logisch verband hebben. (“Wat is het verband tussen aandelen en vrienden uitnodigen?”) •
Vindt het leuk dat ze initieel al geld heeft.
•
Vraagt zich af wat de grafiek in de MyShares-tab betekent. Ze vermoedt iets i.v.m. de aandeelkoers.
•
Ziet haar aandelen staan en merkt dat ze deze blijkbaar kan verkopen.
•
Verkoopt succesvol een Fortis-aandeel.
•
Gaat naar Ranking-tab en ziet de ranking van haar vrienden met bijhorende waarde.
•
Vraagt zich af wat het nut is van de highscores.
•
Gaat naar de Stockmarket-tab.
•
Vindt de ranking grappig van slechtste aandelen, aangezien niemand deze aandelen zal kopen.
•
Drukt op Details-button. De verschenen pop-up doet haar denken aan de details bij RollerCoaster Tycoon.
•
Ziet eigenlijk niet veel meer informatie in de pop-up dan op de hoofdpagina stond.
•
Drukt op Invite Friends-tab.
•
Vindt de fotootjes bij haar vrienden zeer amusant.
•
Nodigt Alice succesvol uit.
•
Vindt het dwaas dat ze gestimuleerd wordt haar vrienden met zulke onzin lastig te vallen.
•
Vindt het niet meteen duidelijk waar ze een share kan kopen, maar vindt dan toch uiteindelijk de Search-knop.
•
Vindt het onduidelijk dat de woorden niet per categorie staan (enkel de eerste 4 beste en de laatste 4 slechtste).
•
Vraagt zich af of ze ook onder nul kan gaan, en of ze haar saldo kan verbergen voor haar vrienden.
Nele (2e master Burgerlijk Ir/Architect, zeer goede PC-ervaring, Facebook-ervaring, geen beurservaring) • Ziet 4 overzichtelijke tabs en een leuk grafiekje. Een visuele voorstelling is altijd positief. Vermoedt dat het grafiekje laat zien waar het gekochte woord staat ten opzichte van de rest. •
Wil haar eigen naam als share kopen, maar snapt nog niet meteen hoet het allemaal juist werkt.
•
Gaat uiteindlijk naar Stockmarket.
•
Zoekt op ‘BoardX’.
•
Pop-up verschijnt en ze koopt succesvol een share.
•
Vindt het grappig dat de ranking van de slechtste shares ook zichtbaar is.
•
Gaat naar Ranking om te zien waar zij nu staat. Merkt da ze er (nog) niet bijstaat.
•
Vraagt zich af of de weergegeven highscores de highscores per zoekwoord zijn.
•
Weigert op Invite Friends te klikken.
•
Wordt aangespoord een share te verkopen en gaat terug naar MyShares.
•
Snapt het verschil niet tussen share value en liquid value.
•
Wil zelf de verkoopprijs van haar share bepalen, maar merkt dat de beurs blijkbaar niet op die manier werkt.
•
Drukt op een willekeurig aandeel om te verkopen.
•
Snapt de getalletjes voor de Buy/sell-knop niet direct.
•
Verkoopt uiteindelijk succesvol een share.
6.2 Resultaten Het wordt al snel duidelijk dat blijkbaar niet iedereen weet hoe het beurssysteem in grote lijnen nu juist werkt. Het duurt dan weliswaar even vooraleer duidelijk is wat de applicatie eigenlijk doet. De MyShares-tab als homepage gebruiken blijkt in dat opzicht dan wel een goed idee. Zo wordt sneller duidelijk dat het de bedoeling is aandelen te kopen en te verkopen. De grafiek is hier ook een goed hulpmiddel bij, alleen is niet meteen duidelijk wat deze nu precies weergeeft. Het kopen en verkopen van aandelen verloopt uiteindelijk ook vlot, wat wijst op een vlotte interpretatie van het concept markt. Het weergeven van de slechtste aandelen op de markt, geeft blijkbaar een humoristisch tintje aan het geheel. De Ranking-tab is ook duidelijk, op de highscore-ranking na. Dit is waarschijnlijk te wijten aan het feit dat deze ranking niet was ingevuld op het papieren prototype. De Invite Friends-tab is ook zeer eenduidig, zelfs voor de onervaren Facebook-gebruiker. De onduidelijke bedoeling van de getalletjes voor de Buy/sell-knop bij beide proefpersonen, is te wijten aan het feit dat het op de papieren prototypes niet duidelijk is dat deze getalletjes aanpasbaar
4/12
CHI 2008-2009
5/12
zijn (d.m.v. een cursor). Wanneer hen dit expliciet wordt gezegd, is ook de logica voor hen een feit.
6.3 Voorgestelde wijzigingen Een eerste belangrijk punt waar zeker rekening mee moet worden gehouden, is de soms heel beperkte beurskennis van de eindgebruiker. Aangezien dit eigenlijk heel kort kan worden uitgelegd, is een mogelijke wijziging wat informatie toe te voegen bij het begin van het spel, die zeer beknopt en duidelijk het doel van het spel beschrijven. Dit kan bijvoorbeeld weergegeven worden alvorens de installatie begint, als korte beschrijving van de applicatie. Een tweede punt is de onduidelijke grafiek. Belangrijk is zeker dat de asssen benoemd worden, en dat ook een titeltje wordt toegevoegd die beschrijft wat de grafiek weergeeft. Eventueel kan ook het verband duidelijker gemaakt worden met de cijfergegeven die rechts van de grafiek staan. De grafiek zou zo zijn steentje moeten bijdragen om in één oogopslag beter de bedoeling van het spel te snappen. Ook de highscore-tabel in de Ranking-tab heeft blijkbaar een ongelukkige benaming. De gebruiker verwacht namelijk in ieder geval een ranking te zien bij een klik op de Ranking-tab en is verward door een ranking te zien van ‘highscores’. Om het geheel van deze tab consistent te maken, wordt de naam ‘highscores’ beter vervangen door ‘all users’. De gebruiker klikt dan op de Ranking-tab en ziet een onderverdeling tussen een ranking waar enkel zijn vrienden zijn opgenomen, en een globale ranking van alle gebruikers van de applicatie.
7
BESLUIT
Dankzij deze opdracht werd vooral geleerd de ervaring opgedaan in de vorige iteratie, nu zelf te gaan gebruiken bij het ontwikkelen van een welgekozen Facebookapplicatie. Door de toegewezen rol van gebruiker, werd in de vorige iteratie al snel duidelijk hoe kritisch de blik van de gebruiker is. Door in deze iteratie zelf in de huid van de ontwikkelaar te kruipen, blijkt hoe vaak en hoe gemakkelijk deze kritische blik over het hoofd gezien wordt. Het maken van papieren prototypes voor think aloud-tests kan hierbij aangewend worden als een handig hulpmiddel. Op die manier kan snel en nog bij het begin van de applicatie-ontwikkeling zelf gecontroleerd worden of de gebruikersinterface al dan niet voldoet aan de verwachtingen. Aan de hand daarvan kunnen reeds bij de start van de ontwikkeling verbeteringen en/of wijzigingen aan de interface doorgevoerd worden. Ook werd het nut ingezien van deze methode iteratief toe te passen in verschillende toekomstige stappen binnen het implementatieproces. Een positieve opmerking aan deze iteratie is zeker en vast de brainstormsessie. Het team was vooral onder de indruk van het groot aantal ideeën dat er geproduceerd wordt op relatief korte tijd. Ook het selecteren van één enkele applicatie verliep vrij eensgezind. Ook de think aloud-tests bleken opnieuw zeer nuttig. Al na twee proefpersonen kwamen heel wat luidop-ideeën inhoudelijk overeen, wat meteen de sterkste knelpunten in de verf zet. Een punt van kritiek kan wel gegeven worden op de minder gedetailleerde uitwerking van het transitiediagramma en het schetsig karakter van de papieren prototypes. Wanneer hieraan meer tijd wordt gespendeerd, zou alles meer in detail kunnen uitgetekend worden. Hoewel het huidige prototype een duidelijk beeld geeft van de algemene applicatie, is het team zich bewust dat een gedetailleerdere uitwerking hiervan geen negatieve invloed zal hebben op het resultaat van een think aloud-test. Tot slot biedt deze iteratie ook het belangrijke inzicht dat niet alles wat duidelijk is voor de ontwikkelaar even duidelijk is voor de gebruiker. Er werd vooral geleerd dat de gebruikersinterface op zich zodanig duidelijk moet zijn dat hetgeen weergegeven wordt geen uitleg meer behoeft. Dit is de kracht van een goede gebruikersinterface.
APPENDIX Breinstorm Schetsen Scherm-transitiediagram Papieren prototype Think aloud Verslag schrijven Overige lestijden Totaal
Bart Timmermans 1,5 0,5 2 0 1 10 2 17
Thomas Van Durme 1,5 1 0 2 0,5 4 2 11
Jelle Van Gompel 1,5 1 0 2 0,5 4 2 11
Totaal 4,5 2,5 2 4 2 18 6 39
CHI 2008-2009
6/12
BIJLAGE
FIGUUR 1. Mindmap van de brainstormsessie.
FIGUUR 2. Overzicht schetsen.
CHI 2008-2009
7/12
FIGUUR 3. Schets MyShares-tab.
FIGUUR 4. Schets Market-tab.
CHI 2008-2009
8/12
FIGUUR 5. Schets Ranking-tab.
FIGUUR 6. Schets Invite Friends-tab.
CHI 2008-2009
9/12
FIGUUR 7. Scherm-transitiediagramma.
CHI 2008-2009
10/12
FIGUUR 8. Papieren prototype MyShares-tab.
FIGUUR 9. Papieren prototype Stockmarket-tab.
CHI 2008-2009
11/12
FIGUUR 10. Papieren prototype Ranking-tab.
FIGUUR 11. Papieren prototype Invite Friends-tab.
CHI 2008-2009
12/12
FIGUUR 12. Papieren prototype Details-pop-up.
FIGUUR 13. Papieren prototype Search-pop-up..
