Tevreden webdesign klanten in 5 stappen

Published on Jul 18, 2011

Wie herkent volgende situatie: je ontwerpt in al je enthousiasme een website voor een klant om even later te vernemen dat het ontwerp wel super is, maar dat men toch iets anders in gedachten had. Men had het contactformulier op een andere plek verwacht en het kleurschema past ook niet echt bij de verwachtingen van de klant. Gevolg: uren ontwerptijd verloren in Photoshop en nog meer uren verloren tijdens het coderen en testen van de website.

Het ergste van al is: deze situatie had perfect vermeden kunnen worden. Wie deze of een soortgelijke situatie herkent heeft wellicht ooit dezelfde fout gemaakt als wij jaren geleden, toen we net met webdesign begonnen, namelijk té enthousiast aan een website beginnen werken, zonder goed en wel te analyseren wat er exact verwacht wordt.

Rome werd niet gebouwd in één dag, een professionele website evenmin en dat leren beginnende webontwerpers helaas vaak hardleers. Bespaar jezelf deze harde les door elke website van bij het begin af aan goed voor te bereiden. Hieronder volgen onze persoonlijke tips die ervoor kunnen zorgen dat uw website vanaf de eerste versie perfect in lijn ligt met de verwachtingen van uw klant, of toch zo goed mogelijk!

1. Stel vragen. Véél vragen.

Wie zegt dat webdesigners mensenschuwe nerds zijn heeft het mis. Zeker wanneer je op freelance basis werkt, zijn communicatieve vaardigheden broodnodig om de noden van een klant om te zetten in een geslaagde totaaloplossing. In grotere firma’s heeft men voor deze verkennende gesprekken vaak mensen ter beschikking die zelf niet noodzakelijk met de technische kant van de website in aanraking komen. Goede freelancers nemen naast de technische rol ook de communicatieve rol op zich, of dat zouden ze toch moeten doen!

Vaak weten klanten zelf niet wat ze juist met hun nieuwe website willen bereiken. Niet omdat ze hiervoor geen moeite willen doen of geen tijd hebben - hoewel dat ook gebeurt - maar meestal omdat ze simpelweg niet weten wat er technisch al dan niet mogelijk is. Daar ligt net de kracht van goede freelancers: wij vertalen de functionele noden van onze klanten in een technische oplossing en omgekeerd.

Wij vertalen technische termen als AJAX, content management systemen, hosting, enzovoort in een klantvriendelijke beschrijving zodat de klant duidelijk weet wat er mogelijk is op het Internet. Om het gesprek optimaal te laten verlopen is het nuttig een document op te stellen met daarin vaak gestelde vragen. In de vragenlijst die ik mijn klanten voorleg staan bijvoorbeeld volgende vragen:

  • Wat vindt u mooi in termen van layout? Welke kleuren? Welke websites? Waarom vindt u dit mooi?
  • Wat vindt u niét mooi in termen van layout? Welke kleuren? Welke websites? Waarom niet?
  • Wat is het doel van uw nieuwe website? Producten verkopen? Bedrijfsinformatie bieden? ...

Schermafdruk van onze vragenlijst

2. “Bang for your clients buck!”

Ok, we beschikken ondertussen over voldoende informatie om een schatting te maken van het aantal werkuren dat we nodig zullen hebben om tot het gewenste eindresultaat te komen. We willen onze klanten natuurlijk zo goed mogelijk helpen binnen het beschikbare budget, maar dat blijkt niet altijd even eenvoudig.

Wanneer iemand een nieuwe wagen zoekt is het belangrijk te weten binnen welke prijsklasse er gezocht kan worden. Geef je een autoverkoper geen indicatie over je budget, dan zal hij wellicht een suggestie doen die te duur is of niet alles bevat waar we naar op zoek zijn. Mogelijk resultaat: je wijst de offerte van de wagenverdeler af wegens te duur of wegens niet specifiek genoeg.

Geef je een beschikbaar budget mee, dan kan er wél gezocht worden naar de beste wagen voor uw geld of zoals de Amerikaanse verkoper zou zeggen: “bang for your buck baby yeah!”. Het is dan ook van groot belang om uw klanten er eerlijk van te overtuigen dat het beschikbare budget niet bekend gemaakt moet worden zodat het opgesoupeerd kan worden, maar wel om een zo goed mogelijke offerte aan te kunnen bieden.

Misschien nog beter: om binnen het beperkte budget verschillende voorstellen te kunnen doen waaruit de klant kan kiezen, eventueel zelfs door rekening te houden met enkele verschillende budgetten.

3. Mockups, schetsen, wireframes

Zodra de offerte door u en uw klant werd goedgekeurd kan er gestart worden met het vormgeven van het idee. Het schetsen of maken van prototypes kan beginnen. Het schetsen van een voorlopige layout is belangrijk om te weten welke elementen waar geplaatst moeten worden in het webontwerp.

