1. CHI 2009-2010 1/9
Gebruikersinterfaces: verslag 1
Groep 11, De Durfals
Blog: http://dedurfals.blogspot.be/
Geert Claeys, 1e Master Ir CW
Vincent De Bruyne, 1e Master Ir CW
Kristof Helsen, 1e Master Ir CW
Livio Van Rymenant, 1e Master Ir CW
Abstract— Dit is het eerste verslag voor het vak Gebruikersinterfaces van groep 11: “De Durfals”. Wij hebben een ontwerp
uitgewerkt voor een applicatie die onderzoekers helpt bij het schrijven van papers. De applicatie focust vooral op het
gemakkelijker vinden en toevoegen van referenties. De belangrijkste uitdagingen waren voornamelijk een zinvolle evaluatie te
maken van onze eerste versie. Uit dit project hebben wij vooral geleerd dat feedback van het doelpubliek een belangrijk aspect
is bij het ontwikkelen van een gebruikersinterface.
Ingediend op: 11/03/2010
—————————— ——————————

2. CHI 2009-2010 2/9
1 IDEE
SPOF, Suggested Papers On the Fly, is een online editor voor wetenschappelijke papers die de gebruiker helpt bij
het schrijven van zijn paper. Ten eerste houdt de tool zich bezig met het suggereren van bruikbare papers. Dit gebeurt
tijdens het typen van de eigen paper. Ten tweede biedt de tool de mogelijkheid om op eenvoudige wijze de gebruikte
referenties aan te brengen.
Een eerste brainstorm1 bracht ons echter op een ander idee. De eerste idee was om een geavanceerde zoekrobot te
ontwikkelen. Op basis van persoonlijke informatie, zoals interesse, werkgebied en andere, kunnen efficiëntere resulta-
ten bekomen worden. Ten tweede voorziet de tool links naar:
1. gerelateerde papers. Deze worden gekozen op basis van de inhoud van de paper.
2. geciteerde papers. Deze zijn de papers die de auteur geciteerd heeft in zijn eigen paper.
3. gesuggereerde papers. Dit zijn papers die aanbevolen zijn door andere gebruikers.
Het vernieuwende aspect van deze tool bleek ver te zoeken. Duidelijke en sterke argumenten om onze tool te ge-
bruiken in plaats van een zoekrobot zoals Google Scholar of CiteSeer zijn niet overtuigend genoeg.
Een paper maakt gebruik van externe bronnen. SPOF is gebaseerd, net als ons eerste idee, op deze bronnen. Verge-
lijkbaar is het gebruik van gerelateerde teksten. Waar een gebruiker vroeger opzoekingen moest verrichten vóórdat hij
de paper ging schrijven, is het bij SPOF, dankzij de automatische zoekfunctie, mogelijk om tijdens het schrijven ge-
bruik te maken van de door het systeem voorgestelde teksten.
Het systeem bestaat uit de volgende functionaliteiten:
• Automatische zoekfunctie: Op basis van de inhoud van de ingevoerde tekst stelt de tool gerelateerde papers
voor. De relevante tekstdelen worden gehighlighted.
• Manuele zoekfunctie: De tool maakt het mogelijk om ook manueel te zoeken naar papers. Merk op dat deze
zoekfunctie geen onderdeel is van onze applicatie, maar gebruik maakt van een externe tool zoals Google Scholar of
CiteSeer.
• Bibliografie toepassing: Tijdens het schrijven is het mogelijk om de gebruikte referenties toe te voegen aan de
tekst.
Zelfevaluatie leidde tot de volgende resultaten:
Sterke punten Zwakke punten
Tijdswinst bij het toevoegen van referenties Het online schrijven van een verslag
Kleinere kans op het vergeten vermelden van be- Moeilijk uit te werken tot op applicatieniveau
langrijke papers binnen het onderzoeksgebied
1 Voor meer informatie aangaande de eerste idee, zie http://www.slideshare.net/liviovr/papertube-uitleg

