Drempels Weg homepage
neem contact op met de schrijver sitemap
introductie kern van het verslag afsluitende deel
Ga naar toegankelijkheid
Ga naar achtergronden project
Ga naar vooronderzoeken
Ga naar onderdelen Drempelsweg.nl
Ga naar procesbeschrijving
Ga naar evaluatie project
Ga naar evaluatie stage
Ga naar conclusies & aanbevelingen
Ga naar facilitaire website
Ga naar richtlijnen
Ga naar voorbeeldsites
 
Drempelsweg icoon

Voorbeeldsites



Om de richtlijnen te ondersteunen met praktijkvoorbeelden hebben we voor het project Drempelsweg.nl een tweetal demosites gebouwd en een viertal standaardinterfaces.
De demosites zijn min of meer volledige sites met volledige functionaliteit. De standaardinterfaces zijn meer voorbeeldpagina's om een idee te ondersteunen.


Al deze voorbeelden zijn onderdeel van de facilitaire website Drempelsweg.nl en te vinden onder de rubriek Richtlijnen & voorbeelden.


Demosites


De twee demosites zijn verreweg de meest uitgebreide van de zes demonstratiesites die zijn gebouwd voor Drempelsweg.nl. De Profimarktsite en de Sneevertsite zijn binnen NMG bedacht en ontwikkeld. Voor beide sites hebben we twee weken (een week per site, met vijf personen!) de tijd gehad om het concept te verzinnen, uit te werken, te bouwen en te testen.
Voor de Profimarkt zijn we zelfs nog naar de supermarkt gegaan om ingrediënten te fotograferen.

Alle pagina's binnen de twee demosites bevatten commentaar op het grafisch en technisch ontwerp. Daarnaast staan voor elke pagina links naar de relevante toegepaste richtlijnen. De pagina's van de demosites hebben dus ook een koppeling met de richtlijnendatabase

volgende pagina:

Procesbeschrijving

Voor een overzicht:
ga naar de Sitemap

Verklarende Woordenlijst



voetnoten:
  1. Als ze alleen al eens ophielden met hun loket en hun diensten letterlijk te vertalen naar een site en eens gingen nadenken over wat een bezoeker nu echt komt doen, schiet het al een heel eind op.
  Online winkelen: de Profimarkt
Voor het deelproject 'demonstratiewebsites' werd een toegankelijke en gebruiksvriendelijke internetwinkel ontwikkeld. Het uitgangspunt bij de bouw van deze website is enerzijds dat deze toegankelijk is voor iedereen en anderzijds dat de demosite een bruikbaar voorbeeld is voor bedrijven die online transactiediensten aanbieden. Bruikbaar, in de zin van praktisch uitvoerbaar en passend bij het winstoogmerk van de meeste commerciële organisaties.

Eerst hadden we gesprekken met Albert Heijn over een eventuele samenwerking bij dit deelproject, maar die haakten halverwege af vanwege te weinig tijd. Daarna zou Maxfoodmarket meedoen, maar ook die vonden ons werktempo te hoog. Zij gaan in de tweede fase van het project (na de openingsmanifestatie) rustig kijken of ze een bijdrage kunnen leveren voor de verdere ontwikkeling van deze demosite.

Het idee achter de winkel is het volgende. Mensen kunnen op twee manieren hun boodschappen samenstellen: via de winkel (produkten zijn gesorteerd en worden stapsgewijs aangeboden) of via het receptenboek.
  • Als je via de winkel bijvoorbeeld sinaasappelsap wilt bestellen doorloop je de volgende stappen: drinken > vruchtensap > sinaasappelsap. Als je hebt gevonden wat je wilt kun je die produkten in je winkelwagentje plaatsen. Het winkelwagentje werkt iets anders dan men gewend is: het blijft altijd in beeld en je kunt ten alle tijden kijken wat er in je mandje zit (plaatjes en tekst) en dingen toevoegen of verwijderen terwijl je doorwinkelt.
  • Via recepten kun je een lekker gerecht uitzoeken (op categorie; bijvoorbeeld vlees / vegetarisch / vis etc.), waarna je alle benodigde ingrediënten in één keer in je mandje kunt plaatsen. Dingen die je al in huis hebt kun je van tevoren 'uitvinken'. Deze worden dan niet in het mandje geplaatst.
