Praxisguide

Briefings für Testvarianten erstellen

Webdesign spielt bei der Conversion-Optimierung eine große Rolle. Neben einem guten Webdesigner ist ein gutes Briefing Voraussetzung für ein gutes grafisches Ergebnis.

In diesem Praxisguide zeigen wir deshalb, wie Sie als Conversion Manager, Marketing Manager, Webanalyst o. ä. ein optimales Briefing für Webdesigner erstellen.

1. Einleitung

Webdesign spielt bei der Conversion-Optimierung eine große Rolle. Egal ob Testvarianten für A/B-Tests erstellt werden, Landingpages für neue Kampagnen gebaut werden oder conversion-optimierte Werbemittel designt werden; in allen Fällen hängt der Erfolg zu einem beträchtlichen Teil vom Design ab.

Neben einem guten Webdesigner ist ein gutes Briefing Voraussetzung für ein gutes grafisches Ergebnis. In diesem Praxisguide zeigen wir deshalb, wie Sie als Conversion Manager, Marketing Manager, Webanalyst o. ä. ein optimales Briefing für Webdesigner erstellen. Diese können sowohl im Unternehmen fest angestellt sein, bei einer Agentur arbeiten oder Freiberufler sein.

Sie haben also Wireframes, beispielsweise für eine Testvariante eines A/B-Tests, skizziert. Nun muss diese grafisch umgesetzt werden. In manchen Fällen nimmt diese Arbeit sehr viel Zeit in Anspruch, da komplette Elemente der Seite neu designt werden müssen. In anderen Fällen müssen nur ein paar Elemente wie eine Box mit Trust-Symbolen entworfen werden.

Unabhängig von der Größe der Aufgabe sollten Sie sich an diese Empfehlungen halten:

  • Briefing schriftlich formulieren (2. Kapitel)
  • Details zum Projekt vermitteln (3. Kapitel)
  • Vermitteln, auf welche Weise der Wireframe umgesetzt werden soll (4. Kapitel)
  • Die zu verwendeten Bilder und Symbole festlegen (5. Kapitel)
  • Alle benötigten Dateien mitsenden (6. Kapitel)
  • Nächste Schritte skizzieren (7. Kapitel)

2. Briefing immer schriftlich durchführen

Theoretisch können Sie ein Briefing auch per Telefon oder mündlich in Person durchführen. Dies nimmt weniger Zeit in Anspruch, als eine ausführliche E-Mail zu schreiben – auch weil der Empfänger des Briefings sich selbst Notizen machen muss.

Nehmen Sie sich aber die Zeit, das Briefing ausführlich zu Papier zu bringen:

Erstens verringert dies die Gefahr, dass der Webdesigner einen Teil des Briefings vergisst. Im besten Fall fragt dann er bei Ihnen nach – was unnötige Zeit kostet. Im ungünstigen Fall werden Anforderungen ignoriert und es müssen zusätzliche Korrekturschleifen gefahren werden.

Zweitens zeigen Sie dem Webdesigner mit einem ausführlichen und gut strukturierten Briefing, dass Sie sich Mühe geben und dass Ihnen das Projekt wichtig ist. Der Empfänger des Briefings wird dies zu schätzen wissen, da es seine Arbeit erleichtert.

Falls Sie Kollegen oder Freiberuflern briefen, mit denen Sie schon länger zusammenarbeiten, reicht in unserer Erfahrung eine gut strukturierte E-Mail. Falls Sie mit einem neuen Partner zusammenarbeiten, kann auch ein Briefing als PDF sinnvoll sein. Dies macht im Corporate Design des Unternehmens noch mehr her.

3. Details zum Projekt vermitteln

Der Webdesigner soll nicht nur stur Ihre Vorlage umsetzen, sondern auch aktiv eigene Vorschläge einbringen (siehe nächstes Kapitel). Idealerweise arbeiten Sie mit ihm zusammen und verbessern so den erstellten Wireframe.

