UI-ontwerppatronen: beproefde oplossingen voor veelvoorkomende Usability-problemen

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

Hoe moet het menu van uw website worden gestructureerd? Waarom is het voor sommige website-eigenaren gemakkelijker om abonnees te krijgen dan voor andere? Wat zorgt ervoor dat gebruikers het formulier op uw 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 vindt u in dit artikel.

Wat zijn User Interface (UI) Design Patterns?

User Interface (UI) Design Patterns zijn bibliotheken van bruikbaarheidsproblemen die al met succes zijn geanalyseerd en opgelost. Ze moeten echter niet één op één worden aangenomen. Ze bieden echter een uitgebreide basis voor een harmonieuze gebruikerservaring. UI-patronen zijn er om uw workflow te vergemakkelijken en te versnellen.

Verdere tips over UX Design & Web Usability

Als in dit artikel een goede gebruiksvriendelijkheid helpt om uw gebruikers vlot door uw site, uw product of uw merk te loodsen.

Formule voor UI-ontwerppatronen

Hoe weet u welke designpatronen geschikt zijn voor uw website en hoe u deze correct kunt gebruiken? Chris Bank heeft hierover geschreven in zijn e-boek... Mobiele UI-ontwerppatronen de volgende procedure wordt uitgewerkt:

  • Probleemidentificatie: Wat probeert de gebruiker te bereiken op uw website en welke problemen ondervindt hij? Probeer de problemen in één zin te formuleren.
  • Oplossing: hebben andere ontwerpers dit probleem al opgelost? Zo ja, hoe dan?
  • Real-Life-Example: Kijk naar voorbeelden en neem ze door als gebruiker. Probeer te analyseren wat u heeft geholpen bij het oplossen van een bepaalde taak. Denk na over wat je aan het denken zette - of misschien zelfs onrustig maakte - over de taak. 
  • Gebruik: vat de resultaten van uw analyse samen. Hoe kunt u ze op uw website implementeren zodat ze een toegevoegde waarde bieden aan de bezoekers? Welke ontwerppatronen kunt u beter niet gebruiken? Als je een stijlgids hebt, moet je daar je resultaten bijvoegen.

4 categorieën van UI-ontwerppatronen

UI Design Patterns kan worden onderverdeeld in vier categorieën, die ik u in dit hoofdstuk kort zal voorstellen. Helaas zal ik niet alle UI-ontwerppatronen kunnen behandelen. Als u dieper in het onderwerp wilt duiken, biedt het web u bijna onbeperkte mogelijkheden om meer te lezen. Enkele nuttige bronnen over het onderwerp van UI-ontwerppatronen zijn:

1. meest voorkomende navigatie-elementen

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

Dankzij de jarenlange praktijk hebben we deze kennis zodanig geïnternaliseerd dat de trend naar minimalisme niet hoeft te stoppen bij de navigatie. Designpatronen zijn daarom vrij aanpasbaar - of ze moeten zelfs worden geïndividualiseerd voor uw site om ze te laten werken.

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

Castor et Pullex volgde de UI-patroonregels en paste deze nog steeds aan hun site aan: een navigatie die zich in het rechterbovenvenster bevindt en bij het scrollen "plakkerig" wordt. Het logo dat de gebruiker altijd terugbrengt naar "de veilige haven" - de homepage.

Een website die veel interactie mogelijk maakt en daardoor bijna chaotisch lijkt, krijgt een prettige bruikbaarheid door gebruik te maken van reeds bekende ontwerpoplossingen.

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

Het is vergelijkbaar met broodkruimels: Ze hebben niet veel zin met kleine pagina's. Maar voor complexere pagina's kunnen ze wonderen verrichten. Ze helpen de gebruiker niet alleen om zich te oriënteren, maar ook om terug te springen naar elke gewenste locatie in de navigatie.

Een andere manier om deze patronen te gebruiken wordt in het volgende voorbeeld getoond:

De makers van deze site hebben de kennis van het mobiele hamburger menu overgenomen: Enerzijds om een minimalistische navigatie van hun site mogelijk te maken, die de gebruiker niet vreemd is. Aan de andere kant wilden ze hun product voldoende ruimte geven om op de voorgrond te staan.

screenshot-demodern.com
Voorbeeld project van Demoders

