WEBSITE USABILITY. white-paper

WEBSITE USABILITY white-paper

Alle rechten voorbehouden Het is niet toegestaan deze white-paper aan derden te verstrekken of te verkopen. Het is niet toegestaan de inhoud van deze white-paper elders te publiceren zonder toestemming van de auteur. White-paper website usability v1.0 – oktober 2010

|

www.creartions.nl

White paper website usability | Inhoudsopgave 1.

Pagina ontwerp 1.1 Opmaak en vlakverdeling 1.2 Broncode 1.3 Aandachtspunten en adviezen

2.

Navigatie 2.1 Algemeen navigatiemenu en sub-navigatiemenu(s) 2.2 Aandachtspunten en adviezen

3.

Zoeken 3.1 Zoeken binnen je website 3.2 Aandachtspunten en adviezen

4.

Bedrijfsinformatie en contactmogelijkheden 4.1 Contact met de bezoekers van je website 4.2 Aandachtspunten en adviezen

5.

Afbeeldingen 5.1 Afbeeldingen op je website 5.2 Aandachtspunten en adviezen

6.

Zoekmachine robots en error pagina’s 6.1 Zoekmachine robots 6.2 Error pagina’s 6.3 Aandachtspunten en adviezen

7.

Inhoud / Content 7.1 Hyperlinks 7.2 Webteksten: duplicate content, grammatica, relevantie en inhoud 7.3 Webteksten: Broncode toepassingen 7.4 Zoekwoord dichtheid / Keyword density 7.5 Aandachtspunten en adviezen

8.

Handige website usability tools en programma’s

9.

Algemene usability tips: Wat je vooral moet vermijden bij het bouwen van je website

10. De voordelen van een gebruiksvriendelijke website 11. Website usability scan inclusief uitgebreide rapportage 12. White paper website usability 12.1 Over dit document 12.2 CreArtions Multimedia Design

White-paper website usability v1.0 – oktober 2010

|

www.creartions.nl

Pagina ontwerp

Opmaak en vlakverdeling 1.

Heeft de homepage hetzelfde ontwerp en indeling als de rest van de website?

2.

Is de website grafisch gezien aantrekkelijk voor je doelgroep?

3. Is er voldoende contrast tussen voor- en achtergrondkleuren? 4.

Wordt er een schreefloos lettertype gebruikt?

5.

Is er een duidelijk herkenbaar logo (bij voorkeur links bovenaan) aanwezig op de site?

6. Heeft de website een herkenbaar vormgegeven navigatiemenu? 7. Is er een logische verdeling tussen tekst en afbeeldingen? 8. Is er voldoende witruimte tussen tekst en afbeeldingen? 9.

Is de structuur van de website opbouw via (X)HTML?

10. Wordt er een externe cascading stylesheet (css) aangeroepen voor de opmaak van de pagina? 11. Zijn de pagina’s goed werkend in verschillende browsers (IE, Firefox, Safari)

Broncode 12. Zijn structuur en presentatie gesplitst in XHTML en css? 13. Is de website HTML valid?

14. Is de cascading style sheet (CSS) valide? 15. Zijn alle uitgaande hyperlinks werkend? 16. Is er een afwijkende kleur toegepast op de tekst hyperlinks? 17. Is er een afwijkende kleur toegepast op de bezochte (visited) tekst hyperlinks?


|

www.creartions.nl

