Categorieën
web design

Clichés op het web

(dit artikel verscheen op de Adventkalender van Fronteers)

Letterlijk is een ‘cliché’ is metalen plaat waarmee je illustraties kunt afdrukken. Figuurlijk is een cliché een afgesleten manier van spreken of denken. De eerste keer dat je een grap maakt, is ‘ie leuk. De tweede keer is ‘ie al minder. Na tien keer is ‘ie saai. Clichés zijn de doodgeslagen cola van je denkvermogen, om het op z’n BLØFs te zeggen.

Clichés zijn niet per definitie onwaar of fout. Het kan heel handig zijn om in clichés te denken. Het is doodvermoeiend en zonde van je tijd om altijd overal over na te denken. Clichés helpen je dan, zodat je niet te lang hoeft na te denken. Maar je moet niet alles geloven wat je denkt, want soms is wat je denkt gewoon fout.

Sommige clichés zijn bijna niet uit te roeien. “Als anderen het doen, zal het wel goed zijn.” Een klant van me vroeg laatst wanneer ik een cookie-waarschuwing op de site zou plaatsen. Waarom? Omdat iedereen het doet en dus hoort een cookie-waarschuwing op elke website.

Aaargh.

Cliché 1: ‘Een plaatje zegt meer dan 1000 woorden’ 

Sure, maar welke 1000 woorden zegt jouw plaatje? Zegt je plaatje “Ik had geen tijd om een goede foto te zoeken”?

Plaatjes-omdat-het-moet

We zijn gewend geraakt aan enorme hero images, schermvullend en topzwaar. Hierdoor denken we dat bij elk bericht een foto hoort. Het probleem is dat niet iedereen een geweldige foto-bibliotheek ter beschikking heeft. Het resultaat? Websites vol plaatjes-omdat-het-moet. Het liefst clip-art met teksten die verkeerd afgesneden worden. Foto-redactie is het ondergeschoven kindje van modern webwerk.

Screenshot van Frankwatching.com met blokken met artikellinks en bij elk daarvan een plaatje. De plaatjes zijn generiek en slecht afgesneden.
Screenshot van Frankwatching.com (november 2019)

Stockfoto’s

Niet iedereen heeft een geweldige smaak of fantasie, sorry dat ik het zeg. En even een plaatje opgoogelen is een fluitje van een cent.

Resultaat? “Aap eet banaan“, een uitdrukking van ontwerpers voor een ontwerp dat er te dik bovenop ligt. Denk aan een hamer als logo voor een timmerman. Een aap-eet-banaan-slogan is: ‘Voor al uw timmerwerk’.

Icoontjes

En icoontjes? Breek me de bek niet open over icoontjes. Alles wordt begrijpelijker door icoontjes zeg je? Hmmm, kijk ‘Repelsteeltje – Guess My Name’ nog eens terug, een hilarische presentatie van Mallory van Achterberg over onbegrijpelijke icoontjes.

Cliché 2: klik hier: . en lees meer

Opa vertelt: er is een tijd geweest dat het internet zo nieuw was dat je alles moest uitleggen. Dat was de tijd dat we URLs in reclame volledig uitspelden. “Ga naar haa tee tee pee dubbele punt slash slash wee wee wee nu punt en el voor het laatste nieuws”, ofzo. Je wist niet beter, je had niets anders. Dus je moest ook het principe van een klikbare link uitleggen. Uit die tijd stamt de irritante gewoonte om ‘klik hier‘ als linktekst te gebruiken. ‘t Liefst 1 woord ja.

Klik me dan, als je kan

Moet ik nog vertellen waarom dat een slechte gewoonte is? Ten eerste geldt: hoe kleiner het klikbare gedeelte, hoe moeilijker het is om er op te klikken (zie deze uitleg van Fitt’s Law). Ten tweede: ‘hier’ beschrijft niet waar je heen gaat. Je vertelt je gebruiker niet wat hij op die nieuwe URL kan verwachten. Dat is niet aardig. Wees aardig voor je bezoeker.

Lees meer, meer, meer!

