| Home | Webdesign | Systemen | Over Ons |

Webdesign | Ontwikkeling Website


Voor men begint te (her)ontwikkelen

Voordat men begint met het (her)ontwikkelen van een site dient eerst vastgelegd te worden wat het doel van de site is. Geeft de site informatie over een bepaald onderwerp, heeft de site een amusementswaarde, is de site een verkoopmiddel of is het een showcase van je kunnen? Baken het doel en de te behandelen onderwerpen goed af. Denk vervolgens na over hoe het best de informatie toegankelijk gemaakt kan worden. Hiervoor kunnen we gebruikmaken van een stroomdiagram. Wat is de meest logische en snelste route om bij bepaalde informatie te komen? Is er een formulier of berichtenbord nodig of juist niet?

Beoordelingscriteria

Om een website te kunnen verbeteren moet er eerst worden nagegaan wat voor verbetering vatbaar is. Hiertoe kunnen een aantal relevante onderdelen van de site worden beoordeeld. Een bezoeker zal een site bewust o onbewust beoordelen op onder andere de volgende zaken:

  • Snelheid
    • Hoe lang duurt het voordat de bezoeker de gevraagde pagina op zijn scherm heeft?
    • Hoe lang duurt het sowieso voordat hij iets te zien krijgt?
  • Overzichtelijkheid
    • Ziet de bezoeker snel genoeg waar de site over gaat?
    • Komt de bezoeker vervolgens bij de informatie die hij zoekt of loopt zijn zoektocht dood?
  • Inhoud
    • Is het relevant?
    • Heeft hij er wat aan?
  • Vormgeving
    • Welke sfeer en uitstraling heeft de site?

Een goede site

Kort gezegd is een goede site gebruiksvriendelijk. Voor de bezoeker houdt dit in dat hij zo snel mogelijk vindt wat hij zoekt. De informatie is toegankelijk door een duidelijke navigatie en presentatie waarbij inhoud en vormgeving samenwerkt. De belangen van de bezoeker staan voorop.

Betere navigatie

De navigatie moet voor de bezoeker in één blik duidelijk zijn. Hij scant tussenkopjes en links om te bepalen of er op de betreffende pagina informatie van zijn gading zit. Daarvoor wil hij snel aanwijzingen zien. De betere navigatie kan men krijgen door het gemaakte stroomdiagram te evalueren. Hoeveel lagen tel je en hoeveel pagina's zijn er echt nodig? Hoe komt de bezoeker van A naar B en hoe van E naar C? Websites zijn niet lineair zoals een gemiddelde roman. Je begint niet bij de eerste pagina om te eindigen bij de laatste. Je kruist door de site heen op zoek naar hetgeen je nodig hebt. Net als bij de index van een stratenboek. Er zijn sites die zo'n omvangrijke hoeveelheid informatie bevatten dat deze wordt opgedeeld in meerdere onderdelen. Bij dit soort sites is het handig dat bezoekers snel kunnen zoeken. Hiervoor kan een sitemap worden gemaakt. Dit is een beknopte, vaak visuele, weergave van de onderwerpen per pagina. Tevens kan er een zoekmachine worden aangeboden waarbij gezocht kan worden op trefwoorden. Voor kleinere sites is dit uiteraard niet nodig. Het is van belang dat de navigatie duidelijk en consistent, dat wil zeggen op dezelfde plek en op dezelfde wijze, wordt doorgevoerd in de gehele website. Dit om te voorkomen dat de bezoeker te veel tijd kwijt raakt aan het zoeken waardoor zijn aandacht voor de werkelijke inhoud afneemt.

Links

Je navigeert door een website via klikbare woorden of plaatjes. Visuele knoppen zijn ook een populaire weergave voor navigatiemenu's. In principe is dit een aardige vertaling vanuit de fysieke wereld maar er kleven nadelen aan. Er moeten namelijk meerdere plaatjes per knop meegezonden worden waardoor de downloadtijd aanzienlijk toeneemt. En wat zet je op de knoppen? Alsnog een woord, een pictogram of beide? Een pictogram en woord samen op een knop geven aan dat het pictogram eigenlijk niet duidelijk genoeg is. Daar komt bij dat veel mensen de exacte betekenis van standaard verkeersborden niet eens weten. Hoe moeten ze ooit de door jou verzonnen pictogrammen begrijpen? Het gebruik van pictogrammen is dan ook af te raden.

Vormgeving

Groen staat in het verkeer voor doorrijden en rood voor stoppen. Paars is de kleur van onze huidige regering en ons nationaal elftal is gehuld in oranje. Kortom, een kleur draagt betekenis. In de eigen site kun je hiervan gebruik maken. Als er zakelijke informatie wordt gepresenteerd kan in de achtergrond beter gekozen worden voor de kleuren wit en blauw dan voor zwart. De tekst zelf kan het beste wel zwart op wit omwille van de leesbaarheid. Bij een website over de muziekstijl Metal is een zwarte achtergrond wel gepast. Uiteraard moet er ook rekening gehouden worden met kleurcontrast. Een niet onbelangrijk deel van de mensheid is kleurenblind.

De lay-out

