Vorschlag für eine einheitliche Gestaltung der Fachportale. Daniel Hienert & Maximilian Stempfhuber

Transkript

1 Vorschlag für eine einheitliche Gestaltung der Fachportale

2 Übersicht Informationsarchitektur und Referenzmodell Designkonzept Corporate Design Web Styleguide Technische Umsetzung des Musterportals

3 Informationsarchitektur Ist-Zustand der Fachportale Heterogene Angebotsstruktur Heterogene Sichten auf die Informationsangebote Heterogene Oberflächengestaltung Modul Wie viele Fachportale (in %) bieten das Modul an bzw. planen es? Fachinformationsführer 96 % Bibliothekskataloge 91 % Fachdatenbanken 91 % Zeitschriftenaufsatz-Datenbanken 83 % Sicht auf das Informationsangebot Anzahl der Fachportale nach Informationstyp 27 funktional 11 fachlich 1 fachlich UND nach Informationstyp 1 Volltextserver 81 % Neuerwerbungslisten 76 % Zeitschriften-Datenbanken 57 % Positionierung der Hauptnavigation Anzahl der Fachportale Online-Tutorials 48 % Expertendatenbanken 48 % Veranstaltungskalender 35 % Jobangebote 16 % Online-Pressearchive 15 % Digitale Handbücher/Lexika 7 % Bibliometrie/Zitationsanalyse 4 % vertikal links 21 horizontal oben 8 vertikal links + horizontal oben 1 im Hauptbereich auf der Startseite 7

4 Informationsarchitektur im Kontext der Fachportale Informationsarchitektur ist die strukturelle Gestaltung der Fachportale in Bezug auf Organisation/Strukturierung der Information Benennung (Labeling) Suche Navigation Erweiterung der Definition um die Ausrichtung auf die softwareergonomische Gestaltung

5 Informationsarchitektur im Kontext der Fachportale Die softwareergonomische Umsetzung der Informationsarchitektur in den Fachportalen ist der Produktkatalog. Das Ziel ist die Trennung von Menüpunkten und Informationsangeboten. Der Einsatz richtet sich nach der Anzahl der Angebote.

6 Informationsarchitektur im Kontext der Fachportale Kriterien zur Modell- und Gruppenbildung der Informationsangebote in den Fachportalen: Datenbanken Publikationen Kommunikation Service primäre Interaktion Suchen Blättern Feedback/Austausch Anfragen Informationsbedürfnis thematisch formal thematisch oder formal thematisch oder formal Zielgruppe(n) alle alle alle alle Kommunikationsart formell wiss. formell wiss. informell wiss. informell wiss. Qualitätskontrolle ja ja nein ja Informationsart Metadaten und Volltexte Inhaltsverzeichnisse und Texte Thema, Zeit, [Ort] Anfrage/ Angebot Aktivitäten vs. Ergebnisse Forschungsaktivitäten und ergebnisse Forschungsergebnisse # # Struktur Informationen zur Struktur des Faches # # #

7 Informationsarchitektur Informationsangebote in den Fachportalen

8 Informationsarchitektur Produktkatalog Der Produktkatalog ist ein gängiges Beispiel für die Umsetzung von Hierarchien im Web bekannt vor allem aus dem E-Commerce-Bereich Umsetzung einer Facettenklassifikation/-browsing Die Umsetzung der Informationsarchitektur auf softwareergonomischer Ebene Positive Evaluierung des Produktkatalogs durch Benutzertests

9 ReferenzmodelI Der Produktkatalog innerhalb der Website-Struktur Website-Navigation User Interface Startseite Suche Produkte Themen Hilfe Informationsarchitektur Produktkatalog Modulgruppe Informationstyp alphabetisch Datenbanken Publikationen Kommunikation Service A B C... Digitalisate Digitalisate Mailingliste / Forum Expertenauskunft Aufsatzdatenbank Aufsatzdatenbank Bibliothekskatalog Fachdatenbank (Volltextserver) Veranstaltungskalender Recherche Bibliothekskatalog Fach-OPAC Digitales Handbuch / Lexikon Weblog Neuerwerbungslisten Digitalisate Fachdatenbank Volltextserver Fachzeitschriften Newsletter Fach-OPAC Fachzeitschriften Themenportale RSS-Feed... Fachinformationsführer Tutorial Personen- und Institutionendatenbank Forschungsprojekte

