RSS
 

Posts Tagged ‘Konzeption’

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 »

 

Navigationsmetaphern: Menüpunkte visualisieren

25 Nov

Fortsetzung von “Navigationsdesign – Die passende Architektur finden.”

Optisch werden bei der Erstellung von Navigationssystemen sehr oft Metaphern herangezogen. Die wohl bekannteste Metapher ist die Büro-Metapher bei Betriebssystemen. Im Gegensatz zu Betriebssystemen hat kein einheitlicher Standard für Websites durchgesetzt. Sehr oft werden stark abstrahierte Navigationsmodelleverwendet.

Read the rest of this entry »

 

Navigationsdesign – Die passende Architektur finden!

23 Nov

Zu den wichtigsten Elementen einer Website gehört auf jeden Fall die Navigation, denn die besten Inhalte nützen nur wenig sofern diese nicht gefunden werden können. Ziel beim Navigationsdesign ist es eine intuitive, der Zielgruppe und der Inhalte entsprechende Menüführung zu entwickeln.

Read the rest of this entry »

 

Viel Content und wenig Platz – Mittel gegen überladene Websites!

06 Mai

Diesmal geht’s um das alte Thema: Einerseits soll eine Website modern, schlicht und vorallem übersichtlich wirken, Andererseits aber müssen aus den diversesten Gründen unzählige Inhalte direkt auf der Startseite platziert werden. Nachfolgend werde ich ein paar Möglichkeiten um platzsparend, übersichtlich und verständlich relativ viele Inhalte zu transportieren.

Klein wird ganz Groß
Ein ähnlicher Ansatz ist es kleine Elemente bei Mouseover oder Click zu vergrößern. Das bietet sich besonders bei Landkarten die schon auf der Startseite platziert werden sollen an. Eine Karte wird klein auf der Website platziert. Auf dieser kleinen Karte kann man schon grob erkennen wo man sich befindet.So etwas ist besonders bei Tourismusregionen sehr beliebt. Schließlich sollen auch Gäste die, das Urlaubsgebiet nicht so genau kennen wissen wo der entsprechende Ort liegt. Sobald man mit der Maus über die Karte fährt wird die Map vergrößert und über dem Content der Website dargestellt. Jetzt ist es möglich mehr Details zu zeigen und Schnelleinstiege zu Sehenswürdigkeiten, Livecams, etc. anzubieten.

Sehr schön hat das die Tourismusorganisation von Montenegro gelöst:

Montenegro: geografische Navigation

Slideshows und Teaser
Slideshows bzw. rotierende Teaserbilder werden schon sehr oft eingesetzt. Vorallem in Online Shops ist eine solche Art der Produkt- bzw. Kampagnenpräsentation besonders beliebt. Durchdas animierte Wechseln der Bilder kann die Fläche mehrfach genützt und entsprechend mehr Informationen transportiert werden. Hierbei ist allerdings zu beachten, dass man es mit der Animation nicht übertreibt und dem Benutzer alternativ auch eine Möglichkeit zum direkten Aufruf eines Teasers gibt. Nichts ist nerviger als wenn man sich einen Teaser ansehen will aber erst warten muss bis 5 andere “durch gelaufen” sind.

Beispiel:
L.A. Daily News
Grafisch kann man das zwar sicher schöner lösen, aber die Funktionsweise wir hier sehr deutlich.

L.A. Daily News Teaser

L.A. Daily News Teaser

Zufallseffekt
Eine weitere Möglichkeit ist immer per Zufall ein Element aus einem Pool von mehreren darzustellen. Das Kann ein Produkt in einem Online Shop, ein Teil des Wellnessbereichs eines Hotels oder ein simpler Werbebanner sein. Diese Möglichkeit hat den positiven Effekt, dass der Benutzer das Gefühl hat, dass sich auf der Website etwas tut und sich so auch eine eher spärliche Datenwartung etwas kaschieren lässt. Allerdings sollte beachtet werden, dass man dadurch den Benutzer auch verwirren kann. So kann es durchaus passieren, dass ein Benutzer ein schönes Produkt in einem Onlineshop entdeckt und am Abend will dieser das Produkt mit seiner Familie noch einmal begutachten und bestellen. Nur Blöd wenn dieses Produkt per Zufall angezeigt wurde und sich für den Benutzer dann nicht mehr über die für ihn gewohnte Position finden lässt. Also ihr seht auf was ich hinaus will … falls mit zufälligen Darstellungen gearbeitet wird sollte man auch einen Link bzw. eine Auflistung aller möglichen Flächen anbieten, so dass das Wiederfinden etwas leichter fällt.

Inhalte erst bei Bedarf anzeigen
Oft ist es garnicht nötig sämtliche Inhalte sofort anzuzeigen. Mittels Javascript / Ajax gibt es inzwischen schon viele Möglichkeiten um sehr schön Daten nachzuladen bzw. erst bei Bedarf anzuzeigen. Auch wenn es schon gelerntem Nutzerverhalten etwas Widerspricht ist das eine schöne Möglichkeit um elegant Platz zu sparen. Allerdings können unerfahrene Benutzer durch solche proprietären Nutzungsmöglichkeiten durchaus überfordert werden. Daher nicht unbedingt für alle Zielgruppen geeignet bzw. muss entsprechend mehr Aufwand in Usabilitytests gesteckt werden.

So nützt GMX beispielsweise solche Möglichkeiten um noch mehr Content auf der Startseite unterzubringen. Auf der Startseite wird mit “Tabbed Boxes” gearbeitet über die dort angebotenen Karteikartenreiter kann schnell auf das gewünschte Themengebiet geschaltet werden. Zusätzlich werden bei der Box “Im Blickpunkt” die News erst beim Mouse Over in einer größeren Variante dargestellt.

Platz sparen bei Gmx.de

Platz sparen bei Gmx.de

Fazit:
Überladene Websites wirken weder ästethisch noch können diese besonders gut Bedient werden, da Benutzer oft von der Informationsflut  überfordert werden. Falls man aber keine andere Wahl hat und viele Informationen auf kleinem Raum unterbringen muss macht es durchaus Sinn sich mit einer der gezeigten Konzepte zu helfen.

 

Navigationsarchitektur: Zeige dem Benutzer wo er ist!

28 Apr

Es hat sich in den letzten Jahren ja schon herumgesprochen, dass man Benutzern zeigen soll wo sie sich befinden und sich so ein User einfach innerhalb einer Website orientieren kann. Doch so einfach das klingt, so oft wird dieses Gebot missachtet bzw. gibt es hier einige Feinheiten die sich doch noch nicht überall herumgesprochen haben.

Aktiven Menüpunkt selektieren
Zum Standard gehört es inzwischen aktive Menüpunkte zu selektieren. Hierbei gilt diese Selektion optisch deutlich erkennbar zu gestalten. Der Unterschied zwischen selektieren undnicht selektierten Navigationselementen sollte sofort auf einen Blick erkennbar sein. Darüber hinaus sollte noch beachtet werden, dass in allen Navigationslevels mit Hervorhebungen gearbeitet wird. Immer wieder sieht man Websites in denen der Hauptmenüpunkt schön selektiert wird, aber ab der zweiten oder dritten Ebene bricht das optische Chaos aus.

Breadcrumb Navigation integrieren
Je komplexer und tiefer die Navigationsstruktur einer Website aufgebaut ist, desto wichtiger ist eine Breadcrumb Navigation. Dadurch kann man sich einige Probleme vom Hals schaffen und hat ein globalen Bezugspunkt für den Benutzer geschaffen. Allerdings sollte eine Breadcrumb nie die einzige Navigationsmöglichkeit darstellen. Aus meiner Sicht dienen die “Brotkrumen” zur schnellen Orientierung und im Notfall können überforderte User diese auch zum Navigieren missbrauchen.

Jeder Seite ihren Menüpunkt
Jede Seite sollte einem Menüpunkt zugeordnet werden. Besonders auf der Startseite sieht man oft Unterpunkte die in der Navigation nirgends abgebildet werden. Dadurch ergeben sich Seiten die sich mehr oder weniger im “Luftleeren” Raum befinden. Klassische Beispiele hierfür bieten beispielsweise Seiten die auf der Startseite über einen Banner verlinkt, aber dann keinem Menüpunkt zugeordnet werden. Der User clickt auf entsprechenden Banner und hat anschließend keinen Anhaltspunkt wo er sich befindet. Gleichzeitig stellt die “Home” Seite nur eine Seite dar und sollte nicht unzählige Unterseiten enthalten.

Zurückbutton nicht vergessen!
Ein Klassiker: die Website sollte ohne Verwendung des “Zurück”-Buttons im Browser funktionieren. Daher unbedingt Zurück-Buttons an den richtigen Stellen implementieren. Mit richtigen Stellen meine ich, dass der Button nur da aufscheinen soll wo man ihn benötigt. So ist ein Zurück Link auf der Startseite ziemlich sinnlos. Erst auf Detailseiten die über einen “mehr lesen” Link und nicht über das Menü erreichbar sind macht´s aus meiner Sicht Sinn.

Integrierte Sitemaps
Eine weitere Möglichkeit dem Benutzer eine schöne Übersicht über die Seitenstruktur zu geben bieten integrierte Sitemaps. Damit meine ich diese global, im Footer integrierten Sitemaps die man in den letzten Jahren immer öfters sieht. Ehrlich gesagt hab ich keine Ahnung wie man die Dinger offiziell nennt, aber ichfinde diese ziemlich praktisch und ganz nebenbei lassen sich diese Sitemaps auch gut zu SEO Zwecken nutzen.

Fazit:
Das waren ein paar Tipps um den Benutzer besser durch die Website zu leiten und auch weniger internetafine User ohne Frust durch die Website zu führen. Natürlich wird das Ganze mit zunehmender Komplexität und Navigationstiefe immer schwieriger und besonders knifflig wird es wenn nachträgich Navigationslevels in bestehende Websites eingebaut werden sollen. Daher lieber zu Beginn eines Projektes schon eine Level mehr einkalkulieren.

 

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.