Een beetje uit de mode - maar minstens zo nuttig - zijn de zogenaamde tabbladen in de navigatie. Ze doen denken aan een archiveringssysteem en worden snel en intuïtief begrepen door de gebruikers. Ook hier, in de afgeslankte versie, het semi-geschoolde werk net zo goed als in de originele versie.

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

UI-ontwerppatronen: beproefde oplossingen voor veelvoorkomende Usability-problemen
zicht vanuit Atlantisch Patio

Vervolgens een minder minimalistisch voorbeeld ter vergelijking:

UI-ontwerppatronen: beproefde oplossingen voor veelvoorkomende Usability-problemen
voorbeeldpagina van bamboekleding

UI-patronen zijn vaak gebaseerd op interacties in de echte wereld. Daarom is het belangrijk om de fysieke eigenschappen nooit uit het oog te verliezen en/of opzettelijk te veranderen. Want dit leidt ertoe dat de gebruiker deze handelingen en de gevolgen ervan niet meer intuïtief kan begrijpen. Om u dit duidelijk te maken, heb ik het bovenstaande voorbeeld een keer aangepast:

screenshot-bamboekleding.nl2020.06.11-18-33-55_gewijzigd

De fysieke eigenschappen van de mappenstructuur worden niet meer gegeven. De tabbladen zien er nu uit als misplaatste navigatie-elementen. De verbondenheid van de elementen is enigszins verloren gegaan - ze lijken bijna willekeurig te zijn gerangschikt.

Overloop menu's en "Ga 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 linkerbenedenhoek. Ze stellen de gebruiker in staat om met één klik terug te navigeren naar de top van de pagina. Vooral met One Pager, Jump to Section knoppen zijn zinvol: ze besparen tijd en voorkomen frustratie door vervelend te scrollen.

Drop down menu's hebben hun oorsprong minder in het verbeteren van de bruikbaarheid van pagina's. Ze zijn ontwikkeld om ruimte te besparen en om meer inhoud in de navigatie op te nemen. Ze zorgen er ook voor dat uw ontwerp er netter en duidelijker uitziet. Drop down menu's behoren tot de Design Patterns, die vaak Anti-Patterns worden genoemd - omdat ze het navigeren door de website niet echt makkelijker maken. Het gebruik van drop-down menu's wordt echter nog steeds aanbevolen. Hun functie is immers bekend en geleerd. Indicatoren voor een uitklapmenu zijn vaak de naar beneden wijzende visgraatpatronen.

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

Knoppen en links worden in dit artikel bewust slechts kort genoemd, omdat ze voor elke ontwerper voldoende bekend moeten zijn. Er zijn nauwelijks grenzen aan het ontwerp en de animatie van knoppen. Hun stijl hangt meestal af van de visuele lay-out van de aangeboden informatie. Ze moeten duidelijk zichtbaar zijn in de Primaire kleur van de pagina en zo geplaatst dat ze gegroepeerd zijn met de relevante inhoud.

Hetzelfde geldt voor links: Ze hoeven niet meer in het blauw te worden weergegeven met een underscore, zoals voorheen het geval was. Maar hun bestaan moet duidelijk en vooral uniform zijn. Uitgebreide kennis over knoppen die je krijgt hier.

Paginering - het delen van content over meerdere pagina's - is vooral belangrijk voor e-commerce winkels die een groot aantal producten aanbieden. Met behulp van paginering wordt de inhoud op meerdere pagina's aangeboden, wordt de laadtijd verkort en wordt de inhoud in licht verteerbare delen verdeeld. Kranten, zoals de FAZ, gebruiken Pagination ook 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 een trend is geworden, is nu een van de geleerde UI-patronen. Hier kunt u bijvoorbeeld linken naar vaak bezochte subpagina's, uw contactgegevens opslaan en legale inhoud weergeven die geen plaats heeft in de primaire navigatie. 

De voettekst functioneert dan deels als een anders gestructureerde inhoudsopgave van uw pagina. Maar het kan ook dienen als een soort teaser voor meer informatie. Als de gebruiker eenmaal door uw site is gebladerd, kan de voettekst hem/haar relevante content aanbieden - zoals interessante artikelen, social media links, etc. - die hem/haar bezig houden met uw product.

2. input & output: Contact- en aanmeldingsformulieren

