User Experience Design
Das Onboarding zählt zu den wichtigsten Nutzererfahrungen in deiner App. Mit einer hervorragenden Onboarding-Erfahrung kannst du Conversion Rates von über 90 % erzielen sowie Nutzer dazu bewegen, deiner App mehr Aufmerksamkeit zu schenken, was sich wiederum positiv auf deinen Gewinn auswirkt.
Mit Facebook Login können sich Nutzer schnell und einfach bei deiner App anmelden und erhalten eine persönlichere und gehaltvollere Erfahrung. In diesem Dokument findest du Tipps und Anregungen für eine bessere Nutzererfahrung mit Facebook Login.
1. Zeige Nutzern, was deine App bietet, bevor du sie zur Anmeldung aufforderst
Wenn du dir nicht sicher bist, an welchem Punkt du Nutzer dazu auffordern möchtest, sich anzumelden, stell dir selbst die Frage, wann die Nutzer die Vorteile deiner App so weit zu schätzen wissen, dass sie dir ihre persönlichen Daten anvertrauen.
Dieser Prozess beginnt bereits vor dem Download der App. Du kannst jedoch die Entscheidung der Nutzer durch das Design deiner App stark beeinflussen.
Hier findest du ein paar Design-Ansätze, mit denen du mehr Nutzer dafür begeistern kannst, sich bei deiner App anzumelden:
- Stelle deutlich und prägnant dar, was deine App zu bieten hat
- Gewähre den Nutzern Einblick in die Inhalte, die sie nach der Anmeldung erwarten
- Stelle eine neue Nutzererfahrung bereit
- Ermögliche es Nutzern, deine App auch ohne Konto zu verwenden
Stelle deutlich und prägnant dar, was deine App zu bieten hat
Stelle deutlich und prägnant dar, welche überzeugenden Vorteile deine App zu bieten hat. Möglicherweise ist es schon längere Zeit her, dass der Nutzer die App heruntergeladen oder darüber etwas im App Store gelesen hat.
Gewähre den Nutzern Einblick in die Inhalte, die sie nach der Anmeldung erwarten
Gewähre Nutzern einen Einblick in die verfügbaren Inhalte, bevor sie sich anmelden müssen, z. B. wie im Hintergrundbild dieses Beispiels. Das müssen keine detaillierten Einblicke sein – selbst durch die unscharfen Bilder der Pinnwand von Pinterest werden mehr Nutzer dazu bewegt, sich dort anzumelden.
Stelle eine neue Nutzererfahrung bereit
Wenn du Nutzer eingehender über deine App informieren willst, damit sie die beste Nutzererfahrung genießen können, füge über dem Login-Button eine mehrstufige Demo-Version ein. Somit können sich Nutzer überlegen, ob sie zuerst mehr über deine App erfahren oder sich gleich anmelden möchten.
Ermögliche es Nutzern, deine App zu verwenden, ohne dass sie sich anmelden müssen
Gib Personen die Möglichkeit, deine App auszuprobieren, bevor sie sich anmelden müssen. Viele E-Commerce-Apps wie Zulily fordern Kunden beispielsweise erst dann zur Anmeldung auf, wenn sie einen Kauf abschließen.
2. Vermeide unnötige Schritte
Indem du unnötige Schritte vermeidest, kannst du deine Conversion-Rate auf äußerst effektive Weise erhöhen.
Du solltest Nutzer zum Beispiel nicht auffordern, auf „Anmelden“ oder „Registrieren“ zu tippen, bevor du ihnen überhaupt den Facebook Login-Button zeigst. Dank Facebook Login ist dieser Schritt überflüssig. Nutzer müssen nicht darüber nachdenken, ob sie ein Konto bei deiner App haben oder nicht.
Nachdem sich ein Nutzer mit Facebook angemeldet hat, solltest du ihn außerdem nicht dazu auffordern, einen Benutzernamen oder ein Passwort festzulegen. Die Anmeldung mit Facebook ist deshalb so beliebt, weil sie schnell und einfach ist und man kein Passwort eingeben muss. Nachdem sich ein Nutzer mit Facebook angemeldet hat, wird er erst recht keine Lust mehr haben, einen Benutzernamen oder ein Passwort festzulegen.
3. Facebook Login-Button
Der Facebook Login-Button, der in unseren SDKs enthalten ist, kann einfach eingebunden werden und verfügt über integrierte Informationen, die ein einheitliches Design und eine gleichbleibende Nutzererfahrung sicherstellen.
Zur Kontoerstellung und zur Anmeldung bei Facebook empfehlen wir je nach Kontext die Beschriftung „Weiter mit Facebook“ oder „Anmelden mit Facebook“.
Zulässige Nutzung von „Anmelden mit Facebook“
Zulässige Nutzung von „Weiter mit Facebook“
Zulässige Nutzung von „Fortfahren als [Name]“
Die oben genannten Designs für die Anmeldung werden empfohlen und von unseren Prüfern genehmigt. Wenn du jedoch eine Version speziell für deine Anforderungen benötigst, solltest du die nachstehenden Richtlinien berücksichtigen.
Logo
Für einen hohen Wiedererkennungswert und zur Schaffung von Vertrauen solltest du stets das genehmigte „f“-Logo aus dem Brand Resource Center von Facebook verwenden.
Im Design des Login-Buttons sollte das „f“ vor dem Call to Action stehen. Verwende es nicht als Teil des Call to Action, etwa „Anmelden mit [f'-Logo]“.
Farbe
Wenn etwas farbig ist, kann es schnell von Nutzern erfasst werden. Je schneller ein Nutzer deinen Button erkennt und seinen Zweck erfasst, desto schneller kann er ihn antippen und desto nahtloser ist die Nutzererfahrung.
Die Farben für den Button sind Weiß und Facebook-Blau: 5890FF. Weltweit wird im Zusammenhang mit Facebook Login häufig vom „blauen Button“ gesprochen. Solltest du Facebook-Blau nicht verwenden können, dann verwende Schwarzweiß.
FARBWERTE FÜR FACEBOOK-BLAU
- CMYK Coated: 83, 52, 00, 00
- CMYK Uncoated: 77, 36, 00, 00
- PMS 2727C
- PMS 2382U
- Hexadezimalwert #1877F2
- R = 24 G = 119 B = 242
Text
Wir empfehlen je nach Kontext die Beschriftung „Weiter mit Facebook“ oder „Anmelden mit Facebook“. Wenn du das „f“-Logo mit einem Call to Action verwendest, nutze die offizielle Version, die im Facebook Brand Resource Center heruntergeladen werden kann.
Füge den Call to Action-Text in den Login-Button ein. Er sollte sich nicht außerhalb des Buttons befinden.
Lege für deine App die Schriftart, den Schriftschnitt und das Kerning fest, die am besten zu ihr passen, aber optimiere diese Merkmale im Interesse der Lesbarkeit.
Platzierung
Dein Login-Button sollte schnellstmöglich erkannt werden und leicht antippbar sein. Platziere ihn auf einem Mobilgerät dort, wo er einfach mit dem Daumen zu erreichen ist, und gestalte ihn groß genug, dass Nutzer ihn problemlos antippen können. Das hört sich simpel an, spiegelt aber die Realität wider, denn große Buttons führen zu mehr Conversions als kleine.
Das „f“-Logo steht dir in verschiedenen Größen für unterschiedlich skalierte Buttons zur Verfügung. Die Proportionen und der Typografiestil müssen jedoch immer gleich bleiben.
Richtig und Falsch
RICHTIG: Verwende das genehmigte „f“-Logo aus dem Facebook Brand Resource Center und befolge die zugehörigen Richtlinien.
RICHTIG: Verwende im Login-Button je nach Kontext die Beschriftung „Weiter mit Facebook“ oder „Anmelden mit Facebook“. Der Text muss sich innerhalb des Button-Designs befinden.
FALSCH: Du darfst das „f“-Logo in keiner Weise verändern, zum Beispiel durch eine andere Gestaltung, Größe, Farbgebung oder sonstige eigene Abwandlung. Falls du aufgrund von technischen Einschränkungen nicht die richtige Farbe verwenden kannst, nutze Schwarzweiß.
FALSCH: Verwende das „f“-Logo nicht auf einem Button ohne geeigneten Call to Action, vorzugsweise „Weiter mit Facebook“ oder „Anmelden mit Facebook“.
FALSCH Du darfst den Text des Call to Action (Beispiel: Weiter mit Facebook) nicht außerhalb des Login-Buttons platzieren.
4. Berechtigungen
Fordere Berechtigungen nur dann an, wenn du sie auch wirklich benötigst
Je weniger Berechtigungen du anforderst, desto wohler fühlen sich Menschen dabei, sie dir zu gewähren. Wir konnten feststellen, dass weniger angeforderte Berechtigungen üblicherweise zu mehr Conversions führen.
Du hast immer die Möglichkeit, zu einem späteren Zeitpunkt weitere Berechtigungen anzufordern, nachdem die Nutzer deine App testen konnten.
Wenn du weniger Berechtigungen anforderst, hat das aber noch einen weiteren Vorteil für dich: Du musst deine App dann eventuell nicht zum Login Review einreichen. Login Review ist nur dann erforderlich, wenn du außer public_profile und email noch weitere Berechtigungen anforderst.
Fordere die Berechtigungen im richtigen Kontext an und erkläre dem Nutzer den Zweck
Nutzer akzeptieren Berechtigungsanforderungen eher, wenn ihnen ganz genau erklärt wird, warum die App diese Informationen benötigt, um ihnen eine bessere Nutzererfahrung zu bieten. Du solltest Berechtigungen also anfordern, wenn ein Nutzer eine Handlung in deiner App durchführen möchte, für die diese bestimmte Berechtigung erforderlich ist.
Die Facebook-App verlangt beispielsweise nur dann den Zugriff auf Ortungsdienste, wenn Personen explizit auf den Standort-Button beim Aktualisieren ihres Status tippen.
5. Biete eine Möglichkeit zum Abmelden
Nachdem sich eine Person angemeldet hat, sollte sie sich auch wieder abmelden und ihr Konto trennen oder komplett löschen können. Das ist nicht nur anständig, sondern wird auch durch unsereEntwicklerrichtlinien für Login verlangt.
Bei der Dating-App Tinder zum Beispiel können Nutzer ihre Profilkarten verbergen, um zu verhindern, dass andere Personen sie finden können. Sie können sich außerdem abmelden oder ihr Konto komplett löschen.
6. Teste die Anmeldung und miss die Ergebnisse
Selbst bei den besten Entwicklern ist das erste Design des Login-Vorgangs nicht perfekt. Die beste Erfahrung bei der Anmeldung erreicht man zumeist nur durch überlegtes Design, umfangreiche Tests und wiederholte Überarbeitungen.
Bevor du deine App veröffentlichst, solltest du qualitative Nutzungstests durchführen, um zu sehen, wie die Nutzer auf deinen Login-Vorgang reagieren. Diese Tests müssen hierfür keine formalen Vorgaben erfüllen, sondern es muss sichergestellt sein, dass die Testnutzer das Nutzererlebnis durchlaufen können.
Nutze neben qualitativen Tests auch Analysen, um herauszufinden, ob Nutzer den Login-Vorgang abschließen und wie hoch die allgemeinen Conversion Rates sind. Apps, die die Best Practices befolgen, können Conversion Rates von mehr als 90 % erreichen.