E-commerce app

Je shop indelen

Drie instrumenten geven je catalogus structuur, en ze werken op verschillende niveaus. Collecties zijn de gangpaden van je shop. Collectielijsten ruimen die gangpaden op zodat je menu niet overloopt. Tags werken op de achtergrond, als onzichtbare secundaire collecties.

Hoofdstuk 1De collecties

Wat ze zijn

Collecties geven je Shopping App structuur en ordenen je producten. Was je app een fysieke winkel, dan waren de collecties de gangpaden.

Ze bepalen ook wat je klant kan bereiken. Een product dat aan geen enkele collectie hangt, bestaat wel degelijk in je shop en verkoopt ook, maar het is alleen via zijn eigen adres te bereiken: via een link die je stuurt, via een zoekopdracht, via een widget op het startscherm. Elk product aan minstens één collectie koppelen is dus de eerste reflex, nog vóór je over je indeling nadenkt.

Ze zijn op twee vlakken flexibel. Eerst in de tijd: een collectie voeg je toe, verwijder je, toon of verberg je in één klik, wat tijdelijke collecties mogelijk maakt. Daarna in de indeling: ze doorkruisen elkaar, en hetzelfde product hoort tegelijk bij meerdere collecties.

Dat doorkruisende karakter verdient je aandacht wanneer je ze aanmaakt. Neem onze decoratiewinkel. Een klant die een decoratiestuk zoekt, kan langs drie verschillende lijnen denken: de kamer in kwestie, het type object, de trend van het moment. We maakten dus negen collecties over die drie lijnen:

Per kamer: Bedroom, Bathroom, Kitchen

Per type object: Frames, Vases, Pillows

Per trend: Big in Japan, Keep it Slow, Words matter

Elk product hoort dus bij meerdere collecties. Het heeft meer kans om gezien te worden, en de klant heeft meer kans om het te vinden langs de weg die hem vanzelf komt.

Daar komt nog een soldencollectie bij, die de afgeprijsde producten verzamelt. Ze verandert in de tijd, en staat verborgen buiten het soldenseizoen.

Hoe je ze aanmaakt

Ga naar Products › Collections. Klik op Create a collection.

Daarna voer je de titel in, een illustratiebeeld, en de weergavevolgorde van de producten. De titel is beperkt tot 32 tekens, en dat is een nuttige beperking: de naam van een gangpad lees je in een menu, op een telefoonscherm, en korte namen winnen daar altijd.

Voor de weergavevolgorde is de regel altijd dezelfde: vraag je af wat je klant zoekt.

Er zijn zes automatische volgordes, in paren: aanmaakdatum, van recent naar oud of omgekeerd, prijs, van laag naar hoog of omgekeerd, en titel, van A tot Z of van Z tot A. De zevende modus is handmatig.

  • De datum zet nieuwe artikelen vooraan. Dat is de juiste keuze voor een kledingzaak die regelmatig wordt aangevuld, of voor een boekhandel waarvan de klanten terugkomen voor nieuw leesvoer.
  • Oplopende prijs past bij een buurtwinkel, waar de klant zijn budget wil bewaken. Aflopende prijs dient eerder een hoogwaardige collectie, waar het eerste artikel het niveau zet.
  • Alfabetische volgorde is voor catalogi die mensen doorlopen terwijl ze de naam van wat ze zoeken al kennen: onderdelen, technische referenties, wijnen.
  • De handmatige modus laat je naar boven duwen wat je eerst wilt verkopen, en geeft je volledige controle over hoe je lijst eruitziet.

Die volgorde hoort bij de collectie, niet bij de shop. Je nieuwe artikelen kunnen dus op datum staan terwijl je maandselectie met de hand geordend blijft. Dat maakt de handmatige modus houdbaar: automatische volgordes passen zichzelf toe op producten die je later toevoegt, de handmatige modus vraagt dat je erop terugkomt, dus houd hem voor de collecties die het waard zijn.

Vergeet SEO niet. Je collecties zijn net als je productpagina's indexeerbaar. Vul de tags Title en Meta description in, en pas de URL's aan met je zoekwoorden.

De collectielijst van de shop. Bovenaan een zoekveld en, omcirkeld, de groene knop die er een aanmaakt. Daaronder neemt elke collectie een rij in: haar miniatuur met de titel erin, haar aantal producten, en een label dat zegt of ze in het menu van de app verschijnt.
Een collectie draagt een eigen omslag en een eigen telling, en een label zegt of het menu haar toont.
Het detail van een collectie. Links haar producten in weergavevolgorde, elk met hun miniatuur, hun prijs, hun voorraadstatus, een greep om ze te verplaatsen en een kruisje om ze te verwijderen. Rechts, omcirkeld, het zoekblok: titel en beschrijving voor zoekmachines, adres van de pagina, en een preview van het resultaat zoals het zal verschijnen. Rechtsonder de knop die de instellingen weer opent.
Een collectie heeft een eigen adres en een eigen fragment: het is een pagina voor zoekmachines, geen map.

