WEBSCHRIJVEN. 15 tips

Het world wide web wordt een taal, zoals reklame of film. Maar er moet leergeld worden betaald. Vijftien tips voor wie zin heeft in een eigen webbladzijde.

Stel, u ziet brood in zo’n home page op het Internet, hoe moet die er dan uitzien ? Waarop moet u letten bij de beoordeling van een ontwerp ? Hoe maakt u van uw webpublikatie een instrument in uw klantenrelaties ?

Joannes Vandermeulen, één van de pioniers in België inzake het ontwerp van gebruikersinterfaces, gidst ons door het web. Een webbladzijde geeft hij toe richt zich op een doelgroep, zoals ook een tijdschrift zich op een doelgroep richt en zich daaraan aanpast. Toch zijn er vuistregels te geven bij web page design.

– 1. Doe het niet zelf. Vandermeulen : “Als een brochure maken multidisciplinair is, dan is web design dat nog veel meer. Je hebt een uitgever nodig, een grafisch ontwerper, een technicus die in de html-taal (de standaardtaal waarin webbladzijden worden geschreven) kan schrijven en ik spreek hier even voor eigen winkel een interaktie-ontwerper. Want daarin verschilt een Internet-bladzijde van een publikatie ; ze is veel interaktiever. Die interaktie-ontwerper zal voornamelijk testen. Heel erg iteratief, evolutief. Een ontwerp maken en aan de doelgroep voorleggen. Bijstellen en opnieuw voorleggen. Dat is een fundamentele techniek. Uw informatica-afdeling moet u eerder zien in de rol van “drukkerij”, technische realizatie. “

– 2. Steel met je ogen. “Als wij het niet bedacht hebben, is het niet goed. Het not invented here-syndroom. Maar nee, als jullie het bedacht hebben is het waarschijnlijk slecht. Het is heel zelden dat men iets nieuws bedenkt in deze materie. Duizenden mensen werken hierop. Kijk wat ze doen. “

GRIJP DE LEZER.

– 3. Vertel een verhaal. De aandacht trekken én vasthouden, daar gaat het om. “Het menselijk geheugen werkt met geografie, met lokaties ruimte eigenlijk, dingen tegenover mekaar in drie dimensies en verhaaltjes. Een sekwentie van evenementen in een bepaalde ruimte. Dat is een heel interessant vertrekpunt om een zogenaamde metafoor te ontwerpen voor een web page. Metafoor is theleading idea, het tema, de rode draad. Je zal zien dat het tema heel vaak is, je verplaatsen. Het world wide web (www, nvdr het moderne Internet) is ook eigenlijk zoiets. Het www is : je beweegt je voort in de ruimte, in een web, en je hebt ook een geschiedenis, van waar je geweest bent en waar je naartoe gaat. “

– 4. Een webbladzijde moet lèven. “Mensen gaan er één keer naartoe, maar ze moeten willen terugkomen. Je informatie moet vernieuwen, zoals een tijdschrift, je moet een cyclus hebben. Een pagina moet bewegen. Je koopt toch ook geen twee keer hetzelfde nummer van een krant ?

Ik ben geabonneerd op een aantal diensten en die sturen mij e-mail : kijk, let op, er is iets nieuws op onze home page. “

– 5. De moderne lezer leest niet, hij zapt. “Typisch voor zappend lezen is dat je altijd in eerste instantie de hot links gaat lezen. Er zijn daarin grote gelijkenissen tussen een gedrukt medium en een web page. Wat lees je eerst in een tijdschrift ? De foto’s, dan het citaat in de tekstbalk, en als je dat interessant vindt, zoek je waar dat citaat in het artikel staat. Pas dan ga je het artikel misschien lezen. Dat is het vrijetijdsleesgedrag van een tijdschrift. Bij een web page is dat niet anders : je kijkt, wat is de eerste indruk en dan ga je zoeken naar de links (nvdr de aktieve verwijzingen), of je de links interessant vindt, en je leest de tekst niet eens. Onvermijdelijk. Dat is zappend lezen. ” Ergo, besteed aandacht aan de hot links. En kontroleer vooral regelmatig of ze nog werken.

