Webdesign en Interface Design voor Barini

Vooraf

Deze casestudy is het vervolg op Identity Design voor Barini. In die casestudy stond het ontwerp van de visuele identiteit van Barini centraal. Zodra een dergelijke identiteit voor een merk ontwikkeld is, vloeien aanvullende producten zoals drukwerk of websites daar vrij organisch uit voort. Deze casestudie zal specifiek toelichten hoe de webwinkel voor Barini ontworpen is, vanuit welke principes, en welke ideeën achter de ontwerpbeslissingen schuilgaan.
Wil je iets meer achtergrond? Bekijk dan eerst Identity Design voor Barini.

Webdesign en Interface Design voor Barini

Vooraf

Deze casestudy is het vervolg op Identity Design voor Barini. In die casestudy stond het ontwerp van de visuele identiteit van Barini centraal. Zodra een dergelijke identiteit voor een merk ontwikkeld is vloeien aanvullende producten zoals drukwerk of websites daar vrij organisch uit voort. Deze casestudie zal daarom specifiek toelichten hoe de webwinkel voor Barini ontworpen is, vanuit welke principes, en welke ideeën achter de ontwerpbeslissingen schuilgaan.
Wil je iets meer achtergrond of de aanloop van het project zien? Bekijk dan eerst Identity Design voor Barini.

Projectomschrijving

De webshop zou de voornaamste dienst worden van het nieuwe merk Barini en de doelstelling van João en Jengiz luidde: “Barini moet de automaterialen-shop van Nederland worden met een assortiment van 10.000 producten op het moment van de opening.” Zeer ambitieus. En direct is in te schatten hoe cruciaal de interface is die al deze producten overzichtelijk in beeld moet brengen. Binnen de metafoor van een fysieke winkel met 10.000 producten kun je eenvoudig nagaan hoe belangrijk een goede index en presentatie van de producten is. En binnen webshops (die steeds meer bekeken worden op kleine smartphone-beeldschermen) is dit een opgave van formaat.
Mijn taak was het om door middel van visuele prototypes de belangrijkste pagina’s van de webshop te ontwerpen en om de overkoepelende navigatie uit te denken. Daarbij was het zaak dat iedere pagina zou worden uitgewerkt in drie indelingen: een design voor de smartphone, een design voor tablets en een design voor laptops/pc’s.

Projectdoelstellingen

  • Binnen het ontwerp van de visuele identiteit stonden vooral snelheid, kracht en een strakke ‘premium’ uitstraling centraal. In dit project stond het gebruiksgemak voorop. De doelstelling: een eenvoudig en laagdrempelig te gebruiken webshop die vooral begrijpelijk was. Dit was van groot belang met het enorme assortiment dat in de planning stond.
  • Mobile-first is een strategie waarbij een interface eerst wordt uitgedacht op het kleinste en meest ‘lastige’ schermformaat met de meeste beperkingen. Deze ontwerpstrategie is gehanteerd voor de belangrijkste elementen en pagina’s van de Barini-webshop om er zo voor te zorgen dat de interface optimaal werkt op de zo dominant-geworden smartphone.
  • Uiteindelijk zijn de homepage, het hoofdmenu, de productpagina, het productoverzicht, het bestelproces, het beoordelingsproces en het verzeker/financier/betaal-proces uitgewerkt in visuele prototypes.
  • Hoewel de webshop qua design één slagje conservatiever benaderd is dan de visuele identiteit, was het wel van belang dat de visuele stijl van Barini duidelijk herkenbaar was en terug zou komen in de website. Het kleurenpalet van Barini-blauw en Barini-bruin zou daarom consistent aanwezig zijn. Evenals de eerder bepaalde lettertypes en fotobewerkingen.
  • Omdat je met navigatie-elementen vaak niet al te wilde dingen kunt doen met het oog op gebruiksvriendelijkheid, heb ik het mijzelf tot taak gesteld om daarom binnen het design van de user experience hier en daar creatieve dingen te doen. Kleine elementen die een emotie opwekken en hier en daar een knipoog geven naar de gebruiker, wat ervoor zorgt dat de webshop net wat buiten de bekende kaders treedt.

Een zwart-wit foto van João en Jengiz Kwakernaat in het kantoor van Barini.

Toelichtingen en terminologie

Omdat een webshop voor gebruikers en buitenstaanders in feite hetzelfde is als een website en de term ‘webdesign’ zeer ingeburgerd is, gebruik ik binnen deze casestudy veelal de term ‘webdesign’. Een webshop is in veel gevallen een uitgebreider systeem, maar het kent dezelfde beperkingen als een gemiddelde website (vaak nog meer) en verder zijn de overeenkomsten groot. Beide werken doorgaans met een content-managementsysteem. Beide hebben een ‘primaire actie’ voor de gebruiker (het plaatsen van een bestelling) en een manier om die actie binnen de interface te volbrengen. En zowel websites als webshops hebben te kampen met een kritische, ongeduldige gebruiker die met een gerust hart en het volste vertrouwen iets wil bereiken.

