Uw website gebruiksvriendelijk, vindbaar en toegankelijk

Transcriptie

1 Uw website gebruiksvriendelijk, vindbaar en toegankelijk! Training PGOsupport!! 14 april 2014! Jaap van de Putte

2 Programma Kennismaking Usability / Findability / Accessibility Van zenden naar ontvangen Structureren van content Jullie websites Borrel!

3 Kennismaking

4 Optimaliseren van je website Gebruiksvriendelijk maken? Happy Users Vindbaar maken? Google vindt jouw site Toegankelijk maken? Website bruikbaar voor mensen met een beperking

5 Usability

6 Wat is usability?!! 1. Voorkomen van vraagtekens

7

8 Krug: "Things that make us think"

9 Persoonlijk inlogpagina Vacaturesites Mindless choice - I'm confused

10 Kan ik er op klikken?

11 Kan ik er op klikken?

12 ??

13

14 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."

15 Taak van de bezoeker Wat komen mensen op jullie website doen? Schrijf 5 taken op

16 Taak van de bezoeker

17 Wat is usability? Antwoord 3: Ease of task completion!!! "Ik heb een taak. Kan ik die makkelijk uitvoeren?"

18

19

20

21

22 Wat is usability? Antwoord 4: Vraaggericht, niet organisatiegestuurd

23

24

25

26

27 Wat is usability? Antwoord 5: Feest van herkenning

28

29 Wat is usability? Antwoord 5: Beginnersvriendelijkheid

30 Conclusie usability Denk aan de taak van de bezoeker Maak het beginnersvriendelijk Geen onnodige en onbegrijpelijk functies

31 Anosmie Vereniging Nederland

32 Tip:! Syllabus Webtechniek

33 Browsers Internet Explorer Chrome Firefox Safari Opera Mobiele browsers

34 Handige tools om je site te testen Web Developer, add on voor Firefox Pingdom: testen snelheid van je site

35

36 Responsive Design Website functioneert goed op beeldschermen van verschillende grootte

37 Content Management Systemen Software om je website te bouwen en te onderhouden Bekende open-source-systemen: WordPress Drupal Typo3 Joomla Streef naar beperkte leveranciersafhankelijkheid

38 Bewegende beelden Taak van de bezoeker versus bewegende beelden Effect op lezen / taakuitvoering

39 Kosten Taak van de bezoeker versus bewegende beelden Effect op lezen / taakuitvoering

40 Nog enkele vragen Domeinnaam is Veranderen? Organisatienaam: veranderen? Social Media

41

42 Vindbaarheid

43 Vindbaarheid Vindbaar in Google Vindbaar via de eigen zoekfunctie

44

45

46

47 Hoe kijkt Google? Google is blind: Kijkt naar de HTML-code Geen afbeeldingen van tekst Bovenaan = belangrijk Probeert te kijken als een bezoeker

48

49

50

51 HTML-code Hoe weet Google wat jouw koppen zijn? Door ze op te maken als headings

52

53

54

55

56

57

58

59

60 Belangrijkste bovenaan Denk aan: Wat willen mensen weten? Google indexeert net zo Opbouw (bijna) altijd in: Titel - lead - body

61

62 Hart & Vaatgroep Overijssel Hoe kun je artikelen delen zonder overtypen? Archieffunctie, hoe heb je daar eigen controle over? Zoekmachineoptimalisatie in typo 3 Zoekmachineoptimalisatie in het algemeen

63 Toegankelijkheid Toegankelijkheid

64 Toegankelijkheid Bruikbaarheid voor mensen met een functionele beperking: Blinden Doven Slechtzienden Slechthorenden Motorische beperking Taalzwakte Enzovoort

65 Je website toegankelijk Voldoen aan de Web Content Accessibility Guidelines (WCAG) Alles beschikbaar als tekst, bijvoorbeeld Alternatieve teksten afbeeldingen Ondertiteling video

66

67 Slider

68

69

70 Je website toegankelijk Voldoen aan de Web Content Accessibility Guidelines (WCAG) Alles beschikbaar als tekst Headings om te scannen

71

72 Zonder JavaScript: lege pagina

73 Je website toegankelijk Voldoen aan de Web Content Accessibility Guidelines (WCAG) Alles beschikbaar als tekst Headings om te scannen Leesbare teksten

74

75 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

76 Toetsenbordval

77 Toetsenbordval

78 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

79 ! NPV - 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.

80 Veel voorkomende problemen "Alles moet op de website" Organisatie wil graag zenden Denken vanuit vorm: "Publicaties" Betekenisloze termen: "Thema's" Indelen op doelgroep

81 Structureren van informatie

82 Structureren van informatie Stap 1: minder informatie Structureren op inhoud NIET indelen op: Doelgroep Vorm: "Publicaties", "Downloads", ' Liever geen abstracte begrippen: "Thema's", "Onderwerpen"

83 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

84

85 CMTC Herstructureren website Maak ook niveau 2 in je site zichtbaar Infographics

86 Uitstraling

87 Vereniging Nederland Davos Tips om meer mensen betrokken te krijgen

88

89

90 CdLS World - XWiki Contentpresentatie Opmaak: vanuit Word of PDF kopiëren: Tips: Ctrl-Shft-V Plakken in HTML-modus

91 Structureren van tekst

92 Structuur van tekst Opbouw in titel - lead - body Betekenisvolle titel Betekenisvolle lead Betekenisvolle tussenkoppen

93 ! Lichen Planus vereniging 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

94 ! 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

95 ! MS Web - Succesfactoren voor een webforum Indeling webforum in categoriën Zoekfunctie eigen site Tablets en telefoons?

96 Conclusie Usability: Doe vooral minder Vindbaarheid: schrijf voor je bezoeker Toegankelijkheid: Gebruik headings Alternatieve tekst Voorkom grote problemen, zoals toetsenbordval