Es gibt viele Möglichkeiten Log-in Formulare oder ähnliches zu entwerfen. Die meisten Designer sind mit den herkömmlichen Möglichkeiten vertraut. Aber wie könnte man solche Formulare einfacher und noch effizienter anbieten? Im nachfolgenden Artikel werden ein paar solcher Ideen präsentiert welche für zukünftige Designs nützlich sein könnten. Jedoch sollte zuvor immer bedacht werden, ob einer dieser Techniken auch sinnvoll ist, bevor diese Verwendung findet. Evtl. findet die eine oder andere Anregung auch Platz in einem Usabilty-Test.

Sign-Ups vereinfachen

Der Zweck jedes Anmeldeformulars für Benutzer ist es, dieses erfolgreich zu durchlaufen. Wenn das Formular jedoch zu langwierig und kompliziert ist verfällt der User schnell in Unlust und bricht womöglich den Prozess ab. Nachfolgend werden ein paar innovative Techniken vorgestellt, die jene Formulare hinsichtlich des Ausfüllens einfacher und schneller machen.

Beispiele:

1. User-Name Abfrage nach der Anmeldung

Bei Anmeldeformularen wird der User i. d. R. nach einem eindeutigen Usernamen für die Webseite gefragt. So kommt es nicht all zu selten vor, dass dieses Vorhaben oft zu einem typischen „trail and error“ Unterfangen ausartet. Anstatt den User auf Teufel komm raus nach einem noch freien Usernamen vor dem Prozessende des Sign-Ups zu nerven, könnte man das Ganze ebenso auch danach abfragen. Auf [...]]]> Innovative Techniken zur Vereinfachung von Log-Ins und mehr

Es gibt viele Möglichkeiten Log-in Formulare oder ähnliches zu entwerfen. Die meisten Designer sind mit den herkömmlichen Möglichkeiten vertraut. Aber wie könnte man solche Formulare einfacher und noch effizienter anbieten? Im nachfolgenden Artikel werden ein paar solcher Ideen präsentiert welche für zukünftige Designs nützlich sein könnten. Jedoch sollte zuvor immer bedacht werden, ob einer dieser Techniken auch sinnvoll ist, bevor diese Verwendung findet. Evtl. findet die eine oder andere Anregung auch Platz in einem Usabilty-Test.

Sign-Ups vereinfachen

Der Zweck jedes Anmeldeformulars für Benutzer ist es, dieses erfolgreich zu durchlaufen. Wenn das Formular jedoch zu langwierig und kompliziert ist verfällt der User schnell in Unlust und bricht womöglich den Prozess ab. Nachfolgend werden ein paar innovative Techniken vorgestellt, die jene Formulare hinsichtlich des Ausfüllens einfacher und schneller machen.

Beispiele:

1. User-Name Abfrage nach der Anmeldung

Bei Anmeldeformularen wird der User i. d. R. nach einem eindeutigen Usernamen für die Webseite gefragt. So kommt es nicht all zu selten vor, dass dieses Vorhaben oft zu einem typischen „trail and error“ Unterfangen ausartet. Anstatt den User auf Teufel komm raus nach einem noch freien Usernamen vor dem Prozessende des Sign-Ups zu nerven, könnte man das Ganze ebenso auch danach abfragen. Auf diesem Weg verliert man womöglich weniger frustrierte User und es entstehen weniger wahllos gewählte und vergessliche Usernamen, nur um die Formular Anforderungen zu erfüllen.

2. Einmalige Passwort Eingabe

Viele Sign-Up Formulare bitten die User ihre Passwörter in zwei unterschiedle Formularfelder einzutragen – der Grund ist nachvollziehbar. Weiter wird aus Sicherheitsgründen das einzutragende Passwort maskiert (mask passwords) angezeigt, damit Schnüffler/Betrüger es nicht sehen können. Ebenso soll es dazu dienen typografische Fehler zu reduzieren.

In Wirklichkeit könnte diese Funktion aber genau das Gegenteil bewirken. Der User muss mehr Zeichen eingeben, somit können wiederum mehr Fehleingaben getätigt werden. Weiter sieht der User nicht was eigentlich eingegeben wird. Spätestens im zweiten Formularfeld fragt sich jeder: Hoffentlich hab ich mich nicht vertippt!

Eine effektivere Herangehensweise wäre die User einmalig ihr Passwort eintippen zu lassen und anschließend anhand Checkbox-Funktion das Passwort sichtbar zu machen. So kann der User das Passwort recht einfach überprüfen. Ein weiterer Vorteil wäre, dass das Formular ein Textfeld weniger beinhaltet und den Arbeitsaufwand für ein Sign-Up etwas reduziert.

