Alle Beiträge von Astrid Sackel

Das Einfache ist nicht immer das Beste. Aber das Beste ist immer einfach.

Was macht eine Landingpage erfolgreich?

Erfolgreiche Landingpages sind besonders wichtig im Online-Marketing und mittlerweile fast genauso wichtig, wie eine Unternehmens-Webseite selbst. Doch was ist eigentlich eine Landingpage? Was zeichnet sie aus? Und was macht Landingpages erfolgreich? Diesen Fragen wollen wir hier nachgehen.

Was ist eine Landingpage?

Der Name verrät es eigentlich schon: eine Landingpage ist eine beliebige Webseite, auf der Nutzer:innen durch eine Aktion landen. Es gibt also eine Vorgeschichte und eine konkrete Absicht, was Nutzer:innen auf dieser Landingpage tun möchten.

Woher kommen Nutzer:innen?

Häufig kommen Nutzer:innen von externen Touchpoints auf die Landingpage. Typische Ausgangspunkte sind:

  • Google AdWords
  • Facebook Ads
  • Social Media Postings
  • Suchmaschinen
  • Gewinnspiele
  • Print-Kampagnen
  • Externe Webseiten (Blogs, Newsportale, Vergleichsportale, etc.)
  • Eigene URLs

Landingpages können auch beliebige Unterseiten von einer Webseite sein. Damit ist aber weniger die Homepage, also die Startseite der Webseite gemeint. Diese ist als Landingpage zu allgemein gehalten. Auf der Homepage werden oft viele verschiedene Zielgruppen angesprochen und viele unterschiedliche Inhalte dargestellt. Das besondere an Landingpages ist, dass häufig nur eine Zielgruppe angesprochen wird und auch nur eine bestimmte Aktion oder ein Ziel ausgeführt werden soll.

Welche Ziele können Landingpages haben?

Die Ziele können unterschiedlich sein. Es muss nicht immer gleich eine Bestellung sein. Häufige Ziele sind:

  • Whitepaper Download
  • Anmeldung zu einem Event (Webinar, Schulung etc.)
  • Newsletter Anmeldung
  • Kontaktaufnahme durch Kontaktformular
  • Telefonanrufe für Erstberatung, telefonische Bestellung etc.
  • Bestellung eines Produktes

Wichtig ist bei den Zielen darauf zu achten, an welcher Stelle der Customer Journey sich Nutzer:innen befinden. Äußerst selten wird bei einem ersten Kontakt gleich ein Produkt bestellt.  Nutzer:innen möchten sich lieber zuerst informieren und abwägen, bevor ein teures Produkt gekauft wird.

Ein typischer Anwendungsfall für eine Landingpage

Die typischen Landingpages sind Seiten, die auf eine Anzeigen-Kampagne folgen. Google hat mit seinen AdWords die Wichtigkeit von Landingpages in den Fokus gerückt. Eine typische Anwendung ist beispielsweise die folgende: Sie erstellen eine Kampagne zu einem bestimmten Keyword und verlinken diese AdWords Kampagne auf die dafür optimierte Landingpage. Das kann eine Unterseite Ihrer Unternehmens-Webseite sein. Wenn die Kampagne jedoch auf ein bestimmtes Produkt oder ein Thema aufbaut und eine besondere Zielgruppe ansprechen soll, kommen Sie mit einer Unterseite schnell an Ihre Grenzen.

Konkretes Beispiel einer Landingpage:  

Sie verkaufen Schuhe und möchten den Online-Kanal stärker ausbauen. In Ihrem Schuhladen haben Sie sich in den letzten Jahren besonders in dem Bereich Kinderschuhe als Experte positioniert.

Die Unternehmens-Webseite spricht alle Zielgruppen gleichermaßen an und soll das breite Produkt-Spektrum zeigen.

Wenn Sie nun eine Anzeigen-Kampagne zu dem Thema „Perfekt sitzende Kinder-Winterstiefel“ schalten, macht es Sinn, für die Landingpage eine eigene Bild- und Farbsprache zu entwickeln, die speziell Eltern und Kinder in der Winterzeit anspricht. Selbst die Headline-Schrift kann dabei das Thema emotional herausstellen. Das macht deutlich, dass Sie mit einer eigenständigen Landingpage viel freier in der Gestaltung sind.

