Website ontwerpen

Patrick: Laatst vroeg mijn buurman of ik een website voor zijn groothandel wilde maken. Gaaf zeg! Ik meteen aan de slag. Maar hoe meer ik maak, hoe meer hij wil. Er komt geen einde aan! Ondertussen is het wel een beetje een chaos aan het worden.

Andrea: Ik neem veel tijd voor de analyse van verwachtingen en wensen van de opdrachtgever. Die tijd win ik later terug, omdat mijn opdrachtgever en ik dan precies helder hebben wat het moet worden.

Ontwerpen van webpagina's
      Website ontwerp als onderdeel van het organisatieproces

Tips voor het ontwerpen van een goede website
      Structuur van een website
      Lay-out van een website
      Grafische aspecten van een website
      Hosten van een website
      Beveiligen van een website
      Tools

Aanbevolen literatuur

Ontwerpen van webpagina's

Voor het ontwerpen van software is een systematische aanpak noodzakelijk. Zomaar lukraak beginnen leidt vaak tot chaos en frustratie. Kijk maar eens naar de volgende anekdote (figuur 1).


Week 1:       We moeten een site hebben
Week 2:       Ik ken iemand die heel handig is in het maken van websites
Week 3:       Wat moet er eigenlijk allemaal op?
Week 4:       We beginnen gewoon met onze folder en een bestelformulier.
Week 5:       We staan erop! Hiep hoi.
Week 6:       Wat doen we met de reacties?
Week 7:       Deze informatie moet er ook op.
Week 8:       Kan er een extra button voor dit onderdeel komen?
Week 9:       Hebben we ons al aangemeld bij zoekmachines?
Week 10:       De agenda moet geactualiseerd worden.
Week 11:       De webmaster is op vakantie. Maar er moet snel iets opgezet worden.
Week 12:       De inhoud moet beter worden afgestemd.
Week 13:       We krijgen wel reacties, maar verdienen we er ook aan?
Week 14:       We moeten eigenlijk opnieuw beginnen.
Week 15:       Wiens idee was het in hemelsnaam om het web op te gaan?

Figuur 1: Anecdote (Bron: C. Holland & S. Malta in: Becking & Van Goor, 2000).

Om die reden zijn er standaarden ontwikkeld voor IT-ontwikkelaars. Deze standaarden refereren aan diverse modellen die de softwareontwikkelaar ondersteunen bij een methodische aanpak. Zo'n model fungeert vaak als een soort checklist die de ontwerper attendeert op bepaalde aspecten in het ontwerpproces. Maar zo'n model kan ook fungeren als een stappenplan. Ook kan zo'n model gebruikt worden om een ontwerpproces achteraf te analyseren om zo eventuele mankementen te achterhalen en ideeŽn op te doen voor verbeteringen.

Diverse auteurs proberen het ontwerpproces te standaardiseren en er zijn dan ook diverse modellen. Voordeel van deze diversiteit is dat de IT-ontwikkelaar een model kan kiezen dat het beste past bij de ontwerpopdracht. Nadeel is de gebruikte terminologie. Dezelfde termen worden soms voor net iets andere begrippen gehanteerd. De reden hiervoor is dat het ene model soms veel specifieker en genuanceerder is, waardoor een term uit een globaal model net iets anders geÔnterpreteerd moet worden.

Een voorbeeld van zo'n standaard is het model voor 'Software life cycle processes'. Dit model attendeert de ontwerper op diverse processen, beginnend bij de acquisitie van een opdracht, doorgaand met het eigenlijke ontwikkelproces en eindigend bij training van personeel en onderhoud van de software. Het model omvat de hele levenscyclus van een ontwerp. Dit model is tamelijk volledig, want het neemt niet alleen de technische maar ook de organisatorische processen mee. Wat je niet terug vindt in het model zijn de iteraties. Bij het ontwikkelen van een product zie je vaak dat na het eerste ontwerp behoefte ontstaat naar meer en dan begint het hele proces weer van voor af aan (IEEE, 1998).

Terug naar boven.

Website ontwerp als onderdeel van een organisatieproces