Ein Kommentar von Jakob Nielson zu dem Thema:

„Usability suffers when users type in passwords and the only feedback they get is a row of bullets. Typically, masking passwords doesn’t even increase security, but it does cost you business due to login failures.“

3. Automatische Datenübergabe für das Textfeld „Stadt“

Falls für eine Reservierung oder ähnliches die Postanschrift des Users benötigt wird, kann gerne über eine sog. „Auto-Fill-Funktion“ für das Formularfeld Stadt basierend auf der Postleitzahl nachgedacht werden. D. h. das nach Eingabe der PLZ die zugehörige Stadt automatisch nachgeliefert wird. Das Ausfüllen des Formulars kann so beschleunigt werden. Ein großer Nachteil wird sein, dass die dafür benötigten Daten nicht gerade zu einem günstigen Preis bei der Deutschen Post erworben werden können.

Wem dies jedoch zu aufwändig bzw. zu teuer ist, kann beispielsweise für das Formularfeld „Stadt“ auf eine „Auto-Complete-Funktion“ zurück greifen, anstatt den User über ein Dropdown Menü die zugehörige Stadt auswählen zu lassen.

4. Automatische Datenübergabe der Zahlungsadresse für die Versandadresse

Im E-Commerce Bereich muss der User oft noch seine Zahlungs- wie auch Versandadresse separat eintragen. I. d. R. sind Zahlungs- und Versandadresse identisch. So könnte doch der Bereich mit den Zahlungsinformationen einen Link oder Button enthalten mit dem Hinweis „Entspricht der Versandadresse“ oder ähnliches. Trifft dies zu und der User die Aktion ausführt werden die Daten automatisch übernommen/eingetragen. Die hier vorgestellte Idee ist nicht mehr all zu neu und soll lediglich ein Appell sein: don’ forget it

5. Newsletter Abo mit Vorschaufunktion

Die meisten Website Inhaber setzen vorab einen Hacken in der Checkbox für das Newsletter Abonnement, in der Hoffnung mehr Abonnenten zu bekommen. Die Chancen dafür stehen nicht schlecht, dass es funktioniert. Aber ein Abonnement ist bedeutungslos, wenn der Benutzer dies getan hat, nur weil er es übersehen hat oder die Option missverstanden wurde. Wenn der User daran nicht interessiert ist, wird er das Abonnement früher oder später abbestellen. Mit solch einer Hinführung zum Newsletter kann auf lange Sicht nicht erfolgversprechend sein. Ein effektiver Ansatz wäre dem User eine Vorschau des Newsletter vorab anzubieten. So bekommt der User einen Vorgeschmack was ihn erwartet und entscheidet sich aus voller Überzeugung für den Newsletter.

5.1.  Useransprache Newsletter-Abonnement

Das abonnieren eines Newsletters empfinden einige als lästig, nervig und ist zudem meistens lieblos gestaltet. Wie zuvor schon erwähnt, könnte eine Vorschau des Newsletters die Absicht eines Abonnements das Ganze in ein etwas besseres Licht rücken. Wieso dann auch nicht gleich an der Useransprache bzw. Aufforderung arbeiten. Die Message im unten gezeigten Beispiel „Lets’s keep in touch“ ist eine tolle Idee und vermittelt zugleich einen freundlichen Charakter.

6. Auto-Fokus Funktion für das erste Textfeld

Sobald der User das Login-Formular zu sehen bekommt weiß mittlerweile fast jeder was ihn erwartet und ist für das Eintragen der Login-Daten bereit. Da wir, die UX-Analysten oft die Nadel im Heuhaufen suchen kann man an dieser Stelle das erste Textfeld noch etwas effizienter gestalten. Durch die Auto-Fokus Funktion konzentriert sich der User automatisch auf das erste Textfeld. Das erspart dem User Zeit und Mühe, weil ein zusätzliches hineinklicken in das Textfeld mit der Maus entfällt. Zusätzlich sollte das aktuelle Textfeld deutlich markiert sein, damit der User weiß, dass er mit der Eingabe beginnen kann.

Den eigentlichen Mehrwert der allermeisten Websites wird erst nach einer erfolgreichen Anmeldung/Registrierung ersichtlich. Doch an dieser Stelle kann es bereits zu Problemen für viele Webseitenbetreiber kommen. Jeder von uns sowie andere pflegen heutzutage viele Internetidentitäten bzw. Log-ins. Die Big Player wie Facebook, Twitter und Googlebte werden von dieser Problematik wohl nichts spüren, jedoch betrifft es eine Vielzahl anderer Webseiten.