10 Designkonzept Das Designkonzept entwirft ein Rahmendesign für die Virtuellen Fachbibliotheken Der Schwerpunkt liegt auf leichter und schneller Anpassbarkeit an das jeweilige Fachportal Angepasst auf die Bedürfnisse der Fachportale Integration bestehender Komponenten aus den Fachportalen Alternative Varianten in allen Bereichen für die Anpassbarkeit Erhalt der Individualität und Auszeichnung als Virtuelle Fachbibliothek

11 Designkonzept Das Designkonzept besteht aus fünf Modulen Grundkonzept für den gesamten Portalauftritt und die Startseite Grundkonzept für die Suche Grundkonzept für die Anzeige von redaktionellen Inhalten Grundkonzept für das Blättern in Inhaltsverzeichnissen und im Produktkatalog Button & Icon-Set

12 Designkonzept

13 Designkonzept Grundkonzept für den gesamten Portalauftritt und die Startseite Entwurf eines konsistenten Gestaltungsrasters mit zwei- oder dreispaltigen Alternativen Entwicklung des Designs für Statuszeile, Kopfbereich, Navigation, Inhaltsbereich und Fußzeile Module für die Startseite Universelles Farbkonzept

14 Designkonzept Grundkonzept für den gesamten Portalauftritt und die Startseite Aufteilung des Gestaltungsrasters in Statuszeile Kopfbereich mit Fachportal- und gemeinsamen VIFA-Logo Horizontale Navigation in ein oder zwei Ebenen zwei- oder dreispaltiger Inhaltsbereich Fußzeile

15 Designkonzept Grundkonzept für den gesamten Portalauftritt und die Startseite Statuszeile Die Statuszeile enthält Breadcrumbs, Icons für das Verändern der Schriftgröße und Icons für die Spracheinstellung

16 Designkonzept Grundkonzept für den gesamten Portalauftritt und die Startseite Kopfbereich mit Fachportal- und gemeinsamen VIFA-Logo Auf der Basis der entwickelten VIFA-Wortmarke wurde ein Designelement entwickelt, welches das Fachportal als Virtuelle Fachbibliothek identifiziert. Das VIFA-Designelement wird rechts im Kopfbereich platziert, auf der linken Seite findet sich das Logo des jeweiligen Fachportals, im Hintergrund werden Bildelemente aus dem Fachportal aufgenommen.

17 Designkonzept Grundkonzept für den gesamten Portalauftritt und die Startseite Horizontale Navigation in ein oder zwei Ebenen Organisation in ein oder zwei Ebenen Menüpunkte auf Höhe der Inhaltsspalte Seitenübergreifende Menüpunkte auf der rechte Seite Integration einer Suchbox für das Durchsuchen der Website

18 Designkonzept Grundkonzept für den gesamten Portalauftritt und die Startseite Vertikale Navigation Aufklappbarer Baum Menüzustände sind barrierefrei mit Plus, Minus und Punkt gekennzeichnet Ebenen rücken ein

19 Designkonzept Grundkonzept für den gesamten Portalauftritt und die Startseite Zwei- oder dreispaltiger Inhaltsbereich Aufteilung des Inhaltsbereichs in zwei oder drei Spalten Für die zweispaltige Lösung existieren Alternativen für die Positionierung der zweiten Spalte links oder rechts

20 Designkonzept Grundkonzept für den gesamten Portalauftritt und die Startseite Fußzeile Fußzeile mit den Förderer und Partner-Logos