Op de homepage staan elke dag een nieuw recept van de dag en een nieuwe aanbieding, die als link fungeren en de gebruiker direct naar het betreffende recept of produkt brengen.

Wat het ontwikkelen van de Profimarkt uitdagend maakte waren de ingewikkelde tabellen. Deze waren niet te vermijden en dat betekende dat ze allemaal toegankelijk gemaakt moesten worden. Sommige tabellen waren horizontaal georiënteerd, andere juist verticaal. Dit maakte de aard van de aanpassing steeds anders. We hebben in ieder geval goede praktijkvoorbeelden gebouwd, waarbij veel mogelijke vormen van tabellen en hun aanpassingen aan bod komen.

Bekijk de demosite van de Profimarkt



screenshot homepage profimarkt
Fig.1: Profimarkt homepage

screenshot receptengedeelte
Fig.2: Profimarkt receptengedeelte
  Online gemeenteloket: Sneevert
De website van Sneevert heeft een keur aan online diensten. Deze diensten komen neer op het invullen van bestelformulieren, het ontwikkelen van een toegankelijk zoekmechanisme en het plaatsen van beeld en foto's zonder dat de dienst ontoegankelijk is voor gehandicapten. Over het algemeen zijn gemeentelijke sites niet alleen ontoegankelijk voor gehandicapten; ze worden meestal sowieso als erg slecht beoordeeld. er is veel verbetering mogelijk in deze sector 1.

Ingewikkelde en lange formulieren zijn al snel om verschillende redenen ontoegankelijk. Een van de oplossingen die wij hebben bedacht is het stapsgewijs aanbieden van een lang invulformulier. De gebruiker krijgt steeds kleine formuliertjes, waarin bij elkaar horende informatie (zoals adresgegevens) wordt gevraagd. Gebruikers die liever alles in één keer invullen kunnen ervoor kiezen het totale formulier in te vullen.

Verder denken we een handige indeling gemaakt te hebben door de website op te delen in twee delen: bewoners en bedrijven. Als de bezoeker op de homepage een van deze 'ingangen' neemt zal het aantal (irrelevante) opties gereduceerd worden, waardoor gemakkelijker overzicht gehouden kan worden.
In het ontwerp wordt optimaal rekening gehouden met oriëntatie binnen de site. De bezoeker moet altijd weten waar hij zit.

Verder heb ik erop gestaan deze site nu eens met frames te bouwen, om te bewijzen dat ook sites met frames toegankelijk kunnen zijn, als je maar de juiste aanpassingen doet. Sneevert is nu het enige praktijkvoorbeeld voor richtlijnen van de familie Frames.

Bekijk de demosite van Sneevert


Standaard Interfaces


NMG heeft zich in principe niet beziggehouden met de bouw van de standaardinterfaces. De interfaces zijn ontworpen en gebouwd door Lust (www.lust.nl). Ons werk beperkte zich tijdens de bouw tot het beoordelen van de ontwerpen en het geven van richtlijnondersteuning. Ervoor was het wel NMG die de functionaliteit bedacht en de verschillen tussen de standaardinterfaces besprak met Lust. Inhoudelijk waren wij bij NMG dus wel degelijk verantwoordelijk voor de standaardinterfaces.
Toen we de eerste versies ontvingen, hebben we toch een groot deel opnieuw moeten bouwen, omdat het werk verre van toegankelijk was.

Doel van de nieuwsinterfaces is het aantonen dat aantrekkelijk ogende websites gemaakt kunnen worden die voor iedereen, dus ook voor gehandicapten, toegankelijk zijn. Door een viertal voorbeeldinterfaces te tonen wordt de doelgroepen getoond hoe dit mogelijk is.

Om een goed onderscheid te kunnen maken tussen de verschillende ontwerpen is de content (inhoud) bij alle standaardinterfaces hetzelfde.


