Information Visualisation

Information Visualisation Met betrekking tot HollandDoc Docupedia Laura Wagenaars HKU, KMT, DMD 3, 2009 Onder begeleiding van Bibi Straatman

Inhoud Inleiding State of the art

3 4

3D visualisatie Complexe netwerken Aan tijd verbonden

4 6 8

Casus 1: Marumushi’s Newsmap

9

De site De vorm en zijn geschiedenis Treemaps met beeld Treemap voor Docupedia Mogelijke problemen Conclusie

9 10 12 13 14 14

Casus 2: Digg Pics

15

Het onderzoek Het eindproduct Soortgelijke vormen Toepassing voor Docupedia Mogelijke problemen Conclusie

15 16 17 18 19 19

Casus 3: The Million Dollar Homepage

20

De site Toepassing voor Docupedia Mogelijke problemen Conclusie

20 21 23 23

Casus 4: Traces Du Sacré

24

De site Soortgelijke site Visuele oplossingen Conclusie

23 26 27 28

Conclusie

29

Criteria Mijn bevindingen Suggestie Mogelijke belemmeringen

29 29 30 33

Literatuurlijst

34

Boeken Papers Websites

34 34 34

2

Inleiding In het kader van het derde jaar DMD (Digital Media Design) heb ik samen met drie andere studenten een externe opdracht via school. De opdrachtgever is HollandDoc (initiatief van de VPRO). HollandDoc is een multimediaal documentaire platform. Voor het video-on-demand gedeelte op www.hollanddoc.nl, nu nog ‘kijk & luister’ genaamd, moet een nieuwe manier van informatie visualisatie komen. Deze nieuwe website of webapplicatie zal Docupedia gaan heten.

