Der richtige Aufbau

Struktur, Struktur, Struktur - ein roter Faden der sich konsequent durch Ihre Website zieht, ist bei einem optimalen Aufbau unerlässlich. Hier finden Sie hilfreiche Tipps für eine gute Website-Struktur.

  • © Fotolia/NicoElNino

Das "Mobile First"-Konzept

"Mobile First" geht da allerdings noch etwas weiter. Hier dreht man die gewohnte Arbeitsweise im Webdesign einfach um und arbeitet von der kleinsten Layout-Version hin zur größten. Das Konzept berücksichtigt folgende Punkte:

Weniger ist mehr – nicht nur für kleine Bildschirme

Da auf einem kleinen Smartphone-Bildschirm wenig Platz zur Verfügung steht, sollte man sich im Design auf das Wesentliche konzentrieren und überlegen, welche Webseiten-Elemente für den Nutzer wirklich wichtig sind. Idealerweise kommt man bei dieser Vorgehensweise auf eine übersichtliche, leicht zu bedienende Struktur, die dann auch gleich für größere Bildschirme übernommen werden kann.

Denn warum sollte ein Webseiten-Besucher nicht eine ähnlich reduzierte und aufs Wesentliche konzentrierte Information erhalten. Nur weil man auf einem großen Desktop mehr Platz für die Gestaltung hat, muss man diesen schließlich nicht bis auf den letzten Pixel mit ablenkenden Informationen ausfüllen.

Das Konzept „Mobile First“ schlägt also vor, sich die vermeidliche Schwäche (z.B. der Platzmangel auf kleinen Bildschirmen) zum Vorteil zu machen und durch Verzicht auf unwesentliche Informationen und Elemente ein benutzerfreundliche, übersichtliche und optisch angenehm reduzierte Struktur für alle Bildschirmgrößen zu finden.

Startseite

Die Startseite einer Website – die „Homepage“ – ist für etwa 90 Prozent der Nutzer das Einstiegstor. Über diese Seite gelangen also die meisten Nutzer auf die Inhalte. Sie ist somit die wichtigste Seite in Ihrer gesamten Onlinekommunikation und dient auf der Website stets der zentralen Orientierung.

Aus Nutzersicht muss die Startseite folgende Fragen beantworten:

  • Finde ich hier die Informationen, nach denen ich suche? Wenn ja, wo?
  • Wer ist der Absender? Sind die Informationen professionell/glaubwürdig/authentisch?
  • Gibt es hier neue Informationen, die ich noch nicht kenne?
  • Zeigt mir die Startseite ein Spektrum des AHK-Angebots?

Web-Usability ist das Stichwort, denn nur bei nutzerfreundlichen Websites verweilt der Besucher länger und klickt sich durch die Inhalte. Die Entscheidung, ob ein Besucher die Nutzung abbricht, wird innerhalb weniger Sekunden getroffen. Dabei werden Text- und Bildelemente als Indizien genommen, ob eine Website „passt“ und Nutzen verspricht. Insofern muss der Gesamteindruck aus Menübegriffen, Überschriften, Introtexten, Bebilderung evtl. sogar Illustrationen und Grafiken schnell erfassen lassen, was sich inhaltlich auf der Seite verbirgt.

Ein kleiner Selbsttest hilft Ihnen dabei, das zu beurteilen: Halten Sie mit einer Hand Ihr Logo auf dem Bildschirm verdeckt und versuchen Sie dann anhand der übrigen Elemente einzuschätzen, ob ein Nutzer Zweck und Inhalt Ihrer Website einschätzen könnte.

Verteilerseite (2. Ebene)

Die 2. Ebene dient dem ersten Überblick über ein thematisch abgegrenzten Bereich. Wichtigste Aufgabe dieser so genannten Verteilerseiten ist die Erstinformation anhand plakativer Bilder und kurzer Introtexte, die durch Mouseover-Effekt dargestellt werden. Der Effekt dient der Nutzerfreundlichkeit und findet bei immer mehr Usern Zustimmung.

Verteilerseiten sind zum Beispiel der thematische Überblick über Dienstleistungen oder Publikationen.

Regeln und Trends für einen nutzerfreundlichen Aufbau

Zentrale Elemente einer nutzerfreundlichen Website sind Design, Navigation und Inhalt. Sie nehmen Einfluss darauf, ob ein Besucher sein Ziel erreicht. Hier ein paar wichtige Regeln:

Inhalt & Design

  • Jede Seite sollte einen eindeutigen Titel haben.
  • Ein Introtext ermöglicht einen schnellen Einstieg in den Inhalt der jeweiligen Seite
  • Nutzen Sie informative Zwischenüberschriften bei längeren Texten. Viele Internetnutzer überfliegen eine Webseite nur und orientieren sich an den Überschriften oder Verlinkungen, um relevante Inhalte zu finden.
  • Beim Einsatz von farbig hinterlegten Boxen ist ein angemessener Kontrast zwischen Text, Vorder- und Hintergrund zu beachten.
  • Bilder und Grafiken sollten zum Thema der jeweiligen Webseite passen.

