Slecht ontwerp vs. goed ontwerp: 5 voorbeelden waar we van kunnen leren

Kijken naar voorbeelden van slecht ontwerp naast tegenvoorbeelden van goed ontwerp is niet alleen leuk, maar trekt ook belangrijke lessen voor ontwerpers. Ze wijzen op valkuilen die ontwerpers moeten vermijden en laten ons begrijpen hoe we ontwerptheorieën kunnen vertalen naar oplossingen die werken in de echte wereld. Jared Spool, de Amerikaanse schrijver, onderzoeker en usability expert, zei ooit: “Goed design, wanneer het goed gedaan wordt, wordt onzichtbaar. Het is pas wanneer het slecht gedaan wordt dat we het opmerken.” Laten we daarom eens kijken naar vijf voorbeelden van overduidelijk slechte ontwerpen, het licht laten schijnen op hoe goed ontwerp het laat werken, en enkele lessen destilleren zodat we allemaal geweldige en onzichtbare ervaringen voor onze gebruikers kunnen creëren.

Informatie-overload

Het slechte: Parkeerborden in Los Angeles

Parkeerborden in Los Angeles (LA) zijn al decennia lang het toppunt van informatie-overload. Ze zijn altijd al moeilijk te begrijpen geweest, omdat de verkeersregels complex zijn, waardoor er veel informatie op een klein oppervlak moet worden overgebracht.

Hoe verwarrend zijn deze borden? Traditioneel, zeer – kijk maar naar dit voorbeeld uit de jaren 2010:

auteur/auteursrechthebbende: Jorge Gonzalez. Copyright voorwaarden en licentie: CC BY-SA 2.0

Zoals LA-parkeerborden gaan, is dit voorbeeld al een vrij eenvoudig voorbeeld.

Stel je voor dat je een automobilist bent langs deze weg op een dinsdagochtend om 9 uur. Kun je op deze plek parkeren? Wat klinkt als een eenvoudige vraag, vergt veel mentale verwerking om te beantwoorden.

Als ontwerpers worden we vaak geconfronteerd met situaties waarin we moeten ontwerpen om veel informatie weer te geven in een kleine ruimte. De parkeerborden in LA zijn misschien een extreem geval, maar vaak worden we bij het ontwerpen van mobiele apps met dezelfde problemen geconfronteerd. Is er een uitweg, zowel voor de parkeerborden als voor ontwerpers in het algemeen?

Het Goede: Nikki Sylianteng’s Parking Sign

Het ontwerpen van een bord dat alle informatie weergeeft en tegelijkertijd makkelijk te begrijpen is, klinkt als een onmogelijke taak. Maar dat is precies wat de Brooklynse ontwerpster Nikki Sylianteng deed.

auteur/auteursrechthebbende: Nikki Sylianteng. Copyright voorwaarden en licentie: CC BY-NC-SA 4.0

Nikki’s voorgestelde parkeerbord werd uiteindelijk in LA gebruikt als onderdeel van een proef.

Deel van waarom Nikki’s ontwerp1 goed werkt, is dat het de gebruiker centraal stelt: Nikki realiseerde zich dat bestuurders gewoon willen weten of ze op een plek mogen parkeren. Ja of nee, dat is alles wat bestuurders nodig hebben, en dat is alles wat het parkeerbord laat zien.

Haar ontwerp maakte ook gebruik van visuals, in plaats van tekst, om informatie over te brengen. Het resultaat is ongelooflijk intuïtief: groen voor OK, rood voor niet parkeren. Het is zelfs ontworpen voor kleurenblinden, met strepen voor Niet Parkeren.

Als je nu naar het bord kijkt, weet je dat er op dinsdag om 9 uur ’s ochtends niet geparkeerd mag worden. De balken laten in één oogopslag zien wat wat is.

Lessen geleerd: Best Practice

• Begrijp wat uw gebruikers nodig hebben, ontwerp dan op basis daarvan. Dit helpt om een overdaad aan informatie te verminderen.
• Heb je veel informatie over te brengen aan je gebruikers? Probeer visuals te gebruiken in plaats van tekst. Leer hier meer over datavisualisatie.

Mystery Meat Navigation

The Bad: LazorOffice.com

Geroemd in 1998 door Vincent Flanders van Web Pages That Suck2, verwijst de Mystery Meat Navigation (MMN) naar gevallen waarin de bestemming van een link niet zichtbaar is totdat de gebruiker erop klikt of de cursor ernaar wijst. De term “mystery meat” was een verwijzing naar vlees dat in Amerikaanse openbare schoolkantines wordt geserveerd en dat zo bewerkt is dat het exacte type niet meer te onderscheiden is.

MMN is slecht omdat het de vindbaarheid van navigatie-elementen vermindert. Dit voegt cognitieve belasting voor gebruikers, omdat ze nu moeten raden hoe om te navigeren of wat klikken op iets doet.

Hoewel de meeste MMN worden gevonden in oudere websites, ze zijn verrassend veel voor in moderne websites. Neem bijvoorbeeld Lazor Office, een ontwerpbureau dat geprefabriceerde huizen bouwt.

auteur/auteursrechthebbende:Lazor Office, LLC. Copyright voorwaarden en licentie: Fair Use

LazorOffice.com heeft een raster van MMN-afbeeldingen op zijn startpagina. Zoals u kunt zien, geeft dit tableau weinig aanwijzingen over waar u heen moet. In plaats daarvan, negen beelden gewoon zitten, waardoor sommigen van ons na te denken over een raadsel in plaats van interactie met een pagina.

Onder de vouw van hun homepage, een raster van beeld thumbnails liggen te wachten. Zijn ze aanklikbaar? Nou, ja – als je je muiscursor over een afbeelding beweegt, verandert het in een aanwijzer. Maar wat gebeurt er als je op een afbeelding klikt?

“Klik om erachter te komen!” is nooit een goede User Experience (UX) oplossing. De kans is groot dat uw gebruikers hun navigatie verlaten en een alternatieve oplossing zoeken op de site van een concurrent.

Het goede: Cursuskaarten op de website van Interaction Design Foundation

Gelukkig zijn MMN-problemen eenvoudig op te lossen. De sleutel is om je ervan bewust te zijn dat je links duidelijk moet labelen. Door simpelweg “Project bekijken” toe te voegen, dat verschijnt als je met de muis over het project beweegt, verbeter je de bruikbaarheid van de pagina van Lazor Office hierboven.

Auteur/auteursrechthebbende: Interaction Design Foundation ApS. Copyright voorwaarden en licentie: Fair Use

Onze cursuskaarten zijn zo on-mysterieus als links gaan.

Voor de cursuskaarten van de Interaction Design Foundation hebben we niet alleen “View Course” onderaan elke kaart om de actie aan te geven die zal gebeuren, maar we hebben ook een hover-status met de tekst “Go to course”. Veel websites volgen een soortgelijke conventie, en dat zou u ook moeten doen, om de bruikbaarheid van uw website te maximaliseren.

Les geleerd: Best Practice

Label altijd uw links! U zou niet graag mysterieus vlees eten, en uw gebruikers zouden ook niet graag op mysterieuze links klikken.

Wrijving toevoegen aan gebruikersacties

The Bad: iFly50.com

Als ontwerpers moeten we uiterst voorzichtig zijn met het toevoegen van wrijving aan gebruikersacties, tenzij het de bedoeling is om gebruikers te ontmoedigen die actie uit te voeren. Soms kunnen we echter onbedoeld wrijving toevoegen aan gebruikersacties (meestal om esthetische of nieuwigheidsredenen) die resulteren in nadelige UX.

Een voorbeeld is iFly50.com, gemaakt voor de verjaardag van het iFly magazine door KLM. iFly 50 is een verticaal scrollende website die 50 reisbestemmingen laat zien, en op sommige bestemmingen (zoals de onderstaande) vraagt een knop onderaan gebruikers om een paar seconden te klikken en vast te houden om meer foto’s te bekijken.

Auteur/auteursrechthebbende: Koninklijke Luchtvaart Maatschappij NV (KLM Royal Dutch Airlines). Auteursrechtelijke voorwaarden en licentie: Fair Use

iFly 50 verwacht van zijn gebruikers dat ze elke keer dat ze meer foto’s willen zien een paar seconden moeten klikken en vasthouden.

Het toevoegen van een paar seconden frictie aan elke actie kan leiden tot een enorm slechtere UX. Stel je voor dat je, in plaats van te klikken om een pagina onmiddellijk te laden, nu twee seconden moet klikken en vasthouden voor elke link die je in je browser hebt aangeklikt. Na een paar keer klikken en vasthouden stop je helemaal met het verkennen van het internet.

Vaak hebben wij ontwerpers de neiging om ons te laten meeslepen door de nieuwste interactiestijlen of -acties, maar het is van cruciaal belang dat je altijd voorzichtig te werk gaat als je ontwerp wrijving kan toevoegen aan gebruikersacties. Meestal werken beproefde conventies (bijvoorbeeld eenvoudige klikken of vegen) perfect.

Het goede: Elastic Scrolling op iOS

Intrigerend is dat het mindful toevoegen van wrijving aan gebruikersacties kan resulteren in een geweldig ontwerp. Een van de populairste uitvindingen van Apple in hun mobiele besturingssysteem, iOS, is de creatie van elastisch scrollen, waarbij in bepaalde situaties (zoals aan het eind van een webpagina) scrollen steeds moeilijker wordt.

Auteur/auteursrechthebbende: Interaction Design Foundation ApS. Copyright voorwaarden en licentie: Fair Use

In iOS’s elastisch scrollen wordt in sommige situaties opzettelijk wrijving toegevoegd.

Je kunt dit hierboven in actie zien, waar verhoogde wrijving optreedt wanneer de gebruiker naar het einde van de webpagina scrolt. Wrijving is toegevoegd om situaties aan te geven waarin scrollen niet meer is toegestaan: en het effect is een intuïtieve ervaring.

Les geleerd: Best Practice

Vermijd het toevoegen van elke vorm van frictie aan gebruikersacties voor zover dat kan – en implementeer het zorgvuldig als je geen alternatief hebt.

“Clever” Design that Ignores Usability

The Bad: Bolden.nl

Soms kunnen slimme ontwerpen schadelijk zijn voor UX. Wat deze fout nog gevaarlijker maakt is dat wij ontwerpers dol zijn op slimme ontwerpen. Het zijn kleine grafische wonderen die een glimlach op ons gezicht toveren. Jammer genoeg is de meerderheid van de mensen geen ontwerper. Nog triester, niet alle slimme ontwerpen zijn goede ontwerpen, vooral wanneer ze toegankelijkheid, vindbaarheid of bruikbaarheidsproblemen veroorzaken.

Neem bijvoorbeeld de website van de Nederlandse studio voor strategisch ontwerp en ontwikkeling Bolden:

Auteur/auteursrechthebbende: Bolden. Auteursrechtelijke voorwaarden en licentie: Fair Use

Kan je zien wat hun homepage probeert te zeggen? Nee? Nou, dat komt omdat u uw muis naar de hoek van de pagina moet verplaatsen om de berichten goed te kunnen zien.

Auteur/auteursrechthebbende: Bolden. Copyright voorwaarden en licentie: Fair Use

Is dit een slim ontwerp? Ja, zeker. Maar is dit een slecht ontwerp? Absoluut!

Dit is een goed voorbeeld van ontwerpen voor de ontwerper, in plaats van voor de gebruiker: de website heeft de leesbaarheid van de koppen ernstig beperkt in de vastberadenheid van de makers om een nieuw ontwerp te leveren. Wie dit heeft ontworpen heeft ook tekst weggelaten om gebruikers te vertellen dat ze hun muis naar de hoeken moeten bewegen, wat betekent dat de ontdekking van de koppen op toeval berust. Bovendien is, zelfs wanneer de kop wordt onthuld, het contrast tussen de tekst en de achtergrond slecht, zodat je nog steeds overlappende tekst kunt zien. Dit alles leidt tot een gebruikersonvriendelijke website.

Het goede: CultivatedWit.com

De website van Cultivated Wit is een mooi tegenvoorbeeld van hoe slim design niet ten koste hoeft te gaan van de gebruiksvriendelijkheid.

Auteur/auteursrechthebbende: Cultivated Wit. Auteursrechtelijke voorwaarden en licentie: Fair Use

De homepage van Cultivated Wit toont een geïllustreerde uil.

Op de homepage van Cultivated Wit knipoogt de illustratie van de uil als je er met je muis overheen gaat:

Auteur/auteursrechthebbende: Cultivated Wit. Copyright voorwaarden en licentie: Fair Use

Verrassing! De uil knipoogt naar je als je de cursor op hem richt. Let ook op de slimme toewijzing van witruimte.

Het belangrijkste verschil hier is dat dit geen essentieel onderdeel van de website vormt, zodat het de bruikbaarheid niet vermindert, zelfs als de gebruiker dit slimme ontwerp-element niet ontdekt.

Daarnaast hebben ze een duidelijk naar beneden gerichte pijl om te suggereren dat er iets onder de vouw ligt. En als je naar beneden scrollt, zie je dit:

Auteur/auteursrechthebbende: Cultivated Wit. Copyright voorwaarden en licentie: Fair Use

En websites kunnen slim zijn zonder de UX op te offeren.

De tekst (die leesbaar is en een goed contrast heeft) creëert een gevoel van humor – niet anders dan wat Bolden probeerde te bereiken – zonder afbreuk te doen aan de UX van de website. Het enige kleine probleem is dat de tekst “Join our email club” beter zichtbaar zou moeten zijn, maar over het geheel genomen is de website van Cultivated Wit een goed voorbeeld van het leveren van een slim ontwerp zonder een slechte UX te creëren.

Lesson Learnt: Best Practice

Slimme ontwerpen moeten altijd zo foolproof mogelijk worden gemaakt, en/of getest op echte gebruikers. Soms kunnen slimme ontwerpen averechts werken en de bruikbaarheid schaden.

Superoverbodige animaties

De Slechte: PayPal Receipt Concept op Dribbble

Animaties zijn een cruciaal element van interactie-ontwerp, maar ze moeten altijd een doel dienen. Ze mogen nooit worden gemaakt omwille van de animatie. Helaas hebben ontwerpers de neiging een liefdesrelatie met animaties te hebben, deels omdat animaties zo leuk zijn om te maken dat we niet weten wanneer we moeten stoppen.

Vladyslav Tyzun’s animatieconcept voor een PayPal e-mailontvangstbewijs, gepost op Dribbble, is een voorbeeld van animatie die verkeerd wordt gedaan:

auteur/auteursrechthebbende: Vladyslav Tyzun. Auteursrechtelijke voorwaarden en licentie: Fair Use.

De animatie is mooi, maar overbodig. In totaal duurt het maar liefst 3,5 seconden om de details van de transactie te zien. Een eenvoudige fade-in van het bonnetje zou eleganter zijn, en omdat het minder tijd in beslag neemt, ook beter voor de gebruiker.

Dit probleem wordt gevaarlijk wanneer ontwerpers schijnbaar niet genoeg kunnen krijgen van animaties. Vanaf 2016 zou de animatie van Vladyslav meer dan 500 likes en 8.000 views krijgen. Dit toont een misplaatste waardering die ontwerpers hebben voor animatie omwille van de animatie. Als je inzicht hebt in de neiging van ontwerpers om de voorkeur te geven aan opzwepende epossen boven meer directe voorstellingen en jezelf betrapt voordat je toegeeft aan animaties, bespaar je veel tijd en voorkom je veel hoofdpijn. Vergeet niet, gebruikers komen naar sites voor een doel – we willen ze laten zien wat ze willen in een korte ruimte en tijd, niet hen vast te houden in een grand tour van de galerie.

Het goede: Stripe Checkout’s Animatie

Wanneer we animatie doelgericht doen, kunnen de resultaten echter geweldig zijn. Kijk eens naar de animatie van Stripe Checkout wanneer de gebruiker een verificatiecode ontvangt:

Auteur/auteursrechthebbende: Stripe, Inc. Auteursrechtelijke voorwaarden en licentie: Fair Use.

Stripe gebruikt animaties om dingen sneller te laten lijken dan ze zijn: het geeft gebruikers updates (zoals “Verzonden”), ook al hebben ze de sms misschien nog niet ontvangen. Dit voorkomt dat gebruikers zich gefrustreerd voelen omdat ze moeten wachten, en biedt de zekerheid dat een sms nu onderweg is.

Rachel Nabors, een uitgenodigde webanimatie-expert bij het W3C, stelt vijf principes voor om in gedachten te houden bij het ontwerpen van animaties3:

1. Animate deliberately: denk na over elke animatie voordat je hem maakt.
2. Er is meer nodig dan 12 principes: Disney’s 12 animatieprincipes werken voor films, maar niet per se voor websites en apps.
3. Nuttig en noodzakelijk, dan mooi: esthetiek moet op de tweede plaats komen bij UX.
4. Ga vier keer sneller: goede animaties zijn onopvallend, wat betekent dat ze snel lopen.
5. Installeer een kill switch: voor grote animaties zoals parallex-effecten, maak een opt-out knop.

Lesson Learnt: Best Practice

Maak je animaties altijd doelgericht: te veel kan de UX van een product om zeep helpen. Schoonheid moet zijn gewicht in de schaal leggen en functioneel zijn.

The Take Away

Is het niet leuk om naar voorbeelden van slecht ontwerp te kijken? Gelukkig is het ook leerzaam. Hier zijn de belangrijkste lessen en best practices uit de vijf voorbeelden van goede en slechte ontwerpen:

1. Begrijp wat uw gebruikers nodig hebben, lever die informatie dan.
2. Als u veel informatie moet overbrengen, probeer dan visuals te gebruiken in plaats van tekst.
3. Label uw links altijd! Gebruikers houden niet van mysterieuze links.
4. Vermijd het toevoegen van enige vorm van wrijving aan gebruikersacties, tenzij ze bedoeld zijn om de actie te ontmoedigen.
5. Test uw slimme ontwerpen en voeg ze voorzichtig toe.
6. Animatie is als vloeken. Als je het te veel gebruikt, verliest het al zijn impact.4

De volgende keer dat je je wenkbrauwen fronst bij een slecht ontwerp, stop dan om na te denken: begrijp waarom het ontwerp faalde, zoek voorbeelden van ontwerpen die de dingen goed deden, en noteer de les die je hebt geleerd. En deel dan de liefde: deel je les met andere ontwerpers op ons discussieforum!