Zudem kommt es auf einen überzeugenden Inhalt an. Es ist wichtig, dass sie sich inhaltlich auf Ihr Spitzenprodukt für diese Kampagne konzentrieren. Positionieren Sie sich als Experte und erklären, was beim Kauf von Kinder-Winterstiefeln besonders wichtig ist und was bei den meisten Kinderstiefeln für die optimale Passform fehlt. Stellen Sie die Vorteile Ihres Produktes heraus und unterstützen Sie Ihre Aussage durch vertrauensfördernde Testimonials oder Kunden-Bewertungen.

Beschränken Sie die Landingpage bewusst auf ein Produkt, damit die Nutzer:innen im Verkaufsprozess nicht abgelenkt werden von anderen Produkten. Am Ende der Landingpage steht eine Aktion im Mittelpunkt, die Nutzer:innen keineswegs übersehen können: Der Kauf dieses Winterstiefels.

Je überzeugender Ihre Argumentationskette aufgebaut ist und je ansprechender Ihr emotionales Design dargestellt ist, desto höher werden Ihre Verkaufszahlen und der Erfolg der Landingpage sein. Header und Footer können ganz individuell gestaltet sein, oftmals auch ganz reduziert mit Logo im Header und Onlinekauf Details und Kontaktinformationen im Footer.

Das zeichnet eine Landingpage aus:

  • Nutzer:innen landen durch eine konkrete Aktion auf einer Landingpage.
  • Es gibt einen externen Auslöser, eine Vorgeschichte
  • Es gibt ein konkretes Ziel, was Nutzer:innen auf der Landingpage verfolgen
  • Die Zielgruppe ist eingegrenzt und konkreter
  • Oft sind Header und manchmal auch Footer reduziert
  • Meist entfällt die Navigation, um vom Ziel nicht abzulenken

Der Weg zu einer erfolgreichen Landingpage

Da Landingpages im Online-Marketing eine große Wirkung haben, werden sie häufig als eigene Maßnahme betrachtet und erhalten ein abgewandeltes Design im Vergleich zur Unternehmens-Webseite. Durch Optimierungen im Design und im Inhalt kann der Erfolg einer Landingpage maximiert werden.

Das macht eine Landingpage erfolgreich:

  • Reduzierter Inhalt, der sich auf eine Lösung des Anliegens konzentriert
  • Bewerben von einem Produkt, einer Aktion oder einer Kontaktaufnahme
  • Keine Ablenkung durch andere Produktgruppen oder weitere Aktionen
  • Ein individuelles Design, das perfekt abgestimmt ist auf die Zielgruppe und das Thema
  • Eine eigene Bildsprache, die emotional positiv heraussticht
  • eigene Headline-Schrift, die das Thema emotional unterstreicht
  • Eine überzeugende Argumentationskette, die in aussagekräftigen Headlines schnell vermittelt wird
  • hochwertige und auffallende Microinteractions
  • Vertrauensbildende Kundenstimmen oder Bewertungen
  • Ein deutlicher Call-to-Action am Ende der Landingpage, der von Nutzer:innen mit Überzeugung geklickt wird.

Gute Beispiele für Landingpages

Jede Regel für Landingpages kann natürlich gebrochen werden. Wichtig ist allein, dass die Landingpage Nutzer:innen überzeugt.

Airbnb

Quelle: airbnb.de

Airbnb schafft es mit seiner Landingpage neuen Gastgebern die Vorteile und Freude zu zeigen, wenn sie eine Unterkunft bei Airbnb teilen. Vor allem die persönliche Nähe zu weltweiten Gastgebern wird deutlich. Dies wird besonders durch die Bildwelt und die Handschrift vermittelt. Die richtigen Fragen im interaktiven Formular zeigen auf, wie einfach der Einstieg ist. Zudem bietet die Plattform den Interessenten viel Unterstützung  an und macht damit den Einstieg so leicht wie möglich. Der Call-to-Action ist als Sticky-Button jederzeit präsent und sticht als einziger Button mit der roten Farbe heraus. Die Navigation im Header entfällt. Dafür sind in der Footer-Navigation hilfreiche weiterführende Links aufgelistet. 

