E-handelsapp

Organisere din butik

Tre redskaber giver dit katalog struktur, og de arbejder på hvert sit niveau. Kollektionerne er din butiks gange. Kollektionslisterne rydder op i de gange, så din menu ikke flyder over. Tags arbejder i baggrunden, som usynlige sekundære kollektioner.

Kapitel 1Kollektioner

Hvad de er

Kollektionerne giver din Shopping App struktur og organiserer dine produkter. Var din app en fysisk butik, ville kollektionerne være dens gange.

De afgør også, hvad din kunde kan nå. Et produkt, der ikke er knyttet til nogen kollektion, findes godt nok i din butik, og det sælger godt nok, men det nås gennem sin direkte adresse: gennem et link, du sender, gennem en søgning, gennem en widget på startskærmen. At knytte hvert produkt til mindst én kollektion er derfor den første refleks, endnu før du tænker på din organisering.

De er fleksible på to måder. Først i tid: en kollektion tilføjes, slettes, vises eller skjules med ét klik, hvilket gør midlertidige kollektioner mulige. Dernæst i organisering: de går på tværs af hinanden, og det samme produkt hører til flere kollektioner på én gang.

Den egenskab at gå på tværs er dét, der fortjener din opmærksomhed, når du opretter dem. Tag vores interiørbutik. En kunde, der leder efter en pyntegenstand, kan tænke ad tre forskellige linjer: rummet det gælder, typen af genstand, tendensen lige nu. Vi oprettede derfor ni kollektioner fordelt på de tre linjer:

Efter rum: Bedroom, Bathroom, Kitchen

Efter type genstand: Frames, Vases, Pillows

Efter tendens: Big in Japan, Keep it Slow, Words matter

Hvert produkt hører altså til flere kollektioner. Det har større chance for at blive set, og kunden har større chance for at finde det ad den vej, der falder vedkommende naturlig.

Oven på det kommer en Sales-kollektion, som samler nedsatte produkter. Den ændrer sig over tid og skjules uden for udsalgssæsonen.

Oprette dem

Gå til Products Collections. Klik på Create a collection.

Derefter indtaster du titlen, et illustrationsbillede og visningsrækkefølgen for produkterne. Titlen er begrænset til 32 tegn, hvilket er en nyttig begrænsning: navnet på en gang læses i en menu, på en telefonskærm, og korte navne vinder altid dér.

For visningsrækkefølgen er reglen altid den samme: spørg dig selv, hvad din kunde leder efter.

Der tilbydes seks automatiske rækkefølger, parvis: oprettelsesdato, nyeste til ældste eller omvendt, pris, laveste til højeste eller omvendt, og titel, A til Å eller Å til A. Den syvende form er manuel.

  • Dato sætter nyheder først. Det er det rigtige valg for en tøjbutik, der får varer ind regelmæssigt, eller for en boghandel, hvis kunder kommer igen på jagt efter ny læsning.
  • Stigende pris passer en dagligvarebutik, hvor kunden vil holde styr på sit budget. Faldende pris tjener snarere en kollektion i den høje ende, hvor den første vare sætter niveauet.
  • Alfabetisk rækkefølge er til kataloger, folk gennemser, mens de allerede kender navnet på det, de vil have: reservedele, tekniske referencer, vine.
  • Manuel form lader dig skubbe dét øverst, du helst vil sælge, og giver dig fuld kontrol over, hvordan din liste tager sig ud.

Den rækkefølge hører til kollektionen, ikke til butikken. Dine nyheder kan altså være sorteret efter dato, mens din månedlige udvælgelse bliver ved med at være ordnet i hånden. Det er dét, der gør den manuelle form holdbar: automatiske rækkefølger anvender sig selv på produkter, du tilføjer senere, den manuelle form beder dig komme tilbage til den, så gem den til de kollektioner, der fortjener det.

Glem ikke SEO. Dine kollektioner kan indekseres på samme måde som dine produktsider. Udfyld tagsene Title og Meta description, og tilpas adresserne med dine nøgleord.

Butikkens kollektionsliste. Øverst et søgefelt og, markeret med en cirkel, den grønne knap der opretter en. Nedenunder fylder hver kollektion en række: dens miniature med titlen lagt ind i, dens antal produkter, og en chip der siger, om den vises i appens menu.
En kollektion bærer sit eget omslag og sit eget antal, og et mærke siger, om menuen viser den.
Detaljerne for en kollektion. Til venstre dens produkter i visningsrækkefølge, hver med sin miniature, sin pris, sin lagerstatus, et håndtag til at flytte den og et kryds til at fjerne den. Til højre, markeret med en cirkel, søgeblokken: titel og beskrivelse til søgemaskiner, sidens adresse, og en forhåndsvisning af resultatet, som det vil se ud. Nederst til højre knappen, der åbner indstillingerne igen.
En kollektion har sin egen adresse og sit eget uddrag: det er en side for søgemaskiner, ikke bare en mappe.

