INFORMATIONSARCHITEKTUR
& INFORMATIONSDESIGN FÜR DAS WEB
LEHRVERANSTALTUNG AN DER DHBW MOSBACH
STUDIENGANG ONLINE MEDIEN
GRUNDLAGEN TEIL A
Informationsarchitektur & Informationsdesign
EURE ERWARTUNGEN?
INHALTE IM 3. SEMESTER
Organisationsformen für Informationen:
• Lineare Struktur, Baumstruktur, Netzstruktur, Expandieren,
Matrix, Schichtung, Zoomen
Navigationsdesign:
• Hierarchische Navigation, Contentnavigation,
Kontextnavigation, Pfadnavigation, Metanavigation
Werkzeuge und Methoden der Designentwicklung:
• Wireframes, Moodboards, Style Tiles
Trends im Screendesign
INHALTE IM 3. SEMESTER
Benotung:
• Entwicklung & Präsentation des Designs für
eine Website (mit Moodboard / Style Tile)
Gute Frage
WAS MACHT EIN
INFORMATIONSARCHITEKT?
Folie # 6
Folie # 7
Folie # 8
Folie # 9
Folie # 10
Folie # 11
Definition
DATEN, INFORMATION,
KOMMUNIKATION
DATEN, INFORMATION, KOMMUNIKATION
Daten: lat. dare = geben, datum Kommunikation: lat.
= das Gegebene
communicare = mitteilen
•
•
Angaben ohne Auswahl oder
Verknüpfung, reine Zeichenfolge.
Beispiel: „Präsentation“, „25.
September“
Information: lat. informare =
formen, bilden, eine Vorstellung
entwerfen
•
•
Bedeutung, übertragenes Wissen
(bzgl. Informationsarchitektur)
Beispiel: „Die Präsentation findet
am 25. September statt.“
•
•
Mitteilung, Verständigung,
Übermittlung von Informationen
Verständnis des situativen
Kontextes, Codierung und
Decodierung von bestimmten
sprachlichen oder visuellen
Redewendungen, uvm.
Beispiel: „Die Präsentation findet
am 25. September statt.“
DATEN
Inhalte einer Logfile-Datei.
Hier werden im Rahmen einer
Online-Umfrage die Antworten der
Nutzer auf dem Server erfasst.
Folie # 14
INFORMATION
Tabelle
Verdichtung der Daten zu
Werten, die sich auf die
Fragestellungen und das
Antwortraster beziehen.
Damit erhalten die „nackten“
Daten Bedeutung.
Folie # 15
KOMMUNIKATION
Visualisierung
Durch Visualisierung werden aus
Informationen interpretierbare
Darstellungen.
Hierbei werden die Daten
interpretiert, selektiert und
bisweilen auch in den Kontext mit
anderen Werten gestellt.
Folie # 16
GLEICHGEWICHT HERSTELLEN
Anwender
Kontext
Inhalt
Folie # 17
Die Perspektive macht den Unterschied
INFORMATIONSRAUM &
KONTEXT
Folie # 19
Folie # 20
INFORMATIONSRAUM | KONTEXT
Um dem Benutzer den Zugang zu Informationen zu geben,
müssen die Informationen in einem Informationsraum oder Kontext
strukturiert werden.
Museum
Summe aller Exponate,
Grafiken, erklärende Texte,
etc., die Bestandteil einer
Ausstellung sind.
Postleitzahlensuche
Summe aller Daten zu PLZ
und Ortsnamen, in einer
Datenbank. Suchergebnis:
Informationen
„Information architecture is all about organising
content or things, describing them clearly and
providing ways for people to get to them.“
Auszug aus: Donna Spencer. „A Practi cal Guide Information Architecture.“ i Books.
Folie # 22
INFORMATIONSARCHITEKTUR
Die Informationsarchitektur einer Website umfasst
• Struktur und Aufbau
• Inhalte und Themen
•
Navigationswege
ORGANISATIONSFORMEN FÜR INFORMATION
ÜBUNG: ORGANISATIONSFORMEN
▪
Recherchieren Sie zu Ihrer Organisationsform (wird zugewiesen)
▪
Erstellen Sie eine Präsentation, die mind. folgende Punkte umfasst:
▪
Vorteile
▪
Nachteile
▪
Sinnvolle Anwendungsfälle
▪
zwei konkrete Beispiele unterschiedlicher Anwendungsfälle mit
Screenshots / Visualisierung / Sitemap darstellen
Präsentation aller Ergebnisse am Ende der Übung über Beamer
▪
Abgabe der Präsentation als PDF
▪
Verfügbare Zeit: 60 min | die Übung wird nicht benotet
▪
Von A nach B in nur 3 Klicks
NAVIGATION &
NAVIGATIONSDESIGN
Folie # 27
NAVIGATION
Definition: lat. navigare = segeln, fahren; navigator = Schiffer.
Allgemein: „Das Zurechtfinden in einem topografischen Raum,
um einen gewünschten Ort zu erreichen.“ (Wikipedia)
Im virtuellen Raum: Orientierung bei der Bewegung im
Informationsraum, bei der explorativen oder gezielten Suche
nach Informationen, bei Handlungsabläufen.
WELCOME TO THE REAL WORLD
Folie # 30
Folie # 31
Folie # 32
Folie # 33
Folie # 34
Folie # 35
Folie # 36
Folie # 37
Folie # 38
Folie # 39
In den Warenkorb
In den Warenkorb
In den Warenkorb
Folie # 40
Folie # 41
Folie # 42
NAVIGATIONSDESIGN
Definition: Das visuelle Design der Elemente, die dem User die
Orientierung geben, mit der er sich gezielt im Informationsraum
bewegen kann.
Parameter:
• Form
• Größe
• Position
• Farben
• Feedback
NAVIGATIONSKATEGORIEN IM WEB
•
•
•
•
•
Hierarchische Navigation: Navigieren entlang der Baumstruktur
einer Website, ausgehend von der Startseite
Contentnavigation: Links im jeweiligen Inhalt
Kontextnavigation / kontextsensitive Navigation:
Weiterführende Links passend zum jeweiligen Inhalt der Seite.
Beispiel: Personalisierte Werbeanzeigen bei Facebook
Pfadnavigation: Abbildung der hierarchischen Position der
jeweiligen Seite als textlicher Pfad
Beispiel Breadcrumb: Home → Item Level 1 → Item Level 2 → ...
Metanavigation: Links unabhängig vom jeweiligen Content auf
jeder Seite verfügbar. Beispiele: Suche innerhalb der Website,
Kontakt, Hilfe, Glossar, Impressum
LAYOUTBEREICHE
LAYOUTBEREICHE
VERTIKALE NAVIGATION
Aufklappen tieferer
Navigationsebenen innerhalb der
ersten Navigationsebene
Positiv:
Negativ:
VERTIKALE NAVIGATION
Aufklappen tieferer
Navigationsebenen innerhalb der
ersten Navigationsebene
Positiv:
Selbst längere Begriffe finden Platz.
Erweiterbarkeit durch vertikales
Scrollen. Lange Begriffe über mehrere
Ebenen
Negativ:
Die für den Inhalt zur Verfügung
stehende Fläche ist eingeschränkt.
HORIZONTALE NAVIGATION
Aufklappen tieferer
Navigationsebenen als neue Ebene
Positiv:
Negativ:
HORIZONTALE NAVIGATION
Aufklappen tieferer
Navigationsebenen als neue Ebene
Positiv:
Übereinander angeordnete Zeilen
visualisieren gut das mentale Modell
hierarchisch angeordneter Ebenen.
Negativ:
Erweiterbarkeit eingeschränkt durch
begrenzte Breite, lange
Navigationsbegriffe nicht möglich,
horizontale listenartige Darstellung
sind nicht gut lesbar.
L-NAVIGATION
Top-Level-Navigation wird horizontal
angeordnet, 2. und 3. Ebene sowie
folgende werden vertikal am linken
Rand angeordnet.
Positiv:
Negativ:
L-NAVIGATION
Top-Level-Navigation wird horizontal
angeordnet, 2. und 3. Ebene sowie
folgende werden vertikal am linken
Rand angeordnet.
Positiv:
Entzerrung der Navigation, gut nutzbar
bei Betonung der 1. Ebene.
Negativ:
Orientierung für unerfahrenen Nutzer
schwierig, weil er mehrere
Navigationen im Blick behalten muss.
AUSKLAPP-NAVIGATION
Top-Level-Navigation wird
horizontal angeordnet, 2. und 3.
Ebene sowie folgende als Dropdowns
ausgeklappt.
Positiv:
Negativ:
AUSKLAPP-NAVIGATION
Top-Level-Navigation wird
horizontal angeordnet, 2. und 3.
Ebene sowie folgende als Dropdowns
ausgeklappt.
Positiv:
Gutes Verständnis beim Benutzer
aufgrund Ähnlichkeit zur Bedienung
gewohnter Desktop-Programme.
Schneller Zugriff auf tiefe Ebenen.
Negativ:
Aktiver Zustand nach Klick muss
entweder durch zusätzliche Navigation
(bspw. vertikal) abgebildet werden
oder fehlt optisch nach Interaktion.
MEGA-DROPDOWN / LANDSCAPE
Top-Level-Navigation wird
horizontal angeordnet, weitere
Ebenen werden in verschiedenen
Listen sortiert und teils grafisch
hervorgehoben
Positiv:
Negativ:
MEGA-DROPDOWN / LANDSCAPE
Top-Level-Navigation wird
horizontal angeordnet, weitere
Ebenen werden in verschiedenen
Listen sortiert und teils grafisch
hervorgehoben
Positiv:
Gruppierungen und Illustrationen
erleichtern die Orientierung.
Negativ:
Gefahr des Überladens besteht, häufig
werden die Mega-Dropdowns
„vollgeknallt“ - weil man‘s kann.
INTERAKTIONSDESIGN: ZUSTÄNDE
Beispiel für Definition verschiedener Interaktionszustände:
•
Bereitschaft für Ausführung durch Benutzer anzeigen
Veränderung von Farbe, Tonwert, Deckkraft, Verlaufsrichtung,
Kontur,...
Wichtig: Die „Gestalt“ des Elements bleibt erhalten.
•
Umsetzung durch CSS, Auswechseln von Grafiken, CSS-Sprites
•
•
Interaktionsdesign: Navigation & Links
Interaktionsdesign: Navigation & Links
Interaktionsdesign: Navigation & Links
Interaktionsdesign: Navigation & Links
Interaktionsdesign: Navigation & Links
Interaktionsdesign: Navigation & Links
Interaktionsdesign: Navigation & Links
Werkzeuge
WIREFRAMES
WIREFRAMES
•
•
•
•
•
Skizzenhafte graphische Darstellung der Screens
Funktionales Layout der Informations- & Bedienelemente
Fokussiert nicht die allgemeinen Elemente der Website /
Anwendung, sondern spezifische Elemente
Stellt Bedienelemente und Kommunikationselemente typisiert
und schematisiert dar: Eingabefelder, Dropdowns, Buttons,
Reiter, Akkordeons, Teasertexte, Fließtexte, ...
Kein Standard für Wireframes! Grad der Abstraktion und
Detaillierung muss aus der Aufgabenstellung /
Kundenverständnis / Vorgehensweise bestimmt werden.
Beispiel Wireframe Scribble
Beispiel Wireframe Detail
VORTEILE VON WIREFRAMES
•
•
•
•
•
•
•
Identifiziert ohne hohen Aufwand Screenelemente
Effizient um sich bei Applikationen über Pageflows & Controls klar
zu werden
Für erste Abstimmungen innerhalb und außerhalb des Projektteams
Alternative Szenarien sind einfach produzier- und vergleichbar in
Bezug auf Plausibilität, Effizienz und Benutzbarkeit
Ermöglicht Usability-Tests im frühen Konzeptstadium.
Übergang von Informationsarchitektur zum Screendesign
Abstraktion von konkreter gestalterischer Ausprägung erspart beim
Kunden Diskussionen über den Look / Texte / Bilder, stellt die
Benutzerführung in das Zentrum der Besprechung.
WIREFRAMING TOOLS
•
•
•
•
•
•
axure.com – mächtig, aber entsprechend komplex, u.a. PseudoResponsivität, CSS, Webfonts
balsamiq.com – einfacher Einstieg, günstig, absichtlich recht
rougher Look
moqups.com – guter Mittelweg, zügiger Einstieg, grundlegende
Interaktivität
uxpin.com – recht mächtig, trotzdem schneller Einstieg, ebenfalls
Responsivität ansatzweise möglich
InDesign & Photoshop | adobe.com – gewohnte Bedienung,
allerdings keine spezielle Ausrichtung auf Wireframes
Keynote, PowerPoint, Paint, Stift & Papier,... lmgtfy.com –
letztendlich egal, solange Ihr kreativ & effizient zum jeweiligen Ziel
kommt
ÜBUNG: NAVIGATIONSDESIGN ANALYSE
•
Erstellen Sie Wireframes für drei Ansichten einer Ihnen vorgegebenen
Corporate Website:
• Startseite → Übersichtsseite → Detailseite
•
Wählen Sie für Ihren Screenshot den Ausschnitt "above the fold" bis zu
einer Höhe von 1.000px
•
Benennen Sie Layoutbereiche und Navigationskategorien & -design
•
•
Dokumentieren Sie jeweils Screenshot und Wireframe in einem PDF
Erarbeiten Sie je mind. eine Optimierung der Informationsarchitektur
und setzen Sie diese im Wireframe um
Präsentation der Ergebnisse am Ende der Übung über Beamer
•
Abgabe der Präsentation als PDF | Zeit: 150 min.
•
Diese Übung wird nicht benotet
•
VIELEN DANK!
peter.schweizer@living-the-net.de