Bugatti

Quelle: bugatti-smartwatches.com

Mit der Smartwatch Landingpage schafft es Bugatti Nutzer:innen in die Luxuswelt der Automarke eintauchen zu lassen. Zudem werden währenddessen alle Vorteile der Luxus-Smartwatch aufgeführt. Die Landingpage ist etwas lang. Man kennt diese Fülle an Inhalten bereits von Produktpräsentationen der Marke Apple oder Samsung. Es scheint fast je teurer das Produkt umso länger der Argumentationsaufbau, damit am Ende keine Zweifel mehr bestehen. Die Landingpage glänzt mit zahlreichen Scrolleffekten und Microinteractions, die den langen Inhalt auf interessante Weise hervorheben. Zudem spielen 3D und selbstablaufende Videos eine große Rolle. Im Footer findet man einen gigantischer Call-to-Action Button zu einem externen Shop, in dem man die Uhr kaufen kann.

Samsung

Quelle: samsung.com

Die Samsung Landingpage toppt die Länge der Webseite bei weitem. Aber auch hier gibt es einige gute Ideen. Zum einen kann die Landingpage durch eine Sticky-Anker-Navigation angesteuert werden. Pre-Order ist der präsenteste Button, der immer oben rechts platziert ist. Die gesamte Navigation der Samsung Webseite ist unter einem Hamburger Icon oben rechts versteckt und lenkt somit Nutzer:innen nicht ab.

Lufthansa 

Quelle: miles-and-more-kreditkarte.com

Die Landingpage der Lufthansa für die Miles and More Kreditkarten stellt gleich zwei Produkte gleichzeitig vor. Durch den Vergleich der Gold Credit Card mit der Blue Credit Card werden die Vorteile des teuren Produktes deutlich. Zudem kann die Zielgruppe immer noch das Einstiegsprodukt wählen, falls sie noch nicht ganz überzeugt ist. Das schöne an der Landingpage sind die zwei Sticky-Warenkorb-Buttons in der Mitte der Seite. Somit bleibt der Call-to-Action präsent im Fokus.

Fazit

Zusammenfassend gibt es vier Faktoren die für die Erstellung einer guten Landingpage wichtig sind:

  • Reduzierung auf eine Aktion und eine konkrete Zielgruppe
  • Überzeugender Inhalt als Argumentationskette aufgebaut
  • Ein emotionales Design das sich von den Wettbewerbern abhebt
  • Eine klare Nutzerführung mit einem Call-to-Action am Ende

Wenn Sie selbst eine Landingpage erstellen wollen, überlegen Sie sich, welche Unterseiten Ihrer Unternehmensseite besonders häufig besucht werden. Unabhängig von der Webseite sollten Sie zudem ermitteln, welche Produkte und Themen besonders nützlich für Interessenten sind, in denen Sie Nutzer:innen eine Lösung bieten können.

Benötigen Sie Hilfe bei der Umsetzung einer Landingpage? Ob für Inhalt, Konzept, Design oder technische Umsetzung – wir unterstützen Sie gerne! 

Design Trends 2011

Wir haben uns im Internet umgeschaut, welche neuen Designtrends sich 2011 durchsetzen. Die Artikel von Jacqueline Thomas auf Webdesign Ledger und von Brandon Jones auf Webdesign Tuts+ decken dabei viele interessante Punkte auf. Hier haben wir die wichtigsten Trends für 2011 zusammengefasst.

 

01 Design verbindet sich mit neuester Technologie

Heute erweitern technische Möglichkeiten ein gutes Design. Es geht nicht mehr darum statisch gut auszusehen, sondern auch schnell zu reagieren und dem Nutzer ein intuitives und interaktives Designerlebnis zu bieten:

