UI-ontwerppatronen: beproefde oplossingen voor veelvoorkomende Usability-problemen

Sonja Hoffmann Laatst bijgewerkt op 21.10.2020
11 Min.
UI-Design-Patterns
Laatst bijgewerkt op 21.10.2020

Hoe moet het menu van jouw website worden gestructureerd? Waarom is het voor sommige websitebeheerders gemakkelijker om abonnees te krijgen dan voor andere? Wat zorgt ervoor dat gebruikers het formulier op jouw website invullen of negeren? Als ontwerper heb ik me beziggehouden met vragen over het ontwerp van de gebruikersinterface en de bruikbaarheid van het web - de antwoorden vind je in dit artikel.

Wat zijn User Interface (UI) Design Patterns?

User interface (UI) design patterns zijn bibliotheken van bruikbaarheidsproblemen die reeds met succes zijn geanalyseerd en opgelost. Deze moeten echter niet één op één worden overgenomen. Zij bieden echter wel een uitgebreide basis voor een harmonieuze gebruikerservaring. UI-patronen zijn er om uw workflow te vergemakkelijken en te versnellen.

Meer tips over UX-ontwerp en webbruikbaarheid

Zoals beschreven in dit artikel, helpt een goede usability uw gebruikers soepel door uw site, product of merk te leiden.

Formule voor UI Design Patterns

Hoe weet u welke design patterns geschikt zijn voor uw website en hoe u ze correct gebruikt? Chris Bank heeft de volgende aanpak uitgewerkt in zijn e-book Mobile UI Design Patterns:

  • Probleemidentificatie: Wat probeert de gebruiker op uw website te bereiken en welke problemen ondervindt hij? Probeer de problemen in één zin te formuleren.
  • Oplossingsaanpak: Hebben andere ontwerpers dit probleem al opgelost? Zo ja, hoe?
  • Real-Life-Example: Kijk naar voorbeelden en doorloop ze als gebruiker. Probeer te analyseren wat u heeft geholpen om een bepaalde taak op te lossen. Denk na over wat je aan het denken zette - of misschien zelfs onzeker maakte. 
  • Resultaat: Vat de resultaten van uw analyse samen. Hoe kunt u ze op uw website implementeren zodat ze bezoekers een toegevoegde waarde bieden? Welke ontwerppatronen moet je vermijden? Als u een stijlgids hebt, moet u uw resultaten daarin opnemen.

4 Categorieën van UI Ontwerp Patronen

UI design patterns kunnen worden onderverdeeld in vier categorieën, die ik in dit deel kort zal introduceren. Helaas zal ik niet alle UI design patterns kunnen behandelen. Als u zich verder in het onderwerp wilt verdiepen, biedt het web bijna onbeperkte mogelijkheden om u in te lezen. Een paar nuttige bronnen over het onderwerp van UI design patterns zijn:

1. meest voorkomende navigatie-elementen

De navigatie is een van de belangrijkste interactie-elementen voor de gebruiker: ze fungeert niet alleen als inhoudsopgave van uw pagina, maar ook als oriëntatiehulp. Het feit dat het meestal bovenaan of aan de zijkant wordt geplaatst, had oorspronkelijk vooral hiërarchische redenen. Met de navigatie laten wij de gebruiker in één oogopslag zien wat hij op onze pagina kan doen en waar hij zich op dat moment bevindt.

Dankzij jarenlange praktijkervaring hebben wij deze kennis zodanig geïnternaliseerd dat de trend naar minimalisme niet hoeft te stoppen bij de navigatie. Design patterns zijn dus vrij aanpasbaar - of ze moeten zelfs geïndividualiseerd worden voor uw site, zodat ze werken.

screenshot-www.castoretpollux.com-2020.06.11-18-05-59
Website van Castor & Pollux

Castor et Pullex volgden de regels van het UI-patroon en pasten die toch individueel aan hun site aan: een navigatie die zich in het scherm rechtsboven bevindt en "sticky" wordt bij het scrollen. Het logo dat de gebruiker altijd terugbrengt naar "de veilige haven" - de startpagina.

Een website die op zichzelf veel interactie toelaat, en daardoor bijna wat chaotisch overkomt, krijgt een aangename gebruiksvriendelijkheid door het gebruik van reeds vertrouwde ontwerpoplossingen.