“Webapplicatie is een term die wordt gebruikt voor een programma dat op een webserver draait en via de webbrowser kan worden benaderd.” (http://nl.wikipedia.org/wiki/Webapplicatie , 2009)

De bedoeling is om alle informatie visueler te maken en om alle informatie rondom de documentaires op HollandDoc te koppelen aan de documentaires. Docupedia staat los van de huidige huisstijl van HollandDoc of de publieke omroepen. Het mag een volledig losstaand onderdeel worden. Docupedia mag experimenteel zijn, maar simplicity1 en web useability2 staan bovenaan. De doelgroepen zijn vooral de VPRO-kijkers, documentaireliefhebbers, studenten en filmmakers. Bij veel digitale interactieve data visualisaties heb je te maken met een enorme hoeveelheid resultaten. In dit geval zijn dit de ± 750 videobestanden van HollandDoc. Deze bestanden moeten op een juiste manier ontsloten worden. Organisatie en representatie zijn hierbij de hoofd perikelen. In deze paper ga ik verschillende manieren van datavisualisatie onderzoeken met betrekking tot web usability, overzichtelijkheid en de attractieve waarde. Samengevat ga ik onderzoeken wat een goede of de beste manier is om de content van Docupedia te visualiseren. Mijn hoofdvraag of probleemstelling is dus: Hoe kan de visualisatie van de informatie voor Docupedia geoptimaliseerd worden met behoud van web usability, overzichtelijkheid en attractieve waarde? Mijn deelvragen zijn: ™ Welke manieren van datavisualisatie zijn er al? (State of the art) ™ Wat zijn mogelijke visualisatievormen voor Docupedia? (Casussen) Wat is de meerwaarde van deze vormen voor Docupedia? Hoe kunnen deze vormen toegepast worden op Docupedia? Wat zijn mogelijke problemen binnen deze vormen betreft Docupedia? Wat zijn de voor- en nadelen van deze vormen voor Docupedia? ™ Wat is de beste oplossing om het ontwerp voor Docupedia overzichtelijk, gebruiksvriendelijk en visueel aantrekkelijk te maken? (Conclusie)

1 Een research project van John Maeda om manieren te vinden voor mensen om hun leven makkelijker te maken met betrekking tot groeiende complexiteit. In deze context: het zo makkelijk en overzichtelijk mogelijk over laten komen van alle complexe data in het ontwerp. 2 Een term die wordt gebruikt met betrekking tot gebruiksvriendelijkheid van websites en webapplicaties. Belangrijk hierbij kan zijn: informatie duidelijk en beknopt weergeven, informatie weergeven in een logisch verband en volgorde, intuïtieve interactie etc.

3

State of the art 3D visualisatie 3D is een enorme hype geweest en nog steeds wordt er veel mee geëxperimenteerd. Je kunt vaak rondkijken in de gehele 3D-ruimte door middel van de cursor te bewegen. Dit levert indrukwekkende beelden op, alsof je de ruimte echt ervaart, maar praktisch is het vaak niet. Het is meestal lastig om op elementen te klikken, omdat de gehele omgeving meebeweegt. Verder is het ook lastig om een overzichtelijke site te maken in 3D met massale content. De website van Kinki kappers heeft heeft een fotogallerij wat ik een slecht voorbeeld vind van 3D visualisatie (fig.1).

Fig.1 (http://www.kinki.nl/)

In fig.2 zie je al wat er gebeurt, wanneer je met de cursor iets teveel naar links beweegt. De afbeeldingen schuiven snel op naar rechts. Alleen wanneer je in het midden van de afbeeldingen staat met de cursor, beweegt er niets en kun je er op klikken.

Fig.2

Vervolgens zoomt het beeld in en kun je door middel van ‘volgende’ en ‘vorige’ knoppen afbeeldingen bekijken die in de aangeklikte rij staan (fig.3). Om de afbeeldingen te bekijken die boven of onder de aangeklikte afbeelding staan moet je daarentegen weer op de afbeelding klikken, zodat deze weer uitzoomt en dan pas kun je een andere rij aanklikken en zoomt deze weer in. Een hele hoop omwegen dus om makkelijk content te bekijken.

Fig.3

4

Flash 3D of Papervision is een 3D simulator voor Flash die veel wordt gebruikt om 3D visualisatie op het Internet mogelijk te maken (fig.4 en 5).

Fig.4 (http://www.whitevoid.com/application.html)

Fig.5 (http://www.citrinitas.com/papers/bridgeproject-site/index.html)

De TED Sphere (fig.6) van Bestiario.org is ook een voorbeeld van 3D visualisatie en zeer waarschijnlijk met Papervision gemaakt. Dit researchproject maakt gebruik van de API van TED.com om video’s in te laden.

“Een API of Application programming interface is een verzameling definities op basis waarvan een computerprogramma kan communiceren met een ander programma of onderdeel (meestal in de vorm van bibliotheken). Een API definieert de toegang tot de functionaliteit die erachter schuil gaat. De buitenwereld kent geen details van de functionaliteit of implementatie, maar weet dankzij de API wel hoe deze kan worden aangesproken. Een voordeel hiervan is dat met een API meerdere implementaties benaderbaar kunnen zijn, zolang deze maar voldoen aan de API.” (http://nl.wikipedia.org/wiki/Application_Programming_Interface , 2009)

Al deze video’s zijn aan elkaar gelinkt en vormen een grote bal. Via een klein navigatiescherm linksboven kun je kiezen om naar de buitenkant of de binnenkant (fig.7) van de Sphere te kijken. Je kunt ook de radius veranderen, waardoor de video’s dichter op elkaar of juist verder van elkaar komen te staan. Als je op info klikt en je hovert (met de cursor ergens overheen schuiven) over een video, krijg je daar informatie over te zien en wanneer je op een video klikt zoom je daarop in en speelt de video af. Je kunt er heerlijk in verdwalen en het is zeker entertainment, maar niet optimaal voor zoeken, omdat je geen goed overzicht hebt van de video’s.

Fig.6 (http://www.bestiario.org/research/videosphere/)

Fig.7

5

Complexe netwerken Kleur georiënteerd Op het Internet zijn ontelbaar veel voorbeelden te vinden van gevisualiseerde complexe netwerken. Op VisualComplexity.com kom je ze vooral tegen. Deze site verzamelt research en experimentele projecten van anderen betreft het visueel maken van data en netwerken. Nuthinking.com heeft een dergelijk experiment gedaan. In Tagged Colors 03 (fig.8) heeft Nuthinking databasegegevens van de groep colorfields van Flickr gebruikt. De applicatie vertegenwoordigd het verband tussen kleuren en woorden. Wanneer je hovert over een tekst/kleurvlak zie je het verband tussen dat vlak en andere kleuren en teksten (fig.9). Je kunt ook op andere manieren navigeren door middel van filters en een zoekveld. Het principe van hover over een vlak om een verband te zien zou kunnen passen bij Docupedia. Op het moment dat je hovert over een documentaire, zou relevant materiaal kunnen oplichten, zoals bij deze applicatie.

Fig.8 (http://www.nuthinking.com/did/tagged_colors_03/)

Fig.9

Mindmap LJNet (fig.10) van Patrick Barry is ook een goed voorbeeld van een visualisatie van een netwerk. Één afbeelding staat centraal met daar omheen een direct netwerk en daar omheen weer een indirect netwerk. Voor Docupedia zou dit bijvoorbeeld om een maker kunnen gaan waar omheen zijn/haar documentaires te zien zijn en daar omheen weer allerlei relevante materialen als artikelen, onderzoekers etc.

Fig.10 (http://www.patrickbarry.com/projects/ljnet/index.php)

6

Clusters of groeperingen Een andere visualisatie mogelijkheid is in clusters of groeperingen. Zo heeft iedere cluster een centraal punt en loopt het meest irrelevante materiaal over in een andere cluster. Dit voorbeeld (fig.11) komt uit onderzoeksmateriaal voor de Strp-festival website dat ik in mijn stage bij Edhv heb gedaan.

Fig.11

7

Aan tijd verbonden TimeTube (fig.12) is weer een webapplicatie die gebruik maakt van een API, die van YouTube. De applicatie laadt content, relevant aan de zoekterm die invult, in en zet deze in een chronologische volgorde op een tijdlijn. Aan de grootte is te zien welke video’s het meest bekeken zijn.

Fig.12 (http://dipity.com/mashups/timetube)

Een andere manier van het chronologisch weergeven van video’s is in laagjes. Dit is wat De Negende doet (fig.13). Op deze site kun je snuffelen in het verleden van Eindhoven door middel van een zoekvenster, de menu-items actueel en projecten en via de tijdlijn links. Je kunt in de tijdlijn aan de bolletjes zien waar de content zit. Door de schuifbalk heen en weer te schuiven zie je dat de content in een chronologische volgorde over elkaar heen ligt. Je kunt ook nog zoomen in de tijdbalk, waardoor je alle content tegelijk kunt zien of juist content uit een specifieke tijd. Verder zijn er filteropties voor video, audio, beeld en tekst. Het zoeken kan hier dus op vier verschillende manieren. Ook is er nog een andere weergave optie, waarbij alle content overzichtelijk in een grid zijn weergeven. Voor ons interaction designers werkt dit goed, maar het is al gebleken dat de ‘normale mens’ moeite heeft met het navigeren in deze vorm en dan met name door middel van de tijdbalk, hoewel dit misschien juist het meest innovatief aan deze vorm is. De Negende is daarom ook meer een webapplicatie dan een website.

Fig.13 (http://www.denegende.nl)

Reguliere website theorieën zijn totaal niet van toepassing op een webapplicatie. Er is een leer curve, mensen moeten even moeite doen om de webapplicatie te begrijpen en te leren hoe het werkt. Vervolgens kunnen ze er mee werken. Als mensen iets als een website beschouwen vervalt de wil om het aan te leren, ze willen het meteen snappen. Het gebruik van een applicatie voelt bijna logisch om aan te moeten leren. Bedenk maar de eerste keer dat je photoshop opende. Het is dus de vraag of mensen de moeite willen nemen te leren hoe een webapplicatie werkt. Dit kan de gebruiker tot meer kennis leiden of het kan juist de valkuil zijn. Toch zijn webapplicaties in de toekomst waarschijnlijke niet te vermijden en moet de gebruiker er aan toegeven.

8

Casus 1: Marumushi’s Newsmap De site Marumushi’s Newsmap (fig.14), door Marcos Weskamp ontwikkeld in 2004, is een webapplicatie die titels van nieuwsitems inlaadt en de links naar de bronnen van deze nieuwsitems. Er zijn verschillende kleuren die staan voor de zeven categorieën die er zijn. De felheid van de kleur zegt hoe recent het nieuws is en de grootte staat voor het meest gelezen, voorkomende of meest aangeklikte nieuws. Je krijgt dus snel een overzicht van wat mensen in de wereld bezighoudt. Je kunt de categorieën onafhankelijk van elkaar aan- of uitzetten (fig.15). Een andere filteroptie is op land of werelddeel. Deze kun je ook onafhankelijk van elkaar aan- of uitzetten en als laatste kun je ook op tijd filteren: vandaag, gisteren, afgelopen maand etc. De informatie is te zien in de squarified- en standaard weergave (fig.15 en 16). Het enige wat ik mis in deze site is een zoekvenster.

Fig.14 (http://www.marumushi.com/apps/newsmap/newsmap.cfm)

Fig.15 (Squarified weergave gefilterd)

Fig.16 (Standaard weergave)

9

De vorm en zijn geschiedenis Marumushi’s Newsmap heeft een vorm die ‘treemap’ wordt genoemd. Een treemap is een andere manier van een boomstructuur visualiseren, waardoor je een duidelijker inzicht krijgt in informatie. Elke tak van een boomstructuur is een rechthoek die weer gevuld is met rechthoeken die subtakken vertegenwoordigen (fig.17).

Fig.17 (http://www.oreillynet.com/ruby/blog/2006/07/)

De interactieve online treemap is pas in de jaren 90 uitgevonden door Ben Schneidermann en werd in eerste instantie gebruikt om de structuur van bestanden, mappen op harddisks visueel te maken. Later ook voor andere doelen zoals business, zie ‘Map of the market’ (fig.18, 1998, door Martin Wattenberg).

Fig.18 (http://www.smartmoney.com/map-of-the-market/)

“…the Map of the Market introduced a new algorithm designed to create tiles that were close to square, making for a display that is more legible and easier to interact with.” (Martin Wattenberg, http://www.bewitched.com/marketmap.html, 1999) Volgens Martin was Jarke van Wijk rond dezelfde tijd bezig met dit nieuwe algoritme. In de paper Squarified Treemaps (2000) beschrijven Jarke van Wijk, Kees Huizing en Mark Bruls deze uitvinding in termen tot aan de techniek.

10

In 2004 presenteren David A. Carr en Thomas Bladh de information visualisation tool Step Tree (fig.19). Daarmee introduceerden zij een 3D treemap.

Fig.19 (http://www.sm.luth.se/csee/csn/visualization/filesysvis.php)

In 2008 gaan Mark Giereth, Harald Bosh en Thomas Ertl een stapje verder met hun 3D treemap door middel van een 2D textuur er overheen te plaatsen (fig.20).

Fig.20 (Mark Giereth Harald Bosch Thomas Ertl: A 3D Treemap Approach for Analyzing the Classificatory Distribution in Patent Portfolios, 2008)

11

Treemaps met beeld Ook met beeld is al geëxperimenteerd in de treemap vorm. PhotoMesa3 is een voorbeeld van een applicatie waarmee je afbeeldingen kunt laden uit verschillende mappen en deze afbeeldingen worden dan in een treemap vorm weergegeven (fig.21). De mappenstructuur wordt gezien als de boomstructuur waar de treemap op gebaseerd is. Het bijzondere aan deze applicatie is dat je kunt zoomen in de treemap, zelfs tot je maar één enkele afbeelding groot in beeld hebt.

Fig.21 (http://www.cs.umd.edu/hcil/photomesa/)

Niet alleen experts zijn geïnteresseerd in treemaps. Carl Tashian heeft ook zo zijn ideeën over treemaps. Hij geeft een voorbeeld van verschillende foto’s in verschillende maten met een bepaalde hiërarchie en door de inhoud van de foto’s vertelt het geheel al snel een verhaal (fig.22).

“Does this not tell a story just as well? Of course, there are fewer dimensions to the data: the photograph shows an event, the size shows how much I like the photograph (which guides the story), the location gives a chronology to the story, and a rollover text box on each photo (which I didn’t do) might show the location, date, time. Clicking on the photo could reveal a larger version.” (Carl Tashian, 2004, http://tashian.com/carl/archives/visual_art_design/)

Fig.22 (http://tashian.com/carl/archives/visual_art_design/)

3 Project van Ben Bederson, Bongwon Suh en Hyunmo Kang rond 2001. Gebaseerd op onderzoek van het Human Computer Interaction Lab.

12

Treemap voor Docupedia Marumushi’s Newsmap maakt gebruik van filters om te navigeren binnen de site. Dit werkt goed bij een treemap en kan weldegelijk gebruikt worden bij Docupedia. Het stramien van een treemap voor Docupedia zou er dan zo uit kunnen zien als in fig.23 of fig.24, twee verschillende vormen van een treemap. Links in het witte gedeelte in fig.23 zie je alle directe mogelijke manieren van zoeken binnen de site. In dit voorbeeld zijn dit: een zoekvenster, een filter op bestandsoort, categorie, thema en op ‘sorteer op’. ‘ Gerelateerd aan’ (bijvoorbeeld recent nieuws) en ‘uitzending gemist’ zouden ook onderdeel kunnen zijn van ‘sorteer op’. Zo geef je een actualiteitswaarde mee. Iedere filter kun je aan en uitzetten. Je kunt zo ook meerdere filters tegelijk aanzetten.

Fig.23

Een goede optie zou hier zijn om de volgorde van categorieën te kunnen bepalen, bijvoorbeeld d.m.v het slepen van deze categorieën in bepaalde volgordes. Zo kan de gebruiker aangeven welke categorieën hij het belangrijkste vindt uit de gekozen categorieën. Een simpele lijst weergave lijkt me wel noodzakelijk voor een site als Docupedia, dus moet er een mogelijkheid zijn om te switchen van treemap- naar lijst weergave. Deze optie staat nu ook links onder in fig.23 geïllustreerd. Voor het gemak is de rest van de ruimte gebruikt voor de treemap zelf. Je ziet al dat er duidelijk moet worden welke content waaronder valt, wat het is etc. De ruimtes binnen de treemap moeten duidelijk afgebakend zijn. In dit voorbeeld heb ik het duidelijk gemaakt door middel van kleur per categorie, zoals in Marumushi’s Newsmap. Voor ieder soort bestand zou je met icoontjes kunnen werken. De felste kleur staat hier bijvoorbeeld voor het meest recente bestand en de grootte voor de populariteit van het bestand.

Fig.24 (squarified treemap met content van HollandDoc ter illustratie)

13

Mogelijke problemen 1. Een overzichtelijk resultaat geven na gebruik van filters Zoals in fig.23 bevat iedere categorie een kleur. Wat als je nu filtert op alleen de meest recente bestanden? Als je alle recente bestanden bij elkaar wilt zien, zullen alle kleuren door elkaar lopen en misschien klopt de treemap structuur dan niet meer of is het een chaos (fig.25). Een oplossing kan zijn dat de resultaten altijd gebaseerd zijn op categorieën. De categorieën die zijn geselecteerd zijn dan weer als een treemap in het resultaat te zien. De gehele categorie waar het recentste bestand zich in bevindt komt nu vooraan. Binnen deze categorie vind je dan de meest recente bestanden van deze categorie. Nu is de warboel van kleuren wel opgelost, maar heb je geen totaal overzicht van de meest recente bestanden. Fig.25

2. Een totaal consistent ontwerp Met name pagina’s na het klikken op een video zullen een andere indeling krijgen dan de overzichts- , home- , en zoekpagina. Het ontwerp voor deze indeling mag niet teveel afwijken van het hoofdontwerp. De indeling van makers kan ook een probleem hierbij zijn. Zij kunnen namelijk niet maar één kleur bevatten uit één categorie, want documentairemakers kunnen binnen meerdere categorieën documentaires maken. 3. Relevant materiaal koppelen In de treemap kan je wel meerdere materialen laten zien, maar niet makkelijk aangeven hoe en waaraan deze zijn gekoppeld. In een subpagina kun je dit wel aangeven. Wanneer je op een video klikt zou je bijvoorbeeld de maker kunnen zien, relevante artikelen, andere video’s binnen deze categorie of relevant aan de inhoud van de video etc. 4. Teveel data voor de treemap HollandDoc heeft een immens grote database aan video’s en andere materialen. Deze kun je niet allemaal overzichtelijk in een treemap stoppen. Een oplossing kan zijn dat je kunt inzoomen op een enorme treemap. Een andere oplossing kan paginering zijn. Dan krijg je meerdere pagina’s met treemaps, maar is de eerste pagina een resultaat van een x-aantal bestanden. Je zou ook als gebruiker zelf kunnen bepalen hoeveel je in de treemap wilt zien. Of net als TED.com kunnen alle overige bestanden als links aangeboden worden onderaan de pagina, onder de visualisatie. 5. Oud materiaal niet ondergegraven laten raken Misschien is dit een algemene vraag voor Docupedia, maar zeker in een treemap zal het lastig zijn oud materiaal tussen het nieuwe en het populaire materiaal te plaatsen. Dit zal vooral inhoudelijk opgelost moeten worden. In mijn conclusie van de gehele paper kom ik hier nog op terug.

Conclusie De treemap binnen de interactieve computerwereld is nog steeds een veel besproken vorm, waarmee nog steeds geëxperimenteerd wordt. Voor zover ik gevonden heb lijkt er nog geen interactieve treemap met videomateriaal te bestaan, laat staan met verschillende bestandsformaten als video, afbeeldingen en teksten. Als dit blijkt, zou deze vorm niet alleen voor HollandDoc, maar misschien ook wel wereldwijd innovatief zijn en wel eens veel belangstelling kunnen krijgen. Een treemap is niet al te moeilijk te maken, maar om deze interactief te krijgen en overzichtelijk, gebruiksvriendelijk en consistent te ontwerpen is een enorme uitdaging. Het zal in ieder geval beter zijn om bij deze vorm alleen met videobestanden te werken om veel van deze problemen te voorkomen.

14

Casus 2: Digg Pics Het onderzoek Digg.com is een site waar je posts (berichten op een blog) kunt beoordelen. Wanneer je een post goed vindt, klik je op ‘digg’. Labs.Digg.com onderzoekt manieren voor het weergeven van beeldmateriaal van Digg.com en zijn populariteit. Pics is een dergelijke API van Digg (ontworpen door Stamen Design). In het begin van hun onderzoek voor Pics is Labs begonnen met fig.26. De meest populaire afbeeldingen worden het grootste weergeven en krijgen de meeste ruimte om zich heen.

Fig.26 (http://content.stamen.com/digg_pics_is_live)

Dit geeft een spectaculair beeld. Er wordt hier een hiërarchie en zelfs een verhaal zichtbaar, maar er was kritiek.

“while it's great to be able to see what people are paying attention to at any given moment, the visualizations in Digg Labs are also supposed to give people a better way to find new content that people haven't already jumped all over. So we needed a way to show more images, and not necessarily exclusively focus on what was already popular.” (http://content.stamen.com/digg_pics_is_live)

Dus ze plaatsten dit principe in een horizontaal stramien (fig.27).

Fig.27

Het grootste probleem was echter nog steeds hoe ze nog veel meer informatie konden laten zien in één keer. Uiteindelijk hebben ze toch gekozen voor een zelfde formaat voor ieder beeld (fig.28). Zo, vindt Digg, weet je tenminste waar je moet kijken en is het geen chaos.

15

Fig.28

Later hebben ze kleine effecten toegevoegd om te laten zien welke afbeeldingen beoordeeld zijn en hoe vaak. Bijvoorbeeld: des te vaker een afbeelding is beoordeeld des te vaker het herhaald wordt.

Het eindproduct In het eindproduct zie je verschillende lagen met afbeeldingen. Deze lagen blijven zich vullen met beeldmateriaal, wat ik persoonlijk echt irritant en verwarrend vind. Bij hover over een laag zie je pas hoe de laag heet of onder welke categorie het valt (fig.29). Bij het klikken op een laag worden de afbeeldingen in die laag groter en na het klikken op een afbeelding zie je weer een beknopte omschrijving. Dat de applicatie zich blijft vullen met beeld vind ik persoonlijk verwarrend werken. De afbeeldingen die je ziet, veranderen hierdoor telkens van locatie. Wanneer je klikt op een laag, staat deze wel stil en kun je in deze laag wel op je gemak alle afbeeldingen bekijken. Betreft de vage weergave van de categorieën ligt het eraan wat je doelen zijn, maar deze weergave of menustructuur lijkt mij uiterst belangrijk en zal dus zichtbaar moeten zijn. De applicatie loopt verder wel vloeiend en is redelijk overzichtelijk, maar toch is het een hoop geklik, voordat je ziet wat iets is. Fig.29 (http://labs.digg.com/pics/)

Deze vorm is verticaal ook zeker interessant (fig.30). Zo valt de hiërarchie minder op. Toch ontkom je in een ontwerp voor Docupedia niet aan een hiërarchie. Je kunt alleen de hiërarchie zo klein mogelijk maken, wanneer je wilt dat de content gelijk aan elkaar is. Links: Fig.30

16

Soortgelijke vormen Fig.31 komt uit onderzoeksmateriaal voor de Strp-festival site, wat ik op mijn stage bij Edhv heb mogen doen. Ik heb de afbeelding aangepast op een mogelijke indeling van Docupedia’s content. In dit geval heb ik een aantal categorieën opgesteld als een menustructuur. Wat vooraan staat is het grootst en wordt als het belangrijkst gezien. Misschien kan de gebruiker wel de rijen verslepen en zo zelf een hiërarchie bepalen. Bijvoorbeeld: de gebruiker vindt de makers interessanter en sleept deze laag naar links, waardoor de afbeeldingen in deze rij groter worden en de andere rijen schuiven simpelweg op naar rechts. Een mogelijke andere indeling kan zijn, dat de rij met de grootste video’s een categorie is waar de gebruiker heeft aangegeven in te willen zoeken en de andere rijen relevant materiaal zijn aan de eerste rij. Iedere rij die rechts van de andere staat is relevant aan de rij aan links van deze of iedere rij naar rechts is relevant aan de meest linker, maar des te meer naar rechts, des te minder relevant. En natuurlijk is deze vorm ook verticaal te bekijken (fig.32).

Fig.31

Fig.32

Kristina Dragomir heeft ook een duidelijke hiërarchie in haar site door middel van rijen (de tabbladen links), alleen is hier telkens maar een rij content zichtbaar (fig.33). Wanneer je op een tabblad klikt, schuift deze naar boven en verandert de hiërarchie. Hetzelfde principe zit in de afbeeldingen, maar dan horizontaal. Wanneer je op een afbeelding klikt, schuift deze naar links en wordt groter. Deze site ziet er overzichtelijk uit en het is redelijk snel te begrijpen hoe het navigeren in deze site werkt. Maar hoe kan dit systeem toegepast worden op een site met een massale content?

Fig.33 (http://www.kristinadragomir.com/)

17

Toepassing voor docupedia

Fig.34

Fig.34 is een combinatie van Labs.Digg en van fig.32. Wederom kunnen filters werken als een menustructuur. Je kiest een soort, een categorie of een thema en je sorteert het, bijvoorbeeld zoals hierboven, op random. Bij random zou je verschillende rijen met bijvoorbeeld video’s kunnen zien met verschillende criteria, zoals populair, recent, relevant aan nieuws, makers, thema van de week etc. Anders kun je bijvoorbeeld video’s kiezen uit een of meerdere categorieën en deze sorteren op datum (recent). Random lijkt een goede optie voor binnenkomst. Er is altijd een hiërarchie zichtbaar, maar ook hier kan het interessant zijn voor de gebruiker invloed te hebben op deze hiërarchie, door de lagen met video’s te kunnen verplaatsen. Misschien is het ook wel zo dat, als in fig.33 wanneer je daar op een titelbalk of tabblad klikt, dat de pagina zich vult met video’s uit alleen maar deze categorie. Bij hover over een video kun je weer heel snel informatie weergeven hierover. Toch lijkt me ook hier een optie voor lijst weergave niet overbodig.

18

Mogelijke problemen 1.

Alle of meer content laten zien op één pagina tegelijk.

Bij een complexere vorm zal dit altijd een probleem zijn. TED lost dit op door overige content onder de visualization weergave in een sitemap-vorm te plaatsen. In dit geval zou het ook kunnen door middel van pijlen naar rechts (volgende pagina) en naar links (vorige pagina) te plaatsen of door middel van horizontaal te scrollen. Waarom? Deze opmaak is horizontaal. Een beweging naar links of rechts kan goed samengaan. De vraag is alleen of de volgorde dan nog klopt, aangezien je ook nog een verticale hiërarchie hebt die kan hangen met de horizontale hiërarchie. 2.

De hoeveelheid rijen

Hoeveel rijen zijn er aanwezig of zijn deze variabel en waardoor wordt dit bepaald? Deze vragen zijn nodig te stellen, omdat je bijvoorbeeld, wanneer je alleen zoekt op makers je misschien maar één rij met afbeeldingen krijgt te zien en dus geen verticale hiërarchie. Het aantal rijen zou dus variabel kunnen zijn of een andere oplossing kan zijn door altijd relevant materiaal in beeld te brengen, wanneer er een rij ‘over’ is. 3.

De horizontale hiërarchie

Wat voor hiërarchie zit er in de horizontale opmaak? Bestaat de content uit bestanden die gelijk aan elkaar zijn? Dit is dus mede afhankelijk van aan het aantal pagina’s, één of meerdere.

Conclusie Deze manier van informatie weergeven is nog niet veel gebruikt, maar soortgelijke vormen zijn al snel genoeg te vinden. Dit is misschien ook niet voor niets. Deze vorm kan wel eens overzichtelijker zijn dan bijvoorbeeld de treemap vorm. Het zal ook minder moeilijk zijn om een consistent ontwerp hiervoor te maken en om het gebruiksvriendelijk te maken. Een ding waar misschien wel rekening mee gehouden moet worden is, dat er niet teveel minder bekende interactie bij komt, zoals horizontaal scrollen. Volgens Jakob Nielsen4 wordt deze manier van interactie nog steeds niet erg gewaardeerd door gebruikers.

“On the Web, users expect vertical scrolling. As with all standard design elements, it's better to meet user expectations than to deviate. When pages feature both vertical and horizontal scrolling, users have to move their viewport in two dimensions, which makes it hard to cover the entire space. For people with poor spatial visualization skills, it's especially challenging to plan movements along two axes across an invisible plane.” (http://www.useit.com/alertbox/9605.html , Top Ten Mistakes in Web Design, 2007)

4 Een leidend consultant in web usability. Nielsen is constant bezig met onderzoek naar web usability. Samen met Donald Norman richtte hij de Nielsen Norman Group op, een consultancybureau op gebied van web usability.

19

Casus 3: The Million Dollar Homepage De site The Million Dollar Homepage (fig.35) is het idee van Alex Tew. Als student zijnde bedacht hij het idee een website op te zetten waar hij 1 miljoen pixels ter beschikking stelt voor advertisement. Per pixel betaal je $ 1,- . Binnen vier maanden was hij miljonair. Het geeft een prachtig beeld, maar tegelijkertijd ook een ‘information overload’. De enige navigatie is scrollen en browsen. Bij hover zie je ALT-tags, waarin de naam van de adverteerder staat en/of hetgeen deze aanbiedt. Bij het klikken op een advertentie kom je terecht op de site betreft de advertentie.

Fig.35 (http://www.milliondollarhomepage.com)

Het werkt dus heel simpel. Des te meer pixels je koopt, des te groter jouw advertentie, des te meer deze opvalt. De enige vorm van navigatie is scrollen en de enige interacties zijn hover en klick. Wat je zelf nog kunt doen, omdat het een navigatiemogelijkheid is van een browser, is inzoomen door middel van, bij een pc, je CTRL-toets in te drukken en te scrollen.

20

Toepassing voor Docupedia Voor Docupedia zou dit bijvoorbeeld kunnen betekenen dat de gekozen manier van sorteren de grootte van het beeldmateriaal bepaald. Het zou er dan zo uit kunnen zien als in fig.36.

Fig.36

Het geeft wederom een prachtig beeld. De navigatie zou over het beeld kunnen ‘zweven’ om het gevoel te geven dat het veld met beeldmateriaal oneindig is. Tevens zou deze inklapbaar kunnen zijn, zodat je ook vrij over het beeld kunt browsen. Zo zou je door middel van het slepen van de cursor door het beeld kunnen navigeren en d.m.v scrollen kunnen zoomen (zie fig.37, ingezoomd beeld), net als bij http://www.bio-bak.nl .

Fig.37

21

Bij het klikken op een video zal het beeld automatisch 100% inzoomen op deze video. Dan pas zie je alle relevante materialen en informatie (fig.38)

Fig.38

Bij filteren is er de kans dat er te weinig materiaal overblijft om het beeld te vullen. Dan zou het eruit kunnen zien als in fig.39 of misschien zie je wel gaten in de massale grid aan bestanden.

Fig.39

22

Fig.40 (Een voorbeeld met content van HollandDoc)

Mogelijke problemen 1. De hoeveelheid content onder controle houden Is alle content te zien op de homepage of een beperkte content? Misschien kan de gebruiker wel de hoeveelheid bepalen. Het zal namelijk een overweldigend beeld worden met zoveel content tegelijk in beeld. Natuurlijk kan een gebruiker snel de content beperken door middel van filters, maar er is ook een kans dat de gebruiker afhaakt vanwege de massale content. 2. Een duidelijke hiërarchie behouden Hoe bepaal je de hiërarchie, vooral bij search results, in deze vorm? Deze kan van boven naar benenden, van links naar rechts zijn of bij een vorm als in fig.39. Radiaal, van binnen naar buiten. Of wordt deze alleen bepaald door grootte en niet door zijn plaats, net als bij TED.com? Dit kan van groot belang zijn. Wanneer dit niet duidelijk genoeg is, kun je een gebruiker wel lekker laten verdwalen in de content, maar de gebruiker wil uiteindelijk toch wel graag zo snel mogelijk vinden waar hij naar opzoek is. 3. Visualisatie van de informatie op subpagina’s In fig.38 ben je volledig ingezoomd en zou je alle relevante en belangrijke informatie en bestanden moeten kunnen zien. Hoe laat je dit zien als de gehele omgeving vol staat met beeldmateriaal? In het voorbeeld heb ik witte overlays gebruikt, maar het blijft misschien te rommelig. De beelden er omheen zouden tijdelijk kunnen verdwijnen of deze beelden zijn al alle relevante materialen. Hier zou dan wel een erg slimme techniek achter moeten zitten, want wat relevant is aan het ene materiaal kan ook relevant zijn aan materiaal wat helemaal aan de andere kant staat. 4. Duidelijk maken van de soort content Door deze massa bestaat het gevaar dat je niet snel meer ziet waar deze content over gaat. Artikelen, video’s en afbeeldingen kunnen door elkaar komen te staan.

Conclusie Ik denk dat deze vorm een mooi overzicht kan geven van al het materiaal van Docupedia. Zo zie je meteen hoeveel content Docupedia bezit en het kan triggeren om alles te willen bekijken wat zichtbaar is. Daar tegenover kan het juist zijn dat gebruikers afhaken, omdat ze niet weten waar ze moeten beginnen. Tenzij het meteen duidelijk is dat je gemakkelijk kunt filteren en zoeken, wat meer overzicht geeft, hoeft dit geen probleem te zijn. Ik kan me namelijk voorstellen dat mensen boven de veertig jaar wat behoefte hebben aan rust en overzichtelijkheid betreft beeld.

23

Casus 4: Traces Du Sacré De site Er lijkt een soort van standaard te zijn in de vormgeving van videosharing websites. Deze websites hebben allemaal een homepage waar je video’s aangeboden krijgt die gesorteerd zijn op bijvoorbeeld meest recent, meest populair, meest besproken etc. Ook krijg je vaak een paar video’s aangeboden vanuit bepaalde categorieën, die meestal de navigatie vormen (menustructuur). En verder is er altijd een zoekvenster te vinden. De meest bekende website met deze vorm is waarschijnlijk YouTube, maar ook Traces Du Sacré past deze standaard toe (fig.43). Bij deze site ziet deze vorm er een stuk aantrekkelijker uit dan bij YouTube. Door de donkere kleuren is er veel rust en blijf je gefocust op de filmstills. Ook doordat de video’s en bijbehorende informatie vaak ingekaderd zijn laat het je focus niet afdwalen van de video’s. De structuur en hiërarchie binnen deze site zijn ook heel duidelijk opgezet. En als je het dan nog niet kunt vinden, is er onder aan de pagina ook altijd een sitemap te vinden. Wanneer je op een menu-item klikt krijg je een duidelijk overzicht van alle video’s die hieronder vallen (fig.41). Wanneer je klikt op een video zie je de video groter in beeld, een omschrijving en gerelateerde video’s (fig.42)

Fig.41 (subpagina van een menu-item)

Dit is misschien de meest saaie vorm van een videosharing website, maar de kans dat deze vorm qua overzichtelijkheid, duidelijkheid en gebruiksvriendelijkheid slaagt is wel groot! Fig. 42 (subpagina van een item binnen een menu-item)

24

fig.43 (http://traces-du-sacre.centrepompidou.fr/)

25

Soortgelijke site TED is net wat meer dan een standaard. Het is geen super spectaculair design, maar het biedt veel mogelijkheden betreft zoeken en weergaven. TED (Technology, Entertainment & Design) is begonnen als een conferentie waar grote namen hun zegje doen. Deze gesprekken of ‘talks’ genaamd worden nu ieder jaar opgenomen en op deze site geplaatst. ‘Ideas worth spreading’ is dan ook hun oneliner en enige doel.

Fig.44 (http://www.ted.com/index.php , TED talks pagina in lijst weergave)

Het hoofdmenu is onderverdeeld in themes (fig.45 en 46), talks (fig.44) en speakers (thema’s, gesprekken en sprekers). Dit zijn dus al drie mogelijke zoekopties. Bij themes en talks is er de mogelijkheid om de video’s in een lijst weergave (onder elkaar) en in visualisation weergave (verschillende groottes) te bekijken. Bij themes en talks kun je altijd filteren op ‘show related to’ met vervolgens een hele lijst om categorieën uit te selecteren. Verder kun je zoeken door middel van een A-Z index (op alfabetische volgorde) en afhankelijk van de lijst weergave of visualisation weergave kun je ook nog eens filteren op ‘order by’ (lijst weergave) en ‘resize by’ (visualisation weergave). Ook vind je op TED een taglijst waarmee je op kernwoorden kunt zoeken. Je kunt natuurlijk ook browsen door de content en bij het kijken van een video staan gerelateerde video’s aangeboden waarnaar je kunt kijken. Als laatste is er nog altijd een searchbox te vinden op de pagina. TED bied dus twee weergave opties en maar liefs acht verschillende zoekopties! Je kunt meteen vinden wat je zoekt of heerlijk verdwalen in alles wat TED te bieden heeft. Inhoudelijk en visueel is TED dus aantrekkelijk

Fig.45 (TED themes pagina in visualisation weergave)

Fig.46 (Bij hover over een video zie je d.m.v een lightbox, de korte informatie)

26

Visuele oplossingen Mpreis.at (fig.47) is geen videosharing website, maar heeft wel een zelfde soort visuele opzet, die er een stuk aantrekkelijker uitziet. In de afbeeldingen zit een rijkheid aan kleur, waardoor het speels wordt, maar door de witte kadrering per onderdeel en de neutraal grijze achtergrond blijft het erg overzichtelijk. Zelfs hun sitemap ziet er visueel aantrekkelijk uit. Aan de sitemap en het menu zie je dat ze per onderdeel een kleur hebben gebruikt (fig.48). De berichten bevatten allemaal een pijltje rechtsonder in het kader. Wanneer je hierop klikt, zie je het volledige bericht (fig.49). Deze pijltjes hebben allemaal de kleur van het menu-item waar deze bij hoort. Je kunt het dus visueel aantrekkelijk maken door rijkheid aan beeld en kleur.

Fig.47 (http://mpreis.at/)

Fig.48

Fig.49

27

Kashiwasato.com (fig.50) heeft ondanks zijn saaie lijst aan content het toch voor elkaar gekregen het visueel interessant te maken. Wat wel jammer is, is dat het niet duidelijk wordt waarvoor de kleuren staan boven ieder bericht. Waarschijnlijk heeft het geen enkele diepere betekenis.

Fig.50

(http://kashiwasato.com/)

Deze kleurenbalk zou, in de standaardvorm, wel een functionele toepassing kunnen hebben. Wanneer bijvoorbeeld een videobestand onder meerdere categorieën valt en de categorieën zijn aangeduid door middel van kleur, zou de balk meerdere kleuren kunnen bevatten en wel met een percentuele onderverdeling. Bijvoorbeeld een video die door de moderator tot 50% politiek, 20% cultuur en 30% maatschappij wordt bevonden (fig.51). Ook kan de standaard lijst weergave spectaculairder worden door bijvoorbeeld te werken met verschillende groottes, zoals TED dit doet. Het totaalbeeld kan er dan ongeveer zo uit zien als in fig.52 . Zo bied je toch een georiënteerde weergave aan die visueel ook nog eens aantrekkelijk is.

Fig.51

Conclusie Fig.52

Deze vorm hoeft geen problemen met zich mee te brengen. Het is heel erg overzichtelijk en de interactiemogelijkheden zijn heel duidelijk en gebruiksvriendelijk te maken. Het enige gevaar is dat het visueel niet interessant genoeg wordt voor de jongere doelgroep. Toch denk ik dat dit goed is op te lossen en juist dit de uitdaging kan zijn bij deze vorm.

28

Conclusie Criteria De criteria zijn vooral dat Docupedia overzichtelijk en gebruiksvriendelijk moet worden. Daarnaast is het zeer belangrijk dat de gebruiker op meerdere manieren kan zoeken, zodat deze ook zo snel mogelijk een juist zoekresultaat krijgt, maar aan de andere kant lekker kan verdwalen in de content. Wij (de projectgroep van Docupedia) zien Docupedia dan ook als een uitgebreide zoekmachine in de vorm van een webapplicatie. Als laatste is het noodzaak dat Docupedia visueel aantrekkelijk is en er meerdere materialen worden gekoppeld aan video’s.

Mijn bevindingen Er zijn nu een hoop vormen van informatie visualisatie besproken. Hieruit komen veel complexe vormen naar voren, zoals Marumushi’s Newsmap en vormen die visueel overweldigend en uitdagend zijn, zoals Digg Pics en The Million Dollar Website. Deze vormen zijn geweldig om mee te experimenteren en om zo op nieuwe visuele vormen te komen. Toch is het grootste gevaar bij deze vormen, dat Docupedia niet overzichtelijk en niet gebruiksvriendelijk genoeg wordt. Dit geld vooral voor 3D visualisaties en complexe netwerk visualisaties. Al deze complexe visualisaties zouden wel een optie kunnen zijn als extra weergave optie. De beste vorm zou, naar mijn idee, de ‘standaard’ zijn, zoals Traces Du Sacré besproken in Casus 4. Bij deze vorm is de kans, dat het qua gebruiksvriendelijkheid en overzichtelijkheid slaagt, het grootst. Het zal ook een stuk makkelijker zijn om alle pagina’s een consistente lay-out mee te geven. Wel is hier een grote kans dat de zoekapplicatie teveel eruit gaat zien als een normale website en daardoor niet visueel aantrekkelijk genoeg zal zijn. Om dit te voorkomen moet er goed nagedacht worden om toch visueel wat extra’s mee te geven. Deze vorm is nogal veilig en kunnen we altijd aanbieden als extra weergave optie. Een lijst weergave en een experimentele weergave als extra optie kan altijd, maar dit betekent dat een van deze twee altijd een extra ding is en kan je zeggen dat de experimentele vorm dus onnodig is. Het allerbeste zou zijn om de lijst weergave te kunnen combineren met een experimentelere vorm, dan is Docupedia pas echt een goede webapplicatie.

29

Suggestie Er kan voor een appartere vorm worden gekozen voor de binnenkomst, maar het is nog te vroeg om te zeggen hoe deze vorm eruit gaat zien. Wel is zeker dat hiernaast een optie moet zijn voor een lijstweergave. Schematisch zal Docupedia er dan zo uit kunnen zien als in fig.54 t/m fig.57. In fig.54 zie je hoe de homepage ingedeeld kan zijn, simpelweg heb je de navigatie- en zoek-tools en een x aantal video’s. De video’s die je te zien krijgt op de homepage zullen zoveel mogelijk variëren van categorie, thema, inhoud, datum publicatie etc. om meteen aan de gebruiker te tonen wat Docupedia allemaal te bieden heeft. Fig.55 is een pagina die je te zien krijgt na het aanklikken van een video. Het is goed om de video, die de gebruiker wil kijken, op te laten komen in een andere pagina of weergave, zoals in fig.55, die afwijkt van de homepage en de pagina waar je kunt zoeken en filteren. Zo kun je de video op een groter formaat aanbieden en is er meer ruimte voor allerlei informatie en materiaal. Je ziet dat de videoplayer binnen de pagina staat. Het is dan ook ten zeerste aan te bevelen om deze player te integreren in de pagina in plaats van het te openen in een pop-up, zoals in de huidige situatie (fig.53).

Fig.53 Fig.56 is een pagina die je te zien krijg na het klikken op een maker en fig.57 na het klikken op een artikel. Bij alle bestanden (video/maker/artikel) geldt dat het bestand pas centraal staat, wanneer deze is aangeklikt. Daarmee bedoel ik, dat er dan pas neven informatie en relevant materiaal te zien is. Informatie over dit bestand kan zijn: een omschrijving, aanleiding van de documentaire, wie de maker is, datum publicatie, nieuwsberichten etc. Betreft de videoplayer zelf is het belangrijk dat je er doorheen kunt spoelen, het wellicht in fullscreen-mode kunt bekijken of stills kunt opslaan of voor bijvoorbeeld een werkstuk. Wat verder interessant kan zijn is dat de tijd onthouden wordt waar je bent gebleven bij het kijken van een documentaire zodat je, wanneer je terugkomt op Docupedia, direct de documentaire af kunt kijken vanaf het punt waar je gebleven bent. Wat ook een extra optie kan zijn is dat je kunt zien of je een video al hebt gezien.

30

Fig.54

Fig.55

31

Fig.56

Fig.57

32

Mogelijke belemmeringen Het wordt een uitdaging om binnen de ‘standaardvorm’ Docupedia aantrekkelijk te maken voor verschillende leeftijdscategorieën en daarbij iets te bedenken wat vernieuwend is. Ook kan het lastig zijn in deze vorm de connectie tussen verschillende bestanden en materialen op een bijzondere manier te laten zien. Deze vorm zou dus heel goed kunnen dienen als een alternatieve weergave. Deze weergave heb je nodig als je snel alles overzichtelijk en inzichtelijk wilt krijgen. Om gebruikers te kunnen laten verdwalen in de content kan er een interessantere vorm bedacht worden. Hier moet wellicht nog wat meer onderzoek naar gedaan worden. Het probleem dat oud materiaal niet onderbedolven mag raken is een algemeen probleem dat je bij iedere visualisatie tegen komt. Alleen op de homepage kunnen we de gebruiker sturen naar ouder materiaal. Daarna, wanneer de gebruiker zelf gaat zoeken en filteren, bepaald hij wat hij wil zien en in welke volgorde. Dit kunnen we echter beïnvloeden door de manier waarop alle bestanden met elkaar zijn verbonden in de database en door goed te taggen. Oplossingen kunnen zijn: zoeken op tags, ouder materiaal verbinden aan recent nieuws, ouder materiaal verbinden aan een huidig thema, zorgen dat de gebruiker materiaal kan bookmarken, een zoekmogelijkheid op interessant in plaats van relevant of altijd ouder relevant materiaal aanbieden.

33

Literatuurlijst Boeken ™ Tricia Austin & Richard Doust: New media design, 2007

Papers ™ Mark Bruls, Kees Huizing, and Jarke J. van Wijk: Squarified Treemaps, 2000 ™ Thomas Bladh, David A. Carr, and Jeremiah Scholl: Extending Tree-Maps to Three Dimensions: A Comparative Study, 2004 ™ Mark Giereth Harald Bosch Thomas Ertl: A 3D Treemap Approach for Analyzing the Classificatory Distribution in Patent Portfolios, 2008

websites ™ ™ ™ ™ ™ ™ ™ ™ ™ ™ ™ ™ ™ ™ ™ ™ ™ ™ ™ ™ ™ ™ ™ ™ ™ ™ ™

http://nl.wikipedia.org/wiki/Webapplicatie , De vrije encyclopedie (op het Internet vormgegeven encyclopedie) http://www.kinki.nl/ , Kinki kappers website. http://whitevoid.com/application.html , online portfolio http://www.citrinitas.com/papers/bridgeproject-site/index.html , Ayiter, Elif & Auer, Alpha. The bridge project (Online zoekapplicatie) http://nl.wikipedia.org/wiki/Application_Programming_Interface , De vrije encyclopedie (op het Internet vormgegeven encyclopedie) http://www.visualcomplexity.com/vc/ , site die alles verzamelt wat te maken heeft met het visualiseren van complexe netwerken http://www.bestiario.org/research/videosphere/ , Ortiz, Santiago. 2008, online applicatie http://nuthinking.com/did/tagged_colors_03/ , Giordano , Christian. 2005, Tagged Colors, online applicatie http://patrickbarry.com/projects/ljnet/index.php , Barry, Patrick. LJNet (social network visualisatie) http://www.dipity.com/mashups/timetube , online applicatie http://denegende.nl/ , online archief van afbeeldingen, audio en tekst met betrekking tot de history van Eindhoven http://marumushi.com/apps/newsmap/newsmap.cfm , Weskamp, Marcos. Newsmap, 2004, online applicatie http://www.bewitched.com/marketmap.html, Wattenber, Martin, Map of the market, 1998, Bewitched (online portfolio) http://www.oreillynet.com/ruby/blog/2006/07/ , Orsini, Rob, Treemap on Rails, 2006, blog http://www.smartmoney.com/map-of-the-market/ , Map of the market, 1998, online applicatie http://www.cs.umd.edu/hcil/treemap-history/index.shtml , Schneiderman, Ben. Treemaps for spaceconstrained visualization of hierarchies, 2008, Human Computer Ifnteraction Laboratory (universiteit) http://www.sm.luth.se/csee/csn/visualization/filesysvis.php , Departments of Computer Science and Electrical Engineering and Mathematics, Step Tree (software om 3D treemaps mee te maken), 2004 http://www.cs.umd.edu/hcil/photomesa/ , PhotoMesa Image Browser, 2001, Human Computer Interaction Laboratory (universiteit) http://tashian.com/carl/archives/visual_art_design/ , Tashian, Carl. data visualization... , 2004, blog http://labs.digg.com/pics/ , experimentele projecten met de content van digg.com http://content.stamen.com/digg_pics_is_live , Rodenbeck, Eric. Digg Pics is live, 2008, Stamen Design (design & technology studio) http://kristinadragomir.com/ , online portfolio http://www.useit.com/alertbox/9605.html , Nielsen, Jakob. Top Ten Mistakes in Web Design, 2007, Use It (online magazine) http://milliondollarhomepage.com/ , Tew, Alex. 2005 http://traces-du-sacre.centrepompidou.fr/ , expositie, 2008, online video archief http://mpreis.at/ , onderneming http://www.ted.com , Technology, Entertainment & Design (online video archief) http://kashiwasato.com/ , Sato, Kashiwa, online portfolio

34

35