COW Style

Aus THM-Wiki
Wechseln zu: Navigation, Suche

Vorwort

Der COW - Style (Collaborative Online Workplace) basiert auf dem FH YAML – Style und wurde von Klaus Jerwan, Ulrike Vater und Holger Zimmermann (K, U, und H) im Rahmen des Kurses „Web-Technologien“ im Wintersemester 2008/2009 erstellt. Unser Ziel war es einen innovativen, projektorientierten und trotzdem trendy Style zu entwickeln. Wir sind gespannt auf Euer Urteil, ob uns das gelungen ist.

An dieser Stelle möchten wir uns außerdem bei all denen bedanken, auf dessen Vorarbeiten wir aufbauen konnten. Besonders bedanken möchten wir uns bei Dirk Jesse für die hervorragende Grundlagenarbeit (YAML), sowie bei den Machern des FH YAML Styles. Nicht zu vergessen, die unzähligen Komilitonen die alle dazu beigetragen haben eStudy aufzubauen. Es ist doch immer wieder schön, nicht ganz bei Null anfangen zu müssen.

Screenshot gross.png

Keine Lust zu lesen? Hier ist der Film zum Style

Ein kurzer Einführungsfilm stellt die wesentlichen Vorzüge des COW Styles vor. Der Film zum Style ist auch über das Video - Icon im globalen Kopfbereich erreichbar.

Strukturelle Veränderungen

Orientierung erleichtern durch eine klare Gliederung

Unser primäres Ziel war es, die Orientierung für den Anwender zu erleichtern. Dazu gliedert unser Style die Arbeitsoberfläche in drei logische Bereiche:

  1. Global, bestehend aus dem Kopf- und Fußbereich. Hier sind globale Funktionalitäten wie z.B. die übergreifende Suchfunktion, die Kursauswahl, der Link ins Foyer, der Logout und andere allgemeine Menüpunkte zu finden.
  2. Lokal, bestehend aus der linken Navigationsleiste und dem mittleren Contentbereich. In diesem Bereich finden sich alle Funktionen die in direktem Zusammenhang mit dem ausgewählten Kurs stehen.
  3. Servicebereich. Dieser umfasst die Navigation auf der rechten Seite. Dort finden sich Menüpunkte für persönliche Voreinstellungen, der Zugriff auf die eigenen Nachrichten, eine Liste, wer gerade online ist und eine Newsliste.

Konkrete Änderungen im globalen Bereich

  • Die Suche ist vom lokalen Navigationsbereich in den rechten Kopfbereich verschoben worden.
  • Die Kursauswahl, die dort vorher positioniert war, ist in den linken Teil des Kopfbereichs gesetzt worden. Dadurch wird ein direkter Bezug zum lokalen Bereich hergestellt.
  • Die statische Navigation ist ganz noch oben und das Logo in den zentralen Kopfbereich verschoben worden.
  • Stärkere Hervorhebung von „Abmelden“ und „Eingeloggt als“, indem hier die einheitliche Hintergrundfarbe verwendet wird.

Globaler Bereich.png

Konkrete Änderungen im lokalen Bereich

  • Der gesamte lokale Bereich hebt sich mit einer anderen Hintergrundfarbe vom restlichen Hintergrund ab.
  • Die Menüicons sind verändert worden, damit diese sich besser in das Gesamtbild integrieren.
  • Die 2. Ebene der Menüs wird nun nicht mehr redundant im Navigationsbereich angezeigt, sondern nur noch oberhalb des Inhaltsbereichs.
  • Ausblendung der „Neolog-Uhr“, da diese keinen erkennbaren Mehrwert lieferte, bisher nicht von allen als solche wahrgenommen wurde, und außerdem als störend betrachtet wurde (Umfrage).

Contentbereich.png

Änderungen am Design

Unaufdringliche, freundliche Farben

eStudy ist ein Werkzeug. Und damit sollte nicht eStudy an sich, sondern die Aufgaben die man damit erledigen möchte im Vordergrund stehen. Wir möchten so wenig wie möglich von der Arbeit ablenken. Direkt ins Auge fallen unmittelbar die Farbänderungen. Wir haben uns auf die Farben Blau, Grau, Schwarz und Weiß beschränkt. Diese Farben werden in verschiedenen Nuancen eingesetzt.

Wir haben uns für diese Farben entschieden, weil Blau mit Autorität und Vertrauen, Grau mit Neutralität, Eleganz und Sachlichkeit, verknüpft wird.

Der globale Bereich ist durch einen kräftigeren Blauton deutlich abgesetzt, bleibt aber unaufdringlich im Hintergrund. Die Navigationsbereiche links und rechts haben einen einheitlich helleren Blauton. Die Titel der Navigationsbereiche sind als freundlicher Akzent mit einem Farbverlauf hinterlegt. Der aktuell gewählte Kurs ist jeweils sofort erkennbar, denn er wird stark hervorgehoben durch einen sehr dunklen Blauton mit Farbverlauf und weißer Beschriftung. Die übrigen Schriftfarben wurden einheitlich auf schwarz gesetzt, um einen höchstmöglichen Kontrast zu erreichen. Der Hintergrund wird grundsätzlich auf einen sehr hellen Grauton gesetzt.

Ein eher dezentes Design

Zur deutlicheren Abgrenzung wurden einige Elemente mit einem leichten Schatten versehen. Ausgewählte Ecken sind gerundet (nur im Firefox).

Der Fokus der Plattform spiegelt sich auch in dem von uns gewählten Namen, Collaborative Online Workplace, und dem zugehörigen Logo wieder. Die Menschen im Logo symbolisieren die partnerschaftliche Zusammenarbeit, während die Erdkugel im Hintergrund die Unabhängigkeit von Raum und Zeit symbolisiert.


Weitere Verbesserungen

Back to the roots: Wir haben mal wieder alle Links unterstrichen, um zu verdeutlich, wo man neben den Buttons und Navigationseintägen noch hinklicken kann, ohne alles extra mit der Maus abfahren zu müssen

Was wir noch ändern wollten, aber dazu keine Möglichkeit und/oder Zeit gefunden haben

  • Slangsprache: Leider lässt sich „Ausloggen“ nicht in „Abmelden“ umbenennen (was aber sicher zu verschmerzen ist).
  • Die Tooltips, die bei Mouseover über den Menüpunkten erscheinen, hätten wir gerne textuell aussagekräftiger gestaltet, haben dazu aber keine in unserem Zugriff liegende technische Möglichkeit gesehen.
  • Den aktiven Menüpunkt konnten wir jeweils gut hervorheben, aber leider haben wir keine Möglichkeit gefunden, auch die Überschrift des aktuellen Bereichs hervorzuheben. Da man sich nach unserer Auffassung im aktuellen Kurs (oder Foyer) am meisten aufhält, haben wir die Überschrift dieses Bereichs gegenüber den anderen Überschriften hervorgehoben.
  • Die Druckausgabe wollten wir noch etwas optimieren, haben das aber zeitlich nicht mehr geschafft.
    Optimierungen für mobile Endgeräte: Auch davon haben wir uns aus Zeitgründen recht schnell verabschiedet.