Los van de term ‘webdesign’ gebruik ik de term ‘interface design’ voor specifiek de besturingselementen binnen deze website. Denk hierbij vooral aan het hoofdmenu, de navigatie en het gevoel van locatie (“Waar ben ik, waar kan ik heen en hoe kom ik daar?”). In feite is natuurlijk de hele webshop één grote interface, dus de term is ook hier niet 100% dekkend. Maar net als met webdesign en webshop design hebben we te maken met Engelse termen, die erg jong zijn en zelden consistent worden gedefinieerd.
Anders gezegd; een website kun je zien als een soort boek, maar dan interactiever en vele malen uitgebreider. Binnen een boek heb je een index om snel te komen waar je wezen moet. En in bepaalde boeken is de index even relevant als de inhoud van het boek zelf. Binnen een website of webshop moeten deze beide elementen ontworpen worden, maar vooral de navigatie-elementen (de ‘index’) van een website zijn van cruciaal belang. Deze vormen in feite het ‘dashboard van de auto’ en geven de gebruiker alle middelen om te doen wat hij moet doen.
Op het internet (waar aandacht en geduld zeer beperkt zijn) is het van groot belang dat deze navigatie overzichtelijk, simpel en voorspelbaar is. En waar je met een visuele identiteit meer creatief los kunt gaan omdat bijvoorbeeld een logo statisch is, is het bij een website of interface in veel gevallen verstandiger om daarin juist wat terughoudender te zijn.
Terugkomend op de ‘auto dashboard’ metafoor; als iedere auto een drastisch anders dashboard zou hebben ten opzichte van elke andere auto (het stuur in het midden, de schakelaar voor de lampen op het planvond etc.) dan zou iedere doorsnee persoon opnieuw de besturing moeten leren wanneer hij/zij in een andere auto zou plaatsnemen. Wel creatief… Maar absoluut niet praktisch. Op het web is het niet anders. Wat bekend is voelt vertrouwd. Ook al zien we de webshop of website voor het eerst. Het geeft de gebruiker een gevoel van controle en hij of zij weet min of meer in te schatten ‘Wat? Hoe en Waar?’
Voor meer informatie over deze aanpak kun je de pagina Usability of mijn Website Usability Checklist bekijken.

Binnen dit project heb ik vooral mijn creativiteit ingezet op het gebied van user experience design. Waar usability zicht richt op puur het gebruiksgemak van een product, richt user experience design zich vooral op het gebruiksgenot. Dit is onder andere te bereiken door het uitdenken van een unieke inslag voor een bepaalde actie of interactie binnen de interface. Een element dat weliswaar bekend is, maar waar je een ietwat andere draai aan geeft om zo toch een “Hé dat is leuk/origineel!”-reactie te krijgen van je gebruiker. Deze onderdelen zal ik verderop in deze casestudy nader toelichten.

Op het moment dat de visuele prototypes van de webshop ontworpen werden was de webshop officieel nog niet live. Wat er dus binnen deze casestudy te zien is, zijn designs met veelal dummy-tekst en fictieve producten met expres lange titels en hoge prijzen. Dit laatste om ervoor te zorgen dat zelfs de duurste producten (lange getallen) en de langste productnamen goed leesbaar zouden blijven op kleine (smartphone)beeldschermen. Bij een lange producttitel als: ‘20 Ton Hydraulische Vrachtwagenkrik / € 10.099,00’ moet je als ontwerper namelijk extra letten op leesbaarheid, contrast, vlakverdeling etc.

Let's dive in!

Let's dive in!

Onderzoek & aanloop

Nog meer dan bij het ontwerp van de visuele identiteit is in het webdesign-stuk van dit Barini-project veel onderzoek gedaan naar de concurrentie, de markt, en webshops in het algemeen. Veel webshops zijn al jaren actief en sommige van hun hebben door middel van uitgebreid onderzoek antwoorden gevonden op vraagstukken waar andere shops weer op voort kunnen borduren. Kortom; het wiel opnieuw uitvinden, zeker ten aanzien van een medium waarin gebruiksvriendelijkheid zo van belang is, is vaak niet alleen onverstandig maar ook heel kostbaar. Daarom is in het begin van dit project breed gekeken naar andere webshops met de vragen; Wat doen zij goed? Wat doen ze minder goed? Wat willen wij anders doen? Uit dit onderzoek kwamen veel inzichten voort en daarna is het ontwerpproces gestart. Er zijn schetsen en mood boards gemaakt, er zijn wireframes (lijntekeningen) uitgewerkt en daarna is er begonnen met de eerste designconcepten voor de smartphone-versie van de homepage.

Mobile first

Mobile first is een benadering van ontwerpen waarbij je eerst de mobiele versie (het smartphone beeldschermformaat) uitwerkt van een website of webshop. Dit met het idee dat wanneer het ontwerp goed werkt op zo’n klein formaat, het zeker weten werkt op grotere schermen (tablets en laptops/pc’s).

De vroegere benadering was andersom. Laptops en pc’s voerden de absolute boventoon qua internetgebruik en websites en webshops werden vooral toegespitst op die beeldschermformaten. Daarna werden in bepaalde gevallen (en soms überhaupt niet) designelementen verkleind of geschrapt om alles op een klein telefoonscherm te kunnen passen.
Daarnaast is er het element van ‘touch’ bij smartphones. Omdat ze praktisch allemaal bestuurd worden met de top van een vinger, die vele malen dikker en minder accuraat is dan de punt van een muiscursor is dat een extra punt om goed rekening mee te houden.
Beide zaken zijn in feite enorme beperkingen voor een ontwerper maar tevens vormen ze een leuke uitdaging. Het is een constant gevecht om de ruimte en dit dwingt je om extra kritisch en creatief te zijn.

Onderzoek & aanloop

