Kunden öppnar produktsidan från en betald ChatGPT-annons och vill se hur väskans dragkedja ser ut. Bilden finns i galleriet, men miniatyrerna är svåra att skilja åt. En svepning flyttar hela sidan. När kunden till sist förstorar bilden finns ingen tydlig väg tillbaka till produktvalet. I det här hypotetiska exemplet saknas inte fotografiet. Det är svårt att använda.
Ett mobilgalleri behöver låta kunden hitta en vy, undersöka en detalj och fortsätta med rätt produkt. Denna guide handlar om kontrollerna och tillstånden i den resan. Vilka fotografier som behövs och deras ordning behandlas i guiden till produktbildernas ordningsföljd. Utgå från att urvalet är genomtänkt och granska om kunden faktiskt kan använda det.
Börja i samma tillstånd som annonsbesökaren
OpenAI beskriver annonsens destination i Campaign Management. För produktannonser från flöden kommer bild och destinationsadress från den valda produkten enligt Product Feeds. Använd därför den verkliga destinationslänken när ni granskar mobilgalleriet.
Kontrollera vilket produktval som möter kunden. Anteckna variant, aktiv bild och sidans språk innan ni börjar trycka på kontrollerna. Ett galleri som öppnas med butikens standardfärg kan vara missvisande om annonslänken avser en annan färg. Behandla det som ett fel i resan som ska undersökas, inte som ett skäl att anta att kunden förstår skillnaden.
Skriv sedan ett konkret uppdrag för granskningen: ”Hitta detaljbilden på dragkedjan, förstora den och fortsätt med den ursprungligen valda väskan.” Uppdraget gör det lättare att upptäcka när galleriet tappar sammanhang. Att bara svepa runt bland bilderna kan missa just övergången tillbaka till köp.
Gör det tydligt att fler bilder finns
Visa en begriplig markering av aktiv bild och totalt antal, till exempel ”Bild 2 av 6”. En rad anonyma prickar kan komplettera men bör inte ensam förklara vad som finns att undersöka. Miniatyrbilder behöver gå att skilja från varandra och visa vilken bild som är vald.
Om flera miniatyrer ser nästan likadana ut kan korta namn hjälpa: ”Framsida”, ”Insida” och ”Dragkedja”. Namnen beskriver vyn, inte dess betydelse för köpbeslutet. Kunden ska kunna leta efter en viss detalj utan att först minnas varje fotografis nummer.
Gör föregående och nästa bild till synliga, begripliga kontroller. Svepning kan finnas som ett bekvämt alternativ. Låt ändå kunden byta bild utan att känna till en dold gest eller behöva träffa en mycket liten miniatyr. Kontrollernas tryckyta och avstånd ska prövas på den faktiska lilla skärmen.
Skilj bildbyte från sidans förflyttning
Prova att rulla sidan med fingret över bildytan, byta bild horisontellt och använda kontrollerna. Granskningen ska visa om den tänkta handlingen inträffar eller om galleriet tar över en annan rörelse. Pröva också bildens kanter, där fingret kan hamna nära andra kontroller.
Bestäm ett begripligt beteende vid första och sista bilden. Om galleriet börjar om ska kunden kunna förstå att nästa bild är den första igen. Om det stannar ska kontrollen visa det. Oavsett lösning bör bildräknare, aktiv miniatyr och huvudbild beskriva samma läge.
Undvik att låta bildserien byta automatiskt medan kunden läser en bildtext eller letar efter en detalj. Ett galleri som ändras utan en avsiktlig handling gör det svårare att granska den aktuella vyn. Rekommendationen här är att låta kunden styra undersökningen.
Förstora med en tydlig väg tillbaka
Gör förstoring till en synlig handling, exempelvis ”Förstora bild”. När den öppnas ska kunden fortfarande förstå vilken produkt och vy som visas. Behåll en relevant bildtext och en tydligt namngiven stängningsknapp. Lägg inte knappen så nära skärmkanten att den blir svår att nå.
Ge en begriplig möjlighet att återställa förstoringen efter att kunden har flyttat runt i bilden. Om nypgest används för zoom bör samma undersökning gå att göra med kontroller som inte kräver den gesten. Förstoringen ska hjälpa kunden se befintlig information; en suddig fil får inte framstå som en källa till detaljer den inte visar.
När kunden stänger ska rätt bild, variant och plats på sidan återfinnas. Testa även webbläsarens bakåtknapp och bestäm vilket beteende som är rimligt i just lösningen. En oväntad återgång till föregående webbplats kan avbryta produktbeslutet. Dokumentera sådana förflyttningar med stegen som orsakade dem.
Låt bildtext och variant följa med
En bildtext som bara syns under det stängda galleriet kan tappa sin förklaring i helskärmsläget. Behåll uppgifter som ändrar hur bilden ska förstås: att ett tillbehör säljs separat, att vyn visar en annan variant eller att måtten hör till ett särskilt utförande.
När kunden byter variant bör huvudbild, miniatyrer, bildtexter och bildräknare kontrolleras tillsammans. Bestäm vad som händer om den nya varianten saknar motsvarande detaljbild. Visa en tydligt identifierad tillgänglig vy eller förklara begränsningen. Återanvänd inte en annan variants bild så att den ser ut att bekräfta den valda produkten.
Måttbilder behöver dessutom läsbara värden och motsvarande text. Guiden till måttbilder beskriver själva underlaget. Mobilgranskningen kontrollerar att kunden kan öppna, läsa och lämna den bilden utan att förlora sitt val.
Behåll sammanhanget i fyra gallerilägen
- Översikt
Aktiv miniatyr, bildräknare och tydliga knappar visar var kunden är.
- Förstorad bild
Relevant bildtext, återställning och stängning följer med detaljvyn.
- Ny variant
Bildserie och texter uppdateras tillsammans eller förklarar en saknad vy.
- Tillbaka till köp
Rätt produktval och plats på sidan finns kvar när galleriet stängs.
Granska även det som inte laddar som tänkt
Prova galleriet när en bild laddar långsamt eller inte går att visa. Skilj väntan från ett fel, och låt kunden komma åt andra tillgängliga bilder. En tom bildruta behöver en förklaring och en rimlig nästa handling. Dölj inte produktvalet bakom en förstoring som saknar fungerande innehåll.
Se också om bildytans höjd ändras när olika fotografier kommer in. Om produktvalet eller köpknappen flyttas oväntat behöver orsaken undersökas. Den bredare guiden till stabil layout hjälper er beskriva sådana förflyttningar utan att blanda ihop dem med fel bildordning.
Använd en kort granskningsanteckning så att fynden går att återskapa:
| Anteckna | Användbar uppgift |
|---|---|
| Utgångsläge | Annonsadress, vald variant och aktiv bild |
| Avsedd handling | Detaljen som kunden försöker undersöka |
| Observerat resultat | Vad som ändrades, försvann eller blev onåbart |
| Slutkontroll | Om kunden kunde återvända till samma val |
Detta är observationer från er egen granskning, inte bevis för en förbättrad konvertering. En ändring går att bedöma när de ursprungliga stegen kan upprepas och kunden kan slutföra den avsedda handlingen.
Avsluta med ett sammanhängande prov på en liten skärm: öppna annonsdestinationen, hitta detaljen, förstora, återställ, stäng, byt en relevant variant och fortsätt mot varukorgen. Upprepa hela vägen med enbart tangentbord. Kontrollera att det går att använda galleriet, stänga förstorade vyer och fortsätta från en begriplig fokusposition. Kontrollera synligt fokus och begripliga namn på kontrollerna med stöd av W3C:s vägledning om tillgängliga bildkaruseller. Anteckna vilken handling som inte gick att slutföra och i vilket tillstånd det hände. Då blir nästa ändring konkret: kunden ska kunna undersöka produkten och sedan fortsätta sitt köpbeslut.
Källor och avgränsning
Granska hur kunden efter ett betalt ChatGPT-klick hittar, förstorar och byter produktbilder på en liten skärm samt återvänder till sitt produktval.
Arbetsmetoder och exempel är redaktionella förslag. Kontrollera aktuella plattformsvillkor och funktioner inför genomförandet.