Hoofdstuk 2De collectielijsten

Waarvoor ze dienen

Een collectie bereikt het menu van je app op twee manieren, en daar wordt het uitzicht van je navigatie beslist.

Alleen. Elke collectie heeft een blok voor zichtbaarheid in het menu, waar je de optie aanvinkt die de collectie in het menu opneemt en haar plaats kiest. Ze wordt een volwaardig item, op gelijke voet met een sectie. Een shop met drie gangpaden toont ze zo, en de klant overziet de hele catalogus in één oogopslag.

Gegroepeerd. De sectie Collection list verzamelt er meerdere onder één item. Het nuttige richtpunt: boven vijf gangpaden wint het menu bij groeperen.

In het vocabulaire van e-commerce is die tweede manier het onderscheid tussen categorie en subcategorie, waarbij de lijst de categorie draagt en de collecties de subcategorieën. Kom je van een ander platform, dan is dit de handeling die je onder een andere naam kent.

Terug naar de decoratiewinkel en zijn tien collecties. Zonder groepering zou het menu van de app verzadigd zijn.

We maakten dus drie lijsten, volgens dezelfde drie zoeklijnen, met elk drie collecties:

  • Rooms: Bedroom, Bathroom, Kitchen
  • Objects: Frames, Vases, Pillows
  • Trends: Big in Japan, Keep it Slow, Words matter

De soldencollectie blijft buiten elke lijst: we willen dat ze zo rechtstreeks mogelijk bereikbaar is. Dat is een beslissing om te onthouden, opruimen mag nooit begraven wat aan de oppervlakte moet blijven.

Het menu van een shop waar elke collectie op zichzelf staat: twaalf items volgen elkaar op, van de startpagina tot de solden, één per productfamilie. Onderaan het paneel twee sociale netwerken en de instellingen.
Twaalf ingangen wanneer elke collectie op zichzelf staat, en het menu wordt de hele catalogus.
Hetzelfde menu met de collecties gegroepeerd: vijf items volstaan, en elk item opent de lijst van zijn collecties.
Dezelfde catalogus achter vijf ingangen: het groeperen gebeurt in het menu, niet in de collecties.

Hoe je ze aanmaakt

Een collectielijst is een sectie van je Shopping App. Je voegt ze toe zoals elke sectie, vanuit My App › Structure. Klik op Add a section, en kies daarna Collection list.

Geef je sectie een titel, koppel er een beeld aan, en bevestig.

Om je collecties erin te zetten, twee methodes:

  • klik op het "+"-icoon om de collecties te selecteren die je wilt opnemen
  • of sleep de collecties rechtstreeks onder de sectie met de collectielijst
Het paneel om een sectie toe te voegen, geopend op de groep van de collecties. Een eerste tegel, omcirkeld, voegt een lijst met collecties toe; de volgende voegen een specifieke collectie toe, waarbij de collectie die al in de app staat een groen vinkje draagt; de laatste maakt een collectie aan. Links volgt de preview van de app de wijzigingen.
Twee verschillende tegels: de eerste voegt een lijst toe, de volgende voegen één collectie aan het menu toe.
De pas aangemaakte sectie, nog leeg. In het paneel rechts voegt de omcirkelde link een collectie aan de lijst toe, en de kiezer die daarmee opengaat toont alle beschikbare collecties. Links nodigt de preview je uit de eerste toe te voegen.
De lijst komt leeg binnen: daarna kies je welke collecties erin gaan, en in welke volgorde.

Welke layout je kiest

Drie layouts, waarvan er één van je navigatiemodus afhangt.

Swipe Submenu zet je collecties in een submenu, onder de hoofdnavigatie van de app. Die layout is alleen beschikbaar in de navigatiemodus "Swipe", waarbij je van sectie naar sectie gaat door horizontaal over het scherm te vegen. Het is de standaardlayout van de catalogus, maar hij is aan de navigatie gebonden: kies hem alleen als je app zich aan die modus houdt, nooit als eenvoudige terugvaloptie.

Classic toont je gangpaden in rijen, met een kleine miniatuur en de naam in vet, meerdere per scherm. Dat is de gids-houding: hij past bij je wanneer je veel gangpaden hebt, wanneer de naam meer telt dan het beeld, en wanneer het ook zonder sterke beelden moet werken. Het is ook de natuurlijke terugvaloptie voor de twee andere.

Visual is een etalage: grote kaarten over de volle breedte, het beeld van het gangpad als achtergrond en de naam eroverheen. Kies hem wanneer gangpaden met het oog worden gekozen, in mode, decoratie of voeding.

