webusab-01.qxd
10-2-03
14:51
Page 31
ALGEMEEN: SITE-ONTWERP 2.1
Navigeren op de website | p33
2.2
De doelen van websitenavigatie | p35
2.3
Navigeren volgens gegroeide gewoonten | p38
2.4
Structuur en navigatie | p40
2.5
Invulling geven aan de navigatiestructuur | p43
2.6
Vormgeven van de navigatiestructuur | p47
2.7
De homepage | p55
2.8
Een zoekdienst op de website | p58
2.9
Servicepagina’s die op elke website thuishoren | p60
2
webusab-01.qxd
10-2-03
14:51
Page 32
..............................
Elke webpagina van de site heeft een uithangbord waaraan de bezoeker herkent waar hij terecht is gekomen. Een goed uithangbord bestaat uit de combinatie van een logo, een slagzin en een paginatitel.
“
”
..............................
webusab-01.qxd
10-2-03
2.1
14:51
Page 33
Navigeren op de website Natuurlijk wilt u veel bezoekers trekken met uw websites en ziet u graag dat deze bezoekers nog eens terugkeren. Mensen zullen uw website echter niet gebruiken als ze er de weg niet kunnen vinden. U moet er daarom voor zorgen dat bezoekers gemakkelijk over uw website kunnen navigeren. Een website wordt bij de bezoeker op het beeldscherm getoond door de browser. De browser toont één pagina tegelijk. Door de combinatie van tekst, afbeeldingen en eventueel multimedia-elementen ziet een webpagina er meestal indrukwekkender uit dan een pagina in uw tekstverwerker of de notulen van de laatste vergadering. Het is echter niet meer dan een webpagina. Of is het toch méér dan dat? Websurfen – navigeren over websites – voelt alsof we ons bewegen in een fysieke wereld, een aparte wereld: internet, het world wide web. Dit gevoel ontstaat voornamelijk dankzij één kenmerkend element op webpagina’s: de hyperlink (of kortweg link). De link is als het ware de deurknop van de deur naar een andere webpagina. De bezoeker van uw website kan de links op uw webpagina gebruiken om zich te bewegen over uw website. Het is het principe van hypertext en de bijbehorende hyperlinks die het web maken tot wat het is. Zij zijn verantwoordelijk voor het onderscheid tussen traditionele lineaire media (zoals een boek of tijdschrift) en het web. Bezoekers kunnen met één klik direct naar andere webpagina’s springen. Zij denken tijdens deze handeling echter niet in termen van ‘het laden van een nieuwe pagina vanaf de vaste schijf van een server op internet naar de vaste schijf in mijn computer en vervolgens in de browser’. Een klik op een link is eenvoudigweg een overstap naar een andere webpagina of een andere website. Iedereen kent deze handelingen inmiddels als ‘surfen over het internet’; in technische termen wordt meestal gesproken over navigeren en afgeleiden daarvan, zoals navigatiemenu’s en navigatiestructuren.
Navigeren in de echte wereld Toch is het navigeren over websites lastiger dan de weg vinden in de ‘echte’ wereld. Stel bijvoorbeeld dat u zoekt naar een pak melk in een supermarkt en dat u later thuis, op internet zoekt naar hetzelfde pak melk op de website van die supermarkt. Er zijn dan drie opvallende verschillen te constateren: ■
■
Omvang. In de supermarkt kunt u direct zien hoe groot de winkel is. Op de website ziet u maar één pagina tegelijk en hebt u geen besef van de omvang van de gehele site. Het kan een website zijn van twintig pagina’s, maar het kunnen er ook honderden zijn. Richting. In de supermarkt kunt u zien waarheen u moet lopen. Naar de zuivelafdeling, want daar staat de melk. Op een website kunt u niet in een rich-
HOOFDSTUK 2 | Algemeen: site-ontwerp
33
webusab-01.qxd
10-2-03
14:51
■
Page 34
ting bewegen, voor- of achteruit of links- of rechtsaf. U ziet geen richting, er zijn slechts hyperlinks. Welke link brengt u dichterbij de pagina met het pak melk? Plaats. Na een paar keer boodschappen doen, hebt u een redelijk beeld van de winkel. U weet zichzelf te plaatsen. Waar u ook bent, de zuivelafdeling weet u wel te vinden. Op de website krijgt u dat beeld niet zo snel, want u ziet altijd slechts één webpagina tegelijk. Open maar eens een willekeurige pagina van de supermarktsite: waar vindt u vervolgens het pak melk? Alleen wanneer de navigatiestructuur van de site duidelijk is, zult u snel naar de melk kunnen surfen.
Het perspectief van de bezoeker Deze beperkingen bij het navigeren over een website raken wel eens buiten de aandacht bij het bouwen van een website. De ontwerpers en bouwers van de website hebben veel meer overzicht op de website dan de bezoeker van de website. Zij gaan de navigatie van de website te veel beoordelen vanuit hun eigen perspectief en te weinig vanuit het perspectief van de websurfer.
FIGUUR 2.1 | De meest gebruikte knop van de browser
Als de bezoeker van een website moeite heeft met navigeren, klikt hij op zijn zoektocht vaak door naar een webpagina waar hij bij nader inzien weer snel vanaf wil. Heeft de bezoeker moeite met zijn plaatsbepaling op de website, dan is de knop Vorige van de browser zijn enige makkelijke weg terug. Wordt de nieuwe pagina in een apart venster geopend, dan werkt in veel browsers de knop Vorige niet. Het is beter om dit te voorkomen. Stel de bezoeker van uw website altijd in de gelegenheid van de knop Vorige gebruik te maken. Hiertoe laat u de hyperlinks op uw website een volgende pagina openen in hetzelfde venster. Het feit dat de knop Vorige het meest wordt gebruikt, geeft aan dat navigeren op veel websites nog niet eenvoudig is. De wijze waarop bezoekers over een site navigeren, bepaalt dus in belangrijke mate het gebruiksgemak van de website. Het is bij het ontwerpen van uw website dan ook belangrijk aan de navigatie van uw website de nodige aandacht te geven, met in het achterhoofd het perspectief van de bezoeker. In de volgende paragrafen diepen we het begrip navigeren wat verder uit.
34
HOOFDSTUK 2 | Algemeen: site-ontwerp
webusab-01.qxd
10-2-03
2.2
14:51
Page 35
De doelen van websitenavigatie Wanneer u het begrip ‘navigeren’ in een woordenboek opzoekt, zult u lezen dat het te maken heeft met twee zaken: van A naar B gaan en weten waar je bent. Oftewel: de weg vinden en plaatsbepaling. Dit zijn ook op een website de meest opvallende doelen van de hyperlinks waarmee de bezoeker over de website kan navigeren. Op een website dient navigatie meerdere doelen. In de volgende paragrafen worden ze kort uiteengezet. U kunt deze doelen in het achterhoofd houden wanneer u zelf een navigatiestructuur voor uw site(s) ontwerpt.
2.2.1 Navigatie helpt de bezoeker om iets te vinden op de website De bezoeker wil gemakkelijk de weg kunnen vinden op uw website. Eenvoudig en liefst zonder er over te moeten nadenken. Het maakt niet zoveel uit hoe vaak – nou ja, liefst niet al te vaak – hij op een link moet klikken, als dat maar gemakkelijk en vanzelfsprekend gaat.
2.2.2 Navigatie maakt duidelijk waar de bezoeker is op de website De bezoeker komt meestal via de homepage op een dieper in uw website gelegen pagina. Soms komt hij echter via een link op een andere website of via een zoekmachine direct op die webpagina terecht. Een bezoeker moet dan eigenlijk direct kunnen zien waar hij precies terecht is gekomen. Een duidelijke navigatiestructuur is dan een hulpmiddel om de bezoeker te laten zien waar hij zich in de site bevindt.
2.2.3 Navigatie biedt de bezoeker een houvast op de website Door de navigatie consequent en op eenzelfde wijze vorm te geven in de navigatiestructuur op elke webpagina, kunt u voorkomen dat de bezoeker op uw website verdwaalt. En u weet: een verdwaalde bezoeker is een ontevreden bezoeker. Hij zal uw website verlaten en er veelal nooit meer terugkeren.
HOOFDSTUK 2 | Algemeen: site-ontwerp
35
webusab-01.qxd
10-2-03
14:51
Page 36
FIGUUR 2.2 | Op www.rabobank.nl is op elke pagina gebruikgemaakt van een vaste link naar de homepage; hoewel deze link zich op een wat merkwaardige plaats bevindt, vergemakkelijkt dit het navigeren voor de bezoeker
Deze pagina van de Rabobank is een voorbeeld van een website met een vaste link naar de homepage. Ook het logo biedt echter houvast. Het staat in de linkerbovenhoek op iedere pagina van de website. U leest het goed, op iedere pagina van de website. Het logo is tevens een hyperlink naar de homepage op alle pagina’s behalve de homepage zelf. De bezoeker zou anders in verwarring kunnen komen: hij is al op de homepage, waar zou een link naar de homepage hem dan naartoe moeten leiden? Is er soms nog een homepage? Probeer dit soort vraagtekens in de hoofden van uw bezoeker voor te zijn. Het wordt daarnaast aanbevolen de bezoeker ook met een tekstlink te laten zien dat hij altijd met één klik naar de homepage kan gaan. Gebruik als omschrijving liefst het woord ‘Home’. Het begrip is zodanig ingeburgerd dat iedere websurfer het zal begrijpen.
2.2.4 Navigatie maakt duidelijk wat de bezoeker kan vinden op de website Door de structuur van de website zichtbaar te maken kan navigatie de bezoeker een overzicht geven van de inhoud van de website. Naast zicht bieden op het ‘waarheen’, biedt navigatie ook zicht op het ‘wat’ van de website. Dit is belangrijk want niet alle bezoekers zullen uit zichzelf weten wat er allemaal op uw website te koop is.
36
HOOFDSTUK 2 | Algemeen: site-ontwerp
webusab-01.qxd
10-2-03
14:51
Page 37
FIGUUR 2.3 | In het navigatiemenu van Wehkamp aan de linkerzijde van de pagina wordt niet alleen de structuur van de website getoond, maar tegelijk wat er zoal te bestellen is op de website (zie hoofdstuk 10 voor meer opmerkingen over dit menu)
2.2.5 Navigatie toont de bezoeker hoe de website gebruikt kan worden Hoe makkelijker de bezoeker over uw website kan navigeren, des te beter kan hij uw website gebruiken. U kunt met goede vormgeving van de navigatie dus tegelijk de keuzeopties op uw website vanzelfsprekend maken. Dat werkt beter dan allerhande losse, tekstuele instructies over het gebruik van de site, want die worden toch niet gelezen.
2.2.6 Navigatie geeft de bezoeker vertrouwen in de website Een bezoeker beoordeelt onbewust op elke webpagina telkens weer het gebruiksgemak van de navigatie. Dit oordeel is bepalend voor het surfgedrag: gaat de bezoeker vrolijk verder op deze website of klikt hij door naar een andere website? Navigatie is voor de bezoeker veelal maatgevend voor de kwaliteit van uw website, de professionaliteit van de ontwerpers en uiteindelijk ook van uw bedrijf. Het lijkt allemaal zo vanzelfsprekend. Onbewust passen ervaren siteontwikkelaars deze principes vaak al automatisch toe. Toch is het maar al te gemakkelijk om bij het bouwen van een website een of meer van deze doelen van websitenavigatie over het hoofd te zien. U kunt uzelf op dit punt scherp houden door kri-
HOOFDSTUK 2 | Algemeen: site-ontwerp
37
webusab-01.qxd
10-2-03
14:51
Page 38
FIGUUR 2.4 | Google is een veelgebruikte zoekmachine op internet; deze eenvoudig ontworpen pagina is ook zonder instructies gemakkelijk te gebruiken
tisch te kijken naar sites die u al ontwikkeld hebt, en door aandachtig te kijken naar de op internet ontwikkelde navigatiestandaarden. Hier werpen we in de volgende paragraaf een blik op.
2.3
Navigeren volgens gegroeide gewoonten U stopt wanneer het stoplicht op rood staat. U weet immers dat u daardoor een ongeluk voorkomt. Wanneer u een nieuwe auto wilt kopen, gaat u niet op zoek naar een model met vierkante wielen. Want u weet maar al te goed dat een dergelijke auto niet te koop is, omdat het niet handig zou zijn. Zo zijn er heel veel gegroeide gewoonten. We leren ze van onze ouders, op school, tijdens rijles, uit boeken. Het zijn spelregels waarover al is nagedacht. Het zijn standaarden geworden. Ze maken het leven gemakkelijker. Waarom zou u er geen gebruik van maken? Internet is hierop geen uitzondering. Internet is gestart met een kleine set van technische protocollen en programmeertalen. Daarna is het world wide web in betrekkelijk korte tijd uitgegroeid tot een verzameling van miljoenen websites; in hoofdstuk 1 hebben we daar aandacht aan besteed. U kunt er daarom gerust van uitgaan dat de bezoeker van uw site verreweg de meeste tijd zal navigeren over andere websites dan die van u. Hij zal uw site onbewust echter wel vergelijken met de talloze websites waarover hij eerder heeft genavigeerd. Hij zit niet te wachten op een voor uw site unieke navi-
38
HOOFDSTUK 2 | Algemeen: site-ontwerp
webusab-01.qxd
10-2-03
14:51
Page 39
gatie, waarvoor hij moeite moet doen om het te snappen. Hoeveel moeite u zich ook hebt getroost om dat prachtige 3D-uitklapmenu te programmeren – de bezoeker heeft daar in de meeste gevallen geen oog voor. De bezoeker zal over uw website willen navigeren op basis van zijn ervaringen elders op internet. Enkele navigatiestructuren zijn op zoveel websites in gebruik, dat ze min of meer tot standaard zijn uitgegroeid. Deze navigatiestructuren zijn voor uw bezoeker direct herkenbaar en daardoor gemakkelijk te gebruiken.
Regels hebben uitzonderingen In het algemeen wordt het aanbevolen niet zelf pictogrammen te ontwikkelen om over uw website te navigeren (zie bijvoorbeeld ook figuur 3.18). De gebruiker zal extra moeite moeten doen om deze te snappen, omdat het geen standaardpictogrammen zijn. Het pictogram voor een winkelwagentje daarentegen wordt inmiddels zo vaak gebruikt op commerciële websites dat de meeste bezoekers het inmiddels zonder nadenken herkennen als koppeling naar de plaats waar hij een bestelling kan doen. Dit is in de loop der jaren zo gegroeid. Maak gebruik van deze geconditioneerde ‘reflex’! Als er op uw websites iets te koop is, gebruik dan bij voorkeur dit pictogram of een afgeleide hiervan die past binnen uw huisstijl. Het winkelwagentje is daarom een uitzondering op de regel dat u liever geen pictogrammen gebruikt voor primaire handelingen op de site.
FIGUUR 2.5 | Er zijn een beperkt aantal universeel herkenbare pictogrammen op websites; het winkelwagentje is er één van
Gegroeide gewoonten op internet worden standaarden, omdat ze heel veel worden gebruikt. Iemand had ooit een heel goed idee. Het was een goed idee omdat het in de webpraktijk bleek te werken. Toepassing van het idee maakte blijkbaar de navigatie over een website gemakkelijker. Het zijn wielen die al uitgevonden zijn en alom navolging hebben gevonden. Het is verstandig om van dergelijke gewoonten gebruik te maken bij het vormgeven van de navigatiestructuur op uw website. Het is prettig voor de bezoekers van uw website, omdat zij dan minder hoeven na te denken over hoe de navigatie op uw website in zijn werk gaat.
HOOFDSTUK 2 | Algemeen: site-ontwerp
39
webusab-01.qxd
10-2-03
14:51
Page 40
De ontwerpers van websites hebben soms tegenzin om gebruik te maken van ‘gewoonten’. Het klinkt niet echt uitdagend: een website ontwerpen waarbij de bezoeker meteen een gevoel van déjà vu krijgt. Dit is echter een beperking die hoort bij het vak webdesign. Het ontwerpen van websites is ontwerpen voor interactie en communicatie via een website. Webdesign wordt in zekere mate beperkt door gegroeide gewoonten in die interactie (net zoals tijdschriftenontwerpers beperkt worden door de afspraken die in die branche gebruikelijk zijn). De vraag voor ontwerpers wordt daardoor: hoe kunnen we binnen deze beperkingen toch zo creatief mogelijk een website ontwerpen? Zo bezien kan usability een stimulerende uitdaging zijn, juist ook bij het ontwerpen van de ‘look and feel’ van een website. Het toepassen van gegroeide gewoonten in de vormgeving van navigatie op uw website geeft de bezoekers echter een vertrouwd gevoel van herkenning. Wanneer u de ultieme bruikbare website wilt ontwerpen, is het daarom verstandig te kiezen voor een tamelijk standaard navigatiestructuur binnen het ontwerp van uw website.
2.4
Structuur en navigatie Een website is een bonte verzameling van webpagina’s die onderling verbonden zijn door hyperlinks. Samen vormen deze pagina’s een – hopelijk logische – structuur. De meeste sites bieden een vaste verzameling hyperlinks als navigatiestructuur van de website. Deze structuur komt op elke pagina van de site als een soort sjabloon terug. Binnen deze navigatiestructuur kan de bezoeker over uw website navigeren. Hij vindt zo zijn weg naar de belangrijke onderdelen van de website. Ook al bestaat een website uit veel pagina’s, de gestructureerde opbouw is te verdelen in een klein aantal onderdelen. Rondom deze onderdelen wordt door de informatiearchitecten in een webteam de hele website ontworpen. U kunt dit vergelijken met het werk van architecten in de bouwwereld. Ook in de bouwwereld gaan architecten bij hun ontwerpen uit van vaste onderdelen zoals de fundering, de steunmuren en het dak van een gebouw. Vaste onderdelen die u kunt herkennen in veel websites zijn: ■
■
40
Homepage. De webpagina die wordt geopend met het webadres (bijvoorbeeld: www.mijnbedrijf.nl) van de website. De homepage is de meest gebruikte toegang tot de rest van uw website en daarom de belangrijkste pagina van uw website. Deze pagina heeft zijn eigen kenmerken. In paragraaf 2.7 wordt de homepage uitvoeriger beschreven. Servicepagina’s. Pagina’s met informatie en diensten die het gebruik van de website makkelijker en prettiger maken. Bijvoorbeeld de pagina met een weg-
HOOFDSTUK 2 | Algemeen: site-ontwerp
webusab-01.qxd
10-2-03
14:51
■
Page 41
wijzer (site map) waarop een overzichtelijke index van uw website is te vinden. In paragraaf 2.9 geven we voorbeelden van veelgebruikte servicepagina’s waarmee u het gebruiksgemak van uw website kunt verbeteren. Secties. Een specifiek onderdeel van de website waar de bezoeker gelijksoortige informatie kan vinden of waar hij gelijksoortige dingen kan doen. De informatie zelf kan op verschillende manieren aanwezig zijn (tekst, afbeeldingen, video, enzovoort). De bezoeker kan daarnaast vaak producten en diensten aanschaffen of zijn mening geven op interactiepagina’s. Op grote websites zijn de secties complete subsites met elk een eigen inhoudpagina (zeg maar de ‘homepage’ per sectie).
FIGUUR 2.6 | De homepage van www.regering.nl is een voorbeeld van een site met secties; deze zijn bereikbaar via een rij tabs onder het logo. Tevens zijn er servicepagina’s aanwezig, deze staan gegroepeerd in een rijtje rechtsboven
Primaire navigatiestructuur De basisstructuur is bepalend voor de vormgeving van de navigatie op uw website. Het geeft inhoud aan de primaire navigatie, oftewel de navigatie naar de belangrijkste pagina’s van uw website. Deze primaire navigatiestructuur is daarom niet alleen op de homepage, maar op alle pagina’s van de website te vinden. De primaire navigatiestructuur is als het ware het dashboard van uw website dat uw bezoekers vanzelfsprekend overal tot hun beschikking willen hebben. Op de servicepagina’s en de inhoudpagina’s van de secties zijn veelal een beperkt aantal keuzeopties voor lokale navigatie aanwezig. Lokale navigatie wordt ook wel de secundaire navigatie genoemd.
HOOFDSTUK 2 | Algemeen: site-ontwerp
41
webusab-01.qxd
10-2-03
14:51
Page 42
Het onderscheid zal via een voorbeeld direct duidelijk worden: ■ ■
Proxis.be (zie paragraaf 10.16) biedt als primaire navigatiestructuur de secties Boeken, Muziek, Video/dvd en Multimedia. Als secundaire navigatie wordt binnen een sectie (bijvoorbeeld Boeken) gebruikgemaakt van genres, zoals Literatuur, Computers en internet, Poëzie, enzovoort.
Met het oog op het overzicht van uw site wordt het aanbevolen bij voorkeur geen dieper liggende, ‘sub-onder-subsecties’ in uw website te verwerken. Het wordt dan erg moeilijk om nog eenvoud en overzicht binnen uw navigatiestructuur te houden. Het spreekt voor zich dat het bij het ontwerpen van een nieuw webproject erg belangrijk is goed na te denken over de primaire en secundaire navigatiestructuren die u wilt bieden. Of, als u met een redesignproject van een bestaande site aan de slag bent, te kijken of de huidige navigatiestructuren wel duidelijk genoeg zijn en voldoende toegang bieden tot de mogelijkheden die de site biedt.
Zeven plus of min twee Een website kan honderden webpagina’s omvatten. Een groot aantal webpagina’s hoeft geen enkel probleem te vormen voor de navigatie over een website. Zolang de structuur maar overzichtelijk blijft, kan elke bezoeker er de weg vinden. Hier geldt echter wel dat overdaad schaadt. Een vuistregel is: het totaal van secties en servicepagina’s is zeven plus of min twee. Vijf primaire onderdelen zijn nog goed te overzien. Zeven gaat al minder gemakkelijk. Bij tien of meer keuzeopties zal zelfs een zeer ervaren websurfer het overzicht verliezen. Probeer daarom bij het ontwerpen van de structuur van uw website uit te gaan van vier secties plus drie servicepagina’s. Kijk vervolgens eerst of een inperking tot minder onderdelen mogelijk is. U kunt zich daarbij afvragen wat het meest belangrijk is in de doelstellingen voor uw website. Slechts wanneer het onvermijdelijk de doelstellingen van uw website dient, kunt u overwegen boven de zeven nog enkele onderdelen toe te voegen aan uw primaire navigatiestructuur. Probeer in die lastige situatie in elk geval binnen een totaal aantal onderdelen van negen te blijven.
FIGUUR 2.7 | Te veel keuzes leidt tot onduidelijkheid; het gefingeerde Amazon.com-menu (rechts) laat dit duidelijk zien, maar ook in het echt (hier vrouwonline.nl) komt dit voor: de site biedt met rubrieken onder elk tabblad te veel keuzes in de navigatiestructuur en is daardoor onoverzichtelijk
42
HOOFDSTUK 2 | Algemeen: site-ontwerp
webusab-01.qxd
10-2-03
2.5
14:51
Page 43
Invulling geven aan de navigatiestructuur Bij het navigeren verwacht de bezoeker dus begrijpelijke hyperlinks (of buttons of tabs) op een herkenbaar deel van de webpagina. Dit is de navigatiestructuur. Indien uw website is opgebouwd uit de vaste onderdelen die zijn beschreven in de vorige paragraaf, zullen deze in de primaire navigatiestructuur herkenbaar zijn. Plaats ze bij voorkeur consequent op elke pagina van uw website. Bij de vormgeving van de navigatiestructuur op uw website werkt u ook met een aantal vaste onderdelen, die elk een duidelijke samenhang hebben met de doelen van de navigatie en de structuur van de website. In deze paragraaf kijken we naar de onderdelen die in elke goede navigatiestructuur terugkomen.
2.5.1 Het uithangbord Elke webpagina van de site heeft een uithangbord waaraan de bezoeker herkent waar hij terecht is gekomen. Een goed uithangbord bestaat uit de combinatie van een logo, een slagzin en een paginatitel: ■
■
■
Logo. Een logo is te vergelijken met het uithangbord op een gebouw. Op de website van een bedrijf is een logo vaak gelijk aan het reeds bestaande bedrijfslogo. Het wordt aanbevolen om het logo in de linkerbovenhoek van de webpagina te plaatsen. Op iedere webpagina, altijd zichtbaar. De bezoeker kan de vraag ‘op welke site ben ik’ dan altijd beantwoorden, ongeacht de wijze waarop hij op uw site verzeild is geraakt. Slagzin. Een duidelijke slagzin (ook wel tagline genoemd) is voor de herkenbaarheid van de website minstens zo belangrijk als het logo. Veel bezoekers van uw website waren immers niet gericht naar uw site op zoek en zullen uw logo niet (her)kennen. Een slagzin die omschrijft wat er op de website te vinden is, biedt deze bezoekers dan extra houvast. Maar let op: een slagzin is geen motto of missie! Een goede slagzin is duidelijk, informatief en wervend. Maak de slagzin niet vaag, algemeen of ‘te’ bijzonder. De plaats van de slagzin is in de directe nabijheid van het logo. De slagzin houdt u het beste kort: vier tot acht woorden. In figuur 2.8 wordt een voorbeeld gegeven van een aantal duidelijke slagzinnen/taglines van verschillende websites. Titel. Elke goede webpagina heeft een titel. De titel wordt in de code van een webdocument aangegeven met
en verschijnt in de titelbalk van de browser. Het gebruiken van een goede, beschrijvende titel is belangrijk. ■ De titel is immers ook de naam die wordt gebruikt wanneer een bezoeker de pagina opslaat in zijn lijstje met Favorieten (bookmarks). De titel heeft als paginatitel ook een plaats op de webpagina zelf.<br />
<br />
HOOFDSTUK 2 | Algemeen: site-ontwerp<br />
<br />
43<br />
<br />
webusab-01.qxd<br />
<br />
10-2-03<br />
<br />
14:51<br />
<br />
Page 44<br />
<br />
FIGUUR 2.8 | Voorbeelden van een slagzin als onderdeel van het ‘uithangbord’ van een website; plaats een dergelijke tagline het liefst in de nabijheid van het logo<br />
<br />
■<br />
<br />
Voor een snelle plaatsbepaling heeft de bezoeker meestal niet genoeg aan alleen de titel in de titelbalk. Een paginatitel is dan een goede aanvulling. Plaats deze het liefst in een relatief grote letter en boven in de pagina. De bezoeker kan daaraan direct herkennen wat er specifiek op deze webpagina te vinden is (zie ook figuur 2.9).<br />
<br />
FIGUUR 2.9 | De combinatie van de titel in de titelbalk én een opvallende paginatitel maakt direct duidelijk dat op deze webpagina van Albert Heijn snelle recepten te vinden zijn<br />
<br />
44<br />
<br />
HOOFDSTUK 2 | Algemeen: site-ontwerp<br />
<br />
webusab-01.qxd<br />
<br />
10-2-03<br />
<br />
14:51<br />
<br />
Page 45<br />
<br />
2.5.2 De weg naar huis Wanneer de bezoeker zich ergens in uw site verloren voelt, zal hij de weg naar de homepage zoeken. Hij doet dit bijvoorbeeld om vanaf de homepage opnieuw te beginnen of hij verwacht zich op de homepage beter te kunnen oriënteren. U kunt de weg naar huis wijzen door op elke webpagina een link terug naar de homepage te plaatsen. Dit is een van de eerste dingen die elke webdesigner leert. De aanbevolen manier is het logo te voorzien van een link naar de homepage zodat het logo aanklikbaar is en tevens (in de buurt van het logo) een link te plaatsen met de tekst ‘Home’ of ‘Voorpagina’. Let op: op alle pagina’s van de site zou het logo aanklikbaar moeten zijn om de bezoeker zo naar de homepage te brengen. Behalve de homepage zelf! Wanneer op de homepage zelf het logo aanklikbaar is, lijkt het immers alsof er nog een andere homepage is. Na een klik op het logo op de homepage zal de gebruiker zich verwonderd afvragen of de nu geladen pagina een andere pagina is dan de vorige.<br />
<br />
De homepage is uniek De homepage neemt de centrale plaats in bij het navigeren over uw website. Om direct herkenbaar te zijn mag de homepage vergeleken met de overige pagina’s op de website eigen opvallende accenten in de opmaak en de navigatiestructuur hebben: ■<br />
<br />
het logo is op de homepage groter dan elders op de website;<br />
<br />
■<br />
<br />
de opmaak van de homepage mag iets afwijken;<br />
<br />
■<br />
<br />
op de homepages worden alle secties kort beschreven.<br />
<br />
In figuur 2.10 wordt hiervan een voorbeeld gegeven.<br />
<br />
2.5.3 De secties De secties zijn de hyperlinks naar de onderdelen of subsites van de website met informatiepagina’s of interactiepagina’s met producten en diensten. Gebruik hiervoor bij voorkeur teksthyperlinks. Deze zijn – ondanks hun eenvoud – het meest gebruikersvriendelijk. Gebruikt u grafische buttons of tabs als koppeling naar de secties, dan is het goed ook dan een tekst op die afbeelding te zetten. Deze tekst moet natuurlijk kort zijn, veelal kunt u volstaan met slechts één enkel woord (bijvoorbeeld de sectienaam, denk aan Producten, Boeken, Over ons, enzovoort). Zie ook figuur 2.11.<br />
<br />
HOOFDSTUK 2 | Algemeen: site-ontwerp<br />
<br />
45<br />
<br />
webusab-01.qxd<br />
<br />
10-2-03<br />
<br />
14:52<br />
<br />
Page 46<br />
<br />
FIGUUR 2.10 | De homepage van Leren.nl is als homepage herkenbaar aan een groter logo dan op de overige pagina’s en aan een afwijkende positie van de zoekdienst<br />
<br />
FIGUUR 2.11 | De secties bij Bol.com zijn boven in de pagina geplaatst als tabs en onder in de pagina worden de secties als tekstlinks herhaald; let er voor de consistentie wel op dat dan dezelfde secties worden genoemd, anders wekt u verwarring<br />
<br />
De sectiehyperlink is een label, een soort etiket. De beste labels zijn de labels met een heel duidelijke tekst. Om altijd snel gezien te worden staan de hyperlinks naar de secties bij voorkeur in de buurt van het uithangbord. Bovenin en aan de linkerkant van de pagina zijn de meest bekeken plaatsen op het beeldscherm, dit zijn dus goede locaties.<br />
<br />
46<br />
<br />
HOOFDSTUK 2 | Algemeen: site-ontwerp<br />
<br />
webusab-01.qxd<br />
<br />
10-2-03<br />
<br />
14:52<br />
<br />
Page 47<br />
<br />
2.5.4 De zoekdienst Veel bezoekers hebben het geduld niet om rustig alle hyperlinks te lezen. Zij maken liever gebruik van de site via een zoekdienst waar ze snel op trefwoord kunnen zoeken. Een zoekdienst is herkenbaar als een zoekveld-met-knop. Bezoekers verwachten deze (ook weer op basis van talloze ervaringen op andere websites) aan te treffen aan de bovenkant van de webpagina. De plaatsing is liefst in het midden (zoals bij Yahoo of Google) of aan de rechterkant. Een positie in een navigatiemenu aan de linkerzijde voldoet ook, zij het dat het zoekvak dan meestal niet zo breed kan zijn. In paragraaf 2.8 gaan we verder in op het belang en de vormgeving van een zoekdienst bij het navigeren over uw website.<br />
<br />
2.5.5 De servicepagina’s Voor deze links geldt hetzelfde als voor de links naar de secties. Omdat ze meestal geen deel uitmaken van de primaire taken die de bezoeker op de site wil uitvoeren, kunnen ze minder opvallend zijn en wat verder van het uithangbord staan. Voor de naamgeving van servicepagina’s op het web zijn langzamerhand verschillende standaarden ontstaan; in paragraaf 2.9 wordt daarvan een overzicht gegeven.<br />
<br />
2.6<br />
<br />
Vormgeven van de navigatiestructuur De vaste onderdelen van de primaire navigatie kunnen op vele manieren worden vormgegeven. In de praktijk blijken drie navigatiestructuren in het bijzonder hun bruikbaarheid bewezen te hebben. Ze worden dan ook zeer vaak – met kleine variaties – toegepast in het ontwerp van een website. Deze drie structuren zijn herkenbaar aan een eigen vormgeving in de lay-out van de webpagina waarop ze worden gebruikt voor de primaire navigatie. Deze drie typen zijn: ■ ■ ■<br />
<br />
de hele pagina als navigatiestructuur; de navigatiestructuur aan de bovenkant van de pagina; de navigatiestructuur aan de linkerkant van de pagina.<br />
<br />
2.6.1 De gehele pagina als navigatiestructuur Er zijn veel websites die een op onderwerp geordende toegang bieden tot informatie en interactie op andere websites. Zij hebben meestal de navigatiestructuur van de populaire startpagina’s. Voorbeelden zijn www.yahoo.com en www.startpagina.nl. Boven in de als startpagina vormgegeven webpagina’s staan het<br />
<br />
HOOFDSTUK 2 | Algemeen: site-ontwerp<br />
<br />
47<br />
<br />
webusab-01.qxd<br />
<br />
10-2-03<br />
<br />
14:52<br />
<br />
Page 48<br />
<br />
uithangbord plus de zoekmachine. Vrijwel het gehele paginaoppervlak is verdeeld in rubrieken met rijtjes hyperlinks.<br />
<br />
FIGUUR 2.12 | Startpagina is een bekend voorbeeld waarbij de navigatiestructuur voor de gehele pagina wordt gebruikt<br />
<br />
Alleen een Startpagina is een startpagina De navigatiestructuur van de startpagina is doorgaans niet geschikt voor uw website. Deze navigatiestructuur is ontwikkeld voor websites (en webpagina’s) die als belangrijkste doel hebben: het bieden van een aantal voor de bezoeker verzamelde hyperlinks naar informatie op andere websites dan de eigen website. Dit zijn websites die een portal bieden naar informatie elders op internet. Wanneer dit niet het doel van uw website is, kunt u beter voor een andere navigatiestructuur kiezen. Een structuur die meer geschikt is voor een veel kleiner aantal hyperlinks naar onderdelen van uw eigen website. Er blijft dan meer ruimte op de webpagina’s beschikbaar voor uw informatie, producten en diensten. Startpagina’s bieden vaak ook een zoekmachine die heel internet afzoekt en zogenoemde ‘handige links’ naar weerberichten, telefoonboeken, files of andere informatie elders op internet. Het is niet nodig dit op uw website ook te bieden. De bezoeker van uw website kan die informatie echt wel zelf vinden op internet, daar heeft hij uw website niet voor nodig. Concentreer u op uw eigen site dan ook op uw eigen producten en diensten.<br />
<br />
48<br />
<br />
HOOFDSTUK 2 | Algemeen: site-ontwerp<br />
<br />
webusab-01.qxd<br />
<br />
10-2-03<br />
<br />
14:52<br />
<br />
Page 49<br />
<br />
2.6.2 De navigatiestructuur aan de bovenkant van de pagina De bovenkant van een webpagina is altijd zichtbaar op het beeldscherm na het openen van een webpagina. De bezoeker hoeft niet met zijn muis te scrollen om alles te zien. Oftewel: de bovenkant van de pagina is een goede positie voor de primaire navigatiestructuur. Het aantal hyperlinks in de primaire navigatiestructuur blijft vanzelf beperkt tot wat nog behapbaar is voor de bezoeker. Het is een eenvoudige gebruikersvriendelijke vormgeving.<br />
<br />
FIGUUR 2.13 | De website van TopStyle is een voorbeeld van een eenvoudige navigatiestructuur aan de bovenkant van de pagina. Naast het logo en onder de slagzin staan een beperkt aantal teksthyperlinks; eenvoudig maar doeltreffend<br />
<br />
Tabs Een rij met tabs is een populaire variant van een navigatiestructuur aan de bovenkant van de pagina. Deze tabbalk is herkenbaar en eenvoudig te gebruiken voor de navigatie over uw website. Tabs zijn handig te gebruiken voor de navigatie over een website, want ■<br />
<br />
■<br />
<br />
■<br />
<br />
tabs spreken voor zich. Zelfs een beginnende websurfer herkent de tabbalk. De meeste mensen hebben wel eens met tabs gewerkt in een multomap, een agenda of in een computerprogramma. tabs zijn opvallend. Bij het scannen van de pagina valt de tabbalk meteen op en dat is goed, want de primaire navigatiestructuur is daardoor duidelijk te zien op de webpagina. tabs geven de illusie van een fysieke omgeving: de actieve tab komt ‘naar voren’. Dat is goed herkenbaar: er ‘gebeurt iets’ na een klik op een tab.<br />
<br />
Gebruikt u tabs als navigatiestructuur, ontwerp uw webpagina’s dan zodanig dat op elke webpagina een actieve tab is geselecteerd. Op de homepage kan dat de tab Home zijn.<br />
<br />
HOOFDSTUK 2 | Algemeen: site-ontwerp<br />
<br />
49<br />
<br />
webusab-01.qxd<br />
<br />
10-2-03<br />
<br />
14:52<br />
<br />
Page 50<br />
<br />
FIGUUR 2.14 | Proxis maakt gebruik van een navigatiestructuur aan de bovenkant van de pagina waarbij tabs worden gebruikt<br />
<br />
2.6.3 De navigatiestructuur aan de zijkant van de pagina U kunt er ten slotte voor kiezen de navigatiestructuur vorm te gegeven in een smalle strook aan de zijkant van de webpagina. De navigatielinks staan in een menu boven elkaar als de treden van een ladder. Voor de toepassing van deze navigatiestructuur wordt de webpagina over de gehele lengte in twee of drie kolommen verdeeld. De breedste kolom is de strook in het midden, waarop de inhoud van de webpagina wordt geplaatst. Deze navigatiestructuur staat in landen waar tekst op een pagina van links naar rechts wordt gelezen, meestal aan de linkerzijde van de pagina. Soms staat aan de rechterzijde een tweede rij met advertenties en andere externe hyperlinks.<br />
<br />
FIGUUR 2.15 | De sectie Economie van de nieuwssite nu.nl; dit is een voorbeeld van een website met de navigatiestructuur aan de zijkant van de pagina<br />
<br />
50<br />
<br />
HOOFDSTUK 2 | Algemeen: site-ontwerp<br />
<br />
webusab-01.qxd<br />
<br />
10-2-03<br />
<br />
14:52<br />
<br />
Page 51<br />
<br />
Welke van deze drie navigatiestructuren u ook kiest, plaats deze altijd consequent op alle pagina’s van uw website. De bezoeker van uw website verwacht dit. Het is natuurlijk niet zo dat hij zich letterlijk afvraagt ‘waar is de primaire navigatiestructuur?’ Hij is echter op veel andere websites gewend geraakt zich over de website te kunnen voortbewegen door gebruik te maken van een soort bij de website meegeleverde cockpit. Plaats deze cockpit, uw primaire navigatiestructuur, bij voorkeur steeds op dezelfde positie en beslist met dezelfde tekst. U geeft de bezoeker van uw website hiermee houvast en u voorkomt onnodige verwarring tijdens het navigeren over uw website.<br />
<br />
2.6.4 Plaatsbepaling in de navigatiestructuur In de navigatiestructuur kan de bezoeker van uw website aan het uithangbord zien op welke website hij is. De hyperlinks in de navigatiestructuur maken vervolgens duidelijk waarheen hij op de website kan navigeren. Dit is in de voorgaande paragrafen besproken. Door enkele eenvoudige toevoegingen aan de navigatiestructuur kunt u de bezoeker daarnaast helpen zijn plaats te bepalen op uw website. De vraag ‘waar ben ik’ wordt zodoende beantwoord.<br />
<br />
U bevindt zich hier<br />
<br />
FIGUUR 2.16 | Op een stadsplattegrond staat altijd de aanduiding ‘u bevindt zich hier’; probeer dergelijke aanwijzingen ook in uw website te verwerken<br />
<br />
Accenten aanbrengen U kunt de bezoeker met een accent in de navigatiestructuur laten zien waar hij zich bevindt op uw website. Het actieve tabblad in de navigatiestructuur met tabbladen is een goed voorbeeld van zo’n accent. In elke navigatiestructuur zijn accenten mogelijk die de locatie van de pagina binnen de website benadrukken. Een pijltje, een afwijkende kleur of grotere en vette letters binnen een navigatiestructuur kunnen tonen welke pagina of sectie in beeld is. Het lokale accent kunt u aanvullen met een opvallende paginatitel, waar nodig aangevuld met een korte omschrijving van de inhoud van de webpagina.<br />
<br />
HOOFDSTUK 2 | Algemeen: site-ontwerp<br />
<br />
51<br />
<br />
webusab-01.qxd<br />
<br />
10-2-03<br />
<br />
14:52<br />
<br />
Page 52<br />
<br />
FIGUUR 2.17 | De pagina over natuur & milieu op de site van Trouw geeft de plaatsbepaling op de website aan met twee duidelijke accenten: een opvallende paginatitel en een afwijkende kleur in de navigatiestructuur<br />
<br />
Broodkruimels In een sprookje maken Hans en Grietje een spoor van broodkruimels om daarlangs later hun weg terug te kunnen vinden. Een dergelijk spoor van ‘broodkruimels’ (Engels: breadcrumbs) kunt u ook op een webpagina trekken. Daarmee schetst u eenvoudig de structuur van uw website, vanuit het perspectief van de webpagina waarop u deze regel met broodkruimels plaatst. U laat zodoende de structuur van uw website zien: vanaf de homepage klik voor klik naar de huidige pagina. Dit is een handige aanvulling op uw primaire navigatiestructuur, vooral voor bezoekers die met een hyperlink vanaf een andere website of via een zoekmachine direct op een dieper in uw website gelegen webpagina terecht zijn gekomen. ■ ■<br />
<br />
■ ■<br />
<br />
52<br />
<br />
De beste positie voor de broodkruimels is boven in de webpagina. U kunt kleine letters gebruiken, maar geef wel de laatste kruimel vette letters of een opvallende kleur. Deze broodkruimel geeft immers de huidige positie aan. Zet een teken tussen de kruimels om de volgorde aan te duiden, bijvoorbeeld een punthaak of een rechtsgericht pijltje. De tekst van de overige kruimels beschrijft een bovenliggende webpagina. Maakt u van deze tekst een hyperlink, dan wordt het spoor van broodkruimels naast hulpmiddel voor de positiebepaling binnen in de website ook een handig hulpmiddel bij de navigatie.<br />
<br />
HOOFDSTUK 2 | Algemeen: site-ontwerp<br />
<br />
webusab-01.qxd<br />
<br />
10-2-03<br />
<br />
14:52<br />
<br />
Page 53<br />
<br />
FIGUUR 2.18 | Op greenpeace.nl wordt bovenin gebruikgemaakt van een spoor ‘broodkruimels’ dat aangeeft waar deze pagina in de structuur van de website is geplaatst; met een klik op een kruimel kan de bezoeker direct naar een bovenliggende webpagina surfen<br />
<br />
2.6.5 Navigeren via uitklapmenu’s? Wat in de praktijk regelmatig voorkomt, is dat delen van de primaire navigatie worden vormgegeven via een uitklapmenu (ook wel pull-down menu of drop-down menu, zie figuur 2.19). Soms worden hiervoor de standaard HTML-selectielijsten gebruikt die worden gecodeerd via <select>...</select>, maar vaak worden ook ingenieuze JavaScript-menu’s geprogrammeerd met ontsnappingsroutines voor allerlei browserversies van diverse fabrikanten. ABN-AMRO Woningcorporatie SCW<br />
<br />
ANWB FIGUUR 2.19 | Op veel sites worden uitklapmenu’s gebruikt als primaire navigatie, vaak is dit echter geen goede keuze<br />
<br />
HOOFDSTUK 2 | Algemeen: site-ontwerp<br />
<br />
53<br />
<br />
webusab-01.qxd<br />
<br />
10-2-03<br />
<br />
14:52<br />
<br />
Page 54<br />
<br />
Laten we maar met de deur in huis vallen: uitklapmenu’s zijn wat ons betreft ongeschikt voor primaire navigatie. Ze kunnen prima ondersteunend werken, maar als middel om de hoofdsecties van een site te bereiken kunt u ze beter niet gebruiken. Enkele redenen voor deze bewering zijn: ■<br />
<br />
■<br />
<br />
■<br />
<br />
Het doel van de homepage en de navigatiestructuur is om rechtstreeks zoveel mogelijk inzicht te geven in de opbouw van de site. Uitklapmenu’s verbergen in eerste instantie hun inhoud. Pas na een klik op het menu (of in sommige gevallen al bij aanwijzen – een mouseover) wordt het menu geopend en wordt de inhoud zichtbaar. Veel gebruikers zullen dit niet doen en tijdens het vluchtig scannen van de pagina valt het uitklapmenu ze vaak niet eens op. Menu’s die in JavaScript zijn geprogrammeerd, werken zelden in alle versies van de browser. Bij nieuwe browserversies moet de programmeur vaak ook het menu aanpassen, maar dat gebeurt in de praktijk zelden. De pagina’s zien er daardoor vaak niet goed uit of het menu werkt niet zoals verwacht. Gebruikers met een handicap kunnen vaak slecht overweg met uitklapmenu’s. Het is bijvoorbeeld moeilijk om de muis precies zo te positioneren dat het menu wordt geopend en spraakbrowsers of screenreaders (zie ook hoofdstuk 6) kunnen niet met de inhoud van het menu overweg.<br />
<br />
Kortom, het is beter nog eens na te denken over de structuur van de navigatie of de indeling van de site voordat een uitklapmenu wordt ingezet. Vaak zijn er voldoende alternatieven te verzinnen.<br />
<br />
Wanneer wel uitklapmenu’s? Er is geen reden om uitklapmenu’s altijd terzijde te schuiven, maar voor de primaire navigatie van een website zijn ze minder geschikt. U kunt menu’s bijvoorbeeld wel gebruiken voor: ■ ■<br />
<br />
lange keuzelijsten, bijvoorbeeld een lijst met landen, maanden van het jaar of vervaldata bij credit cards; secundaire selecties binnen een hoofdcategorie, als er niet-kritieke keuzes gemaakt moeten worden (zie figuur 2.20).<br />
<br />
FIGUUR 2.20 | Bij het downloaden van drivers vanaf www.hp.nl is goed gebruikgemaakt van uitklapmenu’s ter ondersteuning van de taak die de gebruiker uitvoert<br />
<br />
54<br />
<br />
HOOFDSTUK 2 | Algemeen: site-ontwerp<br />
<br />
webusab-01.qxd<br />
<br />
10-2-03<br />
<br />
2.7<br />
<br />
14:52<br />
<br />
Page 55<br />
<br />
De homepage De homepage is de meest waardevolle pagina van uw website. De homepage is uw beste kans om bezoekers ook daadwerkelijk over uw website te laten surfen. Een homepage is tegenwoordig voor bedrijven ook het middel om kwaliteit te tonen. Het webadres wordt gemeld in reclame. Klanten kijken eerst even op de homepage van een bedrijf, ook al doen ze hun bestellingen niet via internet. De homepage krijgt bij het bouwen van een website dan ook terecht de meeste aandacht. De homepage vervult drie belangrijke functies op uw website: ■ ■<br />
<br />
■<br />
<br />
De homepage is de hoofdingang van uw website. Op de homepage kan de bezoeker eenvoudig vinden wat hij zoekt op uw website. De homepage is uw etalage. Op de homepage kan de bezoeker vinden wat hij niet zoekt, maar wat u vindt dat hij zou moeten willen zoeken op uw website. De homepage is veelal uw enige kans om een goede indruk te maken. Op de homepage krijgt de bezoeker vertrouwen in uw website door de combinatie van een optimaal gebruiksgemak en een passend design. Vergeet niet: een andere website, waaronder die van uw concurrenten, is slechts één klik van uw homepage verwijderd.<br />
<br />
Is dit een homepage? Soms treft de bezoeker na het typen van het webadres van een website een andere pagina dan de homepage. U kent ze wel: van die introductiepagina’s met veel ‘bewegende grafische delen’ en nauwelijks meer informatie dan de naam van het bedrijf. Dit worden ook wel splash screens genoemd. U moet dan irritant lang wachten op de echte homepage, of nog een keer met de muis klikken als u al bekend bent met de Engelse woorden ‘Skip intro’. Soms krijgt u inhoudsloze tekst in beeld: een ‘Welkom’-boodschap met louter vrolijke blabla, een ingewikkelde tekst met de ‘Missie’ van het bedrijf of een foto van de directeur, waarmee hij laat zien dat hij net zijn tanden heeft gepoetst. Soms is er zelfs helemaal geen homepage op de website. U treft dan slechts de mededeling dat de website nog ‘Onder constructie’ is. De bezoeker zal zich hieraan ergeren en dat is iets wat u altijd moet voorkomen.<br />
<br />
De homepage wordt geopend wanneer de bezoeker het webadres of URL (www.uwbedrijf.nl) van uw website typt in het adresveld van de browser. Ook al komt de bezoeker uw website binnen via een andere pagina, hij neemt daarna meestal ook een kijkje op uw homepage. Het is de meest bekeken pagina op uw website. De ontwerpers willen er graag iets heel moois van maken. Bij de website van een bedrijf vecht iedereen binnen het bedrijf om een plekje op de homepage,<br />
<br />
HOOFDSTUK 2 | Algemeen: site-ontwerp<br />
<br />
55<br />
<br />
webusab-01.qxd<br />
<br />
10-2-03<br />
<br />
14:52<br />
<br />
Page 56<br />
<br />
FIGUUR 2.21 | De CNV Publieke Zaak opent met slechts een langdurig bewegende afbeelding van een kompas; zo moet het dus niet!<br />
<br />
liefst ergens in de bovenste helft van de pagina. Hierdoor raken de doelen van de homepage nogal eens buiten de aandacht. Het is daarom goed om duidelijk voor ogen te hebben wat u kunt doen om vanuit het perspectief van de bezoeker een goed bruikbare homepage te maken. Een goede homepage is natuurlijk geen garantie voor een goede website. Omgekeerd kunnen we wat stelliger zijn. Wanneer uw homepage niet goed is, maakt het niet meer zoveel uit of uw website goede inhoud heeft en gebruikersvriendelijk is ontworpen. Uw homepage is de meest bezochte pagina van uw website. U kunt uw homepage ook tot de meest gebruikte pagina van uw website maken.<br />
<br />
2.7.1 Leg uit wie u bent en wat u doet Op uw homepage is alleen het uithangbord in de navigatiestructuur niet voldoende. De bezoeker kijkt op uw homepage om te zien wat voor website het is. Veel bezoekers zullen uw website nog niet kennen. U krijgt ook bezoekers die zelfs nog nooit van uw bedrijf gehoord hebben. Op uw homepage verwachten zij de nodige aanvullende uitleg in een korte en duidelijke tekst. Meer gedetailleerde informatie over uw bedrijf kunt u presenteren op een aparte servicepagina die via een link in de navigatiestructuur gemakkelijk te vinden is.<br />
<br />
56<br />
<br />
HOOFDSTUK 2 | Algemeen: site-ontwerp<br />
<br />
webusab-01.qxd<br />
<br />
10-2-03<br />
<br />
14:52<br />
<br />
Page 57<br />
<br />
2.7.2 Leg uit wat er op uw website is te vinden en is te doen Op uw homepage kan de bezoeker in de primaire navigatiestructuur zien hoe uw website zo ongeveer in elkaar zit. Voor veel bezoekers zal de tekst van de hyperlinks onvoldoende informatie geven. Op de homepage verwacht hij meer uitleg over de secties en de service die op uw website te vinden zijn. Geef die informatie in korte en duidelijke tekstblokken. Omschrijft u op de homepage kort en duidelijk uw topprioriteiten op de website met een link direct naar de bijbehorende webpagina, dan helpt u de bezoeker ook te vinden waar hij wellicht nog niet naar op zoek was. Benadruk wat op uw website voor de bezoeker van belang is, het is een aansprekende manier om duidelijk te maken waarin uw website verschilt van die van uw concurrenten.<br />
<br />
2.7.3 Help de bezoeker te vinden wat hij nodig heeft Ook al zijn uw navigatiestructuur en de omschrijving van de onderdelen op uw website nog zo helder, er zullen altijd bezoekers zijn die gebruik willen maken van een zoekdienst of servicepagina’s. Dit kunt u bieden met een zoekveld-metknop boven in de homepage waarmee de bezoeker kan zoeken op uw website. U kunt helpen bij het zoeken met herkenbare links naar informatieve servicepagina’s. In de volgende paragrafen wordt meer in detail beschreven hoe u op deze wijze uw bezoekers van dienst kunt zijn.<br />
<br />
2.7.4 Geef het laatste nieuws Elke website heeft nieuws te melden. Een homepage met gedateerde informatie of een homepage die er bij een volgend bezoek, weken later, nog precies hetzelfde uitziet, maakt een dode indruk. Nieuws op de homepage geeft een levendige uitstraling aan de hele website. Geef daarom op de homepage een altijd actueel overzicht van de nieuwste informatie op uw website. Denk bijvoorbeeld aan het in het zonnetje zetten van de nieuwste producten of ontwikkelingen binnen uw organisatie. Bezoekers verwachten dat op de homepage. Hebt u regelmatig nieuws te melden, biedt dan direct nabij het nieuwsblok op uw homepage een link naar een archiefpagina met een chronologische weergave van eerder op de homepage getoond nieuws. Anders kunnen gebruikers bij een volgend bezoek juist teleurgesteld zijn, omdat een interessant artikel dat eerder op de homepage te lezen was nu onvindbaar blijkt. Een archief is in dat geval een goede service.<br />
<br />
HOOFDSTUK 2 | Algemeen: site-ontwerp<br />
<br />
57<br />
<br />
webusab-01.qxd<br />
<br />
10-2-03<br />
<br />
14:52<br />
<br />
Page 58<br />
<br />
2.7.5 Een voorproefje van uw website De homepage is méér dan een beginpunt. U moet in aanvulling op de navigatiestructuur op de homepage ook laten zien wat uw website de bezoeker daadwerkelijk te bieden heeft. Toon op de homepage alvast stukjes van de belangrijkste inhoud van uw website. Plaats bijvoorbeeld ook ‘lokkertjes’ op de homepage, zoals een directe link naar een downloadpagina met gratis informatieve documenten of software. Ze werken altijd goed om de bezoeker te stimuleren om een kijkje dieper in uw website te nemen. De voorgaande paragrafen hebben een overzicht van elementen gegeven die op elke goede homepage terugkomen. Daarnaast is het een goed idee de bezoeker een handje te helpen bij het zoeken naar informatie op uw website. Hiervoor kunt u in de navigatiestructuur een zoekdienst en servicepagina’s opnemen.<br />
<br />
2.8<br />
<br />
Een zoekdienst op de website De zoekmachine hoort bij internet. Het is een van de eerste ‘webdingen’ die de beginner op internet leert gebruiken. Veel bezoekers verwachten op uw website een zoekdienst: een zoekveld waarin zij tekst typen met een knop ernaast waarop zij vervolgens klikken. Zij krijgen dan een zoekresultatenpagina in beeld waarop hyperlinks staan naar pagina’s op uw website waarop de in het zoekveld getypte tekst is gevonden.<br />
<br />
De 50%-regel Hyperlinks zijn de basis van elke webpagina. Niet iedere websurfer heeft echter het geduld om de hyperlinks op een pagina goed te bestuderen en zo zijn weg over de site te zoeken. Uit gebruikerstesten blijkt dat maar liefst 50% van de bezoekers het eerst op zoek gaat naar een zoekfunctie waarmee ze binnen de site op trefwoord kunnen zoeken. Zo hopen ze direct, snel resultaat te krijgen in plaats van via tientallen hyperlinks op zoek te moeten gaan naar informatie. Met andere woorden, ongeveer de helft van de bezoekers vertoont ‘zoek-georiënteerd gedrag’ op een website. De andere helft van de bezoekers vertoont ‘link-georiënteerd gedrag’. Tracht aan beide typen bezoekers tegemoet te komen door zowel hyperlinks als een zoekdienst aan te bieden op uw site.<br />
<br />
Om op uw website te vinden wat zij willen hebben, maken veel bezoekers liever gebruik van een zoekdienst, dan via links door uw site te bladeren. Zodra uw site groter wordt dan drie of vier pagina’s, is het daarom een goed idee een zoekdienst<br />
<br />
58<br />
<br />
HOOFDSTUK 2 | Algemeen: site-ontwerp<br />
<br />
webusab-01.qxd<br />
<br />
10-2-03<br />
<br />
14:52<br />
<br />
Page 59<br />
<br />
op uw homepage en bij voorkeur ook op de andere pagina’s van uw website aan te bieden. U kunt uw zoekdienst goed zichtbaar en eenvoudig in gebruik maken: ■ ■<br />
<br />
■ ■ ■<br />
<br />
■<br />
<br />
Plaats het zoekveld plus zoekknop bovenin (liefst in het midden of rechts) op elke webpagina. Maak het zoekveld breed: minstens 25 tekens. Bezoekers willen graag de ruimte hebben om te kunnen zien en te kunnen corrigeren wat ze in het veld typen. Gebruik als opschrift voor de button het woord Zoek of Zoeken (maar: ook Go wordt veel gebruikt). Bezoekers weten intuïtief hoe de functie werkt. Geef geen instructies. Bij eenvoudig zoeken heeft de bezoeker geen uitleg nodig. Plaats slechts één eenvoudig zoekveld, zonder keuzeopties. Extra keuzeopties (bijvoorbeeld in een uitklapmenu) zijn voor veel bezoekers alleen maar verwarrend. Leg de verantwoordelijkheid voor de zoekresultaten bij de zoekdienst, niet bij de gebruiker! De resultatenpagina is wel een goede plaats om alsnog meer zoekopties te bieden (Uitgebreid zoeken of Geavanceerd zoeken). Laat de zoekmachine standaard op uw gehele website zoeken en niet in één sectie.<br />
<br />
FIGUUR 2.22 | De website www.sportverzorging.tk maakt gebruik van de externe zoekdienst Atomz Search<br />
<br />
HOOFDSTUK 2 | Algemeen: site-ontwerp<br />
<br />
59<br />
<br />
webusab-01.qxd<br />
<br />
10-2-03<br />
<br />
14:52<br />
<br />
Page 60<br />
<br />
Hebt u geen scripts voor een zoekdienst beschikbaar op uw internetserver, dan kunt u gebruikmaken van (gratis) zoekmachines die elders op internet staan. Veel websites maken bijvoorbeeld gebruik van de zoekdienst van Google (www.google.com), waarbij een combinatie wordt geboden tussen zoeken op de website en globaal zoeken op heel het web. Globaal zoeken is echter een extra optie die weinig toevoegt aan uw website. Uw site is geen zoekmachine, daarvoor surft de bezoeker niet naar uw pagina’s. Atomz Search (www.atomz.com) biedt u de mogelijk een zoekdienst te maken waarmee de bezoeker alleen op uw website kan zoeken. Hier kunt u de zoekresultatenpagina geheel op maat aanpassen aan de opmaak van uw eigen website. De bezoeker van uw website merkt daardoor niet dat hij door het gebruik van uw zoekmachine tussendoor terecht is gekomen op een webpagina op de website van Atomz, waarop hyperlinks worden getoond naar de op uw website gezochte informatie. Dit is minder verwarrend en daardoor gemakkelijker in het gebruik.<br />
<br />
2.8.1 Zoekveld of zoeklink? Op veel websites is wel een zoekdienst aanwezig, maar gaat deze verborgen achter een link Zoeken die ergens in de primaire navigatiestructuur is opgenomen. Op zich is dit ook een goede techniek, maar veel gebruikers zullen de link naar de zoekpagina over het hoofd zien. Zij zoeken naar een tekstvak voor een trefwoord, dat zijn ze immers gewend van honderden andere sites en het is het meest makkelijk in gebruik. Het is geen goed teken als bezoekers eerst in de navigatiestructuur moeten zoeken naar de functie Zoeken...<br />
<br />
FIGUUR 2.23 | De zoekfunctie van Academic Service gaat verscholen achter een onopvallende link Zoeken in de navigatiestructuur; het is beter de zoekdienst rechtstreeks op de pagina te plaatsen en op een detailpagina de meer uitgebreide zoekfuncties aan te bieden<br />
<br />
2.9<br />
<br />
Servicepagina’s die op elke website thuishoren U kunt de bezoeker van uw website ook van gezochte informatie voorzien via informatieve servicepagina’s. Zij verwachten deze pagina’s ook op uw website aan te treffen. Er zijn enkele servicepagina’s waarmee de meeste bezoekers op andere websites vertrouwd zijn geraakt.<br />
<br />
60<br />
<br />
HOOFDSTUK 2 | Algemeen: site-ontwerp<br />
<br />
webusab-01.qxd<br />
<br />
10-2-03<br />
<br />
14:52<br />
<br />
Page 61<br />
<br />
2.9.1 Site map, de wegwijzer voor uw site In een boek gebruikt men de inhoudsopgave en de index om een indruk te krijgen van de inhoud. Op een website vervult de wegwijzer of site map deze functie. De wegwijzer biedt een overzicht van de structuur van uw website. Een goede site map bevat de secties en de aparte webpagina’s, elk voorzien van een hyperlink naar die pagina. Een verschil is hier de hyperlink. In een boek staan paginanummers in de inhoudsopgave om door het boek te navigeren, met de wegwijzer kunt u met een hyperlink directe toegang bieden tot een pagina op uw website. Geef de link naar deze pagina de naam Wegwijzer of Site map.<br />
<br />
2.9.2 Bedrijfsinformatie Voor de bezoeker die meer wil weten over uw bedrijf is het prettig als alle informatie over uw bedrijf op één servicepagina is gegroepeerd. Veel bezoekers weten weinig of niets over uw bedrijf. Vermijd daarom op deze pagina bedrijfsjargon. Informatie over uw bedrijf vereist een zorgvuldige redactie om de tekst echt voor iedere bezoeker begrijpelijk te maken. Bedenk ook dat op deze pagina geen intern gerichte informatie, organisatieschema’s of statuten thuishoren. Geef de link naar deze pagina de naam Over ons of Over naam_bedrijf. Een voorbeeld van een goede pagina met bedrijfsinformatie wordt getoond in figuur 2.24. Proxis.be heeft alle informatie over het bedrijf zelf en nuttige gegevens voor klanten goed gegroepeerd en verdeeld in logische categorieën.<br />
<br />
FIGUUR 2.24 | Goed gegroepeerde bedrijfsinformatie biedt snel antwoord op alle mogelijke vragen<br />
<br />
HOOFDSTUK 2 | Algemeen: site-ontwerp<br />
<br />
61<br />
<br />
webusab-01.qxd<br />
<br />
10-2-03<br />
<br />
14:52<br />
<br />
Page 62<br />
<br />
2.9.3 Contact Elke goede website zou een pagina met contactgegevens over de organisatie moeten bevatten. Deze pagina bevat contactinformatie over uw bedrijf, zoals bezoekadressen, postadressen, telefoonnummers en e-mailadressen. U kunt deze pagina koppelen aan de servicepagina met bedrijfsinformatie. Het is echter een aparte servicepagina voor de bezoeker die contact zoekt. Behalve e-mailadressen en telefoonnummers is het gebruikersvriendelijk om op deze servicepagina ook een eenvoudig webformulier te plaatsen waarmee de bezoeker direct via de browser een bericht kan sturen. Een webformulier kan de bezoeker immers overal invullen. Het maakt dan niet uit of uw bezoeker thuis achter zijn eigen computer zit of op een andere plaats, bijvoorbeeld op het werk of in een internetcafé. Geef de link naar deze pagina bij voorkeur de eenvoudige maar duidelijke naam Contact.<br />
<br />
FIGUUR 2.25 | De website van De Volkskrant heeft van de pagina ‘foutmelding 404’ een bruikbare servicepagina gemaakt<br />
<br />
2.9.4 FAQ Op deze pagina staan de antwoorden op de vaak door uw bezoekers aan u gestelde vragen. FAQ is een afkorting van het Engelse ‘frequently asked questions’, maar ook op het Nederlandse web een begrepen afkorting. Op deze pagina kunt u vragen overzichtelijk weergeven in de vorm van hyperlinks naar de antwoorden. Uw bezoekers verwachten op één vraag gewoon één kort en duidelijk antwoord. Hebt u een groot aantal veelgestelde vragen, dan kunt u deze voor het behoud van<br />
<br />
62<br />
<br />
HOOFDSTUK 2 | Algemeen: site-ontwerp<br />
<br />
webusab-01.qxd<br />
<br />
10-2-03<br />
<br />
14:52<br />
<br />
Page 63<br />
<br />
De verborgen servicepagina Wanneer een websurfer in het adresveld boven in de browser een webadres (URL) van een pagina typt, krijgt hij soms de foutmelding: ‘HTTP-fout 404 - Bestand niet gevonden’. Dit is standaard een pagina die de browser in beeld brengt wanneer het webadres niet bestaat. Dit kan bijvoorbeeld gebeuren wanneer de websurfer een typefout heeft gemaakt in het adresveld of de makers de pagina hebben verplaatst of verwijderd. Ook komt een dergelijke melding in beeld wanneer iemand een typefout heeft gemaakt in een hyperlink die naar een pagina op uw website verwijst. Het is dan een zogenoemde ‘dode link’ geworden. U kunt op uw website een speciale servicepagina zetten die in beeld komt in de plaats van de standaardfoutmelding van de browser; een verborgen servicepagina die u nergens in de navigatiestructuur op uw website meldt. Op deze servicepagina ziet de bezoeker de vertrouwde lay-out en navigatiestructuur van uw website. U kunt hier uitleggen wat er gebeurd kan zijn, de gelegenheid bieden een ‘dode link’ aan u te melden en de weg wijzen naar een van de andere pagina’s op uw website. In figuur 2.19 ziet u een voorbeeld van een dergelijke servicepagina. Hierop heeft De Volkskrant een wedstrijd geplaatst, waarmee deze pagina naast een weg terug in de website ook nog eens een aardigheidje te bieden heeft.<br />
<br />
overzicht op onderwerp of thema in aparte rubrieken op de pagina plaatsen. De vragen en rubrieken boven in deze pagina worden het eerst bekeken. Plaats daarom de meest populaire vragen boven in de rij! Hiermee vergroot u de kans dat de meeste bezoekers op deze pagina een antwoord vinden op hun vraag. Bied de bezoeker die geen antwoord kan vinden op een vraag, met een koppeling aan uw contactpagina de gelegenheid daarover met u contact op te nemen. Geef de link naar deze pagina de naam Faq of FAQ.<br />
<br />
2.9.5 Routebeschrijving Als bezoekers behalve via het web ook persoonlijk met u of uw organisatie in contact kunnen treden, is het een goed idee een routebeschrijving op de website te plaatsen. Dit zal niet voor alle websites nodig zijn, typische e-commercesites als Bol.com, Proxis.be en Albert.nl zijn ‘web-only’ bedrijven. Voor een bezoekje aan het Rijksmuseum is dergelijke informatie natuurlijk wel weer onontbeerlijk. Plaats op deze servicepagina een routebeschrijving naar uw vestiging(en). Houd er bovendien rekening mee dat deze pagina vaak geprint zal worden. Plaats daarom bij de tekst geen afleidende afbeeldingen, hooguit een afbeelding van een stadsplattegrond. Overweeg wel om deze pagina met hyperlinks te koppelen aan een van de op internet beschikbare interactieve routeplanners en aan de reisinformatie van Openbaar Vervoerbedrijven. Geef de link naar deze pagina een begrijpelijke naam als Route of Bereikbaarheid.<br />
<br />
HOOFDSTUK 2 | Algemeen: site-ontwerp<br />
<br />
63<br />
<br />
webusab-01.qxd<br />
<br />
10-2-03<br />
<br />
14:52<br />
<br />
Page 64<br />
<br />
FIGUUR 2.26 | Een goede FAQ geeft bovenin het doel van de FAQ aan en plaatst de vragen als hyperlink boven in de pagina; verder naar beneden worden de antwoorden gegeven. Dit had in deze FAQ duidelijker gekund, nu lopen vragen en rubrieken door elkaar<br />
<br />
FIGUUR 2.27 | Het Rijksmuseum geeft aan hoe het pand bereikbaar is, dit is goed. Het kaartje zelf had echter wel wat meer overzicht mogen bieden in relatie tot de Amsterdamse binnenstad; ook het kaartje dat verschijnt na een klik op Met de auto laat weinig overzicht zien<br />
<br />
2.9.6 Nieuws Uw nieuws heeft een vaste plek op uw homepage. Organisaties die regelmatig nieuws te melden hebben doen er goed aan al dit nieuws voor de geïnteresseerde bezoeker te verzamelen op een aparte servicepagina. Plaats onder het nieuwsblok op uw homepage en onder de nieuwsberichten op uw overige webpagina’s een link naar deze servicepagina. De presentatie van het nieuws op deze pagina doet u eenvoudig in chronologische volgorde, met de meest recente berichten boven-<br />
<br />
64<br />
<br />
HOOFDSTUK 2 | Algemeen: site-ontwerp<br />
<br />
webusab-01.qxd<br />
<br />
10-2-03<br />
<br />
14:52<br />
<br />
Page 65<br />
<br />
aan. Hebt u veel nieuws op uw website te melden, dan kunt u overwegen gebruik te maken van een database waarin u nieuwsberichten opslaat. Hiermee kunt u bezoekers een specifieke zoekdienst bieden naar alleen uw nieuwsberichten. Geef de link naar deze pagina de naam Archief of Nieuwsarchief.<br />
<br />
2.9.7 Persberichten Journalisten maken veel en gericht gebruik van internet. Wanneer uw organisatie contacten onderhoudt met journalisten, maak dan voor hen deze servicepagina met links naar uw persberichten en contactinformatie over uw woordvoerders. Geef de link naar deze pagina de naam Persberichten of vergelijkbaar.<br />
<br />
2.9.8 Vacatures Zoekt uw bedrijf regelmatig nieuwe medewerkers, dan is deze servicepagina een goedkope en effectieve aanvulling op uw overige personeelswerving. U gebruikt deze pagina om bezoekers te wijzen op vacatures bij uw bedrijf. Zoekt een bezoeker naar een baan, dan is dit de pagina die hij verwacht aan te treffen op uw website. Zorg ervoor dat er naast een beschrijving van openstaande vacatures meteen ook de contactinformatie over uw personeelsafdeling aanwezig is. Geef de link naar deze pagina de naam Vacatures of Werken bij naam bedrijf. In België kan eventueel ook gebruik worden gemaakt van het daar meer ingeburgerde Jobs. Gebruik liever géén teksten als Mogelijkheden (te vaag), Uw Carrière (te ronkend) of Banen (te algemeen).<br />
<br />
2.9.9 Privacy statement en Disclaimer Wanneer u persoonlijke gegevens vraagt van uw bezoekers (bijvoorbeeld om bestellingen af te handelen), is het een goed idee om de klanten ook te laten weten op welke wijze u met die gegevens omgaat. De standaardwijze op internet is om hiervoor een link Privacy statement of Uw privacy te plaatsen. Hoewel onderzoek uitwijst dat gebruikers deze informatie zelden ook daadwerkelijk lezen, geeft het aan dat u over de verwerking van deze gegevens hebt nagedacht en dat u er zorgvuldig mee omgaat (mits de privacyverklaring ook nog wat nuttige tekst bevat natuurlijk). Bovendien kan het u van pas komen, mocht het in geschillen tot een juridische procedure komen. Indien uw bedrijf eventueel in juridische procedures aan te vechten informatie geeft op de website, doet u er verstandig aan om achter de hyperlink Disclaimer duidelijk te omschrijven waar u zich voor aansprakelijk acht. U staat dan sterker in conflictsituaties.<br />
<br />
HOOFDSTUK 2 | Algemeen: site-ontwerp<br />
<br />
65<br />
<br />
webusab-01.qxd<br />
<br />
10-2-03<br />
<br />
14:52<br />
<br />
Page 66<br />
<br />
Tot slot In de voorgaande paragrafen zijn enkele veelgebruikte servicepagina’s genoemd. Kunt u dergelijke informatie verschaffen, maak dan gebruik van deze servicepagina’s. Maak een keuze welke servicepagina’s u een vaste plek geeft in uw primaire navigatiestructuur. Doorgaans kunt u daarin naast de secties hooguit drie of vier hyperlinks naar servicepagina’s plaatsen. Hebt u meer servicepagina’s nodig, dan kunt u groeperen: plaats bijvoorbeeld de link Route op de servicepagina met contactinformatie of geef de links Persberichten en Vacatures een plek op de servicepagina met bedrijfsinformatie.<br />
<br />
FIGUUR 2.28 | Bij StepStone worden op de servicepagina Over StepStone vier diensten gecombineerd; hierdoor blijft de primaire navigatiestructuur (met de kenmerkende kiezelstenen) overzichtelijk<br />
<br />
In dit hoofdstuk zijn usability-aspecten van het algemene site-ontwerp behandeld. Hierbij hebben we aandachtspunten gegeven voor het algemene ontwerp van een gebruikersvriendelijke website. Een goede website laat de bezoekers als vanzelfsprekend over de site navigeren. De bezoeker weet bij een gebruikersvriendelijk opgezette website direct op welke site hij is beland, waar hij zich binnen de site bevindt en waar hij naartoe kan surfen. Uiteraard is de homepage te allen tijde bereikbaar en is achtergrondinformatie over de site beschikbaar via allerhande servicepagina’s. In het volgende hoofdstuk wordt meer in detail beschreven wat u allemaal kunt doen om bij het ontwerp van een individuele webpagina het gebruiksgemak zo groot mogelijk te maken.<br />
<br />
66<br />
<br />
HOOFDSTUK 2 | Algemeen: site-ontwerp<br />
<br /> </div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal fade" id="report" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<form role="form" method="post" action="https://adoc.pub/report/algemeen-site-ontwerp" style="border: none;">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Report "ALGEMEEN: SITE-ONTWERP"</h4>
</div>
<div class="modal-body">
<div class="form-group">
<label>Your name</label>
<input type="text" name="name" required="required" class="form-control" />
</div>
<div class="form-group">
<label>Email</label>
<input type="email" name="email" required="required" class="form-control" />
</div>
<div class="form-group">
<label>Reason</label>
<select name="reason" required="required" class="form-control">
<option value="">-Select Reason-</option>
<option value="pornographic" selected="selected">Pornographic</option>
<option value="defamatory">Defamatory</option>
<option value="illegal">Illegal/Unlawful</option>
<option value="spam">Spam</option>
<option value="others">Other Terms Of Service Violation</option>
<option value="copyright">File a copyright complaint</option>
</select>
</div>
<div class="form-group">
<label>Description</label>
<textarea name="description" required="required" rows="3" class="form-control" style="border: 1px solid #cccccc;"></textarea>
</div>
<div class="form-group">
<div style="display: inline-block;">
<div class="g-recaptcha" data-sitekey="6LcEnMcZAAAAAFHzKKgaE-Qh57XzUTzpfRElD4dP"></div>
</div>
</div>
<script src='https://www.google.com/recaptcha/api.js'></script>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Send</button>
</div>
</form>
</div>
</div>
</div>
<script>
$(document).ready(function () {
var inner_height = $(window).innerHeight() - 250;
$('#pdfviewer').css({"height": inner_height + "px"});
});
</script>
<footer class="footer" style="margin-top: 60px;">
<div class="container-fluid">
Copyright © 2024 ADOC.PUB. All rights reserved.
<div class="pull-right">
<span><a href="https://adoc.pub/about">About Us</a></span> |
<span><a href="https://adoc.pub/privacy">Privacy Policy</a></span> |
<span><a href="https://adoc.pub/term">Terms of Service</a></span> |
<span><a href="https://adoc.pub/copyright">Copyright</a></span> |
<span><a href="https://adoc.pub/contact">Contact Us</a></span> |
<span><a href="https://adoc.pub/cookie_policy">Cookie Policy</a></span>
</div>
</div>
</footer>
<!-- Modal -->
<div class="modal fade" id="login" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close" on="tap:login.close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="add-note-label">Sign In</h4>
</div>
<div class="modal-body">
<form action="https://adoc.pub/login" method="post">
<div class="form-group">
<label class="sr-only" for="email">Email</label>
<input class="form-input form-control" type="text" name="email" id="email" value="" placeholder="Email" />
</div>
<div class="form-group">
<label class="sr-only" for="password">Password</label>
<input class="form-input form-control" type="password" name="password" id="password" value="" placeholder="Password" />
</div>
<div class="form-group">
<div class="checkbox">
<label class="form-checkbox">
<input type="checkbox" name="remember" value="1" />
<i class="form-icon"></i> Remember me
</label>
<label class="pull-right"><a href="https://adoc.pub/forgot">Forgot password?</a></label>
</div>
</div>
<button class="btn btn-primary btn-block" type="submit">Sign In</button>
</form>
</div>
</div>
</div>
</div>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-177279549-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-177279549-1');
</script>
<script src="https://adoc.pub/assets/js/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://adoc.pub/assets/css/jquery-ui.css">
<script>
$(function () {
$("#document_search").autocomplete({
source: function (request, response) {
$.ajax({
url: "https://adoc.pub/suggest",
dataType: "json",
data: {
term: request.term
},
success: function (data) {
response(data);
}
});
},
autoFill: true,
select: function( event, ui ) {
$(this).val(ui.item.value);
$(this).parents("form").submit();
}
});
});
</script>
<!-- cookie policy -->
<div id="ADOCPUB_cookie_box" style="z-index:99999; border-top: 1px solid #fefefe; background: #FFC107; width: 100%; position: fixed; padding: 5px 15px; text-align: center; left:0; bottom: 0;">
Our partners will collect data and use cookies for ad personalization and measurement. <a href="https://adoc.pub/cookie_policy" target="_blank">Learn how we and our ad partner Google, collect and use data</a>. <a href="#" class="btn btn-success" onclick="accept_ADOCPUB_cookie_box();return false;">Agree & close</a>
</div>
<script>
function accept_ADOCPUB_cookie_box() {
document.cookie = "ADOCPUB_cookie_box_viewed=1;max-age=15768000;path=/";
hide_ADOCPUB_cookie_box();
}
function hide_ADOCPUB_cookie_box() {
var cb = document.getElementById('ADOCPUB_cookie_box');
if (cb) {
cb.parentElement.removeChild(cb);
}
}
(function () {
var ADOCPUB_cookie_box_viewed = (function (name) {
var matches = document.cookie.match(new RegExp("(?:^|; )" + name.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, '\\$1') + "=([^;]*)"));
return matches ? decodeURIComponent(matches[1]) : undefined;
})('ADOCPUB_cookie_box_viewed');
if (ADOCPUB_cookie_box_viewed) {
hide_ADOCPUB_cookie_box();
}
})();
</script>
<!-- end cookie policy -->
</body>
</html>
