8.3.1 Page Design
Die Benutzeroberfläche des neuen Auftritts sollte sich an bekannte Konventionen orientieren. Aus diesem Grund wurde eine klassische Drei-Spalten Seitenaufteilung gewählt und durch eine aussagekräftige Kopf- und Fußleiste ergänzt.
Die Zielgruppe sollte sich somit besonders leicht auf den neuen Seiten zurechtfinden.
Die Kopfleiste besteht aus dem Logo des Unternehmens und einem Schriftzug, der aus der URL selbst besteht und der Unterschrift “Das Portal für den Betriebsrat”. Auch wenn die generische URL aussagekräftig ist, sollte mit dem kurzen Spruch eindeutig gezeigt werden, was hier zu erwarten ist.
Des weiteren findet man neben dem Logo Textlinks, die zu einer Sitemap (allerdings mit Inhaltsverzeichnis betitelt) und zum Impressum führen. Weiterhin findet man einen direkten Link zum Aufruf des Druckbildschirms. Da die Usability-Tests zeigten, dass die Zielgruppe großen Wert auf druckbare Seiten legt, wurde mit Hilfe von CSS eine druckerfreundliche Seite entworfen, bei der die Kopf- und Fußleisten sowie die linke und rechte Navigationsleiste nicht mit ausgedruckt wird.
Abgeschlossen wird die Kopfleiste mit einem roten dünnen Raumtrenner.
Abbildung 50: Die Kopfleiste des neuen Auftritts.
Die Fussleiste bildet den Abschluss jeder Seite und listet neben dem Copyright-Vermerk die wichtigsten Links zu den einzelnen Rubriken auf.
Abbildung 51: Die Fußleiste des neuen Auftritts
Folgende Abbildung zeigt eine Gesamtansicht einer beliebigen Seite des Neuentwurfs.
Abbildung 52: Gesamtansicht einer beliebigen Seite des Neuentwurfs
Die Realisierung der Seitenaufteilung fand mit Hilfe einer Tabellenkonstruktion statt. Es wurden drei unabhängig voneinander arbeitende Tabellen benutzt: eine für die Kopfleiste, die zweite Tabelle für den Inhalt mit den zwei Navigationsleisten und eine dritte für die Fußleiste. Dies hat den Vorteil, dass erst die Kopfleiste geladen und angezeigt wird, während die beiden unteren geladen werden.
Die alten Seiten wurden für eine Bildschirmauflösung von 640 mal 480 Pixel optimiert. Dies führte dazu, dass bei hohen Auflösungen links und rechts ein weißer Rand entstand, was tatsächlich auch 5 Testpersonen negativ auffiel.
Deshalb passen sich die neuen Seiten variabel der Fensterbreite an. Mindestbreite sind hier 800 Pixel, ohne dass ein horizontaler Scrollbalken entsteht. Ist das Fenster bzw. die Bildschirmauflösung höher als diese 800 Pixel, so wird die Spalte mit dem Inhalt breiter.
Folgende zwei Screenshots zeigen eine Seite in zwei verschiedenen Auflösungen. Deutlich erkennbar ist, dass sich in der größeren Auflösung der rote Raumtrenner in der Kopfleiste streckt und die Mittelspalte mit dem Inhalt in die Länge zieht. Somit wird der Platz maximal genutzt. Außerdem sieht der Besucher auch bei kleiner Auflösung die komplette linke Navigationsleiste.
Abbildung 53: Eine Seite in der Auflösung 800 mal 600 Pixel.
Abbildung 54: Eine Seite in der Auflösung 1024 mal 768 Pixel.
Das Page Design bestimmt das Look and Feel der Webseiten. Die neuen Seiten sollten einen freundlichen und vertrauenserweckenden Eindruck auf den Besucher machen. Dies beeinflusste die Farbgestaltung des Neuentwurfs.
Während rote Elemente auch schon im alten Auftritt vorhanden waren, bestimmen leichte Blautöne den Auftritt. Die Navigationsleisten sowie die Überschriften sind mit einem hellen Blau eingefärbt und sollen den Whitespace reduzieren und augenschonend empfunden werden.
Die rote Hintergrundfläche im Logo sollte Parallelen zu den Überschriften der linken und rechten Navigationsleisten erkennen lassen. Somit dominieren Rechtecke den gesamten Auftritt und sorgen gleichzeitig für eine klare Raumaufteilung.
Letztlich soll noch kurz auf die Typographie eingegangen werden. Die Schriftart Times Roman des alten Webauftritts fiel zwar bei den Tests nicht negativ auf, sollte aber dennoch durch eine moderne Bildschirmgerechte Schriftart, die Verdana ersetzt werden. Somit sollte das Lesen leichter fallen.
Die normale Größe der Schriftart beträgt 9 Punkte, Überschriften wurden mit 10, 12 und 14 Punkten definiert.
