Rheinwerk Computing < openbook >

 
Inhaltsverzeichnis
Vorwort
1 Prinzipien des modernen Webdesigns
2 Projektmanagement
3 Konzeption und Strategie
4 Responsive Webdesign
5 Informationsarchitektur
6 Gestaltungsgrundlagen
7 Screendesign
8 Layout und Raster
9 Farbe im Webdesign
10 Typografie
11 Bilder und Grafiken
12 Navigations- und Interaktionsdesign
13 Webdesign-Stile und -Trends
14 Animationen
15 Website-Typen
16 Tipps, Tricks und Tools
Stichwortverzeichnis

Download:
- Beispieldateien, ca. 3.64 MB

Buch bestellen
Ihre Meinung?

Spacer
<< zurück
Webdesign von Martin Hahn
Das Handbuch zur Webgestaltung
Buch: Webdesign

Webdesign
Pfeil 5 Informationsarchitektur
Pfeil 5.1 Einführung
Pfeil 5.1.1 Ein Alltagsbeispiel und sein Webseitenpendant
Pfeil 5.1.2 Darum geht es
Pfeil 5.2 Die Bedeutung der Informationsarchitektur
Pfeil 5.2.1 Die drei Aspekte – Inhalte, Nutzer, Kontext
Pfeil 5.2.2 User first
Pfeil 5.2.3 Pageflow
Pfeil 5.2.4 Findability – vom Suchen und Finden von Informationen
Pfeil 5.3 Die Bedeutung der Navigation
Pfeil 5.3.1 Aufgaben einer gelungenen Navigation
Pfeil 5.4 Content-Strategie
Pfeil 5.4.1 Guter Content
Pfeil 5.4.2 Guter Content und die Rolle des Webdesigners
Pfeil 5.4.3 Sammeln und Strukturieren
Pfeil 5.4.4 Produktion und Aktualität
Pfeil 5.4.5 Storytelling
Pfeil 5.5 Inhaltsstruktur entwickeln
Pfeil 5.5.1 Methoden und Tools
Pfeil 5.5.2 Wording
Pfeil 5.5.3 Case Studies
Pfeil 5.5.4 Navigationsprinzipien – den Erwartungen entsprechen
Pfeil 5.6 Durch Inhalte navigieren
Pfeil 5.6.1 Navigationsmenüs
Pfeil 5.6.2 Alternative Navigationswege
Pfeil 5.7 Fazit
 
Zum Seitenanfang

5.2    Die Bedeutung der Informationsarchitektur Zur vorigen ÜberschriftZur nächsten Überschrift

Informationsarchitektur sieht in vielen, gerade kleineren Projekten so aus, dass es gar keine gibt, zumindest keine, die bewusst geplant wird. Die Informationen werden gesammelt, in Gruppen aufgeteilt, die dann sowohl die Navigationsstruktur vorgeben als auch die Beschriftung der Menüpunkte – fertig. Oder die Informationsarchitektur wird von der alten Webseite übernommen, ohne sie zu hinterfragen. Oder es wird die gleiche Aufteilung wie in der Imagebroschüre genommen. Wie passend, da stehen ja auch gleich Inhalte (Achtung: Ironie!). Am anderen Ende des Spektrums gibt es in großen Agenturen schon seit vielen Jahren den Job des Informationsarchitekten, also ein eigenes Tätigkeitsfeld, um Informationen zu sortieren und zu strukturieren. Das Credo eines Informationsarchitekten könnte »Der Benutzer hat immer recht« lauten, dort, wo er sucht, sollten die Inhalte sein. Natürlich lassen sich seine Suche und sein Weg steuern.

 
Zum Seitenanfang

5.2.1    Die drei Aspekte – Inhalte, Nutzer, Kontext Zur vorigen ÜberschriftZur nächsten Überschrift

Drei Punkte müssen beachtet und analysiert werden, um eine Informationsarchitektur aufzubauen, die wirklich funktioniert:

Die drei Aspekte der Informationsarchitektur (IA): die Inhalte, die Benutzer und der Nutzungskontext

Abbildung 5.4    Die drei Aspekte der Informationsarchitektur (IA): die Inhalte, die Benutzer und der Nutzungskontext

  1. Zum einen die Anwender: Wer sind sie, was denken sie, und was wissen sie bereits? Hier spielen all die Punkte der Zielgruppenanalyse eine Rolle, die in Abschnitt 3.7, »Zielgruppenanalyse«, ausführlich besprochen werden.

  2. Dann die Inhalte: Was für Inhalte stehen zur Verfügung, welche Inhalte werden gebraucht? Hier spielen die Inhalte eine Rolle, die das Unternehmen gerne vermitteln möchte, aber auch die Inhalte, die der Anwender erwartet und sucht.

  3. Und der Kontext: Welches sind die geschäftlichen Ziele der Webseite (Verkauf, Kundenbindung etc.)? In welchem Zusammenhang benutzt der Anwender die Webseite? Was sucht er genau, was sind seine Ziele?

Zum Nachlesen