Nog meer dan bij het ontwerp van de visuele identiteit is in het webdesign-stuk van dit Barini-project veel onderzoek gedaan naar de concurrentie, de markt, en webshops in het algemeen. Veel webshops zijn al jaren actief en sommige van hun hebben door middel van uitgebreid onderzoek antwoorden gevonden op vraagstukken waar andere shops weer op voort kunnen borduren. Kortom; het wiel opnieuw uitvinden, zeker ten aanzien van een medium waarin gebruiksvriendelijkheid zo van belang is, is vaak niet alleen onverstandig maar ook heel kostbaar. Daarom is in het begin van dit project breed gekeken naar andere webshops met de vragen; Wat doen zij goed? Wat doen ze minder goed? Wat willen wij anders doen? Uit dit onderzoek kwamen veel inzichten voort en daarna is het ontwerpproces gestart. Er zijn schetsen en mood boards gemaakt, er zijn wireframes (lijntekeningen) uitgewerkt en daarna is er begonnen met de eerste designconcepten voor de smartphone-versie van de homepage.

Mobile first

Mobile first is een benadering van ontwerpen waarbij je eerst de mobiele versie (het smartphone beeldschermformaat) uitwerkt van een website of webshop. Dit met het idee dat wanneer het ontwerp goed werkt op zo’n klein formaat, het zeker weten werkt op grotere schermen (tablets en laptops/pc’s).
De vroegere benadering was andersom. Laptops en pc’s voerden de absolute boventoon qua internetgebruik en websites en webshops werden vooral toegespitst op die beeldschermformaten. Daarna werden in bepaalde gevallen (en soms überhaupt niet) designelementen verkleind of geschrapt om alles op een klein telefoonscherm te kunnen passen.
Daarnaast is er het element van ‘touch’ bij smartphones. Omdat ze praktisch allemaal bestuurd worden met de top van een vinger, die vele malen dikker en minder accuraat is dan de punt van een muiscursor is dat een extra punt om goed rekening mee te houden.
Beide zaken zijn in feite enorme beperkingen voor een ontwerper maar tevens vormen ze een leuke uitdaging. Het is een constant gevecht om de ruimte en dit dwingt je om extra kritisch en creatief te zijn.

Een screenshot-overzicht van verschillende schermen van de Barini-webshop op een smartphone-formaat.

Interface design

Na een aantal concepten, aftastingen en goed kijken naar wat al prima werkt op het internet, begon de navigatie van de webshop vorm te krijgen. Dit is een beschrijving van het ontwerp van de lay-out van de home-pagina op de smartphone van boven naar beneden:

  • Bovenin de interface is een blauwe balk zichtbaar in de eerder bepaalde Barini-blauwtinten met daarin een subtiel verloop van lichter-blauw (boven) naar donkerblauw (onder). Hierin zijn in het wit van links naar rechts het Barini logo, een Menu-knop, een Inloggen-knop en een Winkelwagen-knop zichtbaar. En in feite zijn dit de meest noodzakelijke elementen van de hele webwinkel.
    Je moet als gebruiker weten waar je bent (het logo), waar je heen kunt (het menu), dat je kunt inloggen als je een account hebt of dat dat überhaupt een optie is. En je moet altijd direct je winkelwagen en diens inhoud kunnen zien. Eenvoud was een harde eis voor deze eerste sectie.
    Tevens is (mede omdat het winkelwagen icoontje zo bekend is) direct in te schatten – alleen al kijkend naar de blauwe balk – dat dit waarschijnlijk een webshop is. En wat daarnaast direct opvalt en afwijkend is, zijn de drie gekleurde cirkeltjes naast het winkelwagen icoontje, waarvan het bovenste rode cirkel het meest opvalt omdat die het meest helder is. Dit is een user experience design-element waar ik later op terug kom.
  • Direct onder de blauwe (hoofd)balk is een bruine balk zichtbaar in de eerder bepaalde Barini-bruintinten. Ook deze balk heeft een subtiel verloop om ook dit element wat zachter en minder ‘plat’ te maken en deze balk bevat niets anders dan een prominente zoekbalk en een zoek-icoon.
    Met een beoogd assortiment van 10.000+ producten zal naar alle waarschijnlijkheid dit het voornaamste navigatie-element zijn voor gebruikers om te navigeren naar het product dat ze zoeken. Via het hoofdmenu kun je daar natuurlijk ook komen, maar dit vergt meer stappen, meer tijd, en je moet beter weten waar je ongeveer moet zijn. Deze zoekbalk behoeft geen extra stap. Je kunt er direct in typen en vervolgens op ‘zoeken’ klikken.
  • Op de homepage van de webwinkel wordt deze bruine balk gevolgd door een slider. Deze slider toont afbeeldingen van acties, nieuws en andere zaken die van belang kunnen zijn en zorgt ervoor dat deze zaken de aandacht trekken. Tevens is het (wanneer er sfeervolle foto’s worden ingezet) een element waaraan de gebruiker een gevoel van sfeer kan overhouden en omdat het geanimeerd is doorbreekt dit het meer statische karakter van de rest van de pagina.
  • De slider wordt daaronder gevolgd door enkele afwisselende beloftes van Barini zoals: “Voor 17:00 besteld, morgen in huis”. Dit alles om zoveel mogelijk vertrouwen te wekken bij de gebruiker en heel duidelijk te maken waar Barini voor staat en wat het bedrijf belooft.
  • Onder deze beloftes volgt nogmaals het ‘Assortiment’-(hoofd)menu, ditmaal met de hoofdcategorieën in uitgeklapte toestand (de menu/assortiment-knop toont pas het volledige menu na een klik) om de gebruiker nogmaals de kans te geven om snel te schakelen naar een afdeling waar hij wezen moet. Tevens geeft het direct een beeld van de indeling van de webshop, de aangeboden categorieën en producten, zodat de gebruiker bij benadering weet wat hij wel en niet kan vinden in de webshop. Hoewel de hoofdcategorieën direct zichtbaar zijn, moet de gebruiker wel op de categorie klikken om vervolgens de subcategorieën weer te geven. Dit omdat het hoofdmenu anders te veel ruimte in zou nemen op de pagina zelf.