Voraussetzung hierfür ist, dass der Empfänger des Briefings über das Projekt informiert wird. Falls Sie mit dem Grafikdesigner schon länger zusammenarbeiten, kann dieser Teil kurz ausfallen. Falls es eine neue Person ist, sind längere Ausführungen angebracht. Greifen Sie unter anderem diese Themen auf:

Ziel: Welches Ziel soll mit der Testvariante oder Landingpage erreicht werden? Das häufigste Ziel ist mehr Verkäufe. Aber auch mehr Umsatz durch Cross-Selling oder mehr Newsletter-Abonnenten sind mögliche Ziele.

Motivation: Wieso wird diese Testvariante getestet? Basiert die Testhypothese auf einer Besucherbefragung? Oder wurde in der Sessions-Wiedergabe ein mögliches Usability-Problem identifiziert? Oder wurde die Testhypothese basierend auf einer Wettbewerbsanalyse aufgestellt?

Wieso wird eine neue Landingpage benötigt? Wird sie beispielsweise für eine bald anstehende TV-Kampagne erstellt, dann erläutern Sie diese Kampagne. Wird sie für eine Display-Kampagne erstellt, senden Sie die entsprechenden Banner mit und beschreiben Sie, auf welchen Websites die Banner ausgespielt werden.

Hintergrundwissen über Zielgruppe: Notieren Sie sich ggf. auch, was Sie über die Zielgruppe der Landingpage oder Testvariante wissen. Ist die Zielgruppe beispielsweise nicht internetaffin, dann sollte möglicherweise auf neuere Technologien, wie Content-Slider, verzichtet werden.

Ist die Zielgruppe älter, dann sollten größere Schriftarten und ein hoher Kontrast zum Einsatz kommen. Außerdem hilft diese Information bei der Auswahl passender Fotos (siehe auch 5. Kapitel)

4. So präzise wie möglich, so viel Freiraum wie nötig

Die größte Herausforderung beim Briefing für grafische Entwürfe besteht darin, zwei Erwartungen abzuwägen.

  • Einerseits sollen sich Webdesigner an die in den Wireframes gemachten Vorgaben halten.
  • Andererseits sollen grafische Entwürfe besser und ansprechender aussehen als Wireframes. Außerdem sollten Webdesigner auch die Möglichkeit haben, Vorschläge zur Verbesserung der Entwürfe einzubringen.

Erläutern Sie im Briefing deshalb, dass es sich um Wireframes handelt und die grafischen Entwürfe davon abweichen sollen. Vermitteln Sie, in welchen Aspekten sich die grafischen Entwürfe unterscheiden sollen, das heißt, wo der Webdesigner kreativ sein soll und wo nicht.

Hier eine Möglichkeit, welche Elemente von Ihnen festgelegt werden und woran sich der Webdesigner halten soll; und für welche er selbst Vorschläge erarbeiten soll. Abhängig von der Größe des Unternehmens werden manche der Entscheidungen auch durch das Corporate Design bestimmt. Passen Sie die Informationen entsprechend an Ihre Situation an.

Durch Wireframe definiert Vorschlag erwünscht Abhängig von CD
Welche Elemente kommen überhaupt auf die Seite? Formen wie Boxen, Rahmen oder Störer Farben
Anordnung der Elemente Verwendete Farben Schriftarten und Formatierungen
Größe der Elemente Auswahl der Bilder und Symbole
Texte

Noch drei weitere Tipps:

  • Spezifizieren Sie, falls und wie viele verschiedene Entwürfe Sie erwarten.
  • Senden Sie ggf. Beispiele für gelungene anderen Websites mit, an denen sich der Webdesigner orientieren kann.
  • Falls Sie vom Webdesigner erwarten, dass er auch selbst Verbesserungsvorschläge macht, erinnern Sie ihn hieran, dass es in erster Linie um „Design for Conversion“, nicht um Ästhetik oder Kunst geht.