Navigation und Verlinkungen

  • Die Navigation sollte einfach und verständlich sein.
  • In der Hauptnavigation sollten zentrale Begriffe Ihres AHK-Angebots stehen. Bitte beachten Sie, dass die Navigationsleiste nur Platz für fünf (bei kurzen Worten für sechs) Begriffe hat. Finden Sie prägnante und aussagekräftige Schlagworte, um Ihr Informationsangebot zu präsentieren.
  • Am oberen linken Rand auf den Unterseiten informiert ein Link-Pfad (engl. breadcrumb navigation) den Besucher jederzeit, in welchem Bereich der Website er sich befindet und erleichtert ihm die Navigation. Als Faustregel gilt: Die Website sollte eine maximale Tiefe von vier Ebenen nicht überschreiten.
  • Fassen Sie alle Informationen zu Ihrer AHK in einem eigenen Bereich, optimal in der Metanavigation, zusammen, zum Beispiel in "Über uns" oder "Die AHK". In diesem Bereich erwarten Besucher eine Beschreibung der Organisation, des Netzwerks, Ansprechpartner mit Kontaktinformationen, Jobangeboten, Presseinformationen etc.
  • Arbeiten Sie mit Untermenüs, die sich erst zeigen, wenn der gewünschte Hauptbereich aufgerufen wird. Verlinkungen sollten eindeutig als solche erkennbar sein. Unterstrichene Texte erkennen Internetnutzer sofort als Verlinkung.
  • Nutzen Sie einen beschreibenden Text, bestehend aus einem Begriff oder wenigen Worten, zum Verlinken.
  • Testen Sie regelmäßig, ob alle Verlinkungen funktionieren.
  • Kennzeichnen Sie Links auf externe Seiten sowie Downloadlinks.
  • Legen Sie fest, in welchen Fällen ein neues Browserfenster geöffnet wird.
  • Verlinkungen, die zu einer Webseite innerhalb Ihrer Website führen, sollten immer im selben Browserfenster geöffnet werden.
  • Verlinkungen, die von Ihrer Website wegführen, sollten immer in einem neuen Browserfenster geöffnet werden.

Dialogmöglichkeiten

  • Ihre Kontaktinformationen (Telefonnummer, E-Mail-Adresse, Anschrift) sollte im Footerbereich auf der Website zu finden sein.
  • Erstellen Sie eine Kontaktseite in der Metanavigation und verstecken Sie Kontaktinformationen nicht im Impressum.
  • Setzen Sie die entsprechenden AHK-Ansprechpartner auf die jeweiligen Unterseiten. Sofern die Ansprechpartner nicht für unterschiedliche Standorte zuständig sind, sollte nur ein Ansprechpartner aufgeführt werden und zwar derjenige, der auch die Anfragen von der Website entgegen nehmen soll.
  • Veröffentlichen Sie Ihre Geschäftszeiten, damit Interessenten nicht auf Ihren Anrufbeantworter sprechen müssen.
  • Animieren Sie Besucher zu einer Anfrage über ein Kontaktformular, indem Sie die Unverbindlichkeit und den Nutzen für den Interessenten hervorheben.
  • Wenn Interessenten oder Kunden persönlich zu Ihnen kommen, bieten Sie ihnen Anfahrtsskizzen und eine Wegbeschreibung auf Ihrer Website an.
  • Je weniger Felder Sie in Online-Formularen verwenden, umso mehr Interessenten werden das Formular ausfüllen.
  • Stellen Sie sicher, dass das erste Eingabefeld leicht auffindbar ist. Der Besucher sollte sofort mit dem Ausfüllen beginnen können.
  • Stellen Sie sicher, dass Nutzer mit der Tabulatortaste ein Formular in der korrekten und logischen Reihenfolge ausfüllen können.

Trend I: Scrollen statt klicken

Klicken ist out, Scrollen ist in – das sieht man nicht zuletzt beim Onepager und umfangreicheren Responsive Designs. Das Scrollen ist intuitiver, verhindert das viele Herumklicken auf verschiedenen Unterseiten und spart auch Ladezeiten. Schon beim Ansurfen der Startseite einer Website sollte der User alle relevanten Informationen auf einen Blick vorfinden. Wer tiefer in die Materie einsteigen möchte, sollte dann wiederum die Möglichkeit haben, per Klick mehr zu erfahren.

Trend II: Storytelling

Das «Storytelling» ist eine Entwicklung, die ebenfalls mit der Enwtcklung des Onepagers zusammenhängt: Der Benutzer scrollt sich durch die Homepage und liest eine spannende Geschichte zur Organisation und seinen Dienstleistungen. Das mühselige Zusammenklauben von Informationen auf vielen verschiedenen Unterseiten wird ersetzt durch eine auf den Punkt gebrachte Story. Dieses Storytelling wird durch den Trend zum Scrollen unterstützt (Scrollytelling), so dass der Internuser in einen angenehmen Lesefluss kommt.