Sandra, vanuit de zetel achter mij, kloeg over de site van Open Monumentendag. Dat ze er niet in slaagde om te zoeken wat er in Gent te doen was.

Ik naar de website.

Oh boy. Oh boy, oh boy, oh boy.

Dit is waar Sandra over gestruikeld was:

Als ik een gemeente wil selecteren, komt er aan de linkerkant (waarom links als het overal elders rechts is?) een dingetje met twee pijltjes (waarom geen scrollbar?). Om naar beneden te gaan, is mijn eerste instinct, als er geen scrollbar staat, op het pijltje naar beneden te klikken. Dat was bij Sandra ook het geval. Noch bij mij, noch bij haar gaf dat enig effect, en dus heeft zij het opgegeven.

Even op een rij, te beginnen met het meest voor de hand liggende en tegen de borst stotende.

Origineel doen in user interfaces is geen goed idee.

Geen. Goed. Idee. Zeer, zéér soms mag het wel eens. Als het een toepassing is voor een beperkt publiek, pakweg. Of als het een toepassing is waar de snelheid van werken bijzonder belangrijk is voor de gebruikers (denk aan de duizend shortcuts in Photoshop). Of als het een toepassing is waar men niet snel mág werken (denk aan een webgestuurd controlepaneel voor een kerncentrale). Of zo.

Het is niet alsof ik dat hier ter plekke uitvind, uiteraard. Jakob Nielsen verwoordt het azo:

Basic GUI widgets — command links and buttons, radio buttons and checkboxes, scrollbars, close boxes, and so on — are the lexical units that form dialog design’s vocabulary. If you change the appearance or behavior of these units, it’s like suddenly injecting foreign words into a natural-language communication. […] For some reason, homemade design’s most common victims are scrollbars. For years, we’ve encountered non-standard scrollbars in our studies, and they almost always cause users to overlook some of their options. […] Some of the world’s best interaction designers have refined the standard look-and-feel of GUI controls over 30 years, supported by thousands of user-testing hours. It’s unlikely that you’ll invent a better button over the weekend.

Een eenvoudige test, beste mensen van Open Monumentendag: kijk eens na hoeveel zoekopdrachten er zijn op de eerste acht gemeenten in elke mogelijke lijst (algemeen, en per provincie), en vergelijk die in een grafiekje met het aantal zoekresultaten op alle andere gemeenten.

En leg die resultaten dán maar eens uit aan de mensen van Lebbeke. Of Zomergem.

Affordances zijn geen optionele extra’s

Ik weet niet of er een goed Nederlands woord voor bestaat, maar affordances, dat zijn dingen die u een aanduiding geven dat er iets kan gedaan worden.

In onze keuken is het niet erg als er op de laden geen handvaten zitten: wij weten dat we er eventjes tegen moeten tikken om de laden naar buiten te laten schuiven. In een vliegtuig zou het géén goed idee zijn om de vakken van de handbagage zonder handvaten uit te werken: dan zouden de mensen niet weten dat die dingen open gaan, namelijk. En dan zouden ze gelijk apen op een kluit staan staren, rechtop in het gangpad, en dan zou het zeven keer zo lang duren als anders om een vliegtuig vol passagiers te krijgen.

Even terug naar het ding van hierboven, om een gemeente te selecteren. Ik ga het er niet over hebben dat ik heel erg graag zou hebben da the tscrollwiel vn mijn muis werkt. En zeker niet dat als ik geen muis bij de hand heb, ik dan net zo goed met een klomp beenhesp naar mijn scherm kan staan zwaaien als wat anders doen: accessibility is voor mietjes, meneer.

Nee, bekijk dit even:

Wat zegt dit mij? Ik zie twee pijltjes, ik vermoed dat ik daarop kan klikken. Als ik er met mijn muis over ga, dan verandert er niets aan mijn muispijltje of aan het pijltje waar ik naartoe ga: dat zegt mij niets méér.