De tweelingbroer van Klik Hier is Lees Meer. Ook met ‘lees meer’ vertel je niet waar je naartoe gaat. Je hebt pech als afhankelijk bent van een screenreader om wijs te worden uit een pagina met twintig keer een link met ‘lees meer’ als tekst. Beschrijf met je linktekst alsjeblieft waar je heen gaat en maak deze tekst uniek voor je webpagina. Mocht je omwille van het design van je pagina toch veroordeeld zijn tot korte linkteksten, gebruik dan een list. Gebruik bijvoorbeeld het ‘aria-label’-attribuut als alternatief, of gebruik de titel van de pagina waarnaar je verwijst als linktekst, maar verberg die louter visueel.

Stapels met boeken
Dit is een prima aanspring: “Lees meer”, als je bedoelt: lees meer boeken

Klik anders hier even: click-here.nl

Cliche 3: Social media-knoppen

Klik hier

Die knoppen om een pagina te delen op social media? Ze werken amper. Ik ken geen onderzoeken die aantonen dat ze een groot effect hebben op het wel of niet delen van een pagina. Maximaal 1% van je bezoekers gebruikt die knoppen om een pagina te delen.

Waar ze wel goed voor zijn? Eh.

Ze zijn vooral bedoeld om je opdrachtgever het fijne gevoel te geven helemaal hip & happening te zijn, want als je niet op sociale media meedoet besta je niet.

Logo van Facebook voorzien van duivelshoorntjes en puntige staart

Afhankelijk van hoe je die knoppen implementeert kun je het satanische Facebook helpen om je bezoeker over het hele internet te achtervolgen.
Hmmm, privacy.

Cliche 4: lage bounce rate

Bounce rate is een marketingterm voor het percentage van je bezoekers die na het eerste bezoek aan je site weer vertrekken; “Hee, hoi” en ze stuiteren weer door, zeg maar. Hoe lager je bounce rate, hoe meer je bezoekers doorklikken naar een volgende pagina op je site.

Een hoge bounce rate is niet erg.

Sterker nog: een hoge bounce rate zou kunnen betekenen (aanname!) dat je bezoeker exact gevonden heeft wat hij (m/v/a) wilde. Na zijn succesvolle bezoek aan je website sloot hij zijn laptop, ging naar huis en knuffelde zijn kind en zijn hond en zijn kat.
Wil je je bezoeker tevreden stellen of wil je ‘m bezigheidstherapie geven?

Cliche 5: cookie-waarschuwingen

Het web is ziek. En cookie-waarschuwingen zijn daar het symptoom van. Veel websites staan vol meuk om elke klik vast te leggen: pixels, beacons, fingerprinting, dynamic cookies, en what have you not. Anno 2019 is het web een panopticum waarin elke stap van je bezoeker doorgegeven wordt aan de Googles, Facebooks en geheime diensten van deze wereld. Dankzij Edward Snowden kennen we de details en ja, die zijn echt heel erg. Onze gegevens liggen inmiddels op straat.

Cookies tegen heug en meug

Cookie-waarschuwingen zijn bedoeld als pleister, om bezoekers meer controle te geven over hun gegevens. Helaas komen de meeste cookiemeldingen neer op: “Cookies: we zetten ze en we laten alle advertentieboeren ook meekijken en je hebt het er maar mee te doen.” Ik denk even aan de 1000 ongevraagde cookies op de site van TV Rijnmond.

Aksie, harde aksie!

Daarom denk ik dat het goed is dat we als front-enders veel meer weerstand bieden tegen mogelijke schendingen van de privacy van onze bezoekers. Vraag je bij elk formulier dat je maakt bijvoorbeeld:

  • Waarom vraag ik dit van de gebruiker?
  • Moet ik een binair geslacht weten? Welke ramp gebeurt er als ik straks niet iemand aanspreek met ‘Geachte mevrouw’, maar met ‘Hallo’ of ‘Goedendag’?
  • Moet ik echt een telefoonnummer vragen?
  • Wat gebeurt er straks met al deze gegevens?
  • En wat als deze gegevens op straat komen te liggen?

