Wie Peggy Olson für Interactive designen würde

In der Ära von Mad Men wussten Marketer genau, wie ihre Arbeit konsumiert werden würde. Die Zielgruppe würde die Anzeige im Fernsehen sehen, im Radio hören, in einer Zeitschrift oder auf einer Plakatwand sehen und vielleicht würde sie in den (Schnecken-)Briefkasten kommen. Wenn Sie eine Printanzeige oder ein Poststück geplant haben, kannten Sie die genaue Größe der Immobilie, für die Sie entwerfen, und Sie haben Ihre Anzeige so optimiert, dass sie in diesen Raum passt. Der Verbraucher würde diesen Inhalt genau so sehen, wie Sie ihn sich vorgestellt haben, als Sie ihn gestaltet haben.

Wenn Peggy Olson heute eine Anzeige entwerfen würde, müsste sie den Kontext berücksichtigen, wie diese Anzeige gesehen wird und wie ihre Zielgruppe damit interagieren würde. Es würde keine Garantie dafür geben, dass ihre Arbeit so betrachtet würde, wie sie es sich vorgestellt hatte, also musste sie ihr Layout und Design optimieren, damit es unabhängig davon, wie es betrachtet wurde, eine Wirkung hatte. Sie musste sicherstellen, dass der Call-to-Action (CTA) klar, prägnant und lesbar war – selbst auf einem 3-Zoll-Bildschirm.

Die Gestaltung von Webseiten, Landing Pages und E-Mails ist heute viel komplizierter als zu Zeiten von Mad Men. Heute haben Sie die zusätzliche Dimension interaktiver Elemente und wissen nicht, auf welchem ​​​​Gerät die Inhalte angezeigt werden. Ein Layout, das auf einem Computerbildschirm in voller Größe perfekt aussieht, kann auf einem Tablet oder Smartphone ein komplettes Chaos darstellen. Ein unklarer oder an der falschen Stelle platzierter CTA kann Ihre Engagement-Rate beeinträchtigen.

Drei wichtige Best Practices für interaktives Design

Die meisten Verbraucher haben heute die Aufmerksamkeitsspanne einer Mücke. Sie haben ungefähr zwei Sekunden Zeit, um sie zu fesseln, wenn sie auf Ihren Inhalt treffen, bevor sie entscheiden, ob sie auf etwas Interessanteres klicken oder nicht. Es ist zwingend erforderlich, dass Sie diese drei Konzepte verstehen, wenn Sie eine E-Mail, eine Zielseite oder eine Webseite entwerfen:

1. Wie sich das Layout auf das Engagement auswirkt: Erfahren Sie, wie Sie Elemente auf einer Seite für maximales Engagement anordnen
2. Wie sich Inhalte auf das Engagement auswirken: Wissen, was mich dazu bringt, mit Ihren Inhalten zu interagieren
3. Wie wichtig Zeit ist: Du hast zwei Sekunden, um meine Aufmerksamkeit zu bekommen

Klingt einfach, oder? Wenn es so einfach wäre, würde ich das hier nicht schreiben! Ich kann Ihnen nicht sagen, auf wie viele Inhalte ich täglich stoße, die mich so frustrieren, dass ich nur noch auf die Schaltfläche „Zurück“ drücke. Ich spreche von großen Unternehmen mit tiefen Taschen, aber ohne Sinn für Design.

Also lasst uns praktisch werden. Lesen Sie weiter für einige sehr einfache Tipps, die Ihnen helfen werden, Ihre Seitenlayouts für das Engagement auf jeder Plattform zu optimieren.

Wie das Auge eine Seite scannt

Das erste, was Sie verstehen müssen, ist, wie das menschliche Auge einen Inhalt verfolgt. Als ich am College Werbung studierte, wurde uns gesagt, dass das Auge in Form eines großen Z über eine Seite wandert, beginnend oben links. Ich bin mir sicher, dass diese Theorie von einer Studie entwickelt wurde, bei der eine Testperson Inhalte betrachtete, während ein Typ in einem weißen Kittel versuchte, das Muster der Augenbewegungen auf ein Blatt Papier zu zeichnen. Dies war lange vor der heute weit verbreiteten Heatmap-Technologie, die verwendet wird, um zu sehen, wie Menschen über online angesehene Seiten verfolgen. Und wohlgemerkt, Menschen scannen gedruckte Inhalte etwas anders als Online-Inhalte.

Heutzutage ist man sich einig, dass das Auge beim Betrachten eines Inhalts online in einem großen F-Muster verläuft und immer noch oben links beginnt. Ihr Auge verfolgt normalerweise zuerst horizontal den oberen Balken des F, dann den zweiten Balken des F und schließlich von oben nach unten den vertikalen Stamm des F hinunter.

Was bedeutet das also? Es bedeutet, dass Ihr CTA irgendwo in diesem großen F-Muster liegen muss, oder Sie müssen einem Baby einen Schnurrbart anziehen. Treffen Sie eine bewusste Designentscheidung, um Ihren Haupt-CTA an einer Stelle zu platzieren, an der er in den ersten zwei Sekunden die Aufmerksamkeit des Betrachters auf sich zieht.

