Wie plane ich eine gute Website-Struktur?

Eine gute Website-Struktur ist wichtig, damit Menschen schnell verstehen, worum es geht. Ein durchdachter Aufbau hilft ihnen, sich zu orientieren und zu entscheiden, was sie als nächstes tun wollen.

In diesem Artikel gehen wir das Thema ganz praktisch an: mit einer Web-Inspektion der Startseite von WAKEA. An so einem Beispiel lässt sich anschaulich zeigen, was eine gute Website-Struktur ausmacht.

Transkript (leicht redigiert)

Hi, hier ist Sabine von From Scratch mit einer Web-Inspektion für den Regenwald für die Firma WAKEA.

WAKEA wurde von Benjamin gegründet. Ihm ist es sehr wichtig, das nachhaltige Entwicklungsziel (SDG) Nummer 12 voranzutreiben, nämlich Verantwortungsvolle Produktion, Verantwortungsvoller Konsum.

Und das unterstützt er, indem er Werbegeschenke mit Sinn vertreibt an Vereine, Firmen, Geschäftsleute, denen Nachhaltigkeit und fairer Handel so wichtig sind, dass sie auch bereit sind, dann vielleicht mal ein bisschen mehr dafür auszugeben. Und nicht immer nur nach den billigsten Werbegeschenken zu schauen, sondern auch nach welchen mit Sinn, die nicht einfach nur Wegwerfartikel sind. Das finden wir super, da sind wir gerne mit dabei.

Unser Auftrag heute ist es zu schauen:

Ist die Homepage so gestaltet, dass sie die Leute optimal abholt?

Und dazu habe ich einen Online-Bericht erstellt. Den kann nur der Benjamin sehen. Ich zeige euch aber mal, wie der so im Groben aussieht.

Und zwar sieht er genauso aus wie die Homepage, die wir eben vor Augen hatten. Nur mit blauen Punkten. Samspunkten, Wunschpunkten! Diese Wunschpunkte zeigen immer, wo ich mir was wünsche von der Seite — und manchmal auch einfach ein bisschen Lob. Z. B. finde ich die Überschrift hier ganz gelungen. Dazu habe ich einen Kommentar hinterlassen. Man kann also auf diese blauen Punkte draufklicken. Und dann kann man sehen, was ich da hinterlassen habe. Man kann genauso, wenn man hier unten drückt, alle Kommentare in der Reihenfolge sehen, in der ich sie hinterlassen habe.

Das bekommt nur der Benjamin.

Wir machen hier eine kurze, knappe Zusammenfassung, damit ihr was lernen könnt aus dieser Inspektion für Benjamin.

Schwerpunkt dieser Inspektion: Struktur der Homepage

Was dieser Seite im Moment noch fehlt, ist in erster Linie eine gute Website-Struktur. Wir haben zwar eine Struktur, aber die passt nicht immer zu den Inhalten.

Was meine ich damit?

Relative Größenverhältnisse erzeugen eine gute Website-Struktur

Naja, schauen wir uns doch mal hier diese sogenannte Hero Section an. Da fängt es schon an mit der visuellen Struktur. Denn das Logo ist viel größer als die Überschrift. Das sollte angepasst werden, sodass die mindestens mal Gleichgewicht haben. Eigentlich sollte die Überschrift im Vordergrund stehen und das Logo viel kleiner sein.

Die Struktur eurer Website zeigt, worum es geht — was „im Vordergrund steht“

Aber wichtiger vielleicht noch: Diese Hero Section erweckt den Eindruck, als ob WAKEA in erster Linie Notizbücher aus Steinpapier verkaufen würde. Und das stimmt ja gar nicht. Es gibt so viele verschiedene Sorten Werbegeschenke bei WAKEA zu kaufen. Die Notizbücher sollten hier auf keinen Fall so prominent erscheinen.

Stattdessen muss in der Hero Section klar werden:

• Was ist WAKEA?
• Was macht WAKEA?
• Warum sollte ich hier kaufen?
• Was macht die Werte aus?
• Was für Produkte haben die im Angebot?

Und dann sollte es — ja, meinetwegen zwei Calls to Action geben — aber nicht einer zum Notizbuch, sondern einer zum gesamten Shop und der andere zur Beratung. Denn hier kommen wir ja nur auf ein Produkt und das sollte auf jeden Fall erst weiter unten auf der Seite sein.

Überschriften erzeugen eine gute Website-Struktur

Was meine ich noch mit Struktur? Wir brauchen Überschriften.

Immer da, wo das Design sich verändert und ein neuer Abschnitt beginnt, muss eine Überschrift hin, um die lesende Personen durch die Seite zu führen. Dann muss sich niemand denken: Wie reime ich mir das jetzt zusammen? Sondern es ist immer hundertprozentig klar: Okay, was kommt jetzt als nächstes? Kann ich das überspringen oder sollte ich das lesen?

Und das betrifft auch solche kleinen Änderungen, wie hier zum Beispiel.

Wo wir erst mal eine Zeile haben, die besteht immer aus Bild, Überschrift und dann etwas Text.

Bild, Überschrift, etwas Text.

Aber auf einmal habe ich hier das Bild links, dann eine Überschrift, dann Text und dann nochmal einen Button. Und es ist nicht deutlich, warum hier jetzt so ein Wechsel im Design passiert. Das sollte auf jeden Fall durch eine Überschrift gegliedert werden. Oder eben das Design sollte gleich bleiben.

Hier haben wir wieder Überschrift, Text, Button. Da passen allerdings Button und Text nicht so gut zusammen, und der Button wird auch nochmal dupliziert: hier durch diese blaue Box. Wieder haben wir über diesen drei Boxen keine Überschrift, die das alles zusammenbringt. Und die drei Boxen wirken relativ unterschiedlich. Denn einmal geht es um „Beratung“, einmal um „Lieferant werden“ und einmal um die Werte. „Lieferant werden“ scheint mir hier sehr anders zu sein als die anderen. Aber mit einer gelungenen Überschrift kann man die eventuell zusammenführen. Deswegen ist das so wichtig.

Verstecke beschreibenden Text nicht im Kleingedruckten ganz unten auf der Seite

Zum Schluss haben wir auf der Seite hier noch ein Stück Text, das sieht ein bisschen aus wie SEO Text für Google. Aber da stecken so viele sinnvolle Dinge drin. Das sollte auf jeden Fall weiter oben auf der Seite kommen.

Ja, soviel zum Thema Struktur.

Benjamin, ich hoffe, das hilft dir — und euch Zuschauenden auch. Vielen Dank. Grüße von From Scratch!