Category Archives: Informatie en presentatie

Isotope: een magische jQuery plugin voor uitstekende lay-outs

Een goede layout, de mogelijkheid om informatie te sorteren en te filteren kunnen, mits goed toegepast, de gebruikersvriendelijkheid optimaliseren. Isotope heeft hiervoor een uitstekende jQuery plugin ontwikkeld. Met Isotope kun je kiezen uit verschillende layouts die, alleen door gebruik van CSS3, niet te evenaren zijn. Je kunt animaties, inclusief ‘fallback’, implementeren. En er zit functionaliteit in waarmee je informatie kunt sorteren en filteren. Isotope maakt gebruik van bestaande plugins zoals Modernzr, Infinite Scroll en smrtresize. Of je het gebruikt of niet, het bekijken van de demo’s prikkelt zeker de gedachtegang…

Een responsive of ontvankelijk webontwerp

In mijn begintijd als webontwerper, zo rond 1995, was het heel gebruikelijk dat je rekening hield met de verschillende schermformaten en de grote verschillen tussen diverse browsers. Nu er de mobiele platformen zijn bijgekomen is de uitdaging wederom prikkelend. Eén antwoord uit de markt is het zogenaamde ‘responsive web design’ waarbij je de informatie filtert afhankelijk van de hardware waarmee je een site bezoekt. Een benadering die in mijn ogen voorbij gaat aan de doelgroep.

Een voorbeeld

Op dit moment oriënteren we ons voor een middelbare school voor onze oudste zoon. Zittende achter mijn desktop bezoek ik de verschillende schoolsites, bekijk de online schoolgidsen, lees de algemene informatie en probeer de visie van een school te doorgronden. Eenmaal op weg naar de open dag wil ik snel de adresgegevens op mijn ‘intelligente’ telefoon opzoeken. Straks, als mijn zoon uiteindelijk op een goede school zijn plek heeft gevonden, wil hij misschien lestijden en uitval van docenten op zijn mobieltje bekijken. Drie scenario’s van verschillende doelgroepen met verschillende rollen. Toch zal er in het geval van ontvankelijk webontwerp alle informatie gedownload worden. Alle informatie zal in geval van responsive webdesign onzichtbaar gedownload worden. Persoonlijk ben ik daarom van mening dat de hype ‘responsive webdesign’ niet het antwoord is voor de mobiele platformen. Wel zie ik het als een oplossing om de informatie gebruikersvriendelijker op verschillende schermformaten te tonen. Voor mij blijft echter de doelgroep leidend, niet de afmeting van een scherm.

Gerelateerde informatie

[tip] TED Talk iPad app 1.2 met ondertiteling

Net mijn Ted iPad app vervangen door de TED+subtitles app. Heerlijk om nu de gesproken tekst ook in het getypte woord te kunnen volgen. Als minder goed horend persoon is het zeer plezierig om, vooral bij vreemde talen, een ondertiteling synchroon te hebben lopen. Andere mogelijkheid is om, mits beschikbaar, een vertaling mee te laten lopen in de ondertitling. En sinds versie 1.2 kan ik de TED Talks downloaden en later, zonder WiFi verbinding bekijken.

Wat is de overeenkomst tussen de kerstman en de paashaas

Fernanda Viégas en Martin Wattenberg, twee wetenschappelijk onderzoekers bij IBM’s Visual Communication Lab, gebruiken data visualisatie om de digitale wereld te onderzoeken. Data visualisatie is een methode waarmee nieuwe inzichten kunt ontwikkelen door ruwe data met elkaar te relateren. Anders dan andere wetenschappers vinden zij dat deze vorm va visualisatie emotie omvat. Hun doelstelling is vooral het leveren van plezier, sociale betrokkenheid en het beiden van de om verrassende ontdekkingen te doen. Zij gebruiken kleur en ingewikkelde vormen om in de visualisatie unieke patronen te laten ontstaan. Flickr Flow, een project waarbij ze foto’s van Flickr ingedeeld hebben op seizoen en geplot op een cirkel laat dit goed zien.