Echte Designkatastrophen

Werfen wir also einen Blick auf eine echte Designkatastrophe, bei deren Erstellung mir einer meiner Kollegen hier bei Act-On geholfen hat. Es tut mir leid, sagen zu müssen, dass das folgende Beispiel aus echten Inhalten stammt, auf die ich online gestoßen bin. Ich habe ein fiktives Unternehmen namens Actomatic verwendet, um die häufigsten Fehler zu demonstrieren, die Menschen machen, und wie man sie korrigiert.

Beispiel 1: Lassen Sie mich nicht scrollen, um den CTA zu sehen

Die häufigste verpasste Gelegenheit, die ich sehe, ist ein Inhalt, bei dem es entweder keine Möglichkeit zum Teilen oder Teilen von Schaltflächen gibt, die am unteren Rand der Seite unterhalb des Falzes vergraben sind. Die Falte ist diese imaginäre Linie am unteren Rand Ihres Bildschirms. (Der Begriff stammt aus der Zeit, als Zeitungen in der Mitte gefaltet wurden; „above the fold“ war eine bessere Platzierung mit einer besseren Leserschaft.) Auf einem durchschnittlich großen Laptop-Bildschirm kann die Falte 480 Pixel vom oberen Rand des Bildschirms entfernt sein, aber weiter Bei einem iPhone kann es 100 Pixel von oben entfernt sein. Beachten Sie dies beim Layout Ihrer Seiteninhalte.

Wenn wir über einen Blog oder einen mehrseitigen Artikel sprechen, wage ich zu vermuten, dass die meisten Leute bereit sind zu teilen, nachdem sie die Überschrift (wenn sie gut ist) und die ersten beiden Sätze eines Inhalts gelesen haben, weil sie es wollen als Erster aus dem Tor sein. Menschen teilen gerne neue Inhalte, nicht Inhalte, die sie bereits fünfmal von ihren Kollegen gesehen haben.

Ich schlage vor, Schaltflächen zum Teilen oben und unten im Inhalt zu haben oder Schaltflächen zum Teilen, die beim Scrollen neben dem Inhalt schweben.

Ich habe mit einem sehr bekannten Unternehmen zusammengearbeitet, das festgestellt hat, dass die Share-Rate um über 400 % gestiegen ist, wenn es sowohl am Anfang als auch am Ende eines Artikels Share-Buttons hinzugefügt hat.

Beispiel 2: Oh, meine Augen!

Sind Sie jemals auf einem Inhalt gelandet, der so beschäftigt war, dass Sie nicht wussten, wo Sie suchen sollten? Vielleicht gab es ein Video zum Teilen, ein Formular zum Ausfüllen, einige Kopien, ein paar Links hier und da. Wenn ich auf der Seite unten landen würde, wüsste ich nicht, wo ich anfangen soll, also würde ich mich wahrscheinlich überhaupt nicht engagieren. Dieses Beispiel gibt mir keinen Hinweis darauf, was auf dieser Seite am wichtigsten ist. Sie haben höchstens zwei Sekunden, um meine Aufmerksamkeit zu erregen und mich zu engagieren, und Sie haben mich einfach verloren.

Wenn Sie mehrere CTAs haben, stellen Sie die logische Reihenfolge dieser Elemente klar heraus. Buchstabieren Sie es mit nummerierten Legenden, wenn Sie müssen. Wenn ich auf diese Seite käme, würde ich diese Fragen stellen:

Das Layout sieht ungeplant und schlampig aus mit zufälligen Leerräumen und seltsamen Schriftarten. Die CTAs sind definitiv unter der Falte.

Wenn ich Actomatic einen Rat geben würde, würde ich damit beginnen, sie zu fragen, was sie mit dieser Seite zu erreichen hoffen. Was ist hier das Ziel? Ich gehe davon aus, dass die Hauptziele hier darin bestehen, die Leute dazu zu bringen, sich für den Blog anzumelden und ein kurzes Video anzusehen und zu teilen. Wenn das der Fall ist, müssen wir einige Änderungen vornehmen.

1. Stellen Sie sicher, dass sich der Haupt-CTA über der Falte befindet. Sowohl die Schaltflächen zum Teilen als auch die Schaltfläche zum Abonnieren befinden sich unterhalb der Falte.
2. Machen Sie deutlich, dass Sie möchten, dass Besucher sich für den Blog anmelden UND das Video teilen
3. Fügen Sie einige Informationen über das Unternehmen hinzu

Okay, schauen wir uns das jetzt an:

Die neue und verbesserte Version hat ein etwas anderes Layout, weniger Schriftarten, einen kurzen Klappentext über das Unternehmen und das Video und eine niedrigere Hürde, den Blog zu abonnieren. Ich habe auch Links unten und eine Kontakt-Schaltfläche hinzugefügt. Beachten Sie, wie ich das Layout optimiert habe, um zu maximieren, wie viele Informationen ein Leser in den ersten zwei Sekunden sehen würde, indem ich der Art und Weise folge, wie das Auge die Seite auf natürliche Weise scannt. Die F-Muster-Theorie besagt, dass dies die Reihenfolge ist, in der der Betrachter die Elemente auf der Seite aufnimmt:

1. Das Firmenlogo
2. Die Schlagzeilen
3. Die Schaltflächen Teilen und Abonnieren
4. Der Abschnitt „Erkunden“ unten

Geben Sie mir einen Grund zur Interaktion

Jetzt, da Sie Ihr Layout in Ordnung gebracht haben, müssen Sie mir einen Grund geben, mit Ihren Inhalten zu interagieren. Wenn Sie möchten, dass ich ein Formular ausfülle oder Ihre Inhalte teile, muss es einen zwingenden Grund für mich geben, dies zu tun. Also lass mich dich fragen, was habe ich davon?

Wenn Sie die Antwort auf diese Frage nicht kennen, haben Sie Ihre Hausaufgaben nicht gemacht.

Der Hauptgrund, warum Menschen mit Inhalten interagieren, ist, dass sie emotional oder materiell eine gewisse Befriedigung daraus ziehen. Wenn Ihr Inhalt gut ist, werde ich ihn teilen, weil ich dadurch vor meinen Kollegen gut informiert wirke. Ich bekomme einen Egoschub, wenn ich der erste bin, der von einem neuen Widget erfährt, das Sie gerade veröffentlicht haben, also werde ich natürlich die Tatsache teilen, dass ich es zuerst gesehen habe.

Vielleicht sind Sie eine gemeinnützige Organisation und Ihr Inhalt ist eine Wohlfühlgeschichte über jemanden, der etwas Außergewöhnliches getan hat. Ich werde diesen Inhalt teilen, weil ich mich dadurch gut und wohltätig fühle. Bieten Sie mir die Chance, ein iPad zu gewinnen, wenn ich ein Formular ausfülle, und es ist viel wahrscheinlicher, dass ich Ihnen meine persönlichen Daten gebe.

Der Trick besteht darin, zu wissen, was Ihr Publikum dazu bringt, sich zu engagieren. Ist es eine emotionale Belohnung, eine materielle Belohnung oder beides? Versetzen Sie sich in ihre Lage und entwickeln Sie eine Engagement-Strategie, die auf Ihr Publikum ausgerichtet ist.

Halte es einfach

Ich habe kürzlich auf einer Konferenz gesprochen, auf der ich eine Fallstudie einer erfolgreichen Social-Marketing-Kampagne vorgestellt habe. Ich trug ein T-Shirt mit diesem Aufdruck auf der Vorderseite: #KeepItSimple. Ich versuche zu praktizieren, was ich predige.

Ich habe mit Kunden zusammengearbeitet, die extrem komplizierte interaktive Inhalte erstellt haben, und anderen, die es unglaublich einfach gehalten haben, und das Einfache gewinnt fast jedes Mal. So halten Sie es einfach:

• Wählen Sie Schriftarten wie Trebuchet, die online gut lesbar sind.
• Mischen Sie nicht zu viele Schriftarten und -größen auf einer Seite. Eine Größe für Überschriften, eine Größe für Fließtext.
• Beschränken Sie sich nach Möglichkeit auf einen klaren CTA.
• Bewahren Sie die wichtigen Dinge über der Falte auf.
• Machen Sie die Eintrittsbarriere so niedrig wie möglich (fragen Sie nicht nach dem erstgeborenen Kind von jemandem, wenn Sie wirklich nur seine E-Mail-Adresse brauchen)

Ihre Hausaufgabe

Moment mal, du hast nie gesagt, dass es am Ende dieses Artikels Hausaufgaben geben würde! Wenn ich dir gesagt hätte, dass es Hausaufgaben geben würde, hättest du dann bis hierhin gelesen? Äh huh. Ich möchte, dass Sie sich eine Ihrer Landingpages kritisch anschauen und sich fragen, ob es Verbesserungspotenzial gibt.

• Zeigen Sie eine Ihrer Zielseiten auf einem Laptop und einem Mobilgerät an. Müssen Sie scrollen, um zum CTA zu gelangen? Wird es auf einem Mobilgerät gut angezeigt?
• Bitten Sie einen Freund, der nichts über Ihr Unternehmen weiß, sich eine Ihrer Zielseiten anzusehen, und bitten Sie ihn, während des Betrachtens ehrliches Feedback zu geben. Bitten Sie sie, Ihnen zu sagen, was ihnen zuerst auffällt, was Ihr Unternehmen tut und was der Haupt-CTA auf der Seite ist.
• Prüfen Sie, ob alle wichtigen Elemente innerhalb des F-Musters liegen.
• Testen Sie Ihre Seiten in möglichst vielen Browsern auf möglichst vielen Plattformen. Safari rendert keine Elemente wie Chrome. Firefox rendert keine Elemente wie Internet Explorer (IE). Und verschiedene Versionen von IE können Inhalte völlig unterschiedlich anzeigen.

Sie müssen keinen Abschluss in Werbelayout und -design haben, um dies zu erreichen. Allerdings müssen Sie bereit sein, Ihre aktuellen Inhalte kritisch zu hinterfragen.

Es lohnt sich.