……….
Das Interface-Design umfasst die Aufteilung des Bildschirms in verschiedene Bereiche, die Gestaltung dieser Bereiche und die Gestaltung von Bedienelementen. Die grafische Umsetzung eines Portals an der Bildschirmoberfläche wird häufig als „lipstick on the bulldog“ der Informationsarchitektur und den Funktionen eines Angebotes übergestülpt und extern vergeben.
Im Falle des Portals e-teaching.org wurde in der Anfangsphase über das Layout hierarchisch auf Leitungsebene entschieden. Bei der Festlegung des Webdesigns und d
durch externe Dienstleister verschiedene Prototypen erstellt. Ende Dezember 2002 lag ein erster grafischer Entwurf des Portals vor, der bereits zentrale Ideen der späteren Navigation enthält. Die gleichzeitige Präsentation mehrerer Navigationsebenen auf einen Blick und die Verteilung der Haupt- und Submenüs auf den linken und rechten Bildschirmbereich wurden in der späteren Interfacegestaltung beibehalten. Diese Navigationsidee bildete auch die Grundlage für in Präsentationsprogrammen erstellte Prototypen sowie eine erste Umsetzung im Basislayout des Contentmanagementsystems Plone.
Abbildung 43: Entwurf Webdesign Dezember 2002
Abbildung 44: Prototyp auf Basis der Navigationsidee März 2003
Abbildung 45: Umsetzung der Navigation in Plone Juni 2003
Über Klappmenüs im linken Navigationsbereich werden die auf der ersten und zweiten Ebene liegenden Haupt- und Unterrubriken des Portals dargestellt. Weitere Vertiefungen öffnen sich auf der rechten Bildschirmseite. Dort werden die dritte und vierte Navigationsebene abgebildet.
Ein Krümelpfad gibt Hinweise auf die Strukturierung von e-teaching.org und die Einordnung der aktuellen Seite. Ein Krümelpfad (Breadcrumb Trail) ist eine Verortungshilfe, die anzeigt in welcher Navigationstiefe sich der Nutzer aktuell bewegt und erlaubt, per Hyperlink auf höhere Ebenen zu springen. Insbesondere bei einer komplexeren vertikalen Navigation dient ein Pfad der Orientierung.
In der Folge wurden mehrere Entwürfe von unterschiedlichen Designbüros erstellt. Umgesetzt wurde der Designvorschlag vom Juli 2003 (Abb. 9), welcher in Form- und Farbgebung von der Projektleitung als zielgruppenadäquat angesehen wurde.
Abbildung 46: Entwurf Webdesign März 2003
Abbildung 47: Entwurf Webdesign Juli 2003, Umsetzung August bis September 2003
s zeigte sich allerdings, dass das ausgewählte Design bei den Projektbeteiligten auf Arbeitsebene (insbesondere das Redaktionsteam in Tübingen und Technikteam in Bielefeld) nicht genügend Akzeptanz fand. Probleme bestanden hauptsächlich darin, dass der im Druck sehr professionell aussehende Vorschlag in der Umsetzung als Webumgebung Defizite aufwies.
E
So fehlte im Entwurf beispielsweise ein direktes Eingabefeld für die Suchfunktion. Beim Übergang vom Papier auf den Bildschirm werden tradierte typographische Gestaltungsregeln außer Kraft gesetzt, an ihre Stellen treten neue Ausdrucksmöglichkeiten und medienspezifische Beschränkungen.
Nach einer nur sehr kurzen Verwendungsperiode von zwei Monaten wurde bereits im September ein alternativer studentischer Entwurf entwickelt und einen Monat später umgesetzt.
Anders als bei der Zusammenarbeit mit Agenturen ließ sich so die Gestaltung als ein Diskurs realisieren. Die farbliche Gestaltung und die Anordnung der Bedienelemente wurden fortlaufend abgestimmt. So entstand ein Design, das bei der Redaktion Zustimmung fand und eine längere Halbwertszeit aufwies, als alle voran gegangenen Konzepte.
Abbildung 48: Webdesign Oktober 2003 bis Mai 2004
Zentral für das Navigationskonzept von e-teaching.org ist die Farbnavigation, die als on kann die Orientierung des Benutzers unterstützen, indem die Zugehörigkeit von Inhalten zu einem Orientierungshilfe die Übersichtlichkeit des Angebots erhöht. Eine Farbnavigati
Inhaltsbereich durch Farben symbolisiert wird. Farbe kann systematisch eingesetzt werden, um wichtige Konzepte zu betonen oder Unterscheidungen hervorzuheben. Für Farbsysteme gibt es allerdings Grenzen: Sollen zu viele Informationen farbig codiert werden, fällt es schwer, die
Abstufungen zu unterscheiden und die Farben den einzelnen Elementen zuzuordnen (Hooper &
Hannafin, 1991). Ein weiteres Problem ist die Lesbarkeit: Soll eine Farbvarianz hergestellt werden, die ausreicht, um für die Nutzer einen deutlichen Unterschied zwischen den inhaltlichen Rubriken zu visualisieren, ist in aller Regel ein Mix aus hellen und dunklen Farben nötig. Daraus können Probleme für den Kontrast zwischen Schrift und Hintergrund resultieren. Daher wurde nach verschiedenen Nutzerrückmeldungen und auf der Grundlage der Evaluationsergebnisse die Farbgestaltung nochmals angepasst.
Abbildung 49: Webdesign Juni 2004 bis Mai 2008
en, eine verbesserte Lesbarkeit aufgrund Das neue Layout zeichnet sich durch hellere Farb
des stärkeren Hell-Dunkel Kontrasts und harmonische Farbabstufungen aus. Als zusätzliche Orientierungshilfe wurden „Key Visuals“ in die Seiten integriert, die jeweils eine Rubrik des Portals symbolisieren.
Das derart umgestaltete Screendesign wurde bis auf kleinere Details über einen langen Zeitraum beibehalten. Zwar wurden alternativer Entwürfe vorgeschlagen, die eine Abkehr von Farbraster und Navigationskonzept beinhalteten, sie erlangten jedoch nie die für eine
Umsetzung notwendige Akzeptanz in der Redaktion. Im Mai 2008 wurde erneut mit der Entwicklung eines Redesigns begonnen. Anlass war die Überarbeitung der Startseite des Portals. Das Redesign zielte dabei zunächst auf eine aktuelle Anmutung der Einstiegsseite durch Themen-Specials, die aktuelle Trends beleuchten und auf neue wie bereits existierende Artikel zurückgreifen. Zudem sollten die populären Community-Events weiter in den Vordergrund gerückt werden und ebenso wie der hochfrequentierte Notizblog mehr Platz auf der Startseite bekommen.
Abbildung 50: Redesign Juni 2008
Breite auf eine Auflösung von 1024x768 Pixel begrenzt.
keine Unzufriedenheit mit dem Status quo vorangegangen, sondern vielmehr eine gewisse Die neue Gestaltung von e-teaching.org beinhaltet die Abkehr von einer flexiblen Seitenbreite, die den gesamten Bildschirm ausfüllt. Da längere Zeilen das Erfassen des Textes und das Wandern des Auges vom Zeilenende zum Anfang der nächsten Zeile erschweren, wurde die
Im Zuge des Redesigns wurde auch das Menü angepasst. Die Umgestaltung der Navigation wurde eher „en passant“ entschieden. Anders als bei den vorangegangenen Änderungen war
Ermüdung des alten Designs. Die neuen farbigen Buttons im Menü sollten dafür sorgen, dass die Unterteilung der e-teaching Bereiche direkt ins Auge fällt. Farblich wurden die Submenüs den entsprechenden Bereichen angepasst. Dabei gilt: Je tiefer der Navigationspfad ins Portal führt, desto heller wird der Farbton. Die Menüfarben werden zudem in die Navigationselemente im rechten Bildschirmbereich eingearbeitet um deren Auffälligkeit zu erhöhen. Durch den Einsatz von verschiedenen Portlets mit den grauen Balken als Headline soll ein klares und ruhig strukturiertes Design entstehen.