NEXT GENERATION INTERNET

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)

email: [email protected]

© Forward Thinking BV http://www.fthink.nl

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

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 ........................................................................................................................ 14 Navigatie via hyperlinks................................................................................................................................. 14 Logica en geheugen aan de serverkant ........................................................................................................... 14

De rationele aspecten van HTML oplossingen .............................................................................. 15 Usability Engineering ..................................................................................................................................... 16 Usability en de grenzen van HTML ............................................................................................................... 16

De emotionele aspecten van HTML oplossingen ........................................................................... 16 Droomverhaal omvat verschillende niveau’s.................................................................................................. 17 Branding elementen in een site....................................................................................................................... 18


3

Beeldmaterialen.............................................................................................................................................. 18 Teksten ........................................................................................................................................................... 18 (Skip) Intro’s .................................................................................................................................................. 18 De beperkingen van HTML............................................................................................................................ 19 Conflicten in merkbeleving ............................................................................................................................ 19

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 ........................................................................................................... 26 Krachtige Objectgeoriënteerde software ontwikkelomgeving ........................................................................ 27 Gebruik maken van rekenkracht en geheugen van de PC............................................................................... 27 Geen lokale installatie vereist en geen lange wachttijden bij het laden .......................................................... 27 Communicatie met de server op de achtergrond............................................................................................. 27 Multimedia ondersteuning twee kanten op ..................................................................................................... 28 Flash MX als Post HTML technologie? ......................................................................................................... 29

De rationele aspecten van Post HTML oplossingen ...................................................................... 32 Voorbeeld: AEGON Hypotheek Calculator (2001) ....................................................................................... 33 Single page design versus multiple page design............................................................................................. 34 User control versus system control................................................................................................................. 35 Immediate and advance feedback................................................................................................................... 36 Use of Visual Information Channel ................................................................................................................ 36

De emotionele aspecten van Post HTML oplossingen................................................................... 37 Experience design naast Interaction design .................................................................................................... 39 Hi-Definition beeld en geluid ......................................................................................................................... 39 Embedded Multimedia ................................................................................................................................... 40

Het vinden van de juiste mix tussen technologie, ratio en emotie ............................................... 40

Conclussies...............................................................................................................................42 Over de auteur..........................................................................................................................44


4

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.


5

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.


6

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 e-mail 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


7

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 www.miniusa.com

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 www.miniusa.com per 1 januari 2003 zou moeten


8

beschikken over 100.000 geregistreerde bezoekers. Dit bleken er uiteindelijk 152.000 te zijn (bron: onderzoeksbureau IDC, april 2003). Van deze bezoekers hebben 73% een MINI geconfigureerd waarbij in totaal 164.000 MINI’s zijn geconfigureerd. Hiervan zijn 12.000 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

www.miniusa.com.

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 100.000 en 250.000 euro. Een televisiecampagne kost minimaal 500.000 euro. Hiermee heeft www.miniusa.com 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: www.nu.nl, 11-09-2003).

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.


9

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


10

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.


