De ingredientenlijst voor het maken
van een web product
( websites | webshops | webapps )
In de wereld van de webontwikkeling wordt nogal met termen gesmeten, liefst afgekort en alles in het Engels. Mijn eigen dienstenpakket betreft webproducten, met als specialisme webshops, dus ook ik ontkom niet aan die terminologie. Ik zie dan ook regelmatig aan de blik van een gesprekspartner die hier niet in thuis is, dat die zich afvraagt of ik bestaande begrippen gebruik of gewoon wat zit te verzinnen als een slechte grap.
Ik wil hier een aantal van die termen bespreken, die ik zelf ook hanteer en die mede de basis vormen voor het ontwikkelen van een webproduct. Dan kun jij de volgende keer jouw toehoorder wat imponeren, door er losjes een paar te gebruiken. Handig om te weten en ook leuk dus.
Door Stefan Wassink, Studio Wassink 02/2018
Websites, Webshops en Webapps
Als ik het heb over webproducten, dan kunnen we die in 3 categorieën verdelen. Eerst de Websites, waarop normaliter vooral informatie te vinden is met daarbij mogelijk kleine interactiemomenten zoals een contactpagina of een kleine rekentool. Ze zijn er voornamelijk om bezoekers te informeren over een product of dienst.
"Een webshop is in principe een uitgebreide website met een aantal extra onderdelen"
Vervolgens de Webshops, die er zijn om direct in te shoppen. Een webshop is in principe een uitgebreide website met een aantal extra onderdelen en een geheel andere wijze van interactie met de bezoekers.
En dan nog de Webapps, met een zeer vergaande interactie. Je kunt veelal inloggen in een eigen omgeving binnen de website en daar “iets maken”. Denk aan schema’s, presentaties, fotoalbums, etc. Webapps zijn toepassingen die je vroeger als een los programma moest installeren, maar die je nu via het web kunt benaderen. Het zijn dus volledige applicaties, maar dan op het web. We gaan ze in de toekomst nog veel meer zien, als vervanging van software die we nu nog moeten downloaden.
UX en UI
Je project begint met een idee en een uitgewerkt concept waarin je vastlegt wat je precies wil bereiken. Dan volgen de UX en UI-designs. Er moet worden nagedacht over een uitwerking die de grootste kans van slagen biedt. Laten we als voorbeeld nemen dat je een webshop wil opzetten die speciale smaken thee gaat verkopen aan liefhebbers.
Bij het UX (User Experience) - gedeelte ga je nadenken over de “Customer Journey”. Als een bezoeker de webshop bezoekt, gaat die zich zijn of haar unieke weg banen door de pagina’s. Het is aan je shop om dat pad inzichtelijk te maken, richting de juiste aankoop. Je moet direct laten weten wat je verkoopt en waarom je dat doet.
"Dus een grote banner op de homepage met
In principe ja, maar hou er rekening mee dat men veelal zoekt op merk of productnaam en dat Google hen dan niet naar je homepage leidt, maar direct naar de onderliggende pagina. Je moet dus tevoren uitwerken hoe je ook op de andere pagina’s continue de identiteit communiceert, zonder dat degene die wél via de homepage binnenkomt geïrriteerd raakt door veel banners.
Daarnaast heb je te maken met een product dat eigenlijk geproefd moet worden. Aangezien dit niet kan in een webshop, zal er een goede presentatie moeten worden gemaakt van de ervaring. Er moeten speciale pagina’s bedacht worden waar dat doel verwezenlijkt kan worden. Waar men de thee bijna kan proeven vanaf het scherm. Het moet ook makkelijk te begrijpen zijn voor iedereen, dus moet de opzet hiervan goed doordacht worden. Zoiets is een geweldige uitdaging voor een UX Designer!
Ik zal niet ingaan op alle denkbare scenario’s, maar het beeld zal geschetst zijn. Overal moet rekening gehouden worden met wat men te zien krijgt en hoe men dat ervaart, want iedere doelgroep zal bepaalde elementen verschillend interpreteren! Uiteindelijk heb je met de uitkomst hiervan het UX-Design klaar liggen.
Dat design is een soort van blauwdruk en die moet worden ingevuld met design elementen. Afbeeldingen, kleuren en teksten moeten worden weergegeven. Hoe dat wordt vormgegeven heet de UI (User Interface) Design-fase. In die fase wordt alles uit het UX Design omgezet naar gestijlde pagina's en deze stijl dient de klant nog beter begeleiden twerijl er bij hem/haar een professionele indruk achtergelaten wordt. Een goed design begeleidt ook zaken als “Call to Action” * , waarbij kleuren en elementen onmisbaar zijn. Die zetten de "sale funnel" * op, de route die men aflegt naar een aankoop. Mijn persoonlijke regel hierbij is: visuele pracht en praal nooit de voorrang geven op de beste gebruikerservaring! Maak deze uiteindelijk zo mooi mogelijk...
*Later meer over deze begrippen
Front-end ontwikkeling
De meesten zullen de term ‘Back-end’ wel gehoord hebben van bijv. programmeurs. Hij betreft de codes die “onder water” alles regelen. Denk aan het ophalen van je persoonlijke gegevens als je inlogt bij een webshop. “Front-end” duidt, zoals de naam al verraadt, op wat je aan de voorkant ziet. Het zijn twee compleet verschillende takken van sport. Beiden met hun overlap, maar een Back-end ontwikkelaar werkt zeker niet vanzelf ook aan het Front-end en andersom. Het gaat om het omzetten van designs naar een werkende code voor een webproduct, om het simpel te zeggen. Voorbeeld: ik maak een mooie pagina op in Photoshop en na goedkeuring van de klant zet ik die om naar de code die een webbrowser begrijpt en die de pagina’s aan de bezoeker toont zoals het design dat heeft bepaald.
"Denk aan een instructie die alles dubbel vertelt. Dit kost je 2x zoveel tijd om helemaal door te lezen."
Bij deze stap is vooral efficiënt denken van belang. Code kan namelijk op veel manieren worden opgezet, maar de enige goede is die met zo min mogelijk omvang. Hetzelfde geldt voor de manier waarop afbeeldingen worden behandeld. Je kunt een plaatje met een blauwe kleur inladen, maar je kunt dat ook in de code verwerken. Omslachtige code, overbodige afbeeldingen en andere te ruim opgezette onderdelen kosten snelheid bij het gebruik en verminderen de kans op een goede score in Google. Als het goed is, moet het je opvallen dat mijn website met dit blog zeer snel inlaadt. Ik heb namelijk alle elementen met zo min mogelijk code opgezet en als ik een afbeelding gebruik is die eerst geoptimaliseerd voor het web. De browser kan deze codes dus sneller doorlezen. Denk aan een instructie die alles dubbel vertelt. Dit kost je 2x zoveel tijd om helemaal door te lezen en je leert niks meer dan wanneer dit kort en bondig werd gedaan. Dit kost even wat meer tijd en moeite, maar het loont daarna direct en blijvend, op meerdere vlakken.
Naast de standaard web-talen zijn er ook specifieke talen voor bepaalde programmatuur. Voor Shopify moet ik bijvoorbeeld de normale HTML en CSS mixen met Shopify’s eigen Liquid taal. Die is ontwikkeld om op efficiënte wijze informatie uit het systeem te halen en terug te sturen. Om hier echt handig in te worden heb ik me die kunst aangeleerd. Nu ik dat kan, kan ik het systeem op de juiste manier aanspreken om nieuwe functionaliteiten en indelingen mogelijk te maken.
De laatste voor nu, E-commerce begrippen
“E-commerce” zal inmiddels geen vreemde term meer zijn, maar er zijn er wel nog een paar die om wat uitleg vragen. Ik noemde eerder al de CTA (Call to Action). We willen natuurlijk niet dat het bezoeken van een webshop een handleiding vereist. De wijze waarop de shop is opgebouwd moet de bezoeker begeleiden, ook als we duizenden producten aanbieden. Daarom is het belangrijk om bijv. de knoppen die naar een aankoop leiden allemaal dezelfde vorm en kleur te geven. De bezoeker zal dan al snel (onbewust) begrijpen dat als men voorwaarts wil, die knoppen moeten worden gebruikt en zal die in no-time kunnen onderscheiden van de andere elementen op een pagina. Net als in een fysieke winkel zorg je voor een duidelijke kassa-route. Je moet er niet aan denken dat een klant een volle kar laat staan omdat hij/zij de weg niet kan vinden, dat zou een vervelende ervaring zijn voor zowel klant als winkelier.
De CTA is een onderdeel van de "Sales Funnel". In de UX-fase wordt, zoals al gezegd, bedacht hoe de webshop met lekkere thee moet gaan werken en dat is uitgesplitst in een aantal onderdelen: introductie, informatie, beleving, verkoop & bevestiging. De site moet deze "Funnel" optimaal ondersteunen. Iedere pagina wordt met deze gedachte in het achterhoofd opgezet en zodra ze bereikbaar zijn voor het publiek wordt dat continue getest en eventueel verbeterd.
Je Shop moet ook "USP’s" hebben, Unique Selling Points. Waarom zou men de thee bij jou kopen en niet bij de concurrentie? Denk na over wat maakt dat jouw shop een reden van bestaan heeft tussen concurrenten. Dat kan heel simpel zijn, bijvoorbeeld dat jij goedkoper bent dan de rest, maar dat is vaak zakelijk niet haalbaar. Maar mogelijk heb jij specialisten die klantvragen kunnen beantwoorden en hebben anderen dat niet, waardoor jouw shop aantrekkelijker is. Of je levert bij iedere bestelling gratis een verrassend smaak-monster, waardoor het ontvangen van jouw pakket simpelweg leuker is.
Laten we het hier even bij laten voor nu
Er zijn heel wat begrippen de revue gepasseerd en mogelijk wil je dit over een paar dagen nog een keer lezen om het echt vast te zetten in je geheugen. In elk geval heb je nu waarschijnlijk wel een beeld van wat deze begrippen betekenen.