NEXT GENERATION INTERNET

Transcriptie

1 NEXT GENERATION INTERNET Rich Internet Applications: van HTML naar Post HTML Technologie Een verhaal over techniek, ratio en emotie Dr. Ir. A.N. Ladhani (Forward Thinking) Forward Thinking BV

2 SAMENVATTING HTML is een dominante technologie die zich bijna overal op het Internet doet gelden. Een radicale omslag in één keer naar een andere technologie lijkt uitgesloten. En toch lijkt er zich voor diegene die goed opletten een kleine revolutie op het Internet te voltrekken. Dit artikel gaat over het toenemende gebruik van Post HTML technologie op het Internet. Wat zijn de voornaamste verschillen tussen HTML en Post HTML technologie en waarom zal het gebruik van Post HTML technologie steeds meer toenemen? Deze vragen worden behandeld vanuit drie perspectieven: - Technologische factoren - Rationele factoren - Emotionele factoren Een belangrijke conclusie van dit artikel is dat Rich Internet Applications ontwikkeld in Post HTML technologie steeds meer een integraal deel zullen gaan uitmaken van de websites van vooral middelgrote en grote bedrijven en instellingen. De toepassing van Post HTML technologie zal zich vooral richten op de (inter)actieve componenten van Websites (bestellen, reserveren e.d) en op mini-sites om reclame campagne s en merken te versterken. Op deze terreinen zal Post HTML technologie in een versneld tempo de klassiek HTML technologie gaan verdringen. Forward Thinking BV 2

3 INHOUDSOPGAVE Samenvatting...2 Inhoudsopgave...3 leeswijzer...5 Inleiding...6 Een marketing probleem op het digitale kanaal...6 De gevonden oplossing...7 Gebruik van Post HTML technologie...7 Rich Internet Applications...8 Hoe eindigt het verhaal van de MINI Configurator?...8 Hoe gaat dit artikel verder?...9 Technologie, Ratio en Emotie...10 Het technische aspect van het ontwerp...10 Het rationele aspect van het ontwerp...11 Het emotionele aspect van het ontwerp...11 Een sterke toename van het aantal droomproducten...12 Het verschil in technologie, ratio en emotie tussen HTML en Post HTML...13 Het HTML Tijdperk...14 De technologische aspecten van HTML oplossingen...14 Schermen bestaan uit tabellen Navigatie via hyperlinks Logica en geheugen aan de serverkant De rationele aspecten van HTML oplossingen...15 Usability Engineering Usability en de grenzen van HTML De emotionele aspecten van HTML oplossingen...16 Droomverhaal omvat verschillende niveau s Branding elementen in een site Forward Thinking BV 3

4 Beeldmaterialen Teksten (Skip) Intro s De beperkingen van HTML Conflicten in merkbeleving De achterwaartse evolutie van Desktop applicaties naar HTML applicaties...20 Het POST HTML Tijdperk...23 NIKE als voorbeeld van een trendzetter...23 Industriële vormgeving van Webapplicaties...24 De technologische aspecten van Post HTML oplossingen...25 Volwaardige Grafische User Interface Krachtige Objectgeoriënteerde software ontwikkelomgeving...27 Gebruik maken van rekenkracht en geheugen van de PC Geen lokale installatie vereist en geen lange wachttijden bij het laden Communicatie met de server op de achtergrond Multimedia ondersteuning twee kanten op Flash MX als Post HTML technologie? De rationele aspecten van Post HTML oplossingen...32 Voorbeeld: AEGON Hypotheek Calculator (2001) Single page design versus multiple page design User control versus system control Immediate and advance feedback Use of Visual Information Channel De emotionele aspecten van Post HTML oplossingen...37 Experience design naast Interaction design Hi-Definition beeld en geluid Embedded Multimedia Het vinden van de juiste mix tussen technologie, ratio en emotie...40 Conclussies...42 Over de auteur...44 Forward Thinking BV 4

5 LEESWIJZER Dit artikel begint met een voorbeeld waarin een marketing probleem ertoe leidt dat een autofabrikant ervoor kiest om via haar website zich op het Internet kanaal in sterke mate te onderscheiden van de concurrenten. Deze autofabrikant kiest voor een Rich Internet Application oplossing waarbij er gebruik wordt gemaakt van een ander soort technologie dan HTML. Deze technologie valt onder de categorie van wat wij Post HTML technologie noemen. Hierna wordt in hoofdstuk 2 aan de hand van een tweede voorbeeld van een Rich Internet Application, de begrippen technologie, ratio en emotie geïntroduceerd. Deze drie begrippen blijken centraal te staan bij het ontwerpen van User Interfaces voor Webapplicaties. Vervolgens wordt in hoofdstuk 3 eerst ingezoomd op oplossingen in HTML en worden achtereenvolgens de technologische, rationele en emotionele aspecten hiervan uiteengezet. In hoofdstuk 4 wordt ingezoomd op oplossingen in Post HTML. Analoog aan hoofdstuk 3, worden hier achtereenvolgens de technologische, rationele en emotionele aspecten van Post HTML oplossingen uiteengezet. De voornaamste User Interface technologie voor Post HTML blijkt dan Flash MX te zijn. De voordelen, nadelen en mogelijkheden van Flash MX als Post HTML technologie worden behandeld. Tenslotte worden in hoofdstuk 5 een aantal conclusies gepresenteerd. Forward Thinking BV 5

6 INLEIDING In 2000 werd op de autoshow in Parijs door BMW de nieuwe MINI aan het grote publiek gepresenteerd. Kosten nog moeite werden gespaard om hier een indrukwekkende show van te maken. Bedrijven steken vanuit hun marketingoverwegingen veel tijd, energie en geld in het bewust creëren van een gewenst imago en beleving van hun merk, diensten en producten. Afbeelding 1, MINI op een fysieke autoshow Een marketing probleem op het digitale kanaal Het was BWM glashelder dat het life style product MINI ondersteund moest worden met een sterk onderscheidende marketing en reclame campagne. Waar tot nu toe het neerzetten van een merk imago vooral gebeurde via televisie, tijdschriften en de showrooms, was er nu een nieuw kanaal bijgekomen: het Internet. Een gouden regel bij het uitdragen van een merkidentiteit is dat de beleving via de verschillende communicatiekanalen met elkaar in harmonie is. Een supermarkt die zich zelf profileert als de goedkoopste verliest zijn geloofwaardigheid als er opeens dure folders worden uitgegeven en omgekeerd. In afbeelding 2 zijn een aantal primaire communicatiekanalen weergegeven. Bedrijven zullen hun best willen doen om de kanalen zo in te richten en te gebruiken dat de beleving van een merk, product en dienst via deze kanalen elkaar aanvullen en versterken. Forward Thinking BV 6

