Musik suchen und finden - Professur Mediengestaltung

Transcription

Technische Universität Dresden
Fakultät Informatik
Professur für Mediengestaltung
Belegarbeit
Musik suchen und finden
Entwicklung einer Benutzeroberfläche
„Alte Musik in Dresden“
Bearbeiter:
Bastian Hahn
Matrikelnummer 2928340
Betreuer:
Dipl.-Des. Anne Recknagel
Prof. Dr. Hans-Günter Ottenberg
Hochschullehrer:
Prof. Dr. Ing. habil. Rainer Groh
Abgabetermin:
10. September 2007
Inhaltsverzeichnis
Seite iii
Inhaltsverzeichnis
Inhaltsverzeichnis ......................................................................................................................iii 1 2 Einleitung ........................................................................................................................... 1 1.1 Problemstellung .......................................................................................................... 1 1.2 Aufgabenstellung ........................................................................................................ 1 1.3 Aufbau der Arbeit ....................................................................................................... 2 Analyse der Ausgangssituation .......................................................................................... 3 2.1 Ausgewählte Online-Musikplattformen ..................................................................... 3 2.1.1 Klassik.com ............................................................................................................ 3 2.1.2 Deutsches Musikinformationszentrum - miz.org ................................................... 5 2.1.3 iTunes ..................................................................................................................... 6 2.2 Zielgruppe................................................................................................................... 7 2.3 Zielsetzung ................................................................................................................. 8 2.3.1 Ziele des Auftraggebers .......................................................................................... 9 2.3.2 Ziele des Benutzers............................................................................................... 10 2.3.3 Usability-Ziele ...................................................................................................... 10 2.4 3 Inhaltspektrum der Projektwebseite ......................................................................... 12 Informationsarchitektur .................................................................................................... 14 3.1 Organisation von Inhalten ........................................................................................ 15 3.1.1 Herausforderungen der Organisation.................................................................... 15 3.2 Organisationsschemata und -strukturen.................................................................... 16 3.2.1 Organisationsschemata ......................................................................................... 16 3.2.2 Organisationsstrukturen ........................................................................................ 19 3.3 Navigation ................................................................................................................ 21 3.3.1 Navigationstypen .................................................................................................. 21 3.4 Labeling-System ....................................................................................................... 23 Inhaltsverzeichnis
Seite iv
3.4.1 Typen von Labeling-Systemen ............................................................................. 24 3.5 Wireframes ............................................................................................................... 26 3.5.1 Seitentypen ........................................................................................................... 26 4 Oberflächengestaltung ...................................................................................................... 35 4.1 Layout ....................................................................................................................... 35 4.1.1 Layout vertikal...................................................................................................... 35 4.1.2 Layout horizontal.................................................................................................. 36 4.2 Farben ....................................................................................................................... 39 4.3 Navigation ................................................................................................................ 40 4.3.1 Hauptnavigation und Breadcrumb ........................................................................ 40 4.3.2 Metanavigation ..................................................................................................... 41 4.3.3 Weiterführende Navigation .................................................................................. 41 4.3.4 Contentnavigation................................................................................................. 42 4.3.5 Suchfunktion......................................................................................................... 43 4.3.6 Zusatznavigation................................................................................................... 44 5 4.4 Typografie ................................................................................................................ 45 4.5 Links ......................................................................................................................... 47 4.6 Symbole/ Icons ......................................................................................................... 48 4.7 Komponenten ........................................................................................................... 49 xHTML/ CSS Umsetzung ................................................................................................ 52 5.1 Barrierefreiheit-Richtlinien ...................................................................................... 52 5.2 Die Struktur des Markups ......................................................................................... 53 5.2.1 Metanavigation ..................................................................................................... 54 5.2.2 Logo ...................................................................................................................... 55 5.2.3 Hauptnavigation und Breadcrumb ........................................................................ 55 5.2.4 Inhaltsbereich ....................................................................................................... 56 Inhaltsverzeichnis
Seite v
5.2.5 Fußbereich ............................................................................................................ 57 5.3 Typografie ................................................................................................................ 57 5.4 Komponenten ........................................................................................................... 58 5.4.1 Links ..................................................................................................................... 58 5.4.2 Bilder .................................................................................................................... 59 5.4.3 Überschriften ........................................................................................................ 59 5.4.4 Absätze, Textbereiche und Listen ........................................................................ 60 5.4.5 Boxen .................................................................................................................... 61 5.4.6 Werbeteaser .......................................................................................................... 62 5.4.7 Audiowiedergabe .................................................................................................. 62 6 Zusammenfassung ............................................................................................................ 63 Abbildungsverzeichnis ........................................................................................................... VII Abkürzungsverzeichnis ............................................................................................................ IX Literaturverzeichnis ................................................................................................................... X Anhang .................................................................................................................................. XIII A. Screenshot der Startseite von klassik.com................................................................. XIII B. Screenshot einer Detailseite von klassik.com............................................................ XIV C. Screenshot der Startseite von miz.org ........................................................................ XV D. Screenshot der Auflistung aller Komponisten von miz.org ...................................... XVI E. Screenshot der Startseite von iTunes ....................................................................... XVII F. Beispiel für Organisationschemata ......................................................................... XVIII G. Hierarchische Struktur der Inhalte der Projektwebseite ............................................ XIX Eidesstattliche Erklärung ....................................................................................................... XXI Einleitung
Seite 1
1 Einleitung
1.1 Problemstellung
Das Internet hat seit seiner Einführung eine beeindruckende Entwicklung genommen. Nicht
nur, dass es in kurzer Zeit zum Massenmedium geworden ist, auch bringt das Internet
nachhaltige Veränderungen in Wirtschaft und Gesellschaft. Während noch vor einigen Jahren
der Begriff und die Funktionsweise nur wenigen Personen bekannt war, so ist es heute weit
verbreitet und wird von einem zunehmend größeren Personenkreis genutzt. So hat sich die
Anzahl der Internetnutzer von 1997 bis 2007 nahezu verzehnfacht (vgl. [BRI06]). Dabei
handelt es sich in keiner Weise mehr nur um technisch versierte Benutzer, sondern breite
Kreise der Bevölkerung mit unterschiedlichem Wissen und Bedürfnissen nutzen dieses neue
Medium.
Ein großer Teil des Internets fungiert als Informationssystem, in dem verschiedene Daten zu
unzählig vielen Themen bereitgestellt werden. Die Anwendungsmöglichkeiten sind sehr
vielfältig und umfangreich. Dadurch bietet der Zugriff eine Vielzahl an Schwierigkeiten:
Neben den technischen Unzugänglichkeiten des Internets, bedeutet besonders der Aufbau des
Informationssystem und die Gestaltung der dazugehörigen Benutzeroberfläche eine große
Herausforderung. Es gilt das Problem der Informationsüberlastung zu bewältigen und
gleichzeitig die Kommunikation mit dem Besucherpublikum zu führen. Folgen einer
unzureichend
gestalteten
Informationsplattform
hinsichtlich
der
genannten
Herausforderungen führt zu schwer auffindbaren und nachteilig präsentierten Inhalten.
Dadurch wird oft Verwirrung und Frustration beim Benutzer ausgelöst. Die einzelnen Ziele
des Besuchers und des Informationssystems können nicht erfüllt werden.
1.2 Aufgabenstellung
In dieser Belegarbeit wird aufgezeigt, welche Schritte notwendig sind, um eine Webseite für
ein Informationssystem zum Thema „Alte Musik in Dresden“ zu gestalten. Es werden die
verschiedenen
Aspekte
zum
Aufbau
einer
Informationsarchitektur
und
einer
benutzerfreundlichen Weboberfläche zusammengetragen, in Beziehung gesetzt und zusätzlich
durch das konkrete Thema prototypisch realisiert. Ziel ist es, dass der Leser dieser Arbeit
Zusammenhänge
erkennt
und
Informationssystem zu gestalten.
die
Grundlagen
besitzt,
um
ein
webbasiertes
Einleitung
Seite 2
Als weitere Zielsetzung wird eine Benutzeroberfläche entwickelt. Diese Entwicklung wird
sich an den Ergebnissen der theoretischen Ausführungen orientieren.
Aufgrund des begrenzten Rahmens einer Belegarbeit liegt der Schwerpunkt auf der
Informationsarchitektur und der Usability einer Webseite bzw. speziell der Webseite „Alte
Musik in Dresden“. Damit ist die Festlegung der Oberfläche gemeint, auf dessen Grundlage
die Implementation stattfinden kann.
1.3 Aufbau der Arbeit
Zunächst wird in Kapitel 2 die Ausgangslage zur Gestaltung einer Weboberfläche zum Thema
der „Alten Musik in Dresden“ (im weiteren Verlauf als Projektwebseite bezeichnet)
analysiert. Dazu werden drei Websites vorgestellt, die sich mit ähnlicher Thematik
beschäftigen. Der grundlegende Aufbau wird aufgezeigt. Des Weiteren findet eine Analyse
der Zielgruppe für die spätere Arbeit statt. Es wird auch auf die einzelnen Ziele eingegangen,
die die Projektwebseite verfolgt und der Inhaltsumfang dargestellt. Die Ausführungen dienen
als Grundlage für die weitere Arbeit.
In Kapitel 3 werden die einzelnen Aspekte zum Aufbau der Informationsarchitektur erläutert.
Gleichzeitig werden die theoretischen Ausführungen am Beispiel der Projektwebseite
praktisch angewandt. Ebenfalls wird die funktionelle Gestaltung der Website angeführt.
Kapitel 4 beschäftigt sich mit der grafischen Gestaltung der Projektwebseite und deren
Komponenten. Die Umsetzung wird an Hand von Usabilityempfehlungen begründet.
Das Kapitel 5 wird der praktischen Realisierung des Oberflächenprototyps der
Projektwebseite gewidmet. Dabei werden die wichtigsten Strukturen und Elemente unter
Verwendung von xHTML- und CSS-Quelltext erläutert.
Letztlich werden in Kapitel 6 die Ergebnisse der Belegarbeit in Bezug auf die Zielsetzung
zusammengefasst.
Analyse der Ausgangssituation
Seite 3
2 Analyse der Ausgangssituation
Für ein erfolgreiches Konzept des Internetauftritts ist die entscheidungstheoretische Analyse
und Strukturierung im Vorfeld eine wichtige Maßnahme. Dadurch werden die Bedürfnisse
des Marktes, der Zielgruppe und des Auftraggebers deutlich. Auch gilt es den inhaltlichen
Umfang der Projektwebseite zu bestimmen.
2.1 Ausgewählte Online-Musikplattformen
Die Rolle des Internets bei der Informationsrecherche wird immer größer. Daher werden im
Folgenden die Auftritte von Online-Plattformen analysiert, die sich thematisch mit der Musik
beschäftigen und Informationen darüber anbieten. Die Auswahl stellt nur einen kleinen
Querschnitt durch die Musiklandschaft im Internet dar. Die nachfolgenden Ausführungen sind
ein erster Anhaltspunkt und Ideenpool für die Gestaltung der Projektwebseite. Es werden
zunächst Layout und Navigation der zentralen Seiten betrachtet. Danach wird der Weg hin zu
einer detailierten Information aufgezeigt.
2.1.1 Klassik.com
Klassik.com
bezeichnet
sich
selbst
als
„das
unabhängige
Klassikmagazin“,
das
klassikinteressierte Besucher über das aktuelle Geschehen am Plattenmarkt, in Konzertsälen
und Opernhäusern informiert. Zusätzlich werden auch ausführliche Informationen zu
Komponisten, Interpreten und Plattenlabels angeboten. Die Website präsentiert sich in
Farben, die eine sofortige Assoziation zur klassischen Musik erlauben (vgl. Abbildung 1/
Anhang A).
Abbildung 1: Screenshot der Startseite von klassik.com (Großansicht siehe Anhang A)
Seite 4
Im Kopfbereich befindet sich das Logo der Website mit einem Slogan, der den Besucher
direkt anspricht („Ihr Klassikmagazin im Netz“). Rechts daneben wurde ein Suchbereich
integriert, dessen Funktionalität jedoch nur registrierten Besuchern zur Verfügung steht. Die
Hauptnavigation ist direkt unterhalb der Seiten-Kennung angeordnet und zeigt die einzelnen
Themenbereiche. Bewegt man die Maus über einen Menüpunkt, klappt sich ein Untermenü
auf, das Zugang zu Unterpunkten der Kategorie bietet. Zur Standpunkt-Lokalisierung des
Standpunktes des Besuchers wird die sog. Breadcrumb präsentiert. Der nachfolgende
Inhaltsbereich gliedert sich in zwei Spalten. Die linke Spalte zeigt die Inhalte der
Themenpunkte. Durch Verweise innerhalb dieser Spalte kann der Benutzer zu den
themenbezogenen Informationen gelangen. Der rechte Bereich zeigt eine Login-Box zur
Benutzerregistrierung sowie verschiedene Boxen mit Querverlinkungen zu Inhalten der
Webseite und Links zu externen Quellen. Im Fußbereich findet der Besucher eine
unterstützende Navigation sowie einen rechtlichen Hinweis auf die Urheber der Plattform. Ist
der Besucher nun im Speziellen beispielsweise auf der Suche nach Informationen eines
Komponisten, bietet sich ihm folgende Navigationsmöglichkeit, um an die gewünschten
Inhalte zu gelangen. Der Besucher wählt den Hauptmenüpunkt „Portraits“ und klickt auf den
Untermenüpunkt „Komponisten“. Auf der Unterseite angekommen, hat er die Möglichkeit
sich über eine alphabetische Auflistung den Komponisten herauszusuchen. Der Besucher
kann ebenfalls den Komponistenname in die Suchbox eingeben. Wurde der richtige
Komponist gefunden, können die biographischen Daten sowie weiterführende Informationen
angesehen werden.
Abbildung 2: Screenshot einer Detailseite von klassik.com (Großansicht siehe Anhang B)
Seite 5
2.1.2 Deutsches Musikinformationszentrum - miz.org
Das
Musikinformationszentrum
(MIZ)
ist
eine
öffentliche
Informations-
und
Serviceeinrichtung mit dem Ziel, das Musikleben als Teil des kulturellen Lebens transparenter
zu machen, die Orientierung in der dichten und vielfältigen Musiklandschaft zu erleichtern
sowie die Entwicklung der Musikkultur dokumentierend zu begleiten (vgl. [MIZ]). Das
Design des MIZ präsentiert sich in einem sehr seriös wirkenden Erscheinungsbild.
Abbildung 3: Screenshot der Startseite von miz.org (Großansicht siehe Anhang C)
Im oberen Bereich der Webseite sieht der Besucher zwei Logos, vom Deutschen Musikrat
und vom MIZ selbst. Diese vermitteln dem Besucher ebenfalls das Gefühl einer offiziellen
und glaubwürdigen Webseite. Darunter folgen ein Bild und Logos der einzelnen Förderer
dieser Plattform. Die Hauptnavigation zeigt die Kategorien, mit denen sich die Webseite
beschäftigt. Das Layout des vertikalen Mittelbereiches ist dreispaltig. In der ersten Spalte
wurde die Suche, erweiterte Navigation (mit z.B. Sitemap, Kontakt, Impressum) und eine
Werbefläche integriert. Die mittlere Spalte bildet den Inhaltsbereich, in dem alle
Informationen präsentiert werden. Auf der Startseite findet der Besucher einen kurzen
Willkommenstext, gefolgt von Erläuterungen zu den Themenbereichen der Webseite. Die
rechte Spalte auf der Startseite zeigt aktuelle Nachrichten sowie einen personalisierten
Bereich, in dem der Besucher für ihn relevante Artikel speichern kann. Auf den Unterseiten
beinhaltet diese Spalte eine lokale Suchfunktion. Der Fußbereich zeigt den Hinweis zum
Urheber und eine erweiterte Navigation. Möchte der Besucher Informationen über einen
Komponisten einholen, hat er auch hier mehrere Navigationsmöglichkeiten. Ein Weg führt
ihn über eine Suchanfrage und einer anschließenden Auswahlliste aller gefundenen
Komponisten. Ebenfalls kann er in der Hauptnavigation den Punkt „Komponisten“ wählen.
Seite 6
Hier erhält er eine alphabetische Auflistung aller Komponisten und sucht den für ihn
relevanten Komponisten heraus.
Die rechte Spalte bietet noch die Möglichkeit, die Ergebnisliste durch Parameter (z.B.
Geschlecht, Geburtsdatum) einzugrenzen. Wurde der gesuchte Komponist gefunden, gelangt
der Besucher durch einen Klick auf den Namen zur Detailseite. Hier werden die einzelnen
Informationen präsentiert.
Abbildung 4: Screenshot Auflistung aller Komponisten von miz.org (Großansicht siehe Anhang D)
2.1.3 iTunes
iTunes ist eine kostenlose Software der Firma Apple, zum Abspielen, Organisieren und
Kaufen von Musik, Filmen und Spielen. Zusätzlich sind zahlreiche Informationen über die
diversen Künstler enthalten. Die Startseite präsentiert dem Besucher eine Vielzahl von Boxen,
die Links bzw. kleine Vorschaubilder zu den Angeboten des Shops enthalten. Die Boxen sind
in einem dreispaltigen Layout thematisch angeordnet. So enthält beispielsweise eine Box
Links zu den verschiedenen Musikrichtungen oder Neuerscheinungen. Ein klassisches
Hauptmenü ist nicht zu finden. Lediglich im Kopfbereich wird ein Suchfeld und im
Fußbereich eine erweiterte Navigation angeboten.
Abbildung 5: Screenshot der Startseite von iTunes (Großansicht siehe Anhang E)
Seite 7
Auf der Suche nach Informationen über einen Interpreten muss der Besucher sich seinen Weg
durch die vielen Links suchen und hat dabei zahlreiche Möglichkeiten, um ans Ziel zu
gelangen. Ein Weg führt über den Albumtitel. Auf dessen Detailansicht verweist ein Link auf
alle Alben des Künstlers und von dieser Seite gelangt der Besucher zu dessen Biographie. Auf
der Biographieseite finden sich alle Künstlerinformationen und zahlreiche Querverlinkungen
zu Künstlern, die mit dem Gewählten in Verbindung stehen. So werden z.B. Zeitgenossen,
Anhänger oder beeinflusste Personen aufgelistet.
Abbildung 6: Screenshot einer Biographieseite von iTunes
2.2 Zielgruppe
Das Wissen über das spätere Besucherpublikum ist eine sehr wichtige Komponente im
Planungsprozess. Die Zielgruppe bestimmt den Aufbau der Inhaltsstruktur sowie das Design
der Webseite. Das Ziel ist es, möglichst viele Erwartungen der Anwender an die Webseite zu
erfüllen, der Benutzer soll immer im Mittelpunkt stehen.
Um den Anforderungen der Zielgruppe gerecht zu werden, muss die Zielgruppe
charakterisiert werden. Es ist zu berücksichtigen welcher Altersgruppe sie angehören, wie der
Bildungsstand und das Nutzungsverhalten im Internet ist sowie in welchem Umfeld die
Website benutzt werden soll.
Ausgehend von dem Thema „Alten Musik in Dresden“, lässt sich die Zielgruppe auf einen
Personenkreis einschränken, der sich mit der klassischen Musikszene beschäftigt. Laut zweier
Studien (vgl. [ARD02] und [Niederm05]) zählen besonders Personen ab 50 Jahren, mit
hohem Bildungsniveau und gutem Einkommen zu dieser Gruppe. Davon ausgehend kann
festgestellt werden, dass sich mit diesen Eigenschaften auch das Nutzungsverhalten im
Internet und die Ansprüche daran ändern. Nach einer Studie der AGFO (vgl. [AGFO07]) wird
das Internet in der Altersgruppe weitestgehend für Recherchearbeiten genutzt.
Seite 8
Die erwartete Zielgruppe ist mit dem Thema der Alten Musik vertraut und kennt sich auch mit
deren Terminologie aus. Besonders interessant sollte das gebotene Informationsspektrum für
Musikwissenschaftler sein, die die Webseite für Arbeiten rund um ihren Fachbereich nutzen
werden. Somit können diese Personen als Experten bezeichnet werden, die gezielt an
Informationen interessiert sind und diese auch schnell und einfach erreichen wollen. Sie
werden den Einstieg zu den Informationen über die jeweiligen Themenbereiche suchen. Die
Suche erfolgt zielgerichtet.
Ein weiterer Personenkreis sind Studenten, die sich in weiten Formen mit der Musik
beschäftigen (z.B. Musikwissenschaft). Studenten weisen andere Internetgewohnheiten auf als
das zuvor beschriebene Publikum. Jüngere Menschen haben im Allgemeinen eine große
Internetaffinität und verbringen dadurch durchschnittlich viel Zeit im Internet (vgl.
[AGFO07]). Die Suche nach Informationen wird jedoch weniger spezifisch erfolgen als bei
der älteren Generation, deshalb muss ein eher unsystematisches Vorgehen bei der
Informationssuche mit einbezogen werden. Auch ist die Möglichkeit größer, dass der Einstieg
zu den Inhalten über externe Websites und Suchmaschinen erfolgt.
Einen kleinen Teil der zu erwartenden Anwender werden Personen darstellen, die sich nach
einem Besuch in Dresden weiterführend informieren möchten. Diesen Besuchern wird eine
ungezielte Suche unterstellt. Informationen über aktuelle Ereignisse in der Musikszene der
„Alten Musik“ werden über die Webseite des Auftraggebers geliefert.
2.3 Zielsetzung
Die Zielsetzung einer Webseite ist die Ideensammlung hinter dem Projekt. Zu Beginn müssen
die Ziele und die Gründe für die Erstellung der Webseite erarbeitet werden. Bei jedem
initialen Grund für den Aufbau und die Gestaltung gibt es zwei Gruppen, die bei der
Erfüllung Ihrer Wünsche berücksichtig werden müssen. Dies sind der Auftraggeber (Institut
zur Erforschung und Erschließung der Alten Musik in Dresden e.V.) und der Nutzer, der
später die Webseite benutzen muss. Während auf der Seite des Auftraggebers vor allem
Aspekte der Verbreitung und Veröffentlichung von Informationen sowie repräsentative
Punkte eine Rolle spielen, ist für den Benutzer besonders relevant, ob er seine Bedürfnisse
und Ziele auf der Seite einfach und schnell erfüllt sieht.
Seite 9
2.3.1 Ziele des Auftraggebers
Die Präambel der Vereinssatzung des Auftraggebers gibt erste Hinweise auf die Zielstellung
der Projektwebseite:
„Es gibt heute viele Bemühungen, … Kompositionen der Öffentlichkeit bekannt zu machen. In
diese Bemühungen will sich das „Institut zur Erforschung und Erschließung der Alten Musik
in Dresden e.V.“ einbringen ... [und] ... seiner Funktion als Forschungs-, Dokumentationsund Informationszentrum für Alte Musik in Dresden gerecht werden. ([IAM06])
Hieraus lässt sich als erstes Ziel ableiten, dass die Webseite die öffentliche Bekanntmachung
der Alten Musik Dresdens vorantreiben soll. Wie Recherchen im Internet unter bekannten
Sites wie www.wikipedia.org, www.brockhaus.de, www.klassik.com oder encarta.msn.com
ergaben, weist das Thema nur einen geringen Stellenwert auf und Informationen müssen
mühsam zusammengesucht werden. Aus diesem Grund, muss die Webseite die einzelnen
Themen der Alten Musik in Dresden zu einer Gesamtheit vereinen und innerhalb einer
Plattform präsentieren. Die Benutzer müssen zu den verschiedenen Themen eine breite
Informationstiefe
erhalten.
Somit
wird
der
Anspruch
eines
umfassenden
Informationszentrums erfüllt und die Benutzerbindung erhöht. Aus der Präambel geht weiter
hervor, dass die Webseite als Forschungs- und Dokumentationsplattform genutzt werden soll.
Um diese Ziele zu erreichen, ist die Kontrolle und die fortlaufende Aktualisierung des
Inhaltes eine wichtige Voraussetzung. Beiträge sollen von einer kompetenten Redaktion
erstellt werden, die Zugang zu aktuellen Forschungsergebnissen hat und diese auch
veröffentlichen. Das Herunterladen von Inhalten und ausführlichen Informationen zur
Offlinearbeit soll angeboten werden.
Die Verbindung zur Webseite des Auftraggebers ist erwünscht, um ebenfalls über aktuelle
Ereignisse informieren zu können und damit wiederum die Bekanntmachung zu fördern.
Seite 10
2.3.2 Ziele des Benutzers
Benutzer-Ziele sind die Gründe, aus denen ein Nutzer die Webseite besucht und die Ziele, die
er damit erreichen will. Benutzer haben einen bestimmten Grund, warum sie die Webseite
besuchen. Sobald sie ihre Ziele nicht schnell und einfach erfüllen können, besteht die Gefahr,
dass sie die Webseite verlassen und nicht wieder kommen.
Ein erstes Benutzer-Ziel ist, einen einleitenden Blick auf das Thema „Alte Musik in Dresden“
zu erhalten. Das Thema will kennen gelernt und bei Interesse weiterführend erforscht werden.
Ist der Besucher bereits mit der Thematik vertraut, sucht er gezielte Informationen aus
verschiedenen Bereichen. Es gibt eine zentrale Fragestellung, die mit Hilfe der Webseite
einfach und schnell beantwortet werden soll. Ein Großteil der Besucher wird zu dieser Gruppe
gehören, die die Webseite zum Arbeiten nutzen. Das Vertrauen über die Korrektheit der
Inhalte ist dabei unabdingbar. Auch möchte der Besucher umfangreich informiert werden,
sodass möglichst viele Inhalte innerhalb der Projektwebseite präsentiert werden und die
Informationen miteinander verknüpft sind.
2.3.3 Usability-Ziele
Um den Erfolg einer Webseite zu gewährleisten, ist es nicht nur notwendig die Ziele des
Users und des Auftraggebers zu berücksichtigen, sondern der Aspekt der Usability
(Benutzerfreundlichkeit) hat ebenfalls eine hohe Bedeutung. Eine gute Usability erlaubt es
den Besuchern, innerhalb kürzester Zeit erfolgreich mit der Webseite zu arbeiten. Die ISONorm 9241 liefert eine ausführliche und allgemein gültige Definition von Usability:
„Usability bezeichnet das Ausmaß, in dem ein Produkt durch bestimmte Benutzer in einem
bestimmten Nutzungskontext genutzt werden kann, um bestimmte Ziele effektiv, effizient und
mit Zufriedenheit zu erreichen“
Dabei hängen die Komponenten Effektivität, Effizienz und Zufriedenheit von dem
Nutzungskontext und den Zielen der Zielgruppe ab. Der Begriff Usability steht in enger
Beziehung mit der Accessibility (Zugänglichkeit, Barrierefreiheit). Barrierefreiheit im
Internet bedeutet, dass eine Webseite für jeden Benutzer mit jedem Browser und jeder
technischen Ausstattung im vollen Umfang zugänglich und nutzbar ist. Dabei wird der
Nutzen und Vorteil für den Besucher erhöht. Die Richtlinien für Barrierefreiheit werden in
der
Verordnung
zur
Schaffung
barrierefreier
Behindertengleichstellungsgesetz (BITV) festgelegt.
Informationstechnik
nach
dem
Seite 11
Um eine für den Benutzer optimale Nutzung der Projektwebseite zu gewährleisten, muss die
Sichtweise des Benutzers eingenommen werden. Als ersten Punkt betrifft das die
Systemleistungen die der Benutzer zur Verfügung hat. Die Projektwebseite soll in Bezug auf
Darstellungsfehler optimiert werden, da diese Fehler zu Unzufriedenheit und schlechter
Benutzbarkeit führen. Die Webseite muss auf den drei am häufigsten verwendeten InternetBrowsern funktionieren. Laut einer Studie sind das der Internet Explorer 6.0, 7.0 sowie der
Mozilla Firefox (vgl. [WBAR07]). Die Größe der Webseite wird an den Standard der
Bildschirmauflösung von 1024x768 Pixel angepasst. Unter Berücksichtigung der Zielgruppe
(vgl. 2.2 Zielgruppe) und um die Barrierefreiheit zu wahren, wird weitestgehend auf den
Einsatz von JavaScript verzichtet (vgl. [SiOp02], S.3).
Auf der Startseite müssen dem Besucher erste Informationen geboten werden, die ihm einen
Überblick über den Nutzen der Webseite vermitteln. Für Benutzer, die das erste Mal die
Webseite besuchen, werden durch aussagekräftige Erläuterungen die einzelnen Bereiche
präsentiert werden. Für erfahrene Besucher müssen Anreize in Form von Links zu einzelnen
Informationen geboten werden.
Die Navigation soll durch einen einfachen und konsistenten Aufbau die Benutzerführung
erleichtern und somit den Zugang zum Informationsangebot der Webseite sicherstellen. Des
Weiteren muss die Benennung der Navigationselemente deutlich und verständlich sein. Dabei
sind inhaltlich gleiche Objekte in Navigation und Informationsteil mit derselben Beschriftung
zu versehen, um die Zusammengehörigkeit zu verdeutlichen. Zusätzlich muss die Navigation
an jeder Stelle der Website eine gute Orientierung erlauben. Dadurch sind die
Navigationsprozesse für den Benutzer jederzeit nachvollziehbar. Für Benutzer, die gezielt
nach Informationen suchen, muss die Möglichkeit einer Suchabfrage über alle Informationen
angeboten werden. Als Navigationsalternative soll die Webseite über eine Sitemap verfügen.
Alle Inhalte müssen dem Benutzer zunächst einen Überblick erlauben und selbsterklärend
sein, bevor der Einstieg ins Detail erfolgt. Somit kann der Benutzer schnell entscheiden, ob
die angezeigten Inhalte seinen Wünschen entsprechen. Zusätzlich sollen dem Besucher
weiterführende Informationen aus einem Kontext heraus angeboten werden. Zur
Erleichterung der Informationsfindung, sollen Inhalte dort präsentiert werden, wo sie relevant
sind und vom Benutzer erwartet werden.
Seite 12
Für eine gute Usability wie auch die Barrierefreiheit (vgl. z.B. [RaCh06]), werden Standards
verwendet (vgl. z.B. [NiLo06]). Grundsätzlich wird für ein barrierefreies Webdesign auf den
Einsatz von Pop-Ups, Laufschrift und Flashanimationen verzichtet, da diese den Benutzer
zumeist vom eigentlichen Inhalt ablenken. Weitere Richtlinien zur barrierefreien Umsetzung
sind unter 5.1 Barrierefreiheit-Richtlinien aufgelistet.
2.4 Inhaltspektrum der Projektwebseite
Die Projektwebseite „Alte Musik in Dresden“ wird kurz beschrieben, die Dresdner Musik des
17. und 18. Jahrhunderts (1600 bis 1815) zum Inhalt haben. Der Oberbegriff Musik schließt
dabei Inhalte zur Geschichte, zu Musikerpersönlichkeiten, Institutionen und Ensembles,
Musikwerken, Quellentexten und Literatur ein. Das Inhaltsspektrum ist sehr weit gefasst und
bietet dadurch einen großen Informationsumfang.
Ein Geschichtsüberblick wird Usern, die mit dem Thema der alten Musik weniger vertraut
sind, einen umfassende Zusammenfassung der Thematik liefern und zu weiterer Recherche
motivieren. Der Text wird in einzelne Bereiche gegliedert und beinhaltet des Weiteren
Abbildungen und Tonbeispiele.
Ein anderer Teil wird über Musiker oder Musiktheoretiker informieren, die nachweisbar ihren
Hauptwirkungsort in Dresden hatten. Der Benutzer kann Informationen über die Biographie,
Werke, musikhistorischen Würdigungen, Diskographie, Ausgaben/ Editionen, Quellentexte
und weiterführende Literatur sammeln. Zu den Inhalten gehören des Weiteren Hörbeispiele
und Abbildungen. Auch wird es Möglichkeiten des Herunterladens von Dokumenten und
Musikstücken geben.
Die Kategorie der Musikwerke bietet Inhalte zu Werken Dresdner Musiker. Hier werden
Details zu den einzelnen Werken geboten. Mitgeteilt werden neben Komponist und Titel,
auch die Tonart, die Besetzung und das Kompositionsjahr. Handelt es sich um ein
Vokalmusikwerk, sind auch der Textdichter und die Gattungsbezeichnung relevant. Zu
ausgesuchten Werken werden Tonbeispiele und Notendrucke präsentiert.
Seite 13
Unter Institutionen und Ensembles finden die Benutzer Inhalte zu organisierten
musikkulturellen Zusammenschlüssen mit dem Ziel
musikalischer Betätigung und
Einrichtungen, die zum Zwecke von Musikaufführungen und -verbreitung geschaffen
wurden. Darunter fallen Opernhäuser, Theater, Orchester, Kammermusikensembles u.v.m.
Geboten wird eine Definition mit zeitlichen Angaben sowie eine knappe Historie mit
Hinweisen auf die jeweiligen musikkulturellen Institutionen. Diverse Abbildungen werden ein
Bild des Beschriebenen vermitteln.
Der Punkt Quellentexte zur Alten Musik in Dresden gibt Informationen über wortsprachliche
Primärquellen – Briefe, Besoldungsverzeichnisse, musiktheoretische Texte u.a. Für jeden
Quellentext
werden
Autor,
Titel,
Herausgeber,
Erscheinungsort,
Erscheinungsjahr,
Seitenangaben, Reihentitel, aufbewahrende Bibliothek/Archiv und die Signatur genannt.
Zusätzlich beschreibt ein Abstrakt den Inhalt und einzelne Titel können heruntergeladen
werden.
Analog zu den Quellentexten werden die Informationen zur Literatur präsentiert. In dieser
Kategorie sind alle wissenschaftlichen Texte zur Alten Musik in Dresden, die nach dem Jahr
1815 entstanden, vermerkt.
Neben diesen vielfältigen Inhalten informiert die Webseite über die Auftraggeber des
Projektes.
Seite 14
3 Informationsarchitektur
Der Besucher einer Webseite verspricht sich beim Aufrufen der Seiten die Erfüllung seiner
speziellen Anforderungen. Es ist davon auszugehen, dass der Großteil der Benutzer mit
bestimmten Aufgaben die Seiten aufruft und sich die Zufriedenheit gegenüber der Webseite
an der Erfüllung dieser Aufgaben messen lässt. Dabei will der Nutzer die Struktur der
Webseite schnell verstehen. Auch möchte er nicht durch eine mangelnde Navigation in der
Erreichung seiner Ziele eingeschränkt werden. Bei der Entwicklung einer Webseite muss die
Informationsaufbereitung gut geplant werden, um den Benutzern einen erfolgreichen Besuch
der Webseite zu ermöglichen. Inhalte müssen an den Stellen und Zeitpunkten präsentiert
werden, an denen sie der Besucher erwartet. Um die genannten Ziele zu erreichen, muss der
Dialog mit dem Benutzer geplant werden - dazu dient die Informationsarchitektur (vgl.
[RoMo98], S.3ff.).
Eine gute Informationsstruktur bietet den Benutzern den Zugang zu den gesuchten
Informationen. Ist der Aufbau jedoch schlecht geplant, werden wichtige Informationen nicht
gefunden und der Benutzer kann sein Ziel nicht erreichen, er wird die Webseite wieder
verlassen.
Die Planung der Informationsstruktur legt folgende Punkte fest:
-
die Organisation des Wissen
-
die Navigation
-
die Benennung der Navigation und der Seiten
-
die Findbarkeit der Informationen
Seite 15
3.1 Organisation von Inhalten
Der Mensch ist es gewohnt Informationen zu organisieren, um sie zu verstehen, erklären zu
können und mit ihnen zu arbeiten. Dabei wird ein
System von Klassifikationen als
grundlegendes Werkzeug benutzt. Eine Klassifikation ist eine planmäßige Sammlung von
abstrakten Klassen, die zur Abgrenzung und Ordnung verwendet werden (vgl. [KnLi07]).
Innerhalb der Informationsarchitektur ist es die Aufgabe Informationen zu systematisieren, so
dass Besucher die Antworten auf ihre Fragen finden.
3.1.1 Herausforderungen der Organisation
Das Internet verlangt heute mehr denn je die Organisation von Informationen. Ein Grund
dafür ist die große Anzahl von Websites, die frei zur Verfügung stehen und die noch größere
Zahl von Anwendern. Laut Jakob Nielsen (vgl. [NiLo06], S.9) gibt es mehr als eine Milliarde
Nutzer, demgegenüber stehen weniger als zehn Millionen Besucher jeder Seite. Somit wird
eine Webseite von 99 Prozent der Besucher nicht erreicht.
Eine Schwierigkeit, die möglichen Benutzer zu erreichen, kann sein, dass viele
Klassifikationssysteme auf der Basis der Sprache aufgebaut sind und die Sprache oftmals
mehrdeutig ist. Begriffe können bei verschiedenen Besuchern unterschiedliche Assoziationen
hervorrufen und dazu führen, dass die Information von einem Benutzer gefunden wird und
von einem anderen eben nicht. Die Klassifikation ist besonders schwierig, wenn abstrakte
Inhalte, Themen oder Funktionalitäten organisiert werden sollen.
Ein weiterer Grund für die Herausforderung der Informationsarchitektur ist die Heterogenität.
Eine Webseite ist in zweierlei Hinsicht heterogen. Auf der einen Seite bieten Websites
Zugang zu Informationen und deren Komponenten in unterschiedlicher Komplexität. Es
können beispielsweise Artikel präsentiert werden, die Links zu anderen Seiten enthalten oder
auf andere Websites verweisen. Auf der anderen Seite stellen Websites Dokumente
unterschiedlichen Formates bereit. Es existieren z.B. Websites mit aktuellen Nachrichten, eCommerce-Angeboten und Mediengallerien. Dabei werden die Inhalte einer Seite mit
unterschiedlichen Informationen gemischt. So enthalten die Seiten des Nachrichtenmagazins
Spiegel-Online (vgl. www.spiegel.de) reine Textinformationen, aufbereitet mit der
Präsentation von Bildern, Videos oder Werbeflächen. Jedes Format muss mit seinen
Eigenschaften unterschiedlich behandelt werden.
Die unterschiedlichen Sichtweisen auf ein System stellen eine weitere Herausforderung dar.
So sind die Beschriftungen und die Strukturen der Websites sehr stark von der Ansicht der
Seite 16
Seitenentwickler abhängig. Jedoch können Verständnis und Blickwinkel der Besucher auf den
Inhalt anders sein, so dass die vorgegebene Struktur nicht den Erwartungen entspricht und
mehr Verwirrung als Verständnis hervorruft.
3.2 Organisationsschemata und -strukturen
Die Informationsarchitekten Rosenfeld und Morville (vgl. [RoMo98], S.21ff.)
teilen ein
System von organisierten Informationen in zwei Dimensionen ein, bestehend
aus
Organisationsschemata und –strukturen. Ein Organisationsschema fasst zusammengehörige
Inhalte zu logischen Gruppen zusammen. Die Organisationsstrukturen definieren die
Beziehungen zwischen den Inhaltsteilen und Gruppen.
3.2.1 Organisationsschemata
Die Einordnung in ein Organisationsschema ist entweder exakt (eindeutig) oder mehrdeutig.
Exakte Schemata teilen die Informationen in definierte ausschließende Klassen. Zum Beispiel
ist ein (alphabetisches) Telefonbuch die einfachste Möglichkeit eines exakten Schemas. Man
kennt den Nachnamen und kann sofort die dazugehörige Telefonnummer ermitteln. Weitere
Formen sind chronologische und geographische Schemata. Beispiele sind ein NachrichtenBlog beim dem die aktuellste Nachricht am Beginn und die älteste am Ende steht oder ein
Branchenverzeichnis geordnet nach Postleitzahlen. Die Autoren Bowman und Willis (vgl.
[BoWi02]) nennen zusätzlich noch das numerische und kontinuierliche-Organisationsschema.
Das numerische Organisationsschema eignet sich besonders für die Indexierung. Es werden
dabei die Informationen über bestimmte Kennziffern gefunden. Als Beispiel kann die Anzeige
der Produkte einer e-Commerce-Webseite anhand der Preise genannte werden. Bei einem
kontinuierlichen Schema werden die Inhalte durch eine Bereichsspanne organisiert. Das sind
beispielsweise Preisbereiche. Die exakten Organisationsschemata sind besonders nützlich bei
der „know-item“ Suche (vgl. [LeReSm06]), wenn der Benutzer genau weiß, wonach er sucht.
Diese fünf Schemata gehören zum Alltag der Besucher und sind bereits gelernt.
Seite 17
Mehrdeutige Schemata gruppieren Informationen, die inhaltlich zusammengehören. Daher
erscheinen sie oftmals wichtiger und sinnvoller als einzeln stehende Informationen. Sie sind
dann besonders hilfreich, wenn der Benutzer sich nicht sicher ist, was er sucht bzw. nur
ungenaue Anhaltspunkte besitzt. Die vier wichtigsten Schemata sind themenorientiert
(Ordnung der Inhalte nach Themen, z.B. in einem Branchenbuch), aufgabenorientiert (der
Benutzer muss aktiv werden, um an die Informationen zu gelangen, z.B. bei einer
Suchanfrage), zielgruppenspezifisch (direkte Ansprache einer Zielgruppe, z.B. bei auf der
Webseite einer Bank, der Besucher ist entweder Privat- oder Geschäftskunde) oder metapherorientiert (eine Assoziation aus der Realität, z.B. Einkaufskorb beim Online-Shopping).
Der Vorteil von klaren Schemata ist, dass der Benutzer ein mentales Modell der Webseite
aufbauen kann. Aus diesem Grund versteht er den Aufbau der Seite schneller. Neben den
exakten und mehrdeutigen Organisationsschemata existieren noch hybride Modelle, die
verschiedene Schemata miteinander mischen und somit ein mentales Modell des Users
verhindern. Der Besucher wird gezwungen den Einträgen zu folgen und sich dann für die
richtige Auswahl zu entscheiden. Folgende Abbildung verdeutlicht die Zusammenhänge. Die
Navigation enthält ein benutzerorientiertes, aufgabenorientiertes und metapherbasiertes
Organisationsschema.
Abbildung 7: Hybrides Organisationsschema [RoMo98], S.30
Wenn ein hybrides Modell eingesetzt wird, ist es wichtig, dass jedes Schema getrennt von den
anderen dargestellt wird. Nur so kann der Benutzer ein mentales Modell aufbauen. Ziel ist es
dem Anwender einen großen Handlungsspielraum zu geben, so dass Informationen nach den
individuellen Präferenzen gefunden werden können.
Seite 18
Projektwebseite: Organisationsschema
Wie im Kapitel 2.4 Informationsspektrum skizziert, ist der Inhaltsumfang der Projektwebseite
sehr vielfältig und es muss eine sehr große Menge an Informationen organisiert werden. Es
wird ein hybrides Modell aus exakten und mehrdeutigen Schemata notwendig sein, um die
unterschiedlichen Varianten des Suchens und Erkundens zu unterstützen. Die Zielgruppe ist
es gewohnt, Informationen aus Enzyklopädien zu erhalten. Diese sind nach einem
alphabetischen und themenorientierten Schema aufgebaut. Als Beispiel ist die Enzyklopädie
„Die Musik in Geschichte und Gegenwart“ zu nennen, die für viele Anwender eine
Arbeitsgrundlage darstellt. Das Werk gliedert seine Bände in einen Personen- und einen
Sachteil, der Benutzer ist also mit einer themenorientierten Organisation vertraut. Um die
einzelnen Inhalte der Projektwebseite zu gruppieren, bietet sich eine themenorganisierte Basis
an, da die einzelnen Bereich von einander abgrenzbar sind und eine eindeutige Zuordnung
erlauben. Es lassen sich die Musikgeschichte, Persönlichkeiten, Werke, Institutionen und
Ensembles, Quellentexte und Literatur als Kategorien feststellen. Innerhalb der Kategorien
sollen die Inhalte thematisch und alphabetisch bzw. chronologisch organisiert sein. Das
exakte alphabetische und chronologische Schema erlaubt eine genaue Positionsfindung
innerhalb der Gruppe. Die Verteilung der einzelnen Organisationsschemata zeigt die folgende
Abbildung anhand der Kategorie Musikwerke. Das Schema lässt sich auf die anderen
Kategorien übertragen.
Abbildung 8: Projektwebseite: Beispiel für Organisationschemata (Großansicht Anhang F)
Seite 19
Zur Organisation von Informationen, die eine Benutzer-Aktivität voraussetzt, wird das
aufgabenorientierte Schema erforderlich. Auf der Projektwebseite lässt sich dieses auf die
Suche anwenden. Hierbei sucht der Besucher gezielt, durch die Eingabe von Begriffen, nach
Informationen und erhält als Rückgabe eine Ergebnisliste. Diese Liste muss primär nach
einem exakten Schema organisiert werden, um das gewünschte Ergebnis schnell identifizieren
zu können. Als exaktes Schema ist das numerische (nach der Relevanz), alphabetische oder
chronologische zu nutzen. Dem Besucher soll dabei die Handlungsfreiheit gegeben werden,
das Schema nach seinen Wünschen zu wählen. Auch die themenorientierte Gliederung wird
als sinnvoll betrachtet, dadurch können die Suchergebnisse nochmals unterteilt werden und
dem Besucher deutlicher präsentiert werden. Folgende
Abbildung verdeutlicht die
Zusammenhänge:
Abbildung 9: Projektwebseite: Organisationsschema der Suchfunktion
3.2.2 Organisationsstrukturen
Die Organisationsstruktur spielt eine wesentliche Rolle in der Gestaltung von Websites. Diese
Struktur bestimmt das Konzept der Navigation und prägt damit die Vorstellung des Users
über die Anordnung der Informationen.
Die einfachste Struktur ist die Linearstruktur. Hier werden Websites sequentiell verlinkt.
Eine Seite ist lediglich mit der vorhergehenden und nachfolgenden Seite verbunden. Diese
Struktur gibt dem Besucher vor, welchen Inhalt er wann sieht. Ein Beispiel für eine lineare
Struktur ist der Bestellprozess beim Online-Shopping.
Eine hierarchische Struktur (Baumstruktur) besitzt eine zentrale Startseite. Von dieser
gelangt der Besucher auf die verschiedenen Unterseiten, über die weitere Unterseiten erreicht
werden können. Diese Struktur erlaubt einen Überblick der Inhalte und im Weiteren das
Aufsuchen der Details. Eine Schwierigkeit kann die Balance zwischen Tiefe und Breite
Seite 20
innerhalb der Informationsarchitektur sein. Mit wachsender Tiefe steigt die Suchzeit und die
Navigation wird schwieriger. Bei einer zu flachen Anordnung muss der Benutzer aus vielen
Kategorien auswählen und fühlt sich von der Menge an Auswahlmöglichkeiten überfordert.
Ziel ist eine möglichst ausgewogene Struktur. Jacobsen empfiehlt maximal vier Ebenen mit
jeweils nicht mehr als sieben Wahlmöglichkeiten (vgl. [Jacobsen02]). Vorteil der
Hierarchiestruktur ist, dass sie der üblichen Denkstruktur entspricht.
Die Hypertextstruktur verknüpft Websites durch Links zu Netzwerken. Damit wird eine
sehr freie Struktur aufgebaut und eine Hierarchisierung ist nicht erforderlich. Problematisch
kann die Benutzerorientierung werden, wenn der Besucher durch die Querverlinkung vom
eigentlichen Pfad abkommt („lost in hyperspace“).
Ein weiteres Modell ist die datenbankorientierte Struktur. Die Webseite wird dynamisch
aus einer Datenbank zusammengestellt. Die Zusammenstellung der Informationen wird durch
das System übernommen oder der Benutzer generiert sich seinen eigenen Inhalt, z.B. durch
eine Suchanfrage auf der Webseite einer Suchmaschine (vgl. www.google.de).
In Zukunft werden durch die Gewichtung der dynamischen Strukturierung und Darstellung
von Daten die sog. Topic Maps an Bedeutung gewinnen. Sie ermöglichen es, Informationen
in Form von Topics (Themen, Personen…), Associations (Verknüpfungen zwischen Topics)
und Occurrences (Instanzen von Dokumenten zu Topics) zu strukturieren (vgl. [PaHu02]).
Projektwebseite: Organisationsstruktur
Um die benötigte Flexibilität und Wartungsfreundlichkeit zu gewährleisten, wird für die
Projektwebseite eine Hypertextstruktur in einer hierarchischen Umgebung mit der
Unterstützung einer Datenbank gebraucht. Dadurch können die Benutzer logischen
Verbindungen und Beziehungen folgen ohne sich in der Menge an Informationen zu verlieren.
Des Weiteren kann durch Datenbankanfragen gezielt nach Informationen gesucht werden.
Die hierarchische Struktur (siehe Anhang G) wird entlang der bereits genannten Kategorien
organisiert. Durch Querverlinkungen innerhalb der verschiedenen Bereiche bzw. Detailseiten,
wird eine Hypertextstruktur aufgebaut.
Seite 21
3.3 Navigation
Navigation ist im Wesentlichen die Kombination von individuellen Informationszugriff und
Orientierung (vgl. [BeGi02], S.102). Die Navigation wird dem Benutzer anhand der
Benutzerführung ermöglicht. Eine Benutzerführung hat die Aufgabe einen Überblick über das
System zu vermitteln und jederzeit darüber zu informieren, welche Navigationsmöglichkeiten
bestehen. Dadurch gelangt der Besucher schnell in die Situation der Selbstbestimmung. Die
Navigation muss an jeder Stelle der Webseite Antworten auf die vier W-Fragen geben (siehe
Abbildung 10).
Abbildung 10: Die vier Ws der Benutzerführung. Angelehnt an ([BeGi02], S.103)
Daraus lassen sich die drei Kernaktivitäten der Navigation ableiten. Zuerst wird eine
Vorstellung über die Umgebung gewonnen, Objekte werden identifiziert (Identifikation). Die
Eigenschaften der lokalen Umgebung werden herausgefunden und diese zu anderen
Umgebungen in Beziehung gesetzt (Exploration). Die dritte Aktivität besteht aus der
Wegfindung, Lokalisierung der eigenen Position und Zielposition, Bestimmung des Weges,
Verfolgung des Weges und der Kontrolle des Erreichten. Werden diese Aktivitäten durch den
Besucher in vorgegebener Reihenfolge ausgeführt, findet eine zielgerichtete Benutzerführung
statt. Des Weiteren wird durch die immerwährende Kenntnis über die aktuelle Position ein
Kontext aufgebaut.
3.3.1 Navigationstypen
Unter Navigationstypen versteht man die „Visualisierung“ von Organisationsstrukturen. Sie
bieten ein direktes Mittel zur Navigation. Es lassen sich unterschiedliche Typen definieren.
Die hierarchische Navigation bildet den am häufigsten verwendeten Typ im Internet und ist
entlang einer hierarchischen Organisationsstruktur aufgebaut. Sie bietet den Zugriff auf die
jeweils nächste Inhaltsebene bzw. auch auf mehrere Ebenen. Der Vorteil besteht darin, dass
deduktiv („vom Allgemeinen zum Besonderen“) verfahren wird.
Seite 22
Die globale Navigation beschreibt die Navigation, die global auf einer Webseite zu finden
ist. Das bedeutet, dass sich beispielsweise ein Menü immer an derselben Stelle befindet und
auf jeder Seite die gleiche Funktionalität liefert. Es kann sich entweder um ein Hauptmenü
handeln, welches nur die ersten Ebenen der Hierarchie widerspiegelt, oder um eine
Kombination aus Hauptmenü und einem kontextspezifischen Menü.
Die lokale Navigation bildet einen Zusatz zur globalen Navigation und wird verwendet,
wenn auf Unterseiten weitere Verweise gebraucht werden, die nicht in die Hierarchie der
Seite passen oder die Navigation erleichtern.
Als Ad Hoc Navigation bezeichnet man die Navigation über Hyperlinks direkt im Text. Es
werden Links zu anderen Inhalten der Webseite gesetzt oder Verweise auf externe Quellen.
Bei der Ad Hoc Navigation lassen sich keine Hierarchien erkennen, sie beruht auf freien
Assoziationen.
Bei der remote Navigation tritt der Effekt auf, dass sich der Besucher auf einer vom Inhalt
gelösten, separaten Seite befindet und über diese auf der Webseite navigiert. Das bekannteste
Beispiel ist die Sitemap.
Die datenbankzentrierte Navigation besteht aus der Suche in einer Datenbank zum
gezielten Ansteuern von Informationen. Vielfach bildet sie nur einen Teil einer ansonsten
hierarchischen Navigation, z.B. als Suchfunktion.
Projektwebseite: Navigationsstruktur
Die Navigation der Projektwebseite soll eine möglichst große Flexibilität aufweisen und dem
Benutzer dadurch weiten Handlungsraum lassen, um an die für ihn relevanten Informationen
zu gelangen. Durch den Einsatz einer globalen Navigation, gefolgt von einer lokalen
Navigation auf der Ebene einer Kategorie, kann hierarchisch auf die Detailebene gelangt
werden. Diese hierarchische Struktur wird durch eine datenbankzentrierte Navigation
erweitert. Zusätzlich werden die Detailseiten durch die Ad Hoc Navigation innerhalb einer
Detailseite in allen Kategorien erreichbar sein. Durch den Einsatz der verschiedenen
Navigationstypen spannt sich ein typisches Hypertextnetz auf, in dem jede Seite von überall
erreicht wird (vgl. Abbildung 11). Einzige Ausnahme bilden die Seiten der Metanavigation.
Auf dieser Ebene sind die Detailseiten nicht erreichbar. Der Grund dafür ist, dass der Inhalt
dieser Seiten vom restlichen Inhalt gelöst ist (weiterführende Information unter Punkt 3.5.1
Seitentypen).
Seite 23
Abbildung 11: Projektwebseite: Navigationsstruktur
3.4 Labeling-System
Die Notwendigkeit eines Labeling-Systems (Benennungssystem) tritt nicht nur im Internet
auf, sondern überall dort, wo auf engstem Raum mehr oder weniger komplexe Inhalte
dargestellt werden müssen. Ziel ist es, ein Objekt mit möglichst einfachen, aber
verständlichen Mitteln zu beschreiben. Daraus muss hervorgehen, um welches Objekt es sich
handelt, wie seine innere Struktur ist und wie man damit umgeht. Im Einzelnen soll die
Beschriftung von Navigationselementen (Links) im Vordergrund stehen.
Die Herausforderungen sind vielfältig:
Mehrdeutigkeit: Der Klick auf den Link führt nicht zum gewünschten Ziel, da hinter
dem Linknamen etwas anderes erwartet wird (kognitive Falle).
Spezifität: Die Kategorien einer Webseite lassen nicht genau erkennen, welche
Objekte dahinter stehen, weil die gewählte Benennung nicht eindeutig ist.
Fachsprache: Die Navigationsbenennung lässt sich nur von „Insidern“ verstehen.
Unverständlichkeit: Es muss einem Link gefolgt werden, um zu verstehen, wohin er
führt (trial-and-error-Prinzip).
Seite 24
Die meisten Schwierigkeiten lassen sich darauf zurückführen, dass die äußere Darstellung von
Inhalten (durch Text oder Abbild) nicht mit ihrer Bedeutung (Konzept, Begriff)
übereinstimmen. Rosenfeld und Morvill formulieren es wie folgt:
"... spoken language is essentially a labeling system for concepts and things. Perhaps we
constantly label, we take the act of labeling for granted. That's why the labeling on web sites
is often poor ..." ([RoMo98], S.76)
Deshalb ist es unverzichtbar, dass die Benennung von Objekten die gleiche Sprache benutzt,
die der Benutzer verwendet und die gleichzeitig den Inhalt der Webseite widerspiegelt.
Weitere Forderungen an ein Labeling-System sind laut Rosenfeld und Morvill folgende:
-
Zu einem geschlossenen System von Labels gehören die Konsistenz in Stil,
Repräsentation, Syntax und Granularität.
-
Der Kontext einer Seite kann der Bestimmung eines mehrdeutigen Labels dienen. Es
muss jedoch überprüft werden, ob sich ein Label auch im wechselnden Kontext
erschließt.
-
Das Label soll das repräsentieren, was der Autor damit meint und auch so vom
Benutzer verstanden werden. Eine evtl. Mehrdeutigkeit ist zu überprüfen.
Das Kapitel des Labeling-System soll für die Projektwebseite als Richtlinie für die
Benennung der unterschiedlichen Elemente verstanden werden. Es werden keine Definitionen
für die Beschriftungen gemacht, sondern die Erläuterungen werden direkt an den jeweiligen
Beispielen der Webseite umgesetzt.
3.4.1 Typen von Labeling-Systemen
Beschriftungen können auf Websites in zweierlei Form auftreten. Zum einen als Text oder
zum anderen als Icon. Diese Formate werden entweder als Hyperlinks benutzt oder als
Überschriften, um den Inhalt einer Seite zu identifizieren und zu gliedern.
Die Autoren Rosenfeld und Morvill beschreiben in ihrem Buch (vgl. [RoMo98], S.63ff.) fünf
Arten von Labels: Labels innerhalb Navigationssystemen, Indextermini, Link Labels,
Überschriften und Ikonogramme.
Labels innerhalb eines Navigationssystems haben die größte Bedeutung unter den
Labeling-Systemen. Es muss gewährleistet sein, dass die Navigationselemente leicht
verstanden werden. Während des Navigierens ignorieren Besucher oftmals die Inhalte und
erfassen die Bedeutung der Seite über die Benennung der Links. Es ist wichtig, dass die
Seite 25
Linkbezeichnungen so kurz und eindeutig wie möglich sind, um die Informationsaufnahme
optimal zu unterstützen.
Indextermini sind Stich- oder Schlagwörter die einen bestimmten Inhalt aussagekräftig
beschreiben. Eine Anwendungsbedeutung bekommen Indextermini bei der Speicherung von
Dokumenten in einer Datenbank. Hierbei kommt es darauf an, dass die Inhalte der
Dokumente bei einer späteren Informationsrecherche wieder aufgefunden werden. Durch die
Beschreibung mit einem Indexterm, können die Inhalte bestimmt werden (vgl. [Luckh02]).
Labels können auch als Link Labels innerhalb von Texten auftauchen. Sie stellen eine
Beziehung zwischen verschiedenen Informationen her. Im Gegensatz zu Labels innerhalb von
Navigationssystemen, werden sie durch den umgebenen Text in einen Kontext eingeordnet.
Wichtig ist, dass das Ziel auch erwartungskonform ist. Es ist darauf zu achten, dass eine
Konsistenz zu den Zielen herrscht. Beispielsweise soll ein verlinkter Personenname innerhalb
eines Textes immer zu der Biographie führen. Die semantische Konsistenz zwischen den Link
Labels spielt nur eine untergeordnete Rolle, da die Links durch den Text zusammengehören.
Fehlt jedoch ein umgebener Text, muss das Label wie ein Label innerhalb des
Navigationssystems behandelt werden.
Überschriften werden als Labels gebraucht, um über den Inhalt der Seite zu informieren. Der
Geltungsbereich geht bis zur nächsten Überschrift, dadurch wird der Inhalt einer Seite
getrennt und thematisch zugeordnet.
Ikonogramme sind Zeichen, die durch ihre Ähnlichkeit mit einem Gegenstand verbunden
sind. Sie sind ein wichtiger Bestandteil von Benutzeroberflächen, vgl. z.B. den Desktop. Die
Informationsaufnahme geschieht schneller, da das Lesen eines Textes mehr Zeit und
kognitive Aktivität braucht, als die Betrachtung eines Symbols. Wurde ein Ikonogramm
erkannt, lässt es sich schneller in Erinnerung rufen. Es ist jedoch von Nachteil, wenn ein
Ikonogramm nicht erkannt wird denn dann kann es auch nicht verstanden worden sein. Eine
weitere Schwierigkeit stellt die Mehrdeutigkeit dar, denn genau wie bei Wörtern kann es
ohne Kontextbezug zu Missverständnissen kommen. Daher empfehlen Rosenfeld und Morvill
Ikonogramme in Verbindung mit Textlabels.
Seite 26
3.5 Wireframes
Der Begriff „wireframe“ kommt ursprünglich aus der 3D Modellierung und bezeichnet den
Entwurf eines skelettartigen Modells, um Figur und Gestalt herauszuarbeiten. Ganz ähnlich
geschieht es beim Entwurf einer Webseite. Hier wird der grundsätzliche Aufbau einer Seite
gezeigt.
Ein
Wireframe
ist
ein
Entwurf
der
Informationen,
Navigation
und
Interaktionsmöglichkeiten, welche auf jedem Seitentyp erscheinen. Es ist nicht das Ziel ein
Design zu präsentieren, vielmehr steht das Konzept des Inhaltes im Vordergrund.
Der Autor John Cato beschreibt in seinem Buch (vgl. [Cato01]) ein Modell, wie der Benutzer
mit seiner Umwelt interagiert. Nach dem AUA Modell – awareness, understanding, action schafft sich der Benutzer ein Bewusstsein über seine Umgebung und fängt dann an, diese zu
verstehen. Handlungen werden durch die angebotenen Möglichkeiten ausgeführt. Das Modell
bildet eine Grundlage zur Gestaltung von Wireframes, da auf jeder Seite bestimmt werden
muss, welche Inhalte ein Seitentyp besitzt und welche Handlungsmöglichkeiten gegeben sind.
Jeder Wireframe muss Antworten auf folgende Fragen geben (vgl. [BoWi02]):
„What do your visitors want to know here? What do our visitors want to be able do at this
point? What should our visitors feel at this point in the process? Where might our visitors
want to go next? How could we make it easy for them to do that? What feedback should be
provided after they’ve done it?”
3.5.1 Seitentypen
Um nicht für jede Seite des Gesamtprojektes einen eigenen Wireframe gestalten zu müssen,
können einzelne gleichartige Seitentypen festgestellt werden. Diese Seitentypen haben den
gleichen Aufbau, aber unterscheiden sich hinsichtlich ihrer Inhalte. Für die Projektwebseite
zeigt die folgende Abbildung die Seitentypen:
Abbildung 12: Projektwebseite: Seitentypen
Seite 27
Insgesamt lassen sich fünf verschiedene Seitentypen identifizieren:
-
Startseite
-
Kategorieseite
-
Suchergebnisseite
-
Detailseite
-
Seiten der Metanavigation
Um die Darstellung auf weitestgehend allen Systemen zu gewährleisten, wird die Webseite
für die Auflösung des Formates 1024x768 Pixel optimiert (vgl. Usability-Ziele). Im
Folgenden werden die einzelnen Bereiche an genannten Seitentypen beschrieben.
Elemente, die auf allen Seiten konsistent gehalten werden, sind der Kopf- und Fußbereich.
Auf der linken Seite des Kopfbereichs wird das Logo der Webseite platziert. Das Logo
orientiert sich an dem Logo des Auftraggebers und soll somit eine assoziierende Verbindung
unterstützen. Das Logo ist als Link auf die Startseite zu setzen. Im rechten oberen Teil ist die
Metanavigation integriert, die Zugriff auf sekundäre Informationen bietet. Hier werden Links
zur Startseite, „Über uns“-Seite, Kontaktseite, Sitemap und Impressum integriert. Ebenfalls
befindet sich die Hauptnavigation im Kopfteil. Die Navigation gliedert sich, wie bereits unter
3.2.1 Organisationsschema beschrieben, in die Bereiche Musikgeschichte, Persönlichkeiten,
Werke, Institutionen und Ensembles, Quellentexte und Literatur. Für eine evtl. Erweiterung
des Themenangebotes steht ausreichend Platz zur Verfügung, um beispielsweise weitere
Menüpunkte zu ergänzen. Unterhalb der Hauptnavigation befindet sich die sog. Breadcrumb,
die ein Teil der lokalen Navigation ist und jederzeit die Position innerhalb der Webseite
mitteilt. Sie erfüllt wichtige Aufgaben bei der Orientierung (vgl. [Krug06], S.76f.). Die
Fußzeile enthält die gleiche Metanavigation wie die Kopfzeile und zusätzlich den CopyrightHinweis der Webseite.
Der generelle Aufbau des Inhaltsbereiches gliedert sich in zwei Spalten. Die Linke beinhaltet
die Suchfunktion mit der Möglichkeit einer erweiterten Suche, die lokale Navigation sowie
Kontextinformationen. Die rechte Spalte hält den Inhalt sowie verschiedene Navigation und
Informationen bereit. So wird im oberen Teil eine Zusatznavigation integriert, die z.B. die
Vergrößerung der Schrift erlaubt oder eine "Zurück"-Navigation auf die Kategorieseiten.
Seite 28
Startseite
Die Startseite ist nach Jakob Nielsen die wichtigste Seite der gesamten Webseite (vgl.
[NiLo06], S.25), aber trotzdem verbringt ein durchschnittlicher Besucher lediglich 35
Sekunden auf dieser Seite.
Aus diesem Grund müssen ihm in kürzester Zeit die vier
folgenden Punkte vermittelt werden:
-
Worum geht es hier?
-
Was kann er hier machen?
-
Warum soll er hier sein und nicht irgendwo anders?
-
Was wird angeboten und wie kommt er dort hin?
Unter Berücksichtigung dieser vier Punkte baut sich die Startseite der Projektwebseite wie
folgt auf:
Abbildung 13: Projektwebseite: Wireframe Startseite
Seite 29
Jakob Nielsen empfiehlt den Inhaltsbereich mit einer kurzen Inhaltsangabe in Form einer
Überschrift zu beginnen (vgl. [Nielsen02]). Darunter folgt ein Text, der den Inhalt und
Möglichkeiten der Webseite unterstreicht. Der folgende Bereich bietet einen Direkteinstieg zu
den Inhalten. Dieser Bereich ist besonders für Benutzer sinnvoll, die die Webseite bereits
kennen und mit ihr gearbeitet haben. Es wird der Zugriff auf charakteristische Themen
erlaubt. Die Inhalte sind durch die Autoren anpassbar. In einer Anordnung, die mehrere
Themenboxen nebeneinander erlaubt, wird beispielsweise der Zugriff auf einen Artikel des
Tages, eine Literatur, neu aufgenommene Artikel oder häufig gewählte Artikel erlaubt.
Weitere Themen sind in einer zweiten Zeile möglich. Die Größe und somit die Anzahl der
Boxen ist flexibel anpassbar. Im Weiteren folgt ein Bereich, der über die Themenbereiche der
Webseite informiert. Das ist für neue Besucher wichtig, um einen Einblick in das
Informationsangebot zu bekommen. Dargestellt werden immer drei Themen nebeneinander,
jeweils mit einem kurzen Text und einem Verweis zu diesem Thema. In der linken Spalte
stehen unterhalb der Suche Informationen zum Initiator der Webseite. Ebenfalls wird noch
Platz geboten, um evtl. spätere Sponsoren deutlich zu präsentieren.
Suchergebnisseite
Die Seite der Suchergebnisse erreicht der Benutzer, nachdem er eine Suchanfrage gestartet
hat. Die Seitenüberschrift zeigt dem Besucher den Seitentyp, gefolgt von seiner Suchanfrage.
Die
Suchfunktion
wird
über
die
gewählten
Themenbereiche
durchgeführt.
Als
Standardeinstellung sind alle Kategorien ausgewählt. Des Weiteren kann die Anfrage durch
Angaben in der erweiterten Suche präzisiert werden. Die erweiterte Suche ist in der Suchbox
integriert. Nach einer erfolgreichen Anfrage wird dem Besucher eine lokale Reiternavigation
gezeigt. Die Reiternavigation ist ähnlich aufgebaut wie das Hauptmenü. Mit deren Hilfe kann
er sich durch die Ergebnisse der einzelnen Kategorien klicken. Zu Beginn des Seitenaufrufes
erscheint nur ein Reiter, der den Zugang zu allen Suchergebnissen liefert. Die Ergebnisse
können den einzelnen Kategorien zugeordnet werden, in dem ein neuer Reiter geöffnet wird.
Laut Christian Strang (vgl. [Strang06]) ist es nicht zu empfehlen dem Benutzer eine große
Wahl über den zu durchsuchenden Bereich zu geben. Besser ist es, ihm werden gleich die
passenden Ergebnisse angeboten. Möchte der Benutzer allerdings doch nur Ergebnisse aus
einer Kategorie sehen, hat er so die Möglichkeit, eigenständig darüber zu entscheiden. Zur
Beschriftung der Reiter ist die Benennung der Hauptnavigation zu wählen. Dem
Kategorienamen ist die Anzahl der Suchergebnisse voranzustellen. Unterhalb der Reiter
folgen verschiedene Navigationsmöglichkeiten, um die Darstellung der jeweiligen Ergebnisse
Seite 30
an die Wünsche des Besuchers anzupassen. Er kann entscheiden, wie viele Ergebnisse
innerhalb der linearen Ergebnisliste auf einer Seite angezeigt werden. Des Weiteren kann die
Ordnung der Ergebnisse verändert werden (vgl. 3.2.2 Projekt: Organisationsschemata). Die
Navigation zwischen den Seiten der Ergebnisliste erfolgt über eine lokale Navigation, die dem
Benutzer die Gesamtzahl der Seiten und die aktuelle Position anzeigt sowie die Möglichkeit
bietet, zu einer bestimmten Seite zu springen. Für die Darstellung der Ergebnisse selbst
schlägt Jakob Nielsen (vgl. [NiLo06], S. 149ff.) vor, dass jedes Ergebnis mit einer
anklickbaren Überschrift beginnen soll. Daraufhin folgt eine kurze Zusammenfassung.
Dementsprechend baut sich auch ein Suchergebnis auf der Projektwebseite auf. Nach der
Zusammenfassung folgt noch der Hinweis in welche Kategorie das Ergebnis einzuordnen ist
und die Funktion sich alle Ergebnisse dieses Bereichs in einem neuen Reiter anzeigen zu
lassen. Unterhalb der Ergebnisliste kann nochmals zwischen den Ergebnisseiten navigiert
werden. Sollte der Fall eintreten, dass eine Suchanfrage erfolglos blieb, wird das mitgeteilt
und eine Liste alternativer Suchbegriffe gezeigt.
Die linke Spalte der Seite präsentiert alternative Suchanfragen Das ist nach Jakob Nielsen
(vgl. [NiLo06], S.157) sinnvoll, da in vielen Fällen Rechtschreibfehler gemacht werden.
Ebenfalls werden häufig gestellte Suchanfragen aufgelistet.
Abbildung 14: Projektwebseite: Wireframe Suchergebnisseite
Seite 31
Kategorieseite
Die Kategorieseite bietet neben der Suchergebnisseite den Haupteinstiegspunkt für die
detaillierte Informationsanzeige. Die Seite beginnt wiederum mit der Seitenüberschrift, die
kennzeichnet, in welcher Kategorie sich der Benutzer befindet. Die Inhalte der Kategorien
sind hierarchisch angeordnet, die Auswahlpunkte werden in einer Listenansicht präsentiert.
Ein Kategoriepunkt enthält weitere Auswahlpunkte, die eine genaue Informationsauswahl
erlauben. Die Aufteilung der einzelnen Punkte ist den Abbildung im Anhang Seite XVII zu
entnehmen. Unterhalb jedes Punktes werden die Bereiche aufgelistet. So enthält z.B. der
Kategoriepunkt "Bühnenwerke" der Kategorie "Werke" die Bereiche "Ballettmusik",
"Intermezzi", "Serenaten", "Singspiele", "Opern" und "Sonstige Bühnenwerke". Um die große
Anzahl von Inhalten zu gliedern, wird bei der Auswahl eines Bereiches auf eine zweite Ebene
der Kategorieseite verlinkt. Diese Ebene bietet die speziellen Inhalte zur Auswahl der
gesuchten Informationen. Die Inhalte sind nach dem definierten Organisationsschema
geordnet. Es wird im oberen Teil die Möglichkeit geboten, die Ordnung der Inhalte zu ändern.
Nachfolgend werden die speziellen Inhalte ebenfalls in Listenansicht dargestellt. Bei Auswahl
eines Inhaltes gelangt der Benutzer direkt zur jeweiligen Detailseite.
Die linke Spalte der Kategorieseite zeigt weiterführende Links an. Das können z.B. häufig
gewählte Links innerhalb eines Kategoriepunktes sein.
Abbildung 15: Projektwebseite: Wireframe Kategorieseite
Seite 32
Detailseite
Eine Detailseite soll alle Inhalte bereithalten, die zu einem Thema vorhanden sind. Dabei sind
für alle Kategorien die Informationen gleich aufbereitet. Wie in den Usability-Zielen
detailliert beschrieben (vgl. 2.2.3 Usability-Ziele), sollen zu Beginn eines Artikels
verschiedene Kontextinformationen präsentiert werden. Um zu entscheiden, ob der Inhalt die
gewünschten Informationen bereithält bzw. um gezielt zu diesen Informationen zu gelangen,
sieht der Besucher eine Inhaltsübersicht mit alle Bereichen des Artikels. Daneben stehen der
Vollständigkeitsgrad sowie das Datum der letzten Aktualisierung. Um das Vertrauen der
Besucher in die Qualität des Beitrages zu steigern, besteht die Möglichkeit in direkten
Kontakt zum Autor zu treten. So können Anmerkungen sofort kommuniziert werden. Nach
diesem Bereich folgt der eigentliche Inhalt, der nach Themenbereichen gegliedert ist. Ein
Bereich beginnt mit einer eindeutigen Überschrift und ist nachfolgend in zwei Spalten geteilt.
Die linke Spalte zeigt den Inhalt an. Innerhalb des Textes können Links (Ad Hoc Navigation)
in andere Bereiche der Webseite verweisen. Auch ist es möglich Bilder in den Text zu
integrieren. Die rechte Spalte enthält Zusatzinformationen zu diesem Themenbereich. So
werden hier verschiedene Inhalte zum Herunterladen angeboten oder das Abspielen von
Hörbeispielen wird ermöglicht. Durch die Anordnung innerhalb eines Bereiches, werden
Informationen immer an der relevanten Position präsentiert.
Die linke Spalte der Detailseite enthält weiterführende Informationen zum Artikel. So können
beispielsweise Artikel verlinkt werden, die mit dem gezeigten Artikel in Verbindung stehen.
Dadurch werden dem Besucher umfangreiche Informationen angeboten und er kann sich
selbstständig seinen Weg durch die Inhalte wählen.
Abbildung 16: Projektwebseite: Wireframe Detailseite
Seite 33
Seite 34
Seiten der Metanavigation
Die Seiten der Metanavigation stellen vom restlichen Inhalt losgelöste Informationen bereit.
Aus diesem Grund enthält die linke Spalte des Inhaltsbereiches lediglich die Suchfunktion, da
keine weiterführenden Links aus dem Kontext generiert werden können.
Die rechte Spalte zeigt den Inhalt der Seiten an. Dieser Inhalt wird sich, abhängig von der
Seite, durch Formulare, Listen oder Textabschnitte präsentieren.
Abbildung 17: Projektwebseite: Wireframe Seite der Metanavigation
Oberflächengestaltung
Seite 35
4 Oberflächengestaltung
Der Abschnitt der Oberflächengestaltung beschäftigt sich mit den Erläuterungen zum Design
der Projektwebseite. Dabei wird auf den Aufbau des Layouts, die Farbwahl, die Gestaltung
von Bildern, Typografie, Navigation, Symbole/ Icons, Links und den verschiedenen
Komponenten eingegangen. Als Grundlage des Layouts werden die im vorangegangenen
Kapitel angefertigten Wireframes benutzt. Die Oberflächengestaltung ist wiederum die Basis
für die Implementierungen im nachfolgenden Kapitel.
4.1 Layout
4.1.1 Layout vertikal
In diesem Abschnitt wird das Layout der Projektwebseite in ihrem vertikalen Aufbau
beschrieben. Dabei ist der Grundaufbau bei allen Seitentypen (vgl. 3.5.1 Seitentypen) gleich.
Folgende Abbildung soll als Beschreibungsgrundlage dienen:
Abbildung 18: Projektwebseite: Design Startseite
Seite 36
Der Kopfbereich (1) mit Metanavigation, Logo, Hauptnavigation und Breadcrumb hat eine
Höhe von 185px. Zwischen Kopfbereich und Inhaltsbereich besteht ein Abstand (2) von 20px.
Der Inhaltsbereich (3) ist in seiner Höhe flexibel und passt sich dem dargestellten Inhalt an.
Der Fußbereich (4) beinhaltet den urheberrechtlichen Hinweis sowie die Metanavigation und
hat bei normaler Schriftgröße eine Höhe von 60px.
Die Minimalbreite der Projektwebseite beträgt 955px (5). Damit ist die Seite bei einer
Auflösung von 1024x768px (vgl. 2.3.3 Usability-Ziele) ohne horizontales Scrollen komplett
sichtbar. Bei höheren Bildschirmauflösungen bleibt das horizontale Layout gleich und die
Webseite wird zentriert dargestellt.
4.1.2 Layout horizontal
Das horizontale Layout unterscheidet grundsätzlich zwei Spalten. Die Navigationsspalte (1)
hat eine Breite von 200px und einen 20px großen Abstand (2) nach rechts. Die rechte Spalte
ist 735px breit und enthält den Inhalt. Dabei ist der Bereich durch ein Raster aufgeteilt, dass
aus insgesamt acht Spalten zu je 83px und sieben Streben á 10px besteht. Beim Aufbau des
Bereiches muss zwischen den verschiedenen Seitentypen unterschieden werden. Auf der
Startseite, der Kategorieseite, der Suchergebnisseite und den Seiten der Metanavigation wird
die gesamte Breite durch den textlichen Inhalt eingenommen, ohne dass eine weitere
horizontale Einteilung vorgenommen wird. Um eine gute Lesbarkeit der Texte zu
gewährleisten (siehe 4.4 Typografie), werden die Textfelder auf eine Weite von 545px
beschränkt.
Seite 37
Abbildung 19: Projektwebseite: Design Suchergebnisseite
Im Gegensatz dazu wird auf den Detailseiten der Bereich inhaltlich geteilt. Dabei nimmt der
eigentliche Inhalt eine Breite von 545px ein (4), gefolgt von einem 10px Abstand (5) und
einer Spalte für die weiterführende Navigation (6) mit 175px Breite. Bei der Gestaltung der
verschiedenen Seiten ist auf das Raster zu achten.
Abbildung 20: Projektwebseite: Design Detailseite
Seite 38
Seite 39
4.2 Farben
Kein anderes visuelles Element hat mehr Einfluss auf den Betrachter als die Farbe. Die Farbe
bekommt Aufmerksamkeit, setzt Stimmungen und vermittelt Botschaften. Aus diesem Grund
sollen Farben gezielt und bewusst eingesetzt werden, um die Funktionsweise einer Webseite
und ihrer Elemente zu unterstreichen. Es wird empfohlen, die Anzahl der verwendeten Farben
auf der Webseite zu begrenzen (vgl. [SeHo05], S.249). Eine durchschnittliche Anzahl sind
drei bis sieben Grundfarben, die zu einem Farbschema zusammengefasst werden.
Für die Projektwebseite wird als Hauptfarbe eine Farbe mit einem hohen Rotanteil gewählt.
Wie auch auf der Webseite von www.klassik.com vermittelt diese Farbe eine Assoziation mit
der klassischen Musik. Dabei ist Rot die Farbe der Kraft und der Vitalität, Rot strahlt Energie
aus, genauso wie die klassische Musik.
Um die einzelnen Kategorien auch visuell differenzieren zu können, werden unterschiedliche
Farbkodierungen in der Hauptnavigation und Breadcrumb verwendet. Somit kann man die
Kategorien anhand der Farben einfach unterscheiden und auswählen. Die Farbewahl orientiert
sich dabei am Farbkreis und der Farbbedeutung. Es müssen Farben für sechs Kategorien
ausgewählt werden, wobei sich diese wiederum gruppieren lassen. So unterscheidet sich das
Thema Musikgeschichte durch das Inhaltspektrum von den anderen. Auch können die
Persönlichkeiten, Werke, Institutionen und Ensembles zusammengefasst werden, da alle drei
Bereiche „lebendigen Inhalt“ besitzen. Im Gegensatz dazu werden in den Kategorien
Quellentexte und Literatur Schriftstücke dokumentiert, das bedeutet der Inhalt ist „sachlich“.
Um die Anmutung der Webseite weicher und nachhaltiger zu gestalten, werden die jeweiligen
Farben im Kopfbereich mit einem Farbverlauf benutzt. Damit die Farbverläufe gut
harmonieren, werden sie mit ähnlichen Farbtönen kombiniert.
Hauptfarbe verwendet im
Kopfbereich und als Linkfarbe.
Gelb für die Institutionen und
Ensembles.
Grau als neutrale Farbe für die
Musikkategorie und im
Inhaltsbereich
Hellblau für die Quellentexte.
Orange die Persönlichkeiten.
Blau für die Literatur.
Helles Orange für die Werke.
Tabelle: Verwendete Farben
Seite 40
Die verwendeten Farben teilen sich in warme und kalte Farbtöne (vgl. Abbildung 21). Dabei
vermitteln die warmen Farben eine lebendige und dynamische Botschaft. Im Gegensatz dazu
wird durch die kalten Farben Ruhe und Seriosität ausgestrahlt (vgl. [Vetter06], S. 38ff.).
Abbildung 21: Farbkreis mit warmen und kalten Farben
Die Hintergrundfarbe des Inhaltsbereiches ist weiß (#ffffff).
4.3 Navigation
4.3.1 Hauptnavigation und Breadcrumb
Die Hauptnavigation wird in Form von Karteikartenreiter präsentiert. Wie Steve Krug in
seinem Buch beschreibt (vgl. [Krug06], S. 79ff.) sind Reiter einer der wenigen Fälle, bei
denen die Assoziation mit dem täglichen Leben in einer Benutzerschnittstelle funktioniert. Sie
unterteilen den Inhalt in Sektionen, vergleichbar mit den Reitern in einem Ordner. Für den
Benutzer ist es leicht und intuitiv eine Sektion zu öffnen, indem er einfach auf einen Reiter
klickt. Im realen Leben würde der Nutzer nach dem Reiter greifen und die Sektion öffnen. Die
Reiter sind visuell besonders auffällig und sind sofort als Navigation erkennbar. Sie sind in
die sechs verschiedenen Kategorien, Musikgeschichte, Persönlichkeiten, Werke, Institutionen
und Ensembles, Quellentexte und Literatur unterteilt und bieten den direkten Zugang zur
Auswahl aus diesem Themenbereich. Die Reiterbeschriftung ist aus Gründen der
Barrierefreiheit in Textform angelegt. Die Farbe des Textes ist schwarz (#000000) und die
Textgröße beträgt 13px. Im Normalzustand ist die Beschriftung normal, im Mousoverzustand
unterstrichen und im ausgewählten Zustand fett, nicht unterstrichen.
Kategorien sind farblich kodiert (siehe 4.2 Farben).
Abbildung 22: Projektwebseite: Design Hauptnavigation und Breadcrumb
Die einzelnen
Seite 41
Um den gesamten visuellen Effekt der Reiter zu erzielen, müssen sie die Illusion vermitteln,
dass der ausgewählte Reiter vor den anderen steht. Das nennt Steve Krug (vgl. [Krug06], S.
82) als Hauptgrund, weshalb die Reiter so gut funktionieren. Um die Illusion zu schaffen,
muss der aktive Reiter mit dem Bereich unter ihm verbunden werden. Dadurch kann der
Reiter in den Vordergrund treten. Auf der Projektwebseite verbindet sich der aktive Reiter mit
der Breadcrumb, die die Farbe des Reiters annimmt und somit eine geschlossene Einheit
bildet. Hauptnavigation und Breadcrumb haben zusammen eine Höhe von 60px. Die
Breadcrumb stellt lediglich einen Zusatz zur Navigation dar und soll den Besucher jederzeit
über die aktuelle Position auf der Webseite aufklären können. Sie erlaubt den Schritt eine
Ebene zurück oder wieder auf die Startseite zu gehen. Um hinter der Hauptnavigation
zurückzutreten ist die Schriftgröße auf 11px festgelegt. Der letzte Punkt in der Liste ist fett
ausgezeichnet, um diesen hervorzuheben. Die einzelnen Einträge sind durch ein „>“ getrennt.
Abbildung 23: Projektwebseite: Design Hauptnavigation und Breadcrumb mit Mouseover-Zustand
4.3.2 Metanavigation
Die Metanavigation unterscheidet sich durch ihre Losgelöstheit vom Inhalt, von den
restlichen Verweisen. Sie soll bewusst in den Hintergrund treten. Die Links sind schwarz
(#000000) und normal ausgezeichnet, beim Mouseover-Zustand werden die Verweise
unterstrichen. Die Metanavigation hat bei einer normalen Schriftgröße von 11px eine Höhe
von 20px. Die einzelnen Einträge in der Liste sind durch ein „|“ voneinander getrennt.
Abbildung 24: Metanavigation
4.3.3 Weiterführende Navigation
In der weiterführenden Navigation werden zusätzliche Informationen präsentiert. Dazu zählen
weiterführende Links, externe Websites, Mailadressen oder Dateien zum Herunterladen.
Diese Navigation kann in der linken Spalte der Webseite erscheinen oder auf der Detailseite
in der rechten Spalte des Inhaltsbereiches. Dabei werden die Links in Boxen geordnet, die
sich der jeweiligen Spaltenbreite anpassen. Eine Box hat einen Kopfbereich mit einer
zuordnenden Überschrift, gefolgt vom Inhalt. Die Verweise sind wie alle Links rot und mit
dem entsprechenden Symbol ausgezeichnet. Die Boxen sind in ihrer vertikalen Ausdehnung
Seite 42
flexibel und passen sich somit dem Inhalt an. Der Innenabstand der Box beträgt 10px zu allen
Seiten und der Abstand nach unten 20px.
Abbildung 25: Box "Weiterführende Links"
Abbildung 26: Box "Werke herunterladen"
4.3.4 Contentnavigation
Die Contentnavigation auf den Detailseiten dient dem vertikalen Springen zwischen den
einzelnen Inhaltsbereichen. Die Verweise funktionieren durch sog. Ankerpunkte die im Text
gesetzt werden und zu den Textmarken verweisen. Die Contentnavigation befindet sich im
oberen Bereich, unterhalb der Seitenüberschrift. Die Verweise sind rot (#660000) und im
Schriftstil regular. Im Mouseover-Zustand sind sie unterstrichen. Um die Contentnavigation
vom Inhalt abzuheben, besitzt sie einen Kopfbereich mit Überschrift (Abbildung 28).
Abbildung 27: Contentnavigation Inhaltverzeichnis
Eine weitere Contentnavigation kommt zum Einsatz, wenn innerhalb eines Inhaltsbereiches
mehrere Sektionen unterschieden werden können. Das ist z.B. bei den Suchergebnissen der
Fall oder auf der Detailseite der Persönlichkeiten, wenn es mehrere Kategorien von Werken
gibt. Die verschiedenen Inhalte sollen dadurch übersichtlich strukturiert werden. Diese Art
Contentnavigation besteht aus Reitern. Die Reiterbeschriftung hat eine Größe von 12px und
bei dem aktiven Reiter ist die Schrift fett. Beim Mouseover-Zustand wird die Beschriftung
unterstrichen. Der aktive Reiter verbindet sich mit dem nachfolgenden Inhalt, indem die
Trennlinie zwischen Reiter und Inhalt nicht dargestellt wird. Der Innenabstand innerhalb des
Seite 43
Reiterinhaltsbereiches beträgt 15px. Die Inhalte sind wie entsprechende Inhalte zu gestalten
(Abbildung 28).
Abbildung 28: Contentnavigation Reiter
4.3.5 Suchfunktion
Bei der Gestaltung der Suchfunktion wird sich an dem Standard für Suchoberflächen
orientiert. Dabei besteht die Benutzeroberfläche aus Kopfbereich mit Überschrift, einem
Textfeld zur Eingabe des Suchbegriffes, einem Auswahlfeld zur Bereichseingrenzung sowie
einer Schaltfläche mit der Aufschrift „Finden“ zum Absenden der Suchanfrage. Als Breite des
Suchfeldes empfiehlt Jakob Nielsen (vgl. [NiLo06], S. 146f.) mindestens 27 Zeichen.
Dadurch können längere Suchanfragen gestellt werden, die wiederum bessere Suchergebnisse
liefern.
Abbildung 29: Suchoberfläche
Unterhalb der Schaltfläche zum Absenden befindet sich die Möglichkeit zur erweiterten
Suche. Laut Jakob Nielsen (vgl. [NiLo06], S.148) und Steven Krug (vgl. [Krug06], S.68) ist
die wichtigste Richtlinie für die erweiterte Suche, dass man sie vermeiden soll denn nur
wenige Benutzer können sie richtig einsetzen. Daher wurde die erweiterte Suche so gestaltet,
Seite 44
dass sie erst auf Wunsch des Users sichtbar wird. Bei Klick auf das Feld „erweiterte Suche“
wird ein Bereich geöffnet, der weitere suchverfeinernde Einstellungen erlaubt.
Abbildung 30: Suchoberfläche erweiterte Suche
Der Abstand der Suchbox nach unten beträgt 20px. Der Innenabstand ist auf 10px festgelegt
4.3.6 Zusatznavigation
Die Zusatznavigation befindet sich am Beginn sowie Ende des Inhaltsbereiches. Die Verweise
verhalten sich wie alle Links, die entsprechenden Symbole werden voran gestellt. Die
Schriftgröße beträgt 11px. Die Zusatznavigation tritt wie die Breadcrumb in ihrem Erscheinen
hinter den Inhalt, wird jedoch durch ihre Position wahrgenommen. Der Abstand der oberen
Zusatznavigation zum Kopfbereich beträgt 25px und zum folgenden Inhalt 20px. Die untere
Zusatznavigation ist rechtsbündig ausgerichtet und hat einen Abstand von 30px zum darüber
liegenden Inhalt.
Abbildung 31: Obere Zusatznavigation
Abbildung 32: Untere Zusatznavigation
Seite 45
4.4 Typografie
Nach einer Aussage von Oliver Richenstein [vgl. [Rich06] bestehen 95% aller Informationen
im Internet aus geschriebener Sprache. Aus diesem Grund muss dem Thema Typographie ein
besonderer Wert zugewiesen werden. Die Hauptaufgabe besteht darin, dass die textlichen
Informationen die Aufgaben und Ziele des Users unterstützen und dafür müssen sie für das
Internet aufbereitet werden. Das Leseverhalten unterscheidet sich grundlegend zwischen dem
Lesen eines Printmediums oder einer Webseite. Jakob Nielsen beschreibt (vgl. [NiLo06],
S.254), wie Benutzer eine Webseite aufnehmen. Auf der Suche nach Informationen gehen die
Benutzer nicht in einer geradlinigen Weise vor, wie sie es bei gedruckten Texten tun, sondern
sie scannen die Seite nach einer Spur, der sie folgen können (vgl. [Krug06], S.21). Sie
orientieren sich an Anhaltspunkten, die auf gesuchte Inhalte deuten. Werden diese Punkte
nicht gefunden, wird der Besucher die Webseite wieder verlassen. Deshalb müssen optische
Reize gesetzt werden, die eine optimale Scan- und Erfassbarkeit ermöglichen. Ein Punkt der
beides beeinflusst ist die Schriftgröße. Deshalb empfiehlt Jakob Nielsen (vgl. [NiLo06],
S.219) eher einen größeren Schriftgrad zu wählen. Kleine Schriftgrade vermindern die
Lesbarkeit, weil kleine Buchstaben zum Scannen der Webseite nicht deutlich sind und auf den
Bildschirmen ihre charakteristische Form verlieren. Die folgende Tabelle zeigt die
empfohlenen Schriftgrößen in Bezug auf die verschiedenen Benutzertypen:
Benutzertyp
Punktgröße
Allgemeines Publikum
Ältere Menschen & Menschen mit visueller Beeinträchtigung
Kleine Kinder und andere Leseanfänger
Teenager/ Junge Erwachsene
10 - 12
12 - 14
12 - 14
10 - 12
Tabelle vgl. [NiLo06], S. 219
Für die Darstellung auf dem Bildschirm ist darauf zu achten, dass einfache und stabil
gestaltete Schriftarten verwendet werden. Untersuchungen haben gezeigt, dass die meisten
Menschen serifenlose Texte leichter und schneller lesen können als Serifenschrift (vgl.
[NiLo06], S.230). Im Allgemeinen wirken serifenlose Schriftarten auch noch in kleinen
Größen moderner und besser lesbar. Dem Benutzer soll die Möglichkeit gegeben werden,
selber über die Schriftgröße zu entscheiden und sie nach seinen Bedürfnissen anzupassen.
Besonders für Menschen mit verminderter Sehkraft ist diese Funktion besonders wichtig. Des
Weiteren ist darauf zu achten, dass die gewählte Schriftart auch auf dem Zielsystem des Users
zur Verfügung steht. Neben der richtigen Schriftgröße und –art entscheiden auch der passende
Farbkontrast und die Zeilenlänge über die Lesbarkeit. Dabei ist der hohe Farbkontrast von
Seite 46
schwarzem Text auf weißem Hintergrund am einfachsten leserlich. Ein zu niedriger Kontrast
kann bei Benutzern mit geringer Sehkraft erhebliche Probleme verursachen. Für die
Zeilenlänge empfehlen Lynch und Horton (vgl. [LyHo02], S.97) Werte von maximal 80
Zeichen bzw. 12 Wörtern. Diese Zeilenlänge lässt sich gut scannen und der Blick schweift so
weder stark nach rechts und links ab, wie es bei längeren Zeilen nötig ist. Zusätzlich entfällt
das häufige Springen zwischen kürzeren Zeilen um eine Wortreihe zu erfassen. Werden diese
Regeln befolgt, dient die Typographie dazu, die Inhalte zu ordnen und Hierarchien auf der
Seite darzustellen.
Anhand der zuvor verdeutlichten Typographie-Empfehlungen und der Zielgruppenanalyse,
wird für die Projektwebseite die Schriftart Arial gewählt. Nachfolgende Tabelle zeigt die
charakteristischen Eigenschaften dieser Schriftart.
Schriftname Schriftfamilie
Online-Lesbarkeit
Charakter
Arial
In vernünftigen Größen
lesbar, gut geeignet ab
Schriftgröße 10 Punkt.
Modern, sauber, ohne
Schnickschnack. Gefällt
Menschen aller Altersstufe
serifenlos
Tabelle vgl. [NiLo06], S.231
Die Schriftgröße wird auf der Projektwebseite nach der Priorität der Inhalte angepasst. Die
höchste Priorität besitzen dabei die Hauptnavigation und die Texte im Inhaltsbereich. Der
Inhaltsbereich transportiert die eigentlichen Informationen, die der Besucher auf der Webseite
finden möchte. Die zwei wichtigsten Elemente sind die der lokalen Navigation, wie z.B. die
weiterführenden Links oder die Navigation zum Ändern der Organisationsschemata. Die
geringste Priorität besitzen die Elemente, die nur wenig benutzt werden. Dazu gehören
beispielsweise die Metanavigation oder die Zusatznavigation im Inhaltsbereich.
Als Standardschriftgröße wird ein Wert von 10 Punkt für die Schrift mit der höchsten Priorität
gesetzt. Dieser Wert liegt unterhalb der Usability-Empfehlungen, wird jedoch als gut lesbar
eingestuft. Des Weiteren ist die Schriftgröße individuell anzupassen. Die niedrigeren
Prioritäten liegen jeweils 1 Punkt unterhalb der Standardgröße. Die Zeilenhöhe richtet sich
nach der Textgröße und ist das 1,3 fache dieser Größe. Die Textbreite und der Farbkontrast
(schwarz auf weiß) im Inhaltsbereich richten sich nach den Empfehlungen.
Die verwendeten Überschriften teilen sich ebenfalls in drei Klassen, die Seitenüberschrift, die
Bereichsüberschrift sowie die Inhaltsüberschrift. Die Seitenüberschrift besitzt die höchste
Relevanz, da der Besucher durch sie die Seite sofort identifizieren muss. Aus diesem Grund
wird sie in einer Größe von 18 Punkt fett ausgezeichnet. Bereichsüberschriften markieren ein
Seite 47
Teilgebiet einer Seite, z.B. ein Thema auf der Detailseite. Sie werden in Größe von 12 Punkt
fett gesetzt. Um das zugehörige Teilgebiet noch deutlicher hervorzuheben, besitzen die
Bereichsüberschriften eine bis zum Seitenrand durchgehende Unterstreichung. Die
Inhaltsüberschriften passen sich dem umgebenden Inhalt an und sind fett ausgezeichnet.
4.5 Links
Links bilden die zentralen Elemente einer Hypertextstruktur und sind damit die Grundlage für
Verbindungen von verschiedenen Inhalten im Internet (vgl. [Alkan02], S.93). Um die
Bedeutsamkeit der Links zu verdeutlichen, soll im Nachfolgenden der Prozess aufgezeigt
werden, wie ein durchschnittlicher Besucher Informationen im Internet findet (vgl.
[Trenton04]):
-
Benutzer besucht eine Webseite
-
Er scannt die Seite, auf der Suche nach Informationen bzw. nach den Links die ihn
dorthin bringen.
-
Findet er nicht die gewünschten Inhalte, folgt er einem Link und beginnt wieder mit
Punkt zwei.
-
Der Prozess geht solange, bis die Informationen gefunden wurden oder die Seite
verlassen wird.
Da nicht alle Informationen auf einer Seite präsentiert werden können, ist es besonders
wichtig, dass Links ein hilfreiches Werkzeug zur Informationsauffindung darstellen. Dazu
wurden einige Richtlinien aufgestellt (vgl. [NiLo06], S.58ff, [Alkan01], S.95ff, [Trenton04]).
Links sollen eine andere Farbe besitzen als der restliche Text, um sie unterscheiden zu
können. Dabei muss, nach Jakob Nielsen, die Linkfarbe nicht mehr blau sein, wie es in
früheren Jahren oft gefordert wurde. Durch das veränderte Nutzerverhalten im Internet,
werden auch andere Farben den Links zugeordnet, wenn sie sich vom restlichen Text
unterscheiden. Auch müssen Links nicht mehr zwangsläufig unterstrichen sein, jedoch soll
unterstrichener Text ausschließlich für Links verwendet werden (vgl. [Treton04]). Ein
weiterer Punkt um Links benutzerfreundlich zu gestalten ist, dass Links ihr Ziel deutlich
beschreiben müssen. In Abschnitt 3.4 Labeling Systeme wurde darauf bereits eingegangen.
Eine Empfehlung für die Beschriftung von Links sagt zusätzlich aus, dass der Linktext auf
maximal vier Wörter beschränkt sein soll und die Aussagekräftigsten am Anfang stehen.
Seite 48
Für die Links der Projektwebseite wird folgende Formatierung festgelegt:
Unbesuchte Links sind in der Farbe Rot (#660000) gekennzeichnet, Schriftgröße und
Schriftart wird durch den Kontext bestimmt in dem sich der Link befindet. Links sind mit
dem davorstehenden Linksymbol zu kennzeichnen. Eine Ausnahme bilden die Links
innerhalb des Inhaltes (Ad hoc Navigation vgl. 3.3.1 Navigationstypen). Fokussierte Links
(Hover) werden wie normale Links formatiert, sind aber zusätzlich unterstrichen. Die bereits
besuchten Links sind wie normale Links zu gestalten.
4.6 Symbole/ Icons
Das Thema der Ikonogramme wurde bereits in 3.4.1 Labeling Systeme erläutert. Hier sollen
lediglich die Symbole und Icons für die Projektwebseite aufgelistet werden. Zu jedem
Symbol/ Icon wird deren Verwendung genannt.
Die Symbole bzw. Icons stehen immer linksbündig vor dem darauffolgenden Text und haben
zu diesem einen Abstand von 10px. Die Farbe der Symbole hat der des Textes zu entsprechen.
Link zu einer Seite innerhalb der Projektwebseite
Link zu einer externen Webseite
E-Mail verfassen
Herunterladen eines Dokuments (z.B. .pdf)
Herunterladen eines Audioclips (z.B. .mp3)
Abspielen eines Audioclips
Audioclip wird abgespielt
Vergrößern eines Bildes
Drucken
Link zum Seitenanfang
Navigation Weiter
Navigation Zurück
Alle Suchergebnisse einer Kategorien in neuem Reiter anzeigen
Seite 49
4.7 Komponenten
Viele Seiteninhalte sind zum Großteil mit den hier vorgestellten modularen Komponenten
zusammen zu stellen.
Bilder
Bilder auf der Projektwebseite werden im Inhaltsbereich der Detailseiten präsentiert. Dabei
integrieren sie sich in den Text, der um die Bilder fließt. Die Bilder können links oder rechts
ausgerichtet werden. Ein Bild besitzt einen grauen (#cccccc) Rahmen mit einem inneren
Abstand von 5px. Der äußere Abstand beträgt 10px. Hat ein Bild eine Großansicht, wird das
durch ein Symbol im unteren rechten Rand angezeigt. Eine Bildbeschreibung folgt unterhalb
des Bildes in einer Schriftgröße von 11px. Bilder orientieren sich in ihren Größen immer an
den Layoutspalten. Dabei beträgt die Minimalbreite 73px (~ 1 Spalte minus 10px
Innenabstand)
und die Maximalbreite 535px (~ 6 Spalten plus 5 Stege minus 10px
Innenabstand). In der Höhe sollen sich die Bilder ihrem Seitenverhältnis anpassen.
Abbildung 33: Bild im Layoutraster
Bilder sollen immer in Bezug zum Inhalt stehen, in dem sie präsentiert werden.
Listen
Verschiedene Listentypen können zum Einsatz kommen. Listen werden nicht innerhalb eines
Absatzes verwendet. Jedoch können vor und nach einer Liste Absätze stehen. Optional kann
eine Liste eine Überschrift haben. Ungeordnete Listen werden mit einem quadratischen
grauen Zeichen als Listenpunkt markiert. Die Link-Listen werden mit den entsprechenden
Link-Icon gekennzeichnet (vgl. 4.6 Symbole/ Icons). Listen mit seiteninternen Sprungmarken
besitzen kein Listenzeichen.
Seite 50
Folgende Abbildungen zeigen die unterschiedlichen Listentypen:
Abbildung 34: Liste mit seiteninternen Sprungmarken
Abbildung 35: Linkliste
Abbildung 36: Ungeordnete Liste mit Links
Formulare
Ein Formular besteht aus mehreren Eingabefeldern, den dazugehörigen Beschriftungen und
einer Schaltfläche zum Absenden. Ein Button zum Abbrechen bzw. Löschen ist nicht
notwendig und wird aus Gründen der Usability weggelassen. Die Ausrichtung der
Beschriftungen und der Eingabefelder richtet sich nach dem Raster der Inhaltsspalte.
Abbildung 37: Kontaktformular
Seite 51
Alle fehlenden Pflichtangaben werden nach einer Validierung am Anfang der Seite
aufgelistet. Im Formular werden Beschriftung und Eingabefeld rot umrahmt.
Abbildung 38: Formular nach Validierung
Blätterfunktion
Diese Komponente dient zum Blättern zwischen den Suchergebnissen bzw. Inhaltsbereichen
mit großen Datenmengen. Zur Sortierung der Inhaltsreihenfolge wird eine formal gleiche
Komponente verwendet.
Abbildung 39: Blätterfunktion
Werbeteaser
Werbeteaser können in der linken Spalte des Inhaltsbereiches erscheinen. Sie dienen dem
Verweis auf die Webseite des Werbenden. Die Teaser beinhalten das Firmenlogo mit einer
schattierenden Umrahmung.
Abbildung 40: Werbeteaser
xHTML/ CSS Umsetzung
Seite 52
5 xHTML/ CSS Umsetzung
Die Benutzeroberfläche wird durch den Einsatz von Webstandards wie semantisches xHTML
und CSS realisiert. Das Ziel ist die Vorteile dieser Technologien zu nutzen und dadurch eine
Webseite zu gestalten die barrierefrei ist, den Wartungsaufwand reduziert, die
Übertragungsgeschwindigkeit steigert und die Benutzerfreundlichkeit verbessert. xHTML
beschreibt die semantische Bedeutung und CSS die Formatierung des Inhaltes.
Im ersten Abschnitt werden Richtlinien für den barrierefreien Aufbau der Webseite
aufgestellt, die in der weiteren Umsetzung berücksichtigt werden. Danach folgt die
Beschreibung der einzelnen Websitekomponenten durch xHTML- und CSS-Quelltext. Die
beiden Formate werden dabei als bekannt vorausgesetzt, für evtl. benötigte detaillierte
Erläuterungen von xHTML bzw. CSS- Elementen wird auf das Buch „Webdesign in a
Nutshell“ (siehe [Rob06]) verwiesen. Als Grundlage des dargestellten Quelltextes dienen die
prototypisch implementierten Seiten der Startseite, Kategorieseite, Suchergebnisseite,
Detailseiten und einer Seite der Metanavigation.
5.1 Barrierefreiheit-Richtlinien
Die folgenden Richtlinien zur barrierefreien Umsetzung der Projektwebseite stellen lediglich
einen Auszug aus den BITV- bzw. WCAG 1.0-Anforderungen dar. Es werden die wichtigsten
Anordnungen genannt. Für eine vollständige Aufführung ist auf [BWB07] zu verweisen.
Bei der Gestaltung des Textes ist darauf zu achten, dass eine klare Gliederung erfolgt. Das
macht es den Benutzern leichter, den Text zu erfassen. Die verwendete Sprache soll klar und
möglichst einfach sein, dadurch wird auch fachfremden Usern der Zugang ermöglicht. Zur
Formatierung von Überschriften, Listen, Akronymen usw. sind HTML-Ausdrücke zu
verwenden. Die Schriftgröße ist durch relative Größen anzugeben.
Generell gilt die Trennung von Inhalt und Formatierung. Die Websiteformatierung wird in
externen CSS-Dateien gespeichert. Dadurch ist es möglich durch einfaches Ändern der
Dateien die Darstellung des Inhaltes auf der Webseite zu ändern.
Tabellen werden ausschließlich für die Darstellung tabellarischer Daten verwendet.
Zusammengehörige Bereiche werden durch eine Überschrift o.ä. deutlich gemacht.
Auf den Einsatz von Frames zur Gestaltung des Layouts wird verzichtet.
Seite 53
Beim Einsatz von Bildern ist darauf zu achten, dass ein beschreibender „alt“-Text verwendet
wird. Dieser wird angezeigt, wenn das Bild nicht dargestellt werden kann. Wenn das Bild
verlinkt ist, wird das Linkziel im „alt“-Text beschrieben. Bilder werden nicht zur Darstellung
von Text gebraucht, da das Änderungen schwierig macht und Vergrößerungstechniken nicht
funktionieren.
Die Felder von Formularen sind logisch in der Reihenfolge anzuordnen, in der sie vom
Benutzer ausgefüllt werden. Jedes Feld ist dabei mit einer Beschriftung zu versehen und
zusammengehörige Felder sind als Gruppe anzuordnen.
5.2 Die Struktur des Markups
Alle HTML-Dokumente gehen von einer grundlegenden Seitenstruktur aus.
Abbildung 41: Projektwebseite: xHTML Seitenstruktur
Die Gestaltungsformatierungen werden in drei externen CSS-Dateien gespeichert. Dabei
enthält die Datei Main.css die Formatierungen für den allgemeinen Seitenaufbau. In
Components.css sind die Gestaltungen für die speziellen Websitekomponenten gespeichert
und die Datei Fonts.css stellt alle Informationen zur Schrift bereit. Die Aufteilung in
verschiedene CSS-Dateien hat den Vorteil, dass zum einen der Inhalt nach Bedeutung der
Elemente strukturiert werden kann und zum anderen die nötige Übersichtlichkeit
gewährleistet wird, um evtl. Änderungen vorzunehmen.
Die im Weiteren beschriebenen Websiteelemente werden unter Voraussetzung eines
existierenden HTML-Dokumentes zwischen <body> und </body> eingebunden.
Seite 54
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.http://www.w3.org/TR/xhtml1/DTD/xhtml1-transtitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en“xml:lang="en">
<head>
<title>Alte Musik in Dresden</title>
<meta http-equiv=“Content-Type“ content=“text/html; charset=utf8“ />
<style type=”text/css”>
<link rel="stylesheet" href="css/main.css" type="text/css" />
<link rel="stylesheet" href="css/components.css" type="text/css" />
<link rel="stylesheet" href="css/font.css" type="text/css" />
</style>
</head>
<body>
… hier werden die Elemente integriert …
</body>
</html>
5.2.1 Metanavigation
Die Metanavigation besteht aus einer Liste von Links. Daher ist es sinnvoll diese auch in
einer Liste zu strukturieren, genauer in einer ungeordneten Liste. Das einfache Markup
gewährleistet eine leichte Lesbarkeit bei allen Browsern und Geräten. Die Liste ist in einem
umgebenen Container platziert.
<div class="metanavigation">
<ul class="meta-links">
<li><a href="start.html">Startseite</a></li>
<li>|</li>
<li><a href="ueberuns.html">Über Uns</a></li>
<li>|</li>
<li><a href="kontakt.html" class="active">Kontakt</a></li>
<li>|</li>
<li><a href="sitemap.html">Sitemap</a></li>
<li>|</li>
<li><a href="impressum.html">Impressum</a></li>
</ul>
<br class="clear" />
</div>
Die Liste wird so gestaltet, dass sie rechts auf der Seite ausgerichtet ist und die Elemente
horizontal nebeneinander stehen. Da die Liste durch die CSS-Eigenschaft float in die
horizontale Position gedrängt wird, ist darauf zu achten, dass bei allen danach folgenden
Elementen der Umfluss abgebrochen wird. Das wird durch die Klasse Class=“clear“
sichergestellt, auch im Weiteren Verlauf wird die Klasse diese Aufgabe erfüllen. Die Klasse
Class=“meta-links“ ändert die Standardformatierung der Links, so dass die Links schwarz
ausgezeichnet werden.
Seite 55
5.2.2 Logo
Das Logo wird als Bild in den Kopfbereich eingefügt und zur Startseite verlinkt. Damit die
Seite auch für Screenreader bzw. für Suchmaschinen optimal dargestellt wird, ist nachfolgend
dem <img> eine <h1> Überschrift eingefügt. Diese wird jedoch durch die Klasse
Class=“invis“ versteckt.
<div id="logo">
<div>
<a href="start.html" title="Zur Startseite">
<img src="img/logo.jpg" alt="Startseite" />
<h1 class="invis">Alte Musik in Dresden</h1>
</a>
</div>
/di
5.2.3 Hauptnavigation und Breadcrumb
Die Hauptnavigation und die Breadcrumb bilden zusammen eine Einheit. Aus diesem Grund
werden sie gemeinsam beschrieben. Beide Elemente sind ebenfalls als ungeordnete Liste
aufgebaut.
<div id="mainnavigation">
<ul>
<li><a class="tab1" href="#"><span>Musikgeschichte</span></a></li>
<li><a class="tab2" href="#"><span>Persönlichkeiten</span></a></li>
<li class="active"><a class="tab3" href="#"><span>Werke</span></a></li>
<li><a class="tab4" href="#"><span>Institutionen und
Ensembles</span></a></li>
<li><a class="tab5" href="#"><span>Quellentexte</span></a></li>
<li><a class="tab6" href="#"><span>Literatur</span></a></li>
</ul>
<br class="clear"/>
</div>
Die Gestaltung der einzelnen Reiter wird über die Klasse Class=“tab1“ (fortlaufende
Nummerierung für die folgenden Reiter) realisiert. Über den <a>-Tag wird der linke Teil des
Reiters dargestellt (5px breit). Da der Reiter sich bei einer Textvergrößerung mit ausdehnen
muss, wird ein weiteres Element benötigt. Der <span> enthält den Text und als
Hintergrundbild den anderen Teil des Reiters. Vergrößert sich nun der Text, dehnt sich der
<span> mit aus, das Hintergrundbild wurde deutlich größer gewählt, sodass keine „Lücken“
im Reiter entstehen.
Seite 56
#mainnavigation ul li a.tab1 {
background: #929d9d url(../img/tab1a.jpg) left top no-repeat;
}
#mainnavigation ul li a.tab1 span {
background: #929d9d url(../img/tab1b.jpg) right top no-repeat;
}
Die Klasse Class=“active“ im <li>-Tag bewirkt, dass der Reiter im ausgewählten Zustand
scheinbar nach vorn tritt und mit der Breadcrumb eine Verbindung eingeht.
Die Breadcrumb nimmt im aktiven Reiterzustand die gleiche Farbe an. Wie auch bei der
Hauptnavigation, ist die Klasse Class=“tab1“ dafür zuständig. Die Pfeile zwischen den
Listeneinträgen werden über Bilder (<img>-Tag) realisiert. Der jeweilig aktive Listeneintrag
wird über die Klasse Class=“active“ markiert.
<div id="breadcrumb" class="tab1">
<li>Sie sind hier:</li>
<li><a href="#">Startseite</a></li>
<li><img src="img/breadcrumb_pfeil.gif" alt=">" /></li>
<li><a href="#" class="active">Werke</a></li>
</ul>
<br class="clear"/>
</div>
5.2.4 Inhaltsbereich
Der Inhaltsbereich umschließt zwei Container, die die linke und rechte Spalte bilden. Um eine
Semantik der Elemente zu gewährleisten, wird im Markup die rechte Spalte vor der Linken
platziert. Wird die Webseite ohne CSS-Formatierung geöffnet, erscheint die rechte Spalte mit
ihren Inhalten, aufgrund der größeren Bedeutung vor der linken Spalte.
Abbildung 42: Projektwebseite: xHTML Gliederung des Inhaltsbereiches
Innerhalb der Container für die zwei Spalten werden alle Websiteelemente angeordnet.
Seite 57
<div id="content">
<div id="right-column">
...Inhalt der rechten Spalte...
</div>
<div id="left-column">
...Inhalt der linken Spalte...
</div>
</div>
5.2.5 Fußbereich
Der Fußbereich setzt sich, wie bereits in 3.5.1 Seitentypen beschrieben, durch einen
Copyright-Hinweis und eine Metanavigation zusammen.
<div id="footer">
<div>
<span>Copyright © Musikschätze Dresden e.V. 2007</span>
<li><a href="#">Startseite</a></li>
<li>|</li>
<li><a href="#">Über Uns</a></li>
<li>|</li>
<li><a href="#" class="active">Kontakt</a></li>
<li>|</li>
<li><a href="#">Sitemap</a></li>
<li>|</li>
<li><a href="#">Impressum</a></li>
</ul>
<br class="clear" />
</div>
</div>
Zur Abgrenzung zum Inhaltsbereich erhält der Fußbereich eine obere Rahmenlinie. Der
Hinweis wird links ausgerichtet und die Metanavigation rechts.
5.3 Typografie
Die Informationen zur Schriftformatierung werden in der Datei Fonts.css gespeichert. Die
Formatierungen richten sich nach den im Abschnitt 4.5 Typografie gemachten Festlegungen.
body {
font-family: Arial, Verdana, sans-serif;
font-size: 62.5%;
font-style: normal;
font-variant: normal;
font-weight: normal;
}
Als Ausgangsbasis wird für das oberste Element im Markup die Schriftgröße von 62,5%
relativ zur Standardgröße des jeweils verwendeten Browsers eingestellt.
Seite 58
Diese Angabe entspricht einer Größe von 10px. Im Weiteren beziehen sich alle
nachfolgenden Elemente der Webseite auf diese Größe und werden relativ dazu angepasst.
Ein Vorteil in der relativen Deklaration von Schriftgrößen besteht darin, dass die Größe über
den Browser angepasst werden kann und damit eine Richtlinie zur barrierefreien Gestaltung
erfüllt wird. Alle nachfolgenden Schriftdeklarationen werden in der relative Einheit em
(Angabe der Schriftgröße, relativ zur Normalgröße. 1em = 100%) vorgenommen. Ein
Element steht damit in Relation mit dem übergeordneten Element.
5.4 Komponenten
In dem folgenden Abschnitt werden die verschiedenen Inhaltskomponenten der Webseite
hinsichtlich ihres HTML-Aufbaus beschrieben. Mit Hilfe der Ausführungen können spätere
Autoren die Elemente richtig platzieren.
5.4.1 Links
Die allgemeine Gestaltung von Links wird wie folgt realisiert:
a {
color: #a10025;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
Alle Links sind dadurch rot ausgezeichnet und im Mouseover-Zustand unterstrichen. Zur
Verwendung
von
Links
sind
folgende
Attribute
verfügbar:
href=“Linkziel“,
name=“Sprungziel“ und title=“Seitentitel“. Beim Verweis auf externe Quellen ist der
title anzugeben.
Um dem Benutzer die Art des Verweises kenntlich zu machen, können Symbole (vgl. 4.7
Symbole/ Icons) dem Link mit Hilfe von CSS-Klassen vorangestellt werden. Darauf ist zu
verzichten, wenn der Link in einer Liste bzw. innerhalb eines Textbereiches verwendet wird.
Die verfügbaren CSS-Klassen sind nachfolgend aufgelistet:
Class=“link“
Class=“back“
Class=“mail“
Class=“bigger“
Class=“up“
Class=“new-tab“
Class=“forward“
Seite 59
<a class="link" href="opern.html" title="Opern">Opern</a>
Wenn ein Link nicht auf eine HTML-Seite verweist, sondern auf eine Datei, wird diese
mittels einer externen Applikation aufgerufen. Das Öffnen der Datei im Browserfenster wird
von Jakob Nielsen (vgl. [NiLo06], S.69) nicht empfohlen.
5.4.2 Bilder
Zum Einbinden von Bildern wird folgende HTML-Struktur vorgegeben. Diese Struktur kann
an beliebiger Stelle des rechten Inhaltsbereiches eingefügt werden.
<div class="img-box" style="width: 156px;">
<a href="#" title="Gemälde von 1780 ">
<img src="img/content/180px-Naumann.jpg" alt="Gemälde von 1780"/>
</a>
<a href="#" class="enlarge" title="Bild vergrößern">
<img src="img/bigger.jpg" alt="Bild vergrößern"/>
</a>
Gemälde von 1780, gemalt von seinem Bruder Friedrich Gotthard Naumann
</div>
Die Klasse class=“img-box“ formatiert den Container nach den Gestaltungsrichtlinien für
Bilder. Die horizontale Ausrichtung wird durch die CSS-Klasse class=“left“ bzw.
class=“right“ realisiert. Dadurch fließen die Bilder entweder links oder rechts am Text
vorbei. Die Weite der Bilder muss direkt auf das Element geschrieben werden (z.B.
style="width: 156px;"), da dieser Wert je nach Bildformat variieren kann. Jedoch muss die
Rasterweite des Layouts (vgl. 4.7 Komponenten-Bilder) beachtet werden. Das darzustellende
Bild wird zwischen dem ersten <a>-Tag platziert, wenn auf große Version verwiesen werden
soll. Ist das nicht gegeben, wird der <a>-Tag weggelassen. Eingefügt wird das Bild durch den
<img>-Tag. Dabei sind folgende Attribute zu vergeben: src=“Bildquelle“, alt=“Alternativer
Text“ und title=“Titel des Bildes“. Die Beschreibung wird unterhalb des Bildes platziert.
5.4.3 Überschriften
Überschriften werden nach ihrer semantischen Bedeutung verwendet. Das bedeutet, dass eine
Seite immer mit einer <h1> Überschrift beginnt, danach folgt <h2> und danach <h3>, sofern
das <h3> nicht als Boxenüberschrift verwendet wird. Des Weiteren soll jede Überschrift von
einem Text gefolgt werden.
Seite 60
Abbildung 43: Überschriften
Die Abbildung entspricht folgendem Quelltext:
<h1>&Uml;berschrift 1. Ordnung</h1>
5.4.4 Absätze, Textbereiche und Listen
Textbereiche werden in <p>-Absätzen gegliedert. Die Textbereiche werden durch das CSS so
formatiert, dass sie einen Abstand nach unten besitzen. Um den Abstand zu verhindern, muss
die CSS-Klasse class=“last“ eingefügt werden. Es ist darauf zu achten, dass jeder Inhaltstext
entweder innerhalb eines <p>-Absatzes, einer Liste oder einer Überschrift anzugeben ist. Des
Weiteren ist es wichtig, dass Absätze immer nur mit dem <p>-Tag erreicht werden, nicht mit
vielen aufeinanderfolgenden <br />-Tags.
Listen sind zu verwenden, wenn es zu einer Aufzählung kommt. Manuelle Aufzählungen, bei
denen ein Zählzeichen gesetzt wird sind zu vermeiden.
Die Listen werden nach folgendem Schema aufgebaut:
<ul>
<ul>
<li>Listeneintrag 1</li>
Um dem Listeneintrag ein Listensymbol voranzustellen (vgl. Abbildungen unter 4.
Oberflächengestaltung), muss dem <li>-Tag eine entsprechende CSS-Klasse zugefügt
werden.
Class=“link“
Class=“doc“
Class=“ext“
Class=“audio“
Class=“mail“
Class=“play“
Class=“square“
Class=“sound“
Class=“print“
Seite 61
5.4.5 Boxen
Aus Kapitel 4. Oberflächengestaltung ist zu entnehmen, dass Boxen verwendet werden, um
Inhalt abzugrenzen. Sie können an verschiedenen Stellen und in unterschiedlichen Varianten
benutzt werden. Alle Boxen müssen in ihrer Größe flexibel sein, da die Ausdehnung vom
Inhalt bestimmt wird.
<div class="box left">
<h3>Überschrift</h3>
<ul>
<li><a href="#">Listeneintrag1</a></li>
<li><a href="#">Listeneintrag2</a></li>
</ul>
</div>
Der Quelltext zeigt, dass eine Box aus einem umschließenden Container besteht, in dem der
Inhalt platziert wird. Die Überschrift der Box wird zwischen die <h3>-Tags gesetzt. Durch
diese Tags wird ebenfalls der Boxenkopf formatiert. Gefolgt von der Überschrift, erscheint
der Inhalt der Box. Das kann wie im oberen Beispiel eine Liste sein, möglich sind jedoch die
verschiedensten Inhaltsformen. Die Box wird mit Hilfe unterschiedlicher CSS-Klassen
formatiert.
Class=“left-box“
Box nur für linke Spalte des Inhaltsbereiches
Class=“small-box“
Kleine Box für rechten Inhaltsbereich
Class=“large-box“
Große Box für rechten Inhaltsbereich
Class=“content-box“
Box im rechten Inhaltsbereich ohne Rahmen
(vgl. Abbildung. 27)
Class=“last“
Klasse für letzte Box in der Reihe, Abstände werden
zurückgesetzt
Seite 62
5.4.6 Werbeteaser
Werbeteaser werden wie folgt in die linke Spalte des Inhaltsbereiches eingefügt:
<a href="#" class="teaser" title="Homepage Musikschätze Dresden">
<img src="img/Bilder/verein.jpg" alt="Musikschätze Dresden" />
</a>
Es ist lediglich ein Bild zu referenzieren, die Formatierung wird durch die CSSEigenschaften übernommen. Der Link verweist auf die Homepage des Werbenden.
5.4.7 Audiowiedergabe
Die standardkonforme Einbindung des Audioplayers zur Wiedergabe von Musikstücken
erfolgt durch das object-Element. Das <object> Tag bettet den Player und seine
Steuerelemente direkt in die Seite ein und kann von dort aus gesteuert werden. Für eine
detaillierte Beschreibung der Integration ist auf die Quelle [WMI06] verwiesen. Ist der
Audioplayer nicht vorhanden, wird der systemeigene Player benutzt.
Zusammenfassung
Seite 63
6 Zusammenfassung
Das Ziel dieser Belegarbeit war es, sich dem Entwurf einer Benutzeroberfläche für ein
Informationssystem der „Alten Musik in Dresden“ anzunehmen. Aus der Problemstellung
heraus, dass eine unzureichend geplante bzw. gestaltete Informationsplattform nur schlechten
Zugriff auf gesuchte Informationen gestattet, sollten einerseits die verschiedenen Aspekte des
Aufbaus einer Informationsarchitektur unter Berücksichtigung einer guten Usability
aufgezeigt und andererseits dementsprechend eine themenbezogene Oberfläche entwickelt
werden.
Es konnte festgestellt werden, dass die Hauptzielgruppe der Informationsplattform über 50
Jahre alt ist und einen hohen Bildungsstand aufweist. Die Ziele bestehen vorrangig in der
schnellen und umfassenden Informationssuche bzw. –präsentation. Das Inhaltsspektrum mit
seinen umfangreichen Teilen wurde aufgezeigt.
Die Kategorien Musikgeschichte, Persönlichkeiten, Institutionen und Ensembles, Quellentext
und Literatur wurden als Themenbereiche definiert. Anhand dieser Kategorien konnte die
themenspezifische Informationsarchitektur aufgebaut werden. Dazu wurden die theoretischen
Ausführungen über die Organisation von Webinhalten als Grundlage verwendet. Es finden
dabei auf der Projektwebseite hybride Organisationsschemata ihre Anwendung, was am
Beispiel einzelner Kategorien und Bereiche gezeigt wurde, aber auch auf den restlichen Inhalt
übertragen werden kann. Zur strukturellen Organisation der Inhalte wird eine HypertextStruktur in einer hierarchischen Umgebung mit der Unterstützung einer Datenbank benutzt.
Die Organisationsstruktur bildet die Grundlage zur Gestaltung der Navigation. Der Abschnitt
über ein Labeling-System dient als Referenz zur selbständigen Umsetzung, ohne dabei
Definitionen zur Benennung auf der Projektwebseite vorzugeben. Um den Funktions- bzw.
Inhaltsumfang zu verdeutlichen, wurden mit Hilfe der fünf verschiedenen Seitentypen (Start-,
Kategorie-, Suchergebnis-, Detailseite sowie die Seiten der Metanavigation) Wireframes
entwickelt. Die Ausführungen und Ergebnisse dieses Kapitels wurden weitergehend als
Grundlage zur grafischen Gestaltung der Oberfläche benutzt.
Zusammenfassung
Seite 64
Die Oberflächengestaltung legt, unter Berücksichtigung von Usabilityempfehlungen, die
einzelnen Strukturen und Komponenten der Projektwebseite fest. Anhand der Beschreibungen
und Abbildungen kann sich der Leser ein genaues Bild der Webseite machen. Ebenfalls dient
dieses Kapitel dazu, dass evtl. spätere Änderungen und Ergänzungen sich an dem Design
orientieren.
Mit Hilfe des Designs ist im Folgenden eine statische Version mittels xHTML und CSS
implementiert worden, die die verschiedenen Seitentypen bzw. Elemente repräsentiert. Diese
Version bildet wiederum die Grundlage für die Implementierung der dynamischen
Projektwebseite.
Abschließend kann festgestellt werden, dass die Belegarbeit den ersten Schritt in der
Umsetzung der Webseite „Alte Musik in Dresden“ bildet. Die Arbeit kann als Referenz und
Orientierung für spätere Umsetzungen sowie Erweiterungen benutzt werden.
Abbildungsverzeichnis
Seite VII
Abbildungsverzeichnis
Abbildung 1: Screenshot der Startseite von klassik.com ........................................................... 3 Abbildung 2: Screenshot einer Detailseite von klassik.com ...................................................... 4 Abbildung 3: Screenshot der Startseite von miz.org .................................................................. 5 Abbildung 4: Screenshot Auflistung aller Komponisten von miz.org ....................................... 6 Abbildung 5: Screenshot der Startseite von iTunes ................................................................... 6 Abbildung 6: Screenshot einer Biographieseite von iTunes ...................................................... 7 Abbildung 7: Hybrides Organisationsschema [RoMo98], S.30 ............................................... 17 Abbildung 8: Projektwebseite: Beispiel für Organisationschemata ......................................... 18 Abbildung 9: Projektwebseite: Organisationsschema der Suchfunktion ................................. 19 Abbildung 10: Die vier Ws der Benutzerführung. Angelehnt an ([BeGi02], S.103) ............... 21 Abbildung 11: Projektwebseite: Navigationsstruktur .............................................................. 23 Abbildung 12: Projektwebseite: Seitentypen ........................................................................... 26 Abbildung 13: Projektwebseite: Wireframe Startseite ............................................................. 28 Abbildung 14: Projektwebseite: Wireframe Suchergebnisseite ............................................... 30 Abbildung 15: Projektwebseite: Wireframe Kategorieseite ..................................................... 31 Abbildung 16: Projektwebseite: Wireframe Detailseite ........................................................... 33 Abbildung 17: Projektwebseite: Wireframe Seite der Metanavigation .................................... 34 Abbildung 18: Projektwebseite: Design Startseite ................................................................... 35 Abbildung 19: Projektwebseite: Design Suchergebnisseite ..................................................... 37 Abbildung 20: Projektwebseite: Design Detailseite ................................................................. 38 Abbildung 21: Farbkreis mit warmen und kalten Farben ......................................................... 40 Abbildung 22: Projektwebseite: Design Hauptnavigation/Breadcrumb .................................. 40 Abbildung 23: Projektwebseite: Design Hauptnavigation/Breadcrumb Mouseover-Zustand . 41 Abbildung 24: Metanavigation ................................................................................................. 41 Abbildungsverzeichnis
Seite VIII
Abbildung 25: Box "Weiterführende Links" Abbildung 26: Box "Werke herunterladen" . 42 Abbildung 27: Contentnavigation Inhaltverzeichnis ................................................................ 42 Abbildung 28: Contentnavigation Reiter.................................................................................. 43 Abbildung 29: Suchoberfläche ................................................................................................. 43 Abbildung 30: Suchoberfläche erweiterte Suche ..................................................................... 44 Abbildung 31: Obere Zusatznavigation.................................................................................... 44 Abbildung 32: Untere Zusatznavigation .................................................................................. 44 Abbildung 33: Bild im Layoutraster......................................................................................... 49 Abbildung 34: Liste mit seiteninternen Sprungmarken............................................................ 50 Abbildung 35: Linkliste ............................................................................................................ 50 Abbildung 36: Ungeordnete Liste mit Links ............................................................................ 50 Abbildung 37: Kontaktformular ............................................................................................... 50 Abbildung 38: Formular nach Validierung .............................................................................. 51 Abbildung 39: Blätterfunktion ................................................................................................. 51 Abbildung 40: Werbeteaser ...................................................................................................... 51 Abbildung 41: Projektwebseite: xHTML Seitenstruktur ......................................................... 53 Abbildung 42: Projektwebseite: xHTML Gliederung des Inhaltsbereiches............................. 56 Abbildung 43: Überschriften .................................................................................................... 60 Abkürzungsverzeichnis
Abkürzungsverzeichnis
BITV
Barrierefreie Informationstechnik-Verordnung
bzw.
beziehungsweise
CSS
Cascading Style Sheets
etc.
et cetera
ggf.
gegebenenfalls
HTML
Hypertext Markup Language
mp3
MPEG-1 Audio Layer 3
o.ä.
oder ähnliches
pdf
Portable Document Format
px
Pixel
sog.
sogenannt
u.v.m.
und vieles mehr
v.a.
vor allem
WCAG
Web Content Accessibility Guidelines
xHTML
Extensible Hypertext Markup Language
Seite IX
Literaturverzeichnis
Seite X
[AGOF07]
AGOF e.V.: Berichtsband – Teil 1 zur internet facts 2007-I. 2007
http://www.agof.de/if-2007-i-teil-1online.download.6033aa53fd516aa8e75adb6e40408d3e.pdf
Heruntergeladen am 02.07.2007
[Alkan02]
Alkan, S. R.: Texten für das Internet – Ein Handbuch für Online-Redakteure
und Webdesigner. Bonn: Galileo Press GmbH, 2002
[ARD06]
ARD-Werbung SALES & SERVICE GmbH: Das aktuelle Radio Kompendium
2002. Frankfurt am Main, 2002
http://www.ard-werbung.de/showfile.phtml/musikformate.pdf?foid=1928
Heruntergeladen 14.07.2007
[BeGi02]
Beier, M. (Hrsg); von Gizycki, V. (Hrsg): Usability – Nutzerfreundliches WebDesign. Berlin Heidelberg: Springer Verlag, 2002
[BRI06]
ARD/ZDF: Entwicklung der Onlinenutzung in Deutschland, 1997-2007
http://www.br-online.de/br-intern/medienforschung/onlinenutzung/onlinenutzung/
[BWB07]
BITV, WCAG & BIENE – Die Matrix, 2007
http://www.einfach-fuer-alle.de/artikel/bitv/matrix/?style=screen
[IAM06]
Institut zur Erschließung der Alten Musik in Dresden e.V.: Präambel. Dresden,
2006
[Jacobsen02] Jacobsen, J.: Website-Konzeption. München: Addison-Wesley, 2002
[KnLi04]
Know Library: Informationen zum Artikel Sysematik. 2004
http://systematik.know-library.net/
[Krug06]
Krug, S.: Don’t make me think! Web Usability: Das intuitive Web. Heidelberg:
Redline GmbH, 2006
[LeReSm06] Lee, J. Ha; Renear, A., Smith, L.: Known-Item Search: Variations on a
Concept. In Grove, Andrew, Eds. Proceedings 69th Annual Meeting of the
American Society for Information Science and Technology (ASIST) 43,
Austin, 2006
http://eprints.rclis.org/archive/00008353/01/Lee_Known-Item.pdf
[Luckh02]
Seite XI
Luckhardt, H.-D.: Virtuelles Handbuch der Informationswissenschaft:
Information Retrieval. Saarbrücken, 2002
http://is.uni-sb.de/studium/handbuch/exkurs.ir.php
[LyHo02]
Lynch, P. J.; Horton, S.: Web Style Guide. Basic Design Principles for
Creating Web Sites. B&T, 2002
[MIZ]
Deutsches Musikinformationszenrum: Über Uns.
http://www.miz.org/miz_org.html
[Niederm05] Niedermeyer, U.: klassik.com Mediadaten. Köln, 2005
http://file.onvista.de/?FID=2067
[Nielsen02]
Nielsen, J.: Top Ten Guidelines for Homepage Design. 2002
http://www.useit.com/alertbox/20020512.html
[PaHu02]
Park, J.; Hunting, S.: XML Topic Maps: Creating and Using Topic Maps for
the Web. Amsterdam: Addison-Wesley, 2002
[RaCh06]
Radtke, A.; Charlier, M.: Barrierefreies Webdesign. München, AddisonWesley, 2006
[Rob06]
Robbins, J.: Web design in a nutshell. O’Reilly Media, 2006
[SeHo06]
Seibert, B.; Hoffmann, M.: Professionelles Webdesign mit (X)HTML und CSS.
Galileo Press 2005
[SiOp02]
Sievers, J. C.; Oppermann, L.: Barrieren durchbrechen – „Design For All“ im
Internet. 2002
http://www.grin.com/de/preview/64606.html
[RoMo98]
Rosenfeld, L.; Morville, P.: Information Architecture for the World Wide Web.
O’Reilly Associates, 1998
[Strang06]
Strang, C.: 100 Usability Tips. 2006
http://webdesignblog.de/usability/100-usability-tipps/
[Trenton04]
Seite XII
Trenton, M.: Writing effective link text. 2004
http://evolt.org/article/rdf/4090/60343/index.html
[Vetter06]
Vetter, T.: Einfluss von Farben in der Kommunikation im interkulturellen
Vergleich zwischen Deutschland und Japan. Ludwigshafen, 2006
[WBAR07]
Web-Barometer
http://www.webhits.de/webhits/browser.htm
[WMI06]
Microsoft Support: HTML-Code für die Einbettung von Windows MediaInhalten.
http://support.microsoft.com/kb/285154/de
Anhang
AnhangScreenshot der Startseite von klassik.com
Seite XIII
Anhang
B.
Screenshot einer Detailseite von klassik.com
Seite XIV
Anhang
C.
Screenshot der Startseite von miz.org
Seite XV
Anhang
D.
Seite XVI
Screenshot der Auflistung aller Komponisten von miz.org
Anhang
E.
Screenshot der Startseite von iTunes
Seite XVII
Anhang
F.
Beispiel für Organisationschemata
Seite XVIII
Anhang
G.
Hierarchische Struktur der Inhalte der Projektwebseite
Seite XIX
Anhang
Seite XX
Eidesstattliche Erklärung
Seite XXI
Eidesstattliche Erklärung
Hiermit versichere ich, die vorliegende Arbeit selbständig, ohne fremde Hilfe und ohne
Benutzung anderer als der von mir angegebenen Quellen angefertigt zu haben. Alle aus
fremden Quellen direkt oder indirekt übernommenen Gedanken sind als solche
gekennzeichnet. Die Arbeit wurde noch keiner Prüfungsbehörde in gleicher oder ähnlicher
Form vorgelegt.
Dresden, 10. September 2007
Bastian Hahn

Musik suchen und finden - Professur Mediengestaltung

Transcription

Similar documents

So werden Sie wetter.at

ePages 6 und Suchmaschinen

technische Dokumentation

Lehr- und Lernprogramme für den Mathematikunterricht

LWL · Jüdisches Leben in Europa jenseits der Metropolen · Hilfe

Seminararbeit als PDF - Institut für Informatik

DAS WETTERPORTAL Deutschlands

Fischerprüfung Online - Bayerische Landesanstalt für Landwirtschaft

ePages 5 und Suchmaschinen