21 Designkonzept Grundkonzept für den gesamten Portalauftritt und die Startseite Entwicklung mehrerer Module für die Startseite Kurzpräsentation der Fachbibliothek die Suchzeile die Kurzpräsentation von Themen die Anzeige von aktuellen Nachrichten Präsentation der Inhalte des Fachportals

22 Designkonzept Grundkonzept für den gesamten Portalauftritt und die Startseite Entwicklung mehrerer Module für die Startseite Kurzpräsentation der Fachbibliothek

23 Designkonzept Grundkonzept für den gesamten Portalauftritt und die Startseite Entwicklung mehrerer Module für die Startseite die Suchzeile

24 Designkonzept Grundkonzept für den gesamten Portalauftritt und die Startseite Entwicklung mehrerer Module für die Startseite die Kurzpräsentation von Themen

25 Designkonzept Grundkonzept für den gesamten Portalauftritt und die Startseite Entwicklung mehrerer Module für die Startseite die Anzeige von aktuellen Nachrichten

26 Designkonzept Grundkonzept für den gesamten Portalauftritt und die Startseite Entwicklung mehrerer Module für die Startseite Präsentation der Inhalte des Fachportals

27 Designkonzept Grundkonzept für den gesamten Portalauftritt und die Startseite Universelles Farbkonzept Farbgebung bleibt weitgehend offen Die Verwendung von Farbe wird auf maximal drei Farben mit Abstufungen beschränkt Die Hauptfarbe wird für Hintergründe und nicht interaktive Elemente wie Trennlinien usw. benutzt. Die Zweitfarbe bezeichnet dagegen interaktive Elemente wie Linkauszeichnung, Buttons usw. Die Schmuckfarbe wird zum Abrunden des Gesamtbildes eingesetzt. Sie kann auch wahlweise weggelassen werden. Je konkreter der Inhalt, desto stärker der Kontrast Hauptnavigation in Auszeichnungsfarbe Zwischennavigation auf hellem Grund Inhalte auf weißem Grund

28 Designkonzept Grundkonzept für den gesamten Portalauftritt und die Startseite Universelles Farbkonzept Alternative Farbschemen

29 Designkonzept Grundkonzept für den gesamten Portalauftritt und die Startseite vifanord Startseite

30 Designkonzept Grundkonzept für den gesamten Portalauftritt und die Startseite vifanord Erweiterte Suche

31 Designkonzept Grundkonzept für den gesamten Portalauftritt und die Startseite vifabio Startseite

32 Designkonzept Grundkonzept für den gesamten Portalauftritt und die Startseite vifabio Erweiterte Suche

33 Designkonzept Grundkonzept für den gesamten Portalauftritt und die Startseite Universelles Farbkonzept Startseite des Musterportals

34 Designkonzept Grundkonzept für die Suche Einfache und erweiterte Suchmasken Trefferlisten und Vollanzeige

35 Designkonzept Grundkonzept für die Suche Einfache Suchmaske

36 Designkonzept Grundkonzept für die Suche Erweiterte Suchmaske

37 Designkonzept Grundkonzept für die Suche Trefferliste

38 Designkonzept Grundkonzept für die Suche Vollanzeige

39 Designkonzept Grundkonzept für die Anzeige von redaktionellen Inhalten Konzept für die Anzeige von redaktionellen Inhalten, die Kombination von Text, Grafik und Bild Aufteilung in Einspaltige Variante Zweispaltige Variante mit drei Alternativen

40 Designkonzept Grundkonzept für die Anzeige von redaktionellen Inhalten Einspaltige Variante Für die komplette Spaltenbreite Bild mit maximaler Breite von 555 Pixeln

41 Designkonzept Grundkonzept für die Anzeige von redaktionellen Inhalten Zweispaltige Variante Drei Alternativen, mit den Aufteilungen von Bild zu Text 25% zu 75% wobei die maximale Bildbreite 128 Pixel beträgt. 33% zu 66% wobei die maximale Bildbreite 174 Pixel beträgt. 38% zu 62% wobei die maximale Bildbreite 201 Pixel beträgt.