Eén kanttekening bij die laatste: hij vraagt goede beelden bij al je collecties. Hebben sommige er geen, of slechte, val dan terug op Classic.

De keuze maak je in My App › Structure, via het menu van je sectie, Edit the design. Classic en Visual gelden voor elke navigatiemodus. Staat je app niet in Swipe-modus, dan zet het back office Swipe Submenu in het grijs en biedt het je een link om je menu te wijzigen.

Drie mockups naast elkaar, één per layout: Swipe Submenu zet de collecties in een submenu van een zijnavigatie; Classic zet ze in rijen, elk met hun ronde miniatuur en hun titel; Visual stapelt grote beelden over de volle breedte.
Drie layouts voor dezelfde lijst: een submenu opzij, rijen met miniatuur, of beelden over de volle breedte.
Het menu van een kledingzaak: onder het item voor kleding sommen vijf subitems de collecties op, terwijl de andere items op het eerste niveau blijven.
Swipe Submenu in de praktijk: de collecties vouwen open onder één ingang, de rest van het menu blijft vlak.
Een collectielijst in rijen: drie collecties, elk met hun ronde miniatuur en hun titel.
Classic, waar de miniatuur klein blijft en de titel de collectie draagt.
Dezelfde lijst als beelden: elke collectie neemt de volle breedte in, met haar titel midden in de foto, en je scrolt om de volgende te zien.
Visual, waar de foto het argument is en de titel erin ligt.

Gebruik je overal dezelfde layout

Nee, en dat detail kan tellen. We raden aan de consistentie van het design in je hele app te bewaren, maar layouts variëren laat je een hiërarchie aangeven.

Neem een buurtwinkel met een catalogus die zo is ingedeeld:

  • Food
  • Fresh: Fruit, Vegetables
  • Bulk: Cereals, Rice & Pasta
  • Health & Beauty: Cosmetics, Essential oils

Hier bevatten sommige collectielijsten geen collecties, maar andere collectielijsten. Er zijn dus twee niveaus te onderscheiden. Een andere layout toepassen op niveau 1 en niveau 2 voorkomt dat de klant verdwaalt in de boomstructuur.

Twee schermen van dezelfde buurtwinkel: links een collectielijst in rijen; rechts de geopende collectie, met haar subcollecties als grote beelden. Twee layouts voor twee navigatieniveaus.
Twee layouts in één shop: rijen om het schap te kiezen, beelden zodra je erin zit.

Hoofdstuk 3De tags

Wat ze zijn

Een tag is een trefwoord dat aan een product hangt, als een markering. Je kunt er meerdere aan hetzelfde product hangen.

Ze dienen eerst om je producten in je back office terug te vinden. Maar hun voornaamste waarde ligt elders: ze sturen wat er aan de kant van de klant wordt getoond.

  • ze filteren de widgets met productlijsten op je startscherm
  • ze voeden, samen met de collecties, het blok met vergelijkbare producten op je productpagina's
  • ze voeden de resultaten van de zoeksectie van je shop

Hoe je ze kiest

Zie tags als secundaire collecties, onzichtbaar in de navigatie maar actief in de weergave. Ze worden meestal gebouwd op de kenmerken van je producten: kleur, materiaal, vorm.

Een voorbeeld. In een kledingzaak gaat een bruine wollen coltrui naar de collectielijst "Clothing", collectie "Sweaters". Hij krijgt de tags "coltrui", "bruin", "wol".

Daar volgen meteen twee toepassingen uit. Om al je wollen artikelen op het startscherm te tonen, filter je gewoon op de tag "wol". En de trui kan als aanvullend product verschijnen onder een bruine broek.

Dat is het fundamentele verschil met collecties: de collectie ordent wat de klant doorloopt, de tag ordent wat je hem voorlegt.

Hoe je ze aanmaakt

Je voegt ze toe bij het aanmaken of bewerken van een product. In het menu rechts van de bewerkpagina van het product voer je je tags in het veld Tags in. Publiceer om te bevestigen.

Twee schrijfregels bepalen de gezondheid van je woordenschat op termijn. Een tag schrijf je als één woord, zonder spatie, en daarom staat er in het voorbeeld hierboven "coltrui". En hoofdletters worden genegeerd, wol en Wol zijn dezelfde tag, dus je hoeft niet op je hoofdletters te letten.

De rest is discipline, en het back office geeft je het gereedschap: boven het veld opent View all tags de lijst van de tags die al in je shop staan, met een zoekfunctie en een sortering op alfabet of op gebruiksfrequentie. Maak er een gewoonte van eruit te kiezen in plaats van opnieuw te typen. Een woordenschat die afdrijft naar wol, wollen en zuiverwol filtert drie keer minder producten dan er bestaan, en die afdrijving ontdek je pas na tweehonderd productpagina's.