Waarom helpen wireframes eigenlijk bij UX Design?

UX Design wireframe MJB Events PR

Waarom helpen wireframes eigenlijk bij UX Design?

Iedere onderneming heeft een basis. Ieder project heeft een startpunt. Waarom zou u dat ook niet hebben voor uw website? Om een website te beginnen raad ik aan om gebruik te maken van wireframes. Waarom helpen wireframes eigenlijk bij UX Design?

Wat zijn wireframes?

Laten we eerst bij het begin beginnen. Wat zijn wireframes eigenlijk? Wireframes is het visuele concept op papier. In dit concept wordt een globale weergave gegeven over hoe een website, een app of een programma eruit moet komen te zien. U kunt het dus vergelijken met een bouwtekening van uw website.

In deze wireframe gaat u niet in op het detail maar op de globale indeling van uw website. Denk daarbij maar aan het menu (navigatie), indeling (content en zijbalk), de header, de footer en eventuele andere onderdelen.

Wireframes worden dan ook vaak ingezet in de ontwerpfase in het project. Bijvoorbeeld wanneer er besloten wordt om een nieuwe website, app of systeem te gaan (of laten) bouwen. Andere situaties zijn bijvoorbeeld het herontwerpen van een website, app of systeem zodat deze aansluit bij de toekomst van de organisatie of van het merk.

Wat is UX Design dan?

Nu we weten wat wireframes zijn gaan we een stapje verder in de theorie. UX Design is User Experience Design, waarbij het gaat om de beleving, functionering, design, branding en gebruiksvriendelijkheid van een product, dienst of merk.

Denk bijvoorbeeld maar aan de website Yelp. Op deze website kunnen bezoekers snel naar een winkel, zoals een restaurant, pick-up of bed- and breakfast, zoeken. Op die manier is de website Yelp effectief, functioneel, zet merken neer (omdat de website veel gebruikt wordt), zorgt voor gebruiksvriendelijk en levert een dienst om als bedrijf bovenaan in de zoekresultaten van Yelp te komen.

Kort gezegd gaat UX Design over het verbeteren van de producten, diensten en websites van een merk zodat de gebruikservaring voor de bezoeker, klant of consument beter wordt waardoor ze sneller loyaal zullen worden naar het merk.

Wat is de relatie tussen wireframes en UX Design?

Nu we weten wat wireframes zijn en wat UX Design is kunnen we dat weten kunnen we kijken wat de relatie is tussen wireframes en UX Design.

Communicatiemiddel

De grootste relatie tussen wireframes en UX Design is het communicatiemiddel. Wireframes worden veelal gebruikt bij het realiseren van een project waarbij het gaat om vormgeving. Denk bijvoorbeeld maar aan een nieuwe website, een nieuwe app, een nieuw bedrijfssysteem of een onlinecursus die zo effectief als gebruikersvriendelijk naar voren moet komen.

Fouten kunnen worden voorkomen

Dankzij wireframes kunnen fouten in een UX Design worden voorkomen. Dit gebeurd doordat er een grafische weergave wordt gemaakt van het uiteindelijke doel wat de klant voor ogen heeft. Bijvoorbeeld door te kijken welke belemmeringen er optreden en hoe deze in de voorbereidingsfase kunnen worden vermeden. Dit scheelt uiteindelijk in de uitvoering veel tijd, energie en (extra) kosten.

Concept kan worden getoetst

Door het concept kan het getoetst worden of dit ook daadwerkelijk het doel is van de klant. Vaak worden we door onze eigen ervaringen en interpretaties geleid wat kan zorgen voor een afwijkende gedachte over het eindresultaat. Door dit concept kan de klant feedback geven op datgene wat er gemaakt is zonder daar veel kosten aan kwijt te zijn. Op deze manieren kunnen alle neuzen dezelfde kant op worden gezet.

Huisstijl kan worden aangepast

Een wireframe kan erg handig zijn om een te kijken of alle componenten van de huisstijl en het doel van de website goed bij elkaar passen of dat er toch nog afwijkende onderdelen zijn. Soms kan een kleur uit het logo nog vloeken met een achtergrondkleur die de website heeft op de homepagina. Dankzij het wireframe kan dit voorkomen worden in de voorbereidingsfase.

Het doel is visueel gemaakt

