De 10 meest voorkomende fouten op websites. En hoe ze te vermijden. 10 tips dus om je conversie te verhogen.

1. 10 grootste usabilityproblemen= 10 tips voor meer conversie Karl Gilis – De 'G' in AGConsult Web usability & Informatiearchitectuur Twitter: @AGConsult E-mail: karl.gilis@agconsult.be

2. Bij AGConsult baseren we zowat alles wat we doen op gebruikersonderzoek. Geen meningen maar feiten. Dankzij gebruikerstesten weten we dat op een gemiddelde website 40% tot 60% van de bezoekers hun doel niet kan bereiken. Ze kunnen op die website niet vinden of doen wat ze willen doen. Er is dus ruimte voor verbetering. Ongeveer 30% van de problemen heeft een technisch-vormelijke oorzaak. 70% van de problemen vindt hun oorsprong in de inhoud, structuur en terminologie van de website. In deze presentatie komen de 10 meest voorkomende en ergste fouten anno 2011 aan bod. En gelukkig ook wat je er aan kan doen.

3. 1. Focus!

4. Het allergrootste probleem van de meeste websites is dat er te veel afleiding is. Op de homepage, keuzepagina's en detailpagina's staan te veel zaken die er eigenlijk niet toe doen. Zaken die verhinderen dat bezoekers hun doelen kunnen bereiken, of dat op z'n minst bemoeilijken of vertragen. Dat is zonde. Je 'core website' is dat deel van je website waar het uiteindelijk om draait: producten, diensten, supportpagina's, … Dat deel moet 100% gericht zijn op de doelen van je bezoekers. Elke hindernis in dat deel van je site kost je geld. Wat je doet in omkaderende rubrieken zoals je blog, tips en tricks-rubriek, … is best ook efficiënt. Maar daar kan en moet je meer de afweging maken tussen eigen doelen (beter scoren in Google, bezoekers lokken naar je productpagina's, …) en de doelen van je bezoekers.

5. Core website: 100% focus op doelen bezoekers

6. 2. Stop met nieuws te kakken

7. Amper 1% komt om nieuws te lezen. De nieuwslezers behoren zelden tot je echte doelgroep... De homepage is geen gazet

8. Wij doen veel onderzoek via online enquêtes naar de toptaken van bezoekers. Daaruit blijkt dat ongeveer 1% van de bezoekers komt om het nieuws te lezen of voor 'nieuwtjes'. Een verwaarloosbaar aantal dus. Zeker als je weet dat ongeveer de helft van hen ex-werknemers of concurrenten zijn. Mensen die dus niet tot je doelgroep behoren. Voor webbouwers en designers: zorg dat er in je templates weinig plaats is voor nieuws en dat dit nieuws de toptaken niet in de weg staat. Voor webeigenaars: stop met te denken dat klanten en potentiële klanten geïnteresseerd zijn in je nieuws.

9. Deze website draait rond het idee 'doe mee'. Maar veel plaats om mee te doen is er niet. 60% van de homepage wordt ingenomen door 'kijk eens wat wij doen'. Nieuws. Nieuws. Nieuws.

10. Vraag Watzijnvolgensjullie de toptakenvoor de websites van Esso, Fina, Shell, Q8 or Lukoil?

11. Ik ben zeker dat je denkt aan ‘prijzen’ en ‘waar vind ik een tankstation’. Vraag dit aan 100 mensen en dat is met voorsprong de top 2. Maar wat doet Esso?

12. Zeer weinig van dat. Op Esso.be staat het logo van ExxonMobil en veel saai (en verouderd) nieuws. Absoluut niet wat bezoekers verwachten. Reactie van Esso: "Ja, maar dat is wel onze corporatestrategy." Ons antwoord: "Awel, dan is je corporatestrategy slecht en aan herziening toe."

13. Dit is wat bezoekers verwachten. De toptaken in the picture. En onderaan, uit het zicht, 1 nieuwsheadline.

14. 3. Homepage = uitvalsbasis

15. Dat veel mensen dankzij je geweldige zoekmachine-optimalisatie niet meer via je homepage binnenkomen, wil niet zeggen dat je je homepage mag verwaarlozen. Een pak mensen komt nog steeds binnen via je homepage. En veel bezoekers die even op je site blijven, zullen op een gegeven moment langs de homepage passeren. Waarom? Omdat ze de homepage beschouwen als een uitvalsbasis. Bezoekers rekenen er op dat de homepage (samen met de navigatie) hen zo snel mogelijk bij hun doel brengt. Vergeet immers nooit dat elke persoon die op je website komt, die website bezoekt met een doel voor ogen.

16. Veel homepages zijn erg egocentrisch. Ze zetten de eigen projecten, realisaties, het oh zo belangrijke nieuws en andere onzin in de kijker. Waar moet ik zijn voor mijn visvergunning, nochtans een toptaak voor deze website? Whocares!

17. Er is in 10.000 jaar nog nooit iemand naar Deloitte gesurft om te weten of Deloitte de grootste is. Dat is absoluut geen toptaak. Dit is pure horror.

18. Stop met welkom-boodschappen en uit te leggen hoe je webshop werkt. Toon centraal je productaanbod- of productcategorieën. En zet rechts een groot blok met de basisgegevens van je fysieke winkel.

19. Door focus op toptaken is meteen duidelijk wat je doet.

20. Duidelijke blokken sturenbezoekers meteen naar dat deel van de site dat voor hen belangrijk is.

21. Meer dan 55 links en toch geen overladen gevoel. (Maar dat nieuws kon wel kleiner…) Het probleem van deze blokjes is dat relatief weinig mensen klikken op 'meer'.

22. In deze variant klapt het blokje open zodra je er met je muis overkomt. Zo worden alle links meteen zichtbaar. De homepage als een soort veredelde sitemap dus.

23. 4. Geen inwisselbare navigaties

24. De termen in je navigatie moeten duidelijk maken wat je doet. Zo ziet elke bezoeker op elke pagina van je website wat hem te bieden hebt. En dan snapt Google nog beter wat je doet en zal je ook beter scoren voor die zaken. De woorden (en links) van je hoofdnavigatie staan zo op elke pagina. De meeste bedrijven hebben nietszeggende navigaties die onderling inwisselbaar zijn. Raad op de volgende slide maar eens wat die bedrijven doen (ik heb hun logo’s weggelaten).

26. Jawel, een schoenwinkel. En als schoenwinkel is het natuurlijk belangrijk om het 'concept' van je winkel uit te leggen of een 'speelhoek' voor kindjes te voorzien. Want wie zou nu termen als 'mannenschoenen', 'vrouwenschoenen', kinderschoenen', 'sportschoenen', 'handtassen' etc. willen? Dat zou veel te duidelijk zijn. En wie weet verkopen we dan wel schoenen online. Help.

27. 2 consultingbedrijven met een navigatie die het imago van consultantsalleen maar versterkt: nietszeggend en vaag. Miljoenen bedrijven kunnen dezelfde termen in hun navigatie hebben staan. Zeg wat je doet. Bij Deloitte bijvoorbeeld 'Accounting', 'Tax services', 'Auditing,'Financial Advice' etc. En in godsnaam: denk je dat een klant weet wat het verschil is tussen een solution en een service?

28. Dit is de navigatie van een bandenmerk. Denk je echt dat mensen die op zoek zijn naar een band eerst over je merk willen lezen (About Bandag) of over hoe je die banden maakt (RetreadProcess)? Waarom verstop je je producten onder een term 'Products'? Niets in je navigatie zegt wat je doet. Bouw je navigatie liever op rond termen als 'Zomerbanden', 'Winterbanden', 'Offroad banden' en 'Bandenkiezer'…

29. Een kledingmerk dat in hetzelfde bedje ziek is. Dat waar het echt om draait, verstoppen achter het nietszeggende 'Products'. Zo is er plaats voor wat je zelf wil vertellen maar waar waarschijnlijk niemand in geïnteresseerd is. Je 'Technology', je wereldschokkend 'News' en die oh zo fantastische 'Downloads'.

30. Dit is hoe het moet. Hier zie je meteen wat het bedrijf je te bieden heeft. De keuzes zijn duidelijk én gebaseerd op wat mensen zoeken op internet. Bij AGConsult helpen we je graag om de inhoud en navigatie van je website af te stemmen op de bezoeker. Mail karl.gilis@agconsult.be of bel +32 3 293 39 96 voor meer info, een babbel of een offerteaanvraag.

31. 5. Fat-free keuzepagina’s

32. Een keuzepagina of categoriepagina is een pagina waarop de bezoeker nog verdere keuzes heeft. Bijvoorbeeld alle 'Services' of 'Tax services' of 'Luiertassen' of 'Zomerbanden'. Op zo'n pagina moet de focus volledig liggen op de keuzes. Op je aanbod. Weg dus met nietszeggende intro's, afleidend nieuws en andere onzin.

33. De tijd die werd besteed aan de inleidende paragraaf zijn verloren moeite. Pure bladvulling. Bla-bla.

34. Mensen gaan naar Deloitte omdat ze hulp nodig hebben met hun internationale fiscaliteit. Die weten dat dat complex is. Die willen weten hoe Deloitte hen kan helpen. Schrap de zever en zeg hoe je hen kan helpen! Nu vallen de keuzes bijna buiten beeld (onder de groene tussentitel).

35. De pagina 'Gamma' van een watermerk. Vraag aan 100 mensen wat ze denken dat er op de pagina 'Gamma' staat van een watermerk. Van de mensen die het woord 'Gamma' verstaan zal minstens 90% antwoorden: "plat water, spuitwater, zoiets?" Niemand zal zeggen: "glazen en pet flessen?" Zorg dus dat je aanbod is ingedeeld volgens de logica van je klant en niet je eigen logica.

36. De vorige slides toonden hoe keuzepagina's niet moeten zijn. Op de volgende slides staat hoe het wel moet.

37. Mogelijkheid 1: Blokjes, al dan niet met links

38. Een vaak voorkomende fout is dat op zo’n keuzepagina een subnavigatie staat. Omdat die herhaalt wat in het midden staat, kan je die gewoon weglaten.

39. En val op deze pagina de mensen asjeblieft niet lastig met je nieuws. Deze pagina moet hen helpen vinden wat ze zoeken! Leg de volledige focus op die keuzes (en doe potverdekke die stomme achtergrondfoto weg).

40. Mogelijkheid 2: Links onder elkaar, gegroepeerd Als je heel veel keuzes hebt, zet ze dan mooi gegroepeerd onder elkaar. Hier heeft de linkernavigatie wel zin, omdat ze het hogere niveau toont.

41. Mogelijkheid 3: Visueel overzicht productaanbod Op de linkerbalk na, eigenlijk een geniale pagina. Eenvoudig en het lijkt zeer vanzelfsprekend. Maar hoeveel bedrijven hebben zo’n zuivere keuzepagina’s?

42. Hetzelfde basisprincipe. Zet bij productkeuzepagina's ook de belangrijkste kenmerken en beslissingscriteria erbij. Help de surfer kiezen!

43. Mogelijkheid 4: Vergelijkende tabel Als je producten hebt die vergelijkbaar zijn, maak het vergelijken dan zo eenvoudig mogelijk. Lees er alles over op http://usability-blog.be/productkeuzepagina-voorbeelden/ ?

44. Uiteraard zijn er nog meer mogelijkheden Ook een goed voorbeeld van een keuzepagina. Geen blabla. Gewoon: kiezen!

45. 6. Overtuigende detailpagina’s

46. Waar het uiteindelijk om draait, is je detailpagina. De pagina waarop je een bepaald product of een dienst aanprijst. Of waar je een antwoord geeft op een vraag van de bezoeker. Zo'n pagina moet een instant overtuigingskracht hebben. Zeker voor bezoekers die rechtstreeks via Google op zo'n pagina terechtkomen. Voor hen is die pagina de eerste kennismaking met je website. Zij beslissen binnen de 4 seconden (meestal eerder 2) of ze op een pagina willen blijven of niet. Zo'n detailpagina moet de surfer dus binnen de 4 seconden bij de lurven grijpen.

47. Bekijk volgende pagina’s eens gedurende 4 seconden. Het zijn pagina’s van verzekeringsmaatschappijen over een woningverzekering. Dat weet je dus al. Daar was je naar op zoek in Google. Schrijf eens op wat je in die 4 seconden gezien hebt. En op welke pagina je zou blijven en op welke je onmiddellijk zou vertrekken.

51. Waarschijnlijk vond je AXA de slechtste pagina. Dat komt door de massa's tekst. Ethias vinden sommige mensen goed, anderen slecht. Goed omdat er enkele zaken in het oog springen (10% korting, offerte aanvragen) die aanzetten tot actie. Veel surfers zien die acties niet omdat ze in de bovenste helft van de pagina blijven hangen waar een al te grote navigatie om de aandacht schreeuwt. Een navigatie die op een detailpagina gerust heel bescheiden mag zijn. De meeste mensen vinden KBC het beste omdat die pagina een antwoord biedt op hun vragen. Beter gezegd: in die 4 seconden hebben ze het idee dat de pagina dat antwoord gaat geven. De pagina ziet er door de vele bullets en het gebruik van witruimte ook makkelijk verteerbaar uit

52. Bekijk nu ook nog eens de pagina van Amazon op de volgende slide. En verbaas jezelf over hoe snel je alles vindt wat echt belangrijk is bij een fototoestel (welk merk, welk model, hoeveel megapixels, de prijs en of je het nu kan kopen).

54. Ook bij Bol.com zie je meteen waarover de pagina gaat en wat de belangrijkste kenmerken zijn van het product. Begin dus met de belangrijkste kenmerken.

55. Doe dat ook op informatieve pagina's. Begin met het besluit of een executivesummary. Op onze blog zien we alvast dat op zo'n pagina's meer mensen het einde van de pagina halen. (In de ideale wereld zouden we dat ook nog in een iets grotere tekengrootte moeten zetten.)

56. Heel belangrijk zijn ook duidelijke tussentitels, zowel inhoudelijk als vormelijk. Daardoor kan een bezoeker snel die paragraaf vinden die hij nodig heeft.

57. Op langere pagina's zet je die duidelijke tussentitels best bovenaan als een aanklikbare inhoudstafel. Lees ons artikel over springlinks.

58. 7. Duidelijke calls-to-action op elke pagina

59. Het doel van de meeste websites is dat bezoekers iets kopen. Online of offline. Of dat ze je bellen. Elke detailpagina moet dan ook een duidelijke call-to-actionhebben die bezoekers aanzet tot wat jij wilt dat ze doen. Wees daar vooral niet bescheiden in.

60. De pagina van een schoen. En wat zijn de acties? Je kan de schoen delen op Facebookof een vriend iets vertellen over die schoen. Yes baby! Waar je de schoen kan kopen? Ja zeg, er staat toch een link 'Winkels' in de navigatie. Da'sniet goed genoeg.

61. Op deze pagina staat op zich wat er moet opstaan. Maar het staat niet goed. De prijs moet veel dichter bij de 'Koop online'-knop staan. Oei. 'Uitgerust met' niets en ook de 'Airessgarantie' stelt niet veel voor. Toch wel, maar om dat te zien moet je op de + klikken die nogal ver weg staat. Handig toch? Neen. Plezant om te maken. Lullig om te gebruiken.

62. Wees niet bescheiden. Hoezo 'Boek nu?' Als je zelf niet zeker weet of mensen nu bij jou een reis moeten boeken of niet gaan zij dat ook niet weten.

63. Asjeblieft. Dat is een call-to-action. Misschien niet mooi. Maar wel efficiënt.

64. 8. Pas op met de rechterbalk

65. Wij schreven er al in 2003 een artikel over. JakobNielsen bewees het via eyetracking in 2007 en gaf nog meer cijfers in 2010. En we zien het bij elke gebruikerstest opnieuw. Op detailpagina’s kijken mensen amper naar de rechterbalk. Op keuzepagina’s valt de situatie best mee (al hangt veel af van het design). Op de volgende pagina zie je het resultaat van het eyetracking onderzoek van Nielsen. De rode zones geven aan waar meer dan 80% van de mensen naar kijkt. Donkerblauw is nog 20 tot 40%. Geen kleur = niemand.

66. Op detailpagina’s is de rechterbalk dood

67. Belangrijke links, contactinfo etc. in de rechterbalk plaatsen is dus een heel slecht idee. Even effectief als olie blussen met water. Niet oké

68. 9. Eenvoudige procedures

69. Als het eenvoudiger kan, maak het dan eenvoudiger. Dat geldt zeker voor shoppingprocedures of andere interacties. Beperk het aantal stappen. Schrap optionele velden. Zorg voor 1 actieknop. Minimaliseer de afleiding. Schrap registratie!

70. Geef het aantal stappen van je winkelprocedure weer. Leg de focus op de knop betalen. Plaats die dichter bij de prijs en maak 'm groter. Weg met de afleiding rechts. Ik kan die boeken zelfs niet kopen. Wat voor zin heeft het dan?

71. “Als een veld optioneel is, waarom staat het er dan?”

72. Schrap optionele velden en doe vooral geen marktonderzoek ('Hoe heeft u ons gevonden?') in een bestelprocedure. Google Analytics iemand?

73. “Registrationkillsconversion” Verplichte registratie is in 90% van de gevallen echt heel dom. Het kost je geld doordat minder mensen kopen. Lees zeker http://usability-blog.be/waarom-registratie-slecht-is-voor-je-online-verkoop/

74. Hoe proper je dit scherm ook maakt, het zal altijd usabilityproblemen opleveren en mensen afschrikken. Schrappen dus.

75. Wat is dit allemaal? Wel een account, nog geen account, ga verder zonder account? Why? Why? Why?

76. Bij Booking.com geen verplichte registratie. Wel 150.000 verkopen per dag.

77. 10. Doe iets aan die verdomde zoekfuncties

78. Deze partij liet de regering vallen over BHV. Eens benieuwd wat zij dan denken over BHV…

79. Mmm… Niet veel …

80. Denk een klein beetje na Ik zocht naar ei. Niet naar madeleines, allesreiniger of een beige panty.

81. Een klein beetje maar Ik zocht naar prei. Niet naar een geurverspreider. Die nog leeg is ook.

82. En maak jezelf niet belachelijk Een leuke synoniemenlijst…

83. Lees de usability blog  http://usability-blog.be

84. Schakel een specialist in AGConsult 03 293 39 96 karl.gilis@agconsult.be www.agconsult.be Twitter.com/agconsult