Een screenshot van het eerste deel van de homepage van de Barini-webshop op smartphone-formaat met het hoofdmenu, de slider en het assortiment-menu.
Een screenshot van het tweede deel van de homepage van de Barini-webshop op smartphone-formaat met de call-to-action, de ‘nieuw’ en ‘bestverkocht’ tabs en enkele webshop-artikelen.

  • Vervolgens volgt er een widget met daarin een foto van Jengiz en de optie om hem persoonlijk te bellen of te mailen met alle vragen die de gebruiker heeft. Persoonlijke service en ondersteuning van hoog niveau is een absoluut streven van Barini en deze “Neem contact op!”-sectie komt op vrijwel alle pagina’s terug. Een bijkomstigheid van deze sectie is dat zelfs wanneer een gebruiker helemaal geen vraag heeft, hij altijd weet dat er persoonlijk contact mogelijk is met de Barini-medewerkers. Dit geeft vertrouwen en een geruster gevoel dan wanneer deze gegevens enigszins weggestopt zouden worden (zoals nog wel eens gebeurt). Het komt transparant over en je biedt je gebruiker altijd een uitweg voor als hij er echt niet meer uit komt.
  • Daarna volgt een sectie met de bestverkochte en nieuwste producten van de webshop. Deze sectie is opgesplitst in twee tabbladen waar tussen de gebruiker eenvoudig heen en weer kan klikken. Dit element is er weer één die ik bij User Experience Design verder toelicht.
    In deze sectie staan daarnaast twee producten volledig in beeld onder elkaar. En twee producten daarnaast (rechts ervan) die half in beeld staan. Dit om de gebruiker er subtiel op te wijzen dan hij horizontaal met zijn vinger door deze producten kan bladeren. De half-zichtbare producten vragen praktisch om in beeld te komen en de verleiding is groot om met de vinger te swipen zodat dat gebeurt. Zodra de gebruiker dit ontdekt heeft, weet hij dat dit waarschijnlijk geldt binnen de hele interface van de webshop. Ook hier kom ik in het hoofdstuk User Experience Design op terug.
  • De laatste sectie van de webshop is de footer. Dit is een beknopte versie van de sitemap (een overzicht van de belangrijkste pagina’s) en zet tevens een aantal vertrouwenwekkende elementen in, zoals de logo’s van bekende banken en betaalinstellingen en de Barini-contactgegevens.

Interface design

Na een aantal concepten, aftastingen en goed kijken naar wat al prima werkt op het internet, begon de navigatie van de webshop vorm te krijgen. Dit is een beschrijving van het ontwerp van de lay-out van de home-pagina op de smartphone van boven naar beneden:

  • Bovenin de interface is een blauwe balk zichtbaar in de eerder bepaalde Barini-blauwtinten met daarin een subtiel verloop van lichter-blauw (boven) naar donkerblauw (onder). Hierin zijn in het wit van links naar rechts het Barini logo, een Menu-knop, een Inloggen-knop en een Winkelwagen-knop zichtbaar. En in feite zijn dit de meest noodzakelijke elementen van de hele webwinkel.
    Je moet als gebruiker weten waar je bent (het logo), waar je heen kunt (het menu), dat je kunt inloggen als je een account hebt of dat dat überhaupt een optie is. En je moet altijd direct je winkelwagen en diens inhoud kunnen zien. Eenvoud was een harde eis voor deze eerste sectie.
    Tevens is (mede omdat het winkelwagen icoontje zo bekend is) direct in te schatten – alleen al kijkend naar de blauwe balk – dat dit waarschijnlijk een webshop is. En wat daarnaast direct opvalt en afwijkend is, zijn de drie gekleurde cirkeltjes naast het winkelwagen icoontje, waarvan het bovenste rode cirkel het meest opvalt omdat die het meest helder is. Dit is een user experience design-element waar ik later op terug kom.
  • Direct onder de blauwe (hoofd)balk is een bruine balk zichtbaar in de eerder bepaalde Barini-bruintinten. Ook deze balk heeft een subtiel verloop om ook dit element wat zachter en minder ‘plat’ te maken en deze balk bevat niets anders dan een prominente zoekbalk en een zoek-icoon.
    Met een beoogd assortiment van 10.000+ producten zal naar alle waarschijnlijkheid dit het voornaamste navigatie-element zijn voor gebruikers om te navigeren naar het product dat ze zoeken. Via het hoofdmenu kun je daar natuurlijk ook komen, maar dit vergt meer stappen, meer tijd, en je moet beter weten waar je ongeveer moet zijn. Deze zoekbalk behoeft geen extra stap. Je kunt er direct in typen en vervolgens op ‘zoeken’ klikken.

