Design av betalväggar i mobilappar: gör prenumerationsval tydliga
En praktisk guide till design av betalväggar i mobilappar: värde, planjämförelse, villkor för provperiod och förnyelse, köpsammanhang och en checklista för granskning.
En betalvägg är ett val i en större produktupplevelse. Någon borde kunna berätta vad en betald plan lägger till, om den passar deras behov, vad de kommer att debiteras och vad som händer om de bestämmer sig för att fortsätta utan att prenumerera.
Det starkaste designarbetet börjar före visuell styling. Bestäm vad personen just har försökt göra, vilken prenumerationsförmån som är relevant vid det tillfället och vilka planvillkor som måste förstås innan systemköpsbladet dyker upp. Använd sedan en fokuserad granskning för att fånga oklarheter i erbjudandet, hierarkin och utrymningsvägarna.
Viktigaste lärdomarna
- Koppla erbjudandet till en konkret produktförmån och åtgärden som ledde till den.
- Visa det faktiska beloppet och faktureringsintervallet för varje plan, inklusive vad som följer på ett introduktionserbjudande.
- Håll planjämförelse, testvillkor, köp, återställning, inloggning och uppsägning begripligt som ett flöde.
- Granska betalväggen i sammanhang och över lokaliserade, tillgänglighets- och återkommande prenumeranter.
Börja med ögonblicket, inte mallen
En betalvägg som visas efter att någon tryckt på en låst funktion har ett annat jobb än en prenumerationsinbjudan under onboarding. Namnge funktionen och förklara den specifika fördelen som blir tillgänglig. Vid onboarding, ge tillräckligt med orientering för att visa hur ett abonnemang relaterar till produkten. En uppmaning utan sammanhang kan kännas som ett avbrott.
Använd det omgivande flödet för att ställa förväntningar. Om folk kan prova en del av produkten först, låt den erfarenheten visa värdet. Om åtkomsten är begränsad, förklara gränsen och när den återställs. Apples riktlinjer för mänskligt gränssnitt rekommenderar relevanta uppmaningar; Google Play förväntar sig att kampanjer ska klargöra om appen kan användas utan att prenumerera.
Personer som redan prenumererar kan behöva logga in eller återställa. Någon som inte är redo kan behöva en tydlig väg tillbaka till produkten. Designa dessa som riktiga vägar och kontrollera att de leder någonstans användbart.
Gör erbjudandet enkelt att jämföra
Ge varje alternativ ett kort namn, en varaktighet och en direkt prisuppgift. Det belopp som folk faktiskt kommer att faktureras bör vara lätt att hitta; en mindre ekvivalent per månad kan hjälpa till att jämföra planer, men bör inte ersätta det totala fakturerade beloppet. Om en plan är vald som standard bör valet vara synligt och motiveringen bör inte bero på ett vagt märke som Bästa värde.
En användbar jämförelse säger vad som ändras mellan planerna: åtkomstnivå, innehåll, tjänst, varaktighet eller annan meningsfull förmån. Undvik att få folk att sluta sig till skillnaden från färg eller en rabattprocent. Om det finns en plan, använd utrymmet för att förklara dess värde och termer.
Apples köpvägledning i appen kräver tydliga alternativ, pris och varaktighet och det totala faktureringspriset. Google Play varnar för att presentera en långtidsprenumeration främst som en månatlig uppdelning när den faktiska debiteringen ska betalas för hela perioden. Behandla den totala avgiften som primär information och använd sedan sekundära jämförelsedetaljer där det är till hjälp.
| Granska området | Tydlig presentation | Fråga att ställa |
|---|---|---|
| Planera identitet | Namn och varaktighet skiljer varje alternativ åt | Kan någon säga vad som är annorlunda utan att gissa? |
| Pris | Total debitering och faktureringsintervall visas tillsammans | Är beloppet nu mer framträdande än en motsvarande uppdelning? |
| Introduktionserbjudande | Erbjudandets längd, startpris och nästa pris anges | Kan någon förklara vad de kommer att betala efter att erbjudandet upphör? |
| Fördelar | Specifik inkluderad åtkomst är knuten till planen | Matchar varje anspråk vad produkten levererar under hela prenumerationen? |
Förklara prövningar och förnyelse i klarspråk
En gratis provperiod är ett tidsbestämt erbjudande som kan leda till ett betalabonnemang. Ange dess varaktighet, när den första betalningen kommer att tas, beloppet och intervallet som följer och om planen förnyas automatiskt. Placera dessa detaljer nära den relevanta planen och åtgärden.
Låt inte en knappetikett bära hela förklaringen. En etikett som Starta gratis provperiod beskriver det omedelbara steget, men inte den senare debiteringen. Para ihop det med kortfattade, läsbara termer. Håll texten läsbar i vanliga skärmstorlekar, låt den växa med större textinställningar och undvik att placera viktiga termer i låg kontrast eller en layout som sannolikt kommer att trunkeras efter lokalisering.
Inköpsbladet är en del av plattformsflödet, inte en ersättning för en sammanhängande erbjudandeskärm. Apple säger att man ska använda standardbekräftelsebladet och inte imitera det. Gör valet och villkoren tydliga innan du lämnar över till det systemgränssnittet och reflektera sedan det resulterande prenumerationsläget korrekt i appen.
- Provperioden och kvalificeringen är tydliga för det visade erbjudandet.
- Datumet eller händelsen som börjar faktureringen är förståeligt.
- Priset efter testperioden, faktureringsperioden och automatisk förnyelse är synliga före köp.
- Samma termer förblir begripliga på användarens språk och valuta.
Se över hela köp- och returflödet
Följ den primära åtgärden i den inbyggda köpbekräftelsen och inspektera sedan framgång, avbokning, väntande och misslyckande. Bekräfta att ett annullerat köp inte ser avslutat ut. Kontrollera vad som händer när appen öppnas igen, när någon loggar in på en annan enhet och när en aktuell prenumerant når erbjudandet.
Gör konto- och återställningsalternativ lätta att hitta. Befintliga prenumeranter ska inte bjudas in att köpa samma åtkomst igen när inloggning eller återställning är nästa steg. Apple rekommenderar ett sätt för befintliga prenumeranter att logga in eller återställa köp. Prenumerationshantering hör hemma på ett förutsägbart konto eller inställningsplats; Apple betonar också att det är enkelt att avboka. På Google Play är prenumerationsupplysningar och en onlineuppsägningsmetod en del av plattformens nuvarande krav. Följ butikens nuvarande implementeringsvägledning för den relevanta faktureringsvägen.
Jämför betalväggen med produkten runt den. Typ, bildspråk och interaktion ska kännas integrerade. Använd ScreenKits betalväggsbibliotek för att studera hur infångade skärmar ordnar pris, förmåner, provspråk och utgångskontroller, och jämför sedan dessa observationer med hela appflödet. Galleriet är en designreferens, inte ett bevis på att ett mönster är effektivt eller följsamt.
- Kan en befintlig prenumerant logga in eller återställa åtkomst utan att börja om?
- Är det tydligt hur man avfärdar erbjudandet eller fortsätter med tillgänglig gratis tillgång?
- Förklarar köpframgång, annullering och feltillstånd vad som hände och vad man ska göra härnäst?
- Kan personer hitta prenumerationsstatus och hantering från kontoinställningarna?
- Har lokalisering, textskalning, kontrast, skärmläsare och pekobjekt granskats?
En praktisk checklista för granskning av betalväggdesign
Använd den här checklistan under en designkritik, prototypgranskning eller genomgång före lansering. Läs varje punkt från perspektivet att någon ser erbjudandet för första gången, upprepa sedan granskningen som en befintlig prenumerant. Om en granskare inte kan svara på en fråga från skärmen och dess omedelbara flöde, förtydliga gränssnittet innan du förlitar dig på supportinnehåll för att fylla luckan.
| Kontrollera | Godkänt skick |
|---|---|
| Sammanhang | Anledningen till att detta erbjudande dök upp och den relevanta fördelen är uppenbara. |
| Tillgång | Skärmen säger exakt vad som kräver betalning och vad som är tillgängligt utan det. |
| Jämförelse | Varje alternativ har ett distinkt namn, varaktighet och total kostnad. |
| Rättegång | Erbjudandets längd, faktureringsstart, uppföljningspris och förnyelse visas tillsammans. |
| Åtgärd | Huvudknappen beskriver nästa steg och skymmer inte materiella termer. |
| Alternativ | Åtgärder för avvisning, inloggning och återställning kan upptäckas där det är relevant. |
| stater | Inköpsframgång, annullering och misslyckande ger båda ett begripligt resultat. |
| Tillgångsbehov | Text förblir läsbar när den förstoras och innehållet fungerar med hjälpmedel. |
| Lokalisering | Priser, valuta, datum och texter passar marknader som stöds utan trunkering. |
| Ledning | En prenumerant kan hitta appens prenumerationsstatus och hanteringsväg. |
Vanliga frågor
Vad ska en mobilapps betalvägg innehålla?
Förklara de relevanta prenumerationsförmånerna, särskilj varje plan, visa det totala debiterings- och faktureringsintervallet, avslöja prov- och förnyelsevillkor när det är tillämpligt, och tillhandahåll användbara vägar för befintliga prenumeranter och personer som inte köper.
Bör en betalvägg visa en månatlig motsvarighet för en årlig plan?
Det kan hjälpa människor att jämföra varaktigheter, men det bör förbli sekundärt till hela det fakturerade beloppet och faktureringsintervallet. Gör den faktiska laddningen omisskännlig.
Var ska en prenumerationsbetalvägg visas?
Placera den på en relevant punkt, till exempel när någon väljer en betald funktion eller når en tydligt förklarad gräns för gratisanvändning. Förklara varför erbjudandet visas och bevara en tydlig väg till alla tillgängliga icke-betalda upplevelser.