5. Bilder und Symbole definieren

Ein wichtiger Teil vieler Testvarianten und Landingpages sind Bilder. Falls Sie die passenden Bilder schon ausgesucht haben, bauen Sie diese in den Wireframe ein und hängen sie als Anhang an die E-Mail.

In vielen Fällen ist der Webdesigner jedoch besser geeignet, Bilder auszuwählen. Die Herausforderung besteht darin, zu kommunizieren, was für ein Bild ausgewählt werden soll.

Beantworten Sie hierfür mindestens diese Fragen:

  • Was soll das Bild ausdrücken?
  • Wenn Personen abgebildet werden sollen, spezifizieren Sie, wie dies aussehen soll:
    • Blickrichtung: Auf ein bestimmtes Element der Seite (als „Gaze Cuing“ bekannt), in eine andere Richtung oder auf den Besucher?
    • Demografische Merkmale wie Alter, Geschlecht, Herkunft

Wenn Stockfotos zum Einsatz kommen, muss der Webdesigner letztendlich bestimmte Suchbegriffe in die Suchmaske des Stockfoto-Anbieters eingeben. Teilen Sie ggf. diese Tipps mit ihm:

  • Verben aus der Überschrift helfen oft, passende Bilder zu finden.
  • Suchen nach Synonymen bringen oft weitere Bilder hervor.

Noch zwei weitere Tipps:

  • Schreiben Sie ggf. auch, wo die Bilder heruntergeladen werden sollen. Schicken Sie auch die Zugangsdaten mit.
  • Notieren Sie, wie viele Vorschläge Sie erwarten.

6. Alle benötigten Dateien mitsenden

Eigentlich ist es selbstverständlich. Trotzdem kommt es zu oft vor: Der Webdesigner möchte mit der Arbeit beginnen; es sind jedoch nicht alle benötigte Dateien vorhanden. Senden Sie also mit dem Briefing alle benötigten Dateien mit. Fehlende Dateien führen zu längeren Wartezeiten und geben dem Webdesigner das Gefühl, dass Sie sich keine Mühe geben.

Zu diesen Dateien können gehören:

Wireframes oder zu bearbeitende Dateien: Stellen Sie sicher, dass der Empfänger die Datei oder den Link auch öffnen kann.

Bilder, Symbole und Icons: Stellen Sie hier sicher, dass die Dateien auch eingesetzt werden können:

  • Haben Bilder einen transparenten Hintergrund, falls dies benötigt wird?
  • Liegen Bilder in der passenden Auflösung vor?
  • Dürfen die Bilder überhaupt für das Projekt eingesetzt werden?

Schriftarten, Styleguides und Corporate-Design-Richtlinien: Falls es sich bei dem Styleguide um ein umfangreiches Dokument handelt, weisen Sie darauf hin, wo die relevanten Informationen zu finden sind.

Werbemittel: Senden Sie Werbemittel mit, falls die Landingpage auf sie abgestimmt werden soll.

Bauen Sie in die E-Mail auch eine Liste der angehängten Dateien ein. Dies hilft Ihnen und dem Empfänger, nichts zu übersehen.

7. Nächste Schritte skizzieren

E-Mails ohne Handlungsaufforderung und Beschreibung, wie es weitergeht, sind ineffizient. Beenden Sie ein Briefing deshalb mit einer Beschreibung des Weiteren gewünschten Ablaufs.

Unser Vorschlag hierfür:

  • Sie machen einen Terminvorschlag, um das Briefing per Telefon oder in Person zu besprechen. Hier können mögliche Unklarheiten und Missverständnisse beseitigt werden.
  • Sie erfragen, bis wann Sie mit einem ersten Entwurf rechnen können. Gegebenenfalls setzen Sie auch selbst eine Deadline.

ConversionBoosting