Uiteraard wil je weten hoeveel bezoekers je hebt op je site. Maar moet je echt Google mee laten kijken? Google weet welke zoektermen je bezoeker gebruikte en dankzij je niet-geanonimiseerde Analytics-tracker weet het ook hoe snel je bezoeker weer wegstuiterde van je site. Gebruik betere analytics-tools, die niet stiekem data doorverkopen aan adverteerders. Advertentieboeren zijn de keyloggers van het internet. Het is tijd dat we het heft weer in eigen hand nemen. Baas over eigen data.

Cliche 6: formuliervelden zonder labels

Ik denk dat het onkunde is dat er zoveel formulieren zonder fatsoenlijke labels te vinden zijn.

Het is nogal simpel. Heb je een <input> dan hoort daar een <label> bij. Geen mitsen, geen maren: er hoort een label bij.

Ik herhaal het even: geen placeholder, geen vet tekstje. Nee, een zichtbaar <label>.

<label for"tralala">
  <input type="text" id="tralala" name="voornaam" placeholder="Je voornaam" value="" />
</label>

Weet je wat daar zo handig van is? Je vertelt daarmee aan je gebruiker wat hij moet doen.

Paneel met knopjes in een lift, maar dan zonder label. Dus je weet niet welke knop je moet drukken om naar een bepaalde verdieping te gaan.
O jee, geen labels. Wat nu? Het origineel is trouwens niet veel beter.

Cliche 7: niet-onderstreepte links

Er zijn designers die zeggen: “Onderstreepte links zijn niet mooi.” Ik vind: suck it, hou je links herkenbaar. Vanaf het begin der tijden zijn links onderstreept en blauw. Heb je de link al bezocht dan is de link paars. Wapper je er met je muis overheen, dan wordt ‘ie rood. Zo deden we dat vroeger, zo deden onze voorouders het, zo deden de Neanderthalers het. Links zijn onderstreept.

“Ja maar, ik heb m’n links een andere kleur gegeven!”

Prima, maar wat als je bezoeker nou moeite heeft met kleuren zien? Dan is het heel fijn om niet op kleur alleen te vertrouwen. Dus ik zeg: onderstreping. Superhandig.

Conclusie?

Ik heb een paar willekeurige clichés gekozen om over te klagen. Waar dit wat mij betreft op neerkomt is:

  • Hoe minder je bezoeker hoeft na te denken over je site hoe beter het is.
  • Hoe minder meuk wij vragen van onze bezoeker, hoe beter het voor hem is.
  • Hoe beter we nadenken over het hoe en waarom we websites maken, hoe beter het voor iedereen is.

We moeten wat liever zijn voor onze bezoekers en de boel niet te moeilijk maken.

Vrede op aarde.

(dit is een vertaling van een praatje dat ik eerder gaf bij de Fronteers Jam Sessions in oktober)

Categorieën
web design

Edge Case Design

(dit is een repost van een post op WBVB)

Op dinsdag 25 november hield ik een praatje voor de collega’s van Fronteers. Ik koos voor het onderwerp ‘Edge Case Design’.

De avond werd gehouden bij Blendle in Utrecht.

Je kunt de presentatie online bekijken
(tip: als je de presentatie bekijkt via een laptop / desktopbrowser, kun je op S drukken om de spreektekst erbij te lezen. Dat wil zeggen: de tekst die ik van plan was te zeggen…)

Ik heb een geluidsopname van afgelopen dinsdag voorzien van mijn slides. En zoveel mogelijk mijn eh’s weggeknipt. Hier het YouTube-filmpje:

Bekijk de niet-ondertitelde videoversie op YouTube.

Bekijk de spreektekst die ik van tevoren had voorbereid.

Categorieën
geekiness interaction design web design

Make It So – wat interaction design kan leren van science fiction

(eerder verschenen op wbvb.nl)

tagcloud-make-it-so