De lay-out van de pagina is misschien wel het belangrijkste onderdeel van de site. Na veel surfen merk men dat er een aantal archetypes zijn op het gebied van lay-out die steeds terugkeren. Een archetype is een voorbeeld van hoe de eerste homepages er veelal uitzagen. Een ander archetype komt aan bod onder het kopje 'Frames'. Weer een ander archetype is een indeling die je veel ziet. De navigatie wordt links gezet en de inhoud rechts daarvan. Het is handig om deze indeling aan te houden. Enerzijds omdat we dat inmiddels gewend zijn anderzijds vanwege de vorm van het scherm. Je houdt bij deze indeling meer verticale ruimte over voor de werkelijke inhoud zodat er minder snel gescrold hoeft te worden. De regellengte van de inhoud wordt hierdoor ook beperkt wat de leesbaarheid van de inhoud ten goede komt. Ooit geprobeerd een tekst te lezen over de gehele breedte van het beeldscherm? Volgens Nielssen moeten bouwers van websites er naar streven maximaal 20% van de beschikbare pixels voor navigatie te gebruiken en de overige 80% te gebruiken voor de presentatie van de inhoud. Laat een logo niet te veel ruimte innemen, het voegt na de eerste blik nog maar weinig toe aan de inhoud van de pagina. Het is handig het logo te gebruiken als Home knop door de afbeelding aan de index pagina te koppelen.

Veel gebruikte technieken

Frames

Een techniek die je veel ziet is het gecentreerde frame, archetype 2. Deze techniek wordt gekozen om er zeker van te zijn dat de site gecentreerd op het scherm van de bezoeker komt. Klinkt handig maar toch kleven er aan deze methode een paar grote nadelen. Deze komen doordat frames gebruik maken van meerdere pagina's in een browservenster. Dit betekent simpelweg ook dat er meerdere pagina's moeten worden ingeladen. Hierdoor duurt het downloaden langer en wordt de kans op fouten groter. Er is ook een andere reden om niet met frames te werken. Als een bezoeker via een zoekmachine op een pagina terechtkomt ziet hij alleen de bewuste pagina. Verder kan hij binnen de site niet komen omdat de navigatie veelal is ondergebracht in een aparte pagina bedoeld voor het andere frame.

Tabellen

Om het idee, navigatie links en inhoud rechts, toch te kunnen houden maken veel sites gebruik van tabellen als opmaakmiddel. Dit werkt in principe vrij aardig maar niet vlekkeloos. Tabellen zijn nooit bedoeld als opmaakmiddel voor hele websites en maken geen deel uit van de gestandaardiseerde HTML. Browsers reageren verschillend op de HTML-code van tabellen waardoor de site er in Netscape veelal beroerder uitziet dan in IE. Verder beperkt het de mogelijkheden om objecten, zoals een afbeelding, een vaste plaats te geven. De HTML-code wordt bij deze werkwijze aanzienlijk groter waardoor de bestandsgrootte op haar beurt toeneemt en het onderhoud lastiger wordt. Voor de bezoeker geeft deze techniek ook het nadeel dat de gegeven informatie lastig te printen is wanneer de breedte van de tabel breder is dan de printmarge.

CSS

Cascading Style Sheets (CSS) zijn het beste alternatief voor professionele en grote websites. Hiermee kunnen objecten op basis van pixelcoordinaten een vaste plaats toegekend krijgen. Verder maakt CSS het onder andere mogelijk om met lagen te werken. In principe biedt CSS de mogelijkheden die we al kennen van tekstverwerking en desktop publishing. Nadeel is wel dat het flink wat bestudering en aandacht vraagt om het onder de knie te krijgen. Voor een site met familiefoto's kan natuurlijk wel gewoon met standaard HTML en tabellen gewerkt worden. Uitgebreide Nederlandstalige informatie over CSS is te vinden op de site van de TU Delft.

Tekst

Al is de inhoud van de tekst nog zo goed, veel mensen nemen het niet serieus als het vol met spelfouten zit. Straattaal, jargon en het gebruik van afkortingen dienen zoveel mogelijk te worden vermeden. Maak zinnen niet te lang. Wat je op papier in 10 zinnen zet moet op het scherm naar vijf zinnen worden teruggebracht.

Website irritaties

Een korte lijst met irriterende website zaken:
  • Lange downloadtijden
  • Pop-up schermen
  • Niet werkende links, formulieren en pagina's
  • Onderdrukking van browserfuncties
  • Bewegende onderdelen
  • Spelfouten
  • Onleesbare tekst
  • Veel moeten scrollen
  • Onduidelijke structuur en links
  • Onnodige toeters en bellen
  • Onnodige content en pagina's
  • Geen reactie krijgen op (aan)vragen

Tips

  • Voorzie bij lange artikelen de bezoeker van een printervriendelijke variant.
  • Laat iemand naar de site kijken. Vindt die persoon zijn weg?
  • Bouw de website op snelheid.
  • Laat iemand de teksten nalopen op tik-, spel en stijlfouten.
  • Verplaats je in de bezoeker.
  • Laat de site een paar dagen links liggen om weer een frisse blik te krijgen.
  • Maak gebruik van metatags, title en het alt-atribuut.