Uw website gebruiksvriendelijk, vindbaar en toegankelijk !
Training
PGOsupport ! !
14 april 2014 !
Jaap van de Putte
Programma •
10.00 - 12.30 Kennismaking •
•
Usability / Findability / Accessibility
13.15 -16.30 •
Van zenden naar ontvangen
•
Structureren van content
•
Jullie websites
•
Borrel!
Kennismaking
Optimaliseren van je website •
Gebruiksvriendelijk maken? •
•
Vindbaar maken? •
•
Happy Users
Google vindt jouw site
Toegankelijk maken? •
Website bruikbaar voor mensen met een beperking
Usability
Wat is usability? ! !
1. Voorkomen van vraagtekens
Krug:
"Things that make us think"
Persoonlijk inlogpagina Vacaturesites
Mindless choice
-
I'm confused
Kan ik er op klikken?
Kan ik er op klikken?
??
Wat is usability? !
2. ISO-definitie •
Effectief: •
•
Efficiënt: •
•
Task completion
Minimale inzet van tijd (en hersencellen?)
Tevreden: •
"Ik zou de site aan anderen aanbevelen."
Taak van de bezoeker •
Wat komen mensen op jullie website doen?
•
Schrijf 5 taken op
Taak van de bezoeker
Wat is usability?
Antwoord 3:
Ease of task completion ! ! !
"Ik heb een taak.
Kan ik die makkelijk uitvoeren?"
Wat is usability?
Antwoord 4:
Vraaggericht,
niet organisatiegestuurd
Wat is usability?
Antwoord 5:
Feest van herkenning
Wat is usability?
Antwoord 5:
Beginnersvriendelijkheid
Conclusie usability •
Denk aan de taak van de bezoeker
•
Maak het beginnersvriendelijk
•
Geen onnodige en onbegrijpelijk functies
Anosmie Vereniging Nederland
Tip: !
Syllabus Webtechniek
Browsers •
Internet Explorer
•
Chrome
•
Firefox
•
Safari
•
Opera
•
Mobiele browsers
Handige tools om je site te testen •
Web Developer, add on voor Firefox
•
Pingdom: testen snelheid van je site
http://tools.pingdom.com
Responsive Design •
Website functioneert goed op beeldschermen van verschillende grootte
Content Management Systemen •
Software om je website te bouwen en te onderhouden
•
Bekende open-source-systemen:
•
•
WordPress
•
Drupal
•
Typo3
•
Joomla
Streef naar beperkte leveranciersafhankelijkheid
Bewegende beelden •
Taak van de bezoeker versus bewegende beelden
•
Effect op lezen / taakuitvoering
Kosten •
Taak van de bezoeker versus bewegende beelden
•
Effect op lezen / taakuitvoering
Nog enkele vragen •
Domeinnaam is www.ruikenenproeven.nl.
Veranderen?
•
Organisatienaam: veranderen?
•
Social Media
Vindbaarheid
Vindbaarheid •
Vindbaar in Google
•
Vindbaar via de eigen zoekfunctie
Hoe kijkt Google? •
Google is blind: •
Kijkt naar de HTML-code
•
Geen afbeeldingen van tekst
•
Bovenaan = belangrijk
•
Probeert te kijken als een bezoeker
HTML-code •
Hoe weet Google wat jouw koppen zijn?
•
Door ze op te maken als headings
Belangrijkste bovenaan •
•
Denk aan: •
Wat willen mensen weten?
•
Google indexeert net zo
Opbouw (bijna) altijd in: •
Titel - lead - body
Hart & Vaatgroep Overijssel •
www.hartenvaatgroep.nl/overijssel
•
Hoe kun je artikelen delen zonder overtypen?
•
Archieffunctie, hoe heb je daar eigen controle over?
•
Zoekmachineoptimalisatie in typo 3
•
Zoekmachineoptimalisatie in het algemeen
Toegankelijkheid Toegankelijkheid
Toegankelijkheid •
Bruikbaarheid voor mensen met een functionele beperking: •
Blinden
•
Doven
•
Slechtzienden
•
Slechthorenden
•
Motorische beperking
•
Taalzwakte
•
Enzovoort
Je website toegankelijk •
Voldoen aan de Web Content Accessibility Guidelines (WCAG)
•
Alles beschikbaar als tekst, bijvoorbeeld •
Alternatieve teksten afbeeldingen
•
Ondertiteling video
Slider
Je website toegankelijk •
Voldoen aan de Web Content Accessibility Guidelines (WCAG)
•
Alles beschikbaar als tekst
•
Headings om te scannen
Zonder JavaScript: lege pagina
Je website toegankelijk •
Voldoen aan de Web Content Accessibility Guidelines (WCAG)
•
Alles beschikbaar als tekst
•
Headings om te scannen
•
Leesbare teksten
Je website toegankelijk •
Voldoen aan de Web Content Accessibility Guidelines (WCAG)
•
Alles beschikbaar als tekst
•
Headings om te scannen
•
Leesbare teksten
•
Alles bedienbaar met toetsenbord
Toetsenbordval
Toetsenbordval
Je website toegankelijk •
Voldoen aan de Web Content Accessibility Guidelines (WCAG)
•
Alles beschikbaar als tekst
•
Headings om te scannen
•
Leesbare teksten
•
Alles bedienbaar met toetsenbord
•
Begrijpelijke teksten
NPV - www.npvzorg.nl
!
•
We hebben heel veel informatie (veel verschillende producten en diensten), hoe maak je de keuze wat wel of niet op home komt?
•
Hoe zorg je ervoor dat iedere doelgroep vindt wat hij zoekt.
•
Hoe maak je formulieren gebruiksvriendelijk (SEPA)?
•
Alternatieven voor Typo 3?
•
Hoe kom je hoog in Google (zonder kosten!)
•
In verschillende browsers ziet de website er anders uit. Regels worden soms raar afgebroken.
Veel voorkomende problemen •
"Alles moet op de website"
•
Organisatie wil graag zenden
•
Denken vanuit vorm: "Publicaties"
•
Betekenisloze termen: "Thema's"
•
Indelen op doelgroep
Structureren van informatie
Structureren van informatie •
Stap 1: minder informatie
•
Structureren op inhoud
•
NIET indelen op: •
Doelgroep
•
Vorm: "Publicaties", "Downloads", '
•
Liever geen abstracte begrippen: "Thema's", "Onderwerpen"
Structureren van informatie •
Stap 1: minder informatie
•
Structureren op inhoud
•
NIET op doelgroep, vorm of lege begrippen
•
Menu: •
Wel breed: zeker 12 items kan
•
Niet te diep: niet dieper dan 3 niveaus
CMTC •
Herstructureren website •
•
Maak ook niveau 2 in je site zichtbaar
Infographics
Uitstraling
Vereniging Nederland Davos •
Tips om meer mensen betrokken te krijgen
CdLS World - www.cdlsworld.org
!
•
XWiki
•
Contentpresentatie
•
Opmaak: vanuit Word of PDF kopiëren:
•
Tips: •
Ctrl-Shft-V
•
Plakken in HTML-modus
Structureren van tekst
Structuur van tekst •
Opbouw in titel - lead - body
•
Betekenisvolle titel
•
Betekenisvolle lead
•
Betekenisvolle tussenkoppen
Lichen Planus vereniging
! !
•
www.lichenplanus.nl
•
Vraag 1: Wat is een logische structuur als mensen op meerdere wijze en op meerdere plaatsen de site inkomen
•
Antwoord: •
Elke pagina moet zelfstandig begrijpelijk zijn
—> Principe van Zelfstandigheid
—> Principe van Contextvrije informatie
Lichen Planus vereniging
! !
•
Vraag 2: Maak je een site breed of diep en zijn hier regels voor?
•
Antwoord: liever breed (max 16 items) dan diep (max 3 niveaus)
•
Vraag 3: In hoeverre houd je rekening met het feit dat de site via meerdere verschillende media kan worden gelezen (van PC tot telefoon)
•
Antwoord: responsive design
MS Web - www.msweb.nl
! !
•
Succesfactoren voor een webforum
•
Indeling webforum in categoriën
•
Zoekfunctie eigen site
•
Tablets en telefoons?
Conclusie •
Usability: Doe vooral minder
•
Vindbaarheid: schrijf voor je bezoeker
•
Toegankelijkheid: •
Gebruik headings
•
Alternatieve tekst
•
Voorkom grote problemen, zoals toetsenbordval
