Website Usability analyseren
Consultants:
Naam: Sander Van Hulle, Stef Brack, Matthias Gillis
Bedrijf:
Naam: Brasserie Plan B
Adres: Stationsstraat 2, 9950 Waarschoot
Website Usability analyseren
Hier een screenshot van de homepagina van het bedrijf Brasserie Plan B.
Usability Audit
1. Toegankelijkheid
1.1 Observatie: De website is niet volledig mobiel‑vriendelijk (responsive design).
Getest op: Android 14 – Chrome De homepage schaalt niet altijd correct: tekst overlapt soms, knoppen zijn klein en sommige elementen vallen buiten het scherm.
Gevolgen:
– Bezoekers op smartphone (meer dan 60% van alle websitebezoeken) ervaren frustratie.
– Google straft websites die niet mobielvriendelijk zijn → lagere vindbaarheid.
– EAA2025: websites moeten bruikbaar zijn op mobiele toestellen voor mensen met motorische of visuele beperkingen.
Advies:
– Gebruik grotere knoppen.
– Zorg dat tekst automatisch schaalt en nooit buiten het scherm valt.
– Test in je CMS met een “mobile preview” en pas de layout aan.
(EAA2025, Obs.)
1.2 Observatie: Afbeeldingen hebben geen of onduidelijke ALT‑teksten.
Gemerkt via HTML‑inspectie en via een accessibility‑tool zoals WAVE of SiteImprove.
Gevolgen:
– Slechtzienden krijgen geen beschrijving via voorleessoftware.
– Google kan de afbeeldingen niet indexeren → minder SEO‑waarde.
– EAA2025 verplicht correcte ALT‑teksten.
Advies:
– Voeg bij elke foto een korte, betekenisvolle beschrijving toe. Voorbeeld: “Terras van Brasserie Plan B met 40 zitplaatsen”.
(Obs, Tool: WAVE, EAA2025)
1.3 Observatie: Tekstcontrast is soms onvoldoende.
Vooral witte tekst op foto’s.
Gevolgen:
– Mensen met slecht zicht kunnen tekst moeilijk lezen.
– EAA2025 vereist minimum contrastverhoudingen.
Advies:
– Gebruik donkere overlay achter tekst op foto’s.
– Of kies voor donkerdere tekstkleuren.
(Tool: WebAIM Contrast Checker, EAA2025)
1.4 Observatie: Geen duidelijke focus‑indicator voor toetsenbordnavigatie.
Gevolgen:
– Mensen die geen muis gebruiken (motorische beperking) kunnen de site niet bedienen.
– EAA2025‑vereiste.
Advies:
– Activeer in je CMS een duidelijke focus‑stijl
(bijv. blauwe rand rond knoppen).
(Obs, EAA2025)
2. Identiteit
2.1 Observatie: De website gebruikt geen duidelijke tagline of kernboodschap bovenaan.
De homepage toont foto’s, maar niet meteen wat Plan B precies is.
Gevolgen:
– Nieuwe bezoekers begrijpen niet onmiddellijk of dit een brasserie, café of restaurant is.
– Kans op afhaken binnen 3 seconden.
Advies:
– Plaats bovenaan een duidelijke zin zoals: “Gezellige brasserie in het hart van Waarschoot – lunch, diner en seizoensgerechten.”
(Obs.)
2.2 Observatie: Contactinformatie staat niet op elke pagina.
Je moet soms scrollen of zoeken.
Gevolgen:
– Bezoekers vinden niet snel telefoonnummer of adres.
– Minder reservaties.
Advies:
– Plaats telefoonnummer en adres in de header of footer op elke pagina.
(Obs.)
3. Navigatie
3.1 Observatie: Navigatie bevat weinig structuur en mist logische groepering.
Voorbeeld: menu-items staan niet altijd in een duidelijke volgorde.
Gevolgen:
– Bezoekers moeten zoeken naar info zoals menu, reservatie, openingsuren.
– Onnodige frustratie → afhaken.
Advies: Voorstel voor duidelijke navigatiestructuur:
(Obs.)
3.2 Observatie: De navigatie is niet sticky op mobiel.
Bij scrollen verdwijnt het menu.
Gevolgen:
– Gebruikers moeten terug naar boven scrollen → slechte UX.
– Vooral lastig op smartphone.
Advies: – Activeer “sticky header” in CMS.
(Obs.)
4. Inhoud
4.1 Observatie: Tekst is beperkt en soms niet informatief genoeg.
Bijvoorbeeld: geen duidelijke uitleg over keuken, specialiteiten, prijzen.
Gevolgen:
– Bezoekers weten niet wat ze mogen verwachten.
– Minder reservaties.
Advies:
– Voeg korte, duidelijke paragrafen toe zoals: “Plan B serveert seizoensgebonden gerechten met lokale producten. Onze specialiteiten zijn …”
(Obs.)
4.2 Observatie: Menu wordt als afbeelding getoond i.p.v. tekst.
Veel brasserieën doen dit, maar het is niet ideaal.
Gevolgen:
– Niet leesbaar voor slechtzienden.
– Niet indexeerbaar door Google.
– Niet mobielvriendelijk.
– EAA2025‑probleem.
Advies:
– Zet het menu om naar echte tekst in de website.
– Gebruik foto’s enkel als extra sfeerbeeld.
(Obs, EAA2025)
Bronvermelding
Gebruikte tools:
– WAVE Accessibility Checker https://wave.webaim.org/
– WebAIM Contrast Checker
- HTML-inspectie in Chrome
- Google Mobile Friendly Test
Maak jouw eigen website met JouwWeb