Je webshop op een mobieltje

Vooralsnog wordt mijn webshop op een mobieltje hetzelfde weergegeven als op een tablet. Zij het flink verkleind. De bezoeker zal nog moeten zoomen en scrollen, ik vind het prima. Toch heb ik me aan een mobiele schets gewaagd.

De weergave op de tablet lijkt veel op de weergave op de desktop, met dat verschil dat de achtergrond niet wordt getoond en het functionele gedeelte altijd op de volledige breedte getoond wordt. Ik heb de webshop ruim twee jaar geleden, bij de overstap naar Luondo, ook ingericht voor gebruik op de tablet. Tablet first, daar wordt de desktopversie alleen maar beter van. Groot lettertype. Grote buttons. Geen ingewikkelde uitklapmenu's die op de tablet nauwelijks te bedienen zijn. En waar mogelijk de mouseover eruit gehaald.

Responsive capriolen en inburgeren
Zoals ik twee maanden geleden al schreef: ik vind 't prima zo, met slechts een beperkt responsive design. Helemaal als ik zie wat voor rare capriolen er uitgehaald worden. Het lijkt wel of de SEOcowboys zich aan het omscholen zijn tot Responchiefs.

Een andere reden om nog te wachten, is dat nieuwe technieken eerst moeten inburgeren. Anders snappen je klanten de toegepaste logica met de bijbehorende symbolen (nog) niet. Het gebruik van mobieltjes blijft toenemen. Men begint het hamburgertje te herkennen.

Winkel van Papier legt uit wat een hamburger is.

Ondertussen is mijn winkelhost druk bezig met responsive (misschien wel adaptive) design. Ik heb dus toch maar eens geschetst hoe ik het zou willen. Overigens koester ik niet de illusie dat mijn webshop zo gaat functioneren. Met name de tag cloud zal een heikel puntje zijn.

Hieronder sta ik stil bij de verschillende onderdelen van mijn webshop op een mobieltje:

Navigatie
Op het mobieltje is geen ruimte voor navigatie of gadgets in een kantlijn; de content neemt de volledige breedte in beslag.

Home
Dat is de productendatabase. Het magazijn van de winkel zeg maar. Er staan op deze home links naar productoverzichten. De ankertekst van de link is het label dat deze producten gemeenschappelijk hebben. Labels die veel gebruikt worden, worden groter weergegeven. Het is het navigatiemenu dat bij de tablet/desktop bij Artoek in de linkerkantlijn staat. Met dat verschil dat er geen plaats is om de labels te ordenen in rijtjes. Daarom wil ik de labels graag in een wolk (=tag cloud). Dan kun je meer woorden op minder ruimte kwijt en hoeft de klant niet te scrollen. De fake labels waarmee ik de andere labels indeel (zoek op soort, zoek op thema, seizoensartikelen) laat ik uiteraard weg.

De hamburger
Tot op heden zie ik dat de hamburger meestal (o.a. bij Bol.com en Zalando) gebruikt wordt voor navigatie in de productendatabase al dan niet in combinatie met de overige informatie. Ik gebruik de hamburger voor de niet-winkelpagina's als contact, voorwaarden etc.

1 stap terug
Ik twijfel of die in de hoofdnavigatie moet. Omdat 'ie meestal ook in de browser staat. Omdat deze optie zo vaak gebruikt wordt én om onafhankelijk van een browser te wezen staat 'ie er toch.

Het zoekvak
Hiermee zoek je in de productendatabase. Het moet een intelligent zoekvak zijn. Dat wil zeggen dat het door de klant getikte woord automatisch aangevuld moet worden met woorden uit de tag cloud. Dus als de klant 'kab' tikt, verschijnt er 'kabouter'. Waar de klant dan nog kabouterpak van kan maken.

Overzichtspagina's
Pagina's met meerdere producten waar je kunt doorklikken naar de detailpagina's van deze producten. Het resultaat van een zoekopdracht of een klik op een label. Het zoekvak op deze pagina's kun je gebruiken om te filteren, anders te sorteren of te zoeken in de getoonde resultaten.

Productpagina's
Alle informatie over het product staat op 1 pagina. Geen tabbladen. Gebruikers prefereren scrollen boven klikken. Onderaan (of in de lopende tekst) kun je links opnemen naar andere producten. Denk aan bijpassende of aanvullende producten, meest verkochte producten, producten afgestemd op het surfgedrag van de klant, producten die de klant eerder bekeken heeft of aanbiedingen.
Je zou ook kunnen linken naar de labels die het product heeft.

Broodkruimel
De broodkruimel op een productpagina kan echt niet meer. Een broodkruimel geeft vooraan de 'home' en daarna de 'stap terug'; buttons die al standaard op iedere pagina bovenaan staan.
Voor degenen die denken 'baadt het niet, dan schaadt het niet': Dat doet het wel. Hoe meer linkjes je aanbiedt, hoe kleiner de kans wordt op een druk op de bestelbutton.

Zie hier wat het verwijderen van een paar linkjes doet.

Bovendien duidt een broodkruimel op een structuur die er niet is. Nu maar hopen dat mijn winkelhost op dezelfde weg zit. Ik had dit eigenlijk een paar maanden geleden moeten schetsen ..