Eine aussergewöhnliche Erlebnisreise
Mouseerlebnis mit Javascript

02 Der Durchbruch von HTML 5 und CSS 3

HTML 5 bietet viele beeindruckende Möglichkeiten, die zuvor nur in Flash möglich waren:

Zeicheneffekte mit HTML 5 …
… und im Vergleich mit Flash

03 Mobile Ready

Statistiken zeigen, dass schon 2011 mehr Smartphones verkauft werden sollen als PCs. Der Tablet-Markt boomt, wobei Netbooks schon wieder fast veraltet sind. Man kann also davon ausgehen, dass zunehmend Webseiten auf verschiedenen mobilen Geräten wie Smartphones und Tablets betrachtet werden. D.h. auch Flashelemente sollten immer eine alternative statische Lösung bieten.

04 Flexible Auflösung

Eine optimale Auflösung gibt es in Zukunft nicht mehr. Designs müssen auf Smartphones, Tablets und Desktop-PCs funktionieren. Proportionen ändern sich und selbst eine festgelegte Scrollmarke ist unmöglich durch einfaches Drehen des Mediums.  Der Benutzer entscheidet in Zukunft selbst in welchem Format er Inhalte liest und das Design muss sich flexibel anpassen.

 

05 Touchscreen besitzt kein Mouse Over

So intuitiv und einfach: Das Touchscreen wird bald allgegenwärtig bei zahlreichen Smartphones, Tablets und nun auch bei einigen Desktop-PCs. Doch sie kennen keine Mouseover Effekte. Links müssen daher deutlich erkennbar sein und liebevolle Mouseover Effekte entfallen gänzlich.

06 Tiefenwirkung

3D Effekte erhalten Einzug in das Web, indem wir Elemente in verschiedenen Ebenen darstellen, räumliche Schatten, Überlagerungen oder kreisende Effekte, wie wir es bereits aus den Coverflows kennen. Ein einfaches und dennoch beeindruckendes Beispiel zeigt Nike:

3D Effekte bei Nike

Auch parallaxes Scrollen erzeugt die Wirkung von mehr Tiefe. Hier ein einfaches Beispiel für Parallaxes Scrollen im Hintergrund mittels CSS:

Parallaxes Scrollen mit CSS
… und ein Beispiel mit Flash

07 Großflächige Bild-Hintergründe

Nicht neu, jedoch immer wieder ein guter Eyecatcher:

Hochauflösende Hintergrundbilder als emotionaler Einstieg auf der Startseite
Flexibles Hintergrundbild mit statischem Menü

08 Hintergrund Textur

Neben großflächigen Bildern treten auch immer mehr greifbare Texturen in den Hintergrund eines Designs und verleihen diesem eine hochwertige und persönliche Note.

Dezente Hintergrundtextur
oder ausdrucksstarke Textur

09 Thumbnail Design

Google hat es eingeführt: die Thumbnail-Links. Äußerst hilfreich für externe Links:

Googles Thumbnail-Links

10 Live Feeds

Twitter und Facebook werden nun nicht mehr nur verlinkt, sondern Livefeeds werden direkt auf der Webseite eingefügt. Somit sind Informationen gesammelt auf der Webseite zu finden und die Webseite wirkt aktueller und persönlicher.

Live Feeds direkt auf der Webseite integriert

11 Individuellere & vielseitigere Domain-Endungen

Die Weave 01.2011 berichtet, dass 2011 in Deutschland neue Top Level Domains hinzukommen nach dem Muster .stadt oder .firma. Ab dem 30. Mai 2011 können diese dann bei der ICAN beantragt werden. Branchen-Domains wie .film und .hotel sind auch geplant.

12 Typographisches Design

Durch neue Technologie gibt es zunehmend die Möglichkeit verschiedene Schriften zu verwenden

Einsatz von großer Typo

13 Großflächiges Raster

Ein gut definiertes Raster ist im Design nichts Neues. Doch neuerdings sieht man auch Raster, die sich auf die komplette Breite anpassen, vollflächige Informationen einfach strukturiert:

Vollflächiges Raster

Was denkt ihr dazu?