7 Afbeelding 2, De beleving van een merk, product en dienst via verschillende kanalen Dit betekende voor de marketing afdeling van BWM dat men voor de website voor de MINI niet kon kiezen voor een standaard op HTML gebaseerde website met teksten en plaatjes maar gericht opzoek moest gaan naar een oplossing met een sterk onderscheidend vermogen. De gevonden oplossing Uiteindelijk kwam men uit op een oplossing waarin een MINI Configurator centraal stond. Het idee was om potentiële MINI kopers via de website in staat te stellen om op een vooral leuke en eenvoudige wijze de eigen MINI samen te stellen. Vervolgens kon deze configuratie naar een MINI dealer in de buurt gestuurd worden. De dealer nam contact op met de potentiële koper om de configuratie te bespreken, de klant uit te nodigen voor een proefrit en om de uiteindelijke koopprijs uit te onderhandelen. Nadat de MINI is aangeschaft, krijgt de eigenaar toegang tot een speciaal gedeelte van de site voor nazorg, onderhoud en aanbiedingen waarbij actief contact wordt gehouden met de eigenaar via en nieuwsbrieven. Een briljant plan om zowel het merkgevoel via de verschillende kanalen te versterken als de kanalen naadloos met elkaar te laten samenwerken om synergie hieruit te halen. Tegenwoordig maken bijna alle grote automerken gebruik een auto Configurator. In 2001 was MINI hiermee een trendzetter. Een schermafdruk van de MINI Configurator is te zien in Afbeelding 3. Gebruik van Post HTML technologie Vanuit een technische realisatie oogpunt kon de MINI Configurator niet in HTML gerealiseerd worden. Bij HTML oplossingen wordt gebruik gemaakt van de server om bij elke stap in de configuratie een nieuwe HTML pagina te genereren en te verzenden. Om de MINI Configurator voor de bezoeker van de website lekker te laten werken en te laten passen bij het trendy MINI gevoel was het nodig de MINI configurator als een desktop programma s te laten werken. Dus niet de configuratie laten uitvoeren door de server maar lokaal op de eigen PC met een volwaardige Grafische User Interface. Echter, zonder het moeten downloaden en installeren van een apart Forward Thinking BV 7

8 programma hiervoor. Niet alleen is downloaden en installeren vervelend en drempelverhogend voor de website bezoeker maar wat als het assortiment of de kleuren veranderen? De oplossing werd gevonden in het toepassen van Flash technologie, berucht van de vele vervelende skip intro s. Flash werd hier gebruikt om een functionele webapplicatie te programmeren die compact in omvang was, in veruit de meeste gevallen geen (lokale) installatie vergde (Flash plugin is over het algemeen al aanwezig) en waarbij de applicatie op de achtergrond met de server communiceerde om altijd het meest actuele assortiment aan te bieden. Afbeelding 3,De MINI configurator op Rich Internet Applications De MINI Configurator is één van de eerste voorbeelden van wat tegenwoordig een Rich Internet Application of te wel een RIA wordt genoemd. Tevens is dit een voorbeeld van een website waarbij uitgebreid gebruik is gemaakt van Post HTML technologie. In Hoofdstuk 4 van dit artikel wordt nader ingegaan op Rich Internet Applications. Hoe eindigt het verhaal van de MINI Configurator? Hoe is het uiteindelijk afgelopen met de MINI Configurator? Het eerste dat hierover geschreven kan worden is dat de MINI Configurator nog steeds operationeel is en intensief door potentiële klanten gebruikt wordt. BMW had als doel gesteld dat per 1 januari 2003 zou moeten Forward Thinking BV 8

9 beschikken over geregistreerde bezoekers. Dit bleken er uiteindelijk te zijn (bron: onderzoeksbureau IDC, april 2003). Van deze bezoekers hebben 73% een MINI geconfigureerd waarbij in totaal MINI s zijn geconfigureerd. Hiervan zijn configuraties naar dealers gestuurd voor een concrete aanbieding. Voor de dealers genereert de MINI Configurator gemiddeld 60 gekwalificeerde leads per dealer per week. Van alle personen die een MINI aanschaffen registreert ongeveer 60% zich voor het owners gedeelte van MINI genereert via de website meer leads dan via televisiecommercials (bron: onderzoeksbureau IDC, april 2003). Een Configurator realiseren en in productie nemen kost ruwweg tussen de en euro. Een televisiecampagne kost minimaal euro. Hiermee heeft het marketing model van automerken drastisch veranderd. Inmiddels weet elke automerk dat het Internet kanaal vooral een zeer krachtige en kosteneffectieve lead generator is. Potentiële kopers zullen niet zo snel een auto via het Internet kopen, maar als men op zoek is naar een auto dan wordt massaal het Internet geraadpleegd en wordt via dit medium een eerste verkenning en selectie uitgevoerd. Op dit moment gebruikt ongeveer 75% van de personen die een auto kopen het Internet bij het bepalen van de keuze (bron: ). Waar automerken nog steeds behoorlijk mee worstelen is om op het Internet kanaal een juiste beleving tot stand te brengen waarbij er een synergie wordt gevormd met de andere communicatie en interactiekanalen zoals de dealers, televisie en tijdschriften. Een telkens terugkerende centrale vraag blijft hoe ze op een succesvolle manier zich kunnen blijven onderscheiden van hun concurrenten. Hoe gaat dit artikel verder? De antwoorden op de vraag hoe zich te onderscheiden van de concurrentie en op welke wijze goed gebruik te maken van de verschillende kanalen omvatten vele factoren en overwegingen. De belangrijkste factor in het onderscheidende vermogen zal in vele gevallen het product of de dienst zelf zijn. In dit artikel richten we ons echter vooral op de communicatie van een merk, product of dienst via het Internet Kanaal en de beleving die hierbij tot stand kan worden gebracht. Aanleiding hiertoe is een belangrijke ontwikkeling en verandering op het gebied van de Internet Technologie. We constateren namelijk een toenemende beschikbaarheid en inzet van Post HTML technologie in combinatie met breedband Internet. Forward Thinking BV 9

10 TECHNOLOGIE, RATIO EN EMOTIE Een ander klassiek voorbeeld van een Rich Internet Application is The Boadmoor Hotel waarmee op een vernieuwende wijze online een hotelkamer geboekt kan worden. Afbeelding 4 laat een schermafdruk hiervan zien. In plaats van de gebruikelijke wizard oplossing met stappen is hier gekozen voor een 1 scherm oplossing. In het linkerdeel kan in een kalender verblijfdata geselecteerd worden en in het middelste deel de hotelkamer. Het rechterdeel bevat een boekingsformulier. De kracht van deze applicatie is dat het dezelfde directe responsekracht heeft als een Desktop applicatie. De bezoeker kan zowel links bij de kalender als in het midden bij de kamer beginnen. De Grafische User Interface zorgt ervoor dat alle onderdelen consistente en actuele informatie tonen. Wordt een kamer gekozen, dan wordt direct in de kalender getoond op welke dagen deze kamer nog beschikbaar is. Worden in de kalander data geselecteerd, dan toont het middelste deel direct alle beschikbare kamers. Alle gegevens die al bekend zijn, worden direct in het boekingsformulier bijgewerkt, volgens het Wat je ziet is wat je krijgt principe. Deze RIA laat op gebied van website ontwerp een innovatie zien op drie gebieden: het technische aspect, het rationele aspect en het emotionele aspect. Afbeelding 4, De Broadmoor hotelreserveringsite Het technische aspect van het ontwerp De innovatie ten aanzien van de gebruikte technologie bevindt zich vooral aan de kant van de voorkant van deze webapplicatie. Er is niet gekozen voor een HTML front end maar een front end ontwikkeld in Flash 5. Net als bij het MINI Configurator voorbeeld in de vorige sectie, is ook hier Flash niet gebruikt voor een intro of animaties maar voor het aanbieden van gerichte Forward Thinking BV 10

