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? Happy Users Vindbaar maken? 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: Task completion Efficiënt: 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