RSS
 

Posts Tagged ‘Design’

Trend: Übersicht schaffen mit überdimensionaler Navigation

19 Apr

Navigation Neckermann.at

Es gibt ja schon seit längerem einen kleinen Trend dazu überdimensionale Overlay Navigationionen auf Websites einzubinden. Das will ich in diesem Beitrag kurz aufgreifen, da ich hierbei ein großes Potential sehe. Durch entsprechende Navigationselemente lassen sich sehr umfangreiche Menüstrukturen übersichtlich darstellen. Aber nicht nur die schiere Anzahl an Kategorien und Unterseiten kann zum ausschlaggebenden Element werden. Daher habe ich ein paar Beispiele herausgepickt und versuche die positiven Aspekte hierbei zu beleuchten.

Read the rest of this entry »

 

Konzeption von Landingpages (Teil 2)

07 Apr

Weiter geht’s mit der Fortsetzung zum Thema Landingpages.

Dieser Beitrag ist Teil 2 einer dreiteiligen Serie:
Grobkonzeption: Wirtschaftlichkeit, Traffic generieren (Teil 1)
Feinkonzeption: Seitenaufbau (Teil 2)
Auswerten, Optimieren und Praxisbeispiele (Teil 3)

Feinkonzeption: Seitenaufbau (Teil 2)
Im zweiten Teil geht es um den detaillierten Aufbau der Landingpage. Dieser hängt natürlich sehr stark vom Zweck der entsprechenden Website ab. Grundsätzlich kann man aber sagen, dass folgende Punkte sehr wichtige Key Elemente für verkaufsorientierte Landingpages (bei Brandingkampagnen sieht es etwas anders aus) bilden:

Ablenkungen vermeiden
Auf der Landingpage sollte alles auf das definierte Ziel ausgerichtet sein. Soll beispielsweise ein Produkt verkauft werden, dann sollte es vermieden werden andere Produkte oder weiterführende Links zu anderen Websites anzubieten. Dadurch wäre die Gefahr, dass der User abgelenkt wird zu hoch. Aus diesem Grund sollte eine Landingpage auch nicht in die eigentliche Corporate Website eingebunden bzw. die Hauptnavigation der Firmen Website auf der Landingpage integriert werden. Falls es dennoch Querverlinkungen oder eine Hauptnavigation geben muss, sollte diese optisch klar abgegrenzt werden. Der Benutzer muss auf einen Blick erkennen, dass die Links von der Landingpage weg führen und nichts mit der eigentlichen Aktion zu tun haben. Das kann etwa optisch durch eine versteckte Navigation, deren Menüpunkte erst beim Mouse Over über einen Button “Firmenwebsite” erscheinen, oder durch einen geringen Kontrast (Hauptnavigation mit geringer Deckkraft integrieren, beim Mouse Over wird die Deckkraft auf einen normalen Wert erhöht) erreicht werden.

In der Frage ob eine Landingpage in die eigentliche Website integriert werden soll, gibt es auch eine gegensätzliche Meinung. Vertreter dieser Auffassung argumentieren, dass Benutzer in weiterer Folge nicht mehr auf die Landingpage zurückfinden, da diese nicht fest in der Website verankert sind. Dennoch sehe ich Landingpages immer als eigenständige Seite die allerdings von der Corporate Website aus durchaus unterstützend verlinkt werden kann und auch soll.

Erfüllen der Erwartungshaltung
Ist der Benutzer über den Click auf eine Einschaltung auf die Landingpage gekommen, so hat dieser meist eine Erwartungshaltung. Diese Erwartungshaltung sollte erfüllt werden. Das heißt, dass das Wording an die Adwordskampagne angepasst werden sollte und die verwendeten Bilder bzw. die gesamte Gestaltung an die grafischen Werbemittel angepasst werden sollten. 
    
Call to Action
Call to Action beschreibt eine prominente Botschaft die den Benutzer zum Abschluss führt. Hierfür werden gerne auffällige, Buttons mit einer eindeutigen Aufforderung (Jetzt bestellen, etc.) verwendet. Hierbei ist die grafische Gestaltung besonders wichtig. Die entsprechenden Elemente müssen deutlich hervorstechen und als clickbar erkennbar sein.

