Logo

UX en visual webshop design

Webshop design is een fundamenteel onderdeel van E-commerce. De wijze waarop functionaliteit werkt en hoe onderdelen of pagina’s zijn opgemaakt zijn van invloed op de waargenomen kwaliteit van een product of bedrijf. Dit kan aankoopgedrag sterk beinvloeden. Denk aan hoe slim geplaatste crossels de waarde van een aankoop kunnen verhogen. Bij webshop ontwerp maakt Reach Digital onderscheid tussen twee disciplines; UX design, gericht op de functionele werking van onderdelen, en visual design, gericht op kleur, compositie en beeld.

Machiel Kreiken
Tim Hofman
Even sparren? 071 - 744 0084

Wel of niet onderscheiden? Het begint bij marktonderzoek

Design begint met het kijken naar wat concurrenten doen. Willen we dicht bij de standaard blijven of hiervan juist afwijken? Wat zijn voor bezoekers bekende designconcepten en in hoeverre zijn ze uniek voor de branche. Dit gaat op voor zowel UX design als visual design. Als webshops van concurrenten erg conversiegericht zijn, bijvoorbeeld met het standaardconcept van verticale gelaagde navigatie (filters) op categoriepagina’s, is gebruik maken van de ervaring die bezoekers hiermee hebben dan een toegevoegde waarde of een nadeel? Het verrichten van dit onderzoek is een gedeelde inspanning van opdrachtgever, UX designer(s) en visual designer(s) en vindt bij nieuwe projecten vaak plaats in Sprint 0 of Sprint 1.

De beslissing: conversiegericht versus merkgericht

We maken onderscheid tussen twee verschillende designrichtingen: conversiegericht en merkgericht. Met conversiegericht doelen we op webshops die alle conventies van e-commerce in hun meest functionele vorm inzetten. Horizontale hoofdnavigatie, verticale gelaagde navigatie (filters), cataloguspagina in rasterweergave en winkelwagenpagina in lijstvorm. Voorbeelden zijn Bol.com, Wehkamp en Zalando. De complexiteit van het design van conversiegerichte webshops zit in het brengen van eenvoud in bijvoorbeeld grote collecties producten, filters, (vaak) veel opties in het afrekenproces of productbundels. Mooi zonder chaos, met een gelijke verdeling van visueel detail over de pagina. Merkgerichte webshops zetten in op beleving en emotie. We wijken af van de standaard en beeld en verhaal (storytelling) spelen een belangrijke rol. Er is meer aandacht voor compositie en pagina’s zijn doorgaans ruimer opgezet. We besteden aandacht aan graphic design en icon design. Webshops als die van G-star en Apple zijn voorbeelden van merkgerichte webshops. De uitdaging van het design van merkgerichte webshops zit voor een deel in de creatieve vrijheid, zonder de gebruiksvriendelijkheid van functionaliteit voorbij te gaan.

Design als onderdeel van het iteratieve proces

Onze UX designers (gebruikerservaring) en visual designers zijn onderdeel van het scrumteam. Design gebeurt niet voordat functionaliteit technisch wordt gerealiseerd, maar parallel aan het technische ontwikkelproces. Developers hebben continue contact met ontwerpers, zodat nieuwe inzichten en ideeën kunnen worden uitgewisseld. Het doel van zowel UX designers als visual designers is om componenten te ontwerpen; op zichzelf staande functionaliteit, die met een uniforme stijl en werking inzetbaar zijn op verschillende pagina’s. Denk bijvoorbeeld aan de opsomming van artikelen op de winkelwagenpagina en de compacte weergave van de winkelwagen (vaak getoond bij het klikken op een winkelwagenicoon op de header van een pagina). Opgeleverde ontwerpen kunnen worden geitereerd tot ze unaniem worden goedgekeurd. We zijn ervan overtuigd dat een goed ontwerp niet hoeft te worden verkocht, maar voor zichzelf spreekt.

Realistisch ontwerp door passende conceptteksten en beelden

Samen met UX en visual designers wordt tijdens de sprint planning in grote lijnen bepaald welke boodschap of over welke onderwerpen zal worden verteld. Designers verwerken in hun ontwerpen realistische conceptteksten en passende (concept)beelden, zodat er een realistisch beeld wordt geschetst van opmaak van (kop)teksten en compositie van beeld en tekst. Zo is het invoegen van finale teksten of beeldmateriaal nog maar een kleine inspanning. Doel is om bij de afronding van een sprint altijd een in praktijk inzetbaar ontwerp op te leveren.

Responsive laten we niet (alleen) aan developers over

Voor veel markten, zeker e-commerce gericht op consumenten, is desktop niet meer het voorkeursplatform. Wij merken dat in praktijk meer dan de helft van de bezoekers onze webshops bekijken op mobiel of tablet. Kleinere schermen, touch als input en instabiele internetverbindingen zijn zulke zwaarwegende beperkingen voor zowel UX design als visual design, dat responsive design (het simpelweg kleiner maken of beperken van hoeveelheid informatie) niet meer volstaat. We nemen daarom mobile design op als individuele stories binnen in de sprints. Voor complexe UX vraagstukken, bijvoorbeeld een productconfigurator, werken we mobile first. We bedenken de functionaliteit op mobiel werkt, voordat we we nadenken over hoe de functionaliteit op desktop functioneert.

Een nieuwe huisstijl of een huisstijl op basis van bestaand materiaal

De keuze rondom kleurgebruik en lettertype wordt gemaakt in één van de eerste sprints waarvan design onderdeel is. Als er reeds een huisstijl gedefinieerd is, dan blijkt uit de eerste concepten of deze goed toepasbaar is. E-commerce heeft als eigenschap dat het een breder kleurpallet vereist dan drukwerk doorgaans doet. Mocht er geen huisstijl bestaan, dan zal tijdens het marktonderzoek aandacht worden besteedt aan dit onderdeel. Onze visual designers zullen dan met de eerste designs een voorstel doen. Een bestaand logo is doorgaans al een goed aanknopingspunt.

Technologie en partners waar we graag mee (samen)werken

Tijd voor een nieuw of verbeterd Magento webshop ontwerp (UX of grafisch)?