42 Designkonzept Grundkonzept für das Blättern in Inhaltsverzeichnissen und im Produktkatalog Zur einheitlichen Strukturierung der Module der Fachportale und zur Verbesserung der Zugänglichkeit für die Nutzerinnen und Nutzer wurde im Rahmen einer allgemeinen Informationsarchitektur das Konzept für einen Produktkatalog entwickelt Der Produktkatalog fungiert als zentrales Verzeichnis, dessen Inhalt die Nutzer abhängig von ihrem Informationsbedürfnis aus verschiedenen Blickwinkeln betrachten und durchsuchen können und direkt zu dem jeweiligen Modul verweist. In der linken Spalte der Seite befindet sich das Auswahlmenü. Hier können die Informationsangebote nach Modulgruppe, Informationstyp oder alphabetisch sortiert werden. Direkt darunter erfolgt dann die Anzeige der Kategorien und der Trefferanzahl.

43 Designkonzept Grundkonzept für das Blättern in Inhaltsverzeichnissen und im Produktkatalog

44 Designkonzept Button & Icon-Set Gemeinsame Sammlung von Icons und Buttons, die farblich schnell auf das jeweilige Fachportal anpassbar sind

45 Corporate Design Styleguide Der Styleguide enthält neben der Informationsarchitektur zunächst einmal Gestaltungsvorschriften für einzelne Designelemente wie sie auch in anderen Styleguides für Websites zu finden sind. Dazu gehören Layout, Navigation, Bilder, Typographie, Logo, Farbwelt und Symbole/ Icons. Darüber hinaus mussten im Kontext der Fachportale weitere Grundelemente wie einfache und erweiterte Suchmaske, Trefferliste, Vollanzeige, Produktkatalog und Inhaltsverzeichnis und die Module der Startseite detailliert beschrieben werden. Aufbauend auf die Grundelemente wurden dann Beispielseiten für den gesamten Portalauftritt, die Startseite, die Suche, die Anzeige von redaktionellen Inhalten und das Blättern in Inhaltsverzeichnissen und im Produktkatalog zusammengesetzt.

46 Technische Umsetzung des Musterportals Umsetzung der Musterportals mit dem Content- Management-System Typo3 mit CSS-Framework YAML oder (X)HTML/YAML-Vorlagen Vorteile Typo3: Trennung von Design und Inhalten Mustervorlagen Integrierbare Erweiterungen wie Nachrichten, RSS-Feed, Sitemap, Suche usw. Vorteile YAML: Barrierearm Erscheinungsbild browserübergreifend einheitlich Ausrichtung auf flexible Größenangaben -> Schriftgröße kann vom Nutzer verändert werden

47 Schritte zur Umsetzung Typo3/YAML 4. Schriftfarben usw. in CSS Dateien anpassen 5. Design mit Inhalten füllen und mit dahinterliegender Technik verbinden 1. Farbschema auswählen 2. Photoshop- Dateien anpassen 3. Logo + Hintergrundgrafik entwickeln oder anpassen (X)HTML/YAML 4. Schriftfarben usw. in CSS Dateien anpassen 5. Design mit Inhalten füllen und mit dahinterliegender Technik verbinden

48 Flyer Für die Präsentation von neuen Virtuellen Fachbibliotheken oder neuen Funktionen im Fachportal wurde ein Flyer für den Druck oder die Versendung online entwickelt.

49 Zusammenfassung Vorschlag für eine einheitliche Gestaltung der Fachportale Materialien: Musterportal und Corporate Design Web Styleguide Umsetzung für Content-Management-System Typo3 und Webframework YAML Leicht integrierbar und anpassbar durch Mustervorlagen und universelles Farbkonzept Lösungskonzepte für Informationsarchitektur, Design, Suche, Informationsangebote und Produktkatalog

50 Kontakt Dr. Maximilian Stempfhuber Daniel Hienert Name und Kontaktdaten in Folienmaster einfügen