Zielgruppengerecht gestalten
Ein weiterer sehr wichtiger Punkt ist die Zielgruppengerechte Gestaltung der Landingpage. So sollte speziell Alter und Computeraffinität berücksichtigt werden. Bei Senioren als Zielgruppe macht es durchaus Sinn Punkten wie Barrierefreiheit, einfache Bedienung, große Schrift, etc. mehr Bedeutung beizumessen als bei einer Seite für Teenies.

Seriösität vermitteln
Die ganze Landingpage muss seriös sein und auch serios wirken. Daher müssen auf jedenfall Impressum, Kontaktmöglichkeiten und falls vorhanden auch e-Commerce Gütesiegel integriert werden. Zusätzlich wirken sich Testimonials und Kundenbewertungen positiv aus.

Einfache Bedienbarkeit
Der Bestellprozess muss besonders einfach zu bedienen sein. Jede Unklarheit kann den potentiellen Kunden verunsichern und zu einem Kaufabbruch führen. Daher sollte besonders darauf geachtet werden, dass der Kunde mit möglichst wenigen Clicks und möglichst wenigen ausgefüllten Formularfelder zum Ziel kommt.

Zusätzliche Anreize
Falls die Möglichkeit zusätzliche Anreize für den Kunden zu schaffen besteht sollte das genützt werden. So können Sonderangebote, Gutscheine zu jeder Erstbestellung, etc. prominent angekündigt werden. Aber auch eine Zeitliche Verknappung kann sich positiv auf die Conversionrate auswirken. Siehe hierzu auch meinen Artikel: „Verknappung als Mittel zur Verkaufssteigerung“ 

Hinweis auf weitere Angebote
Das ist jetzt ein Widerspruch zum ersten Punkt, aber in Abhängigkeit vom Angebot kann es durchaus Sinnvoll sein am Ende der Seite auf weitere Angebote hinzuweisen. Nach dem Motto: “Entspricht dieses Produkt nicht Ihren Vorstellungen? Stöbern Sie in unserem weiteren Angeboten.” Hierbei ist allerdings wichtig, dass dieser Aufruf keine Konkurrenz zum Produkt auf der Landingpage darstellt. Anbieten würde sich so etwas zum Beispiel am Ende einer Liste mehrere Produkte. Dadurch kann ein Besucher der über die Landingpage nicht überzeugt werden konnte, eventuell doch für ein anderes Produkt begeistert werden.

Weitere Punkte hierzu habe ich in einem gesonderten Artikel “Optimierung von Registrierungsprozessen” in meinem Blog veröffentlicht.

 

Schönere Unterstreichungen

11 Mrz

Regelmäßig stören mich Die recht hässlichen und Typografisch gar nicht tollen Unterstreichungen die normalerweise im Web zu finden sind.  Konkret stört  mich daran, dass die Unterlängen der Zeichen durchgestrichen sind und das Ganze dadurch sehr gedrängt wirkt. Aus diesem Grund bin ich dazu über gegangen das eigentlich dafür vorgesehene und übliche CSS Tag text-decoration:underline; zu boykottieren. Viel schöner finde ich das Unterstreichungen über den Befehl border-bottom zu realisieren.

Aus Typografischer Sicht ist das zwar immer noch nicht die optimale Lösung, da sich die Unterlängen und die Unterstreichung nicht treffen. Daher könnte man den Rahmen noch ein Pixel weiter nach unten setzen. Je nach verwendeter Schriftart, Schriftgröße und Zeilenabstand kann das aber zu viel Platz verschlingen. Daher verwende ich auf dieser Siete keinen Abstand.

Die 3 Varianten im Vergleich:

text-decoration:underline;
border-bottom: 1px solid;
border-bottom: 1px solid; padding-bottom:1px;

Typografie

… nicht so schön

Typografie

… in dieser Darstellung perfekt, bei kleineren Schriftgrößen berühren sich aber auch hier Unterlängen und Unterstreichung.

Typografie

… für kleine Schriftgröen meißt die Beste Wahl

Das ist diesesmal zwar nur ein kleiner aber dafür aus meiner Sicht kleiner Hinweis und damit starte ich gleich den Aufruf für “schönere Unterstreichungen”. Abgesehen davon gibt es allerdings noch viele weitere Typografische Sünden im Web, dazu aber ein anderes mal.