Helpen je code te standaardiseren

Wanneer je code schrijft volgens een vast patroon is het makkelijker om consistent te blijven, zelfs bij enorme projecten. Deze consistentie is belangrijk, want zo kun je zeker zijn van de kwaliteit en stabiliteit van je werk. Gestructureerde code is eenvoudiger om te testen, debuggen en repareren. Een patroon dat bijvoorbeeld data, logica en presentatie scheidt, zorgt ervoor dat elk gebied onafhankelijk getest kan worden. Dat betekent dat problemen binnen de code snel en eenvoudig opgespoord en verholpen kunnen worden. Je zult merken dat wanneer je vertrouwd raakt met het werken volgens gestandaardiseerde methoden en patronen, je projecten veel beter zult kunnen inschatten.

Bieden consistent UI-gedrag

Wanneer je met de user experience van een digitale interface bezig bent, denk je onbewust al aan patronen. Elke gebruiker heeft zijn eigen verwachtingen over het gedrag of de stappen van een user journey. Deze verwachtingen zijn meestal gebaseerd op herhaling en helpen ons om na verloop van tijd standaarden te ontwikkelen. Er is geen UI-patroon dat altijd en overal werkt, maar door vast te houden aan een patroon en niet steeds te wisselen, voorkom je verwarring bij je gebruikers. Het is belangrijk om digitale producten te ontwerpen en bouwen die niet gewoon goed werken, maar ook goed werken voor gebruikers.

Bevorderen hergebruik en onderhoudsvriendelijkheid

Het is heel eenvoudig om je puur te richten op de precieze vereisten van je opdrachtgever en de afgesproken functionaliteit. Je weet dan zeker dat je iets ontwerpt en bouwt waarmee je klant tevreden zal zijn. Het project zal een succes zijn. Maar wat gebeurt er als hij van gedachten verandert of je vraagt om bepaalde delen uit te breiden of aan te passen voor vervolgprojecten? Het kan zijn dat je dan veel code moet herschrijven.. Met patronen speel je in op toekomstige uitbreidingen en bouw je iets waar je gelukkig mee zult zijn.

Zijn geen verzameling codefragmenten

Codefragmenten (snippets) bieden herbruikbare functionaliteit die al getest en bewezen is in andere projecten. Zo hoeven we niet steeds dezelfde oplossingen te schrijven. Designpatronen bieden een structuur, een set regels, om binnen te werken. Zo kunnen we consistente beslissingen nemen tijdens het schrijven van onze code. Codefragmenten zelf passen goed binnen verschillende patronen. Wanneer je met grote, herbruikbare secties code werkt, bedenk dan hoe deze fragmenten passen binnen de patronen waarmee je werkt. Verwacht geen concrete antwoorden van designpatronen, maar een effectievere manier om de antwoorden te vinden.

Maken testen niet overbodig

Wanneer we aan UI-patronen denken, zorgen we er meestal voor dat alle journeys en interacties weloverwogen zijn en gebaseerd op bewezen aanpakken waarvan we weten dat gebruikers deze snappen en verwachten. Het is daarom logisch te denken dat ons platform duidelijk is voor de gebruiker zonder dit te testen. Dat is een gevaarlijke aanname. Gebruikers uit verschillende demografische groepen kunnen andere verwachtingen hebben. Zelfs wanneer je een oplossing bouwt voor een groep gebruikers waar je al eerder iets voor gemaakt hebt, blijft het belangrijk om te kijken hoe de verwachtingen veranderd zijn.

Bieden geen alles-in-een-oplossing voor alle projecten

Het gebruik van designpatronen gaat van het inzetten van een overkoepelende structuur voor je toepassing, tot kleinere patronen voor losse stukjes functionaliteit. De meeste projecten omvatten een gamma van designpatronen, verdeeld tussen UI en functioneel. Een patroon kan ook weer kleinere patronen bevatten. Zo is AngularJS gebaseerd op een MVCpatroon dat je Model, View en Controller scheidt, maar kan je controller nog kleinere JavaScript-patronen bevatten zoals Constructor of Modular.

Je denkt misschien dat designpatronen niet van toepassing zijn op jou of je werk, dat ze alleen relevant zijn voor mensen die aan enorme projecten werken met grote teams. Toch komt het zelden voor, zelfs wanneer je echt alleen werkt, dat je puur met je eigen code werkt. Designpatronen worden gebruikt in bijna elk stukje open source code dat we gebruiken. Als deze technologieën en frameworks niet geproduceerd waren met onderliggende designpatronen, dan zou het erg lastig zijn om ermee te werken, te snappen en te onderhouden. Een plug-in of framework zonder designpatroon zal geen lang leven beschoren zijn in de community. Zelfs als je in totale isolatie werkt, zonder open source code, is de kans groot dat je in de toekomst een keer terugkeert naar je code. Je zult zien dat er ten opzichte van je oude code zaken veranderd zijn aan de manier waarop men tegenwoordig code schrijft.
•

