7 Dodelijke zonden van productontwerp (en hoe je ze voorkomt)
Op dit punt in onze tijdlijn is er absoluut geen excuus voor slecht productontwerp. In de voortdurend concurrerende wereld van softwareproducten is het niet onderhandelbaar om je UI- en UX-ontwerp goed te krijgen. Zelfs als je geweldige technologie hebt die de pijnpunten van je gebruikers kan oplossen, zal slechte UX gebruikers van je product wegjagen—ofwel omdat ze niet konden uitvogelen hoe ze het moesten gebruiken, of eerlijk gezegd omdat ze er een hekel aan hebben.
Bereid je voor; ik ga je zo wat "harde liefde" geven over hoe je UX niet moet aanpakken door de zeven hoofdzonden van productontwerp op te sommen en enkele van de ergste overtreders bloot te leggen.
Zonde #1: “De kerstboom”
Een van mijn dierbaarste jeugdherinneringen is dat mijn zus en ik de kerstboom versierden. Zodra we klaar waren, keken we er vol bewondering naar, omdat hij er voor ons absoluut prachtig uitzag. Nou ja, zo zagen wij het in ieder geval. Hoe zag hij er in werkelijkheid uit? Zoiets als dit.
Want more from The CPO Club?
Sign up for a free membership to complete reading this article:
Have an account? Log In
Ik neem aan dat je begrijpt waar ik naartoe wil. In tegenstelling tot de kerstboom die je je kinderen echt naar hartenlust wilt laten versieren, mogen je UI en UX er niet uitzien als een enorme chaos van elementen en kleuren die overal verspreid staan.
Laten we nu eens kijken naar een echt product dat eruitziet als een “kerstboom”.
Kijk hier even naar en probeer me uit te leggen waar dit product over gaat. Ik weet zeker dat je verdwaald raakte in de UI en ook een tijdje niet kon uitvogelen hoe het werkte. Er gebeurt gewoon te veel op dit scherm; het is eigenlijk onmogelijk te begrijpen waar je bent en wat je zou moeten doen.
De problemen die ik in deze interface zie, zijn onder andere:
- Overmatig kleurgebruik: Kleur is een krachtig hulpmiddel in de handen van vakkundige productontwerpers, omdat ze gebruikers in de juiste richting kunnen leiden. Als je echter te veel kleur in je UI gebruikt, verzwakt dat deze kracht en begint elk gekleurd element om aandacht te concurreren.
- Overdaad aan CTA's: Wat is nu het belangrijkste waarop ik moet klikken? Eerlijk gezegd heb ik geen idee—er staan overal knoppen.
- Verwarrende indeling: Het scherm is dus in feite verdeeld in drie kolommen, waarbij de middelste kolom twee tabbladen heeft en er onderaan ook een groot tijdlijngedeelte staat. De ontwerpers hebben geprobeerd zo veel mogelijk dingen in één scherm te proppen.
Doe dit in plaats daarvan
Dit is een geval waarin men UX probeert te benaderen door enige orde te scheppen in een enorme hoeveelheid informatie. Zie je UX in plaats daarvan als een kaart voor het gedrag dat je van je gebruikers wilt. Het is productontwerp 101 dat kleur, CTA's en indeling moeten samenwerken om je gebruiker naar de juiste volgende stappen te leiden.
Zonde #2: Slechte visuele hiërarchie
Visuele hiërarchie verwijst naar de rangschikking van elementen in je UI op een manier die de hiërarchische relatie tussen deze elementen duidelijk overbrengt.
Het artikel dat je nu leest heeft bijvoorbeeld een duidelijke visuele hiërarchie: de titel staat bovenaan in een groot lettertype, de tussenkoppen zijn kleiner dan de titel maar veel vetter dan de alinea's, enzovoort.
In beide gevallen benadrukken we de titels door ze groter of vetter te maken—waarmee we duidelijk aangeven dat de alinea's over de onderwerpen gaan die in elke bijbehorende tussenkop worden genoemd.
Visuele hiërarchie is een geweldige manier om je UI te organiseren en deze gemakkelijk navigeerbaar te maken. Het ontbreken ervan is echter een geweldige manier om je gebruikers te laten worstelen om hun weg door je interface te vinden.
Een van de meest opvallende mislukkingen op het gebied van visuele hiërarchie die me dagelijks ergeren, is het antwoordengedeelte van Quora.
Om mensen aan te moedigen andere vragen te bekijken en langer op hun website te blijven, heeft Quora ook vragen en antwoorden opgenomen die gerelateerd zijn aan de vraag die je momenteel bekijkt.
Daar heb ik geen bezwaar tegen. Het is bestaand gebruikersgedrag en Quora heeft een natuurlijke manier gevonden om ervan te profiteren.
Waar ik wel bezwaar tegen heb, is de manier waarop ze deze gerelateerde vragen en antwoorden hebben ontworpen. Ze lijken vrijwel identiek aan de echte antwoorden op de pagina en missen een visuele hiërarchie. Kijk naar de bovenstaande schermafbeelding en vertel me welke een antwoord is en welke een gerelateerde vraag. Je moet echt langzaam lezen om het verschil te zien.
Doe dit in plaats daarvan
Idealiter zouden de gerelateerde vragen minder prominent op de gebruikersinterface moeten zijn en lager moeten staan dan de hoofdantwoorden in de visuele hiërarchie (bijvoorbeeld met een grijsachtige achtergrond in plaats van een witte).
Zonde #3: Een gebruikersinterface rechtstreeks uit de jaren 2000
Ik weet het, ik weet het: Craigslist heeft een vreselijk verouderde gebruikersinterface en werkt nog steeds perfect. Maar het is een uitzondering op de regel en je moet niet denken dat het in 2023 nog steeds prima is om zoiets te hebben.
Het probleem is dat jouw product, in tegenstelling tot Craigslist, niet enorm populair zal zijn en geen universeel erkend merk heeft. Als mensen daarom iets verouderds zien wanneer ze je website bezoeken of je applicatie gebruiken, zullen ze je simpelweg niet serieus nemen. Je hebt echter altijd de kans om bekendheid te verwerven met je creatieve logo-ontwerp en huisstijl.
Helaas zijn het soms juist de meest “serieuze” organisaties die zich aan deze zonde schuldig maken.
Een paar jaar geleden kreeg ik de kans om samen te werken met de Centrale Bank van Armenië. Ze hebben daar enkele van de meest getalenteerde financiële analisten en experts op het gebied van monetair beleid. Bovendien was de president van deze instelling (een afgestudeerde van Harvard) ooit mijn professor en is hij waarschijnlijk de slimste persoon die ik ooit in mijn leven heb ontmoet.
De website van de Centrale Bank ziet er echter zo slecht uit dat je maar moeilijk zult geloven dat dit een zeer vooraanstaande organisatie met buitengewoon getalenteerde medewerkers is.
Zonde #4: Duistere patronen (of UX gebruiken tegen je gebruikers)
In de wereld van UX zijn “duistere patronen” gebruikersroutes en elementen van de gebruikersinterface die de gebruiker verkeerd informeren en ertoe leiden dat hij een actie uitvoert waarvan hij zich niet bewust is.
Er is een bepaalde webwinkel met een oranje pijlvormig logo die vooral “beroemd” is vanwege het toepassen van duistere patronen. Ze maken zich hier zo schuldig aan dat er lopende klachten en onderzoeken tegen hen zijn ingesteld omdat ze de regels van de FCC niet naleven.
Een van de bekendste gebruikerservaringen die onder deze categorie valt, is de manier waarop je een Prime-lidmaatschap hoort op te zeggen.
Om eerlijk te zijn denk ik dat het nog steeds een goed idee is om je gebruikers om feedback te vragen wanneer ze hun betaalde abonnement opzeggen, of om ze zelfs een korting aan te bieden in de trant van “ga alsjeblieft niet weg”. Maar je moet de tijd en het geduld van je gebruikers respecteren.
Houd er rekening mee dat de mensen die je abonnement willen opzeggen waarschijnlijk geïrriteerd of ontevreden over je zijn. Als je het daarom moeilijk voor hen maakt om op te zeggen, zullen ze nog bozer worden (en kun je vergeten dat je ze ooit in de toekomst terugbrengt).
Als je bijvoorbeeld je Prime-lidmaatschap probeert op te zeggen, zal Amazon je vragen om het te heroverwegen.
Met dit scherm heb ik geen probleem; iedereen doet dit.
Ik vind het echter niet oké dat je je keuze nog twee keer(!) moet bevestigen om op te zeggen (meen je dit nou?). Bovendien zijn de formuleringen en kleuren die ze voor hun CTA's gebruiken erop afgestemd om het moeilijk voor je te maken de knop te vinden waarmee je het lidmaatschap opzegt in plaats van behoudt.
Doe dit in plaats daarvan
Probeer je gebruikers niet aan te zetten tot een actie die tegen hun bedoeling ingaat en probeer ze niet “murw te maken” door opzeggen buitensporig moeilijk te maken. Mensen zijn slim genoeg om te weten dat je dit expres doet, en daardoor zullen je concurrenten er alleen maar aantrekkelijker uitzien. Houd in plaats daarvan een korte enquête over de reden waarom ze bij je vertrekken en maak het proces efficiënt, terwijl je de deur openlaat voor een terugkeer.
Zonde #5: De beste werkwijzen voor formulieren niet volgen
Formulieren zijn een van de fundamentele elementen van websites en een van de eerste dingen die ontwikkelaars leren bouwen en ontwerpers leren — nou ja — ontwerpen.
Een geweldige gebruikerservaring voor formulieren creëren is waarschijnlijk een van de meest besproken onderwerpen onder ontwerpers, en je kunt vrijwel overal beste werkwijzen, handleidingen en lessen hierover vinden.
Gezien de overvloed aan educatief materiaal over formulieren en het belang om ze goed te maken (het heeft immers direct invloed op uw acquisitie en andere belangrijke statistieken), zou ik willen stellen dat het niet volgen van de gevestigde beste praktijken voor formulier-UX een zonde is.
Laat me nu een voorbeeld geven van slecht productontwerp voor formulieren.
Ik kan niet eens naar deze pagina kijken zonder dat mijn ogen pijn doen. Er zijn hier gewoon zoveel dingen mis. Om er een paar te noemen:
Onjuist gebruik van witruimte: Waarom moeten de veldnamen zo ver van de velden zelf af staan? Waarom gebruikt u een heel blok om twee kleine schakelaars voor afhalen en bezorgen te plaatsen? U kunt hier een formulier maken dat minstens 4x kleiner en veel gemakkelijker te scannen is en toch alle informatie bevat.
Onjuiste opmaak van velden: Er is een telefoonnummerveld waarin de cijfers die u invoert niet worden weergegeven in de indeling van een telefoonnummer (bijv. +1 (555) 123-1234), zodat ze gemakkelijker te lezen zijn. Dit komt zo vaak voor dat de meeste ontwerptools er zelfs kant-en-klare componenten voor hebben.
Ontbreken van een tijdelijke aanduiding: U merkt nauwelijks dat er een tekstveld is in het gedeelte “Aanvullende bezorginstructies”. Bovendien weet ik niet zeker wat u daar zou moeten schrijven. Een goede formulier-UX gaat er altijd van uit dat er tijdelijke aanduidingen aanwezig zijn die u een hint geven, zoals "Laat het pakket alstublieft op de veranda aan de voorkant achter."
Doe dit in plaats daarvan
De oplossingen voor elk van deze problemen spreken eigenlijk voor zich, maar dit is een geval waarin het erop lijkt dat de enige mensen die dit formulier hebben getest degenen zijn die het hebben gebouwd. De ontwerpers hadden er goed aan gedaan om vóór de lancering echte terugkoppeling van gebruikers over deze UX te verzamelen.
Zonde #6: De verkeerde UI-elementen gebruiken
De volgende zonde waar ik het over wil hebben, is een voortzetting van de vorige. Formulieren zijn niet de enige UI-elementen in uw product die gevestigde conventies en beste praktijken moeten volgen. Er zijn ook andere veelvoorkomende elementen, zoals schakelaars, selectievakjes en andere.
Gebruikers hebben namelijk al gevestigde mentale modellen voor de manier waarop elk van deze elementen werkt en u moet ervoor zorgen dat u ze op de juiste manier gebruikt.
Hier zijn een paar voorbeelden van waarvoor deze elementen zijn gemaakt en hoe u ze niet juist gebruikt:
Schakelaars: Dit element toont een “booleaanse” status (zoals iets dat Aan/Uit of Actief/Inactief is). Ze zijn uitstekend geschikt om gebruikers de status van de Bluetooth-antenne in hun smartphone te tonen en hen deze in of uit te laten schakelen.
In het vorige formulier zijn er echter twee schakelaars waarmee de gebruiker kan kiezen tussen afhalen en bezorgen.
Als u hier even over nadenkt, hebt u er langer over nagedacht dan de ontwerper. Deze schakelaars betekenen dat u “afhalen” UIT moet zetten en “bezorgen” AAN om de optie “bezorgen” te selecteren! Ze hadden keuzerondjes kunnen gebruiken. Ik vraag me eerlijk gezegd af wat er gebeurt als een gebruiker beide tegelijk inschakelt.
Selectiemenu's zonder filtering: Selectiemenu's behoren tot de oudste elementen die op websites verschenen en zijn nog steeds populair en zeer gebruiksvriendelijk als ze correct worden gebruikt.
Doe dit in plaats daarvan
Volgens de beste praktijk moet u een selectiemenu gebruiken wanneer de gebruiker één optie moet kiezen uit een lijst van 5-15 opties. Als er minder dan 5 opties zijn, kunt u het beste keuzerondjes gebruiken.
Als er een uitgebreide lijst met opties is waaruit u kunt kiezen (bijv. 50 Amerikaanse staten of ~200 landen), moet u filtering aan uw selectiemenu toevoegen. Anders moet uw gebruiker door die lange lijst scrollen om de gewenste optie te vinden.
Zonde #7: Negeren wie uw gebruikers zijn en wat ze willen
Tot slot de grootste zonde van allemaal: een nieuw product maken met een UX-ontwerp dat niet aansluit bij de behoeften en interesses van uw gebruikers. Dit is een recept voor mislukking.
Doe dit in plaats daarvan
Een goed productontwerpproces begint altijd met gebruikersonderzoek. Tenzij je weet wie je gebruikers zijn en wat ze nodig hebben, zul je vrijwel zeker eindigen met een slecht ontworpen product, hoe mooi de gebruikersinterface die je maakt ook is.
Ik weet dat gebruikersonderzoek geen gemakkelijke taak is. Apple had immers jarenlang gebruikerstests nodig om een uitzonderlijk niveau van gebruiksvriendelijkheid te bereiken, zowel in het industriële ontwerp als in de gebruikerservaring van de iPhone. Geloof me echter: het is het meest impactvolle werk dat je kunt doen om het succes van je product te garanderen.
Het is echt eenvoudig om ontwerpzonden te voorkomen
Als je websites bouwt, heb je een betere uitgangspositie. Waarom? Omdat webontwerptools meestal sjablonen bieden waarin sommige van de hier genoemde zonden al worden vermeden. Maar of je nu een startup bent die digitale producten ontwikkelt of een onderneming die fysieke producten maakt (zoals toetsenborden of bewegingssensoren), het is eigenlijk vrij eenvoudig om slecht ontwerp te voorkomen.
Zolang je productontwikkelingsproces gericht is op de behoeften en pijnpunten van je gebruikers en je de juiste productontwerpsoftware gebruikt, kun je aanzienlijke ontwerpfouten voorkomen en voorkomen dat je eindigt met een slecht ontworpen product (dit is ook een van de vele voordelen van AI-ontwerpsoftware).
Ik hoop dat deze voorbeelden je een beter gevoel over je eigen producten hebben gegeven, of je op zijn minst hebben laten glimlachen. Abonneer je op onze nieuwsbrief voor meer UX-tips en andere artikelen voor productprofessionals!
