Test de mobiele ervaring

Onze eerste tip is om gebruik te maken van de mobiele weergave van Brand Store Builder. Je kunt eenvoudig een mobiele of desktopweergave van je store maken en er wordt automatisch een versie van je store gemaakt voor het andere apparaat. Wanneer je je store bouwt, kun je schakelen tussen apparaatweergaven om de voortgang van je ontwerp in realtime te bekijken en kun je assets toevoegen die voor elk apparaat zijn geoptimaliseerd.

Voorbeelden van desktopweergave versus mobiele weergave

Het testen van je Store op een echt mobiel apparaat is de meest effectieve manier om fouten te ontdekken die van invloed kunnen zijn op de mobiele ervaring van je shoppers. Laat je desktop of laptopcomputer even met rust en bekijk je store op een telefoon of tablet. Tik op pagina's en tegels. Kun je eenvoudig door je store navigeren? Zijn de teksten en afbeeldingen gemakkelijk te lezen?

Je store-ervaring testen:

1. Klik op Voorbeeld > Voorbeeld delen in Brand Store Builder.


Voorbeeld van het delen van de voorbeeldfunctionaliteit in Brand Store Builder

2. Kopieer de link naar voorbeeld
3. Plak deze link naar voorbeeld in een e-mail of ergens waar je vanaf je telefoon toegang hebt (Tip: Voeg het wachtwoord van de link naar voorbeeld toe op een aparte regel, zodat je het later gemakkelijker kunt kopiëren en invoegen).
4. Navigeer door je store op je mobiele apparaat alsof je een shopper bent en maak notities over wat er verbeterd moet worden. Is het gemakkelijk om te navigeren? Kun je de producten of informatie vinden die je zoekt? Hoe zien je afbeeldingen eruit op een mobiel apparaat?

Zorg ervoor dat je afbeeldingen niet worden bijgesneden op mobiele apparaten

Vanwege het verschil in schermgrootte tussen een desktopmonitor en een telefoonscherm, is een tegelontwerp soms wel leesbaar op een desktopmonitor maar niet op een mobiel apparaat. Hoewel in Brand Stores afbeeldingen automatisch worden aangepast voor verschillende schermgrootten, betekent dit niet dat elk element leesbaar is op mobiele apparaten, vooral als de tekst er al klein uitziet op een desktopmonitor.

In deze gevallen raden we aan om een aparte afbeelding voor mobiele apparaten te uploaden waarbij de lettergrootte en lay-out zijn geoptimaliseerd voor mobiele apparaten. Dit kan worden gedaan door te schakelen naar de mobiele versie en de afbeelding voor mobiele apparaten in het rechterpaneel van de Brand Store Builder te uploaden, zoals weergegeven in onderstaand voorbeeld:

Voorbeeld van de gebruikersinterface van de Brand Store Builder voor het bewerken van afbeeldingen voor mobiele apparaten

Belangrijk om rekening mee te houden is dat de optie om een aparte afbeelding voor mobiele apparaten te uploaden alleen beschikbaar is voor afbeeldingstegels en voor de koptekstafbeelding. Deze optie is niet beschikbaar voor andere widgets met afbeeldingen met tekst of winkelbare afbeeldingen.

Zorg ervoor dat de content in de juiste volgorde wordt weergegeven

Schermen van mobiele apparaten zijn smaller en ontworpen voor sneller scrollen, wat betekent dat de volgorde en opmaak van de content niet exact hetzelfde zijn op een desktop en mobiel apparaat. Brand Stores voor mobiele apparaten gebruiken een rij van links naar rechts voor de volgorde van de content, of van rechts naar links wanneer Arabisch is ingesteld als voorkeurstaal. Zie hieronder voor een voorbeeld:

Voorbeeld van content die wordt weergegeven in de desktopweergave versus in de mobiele weergave

Controleer je store op een mobiel apparaat om te zien of de content in de juiste volgorde wordt weergegeven.

Je koptekstafbeelding optimaliseren

Je kunt een aparte koptekstafbeelding uploaden voor mobiel. Belangrijk om rekening mee te houden is echter dat, in tegenstelling tot een afbeeldingstegel, het niet mogelijk is om de hoogte van deze afbeelding te wijzigen. Voor zowel mobiele apparaten als voor desktops moeten dezelfde afmetingen worden gebruikt. Dit betekent dat alle grafische elementen in de koptekst, inclusief tekst, verkleind worden door de dynamische indeling van de Brand Store op mobiele apparaten.

Houd daarom rekening met het volgende voor de koptekstafbeelding voor mobiele apparaten:

• Probeer het aantal producten in een koptekst te beperken tot drie. Hoe meer producten je in de koptekst weergeeft, hoe rommeliger het eruit zal zien op een mobiel apparaat.
• De tekst in de koptekst moet minder dan 30 tekens bevatten, zodat je de grootte van de tekst kunt aanpassen zodat deze leesbaar is op mobiele apparaten zonder de koptekst te overweldigen. Hiervoor raden we een minimale lettergrootte aan van 90pt en het standaard lettertype Arial of een gelijkwaardig lettertype.

Alternatieven bieden voor menunavigatie

Het navigatiemenu in een Brand Store wordt op desktops anders weergegeven dan op mobiele apparaten. Op een desktop zien kopers meerdere tabbladen langs de navigatiebalk. Op mobiele apparaten zien shoppers één vervolgkeuzemenu. Zie de afbeeldingen hieronder voor een vergelijking:

Voorbeeld van navigatiemenu's die worden weergegeven in de desktopweergave versus in de mobiele weergave

Dit is een belangrijke factor om rekening mee te houden bij het uitlichten van je belangrijkste categorieën of tabbladen in een Brand Store. Het is een goede strategie om deze bovenste pagina's in het menu te plaatsen, maar je kunt ook afbeeldings- of teksttegels gebruiken om door je store te navigeren. Door deze tegels boven aan je store toe te voegen, samen met een sterke call to action (CTA), kunnen shoppers je belangrijkste content vinden, zelfs als ze het vervolgkeuzemenu niet uitklappen.

Kies een effectieve CTA-plaatsing

Hoe lees je als lezer meestal? Je kunt van boven naar beneden lezen en scannen van links naar rechts of van rechts naar links, afhankelijk van je moedertaal. Dit in je achterhoofd houden kan je helpen bij het kiezen van een effectieve plaatsing voor je CTA-knop op een mobiel apparaat.

Houd rekening met het belang van elementen boven de vouw. Dit zijn de delen van de Brand Store-pagina die zichtbaar zijn voordat je naar beneden scrolt. Als een CTA onderaan een verticale tegel wordt geplaatst, is het onwaarschijnlijk dat deze boven de vouw wordt weergegeven, waardoor deze minder zichtbaar is voor klanten.

CTA's op mobiele apparaten moeten ook behoorlijk wat ruimte rondom de CTA hebben, of 'ademruimte', zodat het opvalt en klanten er sneller op klikken. Een beperkte ruimte voor een CTA kan ertoe leiden dat het samensmelt met andere tekst en zo de hiërarchie en zichtbaarheid verliest.

Bronnen

¹ Interne gegevens van Amazon, Wereldwijd, Brand Stores, januari tot maart 2024.