Entwerfen Sie eine bessere Homepage mit dem StoryBrand Framework

Homepages sind wie Schaufenster. Sie sollten dem Verbraucher eine Vorstellung davon vermitteln, was das Unternehmen tut, wer das Geschäft führt, und zumindest einen Hinweis auf die angebotenen Produkte und Dienstleistungen geben, unabhängig davon, ob es sich um tatsächliche Verkaufsartikel, Informationen oder Unterhaltung handelt.

Genau wie ein Schaufenster können Homepage-Designs Menschen entweder dazu verleiten, genauer hinzusehen, oder sie können die Aufmerksamkeit eines Besuchers verfehlen (oder schlimmer noch, ihn aktiv vertreiben). Die klare Vermittlung einer Markengeschichte ist eine Methode, die UX-Designer anwenden können, um die Leute auf der Website zu halten und genug Engagement zu zeigen, um über die Startseite hinaus zu erkunden (das StoryBrand-Framework bietet dafür eine gute Roadmap).

Was ist das Ziel einer Homepage?

Das Ziel einer Zielseite ist es, Besucher zu konvertieren, während das Ziel einer Homepage darin besteht, Besucher mit der Marke zu verbinden und Lösungen für ihre Probleme anzubieten. Wenn dies effektiv durchgeführt wird, kann ein Homepage-Besucher zu einem Kunden werden – möglicherweise zu einem Stammkunden.

Homepages haben sich in den letzten Jahrzehnten dank Analysen und den Marketing- und Designteams, die auf der Grundlage dieser Daten Leistungsverbesserungen vorgenommen haben, schnell verbessert.

Im Jahr 1993, als es nur 600 Websites gab, war die einzige Methode, den Verkehr einer Website zu messen, ein Serverprotokoll, das die Anzahl der Besucher zählte. Als nächstes kamen Zugriffszähler und schließlich umfassendere Analysesuiten, die Einblicke in Dinge wie einzelne Besucher, Seitenaufrufe und Absprungraten gaben.

Mithilfe dieser Analysedaten sind UX-Designer in der Lage, die Platzierung von Handlungsaufforderungen zu optimieren, die Website-Geschwindigkeit zu verbessern, A/B-Tests durchzuführen, Videos zu verwenden, um Besucher anzusprechen, hochwertige Bilder zu verwenden, um die Aufmerksamkeit der Menschen zu fesseln, und Messaging-Tools zur Verbesserung der Leistung einzubeziehen eine Hompage. Wird dies jedoch Loyalität und Vertrauen der Verbraucher garantieren?

Drei häufige Fallstricke beim Entwerfen von Homepages

Unternehmen – und damit auch Designer – stoßen beim Erstellen einer Homepage auf drei Hauptfallen:

1. Sie konzentrieren sich nicht auf die wichtigen Dinge. Sie erzählen den Menschen alles über die Eigenschaften ihrer Dienstleistung oder ihres Produkts. Die Leute kümmern sich nicht darum. Sie wollen wissen, dass das Unternehmen ihr Problem löst und ihr Leben verbessert.
2. Unternehmen kommunizieren ihre Botschaft nicht klar. Wie Tony Haile von Chartbeat sagt, hat eine Website weniger als 15 Sekunden, um die Aufmerksamkeit eines Besuchers zu gewinnen.
3. Sie haben ein schlechtes Produkt, das niemandes Problem löst. In diesem Fall kann ein Designer nicht viel für ein Unternehmen tun.

Was ist das StoryBrand-Framework?

Entgegen dem, was manche Unternehmen zu glauben scheinen, ist ein Logo nicht gleich einer Marke. Weit davon entfernt; Eine Marke ist ein Versprechen, hinter dem der Grund ihrer Existenz steht.