"Sticky" navigaties, zoals beschreven in het voorbeeld hierboven, zijn een prachtige uitvinding in web design. Ze kunnen niet alleen worden gebruikt om indrukwekkende animaties weer te geven - ze zorgen er ook voor dat de bezoekers van uw website sneller van "A naar B" komen. Met One Pagers werken ze ook als een rode draad: De gebruiker weet waar hij is en wat hij al heeft gezien.

Het is vergelijkbaar met broodkruimels: Voor kleine pagina's hebben ze niet veel zin. Voor complexere pagina's kunnen ze echter wonderen verrichten. Zij helpen de gebruiker niet alleen zich te oriënteren, maar ook om terug te springen naar een willekeurige plaats in de navigatie.

Een andere manier om deze patronen te gebruiken ziet u in het volgende voorbeeld:

De makers van deze site hebben de kennis van het mobiele hamburgermenu overgenomen: Enerzijds om een minimalistische navigatie van hun site mogelijk te maken, die niet vreemd is voor de gebruiker. Anderzijds om hun product toch voldoende ruimte te bieden om op de voorgrond te treden.

screenshot-demodern.com
Voorbeeldproject van Demodern

Een beetje uit de mode - maar minstens zo nuttig - zijn de zogenaamde tabbladen in de navigatie. Zij doen denken aan een archiveringssysteem en worden snel en intuïtief begrepen door de gebruikers. Ook hier functioneert het geleerde in de afgeslankte versie net zo goed als in de oorspronkelijke versie.

Intussen worden tabbladen steeds vaker gebruikt als modale tabbladen om inhoud weer te geven die op een meer ruimtebesparende manier aan elkaar moet worden gekoppeld. Als modale tabbladen hebben ze ook het voordeel dat pagina's niet volledig hoeven te worden herladen om andere inhoud te tonen. Vooral in de productpagina's van winkels op basis van WooCommerce zien we ze vaak - zoals in de volgende voorbeelden: 

UI-ontwerppatronen: beproefde oplossingen voor veelvoorkomende Usability-problemen
Uitzicht vanaf Atlantic Patio

Vervolgens een minder minimalistisch voorbeeld ter vergelijking:

UI-ontwerppatronen: beproefde oplossingen voor veelvoorkomende Usability-problemen
Voorbeeldpagina van Bamboe Kleding

Vaak worden UI-patronen gemodelleerd naar interacties in de echte wereld. Daarom is het belangrijk de fysische eigenschappen nooit uit het oog te verliezen en/of ze opzettelijk te wijzigen. Omdat dit ertoe leidt dat de gebruiker deze acties en de gevolgen ervan niet intuïtief kan begrijpen. Om dit voor u duidelijker te maken, heb ik bovenstaand voorbeeld een keer aangepast:

screenshot-bambooclothing.co.uk-2020.06.11-18-33-55_modified

De fysieke eigenschappen van de mappenstructuur zijn niet langer aanwezig. De tabs zien er nu uit als misplaatste navigatie-elementen. Het verband tussen de elementen is enigszins zoek - ze lijken bijna willekeurig gerangschikt.

Overloopmenu's en "Spring naar sectie"-knoppen

Om onze lijst compleet te maken, mogen overloopmenu's en "Jump to Section"-knoppen niet ontbreken. "Jump to Section" knoppen bevinden zich meestal in de linker benedenhoek. Zij stellen de gebruiker in staat om met één klik terug te navigeren naar het begin van de pagina. Vooral bij one-pagers zijn knoppen om naar een sectie te springen zinvol: ze besparen tijd en voorkomen frustratie door het vervelende scrollen.

Drop down menu's hebben eigenlijk hun oorsprong minder in het verbeteren van de bruikbaarheid van pagina's. Ze werden ontwikkeld om ruimte te besparen en om meer inhoud in de navigatie te kunnen opnemen. Ze zorgen er ook voor dat uw ontwerp er netter en duidelijker uitziet. Drop down menu's zijn een van die design patterns die vaak worden aangeduid als anti-patterns - omdat ze het niet echt makkelijker maken om door de website te navigeren. Het gebruik van keuzemenu's wordt echter nog steeds aanbevolen. Immers, hoe ze werken is bekend en geleerd. Indicatoren van een drop down menu zijn vaak de naar beneden wijzende visgraatpatronen.