– 6. Haal het maximum uit de interaktiviteit. Interaktiviteit is, samen met het voortdurend bijgewerkt zijn, de unique selling proposition van het medium. “Zorg bijvoorbeeld dat mensen zich inschrijven. Maar doe dan niet zoals (vroeger) een bekende financieel-ekonomische krant, die je inschrijvingsformulier weigerde en leeg teruggaf als je niet alle vereiste velden had ingevuld. Alleen stond er niet bij welke velden vereist waren. “

Interaktiviteit hoeft niet op formulieren te zijn gebaseerd. Een e-mailadres kan een hot link zijn. Als je klant even de muis hanteert, kan hij zich automatisch inschrijven op je e-mailing list, zelfs zonder iets te typen (zijn e-mailadres wordt door zijn eigen browser ingevuld). Of hij kan zijn kommentaar kwijt in dat elektronisch postbericht. Joannes Vandermeulen : “Laatst zag ik op een pagina een telefoonnummer, een hot link. Bleek dat het een geluidsbestand was dat een telefoonnummer vormde. Je kon de telefoonhoorn naast je luidspreker houden, de hot link aanklikken, en die firma werd opgebeld. Leuk maar je moest er wel aan denken eerst de dubbele nul in te tikken om internationaal te gaan. Of, waarom niet, via een hot link die applikatie opstarten waarmee je over het Internet kan telefoneren (nvdr Digiphone), als je die software zou hebben. “

– 7. Zorg voor voldoende bandbreedte. Snelheid bandbreedte is key op het Internet. Niets is ergerlijker dan computers die traag of helemaal niet antwoorden (en god weet hoe vaak dat gebeurt). Wie via ISDN tegen 64.000 kilobit per sekonde over het Internet surft, kan nu op servers stuiten die maar een kwart van die snelheid ter beschikking stellen. Die computers kunnen intrinsiek zo beperkt zijn, of zo geprogrammeerd zijn om te voorkomen dat één gebruiker hen monopolizeert. Ergeren doen ze in elk geval. Advies van Joannes Vandermeulen : zorg dat je server minstens 28.800 bits per gebruiker ter beschikking stelt.

– 8. Alle macht aan de gebruiker. De ontwerper van een webbladzijde heeft zijn eindresultaat niet volledig onder kontrole. HyperText Markup Language (de standaardtaal html) bepaalt maar voor een deel hoe de bladzijde er bij de gebruiker zal uitzien. De html-lay-out-informatie en -formattering wordt in feite door de browser van de gebruiker geïnterpreteerd en “gecreëerd”. Verschillende browsers en verschillende voorkeurinstellingen binnen dezelfde browser geven een home page een verschillend uitzicht. Vandaar het belang om zijn ontwerp te richten op de browser met de meeste gebruikers, Netscape Navigator 1.1.

Wat kan de gebruiker van een web browser zoal zelf instellen ? Hij kan zijn fonts (lettertype en stijl) kiezen, zijn letters vergroten of verkleinen, kleuren wijzigen. Zelfs als de letters veel worden vergroot, bijvoorbeeld, moet een ontwerper ervoor zorgen dat de tekst, via de woordoverloopfunktie, nog altijd op het scherm blijft.

Joannes Vandermeulen : “Ons advies is, test uw bladzijden op alle platformen. Natuurlijk met Netscape op pc en Macintosh, maar ook met Spyglass Mosaic op Macintosh en pc. En op zoveel andere machines als je je kan veroorloven. Je moèt toetsen : hoe komt mijn html door op deze of gene browser, op dit of dat platform ? “

– 9. Kleur bekennen. “Publiceren op het scherm heeft een aantal beperkingen en als grafisch ontwerper moet je daar rekening mee houden. Kleurechtheid, bijvoorbeeld, is een probleem omdat je meestal beperkt bent tot een palet van 256 kleuren. Het logo van Using It, een oranje fluo-kleur, is onmogelijk weer te geven op een gewoon computerscherm. Daar moet je dan een oplossing voor vinden. “

– 10. Kleine grafische elementen, goed gespreid. “De bedoeling is om de mensen vast te houden. Wat je dan moet doen is kleine graphics geven, die snel overkomen. Mooi verspreid over je materiaal. Want uiteindelijk, hoe wordt het sukses van een site gemeten ? Aan het aantal hits. Een hit is, elke keer als ik iets ga halen (nvdr met de muisklik op een informatie-objekt). Dàt wordt bijgehouden. “