Met deze tussenstap willen we voorkomen dat een tijdsintensief Photoshop-ontwerp helemaal moet worden omgegooid omdat het navigatiemenu toch bovenaan in plaats van links geplaatst moet worden. De manier waarop deze prototypes gemaakt worden is bijzaak, zolang ze maar duidelijk zijn en snel opgebouwd kunnen worden. Vaak schetsen wij nog op papier onze mockups, maar sinds kort hebben we hiervoor een handige tijdbesparend hulpmiddel gevonden: Please welcome Balsamiq Mockups.

Balsamiq Mockups is een eenvoudige applicatie die het mogelijk maakt in enkele minuten een mockup of schets te maken van uw website of webapplicatie. Wat snel zal opvallen aan deze applicatie is dat alle elementen zoals een tekstveld of knop zo ‘slordig’ getekend zijn, net alsof ze op papier geschetst zouden worden. Deze ruwe manier van mockups bouwen is net wat ons aantrekt in deze tool. Het maakt een klant namelijk in één oogopslag duidelijk dat het hier slechts gaat om een schets en geen finale versie van de website. Bovendien kan Balsamiq Mockups gratis gebruikt worden in de online versie.

Voor de desktopversie dient u wel een licentie aan te schaffen, anders kan u uw mockups niet bewaren. Het maakt niet uit of u uw mockups maakt met pen en papier, via Balsamiq of via Adobe Fireworks of zelfs Photoshop. Het enige wat van belang is, is dat u gebruik maakt van prototypes vooraleer u uw finaal ontwerp gaat vormgeven. Vooral in grotere projecten kan dit heel wat frustratie en tijd besparen. Wanneer ik les geef aan de Katholieke Hogeschool Mechelen, tracht ik mijn studenten het nut te laten inzien van prototypes.

Hieronder ziet u een voorbeeld van twee van mijn studenten uit de opleiding IMD. Alexander Strobbe en David Vanfroyenhoven maakten onderstaand prototype voor een project dat ze binnen het vak ASP.NET hebben uitgevoerd: Prototype via Balsamiq

4. Design bouwen en laten goedkeuren

Is er nog twijfel over de plaatsing van het navigatiemenu of een ander element in de website? Geen probleem, uw mockup aanpassen kan snel gebeuren. Pas wanneer uit de mockups is gebleken dat u en uw klant het eens zijn over de globale samenstelling van de website kan er zonder schrik gestart worden met het eigenlijke webontwerp.

Volgende schermafdruk is het finale ontwerp van het project van Alexander Strobbe en David Vanfroyenhoven, gebaseerd op de mockup uit de vorige stap. Zoals te zien zijn op het laatste moment nog enkele wijzigingen in het finale ontwerp aangebracht, maar dat vormt op zich geen enkel probleem. Wat belangrijk is, is dat de ruwe structuur uit de mockups goedgekeurd werd en dat deze netjes grafisch werd opgenomen in het finale ontwerp. Finaal ontwerp op basis van de mockup

5. Design omzetten naar xHTML en CSS

We weten uit stap 1 wat onze klant exact wenst. In de volgende stap hebben we een schatting gemaakt van de werkuren en hier een gepaste offerte voor opgesteld. In stap 3 werden ruwe schetsen van de website aan de klant gepresenteerd tot deze werden goedgekeurd en in de voorlaatste stap hebben we deze schetsen omgezet in een net finaal ontwerp.

De laatste stap ligt voor de hand: het finale ontwerp omzetten naar valide xHTML en CSS en nogmaals het eindresultaat terugkoppelen naar de klant. Op dit moment hoeven we ons geen zorgen meer te maken over drastische wijzigingen en dubbel werk. De mockups en het finale ontwerp werden namelijk goedgekeurd door de klant en extreme wijzigingen zijn op dit moment onwaarschijnlijk. Dat maakt het schrijven van de xHTML- en CSS-code een genot, althans voor ons ;). xHTML en CSS

Conclusie

Wij hebben zelf veel tijd kunnen besparen door deze manier van werken toe te passen op grotere en zelfs kleine projecten. Door van in het begin duidelijk te communiceren met de klant kan tijdens de uiteindelijke bouw van de website enorm veel tijd bespaard worden, zonder daarbij in te boeten aan flexibiliteit en kwaliteit, integendeel zelfs!

Niet alleen vertaalt deze tijdswinst zich in scherpere prijzen naar de klant toe, zelf kunnen we meer werk verrichten of hebben we extra tijd over om bijvoorbeeld bij te lezen in interessante magazines of blogs. Het is van belang dat je een eigen workflow leert ontwikkelen die voor jezelf vlot en vooral aangenaam werkt. De hierboven geschreven tips werken voor ons prima, maar zijn wellicht niet voor iedereen even nuttig. Laat ons dan ook weten als jullie betere of andere tips hebben!

No comments? But that’s like a Gin & Tonic without the ice?

I’ve removed the comments but you can shoot me a message on LinkedIn to keep the conversation going.