Pagina ontwerp: aandachtspunten en adviezen Kies voor een kleurstelling van maximaal 2 contrasterende kleuren en 2 steunkleuren (muv zwart en wit) Gebruik contrasterende kleuren voor tekst en achtergrond. Bij voorkeur een donkere kleur voor de tekst en een lichte achtergrondkleur Kies voor een ontwerp met herkenbare foto’s. Afbeeldingen met mensen spreken over het algemeen zeer aan. Kies voor een “scherp” en gangbaar lettertype (font) zoals Verdana, Arial of Tahoma Zorg voor een duidelijk herkenbaar logo en plaats deze links bovenaan in de website header. Een professioneel logo met een herkenbare uitstraling zorgt ervoor dat je website kwaliteit, professionaliteit en betrouwbaarheid uitstraalt. Maak het lettertype van het main navigatiemenu een fractie groter dan de rest van de teksten. Laat het navigatiemenu prominent naar voren komen, bij voorkeur net onder de header. Gebruik niet meer dan 6 afbeeldingen per pagina. Zorg daarbij voor voldoende witruimte tussen foto’s en tekst. Vermijd gebruik van tabellen voor de vlakverdeling en vormgeving van je website Gebruik zogenaamde div (dividers) voor de opbouw van je pagina’s. Gebruik maken van div’s betekent; + Sneller laden van de pagina’s + Makkelijker aanpassingen binnen je website doorvoeren + De broncode van je website is overzichtelijk en “schoner” + Je website is beter indexeerbaar door de zoekmachines, hetgeen je positie in de zoekmachines verbetert + Je pagina voldoet aan de hedendaagse web standaarden Gebruik alleen tabellen bij hoge uitzondering en waar ze voor bedoeld zijn: Het tabulair weergeven van gegevens. Omschrijf in een externe stylesheet de opmaak elementen van de gehele website Plaats geen stijlelementen in de broncode van je website. Roep de externe stylesheet aan in de header van je webpagina: Gebruik verschillende kleuren voor hyperlinks in de tekst. Gebruik een vaste kleur voor de actieve links en laat deze van kleur veranderen zodra er met de muis overheen gegaan (mouse-over) wordt. Probeer alle links te onderstrepen. Vermijd tegelijkertijd het gebruik van onderstreepte tekst om deze op te laten vallen. Men zou kunnen denken dat het een link is. Plaats de tekst die je wilt laten opvallen in het vet of cursief. Zorg ervoor dat alle pagina’s binnen enkele seconden geladen worden. Internet gebruikers zijn ongeduldig. Als de opgeropen pagina niet binnen enkele seconden verschijnt, klikken ze weg.


|

www.creartions.nl

Navigatie Algemeen navigatiemenu en sub-navigatiemenu(s)