Een screenshot van het eerste deel van de homepage van de Barini-webshop op smartphone-formaat met het hoofdmenu, de slider en het assortiment-menu.

  • Op de homepage van de webwinkel wordt deze bruine balk gevolgd door een slider. Deze slider toont afbeeldingen van acties, nieuws en andere zaken die van belang kunnen zijn en zorgt ervoor dat deze zaken de aandacht trekken. Tevens is het (wanneer er sfeervolle foto’s worden ingezet) een element waaraan de gebruiker een gevoel van sfeer kan overhouden en omdat het geanimeerd is doorbreekt dit het meer statische karakter van de rest van de pagina.
  • De slider wordt daaronder gevolgd door enkele afwisselende beloftes van Barini zoals: “Voor 17:00 besteld, morgen in huis”. Dit alles om zoveel mogelijk vertrouwen te wekken bij de gebruiker en heel duidelijk te maken waar Barini voor staat en wat het bedrijf belooft.
  • Onder deze beloftes volgt nogmaals het ‘Assortiment’-(hoofd)menu, ditmaal met de hoofdcategorieën in uitgeklapte toestand (de menu/assortiment-knop toont pas het volledige menu na een klik) om de gebruiker nogmaals de kans te geven om snel te schakelen naar een afdeling waar hij wezen moet. Tevens geeft het direct een beeld van de indeling van de webshop, de aangeboden categorieën en producten, zodat de gebruiker bij benadering weet wat hij wel en niet kan vinden in de webshop. Hoewel de hoofdcategorieën direct zichtbaar zijn, moet de gebruiker wel op de categorie klikken om vervolgens de subcategorieën weer te geven. Dit omdat het hoofdmenu anders te veel ruimte in zou nemen op de pagina zelf.
  • Vervolgens volgt er een widget met daarin een foto van Jengiz en de optie om hem persoonlijk te bellen of te mailen met alle vragen die de gebruiker heeft. Persoonlijke service en ondersteuning van hoog niveau is een absoluut streven van Barini en deze “Neem contact op!”-sectie komt op vrijwel alle pagina’s terug. Een bijkomstigheid van deze sectie is dat zelfs wanneer een gebruiker helemaal geen vraag heeft, hij altijd weet dat er persoonlijk contact mogelijk is met de Barini-medewerkers. Dit geeft vertrouwen en een geruster gevoel dan wanneer deze gegevens enigszins weggestopt zouden worden (zoals nog wel eens gebeurt). Het komt transparant over en je biedt je gebruiker altijd een uitweg voor als hij er echt niet meer uit komt.

Een screenshot van het tweede deel van de homepage van de Barini-webshop op smartphone-formaat met de call-to-action, de ‘nieuw’ en ‘bestverkocht’ tabs en enkele webshop-artikelen.

  • Daarna volgt een sectie met de bestverkochte en nieuwste producten van de webshop. Deze sectie is opgesplitst in twee tabbladen waar tussen de gebruiker eenvoudig heen en weer kan klikken. Dit element is er weer één die ik bij User Experience Design verder toelicht.
    In deze sectie staan daarnaast twee producten volledig in beeld onder elkaar. En twee producten daarnaast (rechts ervan) die half in beeld staan. Dit om de gebruiker er subtiel op te wijzen dan hij horizontaal met zijn vinger door deze producten kan bladeren. De half-zichtbare producten vragen praktisch om in beeld te komen en de verleiding is groot om met de vinger te swipen zodat dat gebeurt. Zodra de gebruiker dit ontdekt heeft, weet hij dat dit waarschijnlijk geldt binnen de hele interface van de webshop. Ook hier kom ik in het hoofdstuk User Experience Design op terug.
  • De laatste sectie van de webshop is de footer. Dit is een beknopte versie van de sitemap (een overzicht van de belangrijkste pagina’s) en zet tevens een aantal vertrouwenwekkende elementen in, zoals de logo’s van bekende banken en betaalinstellingen en de Barini-contactgegevens.

Zwevende smartphones tegen een zwarte achtergrond met screenshots van de Barini-webshop.
Een Formule 1-auto op snelheid waar de vonken vanaf vliegen.

Tablet & computers

Na het uitwerken van de belangrijkste elementen op het smartphone beeldscherm-formaat heb ik mij gebogen over de tablet- en computer-varianten van de designs. Ikzelf voorzie dat de groei van smartphones zal doorzetten en dat dit het voornaamste communicatiemiddel zal worden en blijven. Wat tevens betekent dat de smartphone de tablet en computer en meer gaat verdringen. Daarnaast; als ik mijn geld moet inzetten op de tablet vs. computers, dan denk ik dat de tablet het absoluut zal winnen van die twee. (Sinds 2011 is globaal het verkochte aantal computers ieder jaar verder gedaald)
Voor deze casestudie licht ik daarom specifiek de smartphone en tablet uit als het gaat om de designs en laat ik computer buiten beeld. Temeer ook omdat wanneer een tablet van een redelijk formaat (10 inch+ in beeldscherm-diagonaal) in landschapsmodus wordt gebruikt, deze in feite een laptopscherm benadert qua afmeting.
Hieronder zijn enkele schermen en secties op tablet-formaat te zien met daarop onder andere het bredere hoofdmenu met drie kolommen, het bestel- en beoordelingsproces van de producten en het verzeker/financieren scherm voor geselecteerde producten.

  • Wat duidelijk wordt is dat hier gekozen is om de zoekbalk te verwerken in de bovenste blauwe balk. Op het smartphone formaat was hier de ruimte niet voor, maar bij bredere schermen kon dit perfect en anders zou er in de blauwe balk te veel nodeloze ruimte vrij komen. Als gevolgd daarvan kwam de bruine balk daaronder leeg te staan en kon die perfect dienen om de Barini-beloftes op te tonen. Zo blijft het geheel consistent tussen alle beeldscherm-formaten (blauwe balk, dan bruine balk en daaronder de content) maar heeft ieder beeldscherm-formaat zijn eigen optimale weergave.

  • Rechts bovenin is een design te zien van het bestelproces genaamd ‘Barini Kassa’ met een subtiele knipoog naar mijn eerdergenoemde gekleurde cirkels naast het winkelwagen-icoontje. Hier kom ik in het hoofdstuk User Experience Design van deze casestudie uitgebreider op terug.
    Tevens is op deze pagina een absoluut minimum aan registratie-details te zien die worden gevraagd aan de gebruiker (des te minder hij/zij hoeft in te vullen des te hoger de conversie van prospect naar klant). En rechtsboven staat te allen tijde het hoofdtelefoonnummer van de Barini-helpdesk met het idee dat als iemand er tijdens het bestellen niet uit komt, hij of zij direct kan bellen en niet hoeft door te klikken naar de contactpagina.
    Direct daaronder staat een beknopte opsomming van de bestelling ter dubbel-check en een Barini Service-sectie met nogmaals de beloftes en logo’s van bekende samenwerkingspartners en koppelingen. Dit eveneens weer om herkenning en vertrouwdheid op te wekken.
  • Onder dit scherm is een deel van het productoverzicht te zien op tablet-formaat. En ook bij deze pagina is eveneens gekozen voor drie kolommen (net als het hoofdmenu) om zoveel mogelijk relevante informatie te tonen.
    Daarboven staan filter-opties om het productoverzicht toe te spitsen op de wensen van de gebruiker bijv. goedkoopst naar duurst, nieuw naar oud, type weergave: lijst vs. miniaturen en hoeveel producten de gebruiker ziet per pagina.

