Ajax is hot. Het is momenteel een veel besproken begrip op het Internet. Met Ajax bedoel ik in dit verband niet de Amsterdamse voetbalclub of de Griekse held uit de Ilias. Het Ajax waar ik het in dit artikel over heb is een samensmelting van de woorden Asynchroon JavaScript en XML.

Met Google als lijstaanvoerder schieten de ajax toepassingen momenteel als paddestoelen uit de grond. Google Gmail1, Google Maps2 en Flickr3 hebben hun succes grotendeels te danken aan Ajax.

Modeketen Gap4 investeerde zelfs 10 miljoen dollar in een redesign van haar website5. Het doel was om het aantal klikken per bezoeker terug te brengen en zo het online winkelen op haar website makkelijker te maken. Vanuit technologisch en gebruiksvriendelijkheids perspectief is de site zijn concurrentie inmiddels mijlenver vooruit. Hoe men alles dit realiseerde? Met het wondermiddel Ajax natuurlijk!

Business 2.0 plaats Ajax zelfs bovenaan de lijst van zeven technologieën die de wereld zullen veranderen6.

Ajax de technologie

De term Ajax werd op 18 februari 2005 in het artikel “Ajax: A New Approach to Web Applications7” geïntroduceerd door Jesse James Garret. De nieuwe benadering houdt in dat webapplicaties steeds interactiever worden. De grens tussen desktop software en webapplicaties vervagen.

Als voorbeeld van een Ajax toepassing noemt Garret Google Suggest8. Terwijl je een zoekterm intikt krijg je tegelijkertijd een overzicht van andere interessante zoektermen.

Een ander voorbeeld dat hij noemt is Google Maps. Inzoomen, uitzoomen, naar links, rechts onder of boven alles gebeurt in een vloeiende beweging.

Volgens Garret maakt Ajax maakt gebruik van de volgende technieken:

XHTML en CSS voor de presentatie volgens de standaarden van het W3C;
Het Document Object Model voor het dynamisch tonen van informatie en voor interactie;
XML en XSLT voor de opslag, aanpassing en transport van gegevens;
Het XMLHttpRequest object9 voor asynchrone communicatie;
JavaScript om alles aan elkaar te binden.

Robin Good denkt dat het grote succes toch vooral te danken is aan het XMLHttpRequest object10.

Zonder XMLHttpRequest kan je echter ook de interactiviteit van Google Maps evenaren. De interactieve kaart van Zwitserland11 is hiervan het mooiste voorbeeld. Qua interactiviteit evenaart het met gemak Google Maps. Het is echter volledig opgebouwd uit HTML en JavaScript12.

En zo zijn er vele discussies gaande over wat nu wel en wat nu geen Ajax geen is.

Peter-Paul Koch tot slot komt in het artikel “Ajax, promise or Hype13” tot de conclusie dat XML en XMLHttpRequest niet persé nodig zijn voor het maken van interactieve webapplicaties. XSLT voegt helemaal weinig toe ten opzichte van JavaScript. Het enige dat dus overblijft zijn XHTML, CSS en DOM (JavaScript).

Het leuke is, deze technieken bestaan al sinds 199814. In het boek “designing with web standards15” van Jeffrey Zeldman worden XHTML, CSS en DOM uitvoerig behandelt.

Volgens Zeldman kunnen we een webpagina opdelen in drie delen16:

Structuur;
Presentatie;
Behavior.

Structuur

Het eerste aspect van webontwikkeling is de structuur. Dit is de virtuele ruggengraat van een website. Alle verdere facetten zullen gebaseerd zijn op een stevige structuur. De structuur wordt vormgegeven met XHTML.

Presentatie

Het tweede belangrijke aspect van een website is de presentatie ervan. Hoewel de structuur minstens even belangrijk is, willen de meeste mensen naar een mooie esthetisch verantwoorde interface kijken. De presentatie kunnen we opmaken met CSS.

Behavior

Het laatste deel van een web document is hoe een website zich gedraagt. Een site kan aan de hand van een standaard object model (het W3C DOM) dynamische effecten genereren. Dit DOM werkt met CSS, XHTML en ECMAScript 262 – de standaard versie van JavaScript.

De waarde van webstandaarden

Omdat de structuur, de presentatie en behavior van elkaar gescheiden zijn is het mogelijk om één ervan te wijzigen zonder consequenties te veroorzaken voor de andere. Zo kan er eenvoudig nieuwe inhoud aan een pagina worden toegevoegd, zonder het risico dat de lay-out kan beschadigd raken.

