Vorläufige UX-Richtlinien für alternative In-App-Abrechnungssysteme

Übersicht

Damit Nutzer einheitlich informiert werden und fundierte Entscheidungen treffen können, müssen Sie einen Bildschirm mit Informationen und einen separaten Bildschirm mit Abrechnungsmöglichkeiten anzeigen, wenn Sie ein alternatives In-App-Abrechnungssystem zu Google Play anbieten. Der Bildschirm mit Informationen muss jedem Nutzer nur beim ersten Kauf angezeigt werden. Der Bildschirm mit Abrechnungsmöglichkeiten sollte vor jedem Kauf angezeigt werden. Die nutzerorientierten Meldungen und UI-Spezifikationen für beide Bildschirme sollten gemäß den folgenden Richtlinien implementiert werden.

Informationen für Nutzer

Auf dem Informationsbildschirm können Nutzer den Kontext der Änderung nachvollziehen und erhalten weitere Informationen, die ihnen helfen, eine fundierte Entscheidung zu treffen.

Anzeigezeitpunkt

Der Bildschirm mit Informationen sollte Nutzern zu Beginn ihres ersten Kaufs angezeigt werden, nachdem Sie ein alternatives In-App-Abrechnungssystem hinzugefügt haben. Diese Mitteilung muss bei nachfolgenden Käufen desselben Nutzers nicht angezeigt werden. Zeigen Sie den Informationsbildschirm sofort an, nachdem ein Nutzer eine explizite Aktion ausgeführt hat, um einen Kauf zu starten.

Wann soll der Preis angezeigt werden?

Der Kaufpreis muss für Nutzer sichtbar und deutlich erkennbar sein, bevor ihnen entweder der Informationsbildschirm oder der Bildschirm mit den Abrechnungsoptionen angezeigt wird.

Anzeigen

Der Informationsbildschirm sollte in einer modalen Ansicht am unteren Rand angezeigt werden. Ein modales Bottom Sheet ähnelt einem modalen Dialogfeld, das vom unteren Bildschirmrand nach oben animiert wird und unten fixiert bleibt. Es befindet sich über allen UI-Elementen auf dem zugrunde liegenden Bildschirm. Der zugrunde liegende Bildschirm wird hinter einem dunklen Scrim verdeckt, um anzuzeigen, dass er nicht auf Nutzerinteraktionen reagiert.

Weitere Informationen zum Design und zur Implementierung von modalen Bottom Sheets finden Sie in Google Material Design.

Nutzeraktionen

Das Bottom Sheet sollte ausgelöst werden, wenn ein Nutzer in Ihrer App auf eine Schaltfläche oder ein anderes UI-Element tippt, das einen Kauf initiiert. Der Nutzer hat auf dem Informationsbildschirm drei mögliche Aktionen:

Weiter

Wenn Sie auf die Schaltfläche „Weiter“ tippen, wird der Informationsbildschirm geschlossen und der Bildschirm für die Abrechnungsauswahl wird geöffnet.

Weitere Informationen

Wenn Sie auf die Schaltfläche „Weitere Informationen“ tippen, wird ein Google-Hilfeartikel in einem Webbrowser geöffnet.

Schließen

Wenn Nutzer die Ansicht am unteren Rand schließen und zum zugrunde liegenden Bildschirm zurückkehren möchten, haben sie folgende Möglichkeiten:

• Tippen außerhalb des Containers für die Ansicht am unteren Rand
• Tippen auf die „Zurück“-Taste des Android-Systems

Der Informationsbildschirm muss nicht noch einmal angezeigt werden, nachdem er geschlossen wurde oder der Nutzer auf „Weiter“ getippt hat.

Beispiel: Der Kaufpreis wird deutlich angezeigt, bevor der Nutzer den Kauf startet. Wenn Sie auf die Schaltfläche „Jetzt teilnehmen“ tippen, wird der Informationsbildschirm aufgerufen.

Designspezifikationen

Der Informationsbildschirm ist in drei Komponenten unterteilt: Titel, Nachricht und Schaltflächen. Alle drei Komponenten sind erforderlich und müssen den genauen Text und die UI-Elemente enthalten, die in diesen Richtlinien definiert sind. Auf diesem Bildschirm darf kein zusätzlicher Text oder Bilder enthalten sein. Auf anderen Bildschirmen können Sie jedoch zusätzlichen Text und Bilder einfügen.