Bij het ontwerpen van een website geeft de Internetmethode (zie figuur 2) goede handreikingen voor een systematische aanpak; het is een soort stappenplan. In de link achter deze tabel treft u per stap een paar tips aan. Meer tips en de achtergronden daarvan kunt u nalezen in het boek dat bij deze methode hoort (Becking & Van Goor, 2000).


Figuur 2:
Internetmethode (Becking & Van Goor, 2000)

In de praktijk zien we een ontwikkeling in websites. Aanvankelijk waren websites vooral gericht op het verschaffen van informatie over (producten) van de organisatie (aanbodgericht). Tegenwoordig zien we dat organisaties veel meer klantgericht zijn en hun website afstemmen op de behoeften van de klanten (vraaggericht).

Wanneer je van een opdrachtgever het verzoek krijgt een website te maken, is het handig om na te gaan wat de opdrachtgever met zo'n website beoogt. Welk doel dient het? Een website is immers geen doel op zichzelf, maar een middel om bepaalde organisatiedoelen te bereiken. Die doelen kunnen variŽren van informatie verschaffen en reclame maken tot onderwijs leveren, reserveringen doen, bemiddelen bij vacatures tot e-commerce. Het komt dan ook regelmatig voor dat de ontwerper van de website de opdrachtgever helpt bij het verhelderen van de doelen van de uiteindelijke site.

Terug naar boven.

Tips voor het ontwerpen van een goede website

Structuur van een website

Wanneer duidelijk is wat de inhoud van de website in grote lijnen zal zijn, is het handig een structuur voor de website te ontwerpen. Figuur 3 geeft enkele mogelijkheden aan. Voorkom 'dead-ends', m.a.w. zorg dat de gebruiker vanuit elke pagina overzicht houdt over het geheel (sitemap) of terug kan naar het begin ('home'- of 'back'-button).