screenshot homepage sneevert
Fig.3: Sneevert homepage
(met twee ingangen)

screenshot bewonersgedeelte sneevert
Fig.4: Sneevert bewonersgedeelte
(met deelformulier)
  Nieuwsinterface 1: volledig voldoen aan de W3C richtlijnen
Deze interface is volledig ontwikkeld op basis van de internationale W3C richtlijnen. Doelstellingen waren onder andere een zo beeldend mogelijke pagina te maken, zonder dat dit ten koste van de overzichtelijkheid gaat.

Jammer genoeg is Lust naar mijn smaak nog iets te behoudend geweest in hun ideeën over wat je met HTML kunt doen, terwijl het toch toegankelijk blijft. Ongetwijfeld speelde hun geringe kennis van HTML en vooral CSS (stylesheets) hun parten.

Bekijk nieuwsinterface 1



Nieuwsinterface 1
Fig.5: Nieuwsinterface 1
  Nieuwsinterface 2: ontwerp op basis van profielen
Deze interface is gebaseerd op profielen. Het concept bestaat uit een aantal stappen. Allereerst vult de gebruiker een vragenlijst in. Deze lijst bevat toegespitste vragen over eventuele beperkingen die de internetgebruiker heeft bij het bekijken van websites.
De antwoorden worden opgeslagen in een cookie waardoor dit formulier slechts eenmalig ingevuld behoeft te worden. Websites die vervolgens gebruik maken van deze cookie kunnen hun content optimaliseren voor de specifieke gebruiker, bijvoorbeeld gegenereerd vanuit een database.

Ik vind dit de minst bevredigende van de vier interfaces. Niet alleen is het idee in strijd met de doelstellingen van Drempels Weg (één toegankelijke site voor iedereen), ook is de interface halfslachtig uitgedacht en uitgevoerd (twee plaatjes), waardoor de interface zelf totaal ontoegankelijk is.

Bekijk nieuwsinterface 2



Nieuwsinterface 2
Fig.6: Nieuwsinterface 2
  Nieuwsinterface 3: voor iedereen toegankelijk, maar niet per sé W3C
Hier zijn de mogelijkheden van een grafische georiënteerde interface onderzocht, zo toegankelijk en vooral intuïtief mogelijk. De matrix bleek een mogelijkheid om een interface op te leveren waar vanuit het intuïtieve karakter spreekt.
De navigatie die hiermee mogelijk wordt gemaakt bevat zeer veel informatie, maar beperkt de zichtbaarheid hiervan aan de hand van de keuzes van de gebruiker. In een interface zijn verschillende manieren van navigeren mogelijk, zonder dat zij onderling verschillen in vorm en functie.
Ik heb het idee dat dit alleen werkt als je een zeer vaste rubriekenindeling aanhoudt. Deze rigiditeit zal voor een nieuwssite wel hanteerbaar zijn, maar voor andersoortige sites is dit geen optie.

Bekijk nieuwsinterface 3



Nieuwsinterface 3
Fig.7: Nieuwsinterface 3
  Nieuwsinterface 4: gebaseerd op videobeelden
Deze interface biedt een blik op de toekomst. Video zal een steeds belangrijkere rol gaan spelen in het webgebruik van morgen. Onderzocht is hoe de structuur van zo'n website eruit zou kunnen zien, alsmede de wijze van bediening. Hier is enkel gekozen voor bediening met het toetsenbord, maar uiteraard zijn combinaties met muisbesturing mogelijk.
Wat betreft de uiterlijke werking blijkt de persoonlijke begeleiding van de nieuwslezer een sterk hulpmiddel bij het navigeren te kunnen zijn.

Dit is natuurlijk een erg leuke maar ook erg bewerkelijke manier van websites bouwen. Het komt erg in de buurt van interactieve tv.

Bekijk nieuwsinterface 4
(streaming video; snelle verbinding gewenst)



Nieuwsinterface 4
Fig.8: Nieuwsinterface 4
naar boven
naar boven
Volgende pagina: Procesbeschrijving