„Eine 2010 von ECC Handel und Mücke, Sturm & Company durchgeführte Studie zum Thema Conversion Rates im E-Commerce kommt zu dem Ergebnis, dass in Online-Shops knapp 16 Prozent der möglichen Neukunden bei der Registrierung den Kauf abbrechen“. Warum ist das so? Meist liegt es daran ein weiteres Benutzerkonto zu pflegen und immer wieder die identischen Daten einzugeben. Was kann man also dagegen unternehmen? Gewiss haben [...]]]> Wer kennt das nicht. Eigentlich möchte man nur schnell etwas bestellen aber immer wieder stolpert man über diese zwanghaften und verzwickten Registrierungsprozesse. Ein Grund dafür, warum Kunden mit Kaufabsicht vom Kauf oft absehen. 16 Prozent der potenziellen Neukunden und sogar noch vier Prozent der Bestandskunden springen beim Log-in ab. Anlass genug, die Handhabung des Registrierungsprozesses zu überdenken und für den Nutzer so einfach wie möglich zu gestalten, um die Abbruchrate womöglich an dieser Stelle zu senken.

Den eigentlichen Mehrwert der allermeisten Websites wird erst nach einer erfolgreichen Anmeldung/Registrierung ersichtlich. Doch an dieser Stelle kann es bereits zu Problemen für viele Webseitenbetreiber kommen. Jeder von uns sowie andere pflegen heutzutage viele Internetidentitäten bzw. Log-ins. Die Big Player wie Facebook, Twitter und Googlebte werden von dieser Problematik wohl nichts spüren, jedoch betrifft es eine Vielzahl anderer Webseiten.

„Eine 2010 von ECC Handel und Mücke, Sturm & Company durchgeführte Studie zum Thema Conversion Rates im E-Commerce kommt zu dem Ergebnis, dass in Online-Shops knapp 16 Prozent der möglichen Neukunden bei der Registrierung den Kauf abbrechen“. Warum ist das so? Meist liegt es daran ein weiteres Benutzerkonto zu pflegen und immer wieder die identischen Daten einzugeben. Was kann man also dagegen unternehmen? Gewiss haben innovative Websites mit einem hohen Nutzwert einen gewissen Vorteil, jedoch obliegt dies ob im Auge des Betrachters und deren Interessen. Ein gutes Beispiel dafür ist aber beispielsweise der Mobilfunkmarkt. Obwohl der Nutzer sich für das herunterladen von Apps oft registrieren muss, werden diese trotzdem millionenfach heruntergeladen.

Anbei noch andere empirische Daten bezüglich Online Account Registrierung von Janrain:

Drei von vier Umfrageteilnehmer vermeiden es einen weiteren Online Account zu erstellen: 54 Prozent verlassen die Seite wieder oder kommen nicht wieder, 17 Prozent gehen zu einer anderen Seite, und 4 Prozent verlassen oder meiden die Seite. Lediglich 25 Prozent sind bereit den Registrierungsprozess zu durchlaufen.

Der Registrierungsprozess ist nur ein Mittel zum Zweck und nimmt einen untergeordneten Stellenwert beim Nutzer ein. Aufgrund dessen werden oft ungenaue oder falsche Daten bei der Registrierung angegeben. Dies sollte jedem Webseitenbetreiber bewusst sein. An dieser Stelle sei gesagt, dass dies mit Sicherheit die meisten Online-Shops davon ausschließt, da der Nutzer seine bestellte Ware natürlich erhalten möchte. Trotz alledem möchte der Nutzer den Registrierungsprozess ohne großen Aufwand durchlaufen und hier bedarf es einer Optimierung. Anbei mögliche Fallstricke, mit denen sich der User auseinander setzen muss:

• Der Registrierungs-Button ist oft zu klein

• Die Sortierung der Eingabefelder erfolgt nicht in einer zum Nutzer gelernten Reihenfolge.

• Das Formular ist über mehrere durch den Nutzer zu bestätigende Schritte gestreckt.

• Bei Bestätigung der Tabulator-Taste springt der Cursor nicht zum nächsten Eingabefeld.

• Fehlermeldungen bei Falscheingaben sind gar nicht oder nur unzureichend vorhanden.

„Bei der Informationsabfrage für den Registrierungsprozess sollte man sich nur auf notwendige Daten beschränken, denn die Nutzer haben gelernt, welche Informationen für eine Registrierung wirklich erforderlich sind. Dementsprechend nimmt die Bereitschaft ab, mehr Informationen anzugeben als unbedingt notwendig. Hier gilt daher die Regel: Weniger ist mehr. Webseitenbetreiber müssen sich also die Frage stellen: Welche Nutzerinformationen sind für die Nutzung meines Services essenziell?“