11

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’ (http://www.cifs.dk) 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.


12

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.


13

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


14

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.


15

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


16

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’ (http://www.cifs.dk) 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


17

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


18

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


19

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.


20

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.’


21

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.


22

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 www.nike.com 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


23

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.


24

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 vormen 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;


25

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


26

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


27

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


28

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.


29

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.


30

Worldwide Ubiquity of Macromedia Flash by Version - June 2003 (NPD Online - Worldwide Survey) Macromedia Macromedia Flash 2 Flash 3

Macromedia Flash 4

Macromedia Flash 5

Macromedia Flash 6

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%

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: http://www.fthink.nl onder de rubriek ‘artikels’.


31

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


32

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 2001. 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.


33

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


34

de beperkingen van logica en geheugen aan de server kant. Het resultaat is bijna altijd een ‘meer pagina ontwerp’.

Afbeelding 17, Een maximale hypotheek calculator in HTML met vier stappen Post HTML biedt wel de mogelijkheid om omvangrijke hoeveelheid logica en geheugen aan de cliënt kant te plaatsen. Hierdoor wordt het voor Interaction Designers van Webapplicaties mogelijk om één pagina ontwerpen te maken. Zowel het AEGON hypotheekcalculator als de eerder behandelde Broadmoor applicatie (zie Afbeelding 4) zijn voorbeelden van een één pagina ontwerp. User control versus system control In geval van een system control wordt de volgorde van werken volledig bepaald door het systeem. Bij de Postbank Hypotheekcalculator, zoals weergegeven in Afbeelding 17, bepaalt de ‘wizard’ de volgorde en het stramien waarin de gebruiker de gegevens invoert en de resultaten ziet. De gebruiker kan hier niet van afwijken.

In geval van een User Interface die ontworpen is volgens het principe van een user control, kan de gebruiker zelf bepalen welke paden hij of zij wil bewandelen. Zowel in het Broadmoor voorbeeld uit hoofdstuk 2 als het voorbeeld van de AEGON hypotheekcalculator kan de gebruiker op


35

verschillende plekken beginnen. Beiden zijn voorbeelden van User Interfaces waarbij infomatie, input en output niet sequentieel (na elkaar) maar parallel (naast elkaar) aangeboden worden.

Een technisch vereiste voor dit soort oplossingen is dat de logica en geheugen zich grotendeels aan de cliënt kant kan bevinden. HTML is in principe niet geschikt voor user control oplossingen. Post HTML kan gebruikt worden voor zowel user control als system control oplossingen. Dit houdt in dat Post HTML meer mogelijkheden biedt dan HTML. Immediate and advance feedback Een belangrijke Usability principe is om gebruikers zo snel mogelijk feedback te geven op hun acties. Immediate feedback betekent bijvoorbeeld dat gebruikers al tijdens het invoeren van gegevens kunnen zien of dit klopt en niet pas op een volgende of nieuwe pagina. Immediate feedback wordt veel gebruikt in Desktop programma’s maar slechts sporadisch in HTML oplossingen.

Advance feedback wil zeggen dat de gebruiker al kan zien welke invoer of invoercombinaties mogelijk. Als de gebruiker bijvoorbeeld in de Broadmoor applicatie uit hoofdstuk 2 een kamer selecteert, dan wordt direct op de kalander getoond op welke dagen deze kamer nog beschikbaar is. De dagen waarop de kamer niet beschikbaar is, kunnen niet geselecteerd worden. Op basis van een gedeeltelijke invoer van de gebruiker wordt in deze parallelle User Interface al feedback gegeven over de resterende invoermogelijkheden.

Voor zowel immediate feedback als advance feedback geldt dat vanuit technisch oogpunt hiervoor nodig is dat de logica zich aan de cliënt kant beschikbaar is en dat in sommige gevallen door de cliënt automatisch op de achtergrond gecommuniceerd kan worden met de server. Kortom, dat er gebruik wordt gemaakt van Post HTML technologie. Use of Visual Information Channel Vanuit de cognitieve psychologie en ergonomie is bekend dat visuele informatie door mensen parallel verwekt wordt terwijl tekstuele informatie juist sequentieel wordt verwerkt. Het heeft vaak veel voordelen voor de begrijpbaarheid en gemak om informatie visueel te presenteren.

Een belangrijk kenmerk van Grafische User Interfaces is juist dat hierin informatie waar zinvol visueel wordt aangeboden. Een voorbeeld hiervan is het gebruik van iconen in Grafische User Interfaces. Aantal iconen zijn zelfs niet statisch maar juist dynamisch en visualiseren bijvoorbeeld programma’s die lopen of instellingen die gekozen zijn. Webapplicaties in Post HTML hebben een Grafische User Interfaces die gebruikt kan worden om informatie over allerlei zaken op een


36

technisch eenvoudige wijze visueel te presenteren. In het voorbeeld in Afbeelding 16 wordt het maximale hypotheek bedrag in een grafiekje gevisualiseerd. In de Broadmoor applicatie (zie Afbeelding 4) wordt een grote kalender gebruikt om hierin de beschikbaarheid van kamers te visualiseren.

De emotionele aspecten van Post HTML oplossingen In dit artikel is eerder aangegeven, dat het vertellen van het juiste droomverhaal bij de marketing en verkoop van producten steeds belangrijker wordt. Dit geldt niet alleen voor consumenten producten maar ook voor zakelijke producten. Zoals eerder aangeven, een droomverhaal kan bestaan uit verschillende niveau’s. Op de onderste niveau’s worden verhalen verteld over de functionele aspecten en voordelen van een product terwijl op de hogere niveau’s de verhalen gaan over gevoelens en emoties zoals geluk, status, succes en plezier.

Post HTML biedt op dit vlak een aantal belangrijke meer mogelijkheden dan HTML oplossingen, zeker in combinatie met midband of breedband Internet:

1. Experience design naast Interaction design 2. Hi-Definition beeld en geluid 3. Embedded Multimedia

Voordat deze onderwerpen worden behandeld, wordt eerst een voorbeeld gegeven van een op emotie gerichte Post HTML Webapplicatie. Dit voorbeeld wordt hierna gebruikt om de vier bovenstaande onderwerpen te illustreren.

Eccentris is de website van topfotograaf Sacha Dean Bïyan. Deze website is een klein kunstwerk opzicht en heeft inmiddels een aantal prijzen gewonnen. Het feit dat de website zelf een artistiek product is, is geen toeval. Eccentris wil een vooral indruk maken op zijn bezoekers en hun laten genieten van veel schoonheid en passie. Het verhaal dat verteld wordt, beschrijft nauwelijks functionele zaken zoals informatie over het inhuren van deze fotograaf, de leveringsvoorwaarden en tarieven. Het verhaal neemt de bezoeker mee naar een visuele droomwereld die bol staat van opvallende beelden, geluiden en emoties.


37

Afbeelding 18, De Post HTML Website van Eccentris (http://www.eccentris.com) De website begint met spannend intro in beeld en geluid waarbij een schaars geklede model naar je toeloopt en een foto van je neemt. Na de flits van de foto, verschijnt een glazen wand waarachter een ander model zichtbaar wordt. Deze glazen wand stelt het glas van je eigen monitor voor. Er is op de achtergrond opvallende muziek aanwezig waarbij er via een subtiel bedieningspaneeltje gekozen kan worden voor een andere tune. Een klein navigatiebalkje onderaan biedt toegang tot verschillende thema´s. Elk thema geeft toegang tot een bepaalde serie van foto´s. Het kiezen van een foto is een spel op zich. Dit gebeurt via puzzelstukjes menu aan de rechterkant. Een klik op een puzzelstukje toont een foto waarbij alle puzzelstukjes opnieuw geschikt worden. Hierdoor ontstaat er een gevoel van weinig zelf controle. De rondreis wordt hiermee tevens een ontdekkingsreis door de wereld van topfotograaf Sacha Dean Bïyan. Ook bevat de site een onderdeel waarin op een artistieke wijze achter de schermen gekeken kan worden. Op dat moment wordt de bezoeker van de site gevoelsmatig eventjes zelf de topfotograaf. Een schermafdruk hiervan is weergegeven in Figuur 19.


38

Afbeelding 19,The making of Eccentris (http://www.eccentris.com)

Experience design naast Interaction design Traditioneel worden websites ontworpen vanuit Interaction Design. Het gaat hierbij vooral om rationele zaken zoals duidelijke navigatie en logische opbouw van de interacties. Bij Experience design gaat het om het bewust ontwerpen van een ervaring of een beleving. Voorbeelden van bedrijven die traditioneel heel sterk zijn in het bewust ontwerpen van een beleving zijn de Efteling en de Disney parken. Ook in het voorbeeld van Eccentris is sprake van het bewust ontwerpen van een beleving. Een site van een topfotograaf die begint met een schaars geklede model die een foto neemt van de bezoeker is een bewust ontworpen beleving.

Post HTML biedt technisch gezien veel meer mogelijkheden om ideeën die voortkomen uit Experience design te kunnen realiseren dan HTML. Een site zoals Eccentris met haar dynamiek, interactie, beeld en geluid, die naadloos op elkaar aansluiten, kan niet gerealiseerd worden in HTML technologie. Hi-Definition beeld en geluid In het Eccentris voorbeeld worden continue beelden van hoge kwaliteit gebruikt en het weergegeven geluid is van hifi kwaliteit. Op zich kunnen in HTML Websites ook beelden van hoge kwaliteit gebruikt worden, maar de meerwaarde van Post HTML bevindt zich op de manier waarop


39

beelden opkomen en in elkaar overgaan. In Post HTML wordt optimaal gebruik gemaakt van de video kaart op de PC om allerlei transities, maskeringen en andere effecten mogelijk te maken. Hierdoor ogen en voelen goed ontworpen Post HTML websites fraaier en rijker aan dan goed ontworpen HTML websites.

In Post HTML kan ook veel optimaal gebruik worden gemaakt van het audio kanaal. Zo kan het volume en de balans van de audio kanalen via de programmatuur van de Website bestuurd worden. In vergelijking met HTML is het in Post HTML veel eenvoudiger om in de website een volume knop op te nemen waarmee de gebruiker het volume kan aanpassen. Een ander voorbeeld is het opnemen in de programmatuur van fade-out en fade-in audio-effecten bij beeld- of scèneovergangen. Als bijvoorbeeld in Eccentric een andere muziek thema wordt gekozen, dan verloopt de overgang naar het volgende muziekstukje niet abrupt maar geleidelijk via een fade-out en een fade-in effect. Hierdoor ontstaat een rijkere gebruikersbeleving met minder verstoringen en haperingen. Embedded Multimedia De video fragmenten in Eccentris worden niet afgespeeld in een apart venster maar ze vormen een naadloos onderdeel van de website. Technisch gezien is de Grafische User Interface van een Post HTML Website opgebouwd uit lagen. De ontwikkelaar van de website kan zelf bepalen op welke laag een videofragment afgespeeld zal worden. Vervolgens kunnen zowel in deze laag maar ook in lagen erboven en eronder plaatjes, teksten, animaties en andere videofragmenten geplaatst worden. Via de programmatuur kan het afspelen van elk videofragment apart bestuurd worden. Hierdoor kunnen multimedia inhouden zoals video en audio fragmenten naadloos in een Post HTML website volledig geïntegreerd, gesynchroniseerd en bestuurd worden. Dit betekent in principe dat multimedia cd-rom’s vervangen kunnen worden door een combinatie van Post HTML websites en breedband Internet.

Het vinden van de juiste mix tussen technologie, ratio en emotie In dit hoofdstuk is nagegaan welke extra mogelijkheden Post HTML technologie biedt om Websites en Webapplicaties te ontwikkelen. Als Websites en webapplicaties als gebruikersvoorwerpen gezien kunnen worden, dan is Post HTML een belangrijke uitvinding die materialen mogelijk maakt die voorheen nog niet bestonden. Dit zal leiden tot zowel een herontwerp van sommige bestaande voorwerpen als het ontstaan van gebruikersvoorwerpen die nog niet bestonden. Deze Websites en webapplicaties zullen een vernieuwende combinatie van Vorm en Functie laten zien. Trendzetters als MINI, NIKE, Broadmoor en Eccentris zijn hier het levende bewijs van.


40

Post HTML biedt hiermee mogelijkheden om het onderscheidende vermogen tussen websites en webapplicaties weer te vergroten. Professionals in de Marketing zullen hier zeer blij mee zijn. Maar uiteindelijk zal de belangrijkste succesfactor voor een Website of Webapplicatie ontwerp wederom blijken te bestaan uit het vinden van de perfecte combinatie en balans tussen de technologische, rationele en emotionele keuzen in het ontwerp waarbij elke situatie weer anders kan zijn.


41

CONCLUSSIES HTML is een technologie die oorspronkelijk bedoeld was om pagina’s met teksten en plaatjes op een uniforme en platformonafhankelijke wijze via het Internet te kunnen bekijken. HTML is op Internet een dominante technologie geworden die zich vrijwel 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 te voltrekken.

In dit artikel hebben we uitgebreid stilgestaan bij het toenemende gebruik op het Internet van Post HTML technologie. De voornaamste verschillen tussen HTML en Post HTML technologieën hebben we beschreven vanuit: -

Technologische factoren

-

Rationele factoren

-

Emotionele factoren

Hieruit volgt dat Post HTML de volgende extra mogelijkheden biedt ten opzichte van HTML: -

Volwaardige Grafische User Interface

-

Single page design en multiple page design

-

User control en system control

-

Immediate en advance feedback

-

Gebruik van Visual Information Channels

-

Meer mogelijkheden voor Experience design en Interaction design

-

Hi-Definition beeld en geluid

-

Embedded Multimedia ondersteuning

Hiermee ontstaan nieuwe mogelijkheden om het onderscheidend tussen de eigen website ten opzichte van die van een concurrent drastisch te vergroten. Dit onderscheid kan zich uiten in zowel de Vorm als de Functie als een combinatie van deze twee ontwerpgrootheden. Tevens bieden de bovenstaande extra’s meer mogelijkheden om vanuit een marketing behoefte van bedrijven hun droomverhalen bij een product beter te vertellen.

De meest succesvolle en veelbelovende Post HTML technologie op dit moment is Flash MX van Macromedia. Deze technologie wordt gebruikt om Rich Internet Applications te ontwikkelen. We zien hier een doorbraak plaats vinden. Steeds meer gerenommeerde bedrijven kiezen ervoor om hun complete Website in Flash MX als Rich Internet Applications te realiseren. Twee voorbeelden hiervan zijn (er zijn er veel meer):


42

•

NIKE: www.nike.com; www.nikewoman.com; www.nikebasketball.com; www.nikefreestyle.com; www.nikegoddess.com etc…

•

MINI USA: http://www.miniusa.com

In algemeen zien we een toenemend gebruik van Flash MX als Post HTML technologie voor:

•

Interactieve componenten voor bestellen, reserveren, betalen, bankieren, beleggen, plannen, verkennen etc;

•

Microsites voor acties en promoties waarbij een emotionele impact belangrijk is;

•

Gebruik van multimedia in websites (bijvoorbeeld video);

•

Branding toepassingen zoals banners, games, internet commercials en fun content;

Flash MX blijkt echter minder geschikt voor Websites en Webpagina’s die uit vooral tekstuele inhouden bestaan. Voor dit soort sites blijft op dit moment HTML de beste oplossing.

De eindconclusie van dit artikel is dat op het Internet naast HTML, er steeds meer gebruik zal worden gemaakt van Post HTML technologie. HTML zal (terecht) de komende jaren blijven domineren maar bedrijven zullen moeten anticiperen en maatregelen nemen om Post HTML toepassingen in voldoende mate te integreren in de bestaande infrastructuren, architectuur en organisatie. De omvang van het gebruik van Post HTML zal per bedrijf variëren: van een beperkt aantal componenten tot een complete website in Post HTML Technologie.

De ‘technology push’ die vanuit Post HTML begonnen is, zal leiden tot vele vernieuwingen op Internet gebied. Echter, de belangrijkste succesfactor voor een Website of Webapplicatie ontwerp zal ook hier weer blijken te bestaan uit het vinden van de perfecte combinatie en balans tussen de technologische, rationele en emotionele keuzen in het ontwerp waarbij elke situatie weer anders kan zijn. Kortom, er zal de komende jaren op Internet gebied nog veel werk te verrichten zijn voor marketeers, ontwerpers en ontwikkelaars en nog veel meer te doen en te beleven zijn voor de Internet bezoekers.


43

OVER DE AUTEUR Dr. Ir. Al-Noor Ladhani heeft Elektrotechniek gestudeerd aan de Universiteit Twente. Hij is gepromoveerd bij Toegepaste Onderwijskunde op het onderwerp Kennissystemen. Hierna heeft als onderzoeker gewerkt bij het Centrum voor Telematica en Informatie Technologie en is hij o.a. directeur van een werkmaatschappij binnen Ordina geweest. Hij heeft werkzaamheden verricht voor o.a. AEGON, ABNAMRO, Fortis, Delta Lloyd, ING, KPN en Rabobank.

Op dit moment is Al-Noor Ladhani directeur van Forward Thinking. Dit bedrijf is gespecialiseerd in innovatieve ontwikkelingen, toepassingen en technologie gericht op het Internet medium. In 2002 heeft dit bedrijf een TOP plaats van de Universiteit Twente toegewezen gekregen. Een erkenning voor de juiste combinatie van innovatie en ondernemerschap. In 2002 is Forward Thinking tevens gevraagd om vanwege haar expertise associated partner van Macromedia te worden.

Contactgegevens: (t) 06-2044 0983 - (e) [email protected] – (w) http://www.fthink.nl


44

NEXT GENERATION INTERNET

Recommend Documents