Dies ist nur ein kleiner Ausblick in das was uns 2011 erwarten könnte.
Was denkt ihr über die neuen Trends? Gibt es Trends, die ihr schon lange nicht mehr sehen könnt, oder neue Funktionen, die ihr vermehrt im Internet sehen möchtet? Wir freuen uns auf euer Feedback.

Facebook erreicht Hollywood

Facebook ist das neue Google, Mark Zuckerberg der neue Bill Gates, und nun erreicht Facebook auch Hollywood.

Gerade ist der Trailer erschienen:

Im Oktober 2010 kommt der Kinofilm „The Social Network“ in die Kinos. Dabei handelt es sich keineswegs um einen Witz. Echte Hollywood Größen sind dabei, wie Regisseur David Finch („Der seltsame Fall des Benjamin Button“), Produzent Kevin Spacey, Jess Eisenberg als Mark Zuckerberg und Justin Timberlake als Sean Parker (Facebook Präsident). Und ein dramatischer Untertitel

„You don’t get to 500 million friends without making a few enemies“.

Die Grundlage bildet das Buch »The Accidental Billionaires« von Ben Mezrich, in dem Mark Zuckerbergs Leben ziemlich kritisch dargestellt wird.
Man kann also gespannt sein, wie das Leben des 26 Jahre alten Jung-Unternehmers und Billionär in dem neuen Hollywood Drama dargestellt wird, nachdem das Unternehmen nun fast täglich in den Medien thematisiert und kritisiert wird.

Aber es ist schon bemerkenswert, wie rasant und revolutionär die Entwicklung von Facebook ist. Nach nur 6 Jahren (Februar 2004) nachdem die Platform entwickelt wurde, läuft der erste Kinofilm an. Einen vergleichbaren Hype weltweit hat bisher wohl noch kein Unternehmer ausgelöst.

Fragt sich jetzt wie viele Fans der Film haben wird …

Planemob: Witzige Werbung die begeistert

Wieder einmal ein hervorragendes Beispiel für virales Marketing:
Enorm witzig, mutig und frech und wen spricht die Billigflieger-Familie nicht an?

Germanwings hat mit dieser mutigen Kampagne viel Aufsehen erregt und auch Zuspruch gewonnen, das zeigen über 290.000 Aufrufe auf Youtube und zahlreiche Kommentare. Die Kosten für Pappschilder, Handkamera und Billig-Flugtickets liegen im untersten Low-Budget Bereich, der Effekt ist unbezahlbar, und ein erfolgreiches Kontern von Konkurrent easyjet nahezu unmöglich.

Und der Name Planemob rundet die Kampagne ab, trendy, kurz, aussagekräftig und bleibt sicher im Gedächtnis.

How to iPad

Bereits 3 Millionen verkaufte Exemplare nach nur 80 Tagen zeigen, dass das iPad mehr ist als nur ein Spielzeug. Es gilt vor allem für die Verlagswelt als revolutionär. Doch eines muss man dabei beachten, auch wenn es wirkt wie eine Kreuzung aus Touchscreen Handy und Laptop: Das iPad ist ein neues Medium und hat damit seine ganz eigenen Regeln.

Wie man mit diesen Regeln umgehen kann, zeigen zwei Adaptionen von Printzeitschriften auf das junge Medium iPad:

Die Spiegel-App für das iPad wurde stark kritisiert. So wurde von vielen bemängelt, das Print-Layout wäre vollkommen uninspiriert übernommen worden ohne auf die neuen Gegebenheiten des iPads einzugehen wobei auch viele unschöne typographische Fehler auftraten.

Das US-Magazin Wired zeigt wie es trotz noch bestehender Mängel besser geht und gilt trotz grafischer Kinderkrankheiten als wegweisend im iPad-Publishing.

Wired und Problemkind Spiegel auf dem iPad
Wired und Problemkind Spiegel auf dem iPad

So designt man auf dem iPad