Der Besuch eines Online Shops erfolgt zum Beispiel aufgrund der Vorstellung, eine Ware oder Dienstleistung zu erwerben. Gängige Eingaben für einen Kaufprozess sind die Produktauswahl, die Bestätigung des Warenkorbs, die Eingabe der Versandadresse/pers. Daten und die Angabe der Zahlungsmodalitäten. Eine Registrierung ist für die Erfüllung des Nutzerwunschs vorerst nicht erforderlich. Sie kann aber für einen späteren Zeitpunkt – bei einem erneuten Einkauf – sehr hilfreich sein, da die wichtigsten Angaben für den Kaufprozess schon vorhanden sind und automatisch eingetragen werden können. „Webseitenbetreiben sollten daher einfach das Gute vor das Notwendige stellen“. Für die zuvor erwähnten Online Shops würde es sich anbieten den Nutzer erst nach erfolgreicher Bestellung zu fragen, ob dieser seine Daten für einen späteren Einkauf speichern und somit ein Benutzerkonto anlegen möchte. Dafür müsste der Nutzer im Gegenzug lediglich nur noch ein Passwort vergeben und schon ist die Registrierung abgeschlossen. Die Scheu für die eigentliche Registrierung wird dem Nutzer damit genommen und mögliche Abbrüche auf ein Minimum reduziert. Die Conversion-Rate wird dadurch dementsprechend positiv beeinflusst.

Es gibt aber noch eine Alternative zu einer möglichen Steigerung der Conversion-Rate oder zumindest einer bequemeren Registrierung. Das Schlagwort hier lautet: Social Sign-on.

Social Sign-on bezeichnet die Registrierung auf einer Webseite mittels eines bestehenden Profils bei sozialen Netzwerken (wie Facebook, Twitter und Google+), E-Mail-Anbietern (Google Mail, Yahoo, GMX etc.) und anderen Webdiensten. Die populärsten sind wohl:

• OAuth

• Twitter Authentication

• Facebook Authentication

• OpenID

• Google Account Federated Login

Klickt ein Nutzer auf einen dieser Buttons (z.B. Facebook), so öffnet sich ein Facebook-Pop-up, in dem der Nutzer der Webseite einmalig entsprechende Genehmigungen erteilen muss. Hierzu gehört unter anderem der Zugriff auf diverse Informationen des Nutzers wie das Profil, die „Likes“, Interessen, Fotos und Freunde. Nach erfolgreicher Zustimmung erhält die Webseite die entsprechenden Daten des Nutzers über eine Schnittstelle (API) von Facebook übermittelt. Die so erhaltenen Informationen kann für die automatische Registrierung des Nutzers, das Vorausfüllen eines Registrierungsformulars oder das Log-in des Nutzers verwendet werden. Der Nutzer muss sich somit keine weiteren Benutzernamen/Passwörter merken. Die Registrierungshemmschwelle sinkt mit Social Sign-on signifikant.

Vorteile von Social Sign-on:

• Es kann auf eine breite und aktive Nutzerbasis zurückgegriffen werden.

• Webseitenbetreiber erhalten eine Fülle an bereits validierten Nutzerinformationen, unter anderem die E-Mail-Adresse und den Namen des Nutzers.

• Die eigene Webseite kann um weitere soziale Features erweitert werden, die die entsprechenden sozialen Netzwerke über ihre Schnittstelle zur Verfügung stellen.

• Der Anmeldeprozess für die Nutzer ist schneller.

• Der Nutzer verspürt weniger Risiko beim Anmeldeprozess einer ihm unbekannten Seite.

• Die Nutzer müssen keine weiteren Log-in Daten merken

• Der Nutzer kann deutlich schneller mit der Webseite interagieren

Laut einer Studie von Janrain, wäre für 66 Prozent die Registrierung über ein bestehendes Profil in sozialen Netzwerken eine attraktive Alternative. Wiederum geben 42 Prozent der Befragten an, dass das Anbieten solch einer Alternative auch positiv auf die Marke zurück zu führen ist und zugleich einen Effekt von Kundenbindung einnimmt. Dies wird dann in Zusammenhang gebracht mit Wörtern wie „Up-to-Date“ oder „innovativ“. Weiter kann berichtet werden, dass Nutzer welche über den Social Sign-on auf eine Seite gelangen, sich intensiver mit der Webseite auseinandersetzen, mehr Geld beim Shopping ausgeben und auch Freunden von der Webseite erzählen.

Social Sign-on Beispiele:

http://www.sears.com

www.andreabocelli.us/

