10 tips voor een gebruiksvriendelijke website

9,240 views

Published on

Published in: Technology
0 Comments
10 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
9,240
On SlideShare
0
From Embeds
0
Number of Embeds
932
Actions
Shares
0
Downloads
165
Comments
0
Likes
10
Embeds 0
No embeds

No notes for slide

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

×