1. Titel
2. Nachricht
3. Tasten
4. Tabellenblatt am unteren Rand
5. Hintergrundvorhang

Titel

Nachricht

Button 1

Button 2

Tabellenblatt am unteren Rand

Querformat

Im Querformat ist das Bottom Sheet breiter als im Hochformat, folgt aber ansonsten denselben Designvorgaben und Funktionen.

Bildschirm mit Abrechnungsmöglichkeiten

Auf dem Bildschirm für die Abrechnungsauswahl werden Nutzern zwei Optionen für den Abschluss ihres Kaufs angezeigt. Damit Nutzer eine fundierte Entscheidung treffen können, werden bei jedem Abrechnungssystem auch die verfügbaren Zahlungsarten angegeben. Sobald ein Nutzer sich entschieden hat, wird der Kauf über diesen Abrechnungsdienst abgewickelt.

Anzeige

Wenn der Nutzer den Informationsbildschirm bereits gesehen hat, sollte der Bildschirm zur Auswahl der Abrechnungsmethode sofort angezeigt werden, nachdem der Nutzer eine explizite Aktion zum Starten eines Kaufs ausgeführt hat.

Anzeigen

Der Bildschirm mit den Abrechnungsmöglichkeiten sollte in einer modalen Ansicht am unteren Rand angezeigt werden und denselben Spezifikationen wie der Bildschirm mit Informationen entsprechen.

Gleiche visuelle Darstellung

Die Buttons für den zusätzlichen In-App-Abrechnungsdienst und den Abrechnungsdienst von Google Play sollten gleichwertig dargestellt werden. Dies umfasst unter anderem einheitliche Button-Größen, Textgrößen und -stile, Tippziele sowie Symbolgrößen. Fügen Sie keinen zusätzlichen Text, keine zusätzlichen Bilder und keine zusätzlichen Stiländerungen hinzu, die nicht in diesen Richtlinien definiert sind.

Beispiel: Wenn ein Nutzer auf die Schaltfläche „Jetzt abonnieren“ tippt, wird der Bildschirm für die Abrechnungsauswahl aufgerufen.

Designspezifikationen

Der Bildschirm für die Abrechnungsauswahl besteht aus vier Komponenten: Titel, Beschreibung, Entwickler-Schaltfläche und Google Play-Schaltfläche. Alle Komponenten sollten verwendet werden und den genauen Text und die UI-Elemente enthalten, die in diesen Richtlinien definiert sind. Wir bitten Sie, auf diesem Bildschirm keinen zusätzlichen Text oder Bilder einzufügen. Auf anderen Bildschirmen, die Ihnen gehören, können Sie jedoch zusätzlichen Text und Bilder einfügen.

Visuelle Assets für Google Play und Zahlungssymbole sind über die unten angegebenen Links verfügbar.

Beispiel: Im Hochformat sollte sich die Ansicht am unteren Rand über die gesamte Bildschirmbreite erstrecken.

1. Titel
2. Beschreibung
3. Schaltfläche „Entwickler“
4. Google Play-Schaltfläche
5. Tabellenblatt am unteren Rand
6. Hintergrundvorhang

Titel

Beschreibung

Schaltfläche „Entwickler“

1. App-Symbol
2. App-Name
3. Symbole für Zahlungsmethoden

Symbole für Zahlungsmethoden

1. Maximale Anzahl von Symbolen für Zahlungsmethoden
2. Namen der Zahlungsmethoden anstelle von Symbolen

An die Bildschirmbreite anpassen

3. Breite von 360 dp
4. Breite von 480 dp

Schaltflächen-Container

App-Symbol

Titel

Zahlungsmethoden

Google Play-Schaltfläche

1. Symbol
2. Titel
3. Akzeptierte Zahlungsmethoden
4. Zusätzlicher Indikator

Schaltflächen-Container

App-Symbol

Titel

Zahlungsmethoden

Querformat

Beispiel: Im Querformat ist das Bottom Sheet breiter als im Hochformat, folgt aber ansonsten denselben Designvorgaben und bietet dieselbe Funktionalität.