Zusammenfassend kann man sagen, dass viele Wege zur Conversion führen aber es gibt eben auch kleine Schrauben an denen gedreht werden kann. Dass dies mit Aufwand und Testen verbunden ist, ist schon lange kein Geheimnis mehr. Wer von Social Sign-on doch nicht ganz überzeugt ist, der findet evtl. im zweiten Teil meines Beitrags – Coming Soon – etwas ansprechendes für sich. Dort möchte ich weitere innovative Techniken zum Vereinfachen von Sign-Ups und Log-Ins vorstellen.

Wie allgemein bekannt empfiehlt Google pro Anzeigengruppe immer mehrere Anzeigen gleichzeitig zu testen. Um festzulegen, nach welchen Regeln die einzelnen Anzeigen geschaltet werden, konnte bisher zwischen zwei verschiedenen Optionen gewählt werden.

Eine Variante ist die leistungsunabhängige Anzeigenschaltung, bei der alle Anzeigen einer AdGroup möglichst gleichmäßig berücksichtigt werden. Diese Einstellung wird allerdings nur selten verwendet, denn weshalb sollten im Normalfall Ads, die schlechter klicken als andere, trotzdem genauso häufig ausgeliefert werden? Einziges Resultat wäre hier eine künstlich erzeugte schlechte Klickrate, die sich letzten Endes auch auf den CPC auswirkt.

Entsprechend wird von AdWords auch die andere bisher verfügbare Option als Standardeinstellung vorgegeben. Die Auslieferung wird hier im Hinblick auf zu erwartende Klicks optimiert, das heißt bei dieser Variante werden Ads mit einer höheren Click-Through-Rate in der Regel häufiger angezeigt als Anzeigen mit einer schlechten Performance.

Doch [...]]]> AdWords-Anzeigen müssen gute Clickraten (CTR) erzielen, um viel Traffic für eine Website zu generieren und günstige CPCs zu ermöglichen. Gleichzeitig sollten sie aber auch immer das Produkt realistisch bewerben, da ansonsten hohe Werbekosten anfallen ohne etwas zu verkaufen. In Google Adwords gibt es jetzt eine zusätzliche Einstellungsmöglichkeit, die die Auslieferungshäufigkeit von Anzeigen anhand der Anzahl der Conversions steuern soll.

Wie allgemein bekannt empfiehlt Google pro Anzeigengruppe immer mehrere Anzeigen gleichzeitig zu testen. Um festzulegen, nach welchen Regeln die einzelnen Anzeigen geschaltet werden, konnte bisher zwischen zwei verschiedenen Optionen gewählt werden.

Eine Variante ist die leistungsunabhängige Anzeigenschaltung, bei der alle Anzeigen einer AdGroup möglichst gleichmäßig berücksichtigt werden. Diese Einstellung wird allerdings nur selten verwendet, denn weshalb sollten im Normalfall Ads, die schlechter klicken als andere, trotzdem genauso häufig ausgeliefert werden? Einziges Resultat wäre hier eine künstlich erzeugte schlechte Klickrate, die sich letzten Endes auch auf den CPC auswirkt.

Entsprechend wird von AdWords auch die andere bisher verfügbare Option als Standardeinstellung vorgegeben. Die Auslieferung wird hier im Hinblick auf zu erwartende Klicks optimiert, das heißt bei dieser Variante werden Ads mit einer höheren Click-Through-Rate in der Regel häufiger angezeigt als Anzeigen mit einer schlechten Performance.

Doch eine gute Klickrate muss nicht zwangsläufig auch eine gute Conversionrate mit sich bringen. Gerade bei performance-orientierten Kampagnen kommt es jedoch genau darauf an – nämlich möglichst viele Conversions zu einem guten Preis zu erzielen.

Vor kurzem hat Google nun auf Wunsch vieler AdWords-Kunden eine neue Möglichkeit der Anzeigenauslieferung eingeführt: die Conversion-Optimierung.

Diese Variante funktioniert nach demselben Prinzip wie die Klick-Optimierung – nur dass hier eben innerhalb einer Anzeigengruppe die Anzeigen häufiger geschaltet werden, die vermutlich mehr Conversions erzielen als andere. Im Gegensatz zu den beiden bisherigen Varianten kann diese Art der Anzeigenauslieferung jedoch nur dann ausgewählt werden, wenn in dem jeweiligen Konto Google Conversion-Tracking aktiviert ist.

Für Konten, die diese Funktion nutzen besteht, allerdings die Gefahr in eine Abwärtsspirale zu geraten. Denn die Wechselwirkungen CTR – CPC – Conversionrate sind sehr komplex und kleine Änderungen können schnell zu einem Positionsverlust oder CPC-/ CPO-Anstieg führen, der die ursprüngliche Planung obsolet macht.

