Webseiten Optimierung #1

Design

Aufgeräumt, aber unübersichtlich! Trotz Raster- und Kachelsystem ist die heutige Beispiel-Homepage ein Mekka für Web- und UX-Designer. Doch bevor ich zu den Optimierungsvorschlägen komme, schauen wir uns einmal die Homepage genauer an.

 

Startseite

Startseite

Startseite

 

Beim ersten Anblick der Startseite, weiß man garnicht so recht, wo man zuerst hinschauen soll. Der erste Blick landet wahrscheinlich in der Kachelwüste, die 3/4 der Seite ausmacht. Jede Kachel besteht aus einem Text- und Bildelement. Der zweite Blick wandert – auf der Suche nach der Navigation – wahrscheinlich hoch zum Header Bereich, wo sich das Logo, eine Sprachauswahl und weitere drei Menüpunkte befinden. Auf der linken Seite sehen wir eine Filternavigation, die in drei Bereiche (Bereich, Leistung, Standort) aufgeteilt ist. Pro Sektion kann ein Menüpunkt ausgewählt werden, wodurch uns weniger Kacheln angezeigt werden. Das Prinzip sollte uns aus gängigen Online-Shops bekannt sein, wo man verschiedene Filtermöglichkeiten nutzen kann, um an das gesuchte Produkt zu gelangen. In diesem Fall sind die angezeigten Ergebnisse Inhalte der Homepage. Des weiteren finden wir am Ende der Homepage Social-Media und Footer-Links.

 

Schauen wir uns einmal eine Aufmerksamkeits-Analyse der Startseite an:

 

Analyse Startseite

Analyse Startseite

 

Ganz klar zu erkennen ist, dass der Blick der Besucher zuerst auf die Kacheln geht. Nicht speziell auf eine oder vielleicht die vermeintlich wichtigeren großen Kacheln, sondern wahllos über mehrere Kacheln hinweg. Unter dem erweiterten Bereich gehört dann auch die Suche, links oberhalb der Kacheln und die Filter-Navigation auf der linken Seite. Der Login und Kontakt-Bereich oben rechts wird so gut wie garnicht wahrgenommen.

 

Inhaltsseite

Inhaltsseite

Inhaltsseite

Leider fällt die Wertung der Inhaltsseite nicht besser aus. Es ändert sich zwar nur der mittlere Bereich, doch auch dort gibt es etwas zu bemängeln. Zum einen sollte der Pfeil an dem „Zurück-Button“ nicht nach rechts zeigen, da diese Richtung das „Weitergehen“ suggeriert. Auch der Fließtext könnte ein paar Pixel größer sein. Wenn man nach einem Call-To-Action sucht, sucht man nicht vergebens. Scrollt man innerhalb des Inhaltsbereiches nach unten, erscheinen zwei Call-To-Action Möglichkeiten. Ein E-Mail-Symbol, über das man zu einem allgemeinen Kontaktformular gelangt und ein Anfrage-Button, über den man eine Anfrage zu einem bestimmten Bereich und nicht speziell für bestimmte Produkte absenden kann.

 

Kontaktseite

Kontaktseite

Kontaktseite

 

Kontaktformular

Kontaktformular

Die Kontaktseite ist über den Button im Header oben rechts erreichbar. Es öffnet sich ein schickes Dropdown-Fenster, welches sich auch problemlos wieder schließen lässt. Auf der linken Seite stehen die Anschriften und Kontaktdaten der Filialen. Auf der rechten Seite befindet sich das Kontaktformular, das durch die zu geringe Höhe des Dropdown-Fensters nicht vollständig sichtbar ist. Erst wenn man im Formular weiter nach unten scrollt, wird der „Absenden“-Button sichtbar.

 

Was mir Gefällt:

• Das Layout ist trotz der Unübersichtlichkeit sehr aufgeräumt
• Man bekommt das angezeigt, was für einen relevant ist, wenn man die Filterfunktion nutzt

 

Das sollte optimiert werden:

• Das Layout und Design: Klare Struktur und Anordnung der Elemente
• Die Navigationsstruktur. Mehr zum Thema Navigationsstruktur findet ihr hier.
• Angebote, Leistungen und den USP der Firma hervorheben
• Responsive Design: Die Seite sollte auf mobilen Geräten funktionieren
• Call-To-Action: Schaltflächen deutlicher hervorheben. Hier findet ihr Tipps für eine bessere Call-To-Action.
• Portfolio präsentieren
• Kundenmeinungen oder Produktbewertungen einbinden
• Anfrageformular für ein spezielles Angebot
• Ggf. Shop implementieren
• Blog stärker hervorheben. Dadurch kann die Kompetenz des Unternehmens vermittelt werden. Wie wichtig ein Corporate Blog ist, könnt ihr hier nachlesen.

 

Fazit

Die Homepage kann definitiv einen kompletten Relaunch vertragen. Es gibt sehr viele Baustellen, die angegangen werden müssen. Angefangen bei der Navigationsstruktur bis hin zum Kontaktformular. Da die Anzahl der mobilen User immer weiter steigt, sollte hier ein responsive Layout gewählt werden. Einige Bereiche gehen zu sehr unter und sollten mehr in den Fokus rücken. Ein Mekka für Web- und UX-Designer.

Bildnachweis Vorschaubild:
artikelbild-haesslichewebseiten

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.



Weitere Artikel zu Design

Aufgeräumt, aber unübersichtlich! Trotz Raster- und Kachelsystem ist die... Mehr lesen »

Bei der heutigen Landingpage handelt es sich um eine Microsite bei der man... Mehr lesen »

Ich zeige euch 13 coole Header-Effekte für Webseiten, die beim Scrollen... Mehr lesen »


Weitere Artikel von Alexander
Design
Aufgeräumt, aber unübersichtlich! Trotz Raster- und Kachelsystem ist die... Mehr lesen »

Landingpages Online Marketing
Conversion Rate mit Videos auf Landingpages erhöhen? Aber klar! Hier sind... Mehr lesen »

Design Landingpages Online Marketing
Bei der heutigen Landingpage handelt es sich um eine Microsite bei der man... Mehr lesen »

Top-Beiträge

Facebook

Bilder posten auf Facebook

Nicht jedes Bild passt in das neue Konzept der Facebook Chronik. Aber wie müssen Bilder jetzt... Mehr lesen »
Design

13 coole Header-Effekte für Webseiten

Ich zeige euch 13 coole Header-Effekte für Webseiten, die beim Scrollen animiert werden. Manche... Mehr lesen »
AdWords

5 Tipps zur Verbesserung der CTR

Update 04/2016   Die CTR (Click-Through-Rate, also die Klickrate) spielt eine große Rolle in... Mehr lesen »
^