18. Is het main navigatiemenu duidelijk zichtbaar op elke pagina van de website? 19. Is het main navigatiemenu (en) het sub navigatiemenu opgebouwd uit css, ul/li en tekstlinks? 20. Bestaat het main navigatiemenu uit niet meer dan 9 peilers? 21. Verwijzen de hyperlinks uit het navigatiemenu naar de juiste pagina’s? 22. Indien (groot) sub navigatiemenu. Logisch gesorteerd (bijv op alfabetische volgorde)? 23. Indien (meerdere) sub navigatiemenus. Is de navigatie op de verschillende website secties juist? 24. Indien > 50 pagina’s. Is er een breadcrumb hyperlink path gebruikt? 25. Is de vormgeving van de navigatiestructuur consistent? 26. Is er een duidelijk, herkenbaar logo en is deze gekoppeld aan een link naar de homepage? 27. Kunnen bezoekers snel (binnen 2 tot 4 muisklikken) vinden waar ze naar zoeken? 28. Is de website zowel via (http://www.website.nl) als zonder www. (http://website.nl) te bereiken? 29. Worden er keywords gebruikt in het navigatie menu?

Navigatie: Aandachtspunten en adviezen Bouw het navigatiemenu op middels een lijst in een aparte divider, en positioneer deze in je style sheet. Zorg voor regelmatig wisselende content op je index pagina. Zorg voor een logo op de site en koppel deze met een link aan de homepage Gebruik zoekwoorden(keywords) in het navigatiemenu en (indien aanwezig) in het sub navigatiemenu


|

www.creartions.nl

Zoeken Zoeken binnen je website

30. Is de zoekfunctie puur gericht op enkel het doorzoeken van de website en niet het hele internet? 31. Is de zoekfunctie op elke pagina aanwezig? 32. Is de zoekfunctie prominent en duidelijk in beeld? 33. Is het tekstvak voor zoeken breed genoeg (20-25 tekens)? 34. Heeft de zoekfunctie een duidelijke opvallende zoek button? 35. Is er een FAQ aanwezig? 36. Is er een handgemaakte html sitemap aanwezig? 37. Is er een sitemap.xml toegevoegd (bijv. via Google webmaster Tools)?

Zoeken: Aandachtspunten en adviezen Laat de zoekfunctie opvallend in beeld staan. Beste is om direct een invoerveld voor zoeken zichtbaar op de pagina te plaatsen, met daarbij een opvallende “ zoeken” button. Plaats het invoerveld voor zoekfunctie op elke pagina en bij voorkeur rechtsboven. Laat de zoekmachine enkel je website en niet het hele internet doorzoeken De belangrijkste zoekmachines adviseren zowel een HTML sitemap als een XML sitemap op de site te plaatsen. Middels een sitemap kan een zoekmachine je website snel en eenvoudig goed “lezen”. HTML sitemap (handgemaakt): Zorg bij websites met veel pagina’s naast de zoekfunctie ook voor een overzichtspagina (sitemap) waar alle interne links op staan. Als mensen de zoekfunctie niet goed (kunnen) gebruiken, dan kunnen ze middels de handgemaakte sitemap vinden waar ze naar zoeken. Een ander voordeel van een HTML sitemap is dat elke pagina van de website binnen 1 a 2 muisklikken bereikt kan worden. XML sitemap (automatisch gegenereerd) Een (Google) XML sitemap bevat voor de zoekmachines Google, Yahoo en Microsoft een hoeveelheid aan informatie over de website. In een XML sitemap staan de adressen van alle pagina's vermeld. In deze sitemap kan ook de laatste updatedatum van een pagina worden aangegeven en hoe belangrijk de pagina is t.o.v. de andere pagina's. Maak een xml sitemap aan via Google webmaster tools. Je hoeft deze niet te linken vanaf de website. Hij is puur bedoeld voor de zoekmachine robots.


|

www.creartions.nl

(Bedrijfs) informatie en contactmogelijkheden Contact met de bezoekers van je website

38. Is er een hyperlink “contact” aanwezig op de website? 39. Is er een (eenvoudig) contactformulier aanwezig op de website? 40. Is de “wissen” knop op het formulier verwijderd? 41. Zijn de tekstvakken op het contactformulier breed genoeg (minimaal 30 tekens)? 42. Kan men op het contactformulier aangeven hoe men terugkoppeling wil (mail, telefoon, post)? 43. Verschijnt er een duidelijke “bedankt pagina” na het versturen van het formulier ? 44. Is er een aparte pagina aanwezig met bedrijfsgegevens zoals adres, telefoonnummer en KvK nr? 45. Zijn bedrijfsgegevens zoals adres, telefoonnummer en KvK nummer duidelijk vindbaar/zichtbaar?

(Bedrijfs) informatie en contactmogelijkheden: aandachtspunten en adviezen De pagina contact moet voorzien worden van contactinformatie over je bedrijf/organisatie. Vermeld info als bezoekadres, postadres, telefoonnummer(s) en e-mailadres(sen). Plaats naast je contactgegevens ook altijd een formulier. Dat is gebruiksvriendelijker dan een e-mailadres. Met een formulier kan de bezoeker direct een bericht sturen, zonder dat hij daarvoor een e-mailprogramma hoeft te openen. Zorg er voor dat er op het contactformulier niet teveel verplichte velden staan. Hou het simpel en overzichtelijk. Test het contactformulier regelmatig om te zien of deze nog juist werkt Zorg ervoor dat je pagina “contact” (of “over ons”) altijd onderdeel is van het main navigatiemenu. Plaats in de footer naast je algemene links als AV en privacy je e-mailadres of een link naar je contactgegevens


|

www.creartions.nl

Afbeeldingen Afbeeldingen op je website

46. Worden er niet meer dan 5 a 6 afbeeldingen per pagina gebruikt? 47. Zijn alle afbeeldingen voorzien van een alt tag inclusief een zoekwoord? 48. Zijn alle afbeeldingen geoptimaliseerd voor gebruik op het web (72 dpi, exacte afmetingen)? 49. Zijn alle afbeeldingen gepubliceerd in de meest voorkomende formaten? (GIF, JPG en PNG) 50. Zijn alle afbeeldingen op de eigen server gepubliceerd? (Geen gebruik van externe afbeeldingen) 51. Zijn de breedte en de hoogte van de afbeeldingen aangegeven in de broncode? 52. Bevat de site geen links naar afbeeldingen die niet meer op de server staan? (broken image links)

Afbeeldingen: aandachtspunten en adviezen Voorzie elke afbeelding van een alt tag met daarin een zoekwoord aansluitend op de inhoud (content) Optimaliseer je afbeeldingen op 72 dpi, zodat je een korte laadtijd creëert Geef voor alle gebruikte afbeeldingen de juiste breedte en hoogte aan in de broncode Indien functioneel koppel dan hyperlinks aan je afbeeldingen Gebruik nooit extreem lange bestandsnamen voor afbeeldingen Gebruik alleen pictogrammen als overduidelijk is waar deze voor bedoeld zijn.


|

www.creartions.nl

Zoekmachine robots en error pagina's Zoekmachine robots

53. Zijn er mappen/pagina's die niet geindexeerd mogen worden door de zoekmachines? 54. Worden deze mappen/pagina's afgeschermd middels een robots.txt bestand?

Error pagina’s

55. Is er een gepersonaliseerde 404 pagina aanwezig? 56. Zijn de overige error pages gepersonaliseerd? (403, 501 pagina, formulier error pagina etc...)

Zoekmachine robots en error pagina's: aandachtspunten en adviezen Zorg voor een robots.txt bestand als mappen of pagina’s niet geïndexeerd mogen worden door de zoekmachines. User-agent: * Disallow: /map01/ Disallow: /map02/ Disallow: /paginanaam01.php Disallow: /paginanaam02.php Niet werkende links veroorzaken 404 page not found meldingen. Maak aparte gepersonaliseerde error pages aan voor in ieder geval de 403 (forbidden) en de 404 (page not found) pagina met daarop een link naar je homepage. Heb je speciale acties lopen? Verwerk die dan in je 404 pagina middels een banner of tekstadvertentie Leg op je gepersonaliseerde pagina’s uit wat de melding inhoudt (verboden toegang, pagina niet gevonden, etc..) Zorg voor een duidelijke link naar de homepage op alle gepersonaliseerde pagina’s


|

www.creartions.nl

Inhoud / Content Hyperlinks

57. Is de content voorzien van interne links? (anchor text = zoekwoord) 58. Staan er geen links naar niet bestaande pagina's (404 page not found)? 59. Kun je in de tekst nog relevante tekstlinks toevoegen

Webteksten: duplicate content, grammatica, relevantie en inhoud

60. Is de tekst uniek (geen duplicate content) 61. Indien er wel duplicate content is, is er gebruikt gemaakt van de cannonical tag? 62. Is de tekst voor de bezoekers van de website begrijpelijk en goed leesbaar? 63. Staan er opvallende en/of slordige grammatica- of spelfouten in de tekst? 64. Is de tekst beknopt geschreven? ( maximaal 4 a 5 regels per alinea) 65. Is de informatie op de website up to date?

Webteksten: Broncode toepassingen

66. Wordt er gebruik gemaakt van header tags (H1, H2, etc..) en bevatten deze zoekwoord(en)? 67. Worden feiten en cijfers weergegeven in opsommingsrijtjes?

68. Is alle "tijdelijke" (Lorem Ipsum) tekst weg?

Zoekwoord dichtheid / Keyword density

69. Is de zoekwoord dichtheid (keyword density) van de focus zoekwoorden tussen de 5 a 7 % ? 70. Worden er afwisselend zoekwoorden en synoniemen gebruikt binnen de tekst?


|

www.creartions.nl

Inhoud / Content: aandachtspunten en adviezen Met interne links kun je de belangrijkheid van een interne pagina extra benadrukken. Zo geef je aan je bezoekers en zoekmachines aan dat ze belangrijker zijn dan andere pagina’s. Hierdoor komen deze pagina’s hoger in zoekresultaten te staan Het is raadzaam om voor de belangrijkste pagina’s binne je website een aantal interne links te plaatsen. De volgende plaatsen zijn zeer geschikt voor het plaatsen van interne links. 1) In lopende teksten 2) In titels van onderwerpen 3) In je navigatie 4) Aan de onderkant van je pagina (de footer) Om de zoekwoord dichtheid/keyword density te verhogen, moeten de belangrijkste zoekwoorden vaker in de tekst voorkomen. Plaats wat meer tekst op de belangrijkste pagina’s van de website en zorg ervoor dat de zoekwoord dichtheid op deze pagina’s tussen de 5% en de 7% komt te liggen. Gebruik zoekwoorden binnen je tekst en wissel deze af met synoniemen. Zorg ervoor dat de teksten op je website uniek zijn. Teksten die hetzelfde zijn of vergelijkbaar zijn aan de teksten op andere pagina's (binnen je eigen website of op andere websites) worden door zoekmachines als duplicate content gezien, en krijgen daardoor een lagere waardering. Zorg ervoor dat de inhoud van je site de vragen van je bezoekers(doelgroep) beantwoord. Vaak wordt er al in het zoeken met Google een vraag als zoekterm ingevoerd. Als u een pagina heeft die exact het antwoord op die vraag heeft, zal dat gewaardeerd worden. Maak gebruik van H1, H2, etc.. tags als koptekst boven je alinea’s. Zorg ervoor dat de tag een zoekwoord bevat. Maak je teksten niet te beknopt. Als dit het geval is, kan de zoekmachine de pagina’s niet goed indexeren omdat hij niet goed kan bepalen waar de pagina over gaat. Plaats meer tekst op de belangrijkste pagina’s van de website en zorg ervoor dat duidelijk is waar de pagina over gaat. Als je een “ nieuws” of “mededelingen” pagina op je website hebt, zorg er dan voor dat deze up to date is en regelmatig vernieuwd wordt.