Ik wilde eigenlijk een afstudeerscriptie schrijven over ‘het veranderende wereldbeeld in Suske en Wiske door de jaren heen’. Lekker Suske en Wiske lezen onder het mom van wetenschappelijk onderzoek. Die scriptie is er niet gekomen. Maar eigenlijk hebben Nathan Shedroff en Christopher Noessel iets vergelijkbaars gedaan voor hun boek ‘Make It So‘. Ze hebben gekeken wat ze konden leren van tientallen science fiction-films op het gebied van interaction-design.

Hoe meer ik nadenk over ‘Make It So‘ hoe enthousiaster ik word. Van een afstand bekeken is het een introductieboek in basisprincipes in interactie-ontwerp, geïllustreerd met science-fictionplaatjes. Maar dat is niet de grootste kracht van het boek. Wat ik het belangrijkst vind is dat het boek je verder laat kijken dan de gangbare patronen van interactie. De eerste hoofdstukken zijn verdeeld over diverse interactiecategorieen, met onder meer mechanische interactie, visuele interfaces, gebareninterfaces. In elk hoofstuk laten ze zien wat er mogelijk is, wat er mogelijk kan worden en wat er waarschijnlijk nooit mogelijk zal zijn.

Zo wordt een film als Minority Report (2002) vaak als het voorbeeld gebruikt voor een gestural interface, waarbij de gebruiker de computer met gebaren bedient. De schrijvers laten de voor- en nadelen de revue passeren. De transparante interface zorgt voor focusproblemen bij de gebruiker. Het staand werken is vermoeiender dan het in de film lijkt (zie ook: Gorilla Arm). Daarnaast vereist het systeem ook een behoorlijk dosis kunstmatige intelligentie. Het moet een goed begrip hebben van de intentie van de gebruiker; wat moet het systeem bijvoorbeeld denken van het beleefd schudden van handen met een andere persoon?

Het boek roept nuttige vragen op over hoe we over vijf, tien of vijftig jaar computers en machines bedienen. In 2008 vond ik het complete science fiction dat ik via m’n iPhone met een blauw stipje op de kaart kon zien waar ik was. Bijna net als James Bond in zijn DB5! Science fiction is net als andere kunstvormen een weerslag van de tijd waarin het gemaakt wordt. Het weerspiegelt de verwachtingen van de kijkers en leert hun tegelijkertijd wat ze in de toekomst zouden kunnen verwachten. In de eerste ‘science fiction’-film, Georges Méliès’ “Le Voyage dans la Lune”, zit geen enkele aanwijzing hoe de machine bediend wordt. De raket wordt met een enorm kanon als een kogel naar de maan geschoten en de deur gaat gewoon open zonder ingewikkelde handgrepen. Filmkijkers verwachtten dat toentertijd immers niet. “All design is fiction”. En daar start interaction design ook, met fiction.
Eindoordeel? Nuttig boek; het verbreedt je horizon.

http://www.youtube.com/watch?v=Q7xH2RLVbhI
Georges Méliès : Le Voyage dans la Lune (1901)

make-it-soMake It So – Interaction Design Lessons from Science Fiction
Auteurs: Nathan Shedroff, Christopher Noessel
September 2012, 348 pagina’s
ISBN 1-933820-98-5
Categorieën
geekiness usability web design

Van wireframe naar realisatie

Een tijdje geleden volgde ik bij Stephen Hay een workshop Rabid Prototyping. Sindsdien heb ik met de vraag rondgelopen wat je wanneer doet als je bezig bent met het ontwerp van een website:

  • Hoe moet je naar mijn idee het design aanpakken in een nieuwe of bestaande website?
  • Wat is het verschil tussen een prototype en een wireframe?
Categorieën
recensie web design

Of Google plus een blijvertje wordt?

Het is nog maar de vraag of Google+ een blijvertje gaat worden. De nieuwe social netwerk site van Google ziet er veelbelovend uit en is duidelijk het product van knappe koppen. Ze hebben een goede analyse hebben gemaakt van de sterktes en zwaktes van andere netwerksites als Facebook, Twitter en LinkedIn.

Categorieën
usability web design