Kapitel 2Kollektionslister

Hvad de bruges til

En kollektion når din apps menu på to måder, og det er dér, udseendet af din navigation afgøres.

Alene. Hver kollektion bærer sin blok med menusynlighed, hvor du sætter kryds ved den mulighed, der viser kollektionen i menuen, og vælger dens plads. Den bliver et punkt i sin egen ret, på lige fod med en sektion. En butik med tre gange viser dem sådan, og dens kunde overskuer hele kataloget med ét blik.

Grupperet. Sektionen Collection list samler flere af dem under ét enkelt punkt. Det nyttige pejlemærke: ud over fem gange vinder menuen ved at blive grupperet.

I e-handlens ordforråd er den anden måde skellet mellem kategori og underkategori, hvor listen bærer kategorien og kollektionerne underkategorierne. Kommer du fra en anden platform, er det her det greb, du kender under et andet navn.

Lad os vende tilbage til interiørbutikken og de ti kollektioner, den har. Uden gruppering ville appens menu flyde over.

Vi oprettede derfor tre lister, som tager de tre søgelinjer op, med tre kollektioner hver:

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

Sales-kollektionen bliver stående uden for enhver liste: vi vil have, at den skal være så direkte tilgængelig som muligt. Det er en beslutning, der er værd at have i baghovedet, for oprydningen må aldrig begrave det, der skal blive liggende i overfladen.

Menuen i en butik, hvor hver kollektion står alene: tolv punkter følger efter hinanden, fra startsiden til udsalget, ét pr. produktfamilie. Nederst i panelet to sociale netværk og indstillingerne.
Tolv punkter når hver kollektion står for sig selv, og menuen bliver hele kataloget.
Den samme menu med kollektionerne grupperet: fem punkter er nok, og hvert af dem åbner listen over sine kollektioner.
Det samme katalog bag fem punkter: grupperingen sker i menuen, ikke i kollektionerne.

Oprette dem

En kollektionsliste er en sektion i din Shopping App. Den tilføjes som enhver sektion, fra My App Structure. Klik på Add a section, og vælg derefter Collection list.

Giv din sektion en titel, knyt et billede til den, og bekræft.

For at lægge dine kollektioner i den er der to metoder:

  • klik på ikonet »+« for at vælge de kollektioner, der skal med
  • eller træk kollektionerne direkte ind under sektionen Collection list
Panelet til at tilføje en sektion, åbent på gruppen med kollektioner. En første flise, markeret med en cirkel, tilføjer en liste over kollektioner; de næste tilføjer en bestemt kollektion, hvor den der allerede er i appen bærer et grønt flueben; den sidste opretter en kollektion. Til venstre følger forhåndsvisningen af appen med ændringerne.
To forskellige felter: det første tilføjer en liste, de næste tilføjer én enkelt kollektion til menuen.
Sektionen, der lige er oprettet, stadig tom. I højrepanelet tilføjer det markerede link en kollektion til listen, og den vælger, det åbner, viser alle tilgængelige kollektioner. Til venstre opfordrer forhåndsvisningen dig til at tilføje den første.
Listen kommer tom: derefter vælger du, hvilke kollektioner der skal ind, og i hvilken rækkefølge.

Hvilket layout du skal vælge

Tre layouts, hvoraf det ene afhænger af din navigationsform.

Swipe Submenu lægger dine kollektioner i en undermenu, under appens hovednavigation. Det er kun tilgængeligt i navigationsformen »Swipe«, den hvor man bevæger sig fra sektion til sektion ved at stryge vandret hen over skærmen. Det er katalogets standardlayout, men det er bundet til navigationen: vælg det kun, hvis din app binder sig til den form, aldrig som en simpel nødløsning.

Classic viser dine gange i rækker, med en lille miniature og navnet med fed, flere pr. skærm. Det er katalogets holdning: det passer dig, når du har mange gange, når navnet betyder mere end billedet, og når det skal virke også uden stærke visuelle elementer. Det er også den naturlige nødløsning fra de to andre.

Visual er et udstillingsvindue: store kort i fuld bredde, gangens billede som baggrund og navnet lagt ovenpå. Vælg det, når gangene vælges med øjet, inden for mode, interiør eller mad.