UI-ontwerppatronen: beproefde oplossingen voor veelvoorkomende Usability-problemen
Website van Ehire

Knoppen en links worden met opzet slechts kort genoemd in dit bericht, omdat ze voldoende bekend zouden moeten zijn bij elke ontwerper. Er zijn nauwelijks grenzen aan het ontwerp en de animatie van knoppen. Hun stijl hangt meestal af van de visuele opmaak van de aangeboden informatie. Ze moeten prominent worden weergegeven in de primaire kleur van de pagina en zo worden geplaatst dat ze gegroepeerd zijn met de relevante inhoud.

Hetzelfde geldt voor links: Ze hoeven niet langer in blauw met een onderstrepingsteken te worden weergegeven, zoals vroeger het geval was. Maar het bestaan ervan moet duidelijk en vooral consequent zijn. U kunt hier uitgebreide kennis over knoppen krijgen.

Paginering - het delen van inhoud over meerdere pagina's - is vooral belangrijk voor e-commerce winkels die een groter aantal producten aanbieden. Hiermee wordt de inhoud op meerdere pagina's aangeboden, wordt de laadtijd verkort en wordt de inhoud opgedeeld in licht verteerbare delen. Kranten, zoals de FAZ, gebruiken ook paginering om langere artikelen op te splitsen.

screenshot-www.faz.net-2020.06.13-15-49-43
Voorbeeld van de FAZ

Ook de zogenaamde "fat footer", die de laatste jaren trendy is geworden, is nu een van de aangeleerde UI-patronen. Hier kunt u bijvoorbeeld linken naar vaak bezochte subpagina's, uw contactgegevens opslaan en juridische inhoud weergeven die geen plaats heeft in de hiërarchie van de primaire navigatie. 

De voettekst fungeert dan gedeeltelijk als een anders gestructureerde inhoudsopgave voor uw pagina. Maar het kan ook staan als een soort teaser voor verdere informatie. Zodra de gebruiker door uw pagina heeft gescrolld, kan de voettekst hem relevante inhoud aanbieden - zoals interessante artikelen, links naar sociale media, enz. - die hem verder bij uw product zal betrekken.

2. input & output: Contact- en inschrijvingsformulieren

Afgezien van de richtsnoeren inzake gegevensbescherming is het ook de moeite waard hier aandacht te besteden aan de behoeften van de gebruiker. Vooral op mobiele apparaten kan een invulformulier snel tot frustratie leiden: Het toch al kleine scherm, de fysieke omgeving tijdens het gebruik, het tijdsaspect en een mogelijk onstabiele verbinding kunnen al snel een zenuwslopende beproeving zijn. Gelukkig zijn er ontwerp-patronen die juist deze problemen al hebben aangepakt.

Tip:

Zoals meestal het geval is op het web, geldt dat ook hier: Zo kort als mogelijk, zo lang als nodig. Studies hebben aangetoond dat de toevoeging van nutteloze vragen de deelname doet inzakken en dus onder bepaalde omstandigheden veel geld kan kosten.

Hieronder heb ik een fictief formulier gemaakt om u de belangrijkste beginselen te laten zien: 