3. CHI 2009-2010 3/9
2 STORYBOARD
Figuur 1: Storyboard
Dit storyboard2 toont de basiswerking van SPOF. Na het inloggen komt de gebruiker terecht op de homepage (1)
waar de recente papers staan opgelijst. Hij vult een titel in en klikt op ‘New’, waarna hij in het editor tabblad terecht
komt (2). Hier kan hij beginnen met het schrijven van een paper. Nu wilt de gebruiker gaan zoeken naar relevante pa-
pers. Hij klikt dus op de search tab en komt terecht in het search tabblad, dat als basis enkel een tekstvak en een zoek-
knop bevat (3). Na het intikken van een zoekterm klikt de gebruiker op ‘Search’ en de zoekresultaten worden in een
lijst weergegeven (4). Hij ziet nu een interessante paper en wilt hier meer over weten, dus klikt hij op de titel van die
paper (5). De gebruiker denkt dat hij deze paper kan gebruiken bij het schrijven van zijn paper, dus hij voegt deze toe
aan de ‘Added papers’ lijst. De gebruiker klikt nu op de editor tab (6) en begint te schrijven aan zijn paper (7). Rechts-
onderaan verschijnen de gesuggereerde papers, die de gebruiker kan toevoegen aan zijn referenties, net zoals de pa-
pers uit de ‘Added papers’ lijst. Hij ziet nu dat hij de paper over Web2.0 niet kan gebruiken en verwijdert deze door op
de knop met het kruisje te klikken links van de titel (8). Wanneer de gebruiker klaar is met schrijven, sluit hij de paper
en keert hij terug naar de homepage. (9) Nu wilt hij verder schrijven aan een vorige paper over Science 2.0 en klikt dus
op die titel (10).
Het storyboard dat hierboven te lezen is, is het storyboard over ons huidig idee. Het eerste storyboard3 was veel so-
berder en werd, in tegenstelling tot het huidige storyboard, niet verteld uit gebruikersperspectief, maar uit toepas-
singsstandpunt. Er werd dus teveel uitleg gegeven over features, in plaats van te focussen op hoe de gebruiker zal
werken met de toepassing.
2 Voor een videoversie, zie: http://www.youtube.com/watch?v=1GjUcZ8qh2M of onze blog.
3 Zie onze blog voor meer informatie

4. CHI 2009-2010 4/9
3 SCHERM-TRANSITIE-DIAGRAM
Figuur 2: Volledig scherm-transitie-diagramma
Het scherm-transitie-diagram geeft een overzicht van de flows die er kunnen gevolgd worden doorheen het pro-
gramma. Doordat de applicatie zeer flexibel is, zijn er veel flows mogelijk. De applicatie maakt gebruik van een tab
systeem. Dit wordt aangeduid in het scherm-transitie-diagram door middel van de groene kaders. Hiermee wordt
aangeduid dat deze tabvensters bereikbaar zijn van elk scherm in de applicatie. Deze aanpassing hebben we gedaan
omdat hiermee het diagramma minder druk wordt. De idee is afkomstig van een andere groep, maar de uitwerking
werd gepersonaliseerd.
Er werd gekozen om op de editor en home tab een search box aan te brengen. Deze maakt het voor de gebruiker
mogelijk om sneller te zoeken naar papers. Hij moet hierdoor niet meer langs Search start passeren. Dit is te zien in het
diagrama aan de pijl filled in search.
De opeenvolging van de schermen in de
search functie zijn gelijkaardig aan de flows
in hedendaagse search engines. Dit maakt
het gemakkelijk voor de gebruiker omdat hij
reeds vertrouwd is met deze flow.
Naast het totaal scherm-transitie-diagram
is er ook een gereduceerd diagram. In verge-
lijking met het totale heeft het gereduceerd
diagram geen logout pijlen. Hierdoor is het
geheel overzichtelijker.
Figuur 3: Gereduceerd scherm-transitie-diagramma