Wanneer we enthousiast worden, dan willen we vaak ook gelijk aan de slag gaan. Dit is een verkeerde manier van aanpak, omdat er halverwege vaak tegenslagen komen wat resulteert in een onafgemaakt project. Daarom is het raadzaam om eerst de tekening te tekenen voordat u aan de slag gaat met het project. Deze tekening kunt u vergelijken met het wireframe. Dankzij dit wireframe (waarbij u het doel al visueel heeft gemaakt op papier) weet u wat het uiteindelijke doel is van het project en hoe u alles neer moet zetten om een goed resultaat neer te zetten waarbij de klant en u tevreden zijn met het behaalde resultaat.

Wireframe met UX Design MJB Events PR

Hoe maak ik dan wireframes?

Er zijn verschillende manieren om wireframes te maken. Natuurlijk aan de hand van een potlood (of pen) met papier, maar vaak worden wireframes gemaakt aan de hand van software op de computer. Hieronder kunt u een aantal programma’s terugvinden die vaak voorkomen in de UX Design wereld waarbij wireframes gebruikt worden.

Optie 1: Potlood (of pen) en papier

Eén van de meest effectieve manieren om een wireframe te maken is het gebruik van potlood en papier.

Optie 2: Microsoft Visio

Microsoft Visio is bedoeld om technische en logistieke tekeningen te maken. Dit kan variëren van simpele bedrijfshiërarchieën tot aan ingewikkelde workflow of systeemtekeningen voor bijvoorbeeld een systeem dat werkt met een database. Microsoft Visio is daarmee dan ook goed geschikt om wireframes te maken voor uw project.

Optie 3: Balsamiq

Balsamiq is een programma waarmee gemakkelijk een wireframe gemaakt kan worden. In de afgelopen periode is rondom dit programma ook een grote discussie begonnen of Balsamiq ook daadwerkelijk wel interessant is voor een UX Designer. De discussie gaat over dat Balsamiq vooral ingaat op de vormgeving en op het uiterlijk. Daarom heeft Balsamiq een nieuwe variant sketch style toegevoegd waarbij het wireframe meer als een grove tekening kan worden laten zien. Hierdoor zal de verwarring afnemen en krijgt de gebruiker een beter beeld van het programma. Eén nadeel, u zou gestructureerd te werk moeten gaan met Balsamiq omdat er veel mogelijkheden zijn waardoor u snel afgeleid kan worden.

Optie 4: Adobe InDesign

Adobe InDesign gebruikte ik veel voor uiteenlopende opdrachten waarbij wireframes noodzakelijk waren. Adobe InDesign gebruikt ik dan ook in combinatie met Adobe Illustrator en Adobe Photoshop.

Daartegenover zijn er ook nadelen aan Adobe InDesign verbonden. Het programma kost veel en u zou enige kennis moeten hebben om met Adobe InDesign te kunnen werken. Het geen wat u daarvoor terugkrijgt is dat u tot in het detail kan werken. Daar blijven andere programma’s nog wel eens achter.

Optie 5: Adobe XD

Adobe XD is een gratis product van Adobe waarmee wireframes en prototypen gemaakt kunnen worden. Dit is bijvoorbeeld goed om als website eigenaar een eigen beeld te geven over het lay-out van uw website. Met dit lay-out kunt u bijvoorbeeld naar webdeveloper gaan met het verzoek om dit in werkelijkheid te gaan realiseren. Hierdoor bespaart u op de kosten van de website vormgeving en kunt u de opdracht eigenlijk kant en klaar aanleveren bij een webdeveloper.

Eén groot voordeel hierbij is. U weet wat het uiteindelijke doel zal worden en de webdeveloper ook. Hierdoor is miscommunicatie bijna helemaal uitgesloten. Het is daarbij wel goed om met regelmaat contact te houden met de webdeveloper, omdat anders het eindresultaat niet helemaal naar wens kan zijn.

Sinds de zomer van 2018 maak ik dan ook iedere wireframe aan de hand van Adobe XD in combinatie met de andere Adobe producten, zoals Adobe Photoshop en Adobe Illustrator. Het voordeel hierbij is dat Adobe XD de andere Adobe bestanden (zoals .psd – Photoshop) makkelijk te importeren zijn. Hierdoor hoeft u niet eerst het werkbestand van Adobe Photoshop om te zetten in een PDF, PNG of JPG.

Een ander bijkomend voordeel is dat Adobe XD aangepast kan worden aan de breedte en hoogte zoals u dat wil. Dus de mogelijkheden zijn daarmee eigenlijk onbeperkt.

Tips om te starten met wireframes