Tablet & computers

Na het uitwerken van de belangrijkste elementen op het smartphone beeldscherm-formaat heb ik mij gebogen over de tablet- en computer-varianten van de designs. Ikzelf voorzie dat de groei van smartphones zal doorzetten en dat dit het voornaamste communicatiemiddel zal worden en blijven. Wat tevens betekent dat de smartphone de tablet en computer en meer gaat verdringen. Daarnaast; als ik mijn geld moet inzetten op de tablet vs. computers, dan denk ik dat de tablet het absoluut zal winnen van die twee. (Sinds 2011 is globaal het verkochte aantal computers ieder jaar verder gedaald)
Voor deze casestudie licht ik daarom specifiek de smartphone en tablet uit als het gaat om de designs en laat ik computer buiten beeld. Temeer ook omdat wanneer een tablet van een redelijk formaat (10 inch+ in beeldscherm-diagonaal) in landschapsmodus wordt gebruikt, deze in feite een laptopscherm benadert qua afmeting.
Hieronder zijn enkele schermen en secties op tablet-formaat te zien met daarop onder andere het bredere hoofdmenu met drie kolommen, het bestel- en beoordelingsproces van de producten en het verzeker/financieren scherm voor geselecteerde producten.

  • Wat duidelijk wordt is dat hier gekozen is om de zoekbalk te verwerken in de bovenste blauwe balk. Op het smartphone formaat was hier de ruimte niet voor, maar bij bredere schermen kon dit perfect en anders zou er in de blauwe balk te veel nodeloze ruimte vrij komen. Als gevolgd daarvan kwam de bruine balk daaronder leeg te staan en kon die perfect dienen om de Barini-beloftes op te tonen. Zo blijft het geheel consistent tussen alle beeldscherm-formaten (blauwe balk, dan bruine balk en daaronder de content) maar heeft ieder beeldscherm-formaat zijn eigen optimale weergave.

  • Rechts bovenin is een design te zien van het bestelproces genaamd ‘Barini Kassa’ met een subtiele knipoog naar mijn eerdergenoemde gekleurde cirkels naast het winkelwagen-icoontje. Hier kom ik in het hoofdstuk User Experience Design van deze casestudie uitgebreider op terug.
    Tevens is op deze pagina een absoluut minimum aan registratie-details te zien die worden gevraagd aan de gebruiker (des te minder hij/zij hoeft in te vullen des te hoger de conversie van prospect naar klant). En rechtsboven staat te allen tijde het hoofdtelefoonnummer van de Barini-helpdesk met het idee dat als iemand er tijdens het bestellen niet uit komt, hij of zij direct kan bellen en niet hoeft door te klikken naar de contactpagina.
    Direct daaronder staat een beknopte opsomming van de bestelling ter dubbel-check en een Barini Service-sectie met nogmaals de beloftes en logo’s van bekende samenwerkingspartners en koppelingen. Dit eveneens weer om herkenning en vertrouwdheid op te wekken.
  • Onder dit scherm is een deel van het productoverzicht te zien op tablet-formaat. En ook bij deze pagina is eveneens gekozen voor drie kolommen (net als het hoofdmenu) om zoveel mogelijk relevante informatie te tonen.
    Daarboven staan filter-opties om het productoverzicht toe te spitsen op de wensen van de gebruiker bijv. goedkoopst naar duurst, nieuw naar oud, type weergave: lijst vs. miniaturen en hoeveel producten de gebruiker ziet per pagina.

Zwevende screenshots van de Barini-webshop op tabletformaat met daarop o.a. het besteloverzicht, het assortiment-menu en het recensie-scherm.

Iconen

Op kleinere schermen kunnen effectieve, begrijpelijke iconen een geschenk uit de hemel zijn. Iconen zijn doorgaans kleiner dan woorden en voelen logischer aan om op te drukken met je vingertop dan op een woord. Dit is een essentieel verschil tussen de muis- versus de touchscreen-interface.
Binnen de Barini-webshop is ervoor gekozen om gebruik te maken van een open-source iconenset genaamd: Font Awesome. Het voordeel van dergelijke iconen is onder andere dat ze kwalitatief scherp lijken op ieder beeldscherm omdat het vectorafbeeldingen zijn. Vectorafbeeldingen zijn oneindig schaalbaar zonder dat er kwaliteitsverlies optreedt (zie de blauwe helft van de cirkel).
Dit in tegenstelling tot de bitmap-afbeeldingen die in het verleden werden gebruikt. Bitmap-afbeeldingen worden stukker vager op een groter formaat en op scherpere beeldschermen (zie de witte helft van de cirkel). En met de steeds hoger-wordende resolutie van beeldschermen (vooral op smartphones) is ‘vector’ als techniek heel waardevol.
Naast deze open-source iconen heb ik een specifiek autosport-gerelateerd icoon gevonden in de vorm van een Formule 1-helm. Deze licht ik toe in de sectie hieronder.