Usability checklist

Vorige weet stuitte ik op ‘In Defense of Checklist Accessibility‘ en ik vond eigenlijk dat we dat soort lijstjes maar eens openbaar moesten maken. Nu zijn er al hele studies gedaan met uitgebreide criteria. Zo hebben we in Nederland het drempelvrij-keurmerk en de webrichtlijnen-check. Dus wat levert een extra lijstje op? Niet zo heel veel extra’s. Wel is het opstellen van dit soort lijstjes goed om nog weer eens even je uitgangspunten te checken.

Usability zit niet alleen in het gebruik van valide code. Eerder gaat het om inlevingsvermogen in de eindgebruiker. En weten dat je niet kunt voorspellen hoe een gebruiker je website gaat gebruiken, hoe groot je empathie ook is. De gebruiker is altijd gekker of inventiever dan je je kunt voorstellen.

Dus zonder de claim volledig te zijn, hier mijn checklist, voor mei 2011. Een work in progress.

Categorieën
recensie usability web design

Recensie: Search Patterns

"Search Patterns - Design for Discovery" (Peter Morville, Jeffery Callender)

Zoeken is niet moeilijk. Vinden is het probleem.

Search Patterns is een prettig boek als je meer wilt weten over zoeken op internet. Het geeft een goed beeld van de complexiteit achter ‘Best first’. Iedereen die webpagina’s bouwt (designer, architect, programmeur) zou dit boek moeten lezen. Elk van hen kan bijdragen aan betere zoekresultaten en een betere user experience.

De resultaatpagina van Google is al jaren dé toetssteen voor projecten op het gebied van zoeken. Het is wat mensen kennen en wat ze inmiddels ook verwachten. De overzichtelijkheid en effectiviteit van de Google Search Engine Result Page (SERP) is bedriegelijk. Want wat is ‘Best First’? Wat is “best”, wanneer is deze “best” het beste en voor wie dan? Dit soort vragen kun je niet eenduidig beantwoorden en dat doet dit boek ook niet. Deze vragen moet je jezelf stellen als je met zoeken en vinden bezig bent. Interessant ook is de wetenschap dat search & matching verder gaat dan alleen de resultaatpagina van Google. “Even when we browse, we search.” De intelligente suggesties van iTunes via Genius of de related products op Amazon zijn het resultaat van een zoekalgoritmes met als ingredienten de gebruiker, z’n geschiedenis, zijn zoekopdrachten, z’n verlanglijstjes etc.

Categorieën
parodie web design

How low can your logo?

Kun jij het slechtst mogelijke logo verzinnen?

Als de klant een regenboog wil, dan krijgt de klant een regenboog in z’n logo. Verder heb ik het meest tijdloze, smakeloze, zielloze logo voor een Excellencico gemaakt:

howlowcanyourlogo.com/paul-van-buuren Stemmen!

Gezet in helvetica, het lettertype dat ALLE andere bedrijven ook gebruiken  en een handshake voor dat stukje betrouwbaarheidsuitstraling naar de mensen. Perfect dus.

Categorieën
web design

Korte presentatie over HTML5

Vanavond heb ik een korte presentatie gegeven over HTML5, voor collega’s. Ik me heel erg laten inspireren door deze presentatie van Krijn Hoetmer en heb er redelijk wat ook uit overgenomen. Ere wie ere toekomt!

Hier is alvast het eerste virtuele biertje dat Krijn verdient:

Een Paulaner van Paul voor Krijn
Een Paulaner van Paul voor Krijn

En de presentatie staat hier te zien (tip: bekijk ‘m in Opera, fullscreen) en hier ter download (zip 11MB)

Geef me een gil als je er iets leuks mee doet.

Categorieën
geekiness logboek plaatjes usability web design

Slechte website T-mobile

Flash doet het niet op de iPhone; zorg dan voor alternatieven!
T-mobile is de enige officiële Nederlandse verkoper van iPhones. Dan is het toch zot dat zo’n bedrijf niet test hoe zijn website er op een iPhone uitziet.