Ét forbehold ved det sidste: det kræver gode visuelle elementer på alle dine kollektioner. Har nogle ingen, eller dårlige, så fald tilbage på Classic.

Valget træffes i My App Structure, på din sektions menu, Edit the design. Classic og Visual gælder enhver navigationsform. Er din app ikke i Swipe-form, gør back office Swipe Submenu grå og tilbyder dig et link til at ændre din menu.

Tre mockups side om side, én pr. layout: Swipe Submenu lægger kollektionerne i en undermenu under en sidenavigation; Classic stiller dem op i rækker, hver med sin runde miniature og sin titel; Visual stabler store billeder i fuld bredde.
Tre layouts til den samme liste: en undermenu i siden, rækker med miniature, eller billeder i fuld bredde.
Menuen i en tøjbutik: under punktet med tøj viser fem underpunkter kollektionerne, mens de øvrige punkter bliver på første niveau.
Swipe Submenu i brug: kollektionerne folder sig ud under ét punkt, resten af menuen forbliver flad.
En kollektionsliste i rækker: tre kollektioner, hver med sin runde miniature og sin titel.
Classic, hvor miniaturen forbliver lille og det er titlen, der bærer kollektionen.
Den samme liste som billeder: hver kollektion fylder hele bredden, dens titel sat midt på fotoet, og man scroller for at se de næste.
Visual, hvor billedet er argumentet og titlen ligger inde i det.

Skal du bruge det samme layout overalt

Nej, og det er en detalje, der kan betyde noget. Vi anbefaler at holde designet konsekvent gennem hele din app, men at variere layouts lader dig signalere et hierarki.

Tag en dagligvarebutik med et katalog, der er organiseret sådan:

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

Her indeholder nogle kollektionslister ikke kollektioner, men andre kollektionslister. Der er altså to niveauer at skille fra hinanden. At bruge et andet layout på niveau 1 og niveau 2 forhindrer, at kunden farer vild i træet.

To skærme fra den samme dagligvarebutik: til venstre en kollektionsliste i rækker; til højre kollektionen åbnet, dens underkollektioner vist som store billeder. To layouts til to niveauer af navigation.
To layouts i den samme butik: rækker til at vælge hylde, billeder når du først er inde.

Kapitel 3Tags

Hvad de er

Et tag er et nøgleord, der er knyttet til et produkt, som en markør. Du kan knytte flere til det samme produkt.

De tjener først og fremmest til at finde dine produkter igen i dit back office. Men deres største værdi ligger et andet sted: de styrer det, der vises på kundens side.

  • de filtrerer widgets med produktlister på din startskærm
  • de føder, sammen med kollektionerne, blokken med lignende produkter på dine produktsider
  • de føder resultaterne i din butiks søgesektion

Hvordan du vælger dem

Tænk på tags som sekundære kollektioner, usynlige i navigationen, men aktive i visningen. De bygges som regel på dine produkters egenskaber: farve, materiale, form.

Et eksempel. I en tøjbutik havner en brun uldsweater med rullekrave i kollektionslisten »Clothing«, kollektionen »Sweaters«. Den får tagsene »rullekrave«, »brun«, »uld«.

To anvendelser følger umiddelbart. For at vise alle dine ulddele på startskærmen filtrerer du ganske enkelt på tagget »uld«. Og sweateren kan dukke op som supplerende produkt under et par brune bukser.

Det er den grundlæggende forskel fra kollektionerne: kollektionen organiserer det, kunden gennemser, tagget organiserer det, du præsenterer for vedkommende.

Oprette dem

De tilføjes, når du opretter eller redigerer et produkt. I højremenuen på produktets redigeringsside indtaster du dine tags i feltet Tags. Udgiv for at bekræfte.

To skriveregler afgør, hvordan dit ordforråd har det med tiden. Et tag skrives som ét ord, uden mellemrum, og det er derfor, eksemplet ovenfor siger »rullekrave«. Og store og små bogstaver er ligegyldige, uld og Uld er det samme tag, så du behøver ikke at holde øje med dine store bogstaver.

Resten er disciplin, og back office giver dig værktøjet: over feltet åbner View all tags listen over dem, der allerede findes i din butik, med en søgning og en sortering efter alfabetisk rækkefølge eller efter, hvor ofte de bruges. Vænn dig til at plukke fra den frem for at skrive på ny. Et ordforråd, der glider ud i uld, ulden og rentuld, filtrerer tre gange færre produkter, end der findes, og det er en udglidning, du opdager efter to hundrede produktsider.