Neues Designkonzept für TYPO3-Webseiten der Universität Wien

von Mag. Dr. Wolfgang Feller (Leiter der DLE Öffentlichkeitsarbeit und Veranstaltungsmanagement) (Ausgabe 08/3, November 2008)

 

Mit dem Launch der neuen Startseite der Universität Wien im Jänner 20081) wurde eine neue und verbesserte Variante des Corporate Webdesign veröffentlicht und der allgemeinen Diskussion "übergeben". Die Reaktionen auf dieses neue visuelle Erscheinungsbild der Universität waren durchwegs positiv, von vielen Seiten erhielten wir spontane Gratulationen. Dabei mag eine Rolle gespielt haben, dass das neue Informationsdesign zuvor bereits in einer dreimonatigen Evaluationsphase mit den CD-Verantwortlichen der Fakultäten und Dienstleistungseinrichtungen getestet, evaluiert und weiterentwickelt worden war.

Der "Fluch" des Erfolgs

Das Design der neuen Startseite ist in vielen Dingen eine Weiterentwicklung des bestehenden "Standarddesigns" für TYPO3-Webseiten der Universität, in einigen Bereichen wurden jedoch auch neue Lösungen gewählt. Insbesondere die Verbreiterung der linken Navigationsspalte, die Verlagerung wichtiger Funktionsflächen in eine Toolbox auf der rechten Seite und die Einführung von Quicklinks stellen wesentliche Verbesserungen dar. Sie weckten den Wunsch nach Übertragung des neuen Designs auf alle übrigen TYPO3-Webseiten - inzwischen über 170 an der Zahl. Unmittelbar nach dem Launch der neuen Startseite kündigte das TYPO3-Team (ZID und Öffentlichkeitsarbeit) daher ein Upgrade des Standarddesigns für den Sommer an.

Lernprozesse

Allerdings ergaben vorbereitende Gesprächen mit Web-Verantwortlichen aus Instituten und Dekanaten, dass eine bloße Adaption des "alten" Designs ohne Verbreiterung der Variationsmöglichkeiten den Bedürfnissen nicht gerecht werden würde. Zwar erfüllt das Standarddesign den Anspruch eines einheitlichen, wiedererkennbaren Auftritts für alle Internetseiten der Universität Wien - die Individualität und damit auch Unterscheidbarkeit der Seiten sowie die Anpassung des Layouts bzw. einzelner Funktionen an die unterschiedlichen Bedürfnisse der Organisationseinheiten wurden dabei jedoch zu sehr vernachlässigt. Weiters kritisierten viele Institute, dass die Kennzeichnung des Instituts in der schmalen horizontalen Spalte unter dem Header zu unscheinbar sei.

Vom Upgrade zum Designkonzept

Es galt also, einerseits die Vielfalt und Individualität der universitären Einheiten stärker sichtbar werden zu lassen, andererseits aber auch durch ein systematisches Konzept die unterschiedlichen Ebenen der Universität abzubilden, um so eine leichtere Orientierung für externe User/-innen zu ermöglichen. Das alles freilich, ohne die Einheitlichkeit des bestehenden Erscheinungsbildes zu gefährden.

Als erster Schritt wurde über eine Best-Practice-Studie erhoben, welche Lösungen für universitäre Webdesigns (insbesondere im europäischen Raum) derzeit gewählt werden, und ob sich diesbezüglich bestimmte "Konventionen" oder Standards herausgebildet haben. Zweitens wurde ein präzises Briefing erarbeitet und eine externe Webagentur (die Firma Datenkraft) mit der Erarbeitung einer Designstudie für den Webauftritt von Fakultäten, Instituten, Dienstleistungseinrichtungen und weiteren universitären Einheiten beauftragt. Das Ergebnis dieser Studie, d.h. die vorgeschlagenen Layoutvarianten, wurde im Rahmen eines internen Workshops besprochen und von der Agentur nochmals überarbeitet.