|

www.creartions.nl

Handige website usability tools en programma’s Website validatie. Is je website HTML valid? http://validator.w3.org/ CSS validatie. Is je website CSS valid? http://jigsaw.w3.org/css-validator/ Google keyword tool Goede tool voor het vinden van de juiste goede zoekwoorden voor je site https://adwords.google.com/select/KeywordToolExternal Google Page Speed (Firefox Plugin) Met deze tool kun je zien hoe snel je website laadt. Je kunt direct zien welke onderdelen je aan kunt passen om de snelheid te verhogen. http://code.google.com/intl/nl/speed/page-speed/download.html Listamatic Navigatie menu’s maken met behulp van cascading style sheets (css) en lijstjes (ul, li) http://css.maxdesign.com.au/listamatic Google toolbar De Google toolbar bevat een aantal handige tools die je handig kunt gebruiken bij het optimaliseren van je website. https://www.google.com/intl/nl/toolbar/ff/index.html Maak je eigen 404 pagina Handleiding in pdf voor het zelf maken van een persoonlijke 404 pagina http://www.creartions.nl/dl/e-books/maak-je-eigen-404-pagina.pdf Contactformulier Contactformulier script met anti-spam gaptcha http://www.creartions.nl/dl/scripts/contactformulier-gaptcha.zip Canonnical tag en duplicate content Alles over de canonnical tag http://www.creartions.nl/canonical-attribuut.php Duplicate content checker Handige tool om te checken of je website duplicate content bevat http://www.copyscape.com 301 redirect met htaccess Wel of geen www gebruiken?. Maak een 301 redirect http://www.creartions.nl/www-voor-je-website-url-of-niet.php