Der kleine Bildschirm mit einer pixeldichten 1024×768-Auflösung bietet leider nicht viel Platz für ein ausgefallenes Seitenlayout. Daher sollte der Fokus auf Inhalt und Weißraum liegen, ohne ablenkende irreführende Verschnörkelungen. Zudem kommt der breite schwarze Rahmen des Gerätes hinzu, der jedes Design zunehmend eingrenzt und schmälert.

Nur eine Handbewegung des Benutzers entscheidet zwischen Hoch- und Querformat. Das haptische dreidimensionale Blättererlebnis gibt es nun also auch in 2D. Das bedeutet, Inhalte müssen variabel angelegt werden, hochausgeklügelte Spalten-Raster und Doppelseiten-Konstrukte aus Printzeiten gehören auf dem iPad der Vergangenheit an. Flexibilität, Reduzierung und Interaktivität sind die großen Schlagworte beim iPad-Design.

Viel mehr als wir es bereits im Internet gewöhnt sind, geht es beim iPad um Beständigkeit von Funktionselementen z.B. der Position und dem Aussehen von Navigationspunkten.

Mehrspaltiges Leseproblem auf dem iPad
Mehrspaltiges Leseproblem auf dem iPad

Von einem Spaltenlayout ist eher abzuraten. Auch im Querformat lässt sich ein einspaltiger Text mit viel Freiraum oder Bild schneller lesen als mehrspaltige Texte, die den Lesefluss irritieren – vor allem wenn in 2D geblättert wird. Und im Gegensatz zum Print hat das iPad keinerlei Seitenbeschränkung.

Oberstes Gebot beim iPad-Publishing: digitaler Text soll schnell und bestmöglich lesbar sein. Daher sollten an die Bildschirmdarstellung optimierte Screen-Fonts verwendet werden, um dem Effekt des sogenannten Schrift-Renderns, der den Text unscharf macht, auf dem iPad entgegenzuwirken. Schriftgröße, Zeilenabstand und Spaltenabstand müssen großzügiger gewählt werden je kleiner der Bildschirm ist.

Werbung sollte eher vollflächig eingebunden werden. So hat sie genug Platz, wird dennoch als weniger störend empfunden und eventuell sogar als kleine Atempause zwischen all den ganzen anderen Inhalten angesehen.

Vor allem muss die iPad-App interaktiv sein. Die Kosten-Nutzen Relation muss überzeugen. Denn während zu Anfang noch der Hype wirkt, als erste App zu erscheinen, so zeigt der Spiegel, daß dieser Glanz schnell verzogen ist, wenn die App nicht hält, was die Papierausgabe verspricht. Sicher ist: digitale Inhalte müssen Mehrwert bieten gegenüber ihrer Ausgabe auf dem Papier.

Die Argumente, jederzeit mobil und abrufbar zu sein, überzeugen längst nicht jeden Nutzer, eine digitale Zeitschriftenausgabe zu kaufen. Denn der Preis stellt auch oft noch eine Schwelle dar: dank Apples Anteil an dem Kaufpreis kann der Preis für die App sogar über dem Preis der Printausgabe liegen (Spiegel-Printausgabe für 3,85 EUR,  Spiegel-iPad-App 3,99 EUR).

Fazit

Eine iPad-App muss den hohen Ansprüchen digitaler Leser gerecht werden, um die User zufrieden zu stellen. Es müssen Funktionen vorhanden sein wie z.B. eine ausgefeilte Volltextsuche, Zoom- und Kopierfunktion, weiterführende Links, Videos, Audio-Files, die Möglichkeit in alle Richtungen zu Blättern, mit Querverweisen zu navigieren usw.

Die Möglichkeiten des iPads müssen sich wohl noch erst entwickeln, aber es zeigt sich schon jetzt, „iPad is not iPaper“ (Erik Spiekermann). Eine Zeitschrift auf dem iPad will mehr sein als ein digitaler Export seiner Print-Ausgabe, um diesem neuen Medium gerecht zu werden.

Ich bin gespannt auf die Entwicklung und hoffe, dass in Zukunft mehr glänzende iPad-Magazine wie das Wired aus dem Boden sprießen, vor allem auch im deutschsprachigen Raum.