Hoi twiceav,
Goed, ik zal niet ingaan op de codering, maar als ik op alle pagina's een <div> in de <head> zie staan, op de homepage een overbodig <iframe> tegen het lijf loop, en op de formules-pagina middenin dit tegenkom ...
HTML:
...
<div id="content">
<html>
<head>
<link href="stylesheet.css" rel="stylesheet" type="text/css">
</head>
<body>
...
... dan beginnen mijn vingers wel te jeuken!
=======
De usability dus, het gebruiksgemak voor de bezoeker.
Pagina-indeling
M'n eerste reactie toen ik de site zag: wat zit er veel wit bovenin, en waarom moet ik bijna meteen naar de scrollbalk grijpen om de inhoud te lezen? Ik wil lezen, en de eigenlijke inhoud van de homepage begint pas net iets boven de helft van het scherm.
- Mijn resolutie is 1280*1024px, daar kan het niet aan liggen. Maar bezoekers met kleinere beeldschermen (bv. de in opmars zijnde tablets) zien helemaal erg weinig:
- Uit tweederde van de pagina blijkt hier niet meteen uit de tekst dat we op de site van een restaurant zitten. En in de hoofdkop van de inhoud staat het ook niet. Wat dat betreft zou je ook kunnen denken dat het de site van een fabriek van messen en vorken is...
- Bij lagere resoluties is er ook een horizontale scrollbar nodig om de inhoud goed te kunnen lezen; maar het grootste deel van die scrollbar is overbodig: rechts zit alleen maar wit.
De header
In de header mis ik een duidelijk opschrift "
Restaurant 't Vijfde Seizoen".
Uit het logo blijkt wel dat het om iets met eten gaat, maar je moet het bestek tellen om er het woord 5 uit halen (en wie doet dat?).
De meeste bezoekers zullen het beeldgrapje niet door hebben. Er staat alleen:
't seizoen, en dat is de naam niet.
Ik zou de "
5e" er bij zetten.
Het logo is verder erg brokkelig, ook de letters komen slecht over. Dat heeft niet meteen met gebruiksgemak te maken, naar het geeft wel een slordige indruk die niet de uitstraling heeft die bedoeld zal zijn.
Oorzaak: de logo-afbeelding van 387*477px is veel groter is dan op scherm (geschaald naar 150*185px), en browsers kunnen lang niet zo mooi verkleinen als een tekenprogramma. Browsers kunnen images het beste 1:1 toegediend krijgen, dat maakt de pagina wegens een kleinere bestandsgrootte meteen wat sneller. Vergelijk:
Maar ja, ik zie hetzelfde logo op alle drukwerk en op het uithangbord terugkomen, dus of het haalbaar is om de 5 erbij te zetten weet ik niet. In mijn opinie: jammer, een gemiste kans, de 5 had er vanaf het begin al in moeten zitten.
Maar misschien mag het wel op de site, om vast aan het idee te wennen voor als er nieuw drukwerk gemaakt moet worden.
De kleine lettertjes
Het tweede waar mijn oog op viel, waren intrigerende kleine lettertjes onder het logo: wat staat daar?
- Met wat turen kon ik het ontcijferen: "Indien u problemen heeft met het aanklikken van de menu's, klik dan hier voor de compatibiliteitsweergave voor oudere browsers."
- Hmm, dat is niet zo gebruiksvriendelijk voor mensen met een oudere browser: die moeten een extra handeling verrichten om op te vangen dat de site het niet goed in alle browsers doet...
- Een deel van het publiek met oudere browsers zal dat niet doen (er overheen lezen of er geen zin in hebben).
- Maar een site hoort het gewoon te doen in alle browser(versie)s die op dit moment in gebruik zijn, en daar hoort de bouwer voor te zorgen!
- De technische term "compatibiliteitsweergave" zal lang niet door iedereen begrepen worden (moet je trouwens ook eens proberen: 3x snel achter elkaar uitspreken). Suggestie: het woord "compatibiliteit" laten vervallen en alleen "weergave" gebruiken.
- Verder zijn de lettertjes veel te klein voor goede leesbaarheid: vooral de wat oudere gasten zullen slecht of niet kunnen lezen wat er staat.
- De browsers kunnen de mini font-size van 10px bij het ingesloten webfont "MP_R" niet goed renderen, wat ook bijdraagt tot de slechte leesbaarheid.
boven: Chrome, onder: Firefox
links: ware grootte, rechts: 3x vergroot
- Maar het beste is om het hele blokje weg te laten, met een Conditional Comment de oude Internet Explorers (want daar gaat het om) er uit te pikken, en die automatisch door te sluizen naar de speciale IE-pagina's.
- En het allerbeste is natuurlijk om de pagina's zo te coderen, dat er helemaal geen speciale IE-pagina's nodig zijn.
Te grijs
Wat de leesbaarheid en het gebruiksgemak niet te goede komt is het gebruik van erg lichtgrijze letters in het topmenu. De Colour Contrast Analyser weet te vertellen:
- Voorgrond (letters): #999999, achtergrond: #FFFFFF. Kleurverschil: 306 / helderheidsverschil: 102.
- Het helderheidsverschil is onvoldoende. De drempelwaarde is 125, hier is het verschil 100.
- Het kleurverschil is onvoldoende. De drempelwaarde is 500, hier is het verschil 306.
- Er is zodoende een contrastverhouding van 2,8:1, dwz de helft of minder van wat nodig is (minstens 5:1, en liefst minimaal 7:1).
Mensen met een minder groot contrastvermogen (per definitie: met name mensen boven de 50) zullen hier moeite mee hebben. Met het toenemen van de leeftijd neemt het contrastvermogen aanzienlijk af.
Ruwweg genomen hebben ongeveer
40% (!) van de surfers een contrastvermogen dat maar 1/3 is van het contrastvermogen van iemand van 20.
Zie hier het verschil in contrastwaarneming (schrik niet!).
Tekst-typografie
Goed, ik begin te lezen. Hier heeft de vormgever zich uitgeleefd: een bijzondere opmaak!
Dit doet me denken aan de gedichten van Paul van Ostaijen:
Ook de opmaak van de tekst van 't Vijfde Seizoen is anders dan anders, en geeft de site wel een speciaal iets.
Maar ...
leesbaarheid van de tekst is een ander verhaal...
Na 3 zinnen heb ik het kunstje eigenlijk wel gezien, en zou ik wel in gewone links-uitgelijnde regels verder willen lezen: zonder bepaalde woorden die er uit springen door kleur of afwijkende lettergrootte.
- Wat ik me goed kan voorstellen, is dat deze opmaak het uitstekend doet op bv. een affiche: daarmee trekt het de aandacht van grote afstand, en als je dichterbij komt kan je het toch ook lezen.
- Maar een webpagina is geen affiche: een webpagina bekijk je altijd van dichtbij, en doorgaans is de lezer vooral geïnteresseerd in de informatie die er te halen valt, en er niet op uit om een visuele ervaring op te doen bij het bekijken van een site van een restaurant. Nu belemmert de artistieke vormgeving helaas het leesgemak. Ik zou ten behoeve van de usability deze vormgeving temperen!
De inhoud van de homepage: streek en plaats?
Bij het lezen kom ik al gauw op de zin: "
... verknocht aan seizoens- en streekgebonden producten."
Aha, welke streek dan? En waar zit het restaurant eigenlijk?
- Als Hollander vraag ik me af: zitten ze bij mij in de buurt, of in Groningen, op Texel, in Maastricht, Leiden, Breda of op Goeree-Overflakkee?
- Op de homepage kom ik daar niet achter, het staat ook niet in de <title> die in de browserbalk bovenaan staat.
- Via een extra klik op "Contact" kan ik het te weten komen: het restaurant is gevestigd in Aalter. België! Dat had ik niet verwacht, en aan de domeinnaam (op .com, en niet op .be) kon ik het ook niet aflezen.
- Dat zie je trouwens bij redelijk veel websites: voor de eigenaars en webmakers is het zo vanzelfsprekend waar een bedrijf woont, dat het niet op de homepage wordt vermeld!
- Ook voor zoekmachines is dat niet handig. Als ik op Google naar restaurant Aalter zoek, dan staat de site van 't Vijfde Seizoen niet op de eerste resultatenpagina. Wel op de tweede pagina, maar dan niet de homepage maar de routebeschrijving-pagina in de IE-versie. De eerstvolgende hit is pas net onderaan pagina 5 van de Google-resultaten: weer niet de homepage, maar nu de situering-pagina.
Suggesties: de plaats in de <title> en in de <h1> van de homepage opnemen: "
Restaurant 't Vijfde Seizoen te Aalter".
Ook de description-meta kan uitgebreider, bv.: "
Restaurant 't Vijfde Seizoen te Aalter is gelegen halverwege Brugge en Gent. Voor levensgenieters en de fijnproever van seizoensgerechten en streekgerechten."
Zo zitten meteen de trefwoorden Brugge en Gent in de zoekmachines gefrommeld!
- Ook een vermelding van de openingstijden (of minstens een verwijzing naar de pagina waarop die te vinden zijn) zou onderaan de homepage (of in een footer op elke pagina) niet misstaan. Dan kunnen de gasten toestromen!
De slideshow bovenaan
Een slideshow om een pagina mee te beginnen is tegenwoordig nogal in de mode. Er zal de wens achter zitten om meteen op de homepage alles te laten zien wat in huis is.
Uit oogpunt van gebruiksgemak: ik vind ze vaak nogal afleiden, net als ik aan het lezen ben verspringt er iets op een dominante plek op de pagina.
- Als de homepage maar uitdagend genoeg is, met één rake afbeelding, dan is voor mij m'n nieuwsgiergheid genoeg gewekt om naar de andere pagina's te gaan, en daar andere afbeeldingen te vinden.
- Een bescheidener slideshow, bv. wat kleiner of ergens anders op de pagina, kan de pagina een stuk aantrekkelijker maken. Dan kan de focus van de bezoeker op de info blijven.
De uitvoering van de slideshow met een geanimeerde gif is op zich best aardig: daarmee vermijd je allerlei scripttoestanden of flashtoepassingen.
Wat opvalt:
- De wisselingen zijn abrupt, er zitten geen overgangen tussen. Met een aangepaste animatie zouden er overvloeiers in kunnen komen, dat maakt de aanblik wat zachter. Nadeel is dan dat zo'n gif al gauw heel er groot wordt, en/of de gif (met max. 256 kleuren) de kleuren niet meer allemaal aan kan.
- Overwogen zou kunnen worden er toch javascript-overvloeiers in te zetten, dat kan ook met een klein scriptje (zie bv. de broncode van dit voorbeeld).
De inhoud van de slideshow: hierin ligt nogal het accent op de aanbevelingen/recensies van anderen, en foto's van de uitbaters en de medewerkers.
Naar mijn idee:
- De tekst-afbeeldingen met citaten laten anderen aan het woord. Het blijven kreten, en ze zijn ook niet altijd even duidelijk. Maar een homepage moet het in mijn ogen vooral hebben van de eigen presentatie van een bedrijf, en niet van wat anderen ervan vinden. Ik zou die citaten er uit halen of veel minder belangrijk maken. Maar op de pers-pagina zouden ze heel goed kunnen.
- Als blikvanger zegt een foto van een tafelend gezelschap mij meer dan een staatsiefoto van de medewerkers, hoe mooi die foto op zich ook is.
- De foto met de telefonerende dame zal de eigenaresse zijn, en is ook best een mooie foto. Maar van het restaurant is weinig te zien: een soortgelijke foto zou ook in een slideshow van bv. een accountantskantoor of een helpdesk kunnen staan.
- De foto's met keurig gedekte tafels en mooie plateaus met gerechten kunnen misschien in een design-tijdschrift, maar zijn erg kaal en levenloos. Als potentiële klant wil ik vooral weten: hoe ziet het er uit? Is het er gezellig? En is het eten goed? - Dat zou je in de slideshow terug moeten zien.
Suggestie: meer interieurfoto's, en dan vooral: met
gasten van het restaurant die het naar hun zin hebben! Ter afwisseling een paar prachtige schotels, maar dan bv. op de hand van een ober die ze aan komt reiken, en verheugde gezichten van de gasten erbij. Een paar kijkjes in de keuken kan ook, maar niet teveel: de bezoeker komt niet voor hoe de keuken er uit ziet, maar voor het resultaat ervan!
Het pagina-menu
Mijn oog gaat weer naar boven, naar het menu om op de andere pagina's te komen.
Ik zie daar staan:
't Vijfde Seizoen |
Formules |
Impressie |
Info |
Contact |
Persmap.
- De 't Vijfde Seizoen is de link naar de Home-pagina, gebruikelijk/gebruiksvriendelijk is om die ook Home te noemen.
- Bij Formules heb ik geen flauw idee op wat voor soort pagina ik terecht zal komen. Klik! Aha, het gaat hier om de verschillende menu's die mogelijk zijn: seizoensgebonden of à la carte. Dan zou ik als naam ook Menu's gebruiken.
- Bij Impressie vraag ik me af: wat voor impressie? Klik! Aha, een foto-impressie. Dan zou ik dat woord gebruiken.
- Een pagina Info kan alle kanten uit. Wat voor info? Klik! Aha: vooral de bereikbaarheid. Dan zou ik "Route" als opschrift nemen.
- Uit de toon valt op de Info pagina nog een Info-pagina. Daarover wordt in de toelichting van de algemene de Info pagina niets gezegd. Klik! Aha, hier blijkt, goed verstopt de belangrijke informatie over de openingstijden en vakanties te staan! - Die informatie is alleen voor de doorgewinterde klikker weggelegd...
Suggestie: ik zou de openingstijden en vakanties op de contact-pagina vermelden, daar wordt er eerder naar gezocht (en wie daar niet zoekt, komt ze vanzelf tegen bij een bezoek aan de contact-pagina).
Vraag: het restaurant is tussen 12u00 - 14u30 geopend, maar behalve de zakenlunch kan ik niets anders vinden wat dan genuttigd kan worden. Worden er om die tijd ook nog andere lunchgerechten geserveerd? Zo ja: te vermelden!
De foto-impressie pagina
Ook hiervoor geldt: artistieke maar cleane foto's, en geen restaurant-gast te zien! (zie opmerkingen hierboven)
Als ik deze serie zie, denk ik: "best aardige mensen zo te zien, maar zo'n kale bedoening trekt me niet erg aan. Ik ga eens verder zoeken."
Terwijl de werkelijkheid wel eens veel appetijtelijker kan zijn!
Bowser-toegankelijkheid
- In Internet Explorer is het voor de bezoeker niet mogelijk om desgewenst de lettergrootte aan te passen zonder meteen op de hele pagina in te zoomen. Oorzaak: het gebruik van een fixed font-size.
- In Internet Explorer (IE7) werkt soms bij terugkeer van een andere pagina naar de homepage de iframe-hoogte niet meer, en wordt de tekst ergens plompverloren afgekapt. Of IE8 en IE9 dat beter doen, weet ik niet.
In een aantal browsers zijn de letters niet echt mooi:
Internet Explorer .......................... Opera
- Dit ligt weer aan het gebruikte webfont. Degelijke met de pagina meegeleverde lettertypes doen het vaak verschillend in verschillende browsers, en worden vooral minder mooi bij gebruik van een klein letterformaat.
- Suggestie: met de standaard lettertypes als Arial, Verdana, Helvetica, Trebuchet MS en dergelijke loop je weinig risico, en de meeste mensen zullen het verschil met een "eigen lettertype" niet eens opmerken.
- Ik zag het er trouwens ook niet aan af, dat het een "eigen lettertype" was. Hij lijkt erg op de "Trebuchet MS" (met een iets andere "g").
Het ene menu is het andere niet!
Nieuwsgierig naar wat de site in IE precies zou doen, begon ik in mijn oude IE7 op het menu te klikken.
- Tot m'n verbazing deed dit het gewoon: Formules, Impressies, Info ... alle pagina's kwamen tevoorschijn alsof er niets aan de hand was! :shocked:
- Compatibiliteitsweergave niet nodig?
- Op de pagina Formules nog eens proberen ... ook in orde.
- Ohhh! Wat ik wist van Firefox, was dat de verschillende onderdelen van het bijgaande plaatje óók links waren.
- NB: dat moet ook in FF en de andere browsers maar opvallen, want dat zie je nergens aan. Het ziet er uit als illustratie bij de tekst er onder.
- Alleen mensen als ik die altijd "met de muis kijken" kunnen opmerken dat er een klik-handje komt als je over dat plaatje hovert, en dat er 5 verschillende links in zitten.
- Andere surfers zullen niet in de gaten hebben dat je er op kunt klikken (in de tekst er onder staan ze ook niet herhaald, dus op een andere manier kan je er niet komen). De kunnen dan niet te weten komen wat er op de 5 achterliggende pagina's staat!
Maar goed, verder met IE7. In IE levert een hover over het plaatje niets op: geen aanwijs-handje te zien, dus ook geen idee dat je er op kunt klikken met al of geen resultaat.
En dan blijkt: met het woord "menu" in de kleine lettertjes wordt niet het
webmenu naar de pagina's (bovenaan de pagina) bedoeld, maar de
restaurant-menu's die in het plaatje staan. Die hebben ook niet het woord "menu" er in staan, want ze heten "Herfstmiddag", Herfstexpressie" e.d. - Je moet maar weten dat dàt de menu's zijn die ze in de kleine lettertjes bedoelen!
- Wie dat niet weet, zal dan in IE ook niet op de "hier compatibiliteitsweergave" klikken om de links wel te kunnen zien en bedienen...
Suggesties: de woorden van de restaurant-menu's in de tekst eronder tot links naar de respectieve pagina's maken, en de 5 onderdelen van het plaatje meer een knop-uiterlijk geven. Dan heb je een dubbele kans.
Al met al: voor de usability best werk aan de winkel.
Met vriendelijke groet,
CSShunter
[edit]*[/edit]
Nadat ik dit verhaal had uitgetikt en verzonden, blijkt dat er ook eerdere reacties waren. - Toen ik begon, was er nog niets!
Over stijl, huisstijl en smaak valt inderdaad te twisten, en een beetje afwijkend ben ik best voor te porren. Hierboven heb ik alleen gekeken naar wat voor de usability van de site van belang kan zijn. En voor de usability van webpagina's gelden andere regels dan voor gedrukte dingen. Die hebben geen browsers met verschillende eigenschappen/eigenaardigheden en beeldschermen van verschillend formaat: drukwerk kan je maar op één manier bekijken, zoals het gemaakt is!
@gast0187 "Waar is de copyright, of laten ze kopiëren toe?"
Een copyright-vermelding hoeft helemaal niet: als dit origineel werk is, heeft het automatisch het copyright.
Wil iemand een afbeelding of tekst gebruiken, dan is
altijd toestemming van de maker nodig, ook als er niet ergens een copyright-regeltje staat.
Om met de Rijdende Rechter te spreken: "Zo is de wet, en daar moet u het mee doen".
Zie:
Spoedcursus auteursrecht van ICT-jurist Arnoud Engelfriet.
O, de spingende pagina. Zie:
De Springende Pagina.
O, nog een edit: de slideshow met de foto-impressies staat nogal op een hoog tempo ingesteld. Voor je goed en wel een afbeelding bekeken hebt, springt de volgende er al in.
Ook een bijschrijft bij een aantal foto's zou geen kwaad kunnen.
Bij deze dacht ik aan een goed getapt glas bier (op een lege plank of tafel, niet erg karakteristiek voor 't Vijfde Seizoen: foto zou ook ergens anders genomen kunnen zijn).
Maar nu ik 'm nog eens rustig bekijk, met stilzetten van de automaat, zou het ook wel eens een hele speciale koffie kunnen zijn: dat kan dan uit het bijschrift blijken, en dan zegt de foto opeens veel meer (hoewel nog steeds ook een andere locatie mogelijk is).
