Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Een websitetekst werkt
         Titel die
10 tips voor een
gebruiksvriendelijke website
         Beschrijving slide




  ...
Goeiemiddag! Ik ben Bart
Ik werk bij webbureau Netlash




        en bij een startup die MetaTale heet
Dit is mijn zoon Kobe
Mijn grote passie is koffie
Je vindt me hier:
www.ondernemeringent.be
www.netlash.com
www.metatale.eu
www.kobedewaele.be
www.kopjekoffie.be

(Ja, dat z...
Een website die werkt
10 tips voor een
gebruiksvriendelijke website
Nieuwe technologie: drie golven
kopiëren      vertalen      eigenheid
Het web vindt zijn eigen taal

géén brochure
géén videoclip
zeker géén radio (podcast is dead)
Géén 10 tips

 (veel meer)
8
consistentie       toegankelijkheid

typografie          snelheid

draagbaarheid      technologie

inhoud             int...
8
consistentie       toegankelijkheid

typografie          snelheid

draagbaarheid      technologie

inhoud             int...
1. Consistentie
1. Consistentie




Verwachtingspatronen
logo     breadcrumb   zoekbox     taalkeuze

‘home’   disclaimer   navigatie
1. Consistentie
1. Consistentie




                  U bent hier
1. Consistentie



Logo
Links bovenaan
Eventueel met tagline
Met link naar homepage
1. Consistentie



Taalkeuze
Links bovenaan, onder logo
ISO-aanduiding (NL-FR-EN)
Alle opties tonen
1. Consistentie



Home
Als eerste in hoofdnavigatie, of in logo
Wordt altijd verwacht
Engelse term is ok!
1. Consistentie



Breadcrumb

Onder de hoofdnavigatie
Duidt het afgelegde pad aan
Klikbaar, behalve laatste item
1. Consistentie



Zoekbox

Rechts bovenaan
Gevaarlijk!
Gebruiker verwacht Google...
1. Consistentie



Navigatie
Liefst horizontaal bovenaan
Subnavigatie in linkerkolom
Zeker niét rechts of onderaan
1. Consistentie



Secundaire navigatie
Onderaan, in footer
Idem: privacy statement, sitemap
Bij grote sites ook: contact ...
1. Consistentie



Consistentie geeft mensen houvast
Het is duidelijk:
 - waar ze vandaan kwamen
 - waar ze nu zijn
 - waa...
1. Consistentie




                  U bent hier
8
consistentie       toegankelijkheid

typografie          snelheid

draagbaarheid      technologie

inhoud             int...
2. Typografie




               http://www.flickr.com/photos/dmitry-baranovskiy/489116782/
2. Typografie



Het web is tekst
Er wordt op dit moment nog steeds
méér naar elkaar geschreven dan er
met elkaar getelefon...
2. Typografie



Leeslengte

Géén oneindig lange regels
+- 55 karakter per regel
Dus: géén liquid design
2. Typografie New York Times
2. Typografie Smashing magazine
2. Typografie



Schaalbare lettertypes

Laat mensen zelf vergroten
Geen pixelwaarde (wel relatief)
a-A is een pleister
2. Typografie



Serif of Sans-serif?
Op het scherm: schreefloos

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, ...
8
consistentie       toegankelijkheid

typografie          snelheid

draagbaarheid      technologie

inhoud             int...
3. Draagbaarheid
3. Draagbaarheid



Mohammed en de berg
Probeer niet om bezoekers te lokken naar jouw website
Verspreid jouw inhoud naar d...
3. Draagbaarheid
3. Draagbaarheid




               Presentatie
3. Draagbaarheid
3. Draagbaar




               Presentaties
3. Draagbaarheid



RSS
RSS = Really Simple Syndication
Maakt inhoud draagbaar




                             http://nl....
3. Draagbaarheid



API
API = Application Programming Interface
Geef derden toegang tot je data




                      ...
8
consistentie       toegankelijkheid

typografie          snelheid

draagbaarheid      technologie

inhoud             int...
4. Snelheid
4. Snelheid



Bezoekers zijn ongeduldig
Snel laden (technische snelheid)
To the point (inhoudelijke snelheid)
Scanbaar (s...
4. Snelheid



Testen!
 http://www.websiteoptimization.com/services/analyze/
8
consistentie       toegankelijkheid

typografie          snelheid

draagbaarheid      technologie

inhoud             int...
5. Inhoud
5. Inhoud



Nieuw!
5. Inhoud
5. Inhoud




        “Een website is als ondergoed.
         Elke dag vers is beter.”
5. Inhoud



Publiceer regelmatig
Een vast patroon
Meerwaarde en relevantie
Actualiteit
5. Inhoud



CMS
Gebruik een Content Management Systeem
Website beheren: NIET via IT!
8
consistentie       toegankelijkheid

typografie          snelheid

draagbaarheid      technologie

inhoud             int...
6. Toegankelijkheid
6. Toegankelijkheid



Bouw een toegankelijke site
Gebruiksvriendelijk
Cross-browser en cross-platform
Anysurfer
Google
6. Toegankelijkheid



Gebruiksvriendelijk
User centered design
User testing
Usability
6. Toegankelijkheid



Cross-browser / Cross-platform
Werkt op PC/Apple/Linux
Werkt op IE/Firefox/Safari/Opera
Vergeet mob...
6. Toegankelijkheid



Anysurfer
Introductie nodig?
(Het vroegere Blindsurfer)
www.anysurfer.be
6. Toegankelijkheid



Google
Grootste traffic driver
SEO-vriendelijk!
8
consistentie       toegankelijkheid

typografie          snelheid

draagbaarheid      technologie

inhoud             int...
7. Technologie
7. Technologie



Voortdurend nieuwe technologie
Flash - Flex - Air
AJAX
Podcast
Video
7. Technologie



Technologie is géén driver
Goed nadenken over meerwaarde
8
consistentie       toegankelijkheid

typografie          snelheid

draagbaarheid      technologie

inhoud             int...
8. Interactie
8. Interactie



Laat doelgroep deelnemen
Test, applicaties, formulieren
Feedbackmechanismen (rating, review)
Commentaren,...
Hé Bart!
En wat met dat hele
Web 2.0 ding?
9
consistentie       toegankelijkheid

typografie          snelheid

draagbaarheid      technologie

inhoud             int...
9. Web 2.0
9. Web 2.0




Web 2.0 neemt het artificiële membraan
tussen organisatie en publiek weg
9. Web 2.0




             quot;Web 2.0 is an architecture
              of participationquot;
                          ...
9. Web 2.0
9. Web 2.0
9. Web 2.0
9. Web 2.0



Web 2.0 is geen ‘look’
Gradiënten
Pastelkleuren
Afgeronde hoeken
9. Web 2.0



Web 2.0 = mensen


             Site-centric

             User-centric
9. Web 2.0 Het ‘Soylent Green’ moment
9. Web 2.0 Het ‘Soylent Green’ moment




              The web is
                people
Het web wordt
gebruikt door
   mensen
Echte mensen, niet ‘users’
Mensen met kinderen
Mensen met passies
Web 2.0



Web 2.0 = mensen

     Behandel ze dus als
          mensen:
        conversatie
9. Web 2.0




             Conversatie
(Ok, misschien zijn
er dan toch 10 tips)
10
consistentie    toegankelijkheid

typografie       snelheid

draagbaarheid   technologie

inhoud          interactie

we...
Vragen?
Bart de Waele
bart@netlash.com

www.netlash.com
www.ondernemeringent.be



                  Haal het maximum uit het web ...
10 tips voor een gebruiksvriendelijke website
You’ve finished this document.
Download and read it offline.
Upcoming SlideShare
Het belang van een goede website | HoGent - Social Day 2014
Next
Upcoming SlideShare
Het belang van een goede website | HoGent - Social Day 2014
Next
Download to read offline and view in fullscreen.

10

Share

10 tips voor een gebruiksvriendelijke website

Download to read offline

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

10 tips voor een gebruiksvriendelijke website

  1. 1. Een websitetekst werkt Titel die 10 tips voor een gebruiksvriendelijke website Beschrijving slide Haal het maximum uit het web - 24/6/2008
  2. 2. Goeiemiddag! Ik ben Bart
  3. 3. Ik werk bij webbureau Netlash en bij een startup die MetaTale heet
  4. 4. Dit is mijn zoon Kobe
  5. 5. Mijn grote passie is koffie
  6. 6. Je vindt me hier: www.ondernemeringent.be www.netlash.com www.metatale.eu www.kobedewaele.be www.kopjekoffie.be (Ja, dat zijn heel wat www’s)
  7. 7. Een website die werkt 10 tips voor een gebruiksvriendelijke website
  8. 8. Nieuwe technologie: drie golven kopiëren vertalen eigenheid
  9. 9. Het web vindt zijn eigen taal géén brochure géén videoclip zeker géén radio (podcast is dead)
  10. 10. Géén 10 tips (veel meer)
  11. 11. 8 consistentie toegankelijkheid typografie snelheid draagbaarheid technologie inhoud interactie
  12. 12. 8 consistentie toegankelijkheid typografie snelheid draagbaarheid technologie inhoud interactie
  13. 13. 1. Consistentie
  14. 14. 1. Consistentie Verwachtingspatronen logo breadcrumb zoekbox taalkeuze ‘home’ disclaimer navigatie
  15. 15. 1. Consistentie
  16. 16. 1. Consistentie U bent hier
  17. 17. 1. Consistentie Logo Links bovenaan Eventueel met tagline Met link naar homepage
  18. 18. 1. Consistentie Taalkeuze Links bovenaan, onder logo ISO-aanduiding (NL-FR-EN) Alle opties tonen
  19. 19. 1. Consistentie Home Als eerste in hoofdnavigatie, of in logo Wordt altijd verwacht Engelse term is ok!
  20. 20. 1. Consistentie Breadcrumb Onder de hoofdnavigatie Duidt het afgelegde pad aan Klikbaar, behalve laatste item
  21. 21. 1. Consistentie Zoekbox Rechts bovenaan Gevaarlijk! Gebruiker verwacht Google...
  22. 22. 1. Consistentie Navigatie Liefst horizontaal bovenaan Subnavigatie in linkerkolom Zeker niét rechts of onderaan
  23. 23. 1. Consistentie Secundaire navigatie Onderaan, in footer Idem: privacy statement, sitemap Bij grote sites ook: contact webmaster, about
  24. 24. 1. Consistentie Consistentie geeft mensen houvast Het is duidelijk: - waar ze vandaan kwamen - waar ze nu zijn - waar ze naar toe kunnen In een visuele taal die ze van andere sites kennen
  25. 25. 1. Consistentie U bent hier
  26. 26. 8 consistentie toegankelijkheid typografie snelheid draagbaarheid technologie inhoud interactie
  27. 27. 2. Typografie http://www.flickr.com/photos/dmitry-baranovskiy/489116782/
  28. 28. 2. Typografie Het web is tekst Er wordt op dit moment nog steeds méér naar elkaar geschreven dan er met elkaar getelefoneerd wordt
  29. 29. 2. Typografie Leeslengte Géén oneindig lange regels +- 55 karakter per regel Dus: géén liquid design
  30. 30. 2. Typografie New York Times
  31. 31. 2. Typografie Smashing magazine
  32. 32. 2. Typografie Schaalbare lettertypes Laat mensen zelf vergroten Geen pixelwaarde (wel relatief) a-A is een pleister
  33. 33. 2. Typografie Serif of Sans-serif? Op het scherm: schreefloos Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. consequat. Duis autem vel eum iriure dolor in hendrerit in Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse vulputate velit esse molestie consequat, vel illum dolore eu feugiat molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros nulla facilisis at vero eros et accumsan et iusto odio dignissim qui et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril blandit praesent luptatum zzril delenit augue duis dolore te feugait delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum nulla facilisi. Nam liber tempor cum soluta nobis eleifend option soluta nobis eleifend option congue nihil imperdiet doming id quod congue nihil imperdiet doming id quod mazim placerat facer mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes possim assum. Typi non habent claritatem insitam; est usus demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas legentis in iis qui facit eorum claritatem. Investigationes est etiam processus dynamicus, qui sequitur mutationem consuetudium demonstraverunt lectores legere me lius quod ii legunt saepius. lectorum. Mirum est notare quam littera gothica, quam nunc putamus Claritas est etiam processus dynamicus, qui sequitur mutationem
  34. 34. 8 consistentie toegankelijkheid typografie snelheid draagbaarheid technologie inhoud interactie
  35. 35. 3. Draagbaarheid
  36. 36. 3. Draagbaarheid Mohammed en de berg Probeer niet om bezoekers te lokken naar jouw website Verspreid jouw inhoud naar die plaatsen waar er bezoekers zijn
  37. 37. 3. Draagbaarheid
  38. 38. 3. Draagbaarheid Presentatie
  39. 39. 3. Draagbaarheid
  40. 40. 3. Draagbaar Presentaties
  41. 41. 3. Draagbaarheid RSS RSS = Really Simple Syndication Maakt inhoud draagbaar http://nl.wikipedia.org/wiki/Really_Simple_Syndication
  42. 42. 3. Draagbaarheid API API = Application Programming Interface Geef derden toegang tot je data http://nl.wikipedia.org/wiki/Application_Programming_Interface
  43. 43. 8 consistentie toegankelijkheid typografie snelheid draagbaarheid technologie inhoud interactie
  44. 44. 4. Snelheid
  45. 45. 4. Snelheid Bezoekers zijn ongeduldig Snel laden (technische snelheid) To the point (inhoudelijke snelheid) Scanbaar (structurele snelheid)
  46. 46. 4. Snelheid Testen! http://www.websiteoptimization.com/services/analyze/
  47. 47. 8 consistentie toegankelijkheid typografie snelheid draagbaarheid technologie inhoud interactie
  48. 48. 5. Inhoud
  49. 49. 5. Inhoud Nieuw!
  50. 50. 5. Inhoud
  51. 51. 5. Inhoud “Een website is als ondergoed. Elke dag vers is beter.”
  52. 52. 5. Inhoud Publiceer regelmatig Een vast patroon Meerwaarde en relevantie Actualiteit
  53. 53. 5. Inhoud CMS Gebruik een Content Management Systeem Website beheren: NIET via IT!
  54. 54. 8 consistentie toegankelijkheid typografie snelheid draagbaarheid technologie inhoud interactie
  55. 55. 6. Toegankelijkheid
  56. 56. 6. Toegankelijkheid Bouw een toegankelijke site Gebruiksvriendelijk Cross-browser en cross-platform Anysurfer Google
  57. 57. 6. Toegankelijkheid Gebruiksvriendelijk User centered design User testing Usability
  58. 58. 6. Toegankelijkheid Cross-browser / Cross-platform Werkt op PC/Apple/Linux Werkt op IE/Firefox/Safari/Opera Vergeet mobiel niet!
  59. 59. 6. Toegankelijkheid Anysurfer Introductie nodig? (Het vroegere Blindsurfer) www.anysurfer.be
  60. 60. 6. Toegankelijkheid Google Grootste traffic driver SEO-vriendelijk!
  61. 61. 8 consistentie toegankelijkheid typografie snelheid draagbaarheid technologie inhoud interactie
  62. 62. 7. Technologie
  63. 63. 7. Technologie Voortdurend nieuwe technologie Flash - Flex - Air AJAX Podcast Video
  64. 64. 7. Technologie Technologie is géén driver Goed nadenken over meerwaarde
  65. 65. 8 consistentie toegankelijkheid typografie snelheid draagbaarheid technologie inhoud interactie
  66. 66. 8. Interactie
  67. 67. 8. Interactie Laat doelgroep deelnemen Test, applicaties, formulieren Feedbackmechanismen (rating, review) Commentaren, forum Laat ze zelfs bijdragen aan de inhoud! (Oooh!)
  68. 68. Hé Bart! En wat met dat hele Web 2.0 ding?
  69. 69. 9 consistentie toegankelijkheid typografie snelheid draagbaarheid technologie inhoud interactie web 2.0
  70. 70. 9. Web 2.0
  71. 71. 9. Web 2.0 Web 2.0 neemt het artificiële membraan tussen organisatie en publiek weg
  72. 72. 9. Web 2.0 quot;Web 2.0 is an architecture of participationquot; TIM O’REILLY
  73. 73. 9. Web 2.0
  74. 74. 9. Web 2.0
  75. 75. 9. Web 2.0
  76. 76. 9. Web 2.0 Web 2.0 is geen ‘look’ Gradiënten Pastelkleuren Afgeronde hoeken
  77. 77. 9. Web 2.0 Web 2.0 = mensen Site-centric User-centric
  78. 78. 9. Web 2.0 Het ‘Soylent Green’ moment
  79. 79. 9. Web 2.0 Het ‘Soylent Green’ moment The web is people
  80. 80. Het web wordt gebruikt door mensen
  81. 81. Echte mensen, niet ‘users’
  82. 82. Mensen met kinderen
  83. 83. Mensen met passies
  84. 84. Web 2.0 Web 2.0 = mensen Behandel ze dus als mensen: conversatie
  85. 85. 9. Web 2.0 Conversatie
  86. 86. (Ok, misschien zijn er dan toch 10 tips)
  87. 87. 10 consistentie toegankelijkheid typografie snelheid draagbaarheid technologie inhoud interactie web 2.0 conversatie
  88. 88. Vragen?
  89. 89. Bart de Waele bart@netlash.com www.netlash.com www.ondernemeringent.be Haal het maximum uit het web - 24/6/2008
  • samstals

    Mar. 26, 2012
  • anthonyringoet

    Nov. 17, 2010
  • gerbenheerspink

    Nov. 10, 2010
  • diddi

    Jan. 14, 2010
  • nico.smets

    Dec. 3, 2008
  • dinx

    Jul. 5, 2008
  • tijs

    Jun. 23, 2008
  • veerlet

    Jun. 22, 2008
  • pascalvanhecke

    Jun. 22, 2008
  • stijnwijndaele

    Jun. 22, 2008

Views

Total views

9,470

On Slideshare

0

From embeds

0

Number of embeds

932

Actions

Downloads

167

Shares

0

Comments

0

Likes

10

×