Menschen entscheiden sich sowohl aus rationalen als auch aus emotionalen Gründen für eine Marke. Eine starke Markenbotschaft kann Loyalität gegenüber der Marke selbst erzeugen und nicht nur gegenüber den einzelnen Produkten, die sie kreiert. Um dieses Ziel zu erreichen, ist eine klare und konsistente Botschaft unerlässlich. Was eine Marke von ihrer Konkurrenz unterscheidet, ist die Geschichte der Marke.

Storytelling wird von Unternehmern häufig eingesetzt, um Investoren in Pitches und in sozialen Netzwerken zu verführen. Unternehmen wie Apple verstehen und integrieren die Kraft des klaren, einfachen Geschichtenerzählens in alles, was sie tun. Sie wissen, dass es nicht um sie geht; es geht um ihre Kunden.

Das StoryBrand-Framework ist eine Storytelling-Formel, die von Donald Miller entwickelt wurde, um Unternehmen dabei zu helfen, ihre stärksten Botschaften einfach und klar zu kommunizieren. In seinem Buch Building a Story Brand stellt Miller fest: „Ihr Kunde sollte der Held der Geschichte sein, nicht Ihre Marke. Das ist das Geheimnis, das jedes phänomenal erfolgreiche Unternehmen versteht.“

So verwenden Sie StoryBrand mit einem Client

Ob es sich um ein kleines Unternehmen oder eine Multimillionen-Dollar-Marke handelt, der Kunde muss verstehen, dass es ihn Geld kostet, seine Kunden zu verwirren. Die Klärung ihrer Botschaft durch die StoryBrand-Formel wird, wie Miller es ausdrückt, „ihr Denken organisieren, ihren Marketingaufwand reduzieren, Verwirrung beseitigen, den Wettbewerb einschüchtern und ihr Geschäft schließlich wieder zum Wachsen bringen.“

Miller vergleicht den Aufbau einer StoryBrand mit dem Schreiben einer Geschichte für ein Drehbuch. Er bricht es auf sieben Handlungspunkte herunter.

Ein Charakter , der etwas will (die Person, die die Website nutzt), trifft auf ein Problem (ihr Bedürfnis), trifft dann auf einen Führer (das Unternehmen), der ihm einen Plan gibt (zeigt die nächsten Schritte an) und ihn zum Handeln aufruft (Call-to-Action-Button). was zu einer Erfolgsgeschichte führt (sie kaufen das Produkt) und ihnen hilft , Misserfolge zu vermeiden (Erinnerung daran, was passieren würde, wenn sie nicht kaufen).

Diese Struktur ist in fast jedem erfolgreichen Film wiederzuerkennen. Es kann auch für ein Unternehmen und seine Kunden gelten. Der nächste Schritt besteht darin, dass der Kunde seine Markengeschichte nach dieser Struktur schreibt:

1. Ein Charakter : Der Kunde ist immer der Held der Geschichte, nicht die Marke. Es liegt an UX-Designern, herauszufinden, was Kunden von der Marke erwarten, normalerweise durch UX-Forschung und Benutzertests. Sie müssen sich auf die Wünsche konzentrieren, die die Menschen antreiben, wie z. B. finanzielle Ressourcen schonen, Zeit sparen, soziale Netzwerke aufbauen oder Status gewinnen.
2. Hat ein Problem : Der Bösewicht im StoryBrand-Bogen ist das Problem des Charakters. Es ist nützlich, dieses Problem zu personifizieren und zu verstehen, dass die Produkte des Unternehmens wie Waffen sind, mit denen der Kunde es besiegen kann. Unternehmen neigen dazu, sich auf die Lösung externer Probleme zu konzentrieren, aber Kunden kaufen Lösungen für interne Probleme. Menschen haben drei Konfliktebenen:
   - Extern (die meisten Unternehmen versuchen, externe Probleme zu lösen)
   - Intern (wie Frustration, Einschüchterung, Unsicherheit)
   - Philosophisch (warum ist diese Geschichte wichtig?)