Zo kan je ook de lay-out wijzigen zonder de inhoud te schaden. Zijn er lezers die klagen dat een bepaalde fontgrootte te klein is? Eenvoudig een regel wijzigen in het CSS bestand en de hele site reflecteert de verandering. Nood aan een printer vriendelijke versie? Dan kan er een aparte style sheet aangemaakt worden die ervoor zal zorgen dat je paginas prachtig zullen afgedrukt worden, hoe verschillend het resultaat op het scherm ook mag zijn.

Bron: Webstandaarden: scheiding van structuur en opmaak17

De waarde van webstandaarden is inmiddels wel aangetoond. Toch blijft het raar dat er pas nu aandacht voor is. De technieken bestaan immers als meer dan zeven jaar! Waarom is er dan nu pas aandacht voor? Een bevredigend antwoord op deze vraag is niet te geven.

Waarom nu pas aandacht voor Ajax?

Ik heb wel de volgende hypothese. Het Internet is een volwassen medium en bedrijven eisen steeds meer kwaliteit. Hierdoor is het kaf van het koren gescheiden. De hobbyisten hebben het veld geruimd voor de professionals. De groei van een op tabellen gebaseerde lay-out naar en op webstandaarden gebaseerde lay-out is vooral evolutionair van aard en heeft vooral te maken met natuurlijke selectie. Het leren van JavaScript is veel moeilijker dan het leren van XHTML en CSS, maar nu steeds meer ontwikkelaars deze laatste twee onder de knie hebben is het tijd voor een nieuwe uitdaging. Google Maps heeft voor vele ontwikkelaars de ogen geopend. Deze zijn druk aan het ontwikkelen gegaan wat momenteel resulteert in een wildgroei aan interactieve Internet toepassingen.

Ajax en gebruiksvriendelijkheid

Hoewel Ajax vanuit technologisch perspectief misschien niet de best mogelijke benaming is, blijven we dit begrip verder wel hanteren voor het gemak van de discussie.

Uiteindelijk zijn het de eindgebruikers die bepalen of een technologie slaagt of niet. Ajax is nu vooral nog iets voor de vernieuwers en de vroege aanvaarders, om maar even in de termen van Rogers18 te spreken. Of het echter geaccepteerd zal worden door de grote meerderheid is volledig afhankelijk van de uiteindelijke voordelen voor de gebruiker. Met andere woorden “wat schiet ik er mee op”

Het einde van World Wide Wait

Internet wordt wel eens gekscherend het World Wide Wait19 genoemd. Vaak is wachten, wachten, wachten ook wel een heel passende benaming. Dat dit leidt tot heel veel frustratie leidt blijkt maar weer eens uit een discussie over de traagheid van de onlangs gelanceerde postbank site20.

De voorbeelden Google Gmail, Google Maps en Flickr hebben een ding met elkaar gemeen en dat is dat er van wachten haast geen sprake meer is. Dankzij Ajax lijkt er een einde te zijn gekomen aan dat eeuwige wachten21.

Traditioneel gezien kenmerkt Internet zich door haar start-stop-start-stop natuur van interactie. De gebruiker van een website voert een actie uit. Dit gaat naar de webserver toe en deze presenteert vervolgens het resultaat aan de bezoeker.

Ajax is als het ware een extra laag tussen de gebruiker en de server. Op een actie van de gebruiker vindt vrijwel onmiddellijk feedback plaats.

Foutenreductie dankzij Ajax

Allemaal hebben we wel eens een formulier ingevuld die, nadat we op de verzendknop klikten, ons vrolijk meedeelde dat we onze postcode niet juist hebben ingevoerd.

Waarom gebeurt dit? Vragen we ons af! Nu vullen we dit formulier weer in maar dan heeft de ontwikkelaar gebruik gemaakt van Ajax. We vullen weer onze postcode in maar voordat we op de verzend knop drukken waarschuwt de website ons al dat we een fout gemaakt hebben.

Dankzij de mogelijkheid van directe feedback kunnen fouten worden voorkomen.

Flow-ervaring dankzij Ajax

De zoekmachine A9.com22 is ook een mooi voorbeeld van wat allemaal mogelijk is. Door het eenvoudig aanvinken van een selectievakje zoek je in meerdere categorieën of laat je alle zoekresultaten van een categorie weg. De resultaten krijg je vrijwel onmiddellijk na het aanvinken van het selectievakje.

Het is de snelheid waarmee de website reageert op onze keuze dat Ajax zo geliefd bij de bezoekers maakt.

De Amerikaanse psycholoog Roger Miller stelde eens het volgende rijtje op23:

0,1 seconde gebruikers hebben het gevoel dat het systeem onmiddellijk reageert;
1 seconde gebruikers zijn nog geconcentreerd;
10 seconden. gebruikers gaan andere dingen doen.

De interactie met de website gaat zo soepel dat we als het ware in gemakkelijk in een flow-ervaring24 geraken. We vergeten onze omgeving en verliezen de tijd uit het oog. We gaan volledig op in het systeem. Het is gewoon leuk om met de website te spelen.

Het einde van Pogo-sticking

Het heen en weer gaan van de productenlijst en de detailpagina van het desbetreffende product wordt ook wel pogo-sticking genoemd. Jared Spool stuitte op dit fenomeen toen hij de invloed van productlijsten op de verkoop van van e-commerce sites onderzocht.

Dit heen-en-weer surfen doen mensen als de productenlijst niet voldoende informatie biedt. Ze moeten dan een stap verder de website in duiken. Als ze de gedetailleerde informatie hebben gevonden die ze zochten keren ze weer terug naar de productenlijst en kiezen een ander product uit zodat ze een vergelijking kunnen maken.

Bezoekers die op basis van de productlijst al voldoende informatie hebben gaan in 55% van de gevallen over tot aankoop. Bezoekers die heen-en-weer moeten surfen doen dit slechts in 11% van de gevallen25.

Met Ajax-technologie is het mogelijk om per product meer informatie aan te bieden zonder dat de gebruiker daarvoor naar een heel nieuwe pagina hoeft te gaan.

Stel ik wil een broek kopen bij de Gap.com. Ik klik op Men en dan Jeans. Vervolgens krijg ik een overzicht spijkerbroeken. Ik zie eentje die ik op zich wel leuk vindt. Ik kan nu op de “quick look” button klikken. Vervolgens verschijnt er een pop-up scherm in mijn beeld en zie ik de spijkerbroek in het groot. Ik kan de kleur kiezen en zie een overzicht van de maten. Het is toch niet helemaal wat ik zocht. Ik sluit het pop-venster weer af en selecteer een andere spijkerbroek. Zo kan ik zeer snel alle producten even vergelijken voordat ik mijn keuze maak. Ajax maakt dus een einde aan pogo-sticking.

Ajax en toegankelijkheid

Een veel gehoord argument tegen Ajax is dat de website daardoor niet toegankelijk is. In het voorbeeld van Gap.com is dat ook het geval. Indien de browser geen JavaScript ondersteunt werkt de site niet. Maar dit is eerder een keuze van de bouwer dan van een beperking van de technologie.

Het mooiste voorbeeld is misschien nog wel Google Suggest. Je tikt een zoekterm in en krijgt een overzicht van allerlei andere interessante zoektermen. Schakel je echter JavaScript uit dan werkt de zoekmachine nog steeds alleen krijg je nu niet dat extra overzichtje.

Een perfect voorbeeld van hoe je Ajax moet zien. Het is die Jus waardoor het vlees net even lekkerder smaakt. Maar net zoals het vlees de basis is voor het gerecht zo is toegankelijkheid de basis voor een webapplicatie.

Bronnen

  1. Google Gmailga terug naar de content
  2. Google Mapsga terug naar de content
  3. Flickrga terug naar de content
  4. Gap.comga terug naar de content
  5. New Approach From Gap to Cut Down on Clicksga terug naar de content
  6. Seven Technologies That Change Everythingga terug naar de content
  7. Ajax: A New Approach to Web Applicationsga terug naar de content
  8. Google Suggestga terug naar de content
  9. Dynamic HTML and XML: The XMLHttpRequest Objectga terug naar de content
  10. What Is Ajax And What Is It Good Forga terug naar de content
  11. Interactieve kaart Zwitserlandga terug naar de content
  12. DHTML 05ga terug naar de content
  13. Ajax, promise or hype?ga terug naar de content
  14. History of the Web Standards Projectga terug naar de content
  15. Amazon.com: Designing with Web Standardsga terug naar de content
  16. Zeldman video keynotega terug naar de content
  17. Drievuldigheid van Webstandaardenga terug naar de content
  18. Innovatietheorie van Rogersga terug naar de content
  19. World Wide Wait: Information From Answers.comga terug naar de content
  20. Postbank lanceert nieuwe sitega terug naar de content
  21. Ajax: How To Weave A Faster Webga terug naar de content
  22. A9.com Home Pagega terug naar de content
  23. Response Times: The Three Important Limitsga terug naar de content
  24. Flow (psychology) – Wikipedia, the free encyclopediaga terug naar de content
  25. Are the Product Lists on Your Site Reducing Sales? (Pas op PDF!)ga terug naar de content
Be Sociable, Share!