– 11. De juiste resolutie. Illustraties voor een web page moeten op de optimale resolutie worden ingescand. “Niet te veel, niet te weinig, precies de scherpte die je op een scherm kan zien 72 dots per inch bijvoorbeeld. Is de resolutie te laag, dan zie je de kartelingen aan de randen. Is ze te hoog, dan komt het beeld te traag door (nvdr want het bevat te veel bits). Wil je een zeer hoge resolutie ter beschikking stellen, voor het downloaden van kaarten bijvoorbeeld, dan kan je een postzegel plaatsen en daarachter een hoogresolutiebeeld. “

– 12. Niet iedereen werkt grafisch, integendeel. Vele gebruikers verkiezen snelheid van informatie boven grafische impact en zetten de optie “autoload images” af. Maar ze willen wel nog weten wat die pictogrammen op hun scherm betekenen. “Elk pictogram, elke hot button moet een tekstekwivalent hebben. “

– 13. Laat je kliënteel niet verdwalen. De virtuele wereld van het net kan zo verwarrend zijn als Parijs bij valavond. Stel, een lezer komt midden in uw webpagina terecht vanaf een link ergens in het universum. Hoe vindt hij de openingsbladzijde van uw site, met de inhoudstafel en wat u al meer te bieden heeft ? Maak het hem gemakkelijk en zet onderaan uw bladzijden een band met een verwijzing naar de home page en naar de belangrijkste diensten die u biedt.

– 14. Geef informatie over de opvraagbare bestanden. Als u files voor downloading ter beschikking stelt, zet er dan bij hoe groot ze zijn in kilobytes en welk formaat ze hebben. Is het een WAV(geluids-)file ? Is dit bestand gekomprimeerd, self-extracting ? Welke applikaties heb je nodig om het te kunnen gebruiken ?

Het kost u weinig moeite en kan uw kliënteel een hoop kopbrekens besparen.

– 15. Hou het sober. “Herinner je je de start van desktop publishing ? Al die fonts, al die groottes. Iedereen gebruikte dat. Het kón en dus moest het. Maar natuurlijk is dat niet zo. Vorm volgt funktie, zoals architekt Henry Sullivan zegt, en niet de kapaciteit van je medium. Als je blinking gebruikt zoals mogelijk is met html dan moet je dat heel subtiel doen, op een asterisk of zo, maar niet ineens midden in de tekst. Dat stoort. “

“Waarom bijvoorbeeld niet altijd een witte achtergrond gebruiken ? Dat is zo duidelijk. Papier is toch ook wit ? Dat is één van de basisregels bij het ontwerp van grafische gebruikersinterfaces, van information design tout court, dat zwart op wit heel goed leesbaar is. Wordt veel te weinig gedaan. Al die zware dingen… Ik hou van transparantie, lichtheid. “

“De uiteindelijke vraag over elk element van een ontwerp moet zijn, is het funktioneel ? Niet funktioneel in elk geval is een home page met daarop of, erger, daarachter het bericht dat zij under construction is. “

BRUNO LEIJNSE

100440.1663 compuservecom

Internet-gebruikers kunnen deze tekst, inclusief de hotlinks, lezen op de website Trends/Roularta Media Group (http : //www. roularta. be/roularta).

Joannes Vandermeulen : jv usingit. be

JOANNES VERMEULEN (USING IT) “Een webbladzijde moet bewegen, voortdurend in evolutie zijn. “

WELCOME TO CONNIE’S GUIDED TOUR De bezoeker in een verhaal betrekken met een vleugje humor. Humor isbelangrijk. Makkelijker wellicht voor een grafisch ontwerpster, zoals hier, dan voor een bank.

GRAFISCHE HOTLINKS Houden de aandacht vast.

DE REALITEIT VAN HET NET De tekstversie is snel, op de kleurtjes is het wachten. Anderhalve minuut in dit geval, met een 14.400 bps modem (de webbladzijde van HotWired).

THE MICROSOFT NETWORK Elke dag iets nieuws bij MSN. Bemerk hoe de schikking van de pagina verandert naargelang u het scherm opent in een breder of smaller venster. Hier is rekening gehouden met de macht van de gebruiker over het medium.

MAAK ER GEEN ORIENTATIELOOP VAN Geef onderaan een klikbaar menu. Een e-mailadres vereenvoudigt de feedback.

BELGIUM ONLINE Schitterend initiatief. Maar is het leesbaar ?