Skärmdumpar i ASO: vad det är, designregler och hur de påverkar konverteringen för mobilprojekt

Vad är app-skärmdumpar i ASO

App-skärmdumpar är bilder av mobilappens skärmar som placeras i butikskortet och visar användaren hur appen ser ut och fungerar. Till skillnad från textbaserade ASO-element ger skärmdumpar visuella bevis på designkvaliteten och produktens funktionalitet.

Skärmdumpar är det mest inflytelserika elementet på appsidan ur konverteringssynpunkt. SplitMetrics (2024) forskning visade att användare tillbringar 80% av tiden på appsidan med att titta på skärmdumpar och endast 20% med att läsa textbeskrivningen. Detta gör utformningen av skärmdumpar avgörande för framgången av ASO-strategin.

Till skillnad från ikonen, som fångar uppmärksamheten i sökresultaten, fungerar skärmdumpar i övertygelsefasen: användaren har redan gått till appsidan och utvärderar om det är värt att installera. Kvalitativa skärmdumpar med tydliga bildtexter och logisk ordning ökar sannolikheten för installation avsevärt.

Skärmdumpers roll i konvertering

Skärmdumpers roll i konvertering bestäms av deras förmåga att snabbt och visuellt demonstrera appens viktigaste funktioner. Enligt App Radar (2025) har appar med professionellt utformade skärmdumpar 35% högre konvertering till installation än appar med enkla obearbetade skärmdumpar utan bildtexter och designelement.

De första 3 skärmdumparna ses av 90% av användarna, medan endast 30% når de sista skärmdumparna. Detta innebär att de viktigaste funktionerna och fördelarna bör presenteras i de första skärmdumparna i setet. Varje efterföljande skärmdump bör behålla intresset och stärka önskan att installera appen.

Krav på skärmdumpar i Google Play och App Store

Tekniska krav för skärmdumpar varierar mellan plattformar vad gäller storlek, antal och format. Att följa dessa krav är obligatoriskt för publicering av appen och korrekt visning av skärmdumpar på alla användares enheter.

Jämförelse av krav på skärmdumpar på de två plattformarna:

Tekniska specifikationer för Google Play

Google Play tillåter uppladdning av upp till 8 skärmdumpar för telefoner och upp till 8 för surfplattor. Rekommenderade storlekar: 1080×1920 px för telefoner (förhållande 16:9) och 1920×1080 px för surfplattor (förhållande 9:16). Format — PNG eller JPEG, minsta sida — 320 px.

Google Play stöder även skärmdumpar för Android TV, Wear OS och Chromebooks. För varje plattform krävs separata bilduppsättningar med motsvarande storlekar och proportioner. Felaktiga skärmdumpsstorlekar leder till beskärning eller sträckning av bilder på användarnas enheter.

Tekniska specifikationer för App Store

App Store kräver separata skärmdumpsuppsättningar för varje skärmstorlek: 6,5 tum (iPhone 14 Pro Max), 5,5 tum (iPhone 8 Plus) och 4,7 tum (iPhone SE). För iPad måste separata skärmdumpar laddas upp för 12,9 och 9,7 tum. Maximalt — 10 skärmdumpar per storlek.

Minsta upplösning för App Store — 1080×1920 px för porträttorientering och 1920×1080 px för landskapsorientering. Apple rekommenderar att ladda upp skärmdumpar i högsta tillgängliga upplösning för tydlig visning på alla enheter. Bilder med låg upplösning passerar moderering men ser av dålig kvalitet ut på Retina-skärmar.

Hur man utformar effektiva skärmdumpar

Utformning av skärmdumpar är processen att lägga till visuella element ovanpå den ursprungliga bilden av app-skärmen: bildtexter, pilar, enhetsramar, bakgrunder och färgaccents. Professionellt utformade skärmdumpar är betydligt effektivare än obearbetade.

Visuell hierarki

Visuell hierarki för skärmdumpen bör styra användarens blick från det viktigaste elementet till det sekundära. Huvudelementet — skärmdumpen av appens gränssnitt — bör uppta 60–70% av bildytan, det återstående utrymmet ägnas åt bildtexten som förklarar funktionen på skärmen.

