dinsdag 6 januari 2015

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.
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 2 jaar geleden, bij de overstap naar Luondo, 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 mouse-over eruit gehaald.

En zoals ik 2 maanden geleden schreef. Ik vind dat prima zo. Helemaal als ik zie wat voor rare responsive capriolen er uitgehaald worden. Lijkt wel of de SEOcowboys zich aan het omscholen zijn tot Responchiefs.

Winkel van Papier legt uit wat een hamburger is.

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. En mijn winkelhost is druk bezig met responsive (misschien wel adaptive) design.
Toch maar eens uitgeschetst* hoe ik het zou willen. Niet de illusie trouwens dat mijn webshop zo gaat functioneren. Met name de tagcloud zal een heikel puntje zijn.

Klik op de afbeelding voor een vergroting

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 linken 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 navigatie-menu 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 (=tagcloud). Dan kun je meer woorden op minder ruimte kwijt en hoeft de klant niet te scrollen. En 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. Bol 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 enz.

1 stap terug
Ik twijfel of die in de hoofdnavigatie moet. Omdat ie meestal ook in de browser staat. Omdat ie zo vaak gebruikt wordt en 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 tagcloud. 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 info over het product staat op 1 pagina. Geen tabbladen. Gebruikers prefereren scrollen boven klikken.
Onderaan (of in de lopende tekst) kun je linken 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.
En degenen die denken baadt het niet schaadt het niet. Dat doet het wel. Hoe meer linkjes je aanbiedt hoe lager 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 uitschetsen......

* Kunnen jullie ook eens zien met wat voor schetsjes de  Queenbee-developer aan de slag moet.

** De producten in mijn winkel zijn gelabeld. Niet geordend. Een label kan van alles zijn; een thema, een categorie, een afdeling enz.

*** Ook al ben ik ze nog niet tegengekomen, toch zullen er echt wel winkels bestaan die de home gebruiken voor de productendatabase en de hamburger voor een menu naar de overige pagina's. Omdat het erg voor de hand liggend is. In mijn ogen zelfs de enige logische manier.