Een cirkel in twee helften waarbij de linkerhelft donkerblauw is met een scherpe rand. En de linkerhelft wit is met een gekartelde rand van lagere kwaliteit.

Iconen

Op kleinere schermen kunnen effectieve, begrijpelijke iconen een geschenk uit de hemel zijn. Iconen zijn doorgaans kleiner dan woorden en voelen logischer aan om op te drukken met je vingertop dan op een woord. Dit is een essentieel verschil tussen de muis- versus de touchscreen-interface.
Binnen de Barini-webshop is ervoor gekozen om gebruik te maken van een open-source iconenset genaamd: Font Awesome. Het voordeel van dergelijke iconen is onder andere dat ze kwalitatief scherp lijken op ieder beeldscherm omdat het vectorafbeeldingen zijn. Vectorafbeeldingen zijn oneindig schaalbaar zonder dat er kwaliteitsverlies optreedt (zie de blauwe helft van de cirkel).
Dit in tegenstelling tot de bitmap-afbeeldingen die in het verleden werden gebruikt. Bitmap-afbeeldingen worden stukker vager op een groter formaat en op scherpere beeldschermen (zie de witte helft van de cirkel). En met de steeds hoger-wordende resolutie van beeldschermen (vooral op smartphones) is ‘vector’ als techniek heel waardevol.
Naast deze open-source iconen heb ik een specifiek autosport-gerelateerd icoon gevonden in de vorm van een Formule 1-helm. Deze licht ik toe in de sectie hieronder.

Een cirkel in twee helften waarbij de linkerhelft donkerblauw is met een scherpe rand. En de linkerhelft wit is met een gekartelde rand van lagere kwaliteit.
Een overzicht van alle gebruikte iconen in de webshop van Barini.

User Experience Design

Zoals eerder aangehaald was het mijn intentie om qua lay-out en navigatie geen rare dingen te doen binnen het ontwerp van de webshop. Het voortborduren op wat bekend is heeft (ook zeker met het oog op het budget en daarmee het aantal te besteden uren) simpelweg te veel voordelen ten opzichte van het alternatief.
Wel was het mijn streven om binnen het design van de user experience hier en daar wat unieke features toe te voegen die de webshop meer karakter zouden geven. Kleine details en af en toe een knipoog naar de gebruiker die ervoor zorgen dat de site net een slagje unieker is dan andere webshops.
Hieronder volgt een beknopte opsomming van enkele van de features die ik bedacht om dit te bereiken.

User Experience Design

Zoals eerder aangehaald was het mijn intentie om qua lay-out en navigatie geen rare dingen te doen binnen het ontwerp van de webshop. Het voortborduren op wat bekend is heeft (ook zeker met het oog op het budget en daarmee het aantal te besteden uren) simpelweg te veel voordelen ten opzichte van het alternatief.
Wel was het mijn streven om binnen het design van de user experience hier en daar wat unieke features toe te voegen die de webshop meer karakter zouden geven. Kleine details en af en toe een knipoog naar de gebruiker die ervoor zorgen dat de site net een slagje unieker is dan andere webshops.
Hieronder volgt een beknopte opsomming van enkele van de features die ik bedacht om dit te bereiken.

Twee zwevende zwarte tablets met het productoverzicht en assortiment-menu van de Barini-webshop.
Het ‘stoplicht concept’ waarbij een stoplicht naast het winkelwagen-icoon staat om aan te geven in welke ‘positie’ van de webshop de gebruiker zich bevindt.

Het stoplicht-concept

Het ‘stoplicht-concept’ (zoals ik het noem) is waarschijnlijk de feature waar ik het meest enthousiast over ben. Het is een ludieke invalshoek voor een standaard winkelwagentje en ik maakte er eerder in deze casestudie al enkele toespelingen op. Binnen de racesport is het stoplicht een zeer bekend fenomeen. Het heeft niet helemaal dezelfde functie als in het normale verkeer, maar de insteek is: rood licht; wacht!, oranje licht: klaar voor de start?, groen licht: af!
Dit concept heb ik gekoppeld aan het bestelproces van de webshop. Waarbij rood licht geldt als ‘nog niets gedaan/neutraal’. Oranje geldt als: er zit een product in de winkelwagen maar het is nog niet afgerekend of de gebruiker is in het bestelproces. En groen licht is een voltooide bestelling. ‘Af!’ als het ware… Of ‘het is naar u onderweg’.
Dit stoplicht heb ik vorm gegeven door cirkels uit de iconenset in rood, oranje en geel te zetten. Evenals hun ‘licht-uit variant’ waar wel de contouren zichtbaar zijn, maar de cirkel niet is opgelicht. Kortom; als het stoplicht op rood staat is rood helder gekleurd en knalt die van het scherm. De oranje en groene ‘lampen’ zijn meer gedimd, maar wel zichtbaar, zodat het stoplicht (ook op zeer klein formaat) wel degelijk herkenbaar blijft.