Enhetsramen (telefonhöljet runt skärmdumpen) ökar användarens förtroende och gör bilden mer realistisk. StoreMaven (2024) forskning visade att skärmdumpar med enhetsram får 12% mer engagemang än skärmdumpar utan ram. Ramen bör exakt motsvara formen på målplattformens enhet.

Text och bildtexter

Text på skärmdumpen bör vara kort — inte mer än 5–7 ord per skärmdump. Teckensnitt — stort, kontrastrikt, utan seriffer. Texten bör beskriva användarens fördel, inte bara namnge funktionen. Till exempel: „Följ framsteg i realtid" istället för „Statistikskärm".

För App Store måste texten på skärmdumpar lokaliseras för varje region. Apple tillåter text på skärmdumpar, men den måste överensstämma med appens funktionalitet och inte vilseleda användaren. Google Play rekommenderar också lokalisering av text på skärmdumpar för varje målmarknad.

Färgscheman

Färgschemat för utformning av skärmdumpar bör överensstämma med appens varumärke och vara kontrastrikt i förhållande till skärminnehållet. Det rekommenderas att använda 1–2 accentfärger för bildtexter och bakgrund för att inte överbelasta bilden. Bakgrundsfärgen bör ge tillräcklig kontrast för textens läsbarhet.

Exempel på att styla skärmdumpar med CSS-liknande parametrar för att generera bilder:

class ScreenshotTemplate:
    def __init__(self, app_color: str):
        self.frame = "device_frame.png"
        self.font_size = 32
        self.text_color = "#FFFFFF"
        self.bg_color = app_color

    def render(self, screenshot: str, caption: str):
        layout = self._build_layout(screenshot)
        layout.add_text(caption, self.font_size, self.text_color)
        return layout.to_image()

Denna klass definierar mallen för skärmdumpsutformning med konfigurerbara parametrar: varumärkesfärg, teckenstorlek, text- och bakgrundsfärg. Användning av programmatisk generering av skärmdumpar gör det möjligt att snabbt skapa uppsättningar för olika plattformar och lokaliseringar utan att manuellt utforma varje bild.

Ordning av skärmdumpar och storytelling

Ordningen av skärmdumpar är en sekvens av bilder som berättar en historia om appen och leder användaren från första intresse till installationsbeslut. Visuell storytelling genom skärmdumpar är betydligt effektivare än enkel uppräkning av funktioner.

Struktur för skärmdumpsuppsättningen

Den första skärmdumpen är viktigast, eftersom den visas i sökresultaten bredvid ikonen och appens namn. Den bör visa appens huvudskärm eller den mest imponerande funktionen. Den andra och tredje skärmdumpen avslöjar viktiga funktioner och skapar förståelse för appens värde hos användaren.

Den fjärde och femte skärmdumpen visar ytterligare funktioner som skiljer appen från konkurrenterna. Den sjätte och sjunde skärmdumpen kan visa premiumfunktioner eller unika möjligheter. Den sista skärmdumpen innehåller ofta en uppmaning till installation eller socialt bevis i form av betyg och antal användare.

Storytelling genom sekvens

Sekvensen av skärmdumpar bör berätta en historia: problem → lösning → resultat. Den första skärmdumpen visar användarens problem eller behov, den andra och tredje — hur appen löser detta problem, den fjärde — vilket resultat användaren får. Detta tillvägagångssätt ökar konverteringen med 15–20% enligt AppTweak.

Exempel på en effektiv sekvens för en fitnessapp: skärmdump med hälsning och träningsplan → löpningsspårningsskärm → månatlig framstegsstatistik → skärm med prestationer och belöningar. Varje efterföljande skärmdump stärker användarens önskan att uppnå samma resultat.

A/B-testning av skärmdumpar

A/B-testning av skärmdumpar gör det möjligt att avgöra vilka bilder och i vilken ordning som mest effektivt omvandlar besökare till installation. Google Play Console erbjuder funktionalitet för A/B-experiment för skärmdumpar, inklusive möjlighet att testa olika ordningar och bilduppsättningar.