5. CHI 2009-2010 5/9
4 PAPIEREN PROTOTYPE
Figuur 4: Papieren prototype
Het doel van het papieren prototype is om te weten te komen of de ideeën achter onze toepassing aanslaan. Ook
kon er zo getest worden of alle functies zonder hulp konden overlopen worden, wat een idee geeft over de kwaliteit
van de uitgewerkte functionaliteit. Het prototype diende ook om proefpersonen een indruk te geven van hoe de appli-
catie er zou uitzien. Aan de hand hiervan konden ze feedback geven hoe de toepassing misschien zou moeten veran-
deren om het gebruik ervan te verbeteren.
Om deze doelstellingen en verwachtingen te halen stelden we aan onze proefpersonen de volgende vragen:
• Schrijf een paper.
• Maak gebruik van Suggested en Added Papers om een referentie toe te voegen aan de paper.
• Zoek op gerelateerd werk gebruik makend van de ingebouwde zoekfunctie.
• Geef een score (van 0 (slecht) tot 5 (zeer goed)) voor de ideeën suggested papers, add to bibliography en de
ingebouwde zoek functie.
• Opmerkingen over de uitwerkingen van de functionaliteiten van onze tool.
Tijdens de evaluatie met het papieren prototype zijn volgende belangrijke pijnpunten aan het licht gekomen:
• De Add to Bib knop bleek niet duidelijk te.
• De editor moest duidelijker uitgewerkt zijn.
• De Add… en Add to Current vroegen meestal ook om verduidelijking.

6. CHI 2009-2010 6/9
Andere punten die aangehaald werden zijn te zien in de onderstaande tabel.
Pijnpunten Aantal proefpersonen die dit Specifieke vragen
aanhaalden
Add to Bib 4/4 Wat? Hoe?
De editor 3/4 Soort? Save?
Add… en Add to Current 3/4 Wat?
Tab Systeem 1/4
Extra search box in editor 2/4 In wat zoekt het?
1/4 Waarom?
Uit de evaluatie kwamen ook nog volgende nuttige opmerkingen en voorstellen:
• Extra functionaliteit in de editor om papers en templates te kunnen inladen.
• Manier om externe referenties te kunnen uploaden.
• Settings optie om de manier van refereren te kunnen aangeven.
Uit bovenstaande resultaten van de evaluatie valt duidelijk op dat het refereren naar papers niet duidelijk is. De
naam van de knop en de plaatsing moeten beter. Hoe de referenties gebeuren moet beter worden uitgewerkt. Het pijn-
punt Add… en Add to Current was voor elke proefpersoon duidelijk na het gebruik.
Uit de evaluatie valt op te merken dat er zeer weinig fouten (2) zijn gebeurd tegen de mainflow van de applicatie.
Dit geeft aan dat het hoofddoel duidelijk is en het geheel niet overladen overkomt.

7. CHI 2009-2010 7/9
5 AANPAK VOLGENDE ITERATIE
De verschillende testpersonen hebben al enkele oplossingen voorgesteld, hoe zij het zouden oplossen. Deze moge-
lijke oplossingen en eigen voorstellen worden overlopen en afgewogen. De uiteindelijke oplossingen worden hieron-
der weergegeven.
• De Add to Bib knop bleek niet duidelijk te zijn.
Oplossing:
1. Hernoem de Add to Bib knop naar Add Reference.
2. Klik eerst op de knop Add Reference en klik dan in de tekst waar de referentie moet komen.
3. De vormgeving van de referentie kan worden aangepast volgens verschillende normen. Dit door het
toevoegen van een settings tab waar de gebruiker de gewenste norm kan kiezen.
Alternatieven:
1. De referentie wordt geplaatst waar de cursor staat.
2. De Add Reference knop bevat een drop down menu waar de gebruiker de norm van de referentie kan
kiezen.
• De editor moest duidelijker uitgewerkt zijn.
Oplossing:
1. De editor is compatibel met LaTeX en ook gewone tekstinvoer.
2. Een duidelijkere save knop maken en ook een autosave functionaliteit.
3. Door de autosave functionaliteit is het nu ook duidelijk dat wanneer er van tab veranderd wordt, de
inhoud van de editor niet verloren gaat.
Alternatieven:
1. De applicatie als plugin gebruiken in een bestaande editor.
• De Add… en Add to Current vroegen meestal ook verduidelijking.
Oplossing:
1. De gebruikers hadden de functionaliteit meteen door na een kleine uitleg. Voldoende is om dan een
vraagtekentje naast de knop te zetten die informatie weergeeft over de knop.
2. De lijst in de editor hernoemen van History naar Added papers.
Alternatieven:
1. Op de homepage een inleidend tekstje zetten dat de basisfunctionaliteiten uitlegt.
2. De twee knoppen samenvoegen in een Add to paper knop waarna er een popup verschijnt waar een
paper kan gekozen worden.
Voor een volgende evaluatie zal een statische HTML pagina gebruikt worden. SPOF biedt papers aan tijdens het
schrijven, wat in een papieren prototype niet voor te stellen is. Aangezien dit de kern is van onze applicatie, zal een
gesimuleerde webpagina de mogelijkheid geven om in een eenvoudige editor een paper te schrijven. Een kleine data-
base van papers zal gebruikt worden voor het zoeken en suggereren van papers, zodat de evaluatie meer realistische
resultaten zal geven.
De evaluatie zal gebeuren op basis van een aantal opdrachten die gelijkaardig zijn aan de opdrachten bij het papie-
ren prototype, maar geëvalueerd met andere maatstaven. Ten eerste moet de gebruiker een paper schrijven. Hierbij zal
gekeken worden wanneer de gebruiker twijfelt en niet weet wat te doen, en moet vragen wat bepaalde items op de
pagina betekenen. Ten tweede moet de gebruiker een bepaalde paper zoeken en deze toevoegen als referentie in zijn
eigen paper die hij in de eerste opdracht heeft geschreven. Hierbij zal de tijd gemeten worden die hij hiervoor nodig
heeft.