Ik kan mij inbeelden dat het ab-so-luut niét (omaaigauwd!) met de standaard-webbrowser-dingen kon gemaakt worden, dit formulier: ah nee, da’s zo lelijk en grijs, en de mensen weten te goed hoe ze daarmee moeten werken, want ze worden nu eenmaal in, oh, al hun andere programma’s gebruikt, juist?

Maar is het dan écht zo moeilijk om iets dergelijks te doen?

En als men dan ergens in het midden van de lijst zit, dat dat er zó uitziet?

En als ik met mijn muis over die pijltjes boven en onder ga, dat die dan een beetje oplichten, zodat de mensen weten dat er iets zal gebeuren als ik erop klik? En dat donkergrijs blokjes in de scrollbar, dat ik dat ook kan slepen en dat dat ook een beetje oplicht (een randje errond of zo) als ik er met mijn muis over ga? En, om het helemaal in orde te maken, dat ik ook op de scrollbar boven en onder het blokje kan klikken om de lijst gemeentes per negen naar boven en onder te laten schuiven (of pak per acht, dat er een aanknopingspunt is)? Wat meer affordances, met andere woorden?

Nee, dat zou niet zo moeilijk zijn. Doet dat dan, dedju! Zoals het nu is, die scrolling in dat select)ding, wel: ik vind dat van een bijne criminele negligentie getuigen.

 

Een website is geen rebus

Hierzie, kijk en raad mee, beste kijkbuiskindjes:

Okay, ik zie naast “Toegankelijk” vier checkboxen staan. Dat eerste is een rolstoel, helder: zoeken naar monumenten die toegankelijk zijn voor rolstoelen.

Dat tweede is, vermoed ik, een oog. Zoeken naar monumenten die toegankelijk zijn voor blinden, schat ik. Dat derde, dat had ik dus echt waar eerst herkend als een een fa-sleutel, maar in de context kan het niet anders dan een oor zijn: zoeken naar monumenten die toegankelijk zijn voor doven. Ik weet niet wat ik me daarbij moet voorstellen, maar alla. Ik vermoed dat het zoeken is naar monumenten met gidsen in VGT?

Maar dat vierde: enig idee, iemand? Een mannetje? Een microfoontje? Een cocktailglas met een stokje erin? Toegankelijk voor mannetjes die stokstijf blijven staan?

Geen idee, echt niet.

Mystery Meat is de term voor het technisch gezien vleesproduct waar bijvoorbeeld Samson-worst van gemaakt is. Mystery Meat-navigatie in websites is van die navigatie waar je moet op klikken, of met de muis overgaan vóór je weet wat er achter zit.

Dit zijn mystery meat select boxen.

De meest eenvoudige oplossing zou geweest zijn om de icoontjes achterwege te laten en een tekst te zetten. Een andere, voor het “design” minder ingrijpende maar toch nog eenvoudige oplossing was wellicht om een tooltipje te laten verschijnen als je met de muis over de optie gaat.

Hier is gekozen voor een derde optie: een helpfunctie voorzien. (Klein richtlijntje tussendoor: als een eenvoudig zoekscherm een helpfunctie nodig heeft, dan is het niet echt een eenvoudig zoekscherm.)

Al gevonden, de helpfunctie? Jawel: dat minsukuul, lichtgrijs-op-donkergrijs vraagtekentje dat daar een beetje eenzaam helemaal rechts staat. Klik er gerust maar eens op…

Hoe? Er gebeurt niets? Aha, maar dan hebt u waarschijnlijk een webbrowser die ergens in de loop van de afgelopen drie jaar uitgebracht werd:

‘t Is een pop-up-venster, namelijk. Dan moet je expliciet een uitzondering toevoegen met mijn browser. Ik heb dat dan maar gedaan. Blijkt?

Het is een mannetje, en een rechtopstaand mannetje is blijkbaar het internationaal aanvaarde icoon voor “Het personeel is op de hoogte van specifieke aandachtspunten in de omgang met mensen met een handicap”.

 

Leesbaarheid, hulp!

