Informationsarchitektur Informationsangebote, in denen sich Nutzer zurecht finden

1. InformationsarchitekturInformationsangebote, in denen sich Nutzer zurecht finden Shilouette Gesamtansicht Eingangstor (menschlicher Maßstab) Detail • Geometry • Scale • Proportion • Rhythm • Symmetry @ Fotostrecke: Taj Mahal http://www.boxesandarrows.com/files/banda/we_are_all_connected_the_path_from_architecture_to_information_architecture/ Letzte Aktualisierung: 2008-05-19 Spree SoSe 2008

2. Seminar I-Prax: Inhaltserschließung visueller Medien, 5.10.2004 Spree SoSe 2008 • Umfrage • Definitionen • Aufgaben • Ordnen • Strukturieren • Benennen • Navigieren • Fazit • Quellen  Zum Einstieg eine kleine Umfrage Einstieg • Was halten Sie für die wichtigsten Elemente einer guten Website? • reichhaltig bebildert • einfache Navigation • coole Bezeichnungen • informative und nützliche Inhalte • Übersichtlichkeit • viele verschiedene Navigationsmöglichkeiten • Einsatz neuester Technologie (plug ins...)

3. Seminar I-Prax: Inhaltserschließung visueller Medien, 5.10.2004 Spree SoSe 2008 • Umfrage • Definitionen • Aufgaben • Ordnen • Strukturieren • Benennen • Navigieren • Fazit • Quellen  Definitionen Definitionen • Die IT – Definition • Informations-Architektur ist die Planung und Verwaltung der IT-Infrastruktur einer Organisation. Darin eingeschlossen ist die Entwicklung von Grundstrukturen und Richtlinien dafür, wie IT-Ressourcen wie Computer, Daten, Software und Kommunikationsmöglichkeiten verwaltet werden sollen. • Die Wissensorganisations-Definition • Informations-Architektur ist der Prozess des Organisierens, Benennens und des Entwickelns von Navigations- und Suchsystemen um Nutzer bei der Suche nach und dem Management von Informationen zu unterstützen.

4. Seminar I-Prax: Inhaltserschließung visueller Medien, 5.10.2004 Spree SoSe 2008 • Umfrage • Definitionen • Aufgaben • Ordnen • Strukturieren • Benennen • Navigieren • Fazit • Quellen  Aufgaben Einstieg • Überzeugende Architektur • Vor der Planung einer Website sollten folgende Fragen berücksichtigt werden: • Welche Aktionen sollen mit der Website ausgeführt werden? • Wer soll davon überzeugt werden, diese Aktionen auszuführen? • Was benötigt diese Person, damit sie sich auf der Seite wohl fühlt/Vertrauen zur Seite hat. Vgl. Eisenberg 2002

5. Seminar I-Prax: Inhaltserschließung visueller Medien, 5.10.2004 Spree SoSe 2008 • Umfrage • Definitionen • Aufgaben • Ordnen • Strukturieren • Benennen • Navigieren • Fazit • Quellen  Aufgaben von Informationsarchitekten? Aufgaben • Informationen ordnen • Informationen strukturieren • Informationen benennen • Erstellen eines Navigationssystems • Erstellen eines Suchsystems Struktur und Navigation haben große ‚Überzeugungskraft‘ in der Informationsarchitektur

6. Seminar I-Prax: Inhaltserschließung visueller Medien, 5.10.2004 Spree SoSe 2008 • Umfrage • Definitionen • Aufgaben • Ordnen • Strukturieren • Benennen • Navigieren • Fazit • Quellen  Explorationsaufgabe Aufgaben Schauen Sie sich bitte diese beiden Startseite an http://www.faz.net/s/homepage.html(die hinteren beiden Reihen) und http://www.spiegel.de/flash/0,5532,16632,00.html(Rest) an. A) Wie werden: • Informationen geordnet? • Informationselemente benannt? • Welche Navigations- und Suchmöglichkeiten gibt es? B) Was gefällt Ihnen, was gefällt Ihnen nicht? Begründen Sie Ihr Urteil