Schließlich wurde das Konzept mit Vertreter/-innen jener Fakultäten besprochen, die derzeit im Aufbau einer neuen Website sind oder in Betracht ziehen, TYPO3-Services und damit auch das entsprechende Design für den Fakultäts-Webauftritt heranzuziehen (Anmerkung: Zum Zeitpunkt der Abfassung des Artikels sind die Entscheidungsprozesse an einigen Fakultäten bezüglich einer möglichen Übernahme der Designvorschläge noch im Gange.

 

 

Das TYPO3-Service an der Universität Wien

von Raman Ganguly & André Seirafi

Das TYPO3-Service bietet allen (Organisations-)Einheiten der Universität Wien einen einfachen Weg zu ihrem Webauftritt an. In Zusammenarbeit der Dienstleistungseinrichtungen Öffentlichkeitsarbeit und Veranstaltungsmanagement und Zentraler Informatikdienst wird das Open-Source-Content-Management-System (CMS) TYPO3 zur Verfügung gestellt. Wie bei allen CMS, wird auch bei TYPO3 zwischen Inhalt und Layout getrennt. So ist es möglich, ein einheitliches ansprechendes Design für den Webauftritt der verschiedenen Einrichtungen der Universität Wien zu gestalten.

Das CMS wird technisch vom Zentralen Informatikdienst betreut, der alle notwendigen Mittel für die Erreichbarkeit und Wartung der Webseiten bereit stellt. Für technischen Fragen und Problem bei der Bearbeitung der TYPO3-Seiten bietet der Helpdesk des ZID Hilfestellungen per E-Mail (cms.zid@univie.ac.at) und Telefon (+43-1-4277-140 60) an. Für die Weiterentwicklung und Anpassung des Corporate Webdesign ist die Öffentlichkeitsarbeit verantwortlich. Alle TYPO3-Seiten, die über das zentrale Service beantragt werden, werden in einer zentralen TYPO3-Instanz verwaltet, was den Redakteuren/-innen, die mehrere Seiten betreuen, immer einen gesamten Überblick bietet. Dies macht es auch möglich, Informationen an mehreren Stellen bzw. auf mehreren Webseiten darzustellen, ohne die Information mehrfach ändern zu müssen. So können z.B. auf Seiten der Fakultäten und der Institute die selben Aktuellmeldungen angezeigt werden.

Das TYPO3-System passt sich den Bedürfnissen der Redakteure/-innen an. Die Instanz wird stetig erweitert, um den Wünschen der Redakteure/-innen entsprechen zu können. Die Funktionen werden im Rahmen von Schulungen vermittelt. Als Einstieg besteht die TYPO3-Basisschulung, in der alle grundlegenden Fähigkeiten vermittelt werden, die eine Redakteurin oder ein Redakteur zum Aufbau einer eigenen Webseite benötigt. Als Ergänzung werden sogenannte Extension-Kurse angeboten, die erweiterte Funktionalitäten des TYPO3-Systems aufgreifen, wie z.B. News, passwortgeschützte Seiten, FAQs, Foren usw. Nähere Informationen dazu finden Sie auf der Seite der Personalentwicklung http://public.univie.ac.at/index.php?id=13095 unter Allgemeine Weiterbildungangebote - EDV-Kurse.

 

 

Mehrstufiges Design - flache Hierarchien

Wie bereits erwähnt, bildet das Layout der Startseite der Universität Wien den Rahmen für die überarbeiteten TYPO3-Seiten, wobei einige Gestaltungselemente über die verschiedenen Ebenen (Startseite der Universität Wien, Fakultäten, Institute, Abteilungen, Dienstleistungseinrichtungen etc.) leicht abgeändert werden.

Das Grundgerüst ist für alle Ebenen gleich und besteht aus einem dreispaltigen Seitenaufbau (Hauptnavigation links, Contentbereich mittig und Zusatzspalte rechts) sowie einem Header mit dem Logo der Universität (siehe Abb. 2). Alle Seiten verfügen über eine feste Breite von 1024 Pixel mit zentriertem Inhalt. Das bedeutet, dass im Browserfenster die angezeigte Seite immer in der Mitte platziert wird.

Abb. 2: Der Header mit dem Logo der Universität gehört zum Grundgerüst aller TYPO3-Seiten

 

Die wichtigste Grundentscheidung des vorliegenden Konzepts besteht darin, dass auf eine symbolische Abbildung der institutionellen Hierarchie der Universität vollständig verzichtet wird. Fakultäten, Institute, Departments oder Abteilungen ebenso wie Dienstleistungseinrichtungen und Referate erhalten die gleichen Möglichkeiten einer starken optischen Präsenz im blauen Header sowie einer individuellen Darstellung über eine signifikante, bildorientierte Homepage (= die erste Seite einer Webseite). Die optische Kennzeichnung der organisatorischen Ebene erfolgt über die farbliche Abstufung der linken Navigationsleiste - dezent aber eindeutig erkennbar. Zusätzlich wird die institutionelle Ebene und Zugehörigkeit durch einen verpflichtenden "Organisationspfad" im oder unterhalb des horizontalen Balkens dargestellt.

Abb. 3: Balken-Organisationspfad

 

Der Header

Der Header beinhaltet als fixen Bestandteil das Logo der Universität am rechten Rand; standardmäßig ist zudem das Siegel (genauer gesagt: ein Bestandteil des Siegels) der Universität Wien am linken Rand vorgesehen. Während im bisherigen System eine Hervorhebung der Organisationseinheiten durch das exklusive Recht auf Schriftzug oder Logo im Kopfbereich angedacht war, ist das im neuen Designkonzept nicht mehr vorgesehen: Fakultäten, Institute, Departments, Dienstleistungseinrichtungen oder Abteilungen können ihren Schriftzug oder ihr Logo am linken Rand des Headers platzieren. Voraussetzung ist lediglich die Einhaltung einer bestimmten Größe, die sich aus der Höhe des Schriftzuges "Universität Wien" ableitet sowie die Darstellung in Weiß. Färbige Logos oder Schriftzüge sind in diesem Bereich nicht zugelassen. Das Siegel bleibt erhalten, wird jedoch etwas abgedunkelt, um die Lesbarkeit des Logos zu verbessern.

Abb. 4: Header

 

Der Balken unterhalb des Headers

Der horizontale Balken unterhalb des Logo-Bereichs erhält eine neue Funktion: Er ist für die Angabe des "Organisationspfades" vorgesehen. Je nach organisatorischer Zuordnung werden hier die übergeordneten Organisationseinheiten in Form eines klickbaren Pfades eingetragen. Damit ist die institutionelle Zugehörigkeit und Ebene innerhalb des Organisationsplans der Universität Wien nachvollziehbar dargestellt (s. Abb. 3). Wird der horizontale Balken für eine - optional zu integrierende - Navigation verwendet, erfolgt die Pfadangabe im Weißraum darunter. Die Farbe des Balkens ist bei wissenschaftlichen Einrichtungen dunkelblau, bei Webseiten aus dem Verwaltungsbereich mittelgrau.

Abb. 5: Horizontalnavigation

 

Die Hauptnavigation (linke Spalte)

Die Hauptnavigation im linken Bereich wurde auf 200 Pixel verbreitert, wodurch eine größere und besser lesbare Schrift eingesetzt werden kann. Mittels der farblichen Abstufung der vertikalen Navigationsspalte werden die Webseiten von Fakultäten, Instituten und Abteilungen optisch voneinander unterschieden. Fakultäts-Webseiten erhalten ein dunkles Blau, Institute oder Departments ein helles Blau und Abteilungen oder Projekte im wissenschaftlichen Bereich ein helles Grau. Dienstleistungseinrichtungen bzw. Abteilungen oder Referate oder sonstige Serviceseiten im Bereich der Verwaltung führen den derzeitigen Grauton der Startseite der Universität in der linken Navigation weiter.

Abb. 6: Navigation für Fakultäten in dunklem Blau (links), für Institute und Departments in hellem Blau (mittig) und für Abteilungen und Projekte im wissenschaftlichen Bereich in hellem Grau (rechts).

 

Die rechte Spalte

Die Gestaltung der rechen Spalte orientiert sich an den positiven Erfahrungen mit der neuen Startseite der Universität Wien. Im obersten Bereich findet sich eine grafisch überarbeitet Funktionsbox mit den Elementen Suche (die sich jeweils auf die Webseite bezieht), Verstellung der Schriftgröße und Sprachwahl - letztere natürlich nur, wenn eine Zwei- oder Mehrsprachigkeit gegeben ist. Darunter ist die ebenfalls grafisch überarbeitete Box mit den Quicklinks angeordnet. Darin sind die ersten drei, nämlich die Personensuche, der Bibliothekskatalog und das Vorlesungsverzeichnis, für wissenschaftliche Organisationseinheiten obligatorisch vorgesehen, weitere Quicklinks können von jeder (Organisations-)Einheit nach den Bedürfnissen ihrer Nutzer/-innen selbständig eingegeben werden.

Den Abschluss der rechten Spalte bildet eine Adressbox mit den Angaben des Standorts (oder eines der Standorte) der Einheit und bietet die Möglichkeit weiterer serviceorientierter Links, z.B. Zufahrtspläne, Lagepläne oder Gebäudepläne.

Abb. 7: Funktionsbox mit den Elementen Suche, Schriftgröße und Sprachwahl (links); Abb. 8: Quicklinks (rechts); Abb. 9: Adressbox (Mitte)

 

Der mittlere Content-Bereich

Der Einstiegsseite, also der Homepage einer Webseite, kommt eine wichtige Funktion für den Imagetransport der betreffenden Einrichtung zu. Übersichtlichkeit, klare Zuordnung von Funktionsbereichen, signifikante und "schöne" Bilder oder Grafiken und nicht zuletzt ein stimmiges Gesamtbild prägen den intuitiven Ersteindruck.

Im Rahmen der Erarbeitung des neuen Designkonzepts wurden für Fakultäten und Institute neue Designs für die Einstiegsseite entwickelt, in denen eine ansprechende Gliederung der wichtigsten Elemente vorgeschlagen wird. Ausgangspunkt ist die Positionierung von zwei prägnanten Bildern, in denen zentrale visuelle "Botschaften" der Einheit transportiert werden. Daran anschließend folgt eine Begrüßung sowie ein kurzer Text über die jeweilige (Organisations-)Einheit. Eine mit Bildern aufgelockerte Spalte für News und eine Spalte für den Veranstaltungskalender ergänzen die Einstiegsseite und bieten Links zu weiterführenden Informationen.

Gesamteindruck des neuen Designs für TYPO3-Webseiten der Universität Wien

 

Pflicht und Kür

Der Aufbau der TYPO3-Webservices hatte von Anfang an zwei Ziele: Das Angebot eines modernen und leicht zu bedienenden Content-Management-Systems sollte gleichzeitig zur Implementierung eines einheitlichen Corporate Designs auf der Ebene der Webseiten führen. Durch die hohe Akzeptanz von TYPO3 wurde in dieser Hinsicht in den letzten Jahren bereits vieles an Einheitlichkeit erreicht und soll auch weiterhin erhalten bleiben. Im neuen Designkonzept wird jedoch eine abgestufte Verbindlichkeit des Erscheinungsbildes vorgeschlagen: Für Organisationseinheiten (also Fakultäten und Dienstleistungseinrichtungen), denen eine starke Imagefunktion für die Universität Wien zukommt, gelten präzisere Gestaltungsrichtlinien als für Institute, Abteilungen oder Referate. Für erstere ist neben dem einheitlichen Header und der linken Spalte die Verwendung der rechten Spalte in der vorgegebenen Anordnung obligatorisch; die Übernahme des Designs für den Content-Bereich der Einstiegsseite wird dringend empfohlen (kleine Anpassungen sind selbstverständlich möglich, die Öffentlichkeitsarbeit ersucht aber um Abstimmung).

Für die Webseiten von Instituten, Abteilungen oder Referaten sind lediglich Header und linke Navigationsspalte im vorgegebenen Design verbindlich, ob die rechte Spalte mit Funktionsbox und Quicklinks übernommen wird, steht zur Auswahl. Die Öffentlichkeitsarbeit empfiehlt zwar die Übernahme des vorgeschlagenen Gesamtdesigns, es lässt sich aber auch der mittlere Bereich und die rechte Spalte zu einem einheitlichen Content-Bereich zusammenfassen.

 

 

Roadmap für die nächsten Monate

Die nächsten Schritte bestehen aus der Umsetzung und Anwendung des neu erstellten Webdesign. Es handelt sich einseits um die Neugestaltung von Fakultätsseiten und andererseits um die flächendeckende Umstellung aller schon bestehenden Institutsseiten. Alle im zentralen TYPO3-System bestehenden Seiten werden die Mög­lichkeit haben, auf das neue Layout umzustellen. Der Inhalt und die Struktur der Seiten werden problemlos in das neue Design integrierbar sein. Bei der Erstellung des neuen Layouts wurde großer Wert auf weitgehende Kompatibilität gelegt, sodass kein zusätzlicher Eingriff der TYPO3-Redakteure/-innen dafür nötig sein wird.

Die Umstellung wird im November dieses Jahres beginnen und soll bis Frühjahr nächsten Jahres abgeschlossen sein.

 

Einzelne Schritte der Umstellung

1. Präsentation des neuen Webdesigns

Im Rahmen einer Präsentation im November soll das neue Webdesign detailliert vorgestellt werden. Diese Präsentation richtet sich an alle verantwortlichen Redakteure/-innen, die eine Seite im zentralen TYPO3-System betreiben.

2. Möglichkeit einer Vorschau

Um einen Eindruck zu bekommen, wie sich das neue Webdesign auf die schon bestehenden Seiten auswirkt, wird es vor dem eigentlichen Umstieg die Möglichkeit einer Vorschau der jeweiligen Seiten geben. Dafür wird ein eigenes Testsystem eingerichtet, auf das alle TYPO3-Redakteure/-innen zwecks dieser Vorschau zugreifen können und in dem bereits Änderungen oder An­passungen vorgenommen werden können.

3. Umstellung

Die Umstellung selbst wird in drei Phasen organisiert, um den Arbeitsaufwand für den Zentralen Informatik­dienst bewältigen zu können. Die Absprache der Reihenfolge wird gemeinsam mit der Öffentlichkeitsarbeit und dem ZID erfolgen. Der Umstellungvorgang selbst sollte dann für jede Webseite nur wenige Minunten in Anspruch nehmen.

 

1) siehe Artikel Was dahinter steckt: Technisches zur neuen Startseite der Universität Wien (http://comment.univie.ac.at/08-1/16b/)