Informationsarchitektur (digitale) Informationsräume strukturieren und organisieren

1. Informationsarchitektur(digitale) Informationsräume strukturieren und organisieren Shilouette Gesamtansicht Eingangstor (menschlicher Maßstab) Detail • Geometry • Scale • Proportion • Rhythm • Symmetry @ Fotostrecke: Taj Mahal http://www.boxesandarrows.com/view/we_are_all_connected_the_path_from_architecture_to_information_architecture Spree WS 2009/2010

2. Seminar I-Prax: Inhaltserschließung visueller Medien, 5.10.2004 Spree WS 2009/2010 Sie haben sich das dieses Thema gewünscht: (Digitale) Informationsräume strukturieren und organisieren Bevor ich meinen Programmvorschlag vorstelle, wüsste ich gerne: Was wünschen Sie sich, was erwarten Sie von dem Thema? Das vorgestellte Programm ist nur ein Vorschlag: ich bitte um Veränderungen, Ergänzungen Streichungen, …  Thema des Seminars Definitionen

3. Seminar I-Prax: Inhaltserschließung visueller Medien, 5.10.2004 Spree WS 2009/2010  Kartenabfrage Definitionen Jede/r darf maximal 3 Wünsche pro Frage äußern zu: Themen / Fragestellungen Arbeitsweisen Prüfungsleistung

4. Seminar I-Prax: Inhaltserschließung visueller Medien, 5.10.2004 Spree WS 2009/2010 • Definitionen • Aufgaben • Ordnen • Strukturieren • Benennen • Navigieren • Fazit • Quellen  Definitionen Definitionen • Die IT – Definition • Informationsarchitektur 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 Design – Definition • „Information Architects make the complex clear; they make the information understandable to other human beeings.“ (Wurman, 2003) • 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. (Morville & Rosenfeld, 1998)

5. Seminar I-Prax: Inhaltserschließung visueller Medien, 5.10.2004 Spree WS 2009/2010  Beispiel – Informationsdesign-Ansatz Einstieg Richard Saul Wurmans minimalistische Darstellung des Verkehrssystems der Stadt Tokyo Zu Wurman: http://www.wurman.com/publications.html http://www.gslis.utexas.edu/~l38613dw/images/WurmanToyko1.jpg

6. Seminar I-Prax: Inhaltserschließung visueller Medien, 5.10.2004 Spree WS 2009/2010 • Definitionen • Aufgaben • Ordnen • Strukturieren • Benennen • Navigieren • Fazit • Quellen  Aufgaben von Informationsarchitekten? Aufgaben • Angenehme Nutzererfahrung schaffen / user experience (Norman / Garrett)http://www.jjg.net/elements/pdf/elements.pdf • Informationen ordnen und strukturieren • Informationen benennen • Informationen zugänglich und findbar machen • Navigation • Suche (Rosenfeld/Morville; Wodtke) http://iainstitute.org/de/

7. Seminar I-Prax: Inhaltserschließung visueller Medien, 5.10.2004 Spree WS 2009/2010 • Definitionen • Aufgaben • Ordnen • Strukturieren • Benennen • Navigieren • Fazit • Quellen  Explorationsaufgabe Aufgaben Schauen Sie sich bitte diese beiden Startseiten an http://www.bui.haw-hamburg.de/ http://www.design.haw-hamburg.de/ A) Wie unterscheidet sich die User Experience auf den beiden Seiten? • ‚look and feel‘ • 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

8. Seminar I-Prax: Inhaltserschließung visueller Medien, 5.10.2004 Spree WS 2009/2010 • 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

9. Seminar I-Prax: Inhaltserschließung visueller Medien, 5.10.2004 Spree WS 2009/2010 • 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

10. Seminar I-Prax: Inhaltserschließung visueller Medien, 5.10.2004 Spree WS 2009/2010 • 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>

11. Seminar I-Prax: Inhaltserschließung visueller Medien, 5.10.2004 Spree WS 2009/2010 • 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

12. Seminar I-Prax: Inhaltserschließung visueller Medien, 5.10.2004 Spree WS 2009/2010 • 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?

13. Seminar I-Prax: Inhaltserschließung visueller Medien, 5.10.2004 Spree WS 2009/2010 • 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?

14. Seminar I-Prax: Inhaltserschließung visueller Medien, 5.10.2004 Spree WS 2009/2010 • 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)

15. Seminar I-Prax: Inhaltserschließung visueller Medien, 5.10.2004 Spree WS 2009/2010 • 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

16. Seminar I-Prax: Inhaltserschließung visueller Medien, 5.10.2004 Spree WS 2009/2010 • Definitionen • Aufgaben • Ordnen • Strukturieren • Benennen • Navigieren • Fazit • Quellen  Fazit Fazit • Informationsarchitektur nutzt bewährte Methoden der Wissensorganisation • Information audit / Information needs • Ordnung und Struktur, Konsistenz  Klassifikation • Benennung  Indexierung und Thesaurus • Navigation  Recherchesysteme, Browsinghierarchien

17. 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 Semesterapparat Spree: IWS WM 1–3: Informationssysteme und -dienstleistungen http://semapp.bbt.haw-hamburg.de/index.php Spree WS 2009/2010 Spree WS 2009/2010 Spree WS 2009/2010