Wie bisher gilt: Automatisierung ist wichtig, aber die Erfahrung des Kampagnenmanagers  in Planung, Umsetzung, Monitoring und Steuerung bleiben letztendlich erfolgsentscheidend.

Ein Klick auf auf das Lupensymbol gleich neben dem Titel öffnet so einen Snapshot. Danach kann man einfach mit der Maus auf weitere Snippets fahren und sieht sofort das jeweilige Vorschaubild – AdWords Anzeigen in der rechten Spalte werden dabei von dem Snapshot überlagert.

Relevanten Textbereiche mit den entsprechenden Keywords werden mit einem orangen Rahmen hervorgehoben:

Das Vorschaubild kann – sofern der Suchende es nutzt – die Auswahl des Suchergebnisses erheblich beeinflussen. Insofern wird es zu einem wichtigen Faktor. Ein ansprechendes Design im Vorschaubild wird die Entscheidung des Users und damit die Klickraten positiv beeinflussen…

…und wahrscheinlich auch entsprechend [...]]]> Seit Mitte Oktober 2010 gibt es bei Google die neue Funktion „Google Instant Preview“ – also eine Vorschaumöglichkeit auf die Webseiten in den Suchergebnislisten von Google. Nachdem kurz davor „Google Instant“ kam, bei dem bereits beim Tippen des Suchbegriffs Suchergebnisse vorgeschlagen werden, gibt Google Instant Preview weiters die Möglichkeit ein kleines Vorschaubild als zusätzliche Information jedes Suchergebnisses anzeigen zu lassen. Mit diesem Snapshot erhält der Suchende schon mal einen ersten Eindruck der Sites – ergo kann und wird es ihn bei der Wahl der anzuklickenden Website beeinflussen.

Ein Klick auf auf das Lupensymbol gleich neben dem Titel öffnet so einen Snapshot. Danach kann man einfach mit der Maus auf weitere Snippets fahren und sieht sofort das jeweilige Vorschaubild – AdWords Anzeigen in der rechten Spalte werden dabei von dem Snapshot überlagert.

Relevanten Textbereiche mit den entsprechenden Keywords werden mit einem orangen Rahmen hervorgehoben:

Das Vorschaubild kann – sofern der Suchende es nutzt – die Auswahl des Suchergebnisses erheblich beeinflussen. Insofern wird es zu einem wichtigen Faktor. Ein ansprechendes Design im Vorschaubild wird die Entscheidung des Users und damit die Klickraten positiv beeinflussen…

…und wahrscheinlich auch entsprechend negativ…

Die Snapshots sollten ansprechen und passend sein. Design, Schriftgröße und Struktur müssen sitzen. Für den engagierten SEO ist das nichts Neues. Auch in der Zeit vor Google Instant Preview galt es nicht nur den User bei Google abzuholen, sondern ihn mit passendem Inhalt und ansprechendem Design auch in seiner Auswahl zu bestätigen und ihn auf der Website zur gewünschten Transaktion zu lenken.

Wie wichtig Google Instant Preview in der Praxis werden wird hängt von der Akzeptanz der User ab.  In jedem Fall geht Google damit wieder einen Schritt weiter in Richtung Vorqualifizierung und versucht Usern “Fehlentscheidungen” bei der Auswahl des Suchergebnisses zu ersparen. Auch wenn bei der Gestaltung der eigenen Website sicherlich nicht das Hauptaugenmerk auf das Erscheinungsbild der Google Vorschau gelegt werden muss, sollte es es zumindest nicht außer Acht gelassen werden, denn “Kleinigkeiten sind es, die Perfektion ausmachen, aber Perfektion ist alles andere als eine Kleinigkeit.” (Henry Royce).

E-Mail-Clients

E-Mail-Programme lassen sich in drei Gruppen einordnen: Desktop, Web und Mobile. Die wichtigsten Vertreter von betriebssystemnahen Programmen (Desktop) sind Outlook und Apple Mail – aber auch Entourage, Thunderbird und Lotus Notes finden verbreitet Anhänger. Auch wenn Microsoft mit seiner Outlook-Reihe die meisten Nutzer für sich entscheiden kann, bereitet gerade die veraltete Word-Renderengine seit Outlook 2007 erhebliche Schwierigkeiten bei der homogenen Darstellung einer HTML-E-Mail.

Webmailer wie Gmail, Yahoo! Mail, Hotmail oder AOL machen sich die Renderengine des verwendeten Browsers zunutze und haben durch ihre browsertypischen Eigenheiten auch ihre Tücken.