11 functionaliteiten, in dit geval het eenvoudig kunnen kiezen van een kamer in combinatie met boekingsdata en met zo weinig mogelijk extra invoer kunnen invullen van een boekingsformulier. Flash is bij deze webapplicatie zo gebruikt dat de voorkant bestaat uit een volwaardige Grafische User Interface. Het gevolg is dat deze Internet applicatie meer lijkt op en aanvoelt als een Desktop applicatie dan een HTML pagina. De programmatuur en opslag van tussentijdse gegevens bevinden zich niet meer op de server maar zijn door middel van de Flash movie overgebracht naar de PC van de gebruiker. Hierdoor hoeft tijdens het gebruik niet elke keer een nieuwe pagina van de server gehaald te worden zoals dat gebruikelijk is bij HTML oplossingen. Alleen voor het ophalen van actuele reserveringsgegevens en voor het feitelijk boeken van een hotelkamer wordt door de Flash movie automatisch gecommuniceerd met de server. Het rationele aspect van het ontwerp De beleving van een persoon die een website bekijkt omvat twee basis gevoelens: ratio en emotie. De rationele beleving heeft te maken met duidelijkheid, begrijpbaarheid, gebruikersvriendelijkheid, snelheid etc. Over het algemeen zullen de bezoekers de Broadmoor webapplicatie vanuit een rationele beleving ervaren als overzichtelijk en eenvoudig in gebruik, zeker als deze applicatie naast de gangbare HTML wizard oplossing wordt getoond. Dit heeft met twee belangrijke eigenschappen van dit ontwerp te maken. Ten eerste is alle relevante informatie op 1 pagina beschikbaar. De bezoeker hoeft niet te onthouden wat in een voorgaande stap is gebeurd en hoeft ook niet te gissen wat in een volgende stap zal gebeuren. Ten tweede bepaalt niet het systeem de volgorde van werken van de bezoeker, maar deze persoon kan dat zelf bepalen. In plaats van in een wizard oplossing gedwongen te worden om eerst te beginnen met de boekingsdata en dan in stap 2 gedwongen te worden om een kamer te kiezen, kan de bezoeker bij Broadmoor zelf bepalen of eerst een hotelkamer wordt gekozen of dat eerst een aantal reserveringsdata geselecteerd worden, Het emotionele aspect van het ontwerp De emotionele beleving van een website is over het algemeen moeilijker te begrijpen en te verklaren dan de rationele beleving. Dit is echter wel een beleving die direct te maken heeft met het koopgedrag van consumenten. Bedrijven proberen hun doelgroep gericht te beïnvloeden door bij hun merk een specifieke beleving neer te zetten en in hun communicatie deze beleving te uiten. Forward Thinking BV 11