Figuur 3: Voorbeelden van structuurschema's van een website (sitemaps)
(http://info.med.yale.edu/caim/manual/sites/site_structure.html)


Terug naar boven.

Lay-out van een website

De lay-out van een pagina moet overzichtelijk zijn. In figuur 4a zie je een onoverzichtelijke indeling en in figuur 4b een overzichtelijke.


    4a               4b
Figuur 4: Voorbeelden van (on-)overzichtelijke lay-out
(http://info.med.yale.edu/caim/manual/pages/balanced_pages.html)

Door consistent te zijn in de functie van de diverse tekstblokken en deze consistentie ook in de lay-out te laten terugkomen, creŽer je een overzichtelijke pagina. (zie figuur 5). De 'sitemap' kun je in de kop, de zijbalk of onderbalk plaatsen, zodat die altijd beschikbaar is voor de gebruiker. Dit voorkomt dat de gebruiker verdwaalt in de site.


Figuur 5: Voorbeeld van een pagina indeling
(http://info.med.yale.edu/caim/manual/pages/design_grids.html)

Terug naar boven.

Grafische aspecten van een website

Gebruik van plaatjes en videoclips

Uiteraard is het mogelijk om grafische objecten in je HTML pagina toe te voegen. Zo kun je de pagina verfraaien of dingen te verduidelijken. Plaatjes kunnen in verschillende formaten voorkomen en hebben allen een eigen extensie. De meest gebruikte formaten zijn GIF en JPG.

Deze formaten hebben allen verschillende eigenschappen. Een GIF-bestand (Graphic Interchange Format) bestaat uit een palet dat wordt opgemaakt aan de hand van het plaatje. Voor plaatjes met weinig verschillende kleuren is dit een ideaal formaat (zoals bijvoorbeeld bouwtekeningen, menubalken en logo's). JPG (Joint Photographic Experts Group) slaat voor elke pixel een aparte kleurwaarde op, waardoor deze goed geschikt is voor foto's. Door gebruik te maken van compressie wordt het bestand kleiner. Dit betekent natuurlijk wel kwaliteitsverlies maar meestal hoeft een foto niet haarscherp op het web te staan.

Als je videoclips op de website zet, zorg er dan voor dat je op de pagina aangeeft hoe groot de clip is. Dan kan de gebruiker kiezen of hij de clip wel of niet gaat downloaden. Zorg ook voor de juiste plug-ins of in ieder geval een link naar een website, waar de plugin gedownload kan worden. Op deze manier weet je zeker dat de gebruiker de clips kan bekijken.

Gebruik van lettertypes

Besturingssystemen als Windows en Macintosh gaan verschillend om met lettertypes. Dit betekent dat het kan gebeuren dat de gebruiker niet precies hetzelfde beeld te zien krijgt als de ontwikkelaar (zie figuur 6)


Figuur 6: Verschijningsvorm van lettertypes onder twee verschillende besturingssystemen
(http://info.med.yale.edu/caim/manual/pages/font_face.html)

Het verschil in weergave blijft niet beperkt tot besturingssystemen, maar is vaak ook afhankelijk van de internetbrowser die je gebruikt. Hou dus in je achterhoofd bij het maken van een website dat gebruik maken van exotische lettertypen kan leiden tot een andere weergave bij bezoekers van jouw site.

Hosten van een website

Hoe zorg je ervoor dat andere mensen jouw website kunnen bezoeken? Het 'in de lucht' brengen of 'online' zetten van je website noemen we het 'hosten' van een website. Dit betekent dat jouw website ergens op een server moet staan. Een server is een pc waarop serversoftware geinstalleerd is. Het hosten van je website betekent dat de files van je website ergens op de server staan. De server staat 24 uur per dag 7 dagen in de week aan, zodat iedereen (mits jij de toegang tot de files zo geregeld hebt dat iedereen toegang heeft) je website op de server altijd kan bezoeken. Je website is dan continu 'online' of te wel 'in de lucht'. Als de server uitstaat door stroomstoringen of om andere redenen (onderhoud e.d.) kan je site tijdelijk onbereikbaar zijn. Wanneer je je website laat hosten op de server van een Service Provider (b.v. PlanetInternet, Hotmail, Chello e.d.) dan staat de Service Provider garant voor het online houden van je website. Het enige wat jij dan moet doen is jouw files oversturen naar een plaats de server van de Service Provider. Hoe je dat doet wordt meestal verteld door je Service Provider. De tool die je daarvoor nodig hebt is het programma FTP (File Transfer Protocol). Sommige HTML-editors hebben een ingebouwd ftp-programma (b.v. NetObjectsFusion). Wil je van je eigen pc een server maken, lees dan deze handleiding.

Terug naar boven.

Beveiligen van een website


Het onderwerp 'beveiliging' is uiteraard te uitgebreid om hier te behandelen. Wel willen we even kort ingaan op toegangsrechten en logins met passwords.

Wanneer files op een server staan kun je toegangsrechten toekennen aan de files. Wil je dat iedereen je website kan bezoeken, dan moet je de toegangsrechten zodanig instellen dat iedereen ('everyone') de files kan bekijken ('read'). Heb je een interactieve website, waar mensen ook teksten of getallen kunnen invoeren die opgeslagen worden in een database, dan moet je mensen ook schrijf- en/of uitvoerrechten ('write' en/of 'execute') geven. Onder windows doe je dit door met de muis op een file of op een map te gaan staan en dan te dubbelklikken op de rechtermuisknop. Kies vervolgens 'properties' en 'security' en regel de toegangsrechten. Onder Linux en Unix doe je dat met het commando 'chmod'.

De toegang tot je website kun je ook regelen door het toevoegen van een 'login'-commando aan je website. Degene die je site mogen bezoeken krijgen een password en zonder password kun je de website (of onderdelen van de website) niet bekijken. Zoek op internet naar 'login scripts'. Er zijn diverse mogelijkheden


Terug naar boven.

Tools

Als je een website gaat maken dan zul je vrijwel altijd te maken krijgen met de HTML opmaaktaal. Deze programmeertaal zorgt ervoor dat je webpagina's er precies uit komen te zien als jij wilt. Het is mogelijk op verschillende manieren een webpagina te maken.

In principe is het gebruik van een texteditor het meest geschikt om een volgens de standaard geaccepteerde webpagina te maken. Je kunt in een texteditor de opmaakcodes van HTML gebruiken en de teksten schrijven die op de pagina moeten verschijnen. De meest eenvoudige editor is Notepad, waarbij je gewoon tekst in kunt voeren. Verder zijn er geavanceerdere editors, zoals UltraEdit en HTML Kit, waarbij je geholpen wordt om voor de hand liggende HTML opmaak automatisch in te voeren. HTML code krijgt bijvoorbeeld ook een andere kleur, zodat beter te zien is hoe de pagina gestructureerd is.

Voor het maken van websites op een grafische manier zijn diverse tools beschikbaar. Zo kun je gebruik maken van website-editors als FrontPage, NetObjectFusion, Dreamweaver e.d. In plaats van de HTML code in te typen maak je een webpagina door de elementen die op de pagina moeten komen, naar de pagina te slepen. Het programma genereert dan voor jou de HTML code. Het voordeel hiervan is dat je meteen ziet hoe de pagina eruit komt te zien en je hebt geen HTML kennis nodig. Een nadeel van deze aanpak is dat de complexiteit van de pagina beperkt wordt. Moeilijke interactieve delen van de site moeten later worden ingevoerd met een externe editor zoals Notepad.

Verder heb je Java Script en Applets. Dit zijn stukjes programmatuur die zorgen voor interactiviteit in de pagina. Je kunt ze snel aanpassen aan je eigen wensen. Ze zijn eenvoudig toe te voegen aan een HTML-pagina. Voordeel hiervan is dat je geen speciale programmatuur op de server hoeft te installeren om de scripts en de applets te laten werken.

Daarnaast heb je nog speciale programma's als Perl, CGI, PHP, FLASH e.d. waarmee je geavanceerde onderdelen aan je site kunt toevoegen, zoals animaties, interactie (vraag-antwoord; discussie, e.d.). Vaak moet deze speciale programmatuur ook geÔnstalleerd zijn op de server, waarop de webpagina draait.

Op het internet worden veel cursussen aangeboden om je te helpen bij het leren werken met de diverse tools. Hieronder staan een aantal links naar cursussen en naar sites waar je interessante programma's kunt downloaden.

Cursussen in webtools:

Introductiecursussen in HTML:

Cursus in DHTML

Cursus in Javascripts:

Cursus in Flash

Cursus in XML

Cursus in PHP

Tools

Programma's om snel webpagina's te maken:

(Gratis) downloaden van programma's:

Criteria voor het evalueren van professionele websites

Aanvragen van een domeinnaam

Programma's om hele webpagina's te kunnen downloaden:



Aanbevolen literatuur over websites ontwerpen

    Becking, J. & Goor, J. van (2000) De Internet Methode. Amsterdam: Uitgeverij Business Contact. (zie ook http://www.internetmethode.nl )

    Lynch, P.J. & Horton, S. (1999) Web Style Guide. London: Yale University Press. (Zie ook: http://info.med.yale.edu/caim/manual )

    Niederst, J. (2000) HTML-Kort en Krachtig. Schoonhoven: Academic Service

    Sommerville, I. (1995) Software Engineering. Harlow, England: Addison Wesley (Zie ook: http://www.comp.lancs.ac.uk/computing/resources/ser/ )





Toelichting op figuur 2
(meer uitleg van de hier gehanteerde begrippen kunt u lezen in: Becking & Van Goor, 2000)

Voortraject

  • OriŽntatie:

  • Onderzoek

    • Organisatie

      • Vorm een beeld van de interne organisatie (structuur, cultuur, innovaties e.d.)

      • Vorm een beeld van de externe organisatie (branche, concurrenten e.d.)

      • Ga na wat men vindt van e-organisaties

    • Doelen

      • Ga na welke doelen de opdrachtgever wil bereiken met de website (omzetverhoging, reclame, amusement, onderwijs e.d.)

    • Doelgroep

      • Bepaal voor wie de website is bedoeld (klanten, eigen personeel e.d.)

    • Bedrijfsprocessen

      • Ga na of automatiseren voor de efficiŽntie van bedrijfsvoering kan bevorderen

    • Concurrenten

      • Ga na wat rivalen, collega bedrijven, afnemers en toeleveranciers doen op internetgebied en zoek naar een evenwicht tussen samenwerking en profilering

  • Advies

    • Webtrends

      • Hou trends goed in de gaten (m-commerce, umts e.d.)

      Interactie

      • Benut de specifieke mogelijkheden internet, zoals van interactieve communicatie (e-mail, chatten, formulieren, nieuwsgroepen e.d.)

    • Gevolgen

      • Invoering van een website kan gevolgen hebben voor de organisatie, denk aan nieuwe functies als: webmaster, content beheerder e.d.

    • Techniek

      • Houdt rekening met browserversies van de gebruiker

      • Let op schermresolutie en kleurdiepte

      • Zorg dat plug-ins alleen ingezet worden, als het functioneel is

      • Denk goed na over de diversiteit aan mogelijkheden van elektronisch betalen

      • Kies het goede midden tussen kwaliteit en snelheid

      • Kies voor een korte en duidelijke domeinnaam

      • Overweeg het gebruik van databases in bepaalde situaties

    • Concept

      • Ga na welke onderdelen op de site moeten en hoe die zich onderling verhouden (sitemap)

      • De uitstraling en sfeer van de website moet passen bij de doelstellingen van de organisatie


Producten van voortraject:

1. Webstrategie
2. Functioneel ontwerp (flowchart)
3. Tijdsplan
4. Hulpmiddelen
5. Concept website
6. Technische specificatie
7. Samenstelling projectteam

Hoofdtraject
  • Prototype

    • Look and feel

      • Zorg dat de opdrachtgever bij het concept van de website het gevoel krijgt 'Dit zijn wij!'

      Navigatie

      • Zorg voor een heldere en overzichtelijke navigatiestructuur

      Feedback

      • Laat de opdrachtgever een paar prototypes zien en luister goed naar de reacties. Je kunt beter vroegtijdig bijstellen dan tegen het eind alles overdoen.

  • Webontwerp

    • Inhoud

      • Maak korte gecomprimeerde teksten. Realiseer je dat de meeste lezers de teksten scannen. Nog te lezen teksten worden meestal uitgeprint

    • Vormgeving

      • Breng rust in de pagina

      • Maak gebruik van webkleuren (216 kleuren)

      • Zorg voor consistentie tussen alle pagina's van de site, maar ook m.b.t. page lay-out, gebruik van multimedia, lettertype en kleurgebruik.

    • Usability

      • Maak de informatie vindbaar

    • Structuur

      • Maak een bewuste keuze tussen een hiŽrarchisch of een lineaire structuur

      • Maak een sitemap bij een wat grotere site

    • Gebruikerservaring

      • Zorg dat de eerste ervaringen van de gebruiker met de site extra positief zijn

    • Functionaliteit

      • Zorg dat de functionaliteit van de site aansluit bij de behoeften van de gebruikers

    • Techniek

      • Maak de site browser-onafhankelijk

      • Zorg voor een snelle laadtijd of laat de gebruiker kiezen

      • Comprimeer multimedia

      • Zorg dat alle hyperlinks werken

      • Voorkom scrollen in twee richtingen zoveel mogelijk

      • Zorg dat de animaties, scripts, applets e.d. goed werken

      • Tools (zie links)

  • Implementatie

    • E-marketing

      • Geef bekendheid aan de website

      • Gebruik key-words zodat zoekmachines de site kunnen vinden

      • Maak jezelf bekend bij overzichtpagina's, zoals: http://www.startpagina.nl

    • Hosting

      • Regel de hosting goed met de service provider

      • Regel een domeinnaam

    • Testen

      • Controleer of alles werkt

      • Laat controles uitvoeren door ervaren en onervaren gebruikers

    • Training

      • Geef personeel dat met de site moet werken de juiste training voor gebruik en onderhoud


Producten van hoofdtraject:

8. Website
9. Gebruikershandleiding
10. Technische handleiding

Natraject
  • Gebruik

    • Onderhoud

      • Houdt de site actueel

    • Effectmeting

      • Ga na of de site het gewenste effect heeft gehad (registratie van website bezoek, enquÍte, gastenboek e.d.). Zijn de doelen bereikt?

    • Uitbreiding

      • Ga regelmatig na of de site uitgebreid of juist ingeperkt moet worden. Raadpleeg hiervoor de reacties op de site

  • Vernieuwing

    • Inzichten

      • Houdt de trends van websites goed in het oog. Nieuwe inzichten in webtrends kunnen leiden tot nieuwe wensen.

    • Technieken

      • Ook de technologie verandert voortdurend. Pas de site daarop aan.


Producten van natraject:

11. Evaluatierapport