Im Bereich Mobile gibt es noch mehr zu beachten, denn hier kommt noch zusätzlich das Problem eines kleineren Displays hinzu, welches ferner einer speziellen Umsetzung bedarf.

Struktur

Um dieses Thema noch überschaubar zu halten, möchte ich nachfolgend nur auf die wesentlichen Regeln bei der Erstellung von HTML-Newsletter eingehen. Gerade durch die enorme Vielfalt an genutzten E-Mail-Clients empfiehlt es sich „back [...]]]> Obwohl HTML-E-Mails nicht nur optisch, sondern auch funktional mehr zu bieten haben als reine Text-E-Mails, ist die Umsetzung nicht zu unterschätzen. Vor allem durch die Verwendung unterschiedlichster E-Mail-Clients und Browser wird eine einheitliche Darstellung erschwert. Mit ein paar Regeln können jedoch moderne und ansprechende Newsletter erstellt werden, die dem Kunden gefallen und ihm als Bereicherung dienen.

E-Mail-Clients

E-Mail-Programme lassen sich in drei Gruppen einordnen: Desktop, Web und Mobile. Die wichtigsten Vertreter von betriebssystemnahen Programmen (Desktop) sind Outlook und Apple Mail – aber auch Entourage, Thunderbird und Lotus Notes finden verbreitet Anhänger. Auch wenn Microsoft mit seiner Outlook-Reihe die meisten Nutzer für sich entscheiden kann, bereitet gerade die veraltete Word-Renderengine seit Outlook 2007 erhebliche Schwierigkeiten bei der homogenen Darstellung einer HTML-E-Mail.

Webmailer wie Gmail, Yahoo! Mail, Hotmail oder AOL machen sich die Renderengine des verwendeten Browsers zunutze und haben durch ihre browsertypischen Eigenheiten auch ihre Tücken.

Im Bereich Mobile gibt es noch mehr zu beachten, denn hier kommt noch zusätzlich das Problem eines kleineren Displays hinzu, welches ferner einer speziellen Umsetzung bedarf.

Struktur

Um dieses Thema noch überschaubar zu halten, möchte ich nachfolgend nur auf die wesentlichen Regeln bei der Erstellung von HTML-Newsletter eingehen. Gerade durch die enorme Vielfalt an genutzten E-Mail-Clients empfiehlt es sich „back to the roots“ zu gehen und auf eine eher veraltete Tabellenstruktur zurückzugreifen – diese „garantiert“ noch am ehesten eine einheitliche Darstellung. Darüber hinaus ist der komplette Verzicht auf external Stylesheets ebenso zu empfehlen, wie die generelle Vermeidung von inline Stylesheets – einige Clients entfernen nämlich sämtliche Stylesheets aus dem Header und andere wiederrum ignorieren die inline Stylesheets völlig. Hier gilt die Regel, mit so wenig CSS auszukommen wie möglich. Abstände sollten daher besser durch ein transparentes Pixel in einer Zelle, mit einer bestimmten Höhe und Breite erreicht werden, anstatt dies mit „padding“ oder „margin“ zu erzielen. Auf „rowspan“ sollte ebenfalls verzichtet werden – besser mit geschachtelten Tabellen arbeiten.

Schrift

Mit einem <font>-Tag im Gegensatz zu den <p>-Tags oder sogar jeglicher Headline-Tags ist man ebenfalls auf der sichereren Seite. Noch ein Tipp: Outlook 2007 / 2010 erkennen problemlos line-heights bis zu 18pt, danach besitzen diese E-Mail-Clients allerdings ihre eigene Definition von Maßeinheiten. Es gibt bestimmte work-arounds, welche das line-height Problem beheben – aus Erfahrung heraus sollte darauf allerdings besser verzichtet werden, da gegebenenfalls an anderen Stellen neue Probleme entstehen können. Aus diesem Grund wird in diesem Beitrag auch nicht weiter darauf eingegangen. Bei Sonderzeichen ist die Verwendung von HTML-Entities immer vorzuziehen, obwohl die UTF-8-Codierung meist zuverlässige Arbeit leistet. Auch wenn eine schöne Hintergrundfarbe im Body den Newsletter durchaus unterstützen kann, sollte einem bewusst sein, dass auch dieser gegebenenfalls ungewollter Weise von einem weißen Hintergrund ersetzt wird – es empfiehlt sich daher die Auswahl einer Hintergrundfarbe, welche unabhängig vom eigentlichen Content visuell unterstützend wirkt.

Bilder