Ik heb niet zo’n al te beste ogen. Mijn bril corrigeert dat wel bijna allemaal, maar toch. Open Monumentendag is, dacht ik, voor iedereen toch?

Kan iemand me dan uitleggen wat in ‘s hemelsnaam de reden was om van die minuskule lettertjes te gebruiken?

Iedereen doet zijn goesting op zijn eigen website, vind ik, maar een website van de overheid moet standaard een leesbaar lettertype hebben. En nee, kom niet af met de dooddoener dat “mijn webbrowser dat toch kan vergroten”. Ja, dat kan, maar vind mij in een kamer vol Open Monumentendagbezoekers drie man die dát weet en ik trakteer u op een frisco.

Oh, en is iemand bereid om weddenschappen aan te gaan hoe leesbaar dit is?

Alvast op mijn computer, mijn monitor en voor mijn ogen, is dat oranje op grijs on-lees-baar. Het schettert en het blinkt, en mijn ogen gaan ervan tranen.

Het is verloren gezegd, vrees ik. Arty Farty kleine lettertjes, dat presenteert beter in een screen shot, vermoed ik. Of zo. Ik zie geen andere verklaring.

…en dan heb ik het niet eens over persoonlijke stokpaardjes zoals slechte kerning gehad:

In “haal dit boek af”: waarom staat de i in “dit” tegen de t geplakt?
Of in “Standaard Boekhandel”: waarom staat er een pixel teveel tussen de twee a’s? En een pixel teveel links én rechts bij de a van “handel”?

Wat hierboven staat is—in des hemels naam—een grafische banner! Dat wil zeggen dat je het als maker tot de pixel onder controle hebt! Spendeer dan godverdomme een extra minuutje om het tot op de pixel goed te hebben!

 

Ach, ik mag me niet opwinden. Da’s niet goed voor een mens. Ik stop er dan maar mee, denk ik. Gnn.

Al kan ik nog wel een eindje verder gaan hoor.

Allez ju.

Om het af te leren.

Dat menu bovenaan, en de navigatie in het algemeen, en de pagina’s in het algemeen

Wat de hel is daar gaande? Wie de hel heeft dat een goed idee gevonden?

Navigeren op een website, ondertussen, na, oh, ik weet niet, tien jaar of zo, is toch wel bekende kost voor de meeste mensen, toch? Websitebouwers en—vooral—websitegebruikers?

Okay. Dit is de homepagina, juist?

Zo ziet die er voor mij uit, tenminste. Voor de meerderheid van de mensen ziet ze er zó uit:

Snel: wat gebeurt er als ik op “Contact” klik? En wat gebeurt er als ik op “Praktisch” klik? Op welke pagina zit ik, aan onderstaand menu te zien? Hoe geraak ik, als ik op het onderstaand menu zit, terug op de homepagina?

Wat gebeurt er als ik op “Contact” klik? Dan kom ik op de de contactpagina terecht. Logisch. Jammer maar helaas: de pagina springt irritant flikkerend open en dicht. Dat is eraan gelegen dat er allerlei met Flash ingeladen moet worden, dat er eerst een foto getoond wordt in de hoofding, en aangezien ik dan met mijn muispijltje in de (nieuwe) hoofding sta, dat die foto meteen vervangen wordtdoor een groot grijs vlas, in een oogwenk, maar dan wel storend flitsend dus. Maar goed. Passons.

Wat gebeurt er als ik op “Praktisch” klik? Ah. Dan gebeurt er helemaal niets, en ziet de hoofding er zo uit:

– Hoe, maar waarom versprong ik daarnet van pagina als ik op “contact” klikte, en gebeurt er nu helemaal niets als ik op een nader item uit dezelfde list klik? Verklare wie verklaren kan. (Voor de goede order: ik kan zó twee, drie voor “ontwerpers” en/of programmeurs “geldige” redenen verzinnen hoor. Maar dat er beperkingen zijn in het CMS of dat het moeilijk te bewerkstelligen was, is géén reden. De gebruiker komt eerst, niet het programmeerframework.)