Metrik och varaktighet

Huvudmetriken för testning av skärmdumpar är CVR (konverteringsgrad) för varje variant. Ytterligare metrik inkluderar sidvisningstid, procentandel scrollning till en viss skärmdump och klick på varje bild.

För statistisk signifikans krävs minst 7–14 dagars testning och 10 000–15 000 visningar per variant. Skärmdumpar är känsliga för säsongsvariationer: under semesterperioder kan användare reagera annorlunda på visuella element än under vanliga dagar, vilket måste beaktas vid planering av experimentet.

Vad man ska testa på skärmdumpar

Det rekommenderas att testa ett element i taget: ordningen på skärmdumpar, färgschemat för designen, bildtexternas text, närvaro eller frånvaro av enhetsram. Att testa flera förändringar samtidigt gör det omöjligt att avgöra vilken förändring som påverkade resultatet. Börja med ordningen på skärmdumpar — detta är den enklaste förändringen som ofta ger störst effekt.

Exempel på A/B-test: variant A — första skärmdumpen med appens huvudskärm och bildtext om nyckelfunktionen; variant B — första skärmdumpen med registreringsskärmen och bildtext om gratis åtkomst. Efter 14 dagars testning visade variant B 22% fler installationer, eftersom användare uppskattar information om gratis åtkomst vid första anblicken.

Verktyg för att skapa skärmdumpar

Bland verktygen för att skapa utformade skärmdumpar utmärker sig StoreMaven, AppLaunchpad och Screenshot Studio. StoreMaven erbjuder A/B-testning av skärmdumpar med integration i Google Play Console. AppLaunchpad automatiserar generering av lokaliserade skärmdumpar för olika marknader. Screenshot Studio erbjuder färdiga mallar för enhetsramar och färgscheman.

För automatisering av processen kan ett kommandoradsverktyg baserat på Node.js användas för massgenerering av skärmdumpar:

const config = {
  screenshots: ["main.png", "features.png", "stats.png"],
  captions: ["Huvudskärm", "Alla funktioner", "Din statistik"],
  deviceFrame: "iphone14",
  primaryColor: "#6200EE"
};

async function generateScreenshots(config) {
  for (const [i, src] of config.screenshots.entries()) {
    const output = await renderScreenshot({
      source: src,
      caption: config.captions[i],
      frame: config.deviceFrame,
      color: config.primaryColor
    });
    await saveImage(output, "screenshot_" + (i + 1) + ".png");
  }
}

Detta skript automatiserar generering av skärmdumpsuppsättningen med enhetlig designstil och bildtexter. Integrering av ett sådant verktyg i CI/CD-pipelinen gör det möjligt att vid varje appuppdatering automatiskt skapa aktuella skärmdumpar för alla målplattformar och lokaliseringar.

Lokalisering av skärmdumpar för olika marknader

Lokalisering av skärmdumpar är anpassning av text på bilderna för varje målmarknad. Användare i olika länder reagerar olika på färger, symboler och visuella bilder. Localiserade skärmdumpar är betydligt effektivare än universella.

Text och språk

Text på skärmdumpar bör översättas till målmarknadens språk. App Store och Google Play rankar appar högre om skärmdumpar är localiserade för användarens språk. Enligt App Radar (2025) ökar lokalisering av skärmdumpar konverteringen med 15–25% för varje ytterligare språk.

Kulturell anpassning

Kulturella särdrag påverkar uppfattningen av färger och symboler på skärmdumpar. Färgen röd associeras med fara i västländer men med tur i Kina. Bilder på människor bör överensstämma med den etniska sammansättningen på målmarknaden. Dessa faktorer måste beaktas vid lokalisering av visuella element.

App Store stöder separata skärmdumpsuppsättningar för varje region, vilket möjliggör fullständig anpassning av den visuella designen till varje marknad. Google Play tillåter också uppladdning av localiserade skärmdumpar via utvecklarkonsolen.