Hun voorlaatste project is Web Seer. Deze applicatie gebruikt de output van het suggestie mechaniek die zoekmachines gebruiken als bron. Wanneer je bijvoorbeeld Michelle intikt in het zoekveld krijg je Obama, Malkin, Pfeiffer als suggestie. Door twee zoekopdrachten te combineren kun je verrassende verbanden ontdekken. Ze combineren bijvoorbeeld ‘is Santa Claus’ en ‘is the Easter Bunny’. Google Suggest geeft de volgende resultaten:

In Web Seer laten de dikke pijlen de meest populaire zoekacties zien.

Probeer zelf zoekacties uit op Web Seer.

Je kunt meer lezen over Fernanda en Martin op hun blog Visual Hint. The color of data. Andere interessante projecten vanFernanda Viégas en Martin Wattenberg kun je vinden op HINT.FM

Prezi, een applicatie voor niet-lineaire visuele presentaties

Met Prezi kun je een visuele kaart maken die opgebouwd is uit bijvoorbeeld woorden, afbeeldingen, links en video waarbij je tijdens je presentatie kunt in- en uitzoomen. De volledig in Flash gebouwde online applicatie doorbreekt hiermee het traditionele patroon van de lineaire dia-dia presentaties. Denk eens aan de mogelijkheden die je hebt wanneer je mindmaps, tijdslijnen, plattegronden, informatie architecturen of infographics als rode draad voor je presentaties kunt gebruiken. Doordat ze conceptueel het idee van lineair presenteren hebben losgelaten zijn er ineens veel meer mogelijkheden om op een meer visuelere breingerelateerde manier te presenteren. Vergelijk dit maar eens met pptPlex, een Microsoft Office Labs project die claimt dezelfde functionaliteit naar PowerPoint te brengen.
Een aandachtspunt is dat de presentaties op de server van Prezi worden gezet en online te gebruiken zijn. Alleen de Pro lincentie biedt de mogelijkheid om ook offline te gebruiken.

Een discrepantie tussen beeld, geluid en inhoud

XPlane heeft in samenwerking met The Economist de informatieve video “The Carbon Economy” gemaakt. Alle ingrediënten zijn goed gekozen, krachtige verhalende muziek, sprekend cijfermateriaal, mooie afbeeldingen maar onderling vechten al deze ingrediënten met elkaar. Ze versterken elkaar niet, continue wordt je heen en weer geslingerd tussen beeld en geluid, de boodschap sneeuwt onder. Hun vorige video ‘Did you know 4.0′ was in dat opzicht veel krachtiger.

Kijk ook naar de video ‘Vampire Energy’ die Nigel en Rowland Holmes voor GOOD gemaakt hebben.  Tekst, beeld, geluid, kleurgebruik, typografie, alle ingrediënten werken samen om een boodschap over te brengen.

Zoekresultaten: afbeeldingen op een andere manier tonen

Google Image Swirl is een nieuwe eigenschap van zoekmachine Google waarbij gelijksoortige afbeeldingen uitgaande van kleur, structuur, textuur en meta informatie geclusterd en getoond worden. Op dit moment zijn nog lang niet alle zoekinstructies mogelijk maar het laat wel een alternatieve manier van presenteren zien.

Meer informatie:

Visualiseren dat iets héél klein is

De universiteit van Utah afdeling Genetica heeft prachtige visualisaties online staan om hun lesmateriaal te verduidelijken. Een voorbeeld is ‘Cell Size ans Scale‘. Opvallend door zijn eenvoud en heldere typografie. Het feit dat je met behulp van een schuifbalk inzoomt om zo de grootte van iets duidelijk te maken is goed gedaan. Ondanks dat je verhoudingen het beste naast elkaar kunt tonen is een cel dermate klein dat je daar voor andere oplossingen moet kiezen. Bekijk ook hun andere uitingen, er zitten een paar zeer goede visualisaties tussen.
sizecell

Visuele zoekmachines