8. CHI 2009-2010 8/9
6 RESULTAAT
Uit de evaluatie met de proefpersonen kon besloten worden dat de idee achter onze applicatie bruikbaar is, mits en-
kele aanpassingen aan de uitwerking. In de secties “Papieren prototype“ en “Aanpak volgende iteratie” werden de
belangrijkste pijnpunten besproken met hun oplossingen en alternatieven. De pijnpunten zijn voornamelijk details en
liggen niet aan de grond van de basisidee.
Het feit dat we van idee veranderd zijn was een goede zaak. De eerste idee had in vergelijking met de nieuwe idee
niet genoeg inhoud en was eigenlijk iets dat al meermaals uitgewerkt is zoals in Google Scholar.
7 BESLUIT
Het ontwerpen van een gebruikersinterface kwam in deze iteratie uitgebreid aan bod. Dit bleek een grotere uitda-
ging dan eerder gedacht. Belangrijk is het zo snel mogelijk evalueren van de uitgedachte ideeën. Dankzij een papieren
prototype kan een snelle evaluatie tot stand komen. Eveneens geven onafhankelijke testpersonen de mogelijkheid klei-
ne en grotere gebreken al vroeg te ontdekken. Hieruit blijkt dat feedback één van de belangrijkste punten is bij het
ontwerpen van een gebruikersinterface.
Zoals reeds aangehaald in de vorige alinea is feedback voor ons het belangrijkste punt bij het ontwerp. Het bijhou-
den van een blog brengt eveneens voordelen met zich mee. Dit biedt namelijk de mogelijkheid tot feedback van de
medestudenten en eventueel andere geïnteresseerden.
Ten tweede hebben we geleerd dat er langer gebrainstormd moet worden. Eventueel kan dit in aparte brainstorm-
sessies. Dit geeft de optie tot een beter uitgewerkt idee. Eveneens is de kans groter dat een vernieuwd idee uit de bus
komt. De eerste idee aangaande de uitgebreide zoekrobot was bij nader inzien niet zo best. Met behulp van een uitge-
breidere brainstorm kon dit eventueel vermeden worden. Hieruit besluiten we dat een brainstorm goed georganiseerd
moet worden.
De nieuwe idee blijkt sterker dan de eerste. De aanpak om af te stappen van de eerste idee was bijgevolg een goede
keuze. Minder goed was dat we reeds veel tijd verspild hebben door de eerste idee uit te werken. Hieruit blijkt ook
weer dat een langere, en beter georganiseerde, brainstorm verlossing kan bieden.

9. CHI 2009-2010 9/9
APPENDIXi
Geert Claeys Vincent De Bruyne Kristof Helsen Livio Van Rymenant Totaal
Evaluatie mendeley 8 8 8 8 32
Storyboard 8 7 7 8 30
Scherm-transitie-diagram 7 9 8 9 33
Implementatie papieren prototype 9 8 8 8 33
Evaluatie papieren prototype 7 7 7 7 28
Aanpak volgende iteratie 2 2 2 2 8
Totaal 41 41 40 42 164
i: Alle uren zijn inclusief sessies op dinsdag (5u30)