|

www.creartions.nl

Algemene usability tips: Wat je moet proberen te vermijden bij het bouwen van je website Maak het liefst geen gebruik van website pop-ups Bied PDF bestanden ter download aan om te printen, maar gebruik ze niet als online formulier Indien je (banner)advertenties op je (zakelijke) site hebt, plaats niet meer dan 3 advertenties op een pagina Laat niet automatisch een geluidsbestand starten bij het openen van je website pagina Maak je main navigatiemenu niet in flash Schrijf geen teksten geheel in hoofdletters (uppercase) Gebruik geen watermerk als achtergrondafbeelding van je tekst Plaats geen “under construction” vermelding op je site (plaats een contactmogelijkheid of gerichte info) Maak geen hyperlinks met als anchor tekst alleen maar “klik hier”

De voordelen van een gebruiksvriendelijke website Onderstaand de meest belangrijkste voordelen van website-usability >> Usability heet ookwel gebruikersvriendelijkheid. Als de gebruikers van je website potentiële klanten zijn, is website-usability vooral gericht op het verschaffen van duidelijke info over je producten en/of diensten, en het stimuleren tot het (eenvoudig) leggen van contact. Als de gebruikers van je website reeds bestaande klanten zijn, is de usability vooral gericht op het verbeteren van de klantvriendelijkheid en de klanttevredenheid. >> Usability helpt om de omzet te verhogen. Bij commerciële websites helpt usability om de (online) verkopen en dus de omzet te verhogen. >> Website-usability is gericht op het verbeteren van de effectiviteit en de efficiëntie van een website. Usability helpt gebruikers meer te doen in minder tijd en met minder moeite. >> Usability draagt bij aan het vergroten van je (bedrijfs)imago en naamsbekendheid. Bij alle type websites draagt een goede usability bij aan de naamsbekendheid en aan je imago. Het zorgt vaak voor goede mond tot mond reclame. >> Usability bespaart je (extra) kosten. Als website usability in een vroeg stadium wordt toegepast, verkort dat de ontwikkelingstijd en verlaagt het de ontwikkelingskosten. Daarnaast verlaagt het de onderhoudskosten van je website, omdat een goede en gebruiksvriendelijke site minder vaak en minder ingrijpend hoeft te worden gewijzigd.

