Design

Ideale Startseite - Usability, Übersicht und Gestaltung

26. August 2009 von Mario

Mit dem Layout steht und fällt eine Webseite. Ein komplizierter Aufbau, oder eine unruhige Farbgestaltung wirkt auf den Besucher abschreckend und veranlasst ihn im schlimmsten Fall dazu, die Seite wieder zu verlassen, bevor er auch nur einen Satz gelesen hat.
Bilder müssen ebenso in das Design eingearbeitet sein und dürfen nicht durch schlechtere Qualität oder zu starke Kontraste aus der Webseite herausstechen.
In diesem Beitrag wird an einem Beispiel erklärt, was gute Gestaltung, Übersicht und Usability ausmacht.
Ein Hauptaugenmerk liegt hierbei auf der Positionierung der einzelnen Elemente und deren Abgrezung zueinander.

Einführung

Ich habe recherchiert und eigene Überlegungen angestellt, wie eine gute Startseite aussehen muss. Natürlich ist auch die Startseite davon abhängig, um welche Art Webseite es sich handelt. Ein Shop zu Beispiel bewirbt einige Produkte, die Bestseller. Der Blog wird den neusten Beitrag präsentieren und eine Dienstleistungswebseite oder die private Seite sollte dem Besucher einen Überblick geben, was auf dieser Seite zu finden ist.
Es gibt also keine Patentlösung für alle Webseiten.
In dieser Artikelserie geht es eher um die geschäftliche Webseite, auf der News, Infos, Produkte und Dienstleistungen präsentiert werden sollen. Einige Aspekte sind natürlich auch auf Shops etc. übertragbar.
Ich bin der Meinung, dass das Beispieldesign für einen Fotografen geeignet wäre, der seine Fotodienste anbieten möchte.
Doch nun genug der Vorrede, beginnen wir mit dem ersten Punkt in unserer Liste.

Usability, Übersicht und Gestaltung

Ich denke der Punkt Übersichtlichkeit ist unstrittig. Die Beispielseite ist sehr übersichtlich und glänzt durch klare Linien und Abgrenzung von Kopfbereich, Navigation und Inhaltsbereich. Die Abgrenzung erfolgt hier durch unterschiedliche Hintergrundfarben und Abstände. Ebenso sind die einzelnen Inhalte klar voneinander abgegrenzt und übersichtlich positioniert. Alle eingesetzten Bilder sind extrem scharf und farblich passend zur Webseite. Allgemein strahlt diese Startseite Kreativität und Lebendigkeit aus. Diese Ausstrahlung kommt auch durch den Einsatz von Orange und der psychologischen Wirkung dieser Farbe. Doch das allein genügt nicht für ein gutes Design. Des weiteren werden keine zu starken Kontraste oder unnötige Farbverläufe verwendet. Farbverläufe sind allgemein gut, um einen Übergang abzurunden oder abzuschwächen. Doch das ist bei diesen sanften Farben nicht nötig. Die einzigen starken Kontraste, die beiden Bilder im Inhalt, sind mit einem weißen Rahmen entschärft worden, um sie nicht zu auffällig herausstechen zu lassen.
Die Verwendung von lediglich einer Schriftart, trägt ebenso zum ruhigen und stimmigen Eindruck bei, wie die zahlreichen freien Räume. Freiräume lassen dem Besucher die benötigte "Luft zum Atmen". Wichtige Schlagwörter werden durch stärkere Kontraste hervorgehoben und nicht unnötig fett geschrieben.



Dieses Bild verdeutlicht nocheinmal, wie einfach die Seite strukturiert ist. Die gesamte Seite ist aus Rechtecken in horizontaler und vertikaler Lage zusammengesetzt. Allerdings fällt die Schnellnavigation schon fast zu wenig auf. Falls diese von erheblicher Bedeutung ist und nicht nur für Impressum, Unternehmensbeschreibung oder ähnliches dient, würde sie unter dem Hauptbild etwas besser zur Geltung kommen. Die für den Verkauf wichtigen Links sollten in der Inhaltsnavigation untergebracht werden. Darunter Fallen zum Beispiel Leistungen, Referenzen oder Kundenstimmen. Im Beispiel ist die Inhaltsnavigation sehr gelungen. Durch die großzügige Platznutzung ist es auch für schlechter sehende möglich, die Übersicht nicht zu verlieren, da man nicht in der Zeile verrutschen kann. Das verhindert hier die untere gepunktete Border.

Eine kurze Anmerkung zur Navigation: In diesem Beispiel ist es nicht ersichtlich, aber die Navigation sollte immer nach Wichtigkeit sortiert sein.
Eine schlechte Struktur ist zum Beispiel:

• Impressum
• Startseite
• Leistungen
• Kontakt
• Referenzen

Gut dagegen wäre:

• Startseite
• Leistungen
• Referenzen
• Kontakt
• Impressum

In diesem Fall ist die Anzahl der Navigationspunkte sehr überschaubar und es werden keine Überkategorien benötigt. Die Startseite taucht logischerweise ganz oben auf, da sie die erste Seite darstellt. Danach soll der potenzielle Kunde darüber aufgeklärt werden, was er hier als Leistung erwarten kann. Sagt ihm das Angebot zu, erhält er die Möglichkeit sich danach einige Arbeiten anzusehen. Logischerweise soll er dann ja auch mit dem Seitenbetreiber Kontakt aufnehmen. Das Impressum muss in dieser logischen Reihe nicht auftauchen, da es nicht für alle Besucher relevant ist. Ich verlinke mein Impressum zum Beispiel gerne im Footer.

Hinweis: Wenn es allerdings weit mehr Navipunkte sind, ist es sinnvoll, mehrere in einer Überkategorie zusammenzufassen und die einzelnen Punkte, erst beim klick auf die Kategorie ausklappen zu lassen.

Im nächsten Artikel geht es dann um die Besucherführung. Diese wurde zum Teil hier schon angerissen, da einige Punkte der Besucherführung schon ins Design hinein fallen.
<< vorheriger Artikel nächster Artikel >>