7. Seminar I-Prax: Inhaltserschließung visueller Medien, 5.10.2004 Spree SoSe 2008 • Umfrage • Definitionen • Aufgaben • Ordnen • Strukturieren • Benennen • Navigieren • Fazit • Quellen  Informationen ordnen Informationen ordnen • Nehmen Sie sich 5 Minuten Zeit und ordnen Sie die unten aufgeführten Begriffe: • Architekt, U-Bahn, Bahnhof, Krankenschwester, Krankenhaus, Lehrer, Haus, Meer, Wissenschaftler, Arzt, Schule, Mechaniker, Seemann • Was fällt an dieser Inhaltsübersicht einer Website einer Bibliothek auf? • Benutzerausweis beantragen • Bücher vormerken • Erwachsene • Jugendliche • Kultur und Medien • Naturwissenschaften • Teenager • Über uns

8. Seminar I-Prax: Inhaltserschließung visueller Medien, 5.10.2004 Spree SoSe 2008 • Umfrage • Definitionen • Aufgaben • Ordnen • Strukturieren • Benennen • Navigieren • Fazit • Quellen  Ordnungsschemata Ordnungsschemata Man unterscheidet unterschiedliche Ordnungsschemata • Exakte Ordnungsschemata • Alphabetisch • Chronologisch • Geographisch • Sprache • … • Mehrdeutige Ordnungsschemata • Nach Themen Architektur, Bildung, Erziehung,... • Nach Aufgaben • Bearbeiten • Einfügen • Formatieren • Nach Nutzergruppen Studenten, Lehrende, Frauen,… • Metaphorisch • Virtueller Klassenraum • Kandidaten-Karussel

9. Seminar I-Prax: Inhaltserschließung visueller Medien, 5.10.2004 Spree SoSe 2008 • Umfrage • Definitionen • Aufgaben • Ordnen • Strukturieren • Benennen • Navigieren • Fazit • Quellen  Ordnung und Webdesign Ordnungsschemata • Die visuellen Muster sollen die logischen • und funktionalen Beziehungen zwischen den Informationselementen widerspiegeln • Gruppierung • Sind verwandte Elemente durch 'white space', grafische Begrenzungen, gleiche Helligkeit, Farbe oder Textur gruppiert? • Sind nicht-verwandte Elemente optisch voneinander unterschieden oder räumlich voneinander getrennt? • Abstufung von Bedeutung • Wird die Abstufung der Bedeutung einzelner Elemente im Verhältnis zu anderen Elementen grafisch unterstützt? • Farbgebung, Platzierung, Größe, Isolierung, Komplexität und Kontrast erregen besonders leicht Aufmerksamkeit. • Konsistenz und Vorhersagbarkeit • Ist das Design konsistent und vorhersagbar? • Werden Elemente, die logisch oder funktional gleich sind, optisch gleich behandelt? • Ist das Platzierungsmuster der Elemente auf den Seiten konsistent? • Ist der Hintergrund konstant? • Reihenfolge • Unterstützt das Design die Reihenfolge, in der der Besucher die Informationselemente wahrnehmen soll? vgl. Website von Ursula Schulz: <http://www.bui.fh-hamburg.de/pers/ursula.schulz/webusability/praesentation.html>

10. Seminar I-Prax: Inhaltserschließung visueller Medien, 5.10.2004 Spree SoSe 2008 • Umfrage • Definitionen • Aufgaben • Ordnen • Strukturieren • Benennen • Navigieren • Fazit • Quellen  Strukturieren Strukturieren Die Struktur einer Site ist dadurch bestimmt, in welcher Beziehung Informationen zueinander stehen: Abb. 1 Flache Hierarchie Abb. 2 Tiefe Hierarchie Farbe: gelb Rand: ohne Form: Rechteck Abb. 3 Hypertext/Netz Abb. 4 Facettenstruktur

11. Seminar I-Prax: Inhaltserschließung visueller Medien, 5.10.2004 Spree SoSe 2008 • Umfrage • Definitionen • Aufgaben • Ordnen • Strukturieren • Benennen • Navigieren • Fazit • Quellen  Strukturieren Strukturieren • Die richtige Struktur für eine • Aufgabe finden • Für welche Aufgaben würden Sie eine flache Hierarchie wählen? • Für welche Aufgaben würden Sie eine tiefe Hierarchie wählen? • Für welche Aufgaben würden Sie eine Hypertextstruktur wählen?

