TED.com: wonderschoon webdesign voor video website

TED is een jaarlijkse conferentie over Technologie, Entertainment en Design. En TED.com is hun wonderschone website waar je alle “TED Talks” kunt bekijken. Dat doe ik regelmatig, want de speeches en demonstraties die daar worden gegeven, geven je veel inspiratie. De site zelf geeft mij als usability freak echter ook heel veel inspiratie; alles werkt lekker en overal druipt de gebruiksvriendelijkheid vanaf. Misschien krijg je er voor je eigen site inspiratie van…

Overigens kun je niet zomaar naar een TED conferentie, je moet ervoor worden uitgenodigd. Daarom is het juist knap (of nodig) dat ze zich op deze manier openstellen voor het gewone publiek.

Video navigatie: alle opties die je wenst

TED homepageDe kern van de site zijn de video’s van de TED Talks. Vanaf de eerste conferentie in 2002 tot en met de meest recente van dit jaar, staan alle presentaties online. Het navigeren gaat in eerste instantie door middel van filters aan de linkerkant. Je kunt daarnaast kiezen voor een mooie visuele presentatie, of juist een simpelere lijst.

In het visuele overzicht wordt bij een mouseover de video iets uitgelicht. Daarbij wordt het plaatje direct getoond op lage resolutie, en daarna pas op hoge resolutie geladen. Je krijgt daardoor een gebruikerservaring waarbij de snelheid van de site er niet toe doet. Wat mij betreft zijn dit de kleine dingen die een site echt gebruiksvriendelijk maken.

Uiteraard zijn er allerlei mogelijkheden aanwezig voor virale verspreiding van video’s. Je kunt video’s makkelijk bookmarken bij Digg en Del.icio.us, doorsturen via e-mail, integreren in je weblog en zelfs downloaden in hoge resolutie formaten. Niet spectaculair, maar vaak genoeg wordt deze kleine push naar virale werking vergeten.

Ook aan de zoekmachine optimalisatie is gedacht: elke video heeft een nette tekstuele beschrijving, geassocieerde tags, links naar relevante andere video’s en mogelijkheid tot reageren.

Video bekijken: kwaliteit voorop

TED in-video navigatieVoor de video pagina is duidelijk de ruimte genomen, de gebruiker wordt goed verleid verder te scrollen. Wat ik echt geweldig vind is dat je binnen een video kunt navigeren. Elke video is ingedeeld in 3 tot 5 met naam omschreven onderdelen, waar je direct naartoe kunt springen.

Gelukkig is de video in Flash en niet in het tragere en meer platform afhankelijke Quicktime, Windows Media of Realplayer. Je kunt op een video inzoomen, en zoals gezegd zelfs downloaden in MPEG formaat. Je ziet ook hoe lang een video duurt en hoeveel je al hebt gezien. Weer oh zo simpel, maar het voegt net wat toe aan de gebruiksvriendelijkheid.

Sponsoring: geen banners, maar integratie

BMW bannerBMW is de enige sponsor van TED. Dat laten ze echter niet zien door gewoon klakkeloos banners op de site te plakken. Op de homepage staat er een klein content item met een video van een BWM spreker op TED< die praat over waterstof als brandstof. BMW heeft er slim voor gekozen om dit tot speerpunt van de TED campagne te maken: niet een auto, maar een diepere ontwikkeling die bijdraagt aan het merk. Op een manier die past bij de inhoud van de site, in plaats van juist “op te vallen” (wat zou leiden tot banner blindheid).

BMW video na een TED videoVoor elke video zie je een kleine “mede mogelijk gemaakt door” boodschap. Die is echter zeer kort en geïntegreerd met het TED logo zelf. Bovendien kun je er direct langs “skippen”, door de in-video navigatie te gebruiken.

Verder is er na elke video een soort commercial van BMW. Dat zijn er verschillende, zodat je niet steeds dezelfde ziet. Bovendien zijn die video’s zo mooi dat je hem gewoon wilt blijven kijken, er komt dan ook geen auto in voor tot aan het eind. Zeer, zeer chic!

Op de video pagina staat wel een “banner” van BMW, maar die is zo gemaakt dat hij er precies als de content uit ziet. Hij stoort dus niet, en valt op een natuurlijke manier in de flow van de website.

Ik ben benieuwd wat jij van de site vindt. Is ‘ie echt zo goed, of ben ik teveel fan van TED? 🙂

7 gedachten over “TED.com: wonderschoon webdesign voor video website

  1. JdB

    TED is inderdaad gewoon top.
    Sponsoring van BMW is precies goed gedaan. Erg knap dat een bedrijf het op deze manier durft in te vullen, in plaats van plat en schreeuwerig.
    En de content van TED is ook nog een top. De sprekers zijn erg sterk, af en toe download ik een toespraak om vervolgens af te luisteren in de auto op naar mijn werk.
    Verschillende formats worden alleen beschikbaar gesteld als de toespraak zich daarvoor leent. Als een presentatie zonder slides af kan dan kan je gewoon de mp3 pakken, anders bieden ze deze mogelijkheid niet eens aan (teminste, zo ervaar ik het tot nu toe).

    Like

  2. Xavez

    Ruben, je hebt gewoon absoluut gelijk hoor. Het is een prachtige site. Ik heb ‘em in eerste instantie leren kennen via een artikeltje over de integratie met BMW. Maar inderdaad: de usability zit in het algemeen gewoon retestrak.

    Like

  3. Owen van Dijk

    Een puntje van aandacht is ook de hoge productiekwaliteit van de presentaties zelf. Bekijk een gemiddelde lecture van een presentatie bij bijvoorbeeld Google of Yahoo en je ziet een video waar de spreker in slecht TL licht staat, 1 camera die op een statief staat, audio van matige kwaliteit met veel omgevingsruis, slides die niet of slecht zichtbaar zijn, beelden soms out of focus enzovoort enzovoort.

    Bekijk een presentatie op TED en je ziet een compleet ander beeld. Let op hoe de spreker visueel wordt geintroduceerd, het eerste shot altijd een wideshot, daarna binnen een minuut een extreem wijd shot van de hele zaal plus publiek. Presentaties worden vanuit 5 verschillende standpunten gefilmd, met minimaal 3 cameramensen, spreker is altijd goed uitgelicht en infocus, en de spreker is goed te verstaan met waar nodig de feedback van het publiek ingemixed. Daarna altijd op het juiste moment geschakeld naar de slides of wat er op dat moment op de computer wordt getoond. Kortom, hoewel de content al goed is, de productie van deze presentaties maakt dat het echt een visueel genot wordt om naar te kijken.

    Like

Geef een reactie

Vul je gegevens in of klik op een icoon om in te loggen.

WordPress.com logo

Je reageert onder je WordPress.com account. Log uit /  Bijwerken )

Google+ photo

Je reageert onder je Google+ account. Log uit /  Bijwerken )

Twitter-afbeelding

Je reageert onder je Twitter account. Log uit /  Bijwerken )

Facebook foto

Je reageert onder je Facebook account. Log uit /  Bijwerken )

Verbinden met %s