Naast de richtlijnen voor gegevensbescherming is het hier ook de moeite waard om de aandacht te richten op de behoeften van de gebruikers. Vooral op mobiele apparaten kan een invoerformulier snel tot frustratie leiden: Het toch al kleine scherm, de fysieke omgeving tijdens het gebruik, het tijdsaspect en een mogelijke onstabiele verbinding kunnen snel een zenuwslopende test worden. Gelukkig zijn er enkele ontwerppatronen die precies deze problemen al hebben aangepakt.

Tip:

Hetzelfde geldt hier als in het algemeen op het web: Zo kort mogelijk, zo lang als nodig is. Studies hebben aangetoond dat het toevoegen van nutteloze vragen een ineenstorting van de deelname is en veel geld kan kosten.

In het volgende heb ik een fictieve vorm gemaakt om u de belangrijkste principes te laten zien:

Formulier
Principes voor invoerformulieren
  1. Eye Tracking Tests hebben ontdekt dat we informatie sneller verwerken als het van boven naar beneden wordt gerangschikt in plaats van van links naar rechts. Daarom is het raadzaam om de kop boven het formulierveld te plaatsen en slechts één kolom aan te maken.
  2. Het is nuttig om de gebruiker een voorbeeldinput te geven in vooraf gedefinieerde plaatshouders - op deze manier wordt de vereiste informatie vooraf gevisualiseerd. U moet gefragmenteerde nummeringangen vermijden, omdat ze de invoer alleen maar ingewikkelder maken. Bovendien moeten ze zo geprogrammeerd worden dat ze tolerant zijn ten opzichte van ruimtes.
  3. Foutafhandeling is een belangrijk en complex onderwerp. Het sterretje en het rood omrande invoerveld hebben zich bewezen als UI-patronen. Idealiter zouden de velden zelfverklarend moeten zijn. Toch mag je altijd verwachten dat iets niet werkt. Bied daarom verschillende hulpmogelijkheden. Daar zijn verschillende mogelijkheden voor: Een infoknop, die hulp biedt bij het zweven. Of de popup van kleine modalen als het formulier niet succesvol wordt verzonden.
  4. Het is zinvol om al tijdens de input feedback te geven. Met wachtwoorden is het ook nuttig gebleken om de gebruiker een kwalitatieve beoordeling te geven van de veiligheid van het door hem of haar gekozen wachtwoord. 
  5. De Multi-Step Form heeft verschillende psychologische voordelen. Ten eerste heeft het een duidelijker en minder ontmoedigend effect. Als de gebruiker dan ook nog eens in de vorm van een indicator (hier de laadbalk) wordt getoond waar hij zich bevindt, weet hij precies wat hij kan verwachten. De kans dat hij voortijdig afbreekt is kleiner. Persoonlijke gegevens moeten altijd aan het einde van het formulier worden opgevraagd. Als uw websitebezoeker het formulier al voor een groot deel heeft ingevuld, zal het voor hem moeilijker zijn om de tijd die hij al heeft geïnvesteerd op te geven zonder resultaat. Het is ook raadzaam om alleen informatie te vragen die u echt nodig heeft en de redenen voor het verzoek te geven. Als u uw gebruikers vraagt om zich ergens voor in te schrijven, is het raadzaam om een voordeel voor hen te vermelden à la "Krijg altijd eerst de beste deals". In de laatste stap moet u een klein overzicht geven van wat er vervolgens gebeurt - en wat de gebruiker wanneer kan verwachten.

Bovendien moeten uw formulieren automatisch worden ingevuld (door middel van gegevens die zijn opgeslagen in de browser) en informatieherkenning (zoals het toevoegen van de stad na het invoeren van een postcode). Vooral WordPress veel formulieren hebben dit al standaard opgenomen. 

U moet het gebruik van captcha's vermijden, indien mogelijk, of in ieder geval tot een minimum beperken. Volgens van deze studie captcha's kunnen leiden tot 30 procent minder interactie met de vorm.

3. het structureren van uw inhoud

Als exploitant van een website moet u speciale aandacht besteden aan de manier waarop de inhoud van uw site is gestructureerd: Ondersteunen zij uw bezoekers om hun weg te vinden op uw site? Is uw inhoud gemakkelijk toegankelijk en kan de hiërarchie ervan worden begrepen? 

De kwestie van gemakkelijke toegankelijkheid spreekt vooral gebruikers aan die uw site onder gewijzigde omstandigheden bekijken. Bijvoorbeeld, mensen met kleurwaarnemingstoornissen en visuele beperkingen. Als u het onderwerp toegankelijkheid en het vrij zijn van belemmeringen nader wilt behandelen, vindt u hier meer informatie: 