Die Verwendung von ansprechenden Bildern ist natürlich gern gesehen, obgleich es auch hier wieder Einiges zu beachten gibt. Die wichtigste Regel besagt: Der Newsletter sollte auch immer ohne Bilder klar verständlich und gut lesbar sein. Bilder werden gerne vom E-Mail-Client geblockt, wodurch der Leser auf den ersten Blick nur alle Textinformationen dargestellt bekommt – Bildmotive werden durch Platzhalter ersetzt und dienen daher nicht als Kommunikationsmittel. Die Verwendung von ausdruckstarken ALT-Tags kann somit sehr nützlich sein. Darüber hinaus werden seit Outlook 2007 leider keine Hintergrundbilder dargestellt. Aus diesen Gründen bietet sich die Übermittlung der Kernbotschaft in textlicher Form besser an und verringert gleichzeitig noch die Chance, dass der Newsletter im Spam-Filter landet, welcher HTML-E-Mails, mit höherem Bild- als Textanteil gerne aussortiert. Nebenbei sind auch Preisangaben und $- oder €-Zeichen bei Spam-Filtern gern gesehen – gerade im Betreff! Generell ist eine Breiten- und Höhenangabe bei Bildern ratsam, um die Chance einer unbeabsichtigten Darstellung zu minimieren. Die Dateigröße bei Bildern sollte natürlich auch so klein wie möglich gehalten werden und die Bilder idealerweise auf einem Server abgelegt und per absolutem Pfad verlinkt sein, um die Gesamtgröße der HTML-E-Mail zu verringern. Eine kleine Besonderheit bei Gmail im Firefox bedarf noch zusätzlicher Aufmerksamkeit: Dieser Client stellt gerne kleine Abstände bei Bildern dar, welche dem Gesamtdesign, gerade bei aufeinanderfolgenden Bildern, sehr schaden können. Lösung: Wenn man jedes Image auf „display: block“ setzt, wird diese ungewünschte Besonderheit aufgehoben und es entsteht auch bei keinem anderen Client ein Problem.

Abb. 1: Weiße Abstände bei Gmail (Firefox) Keine Abstände mit „display: block“ bei Gmail (Firefox)

Usability

Zu guter Letzt empfiehlt es sich immer einen Link zur Webversion des Newsletters anzubieten, falls das E-Mail-Programm doch noch etwas an dem mühsam erarbeiteten Code auszusetzen hat (siehe Abb. 2). Desweiteren freut sich der Kunde über klare Aussagen im Betreff und übersichtlich strukturierten Content. Eine persönliche Anrede klingt freundlich und erhöht in der Regel auch die Konvertierungsrate. Ein Impressum wirkt nicht nur seriöser, sondern ist in Deutschland sogar Pflicht, ebenso wie ein Abmelde-Link! Abgesehen davon, sollte dieser auch nicht versteckt werden, sondern schnell auffindbar sein – gewöhnlich am Ende des Newsletters.

Abb. 2: Noch vor dem Header zu Beginn des Newsletters ist ein Link zur Webversion positioniert

Testing

Wenn nun schlussendlich der Newsletter angefertigt worden ist, will man ihn in der Regel nicht ungetestet verschicken – hier kann das Testing Tool Litmus weiterhelfen. Es bietet die Möglichkeit die HTML-E-Mail auf sämtliche im Umlauf befindlichen E-Mail-Programme zu testen. Nach einer bestimmten Wartezeit (abhängig von der Anzahl an E-Mail-Clients) liefert Litmus einen Screenshot der versendeten HTML-E-Mail zu jedem Client und man kann seinen Newsletter und die abweichenden Darstellungen gezielt unter die Lupe nehmen (siehe Abb. 3).

Abb. 3: Screenshots sämtlicher E-Mail-Clients unter Litmus (Übersichtsansicht)

Abschließend will noch gesagt sein, dass diese Tipps als Hilfestellung dienen sollen und kein Patentrezept darstellen. Jeder hat seinen eigenen Entwicklerstil und sich vielleicht auch andere Vorgehensweisen erarbeitet. Es gibt ebenso einige Firmen, die sich gezielt nur an die Darstellung bestimmter Clients orientieren, wie beispielsweise an Apple-Nutzer – hier kann ganz anders gearbeitet werden, denn die Darstellungen in Microsoft Outlook interessieren an dieser Stelle nicht. Wer aber eine Zielgruppe in einem breiten Spektrum ansprechen will, der kommt nicht herum sich weiter zu informieren und zu testen. Die Erstellung von Newslettern ist eben nicht ganz trivial und es ist in der Regel viel Erfahrung nötig, um exzellente Client-übergreifende Newsletter anzufertigen.