Sergi Mínguez en Juan Dürsteler hebben op 1 juni 2009 een interessant artikel over de verschillende visuele zoekmachines die er op dit moment zijn gepubliceerd in het online magazine infovis.net.
Uitgangspunt is er steeds meer verschillende soorten content zoals websites, afbeeldingen, videos, nieuws, boeken en multimedia beschikbaar is op het net maar dat de traditionele zoekmachines zoals Yahoo, Google of Microsoft dit onderscheid niet of te weinig ondersteunen. Ze brengen veranderen aan in de bestaande zoekomgeving maar nemen daardoor de bottlenecks in presentatie van de zoekresultaten uit het traditionele systeem over waardoor de interactie niet verbeterd. Als voorbeeld noemen ze Yahoo! Alpha website, Search Monkey website en de Google Universal Search. Een verandering hierin zou in het algemeen een goede impuls zijn voor de visualisatie en presentatie van gevonden informatie. De interactie van de gebruiker met de gevonden informatie zou daardoor enorm kunnen verbeteren.
Ze introduceren twee concepten (query intention, exploratory search) die ze als basis van hun stelling ‘waarom zijn visuele zoekmachines nodig’ gebruiken.
De zoekmachines die ze bekijken zijn:
SearchMe website
Yahoo! Alpha website
Search Monkey website
KartOO website
Ujiko website
Quintura website
oSkope website
Newsmap website
Grokker
Lees het hele artikel op Infovis.net >

De erfenis van Beck

Iedereen die ooit gebruik heeft gemaakt van het Parijse Metropolitain kan zich de grote routeborden bij de ingangen van de stations en op de perrons herinneren. Deze waren, in tegenstelling tot die van de London Tube, een redelijke geografische weergave.
paris-map-metro-big.gif
Zie hieronder de daadwerkelijke geografische ligging van de stations:
Paris_Metro_map.gif
Toch heeft Harry Beck vlak na WOII twee ontwerpen gepresenteerd aan de Fransen. Deze hebben de ontwerpen waarbij de geografische werkelijkheid volledig is losgelaten afgekeurd.
Pas in 2000 heeft de RATP plattegronden ontwikkeld die recht doen aan het gedachtegoed van Beck. De plattegronden zijn overzichtelijk en helder vormgegeven.
metro.gif
Maar heeft nog tot 2008 geduurd voordat ook de routeborden bij de ingangen van de stations en op de perrons zijn vervangen. Lees meer hierover op de site van Creative Review Harry Beck: The Paris Connection >
Related links:
Plan Interactif des transports en Ile-de-France
Different viewpoints of information (Latebytes)
Met dank aan Peter Bogaards voor de tip

Pattern browser

Het Interface Design Team van de universiteit van toegepaste wetenschappen in Potsdam heeft een online applicatie ontwikkeld waarbinnen je door verschillende ontwerp patronen kunt browsen. Het is een ware schat aan informatie over problemen en mogelijke oplossingen die er zijn op het gebied van interface, interactie elementen en schermontwerp.
patternBrowser.jpg
Gerelateerde links
http://www.welie.com/patterns/
http://developer.yahoo.com/ypatterns/
http://interface.fh-potsdam.de/infodesignpatterns/patterns.php

‘Change Congress’ vs ‘Voorbij Powerpoint’

Het is de inhoud van de boodschap van Lessig die me aansprak: ‘Ondanks dat er nu met de nieuwe toekomstige president een belangrijke verschuiving heeft plaats gevonden zal de belangrijkste verandering, het veranderen van de mentaliteit binnen het congres, nog moeten plaatsvinden’.
Maar het is de stijl van presenteren die mij als beelddenker enorm aansprak. De gehoorde kritieken dat de vorm afleid van de inhoud snap ik wel maar ervaar ik absoluut niet.

Gerelateerde informatie
~ Critique: Lessig Method Presentation Style (Dick Hardt, Identity 2.0, OSCON 2005)
~ ‘CHANGE CONGRESS is a national movement to end corruption in America’s congress. We’re organizing citizens to push candidates to make four simple commitments: …’ Lees verder op Change Congress.