Bovenstaande voordelen benadrukken dan ook zeker dat het inschakelen van een usability expert zowel voor kleine ondernemers uit het MKB als voor grote bedrijven zeker geen overbodige luxe is.


|

www.creartions.nl

Website Usability scan inclusief uitgebreide rapportage CreArtions Multimedia Design kan indien gewenst je website uitgebreid testen op gebruiksvriendelijkheid. Bij een usability scan brengen we de belangrijkste drempels en knelpunten die ertoe leiden dat gebruikers vroegtijdig af kunnen haken duidelijk in beeld. Doorgaans ligt de focus bij een usability scan op de hoofdonderdelen van een website, waaronder de homepage, de website navigatie en het zoeksysteem. Aan de hand van de 70 punten uit dit document komen we tot een analyse van je website waarin we de drempels en knelpunten zichtbaar maken. Advies en rapportage Alle gegevens worden verwerkt in een heldere, duidelijke en vooral bruikbare rapportage. Dit rapport geeft enerzijds aan op welke punten je site reeds voldoet aan de huidige webstandaarden betreffende gebruiksvriendelijkheid, en anderzijds op welke punten deze verbeterd dient te worden. We geven gerichte adviezen en praktische oplossingen over hoe je de verbeterpunten kunt aanpakken. De website usability scan bevat de volgende onderdelen: Pagina ontwerp - Opmaak en vlakverdeling - Broncode Navigatie - Algemeen navigatiemenu en sub-navigatiemenu(s) Zoeken - Zoeken binnen de website Bedrijfsinformatie en contactmogelijkheden - Contact met de bezoekers van je website Afbeeldingen - Afbeeldingen op je website Zoekmachine robots en Error pagina’s - Zoekmachine robots - Error pagina’s Inhoud / Content - Hyperlinks - Webteksten: duplicate content, grammatica, relevantie en inhoud - Webteksten: broncode toepassingen - Zoekwoord dichtheid / Keyword density

Meer informatie? Website usability scan laten uitvoeren? Het uitvoeren van een usability scan kost (inclusief rapportage) vanaf € 395 exclusief btw. Je webdesigner, webmaster/beheerder van je website kan aan de hand van dit adviesrapport direct starten met het doorvoeren van de verbeteringen. Indien gewenst kan CreArtions deze werkzaamheden ook uitvoeren. Neem voor meer informatie contact met ons op via [email protected]


|

www.creartions.nl

White paper website usability Over dit document Deze white-paper over “website usability” is geschreven door Sebastian Kunst voor CreArtions Multimedia Design. Het document omvat 12 hoofdstukken waarin uitgebreid wordt ingegaan op de diverse onderdelen van website usability, aangevuld met tips, adviezen, tools en programma’s. Aan de hand van deze white-paper en de nodige technische kennis kun je stap voor stap de gebruiksvriendelijkheid van je eigen website testen en daar waar nodig aanpassingen doorvoeren om deze te vergroten.

Dit is versie 1.0 van de white-paper (oktober 2010) Alle rechten voorbehouden Het is niet toegestaan deze white-paper aan derden te verstrekken of te verkopen. Het is niet toegestaan de inhoud van deze white-paper elders te publiceren zonder toestemming van de auteur.

CreArtions Multimedia Design Antwerpenstraat 460 4826 HK Breda E. [email protected] Social media LinkedIn: http://www.linkedin.com/in/creartions Twitter: http://twitter.com/CreArtionsnl


|

www.creartions.nl

WEBSITE USABILITY. white-paper

Recommend Documents