Door designpatronen in gedachten te houden tijdens het schrijven van code zul je minder problemen hebben wanneer je een of twee jaar later weer terug moeten naar je code. Deze problemen kunnen grotendeels opgelost worden met het begrijpen van de designpatronen en -methodes die toen gehanteerd zijn. Zo is het een stuk eenvoudiger om weer aan de slag te gaan met een oude code-oplossing. Als je vaak samenwerkt met andere developers, kunnen designpatronen een handige manier zijn om te communiceren hoe een toepassing gebouwd is, of zelfs hoe deze gebouwd gaat worden. Dit scheelt veel tijd, want iedereen is snel op de hoogte terwijl de consistentie en stabiliteit van het eindproduct gegarandeerd blijft.

Het grote voordeel van designpatronen bij het bouwen van user interfaces is dat ze ervoor zorgen dat je bewezen oplossingen voor gangbare designproblemen benut. Het zal vaker wel dan niet voorkomen dat je kunt kiezen uit een reeks gangbare methoden. Doe geen aannames betreffende je gebruikers. Alleen met grondige kennis van de doelen en verwachtingen van je gebruikers, kun je er zeker van zijn dat je de beste oplossing bouwt. UI-patronen definiëren meer dan alleen interactieve elementen. Het belangrijkste aspect is misschien wel duidelijke visuele communicatie naar de gebruiker. Dit wordt bereikt via een algemene, herkenbare beeldtaal. Een mooi voorbeeld hiervan is het eenvoudige icoontje voor externe links. Door dit in te zetten, maak je duidelijk dat de site verlaten gaat worden. Gebruikers zullen dit verwachten en daarom niet verward raken na het klikken. Verwarring zorgt voor onbehagen en dat leidt ertoe dat bezoekers de route die jij voor ze hebt uitgestippeld, verlaten.

Bekende UI-problemen

We lossen zo veel UI-problemen op. Het hergebruiken van onze oplossingen is een eenvoudige vorm van een designpatroon. Dit doen we allemaal wanneer we ontwerpen en bouwen.

Formuliervalidatie

We kennen allemaal de formulieren met foutmeldingen die te laat, op de verkeerde plek of in rare combinaties getoond worden. Er zijn een aantal zaken waar je rekening mee moet houden. De positionering van foutmeldingen, naast het relevante veld is de meest gangbare verwachting. Time de meldingen goed, valideer geen velden waar de gebruiker nog mee bezig is en bepaal of het beter is om de velden één voor één, in groepjes of allemaal tegelijk te valideren. Wacht niet tot de gebruiker het formulier indient om wijzigingen opnieuw te valideren. Zorg ook voor duidelijke, korte meldingen.

Zoeken en filteren

Wanneer je de gebruiker veel informatie voorschotelt, bepaal dan of ze snel iets specifieks moeten vinden of dat ze op verkenning willen. In het eerste geval verwacht de gebruiker meteen de tools voor een uitgebreide zoekopdracht. In het andere geval kan het een gebruiker afschrikken wanneer je meteen een boel vragen stelt, nog voordat hij op verkenning kan. Dan kun je bijvoorbeeld eenvoudigere zoekhulpmiddelen en filters aanbieden. Responsive patronen Om lay-outs aan te passen aan verschillende schermen en heldere interacties te bieden voor zowel de muis als touch, zijn responsive patronen onmisbaar. De twee belangrijkste onderdelen van responsive-builds die veel baat hebben bij duidelijke patronen zijn lay-outs en navigatie. 

UI-patronen

Dit zijn algemene designoplossingen voor functionele interfaces. Ze worden voornamelijk gedefinieerd door onze gebruikers en hun interfaceverwachtingen en om interpretaties te begrijpen. We bieden de efficiëntste manier voor een gebruiker om een taak uit te voeren of meerdere manieren om tot hetzelfde resultaat te komen.

Overredende patronen

Deze zetten content in om de gebruiker over te halen een bepaalde route of beslissing te nemen. Dit kan door bijvoorbeeld de kwaliteit van een product te benadrukken via sociale bewijskracht of via het kweken van sympathie voor een bepaald doel. Vooral in e-commerce werkt dit goed, want zo wordt de emotie van de gebruiker betrokken bij het keuzeproces.

JavaScript-patronen

Binnen front-enddevelopment biedt JavaScript complexe functionaliteit. Dat betekent dat de voordelen van designpatronen snel duidelijk zijn. JavaScript-patronen helpen je scripts op te delen in kleinere, hanteerbare stukjes.

Applicatiepatronen

Applicatiebuilds die voornamelijk binnen de browser draaien, zijn nu de norm op het web. Ze bieden vrijwel directe feedback. Om dit te bereiken zijn er een aantal MV*-patronen overgenomen door appframeworks. Deze bieden de benodigde scheiding van lagen.