RSSHorizontale lijnen kunnen wel!
Met dit artikel gaan we een beetje in tegen de blogregels, maar we doen het toch. Het is een reactie op een reactie van een lezer op het artikel ‘Homepage design: horizontale lijn’. Onze argumentatie werd zo lang dat we besloten hebben er een apart artikel van te maken. Wie wil volgen, leest dus best eerst het origineel.
1. Horizontale ankerpunten kunnen wel
Ik kan niet Photoshoppen dus als ik mock-ups maak, is het altijd in html. Dat doe ik al 15 jaar en ik maak toch zo’n 10 ontwerpen per jaar voor niet echt kleine klanten. Het lukt me wel om daarin horizontale lijnen te krijgen, zelfs over ‘kolommen’ heen.
Ik ben blijkbaar niet de enige die dit kan:
- www.gva.be (jammer dat ze de lijnen van het middendeel niet af en toe doortrekken naar de rechterkolom, al was het maar imaginair)
- www.timesonline.co.uk (volgens mij de inspiratiebron van hierboven, in de beginfase liep daar de rechterbalk wel mee in het gareel van het middendeel)
- www.smh.com.au (hier wordt de rechterbalk wel op enkele punten gesynchroniseerd met de lijnen in het midden)
Het kan dus. Dat wil zeggen dat iedereen het kan.
Geen voodoo, geen magie.
2. Het vraagt wat moeite
Dat is meestal zo als je iets echt goed wil doen. Maar als je je website beschouwt als een belangrijk deel van je business, moet je die moeite doen. Anders jaag je bezoekers weg.
Als je die moeite niet wil doen, maak dan als krant 1 pagina met 2 knoppen: ‘Bestel nu je krant in pdf’ en ‘Waar kan je onze krant kopen?’.
3. Die moeite is niet zo groot
Als je de pagina bekijkt, zie je dat er heel wat discipline is bij De Standaard: veel blokjes zijn bijna even groot. Dat is omdat ze veel aandacht besteden aan de titels en de intro’s. Juist omdat ze die moeite doen, kan je wel degelijk naar een beter gestructureerd design overstappen.
Wij hebben niets veranderd aan de inhoud. Alleen de foto bij het artikel over Withof hebben we weggelaten. Voor de rest is dit louter een herschikking van wat er staat.
Vergelijk het origineel met onze versie – opent in nieuw venster
4. Een wit gat is beter dan geen gat
- Het wit gat in onze herwerking (bovenaan, boven het artikel over Withof) is er deels omdat we gewerkt hebben met wat er op de screenshot stond. Ook in het origineel is er trouwens een groot wit gat, bij het artikel over Elite Model Look.
- Witte gaten kunnen geen kwaad. Ik heb tijdens al die gebruikerstesten en onderzoeken nog nooit een gebruiker een website zien verlaten omdat er wat witruimte was. Ik heb al wel veel mensen de zenuwen zien krijgen en horen vloeken omdat het scherm propvol stond.
5. Huzarenstukjes zijn nodig
Het is door huzarenstukjes dat websites zoals Google, eBay en Amazon zijn wat ze zijn. Grote successen.
Horizontale lijnen in webdesign zou ik niet direct een huzarenstuk noemen, maar het is een kleine moeite die rendeert.
6. Bijna alles kan
Dingen realiseren die zogezegd niet kunnen, maken het verschil. Als een webbouwer, graficus of programmeur zegt ’dat gaat niet’, bedoelt hij doorgaans:
- Ik weet niet hoe dat moet.
- Pff, dat is wel echt veel werk.
- Het systeem is daar niet op voorzien.
Da’s jammer voor hem of haar, maar het wil dus zeggen: het kan wel.
Dit artikel gaat over design, homepage, leesbaarheid, Usability.
Op de hoogte blijven van nieuwe artikels?
Abonneer u op onze RSS feed of onze nieuwsbrief.
5 reactiesReageer op dit artikel
Reageer op dit artikel
Karl Gilis (08-05-2009)
Meer info: http://www.thegridsystem.org (met dank aan Stijn Nieuwendijk van Valsplat.nl voor de link)
Ruben Timmerman (11-05-2009)
Het kan wel, maar moet het ook? Welk onderzoek, of welke cijfers doen jullie geloven dat bijvoorbeeld de Standaard meer pageviews zou genereren als ze ook horizontaal dingen zouden uitlijnen?
Wellicht kun je in een eyetracking gazeplot zien dat iemand een horizontaal uitgelijnde pagina sneller kan scannen (even afgezien van de heel moeilijke vraag welke opdracht je iemand meegeeft op een nieuwssite…). Maar zelfs dan is niet gezegd dat dat iemand ook tot meer klikken aanzet of een grotere tevredenheid bereikt.
Los hiervan is het niet-verticaal-uitlijnen een goed middel om bezoekers te laten realiseren dat de pagina gescrolld kan worden.
Ik heb ook geen bewijs voor het tegendeel, maar ik ben dan ook geen fervent voor- of tegenstander van horizontale lijnen. Ik wil wel simpelweg meer onderbouwing zien dan “gut feeling”
(ik kan me eigenlijk niet voorstellen dat die er niet zou zijn, wie zet me op mijn plaats door te wijzen naar een online gepubliceerd onderzoek?)
Karl Gilis (12-05-2009)
1. Nog heel even onze heel eenvoudige stelling herhalen: horizontale lijnen brengen rust. Er staat niet: zorgen voor meer kliks. Ze brengen orde en maken een pagina beter scanbaar.
2. Akkoord met het mogelijke scrollprobleem, dat ook Stijn van Valsplat reeds aanhaalde. Merk ook op dat we nergens zeggen dat je elke nieuwe ‘paragraaf’ of ’serie artikels’ moet uitlijnen. Persoonlijk zou ik dat vooral in de eerste drie kolommen regelmatig doen. En misschien 1 of 2 keer doordringen tot de vierde of zelfs vijfde kolom.
3. Het valt me de laatste dagen op dat er bij De Standaard plots nog maar 4 kolommen zijn (toch voor de eerste 90% van de homepage). De eerste twee kolommen zijn samengesmolten. Nu staan er dus enkel wat bredere artikels met allemaal dezelfde grootte van kop. Veel beter.
4. Ik denk dat alle usabilitymensen het inmiddels eens zijn dat de rechterkant (in dit geval de twee rechtse kolommen) niet meteen de meest bekeken zone is (wij schreven er al over begin 2006, ook toen kregen we felle reacties op die bewering, sindsdien hebben veel eyetracking onderzoeken van o.a. Nielsen dit bewezen).
Ofwel zeg je dan als designer: fuck it, er kijkt toch niemand naar dus who cares. Ofwel probeer je er iets aan te doen.
Wat ik met mijn inzichten afleid uit onze user testen en uit bijvoorbeeld de eyetracking onderzoeken van de Universiteit van Wichita, is dat horizontale blokken en lijnen het oog meer naar het midden en de rechterkant van de pagina brengen dan bij een ‘alles-onder-elkaar’ of een ‘alles-door-elkaar’ lay-out.
5. Tot mijn verbazing inderdaad geen onderzoeken tegen gekomen die dit specifiek behandelen. Hoe je het zou kunnen testen:
- Test 1: Laat de mensen gedurende x seconden (30?) de pagina bekijken en vraag daarna welke artikels er op stonden (spontane herinnering of aanduiden op een lijstje waarin ook valse meldingen staan). Doe dit op de wanordelijke en ordelijke versie.
- Test 2: Vraag aan testpersonen x artikels terug te vinden op de twee versies en meet de tijd.
- Test 3: Vraag voor de test een waardeoordeel over hun eerste indruk en na gebruik ook nog eens een tevredenheidsschaal. Zo kan je dan zien of er grote verschillen zijn tussen objectieve en subjectieve usability voor dit probleem.
Een vat als zou blijken dat het chaosmodel wint.
Ruben Timmerman (15-05-2009)
“maken een pagina beter scanbaar.”
Waar leid je dit uit af? En wat is de meeteenheid van scanbaarheid? Ik zou zeggen dat CTR hier goed voor is, omdat CTR (arguably, dat zeker) een weerspiegeling is van interesse en interesse alleen kan ontstaan door iets te zien na het gescand te hebben.
Wat ik erg belangrijk vind, en ook vind missen in je punt 5., is dat usability in dienst staat van de doelen van de organisatie. Als je daarnaar kijkt, en je die bijvoorbeeld definieert in CTR, pageviews/visitor, visits/visitor/week en eventueel visitor happiness o.i.d., dan kun je in ieder geval met een A/B test aan de slag.
Bij een nieuwssite lijkt mij een “opzoek” taak geen realistische, je komt er immers om iets nieuws te vinden, niet iets ouds
Just in case: mijn favoriete nieuwssite is NU.nl, by far.
Maar dat vat zou ik just for the sake of it best willen verwedden. Ik denk niet dat totale chaos het beste is, maar bijvoorbeeld jouw Standaard remake zou best eens slechter kunnen presteren dan het origineel. Laten we elkaar op de hoogte houden, of eens een test met een klant doen als het relevant is!
Karl Gilis (16-05-2009)
Volgens mij zijn de twee eerste testen die ik eerder heb omschreven een perfect middel om scanbaarheid te meten:
- Wat is doorgedrongen tot de gebruiker? Omdat kijken iets heel anders is dan zien, zetten wij tijdens gebruikerstesten geregeld het scherm uit nadat mensen lang naar een pagina gekeken hebben om dan te vragen wat er op de pagina stond. Daarbij valt toch elke keer op dat als de lay-out ordelijk is en de teksten bondig en visueel geschreven, de persoon veel juister antwoordt dan bij overladen pagina’s.
- Hoe snel vindt de gebruiker iets terug op een pagina? De homepage van een krant dient om snel een overzicht te krijgen van het nieuws. Als de lay-out dat overzicht in de weg staat, faalt volgens mij de homepage. Als ik het heb over artikels terugvinden, gaat het wel degelijk enkel en alleen over artikels op de homepage. Dat lijkt me toch echt wel de perfecte test. Eentje die wij ook geregeld doen om de effectiviteit van een pagina te meten.
Het is uit dat soort testen dat we afleiden dat op lange (en ook op korte) pagina’s horizontale alignering helpt.
Overigens lijkt CTR me in dit geval (ik herhaal: in dit geval) een minder goed middel om iets zinnigs te zeggen over puur usability en klantentevredenheid. Wat zegt CTR over de scanbaarheid en tevredenheid van een krantenhomepage? Absoluut niets.
Het doel voor de gebruiker is om snel een overzicht te krijgen van het nieuws. Het volledig lezen is vaak een secundair doel (jammer voor de kranten). De meeste mensen hebben in 90% van de gevallen voldoende aan de titel alleen (als die goed geschreven is toch). Meer hoeven ze vaak niet te weten.
Maar dat is weer een totaal andere discussie, die niets met horizontale lijnen te maken heeft.
Best grappig: rond 2002 leek de het basisopzet van de homepage van De Standaard een beetje op nu.nl. Een hoofdartikel met daaronder of daarnaast headlines…