Ontwerp van betaalschermen in mobiele apps: maak abonnementkeuzes duidelijk
Een praktische gids voor het ontwerpen van betaalschermen in mobiele apps, over waarde, vergelijking van abonnementen, proefperiodes en verlengingsvoorwaarden, aankoopcontext en een controlelijst.
Een betaalscherm is een keuzemoment binnen een grotere productervaring. Iemand moet kunnen zien wat een betaald abonnement toevoegt, of het bij de behoeften past, wat er in rekening wordt gebracht en wat er gebeurt bij verdergaan zonder abonnement.
Het belangrijkste ontwerpwerk begint vóór de visuele vormgeving. Bepaal wat iemand net probeerde te doen, welk abonnementsvoordeel op dat moment relevant is en welke voorwaarden duidelijk moeten zijn voordat het aankoopvenster van het systeem verschijnt. Gebruik daarna een gerichte beoordeling om onduidelijkheden in aanbod, hiërarchie en uitwegen te vinden.
Belangrijkste inzichten
- Koppel het aanbod aan een concreet productvoordeel en de actie die ertoe leidde.
- Toon voor elk abonnement het werkelijke bedrag en de factureringsperiode, inclusief wat op een introductieaanbod volgt.
- Maak vergelijking van abonnementen, proefvoorwaarden, aankoop, herstellen, inloggen en sluiten begrijpelijk als één flow.
- Beoordeel het betaalscherm in zijn context en voor vertalingen, toegankelijkheid en terugkerende abonnees.
Begin bij het moment, niet bij het sjabloon
Een betaalscherm na het aantikken van een vergrendelde functie heeft een andere taak dan een uitnodiging voor een abonnement tijdens de onboarding. Benoem de functie en leg het specifieke voordeel uit dat beschikbaar wordt. Geef tijdens onboarding voldoende oriëntatie om te laten zien hoe een abonnement bij het product past. Een verzoek zonder context kan aanvoelen als een onderbreking.
Gebruik de omliggende flow om verwachtingen te scheppen. Als mensen eerst een deel van het product kunnen proberen, laat die ervaring dan de waarde tonen. Als toegang beperkt is, leg dan de beperking en het moment van vernieuwing uit. Apples Human Interface Guidelines adviseren relevante verzoeken; Google Play verwacht dat promoties duidelijk maken of de app zonder abonnement kan worden gebruikt.
Bestaande abonnees moeten mogelijk inloggen of aankopen herstellen. Iemand die nog niet klaar is voor een abonnement heeft misschien een duidelijke weg terug naar het product nodig. Ontwerp dit als echte routes en controleer of ze ergens bruikbaars uitkomen.
Maak het aanbod makkelijk vergelijkbaar
Geef elke optie een korte naam, looptijd en directe prijsvermelding. Het bedrag dat mensen werkelijk betalen moet makkelijk te vinden zijn; een kleiner omgerekend maandbedrag kan helpen bij vergelijken, maar mag het totale factuurbedrag niet vervangen. Als één abonnement standaard is geselecteerd, moet de selectie zichtbaar zijn en mag de reden niet alleen uit een vaag label zoals ‘Beste keuze’ blijken.
Een nuttige vergelijking laat zien wat tussen abonnementen verandert: toegangsniveau, inhoud, dienst, looptijd of een ander betekenisvol voordeel. Laat mensen het verschil niet afleiden uit kleur of een kortingspercentage. Als er maar één abonnement is, gebruik de ruimte dan om de waarde en voorwaarden uit te leggen.
Apples richtlijnen voor in-appaankopen vragen om duidelijke opties, prijs en looptijd en de totale factuurprijs. Google Play waarschuwt ervoor een langlopend abonnement vooral als maandbedrag te presenteren wanneer het volledige bedrag voor de hele periode verschuldigd is. Behandel het totale bedrag als hoofdinformatie en gebruik aanvullende vergelijkingsdetails waar die helpen.
| Onderdeel van de beoordeling | Duidelijke presentatie | Vraag om te stellen |
|---|---|---|
| Identiteit van het abonnement | Naam en looptijd onderscheiden elke optie | Kan iemand zonder gissen zien wat anders is? |
| Prijs | Totaalbedrag en factureringsperiode staan bij elkaar | Valt het nu te betalen bedrag meer op dan een omgerekend bedrag? |
| Introductieaanbod | Duur van het aanbod, eerste prijs en volgende prijs worden genoemd | Kan iemand uitleggen wat die na afloop van het aanbod betaalt? |
| Voordelen | De specifieke inbegrepen toegang is aan het abonnement gekoppeld | Komt elke belofte overeen met wat het product gedurende het abonnement levert? |
Leg proefperiodes en verlenging in gewone taal uit
Een gratis proefperiode is een tijdelijk aanbod dat kan overgaan in een betaald abonnement. Vermeld de duur, wanneer de eerste betaling wordt geïnd, het bedrag en de periode daarna en of het abonnement automatisch wordt verlengd. Plaats deze gegevens bij het betreffende abonnement en de actie.
Laat het knoplabel niet de hele uitleg dragen. Een label als ‘Gratis proefperiode starten’ beschrijft de directe stap, maar niet de latere kosten. Combineer het met korte, leesbare voorwaarden. Houd de tekst leesbaar op gebruikelijke schermformaten, laat haar meegroeien met grotere tekstinstellingen en plaats essentiële voorwaarden niet met laag contrast of in een indeling waarin ze na vertaling waarschijnlijk worden afgekapt.
Het aankoopvenster is onderdeel van de platformflow, geen vervanging voor een helder aanbodscherm. Apple zegt dat je het standaard bevestigingsvenster moet gebruiken en niet moet namaken. Maak keuze en voorwaarden duidelijk voordat je naar die systeeminterface gaat en geef daarna de resulterende abonnementsstatus correct weer in de app.
- Duur van de proefperiode en geschiktheid voor het getoonde aanbod zijn duidelijk.
- De datum of gebeurtenis waarop facturering begint, is begrijpelijk.
- Prijs na de proefperiode, factureringsperiode en automatische verlenging zijn zichtbaar vóór aankoop.
- Dezelfde voorwaarden blijven begrijpelijk in de taal en valuta van de gebruiker.
Beoordeel de volledige aankoopflow en de weg terug
Volg de hoofdactie naar de standaard aankoopbevestiging en bekijk daarna de statussen voor succes, annulering, wachten en mislukking. Controleer dat een geannuleerde aankoop niet als voltooid verschijnt. Bekijk wat er gebeurt als de app opnieuw wordt geopend, iemand op een ander apparaat inlogt en een bestaande abonnee het aanbod ziet.
Maak account- en herstelopties makkelijk vindbaar. Nodig bestaande abonnees niet uit dezelfde toegang opnieuw te kopen wanneer inloggen of herstellen de juiste volgende stap is. Apple adviseert bestaande abonnees een manier te bieden om in te loggen of aankopen te herstellen. Abonnementsbeheer hoort op een voorspelbare plek in account of instellingen; Apple benadrukt ook dat opzeggen eenvoudig moet zijn. Bij Google Play behoren informatie over abonnementen en een online opzegmogelijkheid tot de huidige platformvereisten. Volg de actuele implementatierichtlijnen van de winkel voor de betreffende betaalroute.
Vergelijk het betaalscherm met de rest van het product. Typografie, beeld en interactie moeten aanvoelen als één geheel. Gebruik de betaalschermbibliotheek van ScreenKits om te bestuderen hoe vastgelegde schermen prijs, voordelen, proefvoorwaarden en sluitknoppen ordenen, en vergelijk die observaties vervolgens met de volledige app-flow. De galerie is een ontwerpreferentie, geen bewijs dat een patroon effectief is of aan regels voldoet.
- Kan een terugkerende abonnee inloggen of toegang herstellen zonder opnieuw te beginnen?
- Is duidelijk hoe iemand het aanbod sluit of verdergaat met beschikbare gratis toegang?
- Leggen succes-, annulerings- en foutstatussen uit wat er gebeurde en wat de volgende stap is?
- Kunnen mensen abonnementsstatus en -beheer vinden in de accountinstellingen?
- Zijn vertalingen, tekstvergroting, contrast, schermlezers en tikzones beoordeeld?
Een praktische controlelijst voor het ontwerp van betaalschermen
Gebruik deze controlelijst tijdens een ontwerpbespreking, prototypebeoordeling of doorloop vóór publicatie. Lees elk punt vanuit het perspectief van iemand die het aanbod voor het eerst ziet en herhaal de beoordeling als terugkerende abonnee. Als een beoordelaar een vraag niet kan beantwoorden op basis van het scherm en de directe flow, verduidelijk dan de interface voordat je erop vertrouwt dat ondersteunende inhoud het gat vult.
| Controlepunt | Voorwaarde voor goedkeuring |
|---|---|
| Context | Het is duidelijk waarom dit aanbod verschijnt en welk voordeel relevant is. |
| Toegang | Het scherm vermeldt juist waarvoor betaling nodig is en wat zonder betaling beschikbaar blijft. |
| Vergelijking | Elke optie heeft een eigen naam, looptijd en totaalbedrag. |
| Proefperiode | Duur van het aanbod, begin van de facturering, volgende prijs en verlenging staan bij elkaar. |
| Actie | De hoofdknop beschrijft de volgende stap en verhult geen wezenlijke voorwaarden. |
| Alternatieven | Sluiten, inloggen en herstellen zijn waar relevant vindbaar. |
| Statussen | Geslaagde, geannuleerde en mislukte aankopen hebben elk een begrijpelijk resultaat. |
| Toegankelijkheidsbehoeften | Tekst blijft leesbaar bij vergroting en inhoud werkt met ondersteunende technologie. |
| Vertaling | Prijzen, valuta, datums en tekst passen in ondersteunde markten zonder te worden afgekapt. |
| Beheer | Een abonnee kan de abonnementsstatus en de route naar beheer in de app vinden. |
Veelgestelde vragen
Wat moet een betaalscherm in een mobiele app bevatten?
Leg relevante abonnementsvoordelen uit, onderscheid elk abonnement, toon het totale bedrag en de factureringsperiode, vermeld waar van toepassing de voorwaarden voor proefperiode en verlenging en bied nuttige routes voor bestaande abonnees en mensen die niet kopen.
Moet een betaalscherm bij een jaarabonnement een omgerekend maandbedrag tonen?
Dat kan helpen om looptijden te vergelijken, maar het moet ondergeschikt blijven aan het volledig te betalen bedrag en de factureringsperiode. Maak de werkelijke kosten onmiskenbaar duidelijk.
Waar moet een betaalscherm voor een abonnement verschijnen?
Toon het op een relevant moment, bijvoorbeeld wanneer iemand een betaalde functie kiest of een duidelijk uitgelegde limiet voor gratis gebruik bereikt. Leg uit waarom het aanbod verschijnt en behoud een duidelijke route naar eventuele ervaring zonder betaling.