Als u een blog of een online magazine heeft, weet u waarschijnlijk het probleem: u heeft veel interessante inhoud die u zo gelijkmatig mogelijk wilt aanbieden. Een geschikt ontwerppatroon hiervoor is de zogenaamde "Artikellijst". Hier categoriseert u uw inhoud en toont u slechts een klein deel ervan. Zo kunt u veel onderwerpen in één oogopslag laten zien zonder uw gebruikers te overspoelen met informatie. Een mooi voorbeeld toont hier RAIDBOXES:

RAIDBOXES  WP unboxed
Bekijk het WordPress tijdschrift wp unboxed

Deze indeling stelt de gebruiker in staat om de gehele inhoud per interessegebied te doorzoeken en zo sneller te vinden wat hem interesseert.

Om bepaalde inhoud zonder afleiding aan te bieden, kunt u gebruik maken van modale dozen. Deze dozen worden over de rest van uw site geplaatst en stellen de gebruiker in staat zich te concentreren op de inhoud. Dit kan noodzakelijk en belangrijk zijn. Merk echter op dat deze modalen ook meer een anti-patroon zijn: In principe blokkeren ze de handelingsvrijheid van de gebruiker zolang de modaliteit open is.

Bij correct gebruik kunnen modale dozen uw bezoekers echter helpen om uw inhoud beter te begrijpen. Te frequente of schijnbaar ongeprovoceerde modale dozen kunnen echter snel frustratie en een gevoel van machteloosheid veroorzaken.

Lichtbak en volbeeldmodus horen ook in deze categorie thuis. Aan de ene kant geven ze uw gebruiker de mogelijkheid om de geselecteerde inhoud nader te bekijken. Aan de andere kant maken ze elke andere interactie onmogelijk. Daarom is het altijd belangrijk om ten minste één verdwijnpunt aan te bieden. Bijzonder bekend zijn de klik op een X in het rechterbovengedeelte van de foto of de klik buiten het vakje om deze weer te sluiten.

Diavoorstellingen zijn ook een populaire manier om beelden weer te geven. Er wordt een onderscheid gemaakt tussen auto-play en handmatig genavigeerde diavoorstellingen. De galerijen worden vaak weergegeven als miniatuurafbeeldingen en vervolgens vergroot met behulp van diavoorstellingen en/of lichtbakken.

Hier moet u in de eerste plaats op basis van de functie handelen: Wat voor beelden stelt u voor? Moeten ze als volledig scherm beschikbaar zijn? En wat is belangrijker: uw inhoud als geheel of de afzonderlijke beelden? Is het de moeite waard om een beroep te doen op andere mogelijkheden - zoals een vergrootglas dat uw foto's vergroot bij het zweven? Dit laatste is vooral populair in de e-commerce.

Screenshot Unsplash-UI Ontwerppatronen
Miniatuurweergave van unsplash.com

unsplash.com gebruikt een mix van fotogalerij en lichtbakken. De beelden worden echter niet als miniatuur weergegeven. Waarom? Unsplash is een platform dat alleen afbeeldingen als download aanbiedt. Dit betekent dat gebruikers op het eerste gezicht voor of tegen het beeld moeten kunnen beslissen. Om deze beslissing te kunnen nemen, moet de beeldresolutie relatief goed zijn. Daar zouden de miniaturen te klein voor zijn. En door op elke afbeelding afzonderlijk te klikken of door een diashow te navigeren zou de efficiëntie van de site vele malen worden geminimaliseerd.

Tijdens het hele implementatie- en conceptieproces mag u de vraag naar nut/waarde toevoeging en belang nooit uit het oog verliezen.

4. gebruik maken van sociale kanalen

Het gaat hier om patronen die uw gebruikers naar uw social media-kanalen leiden en/of de sociale interactie vergemakkelijken. U kunt gedetailleerde voorbeelden van deze patronen vinden hier nalezen.

Conclusie

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

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

Welke vragen aan Sonja over UI-patronen heb je?

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 TwitterFacebook 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.

Gerelateerde artikelen

Commentaar op dit artikel

Schrijf een opmerking

Je e-mail adres wordt niet gepubliceerd. Verplichte velden zijn met * gemarkeerd.