3. Und trifft einen Führer : Der Führer ist das Unternehmen oder die Marke. Kunden brauchen jemanden, der sich um das Problem kümmert. Ihre Wahrnehmung der Marke wird entscheidend für ihr Vertrauen sein. Zwei Dinge müssen kommuniziert werden:
   - Empathie (zeigen Sie Verständnis für den Schmerz, den der Kunde möglicherweise empfindet)
   - Autorität (es gibt dem Kunden das Vertrauen, dass die Marke ihm helfen kann)
4. Wer gibt ihnen einen Plan : Das Unternehmen zeigt dem Kunden, was er als nächstes tun muss. Kunden sind sich immer noch nicht sicher, ob sie kaufen sollen, bis ihnen ein einfacher Aktionsplan gezeigt wird. UX-Designer können den Kunden die genauen nächsten Schritte buchstabieren. Sie können auch etwaige Ängste des Kunden lindern, indem sie Bedenken im Zusammenhang mit dem Produkt oder der Dienstleistung ansprechen.
5. Und ruft sie zum Handeln auf : Wirksame Aufrufe zum Handeln erleichtern Käufe oder Anmeldungen.
6. Das hilft ihnen, Fehler zu vermeiden : Was steht für den Kunden auf dem Spiel? Was werden sie verlieren, wenn sie nicht von dieser Marke kaufen?
7. Und endet mit einem Erfolg : Sagen Sie Ihren Kunden, wie diese konkrete Aktion ihr Leben verändern kann. Zeigen Sie ihnen, wie ihr Leben nach dem Kauf des Produkts aussehen wird und wie sie sich mit diesem Vorsatz fühlen werden. Drei solide Möglichkeiten, wie Geschichtenerzähler eine Geschichte beenden, sind, der Figur zu erlauben:
   - Gewinnen Sie Macht oder Position
   - Finden Sie jemanden oder etwas, das sie ganz macht
   - Erleben Sie eine Form der Selbstverwirklichung, die sie auch ganz macht

So verwenden Sie das StoryBrand-Framework in einer Homepage

Auf einer Homepage sollte es nie um das Geschäft gehen. Es sollte um seinen potenziellen Kunden gehen.

Wie beim ersten Date sind Eindrücke wichtig und das Ziel ist es, Interesse zu wecken. UX-Designer müssen strategisch vorgehen, welche Inhalte enthalten sind und wie sie angeordnet sind. Wenn Sie dem im vorherigen Abschnitt erläuterten Framework folgen, können Designer sicherstellen, dass die richtigen Botschaften an den richtigen Stellen platziert werden.

Auch wenn es simpel klingen mag, gibt es nur fünf wichtige Elemente, die bei der Gestaltung einer Homepage zu beachten sind.

Die Schlagzeile

Überschriften, die manchmal in Kombination mit einem ansprechenden Bild verwendet werden, werden oben auf einer Homepage platziert. Überschriften sollten in fast allen Fällen kundenzentriert sein und dem Besucher zeigen, dass die Marke etwas hat, was ihm zugute kommt. Überschriften sollten entweder:

• Kommunizieren Sie die Vorteile für den Kunden
• Identifizieren Sie ein Problem des Besuchers und versichern Sie ihm, dass die Marke es für ihn lösen kann
• Beschreiben Sie klar und prägnant, was das Unternehmen tut

Schaffen Sie Vertrauen, indem Sie Autorität zeigen

Es ist zwingend erforderlich, das Unternehmen als Wegweiser und Lösung für das Problem des Kunden zu positionieren. UX-Designer, die die Kunst beherrschen, Vertrauen zu schaffen, werden es leichter haben, Menschen davon zu überzeugen, dass diese bestimmte Marke die richtige Lösung für ihre Probleme ist. Sie können dies tun, indem sie:

• Einschließlich Erfahrungsberichte wichtiger Kunden, die die Marke weiterempfehlen
• Anzeige der Logos von Unternehmen, mit denen die Marke zusammengearbeitet hat
• Anzeigen spezifischer Daten zur Anzahl der Benutzer, Transaktionen usw.
• Mit Preisen und Auszeichnungen, veröffentlichten Arbeiten, Medienauftritten und ähnlichen Errungenschaften
• Zeigen Sie Bilder des Teams oder des Firmensitzes

Aufruf zum Handeln

Eine emotionale Bindung zu Homepage-Besuchern herzustellen, ist der erste Schritt, um sie zu Kunden zu machen. Sobald diese emotionale Verbindung hergestellt ist, liegt es an der Handlungsaufforderung, den Deal zu besiegeln.

Es gibt zwei Arten von Handlungsaufforderungen:

1. Direkte Handlungsaufforderungen richten sich an Personen, die wissen, dass sie bereit sind, etwas zu kaufen oder sich anzumelden, und enthalten Formulierungen wie „Kaufen“, „Registrieren“ oder „Loslegen“. Durch Klicken auf diese CTAs gelangt der Käufer direkt zu einem Formular, um seine Transaktion abzuschließen.
2. Übergangs-Calls-to-Action sind für Besucher gedacht, die noch nicht bereit sind, etwas zu kaufen. Sie benötigen möglicherweise mehr Zeit und Informationen, bevor sie sich verpflichten. Diese kommen in Form von Schaltflächen wie „Weitere Informationen“, „Kostenlos testen“ oder „Kontaktieren Sie uns“.

Einige Calls-to-Action können beide kombinieren oder nebeneinander stellen (oft als ein Paar „Jetzt kaufen“- und „Mehr erfahren“-Buttons gesehen).

Ansprechende Bilder

Unabhängig davon, wie ernst der Inhalt einer Homepage ist, das StoryBrand-Framework verlangt nach einem Happy End. Denken Sie bei der Auswahl von Bildern daran, dass einige von ihnen dieses „Happy-ever-after“-Gefühl vermitteln sollten.

Bilder sprechen die Emotionen der Besucher an, besonders Bilder von glücklichen Menschen. Das Zeigen von Fotos von glücklichen Menschen hilft den Menschen, sich vorzustellen, wie ihr eigenes Happy End aussehen könnte, wenn sie den Kauf tätigen.

Kurzer Text

Je weniger Text, desto besser. Viele Verbraucher lesen keine langen Textblöcke, daher ist es am besten, die Markenbotschaft in so wenigen Worten wie möglich zu vermitteln.

UX-Designer sollten Kunden helfen, ihre Geschichte auf einfachste Weise zu teilen.

Erfolgreiche Homepages beantworten wichtige Fragen

Eine erfolgreiche Homepage kann das Interesse der Besucher in weniger als fünf Sekunden wecken. Von dort aus hat man etwa 15 Sekunden Zeit, um die drei Fragen zu beantworten, die sich Menschen (oft unbewusst) beim Besuch einer Homepage stellen:

• Was machen Sie?
• Wie können sie mir helfen?
• Was muss ich tun, um zu kaufen oder zu engagieren?

UX-Designer können das StoryBrand-Framework verwenden, um eine Homepage zu erstellen, die sofort Interesse weckt und diese Fragen effektiv beantwortet. Es bietet sowohl dem Designer als auch der Marke einen klaren Weg zum Erfolg.

Lassen Sie uns wissen, was Sie denken! Bitte hinterlassen Sie unten Ihre Gedanken, Kommentare und Ihr Feedback.

• • •

Weiterführende Literatur im Toptal Design Blog:

• Lohnen sich alle Trends? Die 5 häufigsten UX-Fehler, die Webdesigner machen
• So gestalten Sie eine effektive Landing Page
• Built to Convert – Best Practices für das Design von Zielseiten
• Der ultimative Leitfaden für das Design von E-Commerce-Websites
• Der umfassende Leitfaden zur Informationsarchitektur