Wireframes maken is heel effectief voor iedereen die binnen het projectteam werkt. Hierdoor wordt er veel bespaard op tijd, energie en geld. Maar hoe kunt u nu succesvol gebruik maken van wireframes zonder basisfouten te maken?

Consistent

Wees consistent met het gebruik van onderdelen in het wireframe. Wanneer u een knop maakt, dan raad ik u aan om deze knop (inclusief vormgeving daarvan) te gebruiken als knoppen over de hele website. Hierdoor zorgt u dat de eindgebruiker en de webdeveloper weet dat het allemaal om knoppen gaat en kan er eigenlijk geen misverstand ontstaan over een bepaald onderdeel op het wireframe.

Vind het wiel niet opnieuw uit

Waarom werk doen wat al is uitgevonden? Dat geld eigenlijk ook voor het gebruik van wireframes. Wanneer u een wireframe heeft gemaakt, dan kunt u dit bijvoorbeeld als basis gebruiken voor verschillende projecten. Per project kunt u het wireframe aanpassen aan de behoefte van de klant of van uw organisatie. Zo hoeft u niet iedere keer weer het menu opnieuw te maken of hoeft u niet iedere keer de basiselementen van de website te realiseren.

Organiseren

Ook wanneer u een prototype maakt met wireframes moet u goed georganiseerd zijn. U moet weten wat alles precies inhoudt, consistent zijn met de elementen (zoals buttons) op de websitepagina’s en moet u structuur brengen in uw wireframe zodat het voor iedereen begrijpelijk is.

Om dit goed te kunnen doen kunt u gebruik maken van verschillende versies. Denk daarbij maar aan versienummers in combinatie met een datumnummer. Hierdoor weet u altijd wat de laatste versie is die u heeft bijgewerkt.

Uitlijnen

Wanneer u bezig bent met wireframes dan moet de inhoud voorop staan dan de opmaak. De opmaak komt uiteindelijk wel in de definitieve versie van uw website of app. Hierdoor voorkomt u veel discussie en kan er gefocust worden op datgene wat belangrijk is voor het project.

Betrek de klant

Wanneer u wireframes maakt voor een klant, dan doet u er goed aan om de klant veelvuldig te betrekken binnen het project. Hierdoor weet de klant wat het uiteindelijke resultaat wordt en kan daarin al veel feedback geven wat u kunt toepassen in het ontwerp. Dit helpt om de ideeën te creëren, helpt om oplossingen te vinden en stimuleert ook de samenwerking tussen de klant en u. Eigenlijk een win-win situatie voor alle betrokken partijen.

Verschil in het soort wireframe

Binnen het ontwikkelen van wireframes worden verschillende soorten wireframes gebruikt met uiteenlopende doelen. De bekendste vormen zijn low-fidelity en high-fidelity

Low-fidelity gaat over het minder gedetailleerde wireframe waarbij de grote lijnen worden uitgezet zonder echt in te treden in de details van het ontwerp. High-fidelity is meer gericht op het gedetailleerd ontwerp waarbij de details duidelijk zichtbaar zijn voor de klant. Hierbij is dan de look-and-feel dan ook duidelijk aanwezig wat weer mist in het low-fidelity.

Het is daarom goed om te kijken welke soort wireframe u nodig bent voor uw project. Bijvoorbeeld voor het realiseren van een website, een app of een systeem. Het zou zonde van uw tijd, energie en van de klant zijn of haar geld zijn als u er meer tijd in steekt dan eigenlijk noodzakelijk was.

Aanpassingen

Dankzij het wireframe kunt u het ontwerp sneller aanpassen dan wanneer u een nieuwe website moet gaan aanpassen. Hierdoor kunt u, zoals eerder al verteld, veel tijd, energie en geld besparen op de uitvoering van de website. Uiteindelijk kunt u met het uiteindelijke wireframe ontwerp naar de webdeveloper gaan die de website voor u gaat bouwen.

Conclusie

Concluderend kunnen we dus zeggen dat een wireframe een goede verhouding heeft met UX Design. Het gaat om de beleving van de bezoeker en van de klant die u helpt met het realiseren van een nieuwe website. Hierdoor kunt u niet alleen de klant helpen om een effectieve website, app of systeem te laten krijgen. Ook u als persoon kunt in deze voorbereidingsfase de klant helpen om een gebruiksvriendelijke en effectieve manier van samenwerking aan te gaan.

Liever wireframes uitbesteden? Dan hoor ik het natuurlijk graag van u! Ik help u graag verder met het ontwikkelen van wireframes voor uw website, app of systeem.