12 In geval van het merk Broadmoor zou het onmiddellijk duidelijk moeten zijn dat het hier gaat om een vijf sterren hotel-resort met de hoogste standaarden op gebieden van kwaliteit, dienstverlening en voorzieningen. Deze beleving is namelijk nodig voor de gevoelsmatige onderbouwing van de behoorlijk hoge kamerprijzen. Als een bezoeker van de website van Broadmoor niet continue het gevoel krijgt dat dit een hotel is die uitblinkt in kwaliteit, dienstverlening en voorzieningen dan zal deze bezoeker niet bereid zijn om het relatief hoge geldbedrag aan dit bedrijf uit geven. Het online reserveringssysteem heeft op die plek dan relatief weinig nut. Over het algemeen zullen de bezoekers de Broadmoor webapplicatie vanuit een emotionele beleving ervaren als inderdaad een hotel is die uitblinkt in kwaliteit, dienstverlening en voorzieningen. Een drietal ontwerpkeuzen van deze webapplicatie dragen hier aan bij: Ten eerste is de gekozen vormgeving in overeenstemming met de beoogde beleving van dit merk. Maar eigenlijk is dit een nogal voor de hand liggend punt. Ten tweede is er bewust voor gekozen om het product zelf, de hotelkamer, te laten ervaren door deze prominent in beeld te brengen. Op het moment dat de bezoeker op een kamer klikt, dan wordt een fraaie foto van deze kamer getoond. Dit gebeurt zonder dat er zoals bij HTML een nieuwe pagina wordt ingeladen. Alleen de foto wordt verwisseld, wat resulteert in een meer rustgevende User Interface met een kwalitatief hoogwaardige uitstraling. Ten derde versterkt in dit geval de rationele beleving de emotionele beleving. De overzichtelijke en gebruikersvriendelijke User Interface draagt bij aan de emotionele beleving dat dit inderdaad een hotel is die uitblinkt in kwaliteit, dienstverlening en voorzieningen en bevestigd het gevoel bij de bezoeker, dat zijn of haar verwachtingen en wellicht dromen door dit hotel waargemaakt zullen worden. Een sterke toename van het aantal droomproducten Volgens de bekende futurist Rolf Jensen van het Copenhagen Institute for Future Studies ( zal, naarmate de welvaart en vrije tijd toenemen, het besluit om iets aan te kopen eerder voortkomen uit emotionele dan rationele overwegingen. Niet alleen de kwaliteit en functionaliteit van het product of de dienst is relevant maar ook het verhaal achter het product of de dienst. Een aansprekend voorbeeld hiervan is het geval van het scharrelei. We zijn als consumenten bereid om meer voor dit product te betalen omdat we ons aangesproken voelen door het verhaal achter het scharrelei. Velen van ons willen blijkbaar graag dat de kippen die onze eieren leggen een beter leven krijgen. We zijn meer geneigd om producten te kopen van een bedrijf die een verhaal vertelt dat goed aansluit bij onze eigen levensstijl en opvattingen. Forward Thinking BV 12

13 Afbeelding 5, Voorbeeld van een droomproduct Het verhaal achter een merk is vooral van invloed bij de marketing van producten waarvan als vanzelfsprekend aangenomen kan worden dat de kwaliteit goed is en dat de functionaliteiten ruimschoots voldoende zijn. Zo leveren bijvoorbeeld Nike, Adidas en Puma in grote lijnen allemaal kwalitatief hoogwaardige sportschoenen met vergelijkbare prijzen. Hun onderscheidend vermogen komt vooral tot uiting in de merkbeleving en het verhaal dat aan de consumenten verteld wordt. Bij het vermarkten en verkopen van dit soort droomproducten wordt niet alleen ingespeeld op rationele overwegingen maar vooral ook op emotionele overwegingen. Een logisch gevolg hiervan is dat bij de bedrijven die zich richten op droomproducten, een sterke behoefte bestaat om via het Internet kanaal niet alleen rationele oplossingen te realiseren maar vooral ook oplossingen die op een gecontroleerde wijze de gewenste emoties tot stand kunnen brengen. Iets wat deze bedrijven overigens al van oudsher gewend zijn te doen op de klassieke kanalen zoals winkels, televisie en tijdschriften. Het verschil in technologie, ratio en emotie tussen HTML en Post HTML In dit hoofdstuk is stilgestaan bij de technische, rationele en emotionele aspecten bij het ontwerpen van websites en bij het gebruik van het Internet kanaal. In de volgende twee hoofdstukken worden eerst HTML en vervolgens Post HTML oplossingen vanuit deze drie oogpunten verder geanalyseerd op hun beperkingen en mogelijkheden. Forward Thinking BV 13

14 HET HTML TIJDPERK Op dit moment is HTML de dominante technologie om Internet pagina s via een browser te vertonen. HTML is ook een oude technologie die oorspronkelijk alleen bedoeld was om drukwerk bestaande uit opgemaakte teksten en plaatjes via een browser op een uniforme wijze op het scherm te presenteren en via hyperlinks te kunnen springen naar gerelateerde pagina s. De grote doorbraak in het gebruik van HTML begon in 1993 met de introductie en razendsnelle wereldwijde verspreiding van Mosaic, de eerste succesvolle webbrowser, een jaar later gevolgd door Netscape. HTML is in de jaren hierna steeds verder uitgebreid met scripttalen en objecten om allerlei interactieve schermen en webapplicaties beter mogelijk te kunnen maken. Iets waar HTML oorspronkelijk nooit voor bedoeld was. Inmiddels zijn de mogelijkheden van HTML tot het uiterste opgerekt. De technologische aspecten van HTML oplossingen In dit artikel staan we stil bij de drie belangrijkste technische eigenschappen van op HTML gebaseerde webapplicaties. Schermen bestaan uit tabellen De eerste eigenschap is dat schermen in deze applicaties opgebouwd zijn uit tabellen. HTML is immers een taal waarbij een scherm met daarin de User Interface voornamelijk wordt opgebouwd uit tabellen. Dit in tegenstelling tot Desktop applicaties waarbij de User Interface opgebouwd wordt uit allerlei grafische objecten die via x en y coördinaten op het scherm geplaatst worden en die in lagen over elkaar heen gelegd kunnen worden. In afbeelding 6 zijn twee voorbeelden van HTML sites weergegeven. De onderliggende tabelstructuren zijn hierin duidelijk zichtbaar. Dit effect wordt nog eens versterkt als er gebruik wordt gemaakt van een Content Management Systeem doordat hierdoor de pagina s via gestandaardiseerde tabelgebaseerde templates met een nog grotere uniformiteit opgemaakt worden. Navigatie via hyperlinks De tweede eigenschap heeft te maken met de wijze van navigatie. Voor navigatie wordt in HTML gebruik gemaakt van hyperlinks. Dit resulteert in de praktijk in veelal gestandaardiseerde navigatiestructuren bestaande uit een hoofdmenu met hyperlinks, vaak aan de bovenzijde van de pagina, en een submenu met hyperlinks, over het algemeen aan de linkerzijde van de pagina. Logica en geheugen aan de serverkant De derde eigenschap is dat er vrijwel alle logica en geheugen zich op de server bevindt en hiermee de verwerking van gebruikersinteractie voor het overgrote deel op de server plaats vindt. De Forward Thinking BV 14

15 gebruiker krijgt via een server een HTML pagina met invoervelden gepresenteerd. Na het invullen van de gegevens, worden deze door de gebruiker doorgestuurd naar de server door bijvoorbeeld op een OK of Verstuur knop te drukken. De server genereert op basis hiervan een compleet nieuwe HTML pagina, die vervolgens naar de browser van de gebruiker wordt verzonden en daar wordt getoond. Een gangbare manier om transacties zoals het reserveren van een hotelkamer of het betalen van een aankoop uit te voeren is via een wizard of stappenplan bestaande uit een aantal HTML pagina s die allemaal achter elkaar doorlopen moeten worden. Via het gebruik van scripts in de HTML pagina wordt geprobeerd om eenvoudige foutmeldingen alvast voor het versturen van de pagina te tonen, maar dit lukt vaak maar ten dele. Over het algemeen zullen de meeste foutcontroles en afhandelingen op de server plaats vinden. Een belangrijk gevolg hiervan is dat foutmelding pas achteraf gegenereerd kunnen worden. Deze worden dan op een nieuwe HTML pagina getoond die opnieuw ingeladen moet worden. Afbeelding 6, Voorbeelden van op HTML gebaseerde webapplicaties De rationele aspecten van HTML oplossingen In de beginperiode van HTML werden websites en webapplicaties veelal ontworpen door ontwikkelaars met voornamelijk een technische achtergrond. Veelal waren de gekozen oplossingen logisch en technisch slim vanuit het oogpunt van de individuele ontwikkelaar maar niet altijd even gebruikersvriendelijk voor het grote publiek. De afgelopen jaren heeft het vakgebied van de Usability Engineering een grote vlucht genomen. Dit vakgebied heeft tot doel via onderzoek, ontwerpregels en ontwerprichtlijnen de bruikbaarheid voor het grote publiek van software oplossingen waaronder ook websites en webapplicaties continue te verbeteren. Forward Thinking BV 15

16 Usability Engineering Inmiddels zijn een flink aantal Usability handboeken voor het professioneel ontwerpen van Internetsites beschikbaar. Deze handboeken bevatten allerlei ontwerprichtlijnen en controlelijsten voor HTML gebaseerde oplossingen. Elk zichzelf respecterende Internetbureau maakt tegenwoordig gebruik van de belangrijkste basisprincipes van Usability Engineering. Grotere ondernemingen werken steeds meer met stijlhandboeken die naast huisstijleisen ook steeds meer richtlijnen bevatten die betrekking hebben op Usability zaken zoals gebruikersvriendelijkheid, snelheid en standaardisatie van schermen en processen. Een aantal multinationals heeft tegenwoordig zelfs een aparte Usability afdeling die beschikt over een eigen Usability Lab. Hierin wordt op een methodische wijze nieuwe software waaronder ook websites en webapplicaties op proefpersonen getest. Usability en de grenzen van HTML Het resultaat hiervan is dat over het algemeen webapplicaties veel gebruikersvriendelijker zijn geworden dan in de beginjaren van HTML. Er heeft zich hier een professionaliseringsslag voorgedaan. Desondanks blinken Internet applicaties over het algemeen nog steeds niet uit door een hele hoge mate van gebruikersvriendelijkheid en gemak. Hiervan zijn talloze voorbeelden te geven, variërend van eenvoudige invulformulieren tot complete Internet Bankieren webapplicaties. Een eenvoudige steekproef om in de dagelijkse praktijk het maximale haalbare op gebied van de gebruikersvriendelijkheid te bepalen zou kunnen zijn om de websites te analyseren van bedrijven die primair via het Internet kanaal hun geld verdienen. Men mag redelijkerwijs aannemen dat deze bedrijven voorlopen op het gebied van Usability omdat dit een factor is die directe invloed heeft op hun commerciële succes. Een bezoektocht langs een aantal van dit soort bedrijven leert ons dat deze websites op zich redelijk bruikbaar zijn, maar dat we door toch erg veel HTML pagina s moeten (inclusief vaak gebruikmakend van de backbutton van de browser) om een gewenst resultaat te verkrijgen. Hierbij valt op dat naar mate er meer functionaliteit nodig is, bijvoorbeeld om te zoeken, te bestellen, te reserveren of om iets samen te stellen, de gebruikersvriendelijkheid en de overzichtelijkheid van de HTML pagina s in veel gevallen zichtbaar afnemen. De praktische grenzen van de verdere verbetering van de gebruikersvriendelijkheid en het gemak van op HTML gebaseerde websites en webapplicaties lijken ons in het zicht te zijn gekomen. De emotionele aspecten van HTML oplossingen Dit artikel is begonnen met een verhaal over de introductie van de nieuwe MINI. De MINI is een duidelijk voorbeeld van een droomproduct waarbij de marketing en verkoop maximaal gericht is op het aanspreken van de juiste emoties bij de beoogde kopers. Hoe zit dat bij andere producten die niet zo een duidelijk trendy imago hebben? Men zou wellicht geneigd zijn om te redeneren dat bijvoorbeeld saaie financiële producten zoals pensioenen, verzekeringen en hypotheken geen Forward Thinking BV 16

17 droomproducten zijn. Als echter de marketing en reclame uitingen van deze producten nader onder de loep worden genomen, bijvoorbeeld de televisiecommercials, dan blijkt de emotionele boodschap in veel gevallen sterker dan de rationele boodschap. Deze producten worden veelal gepresenteerd als middelen voor een gelukkige oude dag, pret bij schade of het vinden van een betaalbaar droomhuis. Ook opvallend is de enorme hoeveelheid geld dat er telkens besteed wordt aan de visuele verschijning van hoofdkantoren van de meeste financiële instellingen. Blijkbaar willen de Raden van Bestuur van deze instellingen hiermee een verhaal vertellen aan hun relaties en klanten, net als de ontwerpers van de MINI brochure. Volgens Rolf Jensen van het Copenhagen Institute for Future Studies ( zullen in onze maatschappij die bedrijven de markten domineren, die hun producten en diensten, omgeacht de inhoud, als droomproducten weten te positioneren. Afbeelding 7, De HTML Website van een cosmetica fabrikant Droomverhaal omvat verschillende niveau s In Afbeelding 7 is een HTML Webpagina weergegeven van een cosmetica fabrikant, een bij uitstek verkoper van droomproducten. De droom die cosmetica fabrikanten willen waarmaken en het verhaal dat ze hierbij willen vertellen omvat over het algemeen meerdere niveau s. Het eerste Forward Thinking BV 17

18 niveau heeft te maken met het mooi uit willen zien zonder hier al te veel moeite voor te willen doen. In dit niveau worden vooral de functionele eigenschappen van het product belicht. Het tweede niveau heeft bijvoorbeeld te maken met het willen behoren tot een bepaalde groep of stroming. Het derde niveau gaat over het bereiken van bepaalde doelen in het leven variërend van materiel succes en status tot meer immateriële zaken zoals geluk en persoonlijke voldoening. De lagere niveau s hebben een meer functionele boodschap (een mooie huid of glanzend haar in 10 minuten per dag) terwijl de hogere niveau s een meer emotionele boodschap willen overbrengen (succes en geluk in het leven). Wat zijn de voornaamste mogelijkheden die HTML technologie bieden om het verhaal bij een droomproduct te vertellen? Branding elementen in een site Ten eerste, de meest zichtbare manier in HTML is om een bepaalde merkbeleving tot stand te brengen door de branding elementen van een merk of product zoals het logo en de huisstijlkleuren terug te laten komen in de HTML pagina s. In Afbeelding 7 is via het logo duidelijk zichtbaar dat het hier gaat om producten van het bekende merk Revlon. Beeldmaterialen Een tweede gangbare manier is het gebruik van beeldmaterialen, lettertypen, banners e.d. In Afbeelding 7 wordt een product gepresenteerd die ervoor zorgt dat het gezicht meer gaat stralen. Dit effect wordt verduidelijkt via een mooie foto met daaronder een tekstbanner. Teksten Ten derde worden teksten gebruikt om een product aan te prijzen. In Afbeelding 7 zijn onder een aantal producten teksten te zien waarin een nadere beschrijving van het product wordt gegeven. (Skip) Intro s Een vierde veel voorkomende maar even omstreden manier om een droomverhaal te vertellen is via de skip intro s. Deze intro s zijn een aantal jaren gelden massaal opgekomen en op een gegeven ogenblik leek het zelfs erop dat elke zich zelf respecterende website moest openen met een intro. Intro s zijn ontstaat doordat designers hierin een mogelijkheid zagen om hun artistieke talanten een podium te bieden. Blijkbaar zagen bedrijven vervolgens deze Intro s als een mogelijkheid om op hun HTML website het droomverhaal achter hun merk of product te vertellen. Iets dat blijkbaar onvoldoende lukt met de voorgaande drie manieren. Het Internet is echter een medium waarbij gebruikers zijn gewend om door te klikken als iets hun niet aanstaat. Wanneer de op emotie gerichte droomboodschap van een bedrijf botst met de rationele behoefde van de Forward Thinking BV 18

19 gebruiker om op dat moment om niet te willen wachten maar te willen doorklikken, dan lukt het niet om het droomverhaal op die wijze op dat moment te vertellen. In het ergste geval kan deze werkwijze juist ergernis oproepen en daarmee een ongewilde negatieve emotie ten opzichte van het merk of product. De beperkingen van HTML Er kan gesteld worden dat HTML-pagina s door de bovengenoemde mogelijkheden vooral geschikt lijken om bij producten de lagere, meer functionele niveau s van het droomverhaal te communiceren. Deze vaststelling wordt bevestigd door de waarneming dat HTML pagina s vaak lijken op brochures of folders. Het grote voordeel van HTML pagina s is dat deze veel eenvoudiger te distribueren en te onderhouden zijn dan papieren folders of brochures. Een medium dat op dit moment dominant gebruikt wordt om de hogere niveau s van een droomverhaal te communiceren is televisie. Dit gebeurt niet alleen via commercials maar ook via sportprogramma s of via programma s over reizen, auto s, eigen huis en ga zo maar door. Belangrijke elementen hierin zijn de sterren en helden die zich direct of indirect associëren met een bepaald merk en/of product. Afbeelding 8, Het verschil in merkbeleving op de Website en in de Bankshop Conflicten in merkbeleving Een tweede probleem dat bij HTML oplossingen optreedt, is het verschil dat kan ontstaan tussen een merkbeleving op het Internet kanaal en de andere kanalen zoals in de winkel of op het Forward Thinking BV 19

20 kantoor. In Afbeelding 8 is als voorbeeld zowel de Website van een bank weergegeven als een foto van het interieur van een Bankshop van deze zelfde bank. Afbeelding 8 laat zien dat er een groot visueel verschil is tussen de op tabellen gebaseerde HTML startpagina en de bijna industrieel vormgegeven interieur van de Bankshop. De Bankshop maakt door de opvallende verschijning een andere indruk dan de weinig onderscheidende Website. Niet zo zeer het individuele ontwerp van de website of van de Bankshop is voor dit verhaal relevant maar meer het verschil in beleving tussen deze twee ontwerpen. De achterwaartse evolutie van Desktop applicaties naar HTML applicaties Het gerenommeerde onderzoeksbureau Forrester Research heeft onderzoek gedaan naar de evolutie van User Interfaces en hun gebruikersvriendelijkheid. Een belangrijke constatering die zij doen is dat met de komst van de Internet Browsers, de mogelijkheden om aan informatie te komen enorm zijn toegenomen maar dat de gebruikersvriendelijkheid hierbij sterk is afgenomen. Sinds 1995 is Microsoft Windows het dominante besturingssysteem voor PC s. Programma s die onder Windows draaien, maken gebruik van een volwaardige Grafische User Interface. HTML pagina s zijn opgebouwd uit tabellen en gebruikersacties leiden over het algemeen tot het laden van een nieuwe HTML pagina. In het algemeen kan gesteld worden dat Webpplicaties in HTML minder gebruikersvriendelijk zijn dan vergelijkbare Desktop applicaties in Windows. De grote groei van Internet is gekomen na de grote groei van Windows applicaties. Aangezien de gebruikersvriendelijkheid van HTML applicaties in feite een achteruitgang is ten opzichte van de gebruikersvriendelijkheid van Desktop applicaties onder Windows, is er hier sprake van een achterwaartse evolutie. Deze achterwaartse evolutie is geillustreerd in Afbeelding 9. Forward Thinking BV 20

21 Afbeelding 9, De omgekeerde evolutie als gevolg van HTML In het vorige hoofdstuk is de broadmoor hotelreserveringapplicatie behandeld. De User Interface hiervan is weergegeven in Afbeelding 10. Wat hier eigenlijk gedaan is, is dat er een Internet applicatie is gerealiseerd die een User Interface heeft zoals we die gewend zijn van een Desktop applicatie. Forrester gebruikt de term X-Internet voor Internet applicaties waarvan de User Interface weer dezelfde mate van interactiviteit, flexibiliteit en kracht terugkrijgt als de Desktop applicaties en tegelijkertijd de kracht van het Internet behouden wordt om in principe alle computers ter wereld met elkaar te verbinden en fysieke barrières te doen verdwijnen. Macromedia hanteert hiervoor de term Rich Internet Applications en geeft hier de volgende betekenis aan: Rich Internet Applications combine the functionality of desktop software applications with the broad reach and low-cost deployment of web applications resulting in significantly more intuitive, responsive, and effective user experiences. Forward Thinking BV 21

22 Afbeelding 10, De broadmoor webapplicatie lijkt op een Desktop applicatie Webapplicaties die als doel hebben om dezelfde mate van interactiviteit, flexibiliteit en kracht terug te krijgen als de Desktop applicaties, maken onder water niet meer gebruik van HTML maar van Post HTML technologieën. In het volgende hoofdstuk gaan we uitgebreid in op het begrip Post HTML en behandelen we Post HTML applicaties vanuit hun technologische, rationele en emotionele aspecten en mogelijkheden. Forward Thinking BV 22

23 HET POST HTML TIJDPERK In het eerste hoofdstuk van dit artikel werd de on-line configurator van MINI beschreven. In het tweede hoofdstuk hebben wij de Boadmoor webapplicatie voor het reserveren van een hotelkamer behandeld. Dit zijn voorbeelden van Post HTML Webapplicaties. Een derde voorbeeld van een bedrijf dat voor haar Internetkanaal gebruik maakt van Post HTML technologie is NIKE. NIKE als voorbeeld van een trendzetter Net als MINI, is NIKE een bedrijf dat zich richt op een krachtige merkbeleving. De missie van NIKE is om inspiratie en innovatie te brengen bij elke atleet in de wereld. Vanuit dit vertrekpunt beschouwt NIKE zichzelf als een innovator en een trendzetter, dus ook in haar communicatiekanalen. Nike heeft ervoor gekozen om voor haar Internet kanaal primair gebruik te maken van Post HTML Technologie om hiermee op het visuele en interactieve vlak een sterk onderscheidend vermogen ten opzichte van de andere marktspelers te kunnen realiseren. Afbeelding 11, De verschillende Post HTML thema sites van NIKE Via kunnen bezoekers kiezen voor een taalgebied en een thema. Voorbeelden van thema s zijn: nikefootball, nikebasketball, nikegolf en nikewoman. Voor elke thema heeft NIKE aparte Rich Internet Applications gemaakt. Elke applicatie heeft een eigen opvallend en Forward Thinking BV 23

24 onderscheidend vermogen en een hoge mate van interactiviteit. Deze Post HTML webapplicaties beschikken over een volwaardige Grafische User Interface met een look, feel en response van fraai ontworpen Desktop applicaties. Industriële vormgeving van Webapplicaties Bij gebruikersvoorwerpen in de fysieke wereld is het tegenwoordig gebruikelijk dat deze industrieel worden vormgeven. Dat wil zeggen dat het ontwerp hiervan een bewuste en weloverwogen afweging is geweest tussen de decoratieve en functionele kant, of te wel tussen de VORM en de FUNCTIE. In Afbeelding 12 zijn een aantal koffiezetters weergegeven waarvan de ontwerpen zich duidelijk van elkaar onderscheiden in functie en vorm. Afbeelding 12, Industriële vormgeving van koffiezetters We zien steeds meer een uitbreiding van de traditionele toepassingsgebieden van de industriële vormgeving. In Afbeelding 13 zijn foto s weergegeven van het interieur van een ABNAMRO Bankshop. In dit concept wordt een bankfiliaal op een vernieuwende wijze ingericht als een self service center waar klanten eenvoudig kunnen binnenlopen om vervolgens een redelijk aantal zaken zelf via bankapparaten en PC s te kunnen regelen. De complete inrichting van een Bankshop is het resultaat geweest van een zorgvuldig ontwerpproces waarbij de juiste balans gevonden moest worden tussen de Vorm en de Functie van een Bankshop. Forward Thinking BV 24

25 Afbeelding 13, De inrichting van een Bankshop Bij het professioneel ontwerpen van webapplicaties worden ook telkens ontwerpbeslissingen genomen die te maken hebben met het kiezen van de juiste vorm- en functieaspecten. In dat opzicht kan er gesteld worden dat ontwerpers van webapplicaties zich in feite bezig houden met industriële vormgeving. Zeker als webapplicaties gezien kunnen worden als gebruikersvoorwerpen. Bij het ontwerpen van gebruikersvoorwerpen in de fysieke wereld speelt materiaal keuze veelal een belangrijke rol. Regelmatig worden er ontwerpen bedacht maar vervallen deze weer omdat ze niet gerealiseerd kunnen worden met de op dat moment beschikbare materialen. We zien dan ook dat innovaties in materialen vaak leiden tot ook innovaties in industriële vormgevingen. In dat opzicht kan Post HTML technologie ook gezien worden als een materiaal voor de industriële vormgevers van webapplicaties. In de volgende secties proberen we na te gaan wat Post HTML betekent voor te technologische, rationele en emotionele aspecten van webapplicaties. De technologische aspecten van Post HTML oplossingen In dit artikel is eerder gesteld dat het niveau van gebruikersgemak dat sinds de komst van de Windows desktop beschikbaar was gekomen, met de komst van de Internet Browsers weer achteruit gevallen is door de relatief beperkte functionele mogelijkheden van HTML pagina s. Post HTML moet het technisch mogelijk maken om Webapplicaties te realiseren die dezelfde mate van interactiviteit, flexibiliteit en kracht hebben als de Desktop applicaties Dit betekent dat we de volgende eisen stellen aan Post HTML technologie: 1. Post HTML webapplicaties hebben een volwaardige Grafische User Interface; 2. Voor de realisatie van Post HTML applicaties kan gebruik worden gemaakt van een krachtige Objectgeoriënteerde software ontwikkelomgeving; Forward Thinking BV 25

26 3. De Webapplicatie draait vanuit het Internet op de PC van de gebruiker en heeft hierbij beschikking over voldoende lokaal geheugen en rekenkracht. 4. Hiervoor is geen lokale installatie nodig en er zijn geen lange wachttijden bij het laden; 5. De Webapplicatie kan zelfstandig op de achtergrond communiceren met een Internet Server en de daar achterliggende systemen zoals databases en applicatie servers; 6. Post HTML ondersteund standaard Multimedia waarbij media streams zowel van de server naar de cliënt kunnen lopen als andersom. Volwaardige Grafische User Interface In plaats van tabellen zoals in HTML, wordt in Post HTML gebruik gemaakt van over elkaar liggende schermlagen en het is mogelijk om op elke laag via absolute en relatieve X-Y positionering zowel grafische objecten als teksten te plaatsen. Ook is het eenvoudig mogelijk om allerlei operaties op grafische objecten uit te voeren zoals transformaties, rotaties en speciale effecten. Hierdoor is het mogelijk om een enorme diversiteit aan grafische ontwerpen te realiseren en technieken als skinning toe te passen waarbij een applicatie zich kan vertonen via uiteenlopende vormgevingen. Bekende voorbeelden van skinning op de Desktop zijn de MP3 spelers. In Afbeelding 14 zijn twee voorbeelden van MP3 spelers weergegeven. Bij Post HTML is het mogelijk om webapplicaties te realiseren die ook dit soort sterk visuele User Interfaces hebben. Afbeelding 14, Grafische User Interfaces en Skins van MP3 spelers Een andere belangrijke eigenschap van een volwaardige Grafische User Interface is dat invoerbronnen zoals muis en toetsenbord realtime gevolgd en uitgelezen kunnen worden. Dit houdt in dat de programmatuur niet noodzakelijker wijze moet wachten totdat de gebruiker op enter heeft gedrukt of met de muis een knop heeft ingedrukt. Deze technische eis is noodzakelijk voor applicaties die alvast willen anticiperen op wat de gebruiker aan het doen is. Een voorbeeld hiervan op de desktop zien we terug bij de installatie van een nieuw programma waarbij een (lange) licentienummer door de gebruiker ingevoerd moet worden. In plaats van op enter te wachten, volgt het installatieprogramma de toetsaanslagen van de gebruiker. Zodra de gebruiker het juiste Forward Thinking BV 26

27 licentienummer heeft ingevoerd, laat het installatieprogramma een groen vinkje achter het invoerveld zien. Deze functionaliteit is alleen mogelijk als de acties van de gebruiker op het niveau van een toetsaanslag gevolgd kunnen worden. Krachtige Objectgeoriënteerde software ontwikkelomgeving Het maken van een Post HTML webapplicatie betekent naast het ontwikkelen van programmatuur voor connectiviteit met databases en applicatieservers, vooral het ontwikkelen van een cliënt applicatie. Dit is het deel dat vanaf het Internet op de PC van de gebruiker draait en de Grafische User Interface bevat. Aangezien deze cliënt applicatie een behoorlijke hoeveelheid functionaliteit kan bevatten en daarmee programmatuur, stellen we als eis voor Post HTML dat er een krachtige ontwikkelomgeving beschikbaar is. Programmeertalen die in Post HTML gebruikt worden, voldoen aan de meest recente Software Engineering standaarden. Dit houdt in dat Object-georiënteerd programmeren volledig wordt ondersteund. Gebruik maken van rekenkracht en geheugen van de PC Post HTML Webapplicatie met een behoorlijke hoeveelheid functionaliteit maken intensief gebruik van de rekenkracht en het geheugen van de PC van de gebruiker. Hierdoor hoeft bijvoorbeeld voor het verwerken van tussenresultaten niet altijd terug te worden gaan naar de server zoals dat nu veelal het geval is bij HTML Webapplicaties. Geen lokale installatie vereist en geen lange wachttijden bij het laden Een Post HTML applicatie moet direct en snel vanaf het Internet op de PC van de gebruiker kunnen draaien zonder dat hiervoor de gebruiker iets hoeft te installeren. Dit betekent ook dat de omvang van het cliënt gedeelte van een Post HTML webapplicatie dusdanig klein of modulair moet zijn dat er bij het gebruik geen storende wachttijden ontstaan. Modulair wil zeggen dat onderdelen van de Webapplicatie zowel compact zijn als pas op het moment dat ze werkelijk nodig zijn ( just in time ) geladen worden. Hierdoor kan de omvang van de totale Webapplicatie wat groter zijn, maar door incrementeel te laden, ervaart de gebruiker geen lange wachttijden. Van Usability onderzoek weten we dat aanvaardbare wachttijden voor het laden van Webapplicaties liggen tussen 5 en 15 seconden. De toegestane omvang van een module hangt dan af van de verbindingssnelheid waarvan uitgegaan mag worden. Bij ISDN mag de omvang in de praktijksituatie maximaal 100 KB bedragen. Kan er uitgegaan worden van een midband aansluiting (kabel / ADSL) dan mag de omvang van een module maximaal 600 KB bedragen. Communicatie met de server op de achtergrond Een Post HTML Front End is in staat om op de achtergrond zelfstandig te communiceren met de server. Bijvoorbeeld voor het ophalen van extra data of het (tussentijds) valideren van Forward Thinking BV 27

28 gebruikersinvoer door een backoffice systeem. Een Post HTML Webapplicatie gebruikt bijvoorkeur XML om data met de server uit te wisselen. In de regel zal dit als volgt werken: Stap 1: Laden van de startmodule voor de Post HTML Webapplicatie in de Browser vanaf de server. In de regel zal deze module 30KB tot 100 KB groot zijn. Stap 2: Laden van de initialisatie data in XML (initialisatie parameters, tekstuele inhouden, links naar plaatjes etc). Stap 3: Afhankelijk van de gebruikersacties, stapsgewijs laden van overige modules data en inhouden (parameters, records, teksten, plaatjes, video etc). Deze laadsequenties kunnen geoptimaliseerd worden zodat de gevoelsmatige laadtijden acceptabel zijn. Tussentijds of aan einde van de gebruikerstaak wordt data in XML formaat teruggestuurd naar de server voor verdere verwerking in de Backoffice. Dit kan zowel een eenzijdige als een tweezijdige communicatie met de server zijn. Voorbeeld van tweezijdige communicatie is data validatie door de server). Een belangrijk voordeel van Post HTML ten opzichte van HTML is dat er niet telkens uitgebreide HTML opmaak code door de server hoeft te worden gegenereerd en om vervolgens te worden opgestuurd naar de Browser. In HTML Webapplicaties is het niet ongebruikelijk dat meer dan 70% van de communicatie met de server bestaat uit het (herhaaldelijk) sturen van HTML opmaak codes. Het gevolg hiervan is een onnodige verspilling van zowel server- als bandbreedtecapaciteit. Multimedia ondersteuning twee kanten op Net als Desktop applicaties, ondersteunen Post HTML Front Ends het gebruik van HIFI kwaliteit beeld en geluid. Deze functionaliteit is toepasbaar bij voldoende brede beschikbaarheid van midband en breedband Internet aansluitingen. Er ontstaan dan steeds meer multimediale Web Applicaties. De multimedia bestanden kunnen streaming afgespeeld worden. Streaming is een techniek waarbij een video- of audiobestand op het Internet bekeken kan worden zonder dat dit bestand eerst helemaal gedownload hoeft te worden. De Webapplicatie zorgt ervoor dat er steeds kleine fragmenten binnen gehaald worden, vlak voor het moment dat ze nodig zijn. Ook kan het afspelen van dit video- of audiobestand op een willekeurige plek gestart worden. Een gebruiker kan tijdens het afspelen direct springen naar een ander tijdmoment en hier verder kijken of luisteren. Een belangrijke eis die we stellen aan Post HTML technologie is dat de gebruiker ook zeer eenvoudig (dus zonder additionele software installatie) een video of audio stream van zijn of haar PC kan sturen naar de Internet Server. In Post HTML moet het bijvoorbeeld voor de gebruiker zeer Forward Thinking BV 28

29 eenvoudig zijn om via een daartoe bedoelde Post HTML Webapplicatie via zijn of haar Webcam te video chatten met anderen. Flash MX als Post HTML technologie? In december 1996 introduceerde Macromedia de Flash Player versie 1.0. Dit was een Browser plugin waarmee vector tekeningen en animaties, gecomprimeerd in een swf bestand vanaf een Internet server in de Browser geladen konden worden en in de Browser vertoond konden worden. De Flash plugin was klein van omvang en kon gratis gedownloaded worden van de Macromedia site. Hiernaast leverde Macromedia een Flash ontwikkelomgeving die Website Designers in staat stelde om met grote mate van vrijheid en creativiteit animaties (vooral intro s) te maken. Dit leidde er vooral toe dat in een relatief kort tijdbestek een enorme hoeveelheid Website intro s werd gemaakt. De grote doorbraak voor Flash kwam ook doordat deze plugin standaard werd mee geïnstalleerd met Internet Explorer en Netscape. Hierdoor was bijna iedere Internet gebruiker in staat om Flash animaties te bekijken zonder hiervoor iets extra s te hoeven installeren. Een grote kracht van Flash bleek ook de relatief kleine omvang van de vectorgeoriënteerde swf bestanden te zijn die de animaties bevatten. Tot de introductie van Flash versie 6 in 2002, werd Flash door Macromedia vooral gepresenteerd als een technologie om vectorgebaseerde animaties via het Web te presenteren. Vanaf Flash 6 beschouwt Macromedia, Flash als de beste technologie om Rich Internet Applications te realiseren. Kan Flash 6 gezien worden als Post HTML technologie? Om dit te bepalen wordt nagegaan in hoeverre Flash 6 voldoen aan de eisen voor Post HTML zoals eerder in dit hoofdstuk beschreven. Ondersteunt Flash 6 een volwaardige Grafische User Interface? Het antwoord hierop is ja. Flash 6 is inderdaad bedoeld om Webapplicaties met een volwaardige Grafische User Interface te realiseren. Ook ondersteunt Flash 6 het op microniveau kunnen volgen van gebruikersacties via de muis en met het toetsenbord. Is er voor Flash 6 een krachtige Objectgeoriënteerde software ontwikkelomgeving? Het antwoord hierop is in grote lijnen ja. Flash 6 is nog steeds ook bedoeld voor Designers die bijvoorbeeld zelf animaties willen maken. Macromedia heeft geprobeerd om de ontwikkelomgeving zo te maken dat zowel designers als software ontwikkelaars hier in voldoende mate mee uit de voeten kunnen. Met de Flash 7 ontwikkelomgeving (Flash MX 2004 Professional) lijkt Macromedia de software ontwikkelaars nog beter te willen faciliteren in het gemeenschappelijk ontwikkelen en beheren van omvangrijke Objectgeoriënteerde code. Forward Thinking BV 29

30 Kan Flash 6 gebruik maken van rekenkracht en geheugen van de PC? Het antwoord hierop is ja. De in Flash ontwikkelde programmatuur wordt in een extreem gecomprimeerde vorm via swf bestanden in de browser geladen en vervolgens op de PC van de gebruiker uitgevoerd. De code wordt niet gecompileerd maar aan de cliënt kant geïnterpreteerd. Dit betekent dat een deel van de rekenkracht opgaat aan het interpreteren. Aan het gebruik van het lokale werkgeheugen door een Webapplicatie in Flash 6 lijken geen onoverkomelijke beperkingen te zitten. Wel resulteert het gebruik van veel lokaal geheugen tot een inzakking van de performance van de Flash applicatie. Is voor Flash 6 lokale installatie vereist en zijn er (te) lange wachttijden bij het laden? Het antwoord op deze beide vragen is in principe nee. Om Flash 6 programmatuur in de Browser uit te voeren is een Flash 6 plugin vereist. Echter, de penetratiegraad van deze plugin is zo hoog, dat in de praktijk vrijwel iedere Internet gebruiker al hierover beschikt. In Nederland hebben op dit moment ongeveer 90% van alle Internet gebruikers een Flash 6 plugin in de Browser en hoeven daarom deze niet meer te downloaden. In Tabel 1 zijn de wereldwijde penetratiegegevens van de verschillende Flash plugins in Juni 2003 weergegeven. Voor Europa liggen deze op dit moment (november 2003) rond de 90%. Ten aanzien van de wachttijden bij het laden van een Webapplicatie in Flash kan gesteld worden dat het mogelijk is om in Flash een Webapplicatie op te bouwen in modules die just in time geladen kunnen worden. Deze tactieken worden echter niet standaard in Flash aangeboden maar worden door de slimme en ervaren software ontwikkelaars handmatig gecodeerd. De omvang van deze modules wordt vooral bepaald door de daarin aanwezige beeldmaterialen en multimedia componenten. De totale programmeercode in een goed ontworpen Flash Webapplicatie kan over het algemeen gereduceerd worden tot minder dan 30 KB. In de regel zijn de modules in een in Flash gebouwde Webapplicatie tussen de 20KB en 300KB groot. Forward Thinking BV 30

31 Worldwide Ubiquity of Macromedia Flash by Version - June 2003 (NPD Online - Worldwide Survey) Macromedia Flash 2 Macromedia Flash 3 Macromedia Flash 4 Macromedia Flash 5 US 97.4% 97.3% 97.0% 94.8% 86.3% Canada 97.5% 97.3% 96.8% 95.6% 86.9% Europe 97.7% 97.7% 97.5% 97.1% 87.2% Asia 96.1% 95.3% 94.2% 92.6% 82.7% Macromedia Flash 6 Tabel 1 Wereldwijde penetratiegegevens van de verschillende Flash plugins (bron: Macromedia) Vindt in Flash 6 communicatie met de server op de achtergrond plaats? Het antwoord hierop is ja. Over het algemeen zullen in Flash gebouwde Rich Internet Applications zoveel mogelijk op de achtergrond communiceren met de Server. Deze communicatie bestaat uit zowel het ophalen en wegschrijven van data als het ophalen van inhouden zoals plaatjes, geluiden en applicatie modules. Voor communicatie van data ondersteunt Flash het XML formaat. Ondersteunt Flash 6 Multimedia streams twee kanten op? Het antwoord hierop is ja. Niet alleen ondersteunt de Flash 6 plugin het streaming afspelen van video en audio maar het is ook vrij eenvoudig om video en audio streams van de PC naar de server terug te sturen. In dat geval wordt aan de server gebruik gemaakt van een Communication Server. Meer hierover staat beschreven in het artikel: Het uitbreiden van een Website met Streaming Video, Forward Thinking, september 2003, door A.N. Ladhani. Dit artikel is o.a. beschikbaar op de website van Forward Thinking: onder de rubriek artikels. Forward Thinking BV 31

32 Afbeelding 15, Samenvatting van de mogelijkheden van Flash 6 In Afbeelding 15 zijn de belangrijkste kenmerken van Flash 6 met betrekking tot de Post HTML eisen samengevat. Op dit moment beschouwt Forward Thinking Flash 6 en hoger als de beste technologie voor het realiseren van Post HTML Webapplicaties. Als belangrijkste nadelen van Flash 6 worden momenteel nog gezien: Niet geschikt voor omvangrijke tekstuele inhouden (o.a. problemen met leesbaarheid, scrollen en indexering door search engines); Bij veel functionaliteit ontstaan performance problemen bij PC s ouder dan drie jaar. De rationele aspecten van Post HTML oplossingen Zoals al eerder in dit artikel aangeven, Usability Engineering is een vakgebied dat zich bezig houdt met het methodisch ontwerpen van software applicaties die gebruikers in staat stellen om op een effectieve, efficiënte en aangename wijze hun taken uit te voeren. Post HTML biedt op dit vlak een aantal belangrijke mogelijkheden die al aanwezig waren op de Desktop maar die niet of nauwelijks beschikbaar zijn in HTML oplossingen: 1. Single page design versus multiple page design 2. User control versus system control Forward Thinking BV 32

33 3. Immediate and advance feedback 4. Use of Visual Information Channel Voordat deze onderwerpen worden behandeld, wordt eerst een voorbeeld gegeven van een Post HTML Webapplicatie. Dit voorbeeld wordt hierna gebruikt om de vier bovenstaande onderwerpen te illustreren. Voorbeeld: AEGON Hypotheek Calculator (2001) In Afbeelding 16 is een Maximale Hypotheek Calculator weergegeven. Deze calculator stamt uit Het is één van de eerste voorbeelden in Nederland van het gebruik van Post HTML technologie door een groot bedrijf zoals bedoeld in dit artikel. De calculator is destijds gerealiseerd in Flash 5 en de totale omvang van deze Webapplicatie is 75 Kb inclusief alle beeldmaterialen. Via de knoppen Eenvoudig en Uitgebreid kan de gebruiker kiezen voor minimale of maximale aantal te maken keuzen. Kies de gebruiker voor eenvoudig, dan hoeft alleen het inkomen aangegeven te worden. Kiest de gebruiker voor complex dan kunnen effecten van de rente, looptijd, eigen geld en maandlasten meegenomen worden in het resultaat. Via het linkermenu kan gekozen worden om een ander soort berekening te maken, bijvoorbeeld niet van inkomen naar leenbedrag maar van het gewenste leenbedrag naar de maandelijkse lasten. Forward Thinking BV 33

34 Afbeelding 16, De maximale hypotheek calculator van AEGON in Post HTML In deze applicatie wordt zoveel mogelijk relevante informatie op één scherm getoond. Via de schuifjes Jaarinkomen kan het inkomen eenvoudig met de muis worden aangeven. Zodra de gebruiker een schuifje loslaat, wordt direct in het grafiekje naast de schuifjes het resultaat getoond. De gebruiker hoeft hiervoor niet eerst op een knop Verstuur of Bereken te drukken. De calculator gedraagt zich als een Desktop applicatie en kan dit alleen doen omdat alle benodigde logica en geheugen niet meer op de server bevindt maar over is gebracht naar de eigen PC (zonder dat hiervoor een lokale installatie nodig is). Dit betekent geen wachttijden maar altijd een directe response op acties van de gebruiker. Single page design versus multiple page design In Afbeelding 17 is een gangbare HTML oplossing voor een hypotheekcalculator weergegeven, in dit geval die van de Postbank. Deze oplossingen bestaan uit meerdere HTML pagina s waarbij er een stappenplan (een wizard ) doorlopen moet worden. Dit soort oplossingen zijn gebonden aan Forward Thinking BV 34