Een half-zwarte en half-witte tablet met daarop het bestelproces en het tab-menu van de Barini-webshop.
Een half-zwarte en half-witte tablet met daarop het bestelproces en het tab-menu van de Barini-webshop.
De bestelstappen van de Barini webshop met de voltooide stappen in het blauw, de onvoltooide stappen in het grijs en de ‘volledig voltooide’ staat in het groen.

De stoplicht-bestelstappen

Het stoplicht-concept heb ik doorgetrokken van de winkelwagen naar het bestelproces. Bovenin de bestelpagina zijn alle bestel-stappen zichtbaar en de actieve stap waarop de gebruiker zich bevindt is blauw en licht enigszins op. In de stap zelf zit het oranje lampje van het stoplicht verwerkt om een verband met het winkelwagentje aan te geven en om de gebruiker subtiel te sturen richting ‘groen licht’. Daarnaast zijn de stappen van het bestelproces onderverdeeld in 5 ‘borden’ die niet geheel toevallig doen denken aan bewegwijzeringsborden. Bij de laatste stap wordt het licht en het bord groen en verschijnen er de drie strepen van het Barini logo voor de letter B van Bedankt, alsof het woord wegrijdt (Af!) of de bestelling onderweg is.

De bestelstappen van de Barini webshop met de voltooide stappen in het blauw, de onvoltooide stappen in het grijs en de ‘volledig voltooide’ staat in het groen.
De bestverkocht/nieuw-tabs om de producten binnen de webshop overzichtelijker in beeld te brengen.

Bestverkocht/Nieuw

Een andere feature van de webwinkel zijn de ‘Bestverkocht/Nieuw’ tabs. Deze manier van informatie-design is niet heel origineel (o.a. regelmatig zichtbaar in smartphone apps) maar persoonlijk had ik het tot dusver niet eerder gezien binnen een webwinkel. En dat terwijl het een geweldig middel is om ruimte te besparen (vooral op kleinere beeldschermen). In feite heb je een ‘twee voor de prijs van één-benadering’ voor een sectie waar je anders een lange lijst met producten onder elkaar zou zien. Nu kun je simpelweg met één klik of ‘tap’ schakelen tussen de bestverkochte items (wat inspeelt op het wekken van vertrouwen) en de nieuwe producten (die wellicht geavanceerder zijn).

Producten in de Barini-webshop die half buiten beeld staan om de gebruiker aan te moedigen om te gaan swipen binnen de interface.

Half buiten beeld

Deze feature is vooral toegepast op de smartphone-designs van de Barini-webshop. Zoals eerder aangehaald toont dit idee anderhalf product in de horizontale breedte. Kortom; het 2e product staat half buiten beeld, terwijl de rest van de pagina in beeld staat… Dit moet de gebruiker aanzetten tot horizontaal swipen en zodra hij weet dat dit kan, wordt dit een bekende handeling binnen de hele webshop. Horizontaal swipen op touchscreens is een vrij ingeburgerde actie en het geeft Barini als bedrijf de mogelijkheid om meerdere producten op een rij te zetten ook al staat het op een klein beeldscherm. Tevens is het een soort ‘teaser’ van de producten, omdat je weliswaar een deel kunt zien maar niet alles. Het wekt nieuwsgierigheid.

Producten in de Barini-webshop die half buiten beeld staan om de gebruiker aan te moedigen om te gaan swipen binnen de interface.
Het helm en gebruikers-icoon van de Barini-webshop.

De helm

Het lijkt een klein detail, maar het icoon van de Formule 1-helm dat dienst als knop om in te loggen is een weloverwogen knipoog naar de doelgroep. Ten tijde van het uitwerken van deze casestudie staat nog niet vast of er eerst een persoons-icoon in beeld is en deze veranderd in een helm wanneer een gebruiker is ingelogd (alsof door in te loggen de persoon de racehelm op doet). Of dat te allen tijde de helm te zien is. Feit blijft dat het één van die kleine details is die de Barini-webshop simpelweg wat anders maakt en een beetje extra karakter geeft. En dat was de bedoeling. De helm in samenspel met de winkelwagen ernaast met het stoplicht (waar de helm ‘naartoe’ kijkt) is daarnaast een mooie bijkomstigheid.

Een zwart-wit foto van een klassieke Formule 1-auto.
Een favicon voor de webshop in het wit met daarop het B-zegel van Barini in hoogglans-zwart.
Een favicon voor de webshop in het zwart met daarop het B-zegel van Barini in hoogglans-aluminium.
Een favicon voor de webshop in donkerblauw met daarop het B-zegel van Barini in lichtgrijs-aluminium.
Een favicon voor de webshop in donkerblauw met daarop het B-zegel van Barini in lichtgrijs-aluminium.

Nawoord

Net als bij het ontwerp van de visuele identiteit was de creatieve vrijheid die ik had bij het ontwerpen van deze webshop zeer groot.
Zelf heb ik me in dit deel van het project iets meer ingehouden wat visueel design betreft om zo de gebruiksvriendelijkheid niet in de weg te zitten en ik heb me creatief iets meer laten gaan binnen het design van de user experience.
Binnen interfaces en digitale producten ligt daar mijn hart. De psychologie-tak van interactief design en de constante vraag: hoe kan dit beter, leuker, aangenamer, unieker?
Het eindresultaat mag er zijn; een webshop met een (zeker voor deze branche) vrij unieke en opvallende styling en een user experience waarbinnen op meerdere punten bewust gestreefd is naar het opwekken van een emotie bij de gebruiker.

Toegepast

Deel dit project via

Even overleggen?

Heb je een uitdagend project of een vraag? Neem gerust contact op. Ik denk graag met je mee. Bel: 06-42 48 46 00 of stuur een e-mail naar paul@paulchristian.nl