– Hoe, maar ik zat daarnet toch op de Contact-pagina? Waarom staat dat niet meer aangeduid? (Hint: we zitten nog altijd op de “Contact”-pagina, ‘t is gewoon dat het niet consistent is met wat er op de homepagina gebeurt: daar blijft “Home” in het vet en het oranje staan–wat overigens ook geen goede oplossing is, maar alla.)

– Als er toch een “Praktisch – Praktisch”-pagina is, waarom moet ik twee keer klikken om daarop terecht te komen? En wat zie ik nu? “Praktisch – praktisch”, “20 jaar OMD – Laatste updates”, “Jongeren – wedstrijd”? Zou het niet gemakkelijk zijn, om alle misverstanden te vermijden—pas op, ik ben geen ontwerper hé—om iets in deze zin te doen (maar dan wel dat oranje wat aanpakken, zo is het helemaal onleesbaar)?

Op welke pagina ik zat, daarnet? Ik zat op de homepagina. Tiens, de homepagina, was dat niet die pagina met het “zoek per provincie”-formulier naast het menu? Neen, dat is niet zo. De homepagina is de pagina waar die grote foto van 2/3 van het hoofd van een doorschijnende meneer op staat, en daaronder een tekst over “20e editie – 20e eeuw”.

— Dat is nu toch ondertussen ook wel een basisregel, nee? Dat er voldoende onmiddellijk bruikbare informatie ergens bovenaan de pagina moet staan?

Nee dus, blijkbaar. Hoe geraak ik terug op de “homepagina”? Tja. Niét, dus, want we zitten al op de homepagina. Klikken op het logo doet helemaal niets. Klikken op “Home” doet ook helemaal niets.

— Ook dat is nu toch ongeveer een basisbeginsel? Dat er linksboven een logo staat en dat een klik daarop u naar de hompagina—’t is te zeggen de beginpagina zoals die ervaren wordt door de gebruiker—brengt?

Hoe geraak ik naar de “zoek per provincie”-“pagina”? Ah, eenvoudig: klikken op “Programma”. Inderdaad: klikken op “Programma”, om het even waar ik zit, geeft in de ruimte naast het menu een paginahoofding “Zoek per provincie”. Ik zou niet weten wat ik moet doen om het Programma te vinden.

— Heb ik nu al járen in een parallel universum geleefd of zo? Een link in een navigatiemenu, dat brengt u naar een pagina met dezelfde titel, of als er te weinig plaats is in het menu, naar een pagina met een vergelijkbare titel. Ik had vrede genomen met een paginatitel van “Zoeken in het programma”, of met een linktitel van “Zoeken”.

— Maar eigenlijk, eigenlijk, is het niet ondertussen min of meer algemeen gangbaar dat er ergens op een dergelijke site een rechtstreekse ingang naar een (eenvoudig) zoekformulier staat? Oh ja, inderdaad, kijk, daarboven rechts, precies waar ik het verwachtte. Ik ben op zoek naar OMDjunior, even ingeven… check it out!

Wohow! Een nieuw uitzicht, met overal reclame! Funky! Kijk eens aan, de eerste link is meteen relevant! De titel (“20 eDitie20 eeuw”) is wel wat vreemd, maar kom. Klikken, die handel:

Not Found

The requested URL /nl/goto.cgi was not found on this server.

Okay… hoeveel dingen kan een mens verkeerd doen in één? Even tellen:

1. Ik weet heus wel dat die zoekfunctie mij geen zoeken binnen de Open Monumentendagsite gaat geven, en dat het enkel een default-search van Zita is, maar hoeveel mensen weten dat nog? En hoe redelijk is het om dat te verwachten, als het op zowat elke serieuze site wél zo is dat er ergens (rechts)boven een zoekveld is?
2. Vul een zoekterm in en klik op “zoeken”: het resultaat wordt in een nieuw venster geopend. Dat is degoutant. Uit algemeen principe, maar hier a fortiori: ik ben wég van de Open Monumentendagsite, en ik kan niet terugkeren door “back” te doen. Dat maakt het internet kapot.
3. Het eerste zoekresultaat: de titel is nonsens. Paginatitels moeten de pagina juist omschrijven.
4. Het tweede zoekresultaat (dat dus wél het correcte is, en alle lof gaat naar Google) heeft opnieuw een paginatitel die anders moet: “Open Monumentendag Vlaanderen” zou eigenlijk iets moeten zijn als “Jongeren – OMDjunior – Open Monumentendag”. Het moet duidelijk zijn aan de titel waar ik op terechtkom (en als er veel vensters openstaan is het handiger om de meest significante inhoud links te zetten, anders komen er misschien wel allemaal vensters met “Open Monumentenda…” in de taakbalk).

Het resultaat van klikken op de eerste link is een 404–pagina, ‘t is te zeggen dat de pagina niet (meer) bestaat.

5. Ergens heeft iemand tijdens de ontwikkeling van de site, als het nog met voorlopige URL’s werkte, met een vorige versie, of wat dan ook, de site lang genoeg open laten staan zonder (afdoende) robots.txt-pagina, zodat de voorlopige/incorrecte/vorige pagina’s geïndexeerd zijn. Slordig.
6. De 404–pagina is een vieze 404–pagina. Er zijn, opnieuw na ettelijke jaren ervaring, stapels richtlijnen van hoe een goede 404–pagina er moet uitzien: geef een boodschap in mensentaal, geef een richtlijn van waar naartoe (een index of een sitemap of een zoekpagina of zo), geef zeker ook een link naar de homepagina, geef eventueel de mogelijkheid om feedback te geven aan de “webmaster”.
   Die foutpagina, trouwens, wordt aan alle gebruikers voorgeschoteld die een verkeerd adres ingeven: probeer maar eens http://openmonumenten.zita.be/awoert-slechte-404-pagina.php.
7. Eens het geweten was dat de “verkeerde” URL’s in Google terechtgekomen waren, had men als de weerlicht een automatisch doorverwijsscriptje moeten schrijven, zodat de gebruikers nooit met die foutboodschap geconfronteerd werden. Hoezo? Worden de statistieken niet dag na dag nagekeken op fouten soms?

 

Ach, het blijft écht maar doorgaan. Eéntje, echt nog ééntje, om het af te leren. Ik zit op deze pagina:

Daar staan twee foto’s op. Lovenswaardig idee (al is het géén goed idee dat die foto’s in de header voortdurend verspringen: een gebruiker heeft een zeker houvast nodig, als hij op een link klikt, dan meteen “back” doet omdat hij merkt dat hij verkeerd zit, en hij komt dan terecht op een pagina waarvan het meest opvallende element, de banner bovenaan, helemaal veranderd is, dan vraagt hij zich denk ik misschien wel af waar hij nu weer terechtgekomen is, maar dat was mijn punt niet en ik had beloofd er maar ééntje meer te maken), lovenswaardig idee dus, en kijk wat er gebeurt als ik met mijn muis over zo’n foto beweeg:

Dat vind ik dus een zeer goed idee. Een bijzonder goed idee… maar ook hier helaas close, but no cigar. Klikken op “Bezoek dit monument” brengt mij naar deze pagina:

Een pagina zónder enige foto! Hoe-is-dat-in-‘s-hemelsnaam-mogelijk! En ja, ik weet dat het wellicht uit twee verschillende databasetjes komt, eentje met foto’s en eentje met het programma erin, maar dat is geen excuus. Het is een kleintje om dat mee te nemen. Gedomme.

(en merk ook op dat er helemaal onderaan zo’n peetje staat, nu helemaal zonder enige uitleg of vraagteken of watdanook) (het was ongetwijfeld te moeilijk om te programmeren dat daar in de plaats van dat rebus-hiërogliefje de zin “Het personeel is op de hoogte van specifieke aandachtspunten in de omgang met mensen met een handicap” zou staan)

(tijd dat ik weer mag gaan werken, denk ik)