12. Seminar I-Prax: Inhaltserschließung visueller Medien, 5.10.2004 Spree SoSe 2008 • Umfrage • Definitionen • Aufgaben • Ordnen • Strukturieren • Benennen • Navigieren • Fazit • Quellen  Benennen Benennung • Anforderungen an Benennungen • Konsistenz • z.B. im Sprachstil • eine Benennung sollte nicht auf verschiedenen Seiten unterschiedliche Bedeutungen haben • Berücksichtigung von bestehenden Konventionen • wenn Sie abweichen, sollte das einen Grund haben • Linkbenennungen: z. B. keywords als Links • Benennungen im Kontext und ohne Kontext • Bilder? • ein Wort sagt mehr als tausend Worte?

13. Seminar I-Prax: Inhaltserschließung visueller Medien, 5.10.2004 Spree SoSe 2008 • Umfrage • Definitionen • Aufgaben • Ordnen • Strukturieren • Benennen • Navigieren • Fazit • Quellen  Navigieren Navigieren • Funktionen von Navigationssystemen • Offensichtliche Funktionen von Navigationssystemen • Standortbestimmung • Suchhilfe / Browsingstruktur • 'Übersehene' Funktionen von Navigationssystemen • Orientierungsfunktion - bietet Sicherheit und Kontrolle • Macht die Inhalte der Site sichtbar • Zeigt, wie die Seite zu nutzen ist • Wo ist der Anfang? • Welche Auswahlmöglichkeiten gibt es? • Schafft Vertrauen in die Urheber der Seite • "...denn sie wissen, was sie tun" (vgl. Steve Krug: Don't make me think! A Common Sense Approach toWeb Usability. Indianapolis: Macmillan, 2000)

14. Seminar I-Prax: Inhaltserschließung visueller Medien, 5.10.2004 Spree SoSe 2008 • Umfrage • Definitionen • Aufgaben • Ordnen • Strukturieren • Benennen • Navigieren • Fazit • Quellen  Typen von Navigationssystemen Navigieren • Typen von Navigationssystemen • Hierarchie / Architektur der Site • globale Navigationssysteme • Hilfsmittel, die die Navigation quer zur Hierarchie erlauben • Navigationsleiste • Home-Button • Frames • lokale Navigationssysteme für Unterbereiche • spontane Navigationssysteme durch interne und externe Links • ausgelagerte Navigationssysteme • Inhaltsverzeichnis • Index • Site map

15. Seminar I-Prax: Inhaltserschließung visueller Medien, 5.10.2004 Spree SoSe 2008 • Umfrage • Definitionen • Aufgaben • Ordnen • Strukturieren • Benennen • Navigieren • Fazit • Quellen  Tipps zur Gestaltung von Navigationssystemen Navigieren Halten Sie sich an die gängigen Konventionen • Berücksichtigen Sie die Navigationsmöglichkeiten der gängigen Browser • URL eingeben (sprechende URL wählen) • Titelanzeige im Kopf des Browserfensters (sprechenden Titel wählen) • Vorwärts- / Rückwärts-Button • Verlauf (History) (Wo war ich alles?) • Bookmarks (Was war relevant für micht?) • Verfärbung besuchter Hypertext-Links von blau zu violett (Wo war ich schon?) • Prospektive Anzeige der URL am Fuß des Browser-Fensters (Wo komme ich hin?) • Berücksichtigen Sie die Standards seitenintegrierter Navigationssysteme • Navigationsleisten sollen am oberen und unteren Ende der Seite platziert werden • Die Nutzer sehen sofort, wo sie sind, während die Seite sich lädt • Eine bewährte Platzierung von Navigationsleisten ist das umgedrehte L. • Grafiken laden sich langsamer als Text und sind aufwändiger zu ändern oder zu ergänzen. • Grafische Lösungen immer durch eine textuelle Alternative ergänzt werden (ALT-tag) • Icons als Navigationselemente sind nicht so eindeutig wie Text.

16. Seminar I-Prax: Inhaltserschließung visueller Medien, 5.10.2004 Spree SoSe 2008 • Umfrage • Definitionen • Aufgaben • Ordnen • Strukturieren • Benennen • Navigieren • Fazit • Quellen  Tipps zur Gestaltung von Navigationssystemen Navigieren • Vor- und Nachteile von Navigationssystemen • Frames • Vorteile: • Mehrere Fenster können unabhängig voneinander gescrollt werden • Links in einem Fenster können Inhalt in einem anderen Fenster kontrollieren. • Nachteile: • Jedes weitere Fenster kostet Platz. • Frames können wichtige Browser-Funktionen außer Kraft setzen: : Bookmarking, History-Liste, Zurück-Button, eine Seite neu laden. • Eine Seite mit Frames lädt sich langsamer. • Ein Design mit Frames kann sehr kompliziert werden. • Pull-down Menüs • Vorteile: • Man kann viele Optionen unter bringen • Platz sparend • Nachteile: • Je mehr Optionen, desto schwieriger ist die Anwendung für den Benutzer. • Benutzer müssen selbst aktiv werden, um zu sehen, welche Optionen ihnen zur Verfügung stehen.

17. Seminar I-Prax: Inhaltserschließung visueller Medien, 5.10.2004 Spree SoSe 2008 • Umfrage • Definitionen • Aufgaben • Ordnen • Strukturieren • Benennen • Navigieren • Fazit • Quellen Schnelltest von Navigationssystemen Test Der Fallschirmspringertest Stellen Sie sich vor, Sie sind als Fallschirmspringerin auf einer Website ausgesetzt. Wissen Sie sofort, wo Sie sind? Beantwortet Ihnen das Navigationssystem folgende Fragen? • Was ist das hier für eine Webseite? • Wo genau befinde ich mich? • Wie ist die Webseite gegliedert? • Welche Abschnitte gibt es? • Welche Wahlmöglichkeiten habe ich auf dieser Ebene? • Auf welcher Ebene befinde ich mich in der Gesamtstruktur? • Wie kann ich suchen? Testablauf Schritt 1: Wählen Sie eine beliebige Website und drucken Sie aus Schritt 2: Nehmen Sie einen Stift zur Hand und versuchen Sie so rasch wie möglich folgende Elemente zu finden: 1. Wo steht die Site ID? 2. Name der Seite 3. Abschnitte und Unterabschnitte 4. Lokale Navigation 5. “Wo bin ich”- Hinweis? 6. Suche

18. Seminar I-Prax: Inhaltserschließung visueller Medien, 5.10.2004 Spree SoSe 2008 • Umfrage • Definitionen • Aufgaben • Ordnen • Strukturieren • Benennen • Navigieren • Fazit • Quellen  Fazit Fazit • Informationsarchitektur nutzt bewährte Methoden der Wissensorganisation • Ordnung und Struktur, Konsistenz  Klassifikation • Benennung  Indexierung und Thesaurus • Navigation  Recherchesysteme, Browsinghierarchien

19. Seminar I-Prax: Inhaltserschließung visueller Medien, 5.10.2004 • Umfrage • Definitionen • Aufgaben • Ordnen • Strukturieren • Benennen • Navigieren • Fazit • Quellen  Quellen und weiterführende Ressourcen Quellen / Ressourcen Chiou, Fu-Tien: We are all connected : The path from Architecture to Information-Architecture. In: Boxes and Arrows, 2003/11/10 http://www.boxesandarrows.com/view/we_are_all_connected_the_path_from_architecture_to_information_architecture Kalmbach, James: Designing Web Navigation. Sebastopol, CA: O'Reilly & Associates,2007 Krug, Steve: Don‘t make me thiink! Indianapolis: Macmillan, 2000 Rosenfeld, Louis Rosenfeld und Peter Morville: Information Architecture for the World Wide Web. Sebastopol, CA: O'Reilly & Associates, 1998 Shiple, John: Information Architecture Tutorial http://webmonkey.wired.com/webmonkey/design/site_building/tutorials/tutorial1.html einführender E-learningkurs Weiterführende Links: The Information Architecture Institute http://iainstitute.org/en/ University of Minnesota: Web Design References http://www.d.umn.edu/itss/support/Training/Online/webdesign/architecture.html