Auf alle in diesen drei Punkten genannten Aspekte wird ausführlich in Kapitel 3, »Konzeption und Strategie«, eingegangen.

Das Zusammenspiel aus diesen drei Faktoren bestimmt die Informationsarchitektur. Es macht einen Unterschied, ob beispielsweise ein Blog über Smartphones und Apps für technologiebegeisterte Digital Natives umgesetzt wird oder für Senioren, die langsam an die Materie herangeführt werden wollen. Die Art der Informationen, ihre Aufbereitung, die Aufteilung in Rubriken, einzelne Seiten, deren Benennung und die Aufteilung der Inhalte innerhalb der einzelnen Seiten werden in beiden Fällen höchst unterschiedlich ausfallen.

Es geht also um die Organisation der Inhalte und den Weg des Anwenders auf der Webseite. Das Ziel der Informationsarchitektur ist es dabei, die Wünsche der Anwender mit den Marketing-Zielen des Webseitenbetreibers zu vereinen.

Die Schwenninger Krankenkasse stellte einen so großen Bedarf an Informationen rund um Geburt, Schwangerschaft und Babywunsch fest, dass sie eine eigene umfangreiche Webseite (babyharmonie.de) dazu erstellte.

Abbildung 5.5    Die Schwenninger Krankenkasse stellte einen so großen Bedarf an Informationen rund um Geburt, Schwangerschaft und Babywunsch fest, dass sie eine eigene umfangreiche Webseite (babyharmonie.de) dazu erstellte.

 
Zum Seitenanfang

5.2.2    User first Zur vorigen ÜberschriftZur nächsten Überschrift

Es gibt, wie eingangs in diesem Kapitel erwähnt, bei Online-Projekten den Ansatz Mobile first. Er kam im Zusammenhang mit der Veränderung der Arbeitsabläufe vor allem durch die mobilen Endgeräte und die mobile Internetnutzung auf.

Dann stellte man fest, dass es eigentlich zweitrangig ist, ob Mobile oder Desktop zuerst betrachtet wird, die Inhalte sind wohl das Entscheidende. Also hieß es Content first. Wenn man die Ansätze, die dahinterstecken, aber konsequent zu Ende denkt, muss es eigentlich User first heißen. Um den Anwender geht es. Wenn Sie die Kapitel bis hierhin gelesen haben, ist das nichts Neues für Sie. Der Anwender und seine Bedürfnisse sind das Wichtigste. Die Inhalte werden für sie erstellt. Inhalte, die keine Leser oder Betrachter finden, sind nutz- und bedeutungslos. Sie sind eher schlecht für den Webseitenbetreiber, denn sie scheinen die Ziele der Nutzer nicht zu beachten, die sich so ignoriert fühlen. Und unnütze Inhalte behindern nützliche, indem sie die Navigationsstruktur unnötig aufblähen, die Aufmerksamkeit stören und von den nützlichen Inhalten ablenken.

Dass hier User first Ausgangspunkt der Überlegungen war, darf zumindest bezweifelt werden: großer Slider mit einer Mischung aus Angeboten und einzelnen Produktvorstellungen.  Es folgen Highlights, Events, News usw. … Um was geht es hier eigentlich?

Abbildung 5.6    Dass hier User first Ausgangspunkt der Überlegungen war, darf zumindest bezweifelt werden: großer Slider mit einer Mischung aus Angeboten und einzelnen Produktvorstellungen. Es folgen Highlights, Events, News usw. … Um was geht es hier eigentlich?

User first klingt so logisch und nachvollziehbar, und doch wird kaum etwas anderes so konsequent missachtet. User Interfaces werden überladen mit grafischen Elementen, sind kompliziert zu bedienen, Webseiten quellen vor Inhalten über, die vor allem der Webseitenbetreiber gerne hat, die aber kein Anwender braucht. Texte erinnern mehr an Werbebroschüren als an für die Besonderheiten des Webs aufbereitete Informationen, was zur Folge hat, dass sich die Inhalte dem User eher entziehen und untergehen.

Alles ist wichtig

Zu häufig sind Webseiten überladen mit Inhalten und grafischen Elementen. Der Kunde will möglichst viel an Informationen vermitteln. Irgendwie ist das ja auch verständlich – aus seiner Sicht. Er möchte die Vorzüge seiner Produkte anpreisen, die Geschichte seines Unternehmens erzählen, alle seine Projekte und Referenzen auflisten und noch vieles mehr. Für ihn ist alles wichtig, für den Anwender aber nicht.

Es gibt sicherlich einige gute Entwicklungen in die richtige Richtung: Flat-Design, das die Optik und die Bedienbarkeit in vielen Fällen vereinfacht; Minimalismus, der auf ein simples User Interface und auf wenige, einfach zu konsumierende Informationen setzt; One-Pager, die alle Informationen auf einer einzigen Webseite bündeln und auf das Wesentliche reduzieren. Auf die genannten Webtrends werde ich noch genauer in Kapitel 13, »Webdesign-Stile und -Trends«, eingehen.

 
Zum Seitenanfang

5.2.3    Pageflow Zur vorigen ÜberschriftZur nächsten Überschrift

Die Inhalte zu strukturieren betrifft nicht nur die Aufteilung in einzelne Seiten, sondern auch die Aufteilung innerhalb der Seiten. Die Inhalte sollten hier so strukturiert sein, dass der Anwender sie schnell überfliegen, »scannen« kann:

  • verschiedene Überschriften, Listen, Zitate, Bilder als Sprunganker einsetzen, um das Scannen zu erleichtern

  • einfache Sprache in kurzen Sätzen, damit die Texte am Bildschirm gut zu lesen sind

  • Überschriften sollten einen Hinweis auf den Textinhalt geben und nicht, wie bei Printpublikationen üblich, in erster Linie Aufmerksamkeit erzeugen.

  • keine zu langen Zeilen und nicht zu wenig Zeilenabstand

  • keine zu kleine Schriftgröße

  • Links im Text zu weiterführenden Informationen

Alles im Flow. Bei mawendo.de lässt sich die Seite schnell scannen.

Abbildung 5.7    Alles im Flow. Bei mawendo.de lässt sich die Seite schnell scannen.

Mehr Informationen dazu erhalten Sie in Kapitel 10, »Typografie«.

 
Zum Seitenanfang

5.2.4    Findability – vom Suchen und Finden von Informationen Zur vorigen ÜberschriftZur nächsten Überschrift

Fast immer geht es auf Webseiten um Suchen und Finden. Usability-Experte Jakob Nielsen nennt es »Findability«. Dazu gehören für ihn die vier Bereiche Informationsarchitektur, Kategorienamen, Navigation und Links. Zusammen mit der Suchfunktion sind diese Kriterien die häufigste Ursache für Usability-Probleme, also für Probleme bei der Bedienung der Webseite. Erst weit abgeschlagen folgt das Screendesign als Verursacher von Usability-Problemen.

Die Benutzerfreundlichkeit einer Webseite hängt vor allem von der Informationsarchitektur ab. Das Seitendesign kann zwar für Freude oder Ärgernis sorgen, aber für die Benutzbarkeit sind andere Punkte entscheidender.

»Findability«-Probleme

Folgend eine lose Sammlung typischer »Findability«-Probleme auf Webseiten:

  • Es ist nicht eindeutig, welche Informationen sich hinter den einzelnen Navigationspunkten verbergen.

  • Die Navigationspunkte haben keine eindeutigen Benennungen.

  • missverständliche Icons in der Hauptnavigation

  • Es ist nicht eindeutig, auf welcher Unterseite man sich befindet.

  • Links im Fließtext sind nicht eindeutig als solche erkennbar.

  • Neben einem Suchformular ist die Navigation die einzige Möglichkeit des Anwenders, sich durch die Seite zu bewegen. Steht er hier also vor Schwierigkeiten, ist die Wahrscheinlichkeit hoch, dass er die Webseite verlässt.

Die Aufzählung ließe sich noch endlos fortsetzen. Aber für das Verständnis und als Einblick sollte dies reichen. Die »Lösungen« für all diese »Findability«-Probleme folgen übrigens im Laufe des Buches.

 


Ihre Meinung?

Wie hat Ihnen das Openbook gefallen? Wir freuen uns immer über Ihre Rückmeldung. Schreiben Sie uns gerne Ihr Feedback als E-Mail an kommunikation@rheinwerk-verlag.de

<< zurück
 Zum Rheinwerk-Shop
Zum Rheinwerk-Shop: Webdesign Webdesign
Jetzt Buch bestellen

 Buchempfehlungen
Zum Rheinwerk-Shop: HTML5 und CSS3
HTML5 und CSS3


Zum Rheinwerk-Shop: Praxisbuch Usability und UX
Praxisbuch Usability und UX


Zum Rheinwerk-Shop: Responsive Webdesign
Responsive Webdesign


Zum Rheinwerk-Shop: Website-Konzeption und Relaunch
Website-Konzeption und Relaunch


Zum Rheinwerk-Shop: UX Writing und Microcopy
UX Writing und Microcopy


Zum Rheinwerk-Shop: WordPress 5
WordPress 5


Zum Rheinwerk-Shop: Stile & Looks
Stile & Looks


Zum Rheinwerk-Shop: Digitale Illustration
Digitale Illustration


 Lieferung
Versandkostenfrei bestellen in Deutschland, Österreich und in die Schweiz
InfoInfo

 
 


Copyright © Rheinwerk Verlag GmbH 2020
Für Ihren privaten Gebrauch dürfen Sie die Online-Version natürlich ausdrucken. Ansonsten unterliegt das <openbook> denselben Bestimmungen, wie die gebundene Ausgabe: Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt.
Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.

 
[Rheinwerk Computing]

Rheinwerk Verlag GmbH, Rheinwerkallee 4, 53227 Bonn, Tel.: 0228.42150.0, Fax 0228.42150.77, service@rheinwerk-verlag.de

Cookie-Einstellungen ändern