Formulier
Beginselen voor invoerformulieren
  1. Eye tracking tests hebben uitgewezen dat we informatie sneller verwerken als die van boven naar beneden is gerangschikt, in plaats van van links naar rechts. Daarom is het raadzaam de kop boven het formulierveld te plaatsen en slechts één kolom te maken.
  2. Het is nuttig om de gebruiker een voorbeeld te geven van de invoer in vooraf gedefinieerde plaatsaanduidingen - dit maakt de vereiste informatie vooraf zichtbaar. U moet gefragmenteerde nummering vermijden, omdat dit de invoer alleen maar ingewikkelder maakt. Bovendien moeten deze zo worden geprogrammeerd dat zij tolerant zijn ten opzichte van spaties.
  3. Foutafhandeling is een belangrijk en complex onderwerp. De asterisk en het rood omrande invoerveld hebben zich bewezen als UI-patronen. Idealiter zouden de velden voor zichzelf moeten spreken. Toch moet u er altijd rekening mee houden dat iets niet zal werken. Zorg er daarom voor dat je verschillende manieren aanbiedt om te helpen. Er zijn verschillende manieren om dit te doen: Een infoknop die mogelijke hulp biedt als je er met de muis over gaat. Of het verschijnen van kleine modals wanneer het formulier niet succesvol is ingediend.
  4. Het is een goed idee om feedback te geven terwijl het wachtwoord wordt ingevoerd. In het geval van wachtwoorden is het ook nuttig gebleken de gebruiker een kwalitatieve beoordeling te geven van de veiligheid van het wachtwoord dat hij of zij heeft gekozen. 
  5. De meerstappenvorm heeft verscheidene psychologische voordelen. Ten eerste is het duidelijker en minder afschrikwekkend. Als de gebruiker bovendien door middel van een indicator (in dit geval de laadbalk) te zien krijgt waar hij zich in het formulier bevindt, weet hij precies wat hem te wachten staat. Hij heeft minder kans om voortijdig te aborteren. U moet altijd om persoonlijke informatie vragen aan het eind van het formulier. Als de bezoeker van uw website het formulier namelijk al grotendeels heeft ingevuld, zal het voor hem moeilijker zijn om de tijd die hij al zonder resultaat heeft geïnvesteerd, op te geven. Het is ook raadzaam alleen om informatie te vragen die u werkelijk nodig hebt en het verzoek te motiveren. Als u uw gebruikers vraagt om zich ergens voor aan te melden, is het raadzaam om hen een voordeel te bieden à la "Altijd de beste deals eerst krijgen". In de laatste stap moet u een klein overzicht geven van wat er daarna gaat gebeuren - en wat de gebruiker wanneer kan verwachten.

Bovendien moet het automatisch invullen (via in de browser opgeslagen gegevens) en het herkennen van informatie (zoals het toevoegen van de stad na het invoeren van een postcode) in uw formulieren worden geïntegreerd. Vooral op WordPress is dit al standaard in veel formulieren opgenomen. 

Je moet het gebruik van captcha's vermijden indien mogelijk, of ze op zijn minst tot een minimum beperken. Volgens deze studie kunnen captcha's leiden tot 30 procent minder interactie met het formulier.

3. het structureren van uw inhoud

Als websitebeheerder moet je speciale aandacht besteden aan de manier waarop de inhoud van je site is gestructureerd: ondersteunen zij jouw bezoekers om hun weg te vinden op je site? Is je inhoud gemakkelijk toegankelijk en kan de hiërarchie ervan worden begrepen? 

De kwestie van gemakkelijke toegankelijkheid is vooral aantrekkelijk voor gebruikers die uw site onder gewijzigde omstandigheden bekijken. Bijvoorbeeld mensen met problemen met kleurenvisie en visuele handicaps. Als u dieper wilt ingaan op het thema toegankelijkheid, kunt u hier meer informatie vinden: 

Als u een blog of een online magazine hebt, kent u waarschijnlijk het probleem: u hebt veel interessante inhoud die u zo gelijk mogelijk wilt aanbieden. Een geschikt ontwerppatroon hiervoor is de zogenaamde "Artikel Lijst". Hier categoriseert u uw inhoud en toont u slechts een klein gedeelte per keer. Zo toont u in één oogopslag veel onderwerpen zonder uw gebruikers te overspoelen met informatie. Een mooi voorbeeld toont hier RAIDBOXES:

RAIDBOXES WP unboxed
Zicht op WordPress magazine wp unboxed

Door deze opdeling kan de gebruiker de hele inhoud per interessegebied doorbladeren en zo sneller vinden wat hem interesseert.

Om bepaalde inhoud zonder afleiding aan te bieden, kunt u modale boxen gebruiken. Deze overlappen de rest van uw pagina en laten de gebruiker toe zich alleen op de inhoud te concentreren. Dit kan nodig en belangrijk zijn. Merk echter op dat deze modalen ook de neiging hebben om antipatronen te zijn: In principe blokkeren ze de gebruiker om enige actie te ondernemen zolang de modal open is.

Maar als ze correct worden gebruikt, kunnen modale boxen uw bezoekers helpen uw inhoud beter te begrijpen. Modale boxen die te vaak of schijnbaar zonder reden worden geactiveerd, kunnen echter snel frustratie en een gevoel van hulpeloosheid veroorzaken.

Lightbox en volledig scherm behoren ook tot deze categorie. Aan de ene kant stellen ze uw gebruiker in staat om geselecteerde inhoud van dichtbij te bekijken. Aan de andere kant maken ze elke andere interactie onmogelijk. Daarom is het altijd belangrijk ten minste één verdwijnpunt aan te bieden. Vooral bekend zijn het klikken op een X in het rechterbovengedeelte van de afbeelding of het klikken buiten het kader om het weer te sluiten.

Een populaire manier om afbeeldingen weer te geven zijn ook diavoorstellingen. Er wordt een onderscheid gemaakt tussen automatisch en handmatig genavigeerde diavoorstellingen. Galerijen worden vaak weergegeven als miniatuurafbeeldingen en vervolgens vergroot met behulp van diavoorstellingen en/of lichtboxen.

Hier moet je in de eerste plaats handelen volgens de functie: Wat voor beelden laat je zien? Moeten ze beschikbaar zijn als volledig scherm? En wat is belangrijker: uw inhoud in zijn geheel of de afzonderlijke beelden? Is het de moeite waard om naar andere mogelijkheden te grijpen - zoals een vergrootglas dat uw afbeeldingen vergroot wanneer u er met de muis over gaat? Dit laatste is bijzonder populair in de elektronische handel.

Screenshot Unsplash UI Design Patterns
Miniatuurweergave op unsplash.com

unsplash.com gebruikt een mengeling van fotogalerij en lichtboxen. De afbeeldingen worden echter niet als miniaturen weergegeven. Waarom? Unsplash is een platform dat alleen afbeeldingen aanbiedt om te downloaden. Dit betekent dat de gebruikers in een eerste oogopslag direct voor of tegen het beeld moeten kunnen beslissen. Om die beslissing te kunnen nemen, moet de beeldresolutie relatief goed zijn. Thumbnails zouden daar te klein voor zijn. En op elke afbeelding afzonderlijk klikken of door een diapresentatie navigeren zou de efficiëntie van de pagina vele malen minimaliseren.

Tijdens het gehele implementatie- en ontwerpproces mag u de vraag naar het nut/de waarde en het belang nooit uit het oog verliezen.

4. spelen op sociale kanalen

Het gaat om patronen die uw gebruikers naar uw sociale mediakanalen leiden en/of hun sociale interactie vergemakkelijken. Meer gedetailleerde voorbeelden kunt u hier lezen.

Conclusie

Tot besluit kan ik u twee benaderingen in het bijzonder aanbevelen. Bezoek en analyseer eerst zoveel mogelijk websites om inspiratie op te doen: Hoe hebben andere ontwerpers bepaalde problemen opgelost of juist niet opgelost? Wat frustreert me zelf als ik op het net surf? Wanneer was de laatste keer dat ik positief verrast was - en waarom? 

Ten tweede, onthoud altijd dat u niet de gebruiker bent. Bezoekers van uw website denken verrassend anders dan u. Ze kennen uw product misschien nog niet. Voer daarom herhaaldelijk verschillende tests uit om te kunnen beoordelen hoe de bruikbaarheid op uw pagina werkelijk is.

Welke vragen heb je voor Sonja over UI Patterns?

Voel je vrij om de commentaarfunctie te gebruiken. Wilt u op de hoogte blijven van nieuwe artikelen en tips over webdesign en -ontwikkeling? Volg ons dan op Twitter, Facebook of via onze nieuwsbrief.

Na haar studie Game Design en Creative Writing in het groene Auckland heeft Sonja Hoffmann zich gespecialiseerd in web- en app-desgign en de ontwikkeling daarvan. Haar focus ligt op gamification en het verkennen van gebruikersmotivatie en ervaring, gekoppeld aan haar passie en nieuwsgierigheid voor technologische trends.

Reacties op dit artikel

Laat een opmerking achter

Jouw e-mailadres zal niet worden gepubliceerd. Verplichte velden zijn met een * gemarkeerd.