Januar 2010 Archive

In den letzten Tagen ging es hoch her im Netz: die Leipziger Verkehrsbetriebe (LVB) hatten ihre frisch relaunchte Webseite präsentiert. Darüber wurde viel geschrieben und wenig gelobt, unter anderem in diesem sehr guten Artikel des Journalisten Daniel Große oder hier im Designtagebuch. Die Oberfläche ist aber auch wirklich mit bestem Willen nicht anders als - Verzeihung - hässlich zu nennen:

leipzig.jpg

Sie wirkt kein Stück zeitgemäß. Die große Frage ist, wie und mit welchen Nutzern wurde diese Webseite getestet - denn getestet wurde sie laut einer Pressemeldung angeblich. Der Kontrast der weißen Schrift auf grau gestricheltem Grund ist schlecht, die vielen Versalien sind ein No-Go im Bereich Lesbarkeit, besonders die linke Reiternavigation ist sehr schlecht zu lesen. Gehörten Senioren zur Testgruppe?

Man navigiert über gruselige, viel zu detailreiche Icons. Hier wäre interessant zu sehen, wie die Fahrscheinautomaten der LVB aussehen. Denn da liegt eine große Stolperfalle im Design (und damit auch in der Gebrauchstauglichkeit): entsprechen diese Icons nicht solchen, die die Nutzer bereits kennen, müssen sie sich umstellen. Denn die Icons sind auch nicht in irgendeiner Form standardisiert, d.h. sie sehen auch nicht bereits bekannten Symbolen ähnlich wie zum Beispiel dem hier :
images.jpeg
Insbesondere die Icons für "Haltestelle" und "Verbindung" rechts oben sind zu nah beieinander platziert und sich zu ähnlich. Natürlich hilft die Schrift, die Symbole dann zu unterscheiden, aber da beim Mouse over die Bildunterschriften für ALLE die Symbole in dieser oberen Ecke an der GLEICHEN Stelle erscheinen... nun ja.

Schlimm auch das an den unteren Rand geklebte und festgepinnte gelbe... Ding, das beim Scrollen stehenbleibt. Wie Daniel Große schon schrieb, fordert es zu Blicksprüngen heraus, weil es die Aufmerksamkeit anzieht. Das macht die gesamte Seite unruhig. Dazu trägt aber auch die eigenartige Verwendung von Farben bei. In Formularen sind manche Bereiche, wie z.B. das Suchfeld, orange hinterlegt. Diese Farbe signalisiert am linken Karteireiterrand auch, dass hier etwas ausgeklappt werden kann (etwas, auf das ein ungeübter Nutzer aber wahrscheinlich NIE kommen wird, da es sich nur um ein oranges Rechteck ohne jeden Text oder Hinweis handelt). Wie beim Suchfeld suggeriert die orange Farbe also eine Aktivität, die der Nutzer hier starten kann (die Suche starten, bestimmte Bereiche anzeigen lassen). Gleichzeitig sind aktive Bereiche aber auch orange markiert, sowohl in Unternavigationen bei Menüs wie auch in den Icons der rechten oberen Leiste sowie bei Icons, die auf manchen Unterseiten vorkommen. Die Haupticons, die auf der Startseite einmal prominent platziert sind und sich auf den Unterseiten links oben befinden, sind im aktiven Zustand jedoch NICHT orange hinterlegt - sondern in unterschiedlichen Blautönen, in gelb und grün...

Insgesamt also ein riesiges, wirres Durcheinander ohne jede Konsistenz. Obwohl offensichtlich viel Arbeit investiert wurde, ist das Gestaltungskonzept nicht stringent. Und die merkwürdigen Figuren im Tickets und Tarife-Bereich sind wirklich einfach nur... schrecklich. Um nochmal auf Daniel Grosse zurückzukommen, der hat das nämlich sehr sehr nett beschrieben:

"Studenten sind offenbar fülliger als Azubis, Erwachsene haben einen Bierbauch, Autofahrer sind unförmig und Senioren sind augenscheinlich Exhibitionisten, die ihren Mantel lüften."

Ganz ehrlich, wer MACHT sowas? Nimmt kostenlose Grafiken, die man im Netz runterladen kann, und benutzt die sinn- und haltlos für ein solches Unternehmen...

lvb_2.jpg

Und so könnte man stundenlang weitermachen: warum gibt es zwei verschiedene Icons für Informationen, von denen eines "Nachrichten" heißt, und was unterscheidet oder verbindet eigentlich die zwei Haupticon-Leisten? Wieso ist diese Seite so wenig erwartungskonform gestaltet, dass ich - mit 15 Jahren Netzerfahrung - wie blöd danach suche, wie man verdammt noch mal zurück zur Startseite kommt? Wieso kleben einige Teile dieses "Designs" so aneinander, während andere viel zu viel Luft haben? Wieso gibts beim Browsen mit Safari unter dem Punkt "Hilfe" einfach mal GAR nichts?

hilfe.jpg

Besonders fassunglos ließ mich der Kommentar des Marketing-Leiters der LVB zurück, der auf die zahlreichen technischen Probleme mit der Fahrplanauskunft antwortete:

„Diese Fehler gab es auch schon vorher, sie hängen nicht mit der neuen Internetseite zusammen."

Wollen wir alle mal einen Moment innehalten und darüber nachdenken, was der Zweck der Webseite eines Verkehrsunternehmens sein sollte. Welche Nutzungsszenarien könnte es hierfür geben? Ach so - darüber HAT niemand nachgedacht? Sieht so aus. Im wahrsten Sinne des Wortes.        
Im Suedkurier gibt es einen ganz netten Artikel über eine Autorin, die - unter anderem - an einem Nutzertest teilnehmen durfte und auch sonst schon an vielen alltäglichen Geräten verzweifelte und darüber nun ein Buch geschrieben hat.
41oY-I3HnDL._SL500_AA240_.jpg
Gut, ist kein Webdesign, ist keine Usability, sondern eine reine Gestaltungsangelegenheit. Trotzdem ein schönes Beispiel, weil es einfach nicht durchdacht ist. Im Designtagebuch geht es in einem Beitrag um das neue Logo von Peugeot. Man beachte dabei die farbliche Gestaltung und die dadurch entstandene anatomische Besonderheit ;)
Wenn ich eine Pressemeldung zum Relaunch einer Bibliotheken-Webseite bekomme, horche ich als Ex-Bibl-Assi natürlich auf. Bibliotheken-Webseiten waren in den letzten Jahren so ein bisschen das Stiefkind im Web, mit wenig attraktiven Oberflächen und meist mehr schlecht als recht bedienbaren Online-Katalogen.

Die Stadtbücherei Pforzheim hat nun also eine neue Webseite bekommen. Auf einen direkten Vergleich müssen wir diesmal verzichten, weil ich die alte Seite nicht kenne. Aber wie sieht sie denn nun aus?

pforzheim.jpg

Farblich kein echter Überflieger, aber was mehr stört ist die Grundeinstellung der Schriftgröße, die nicht besonders lesefreundlich ist. Etwas ungewöhnlich ist die Platzierung der Möglichkeit, die Schrift zu vergrößern/verkleinern - jeweils am rechten oberen Rand des Content-Bereichs, dadurch immer über Bildern statt direkt am Text, zumal der Text nicht zweispaltig ist. Auch dass hierfür nur Icons, kein Text verwendet werden, ist in Anbetracht der sonst üblichen Form etwas weniger schön. Dafür passt es aber für Benutzer, die die Seite www.pforzheim.de schon kennen, schließlich zeichnet sich dafür die gleiche Agentur verantwortlich.

Ein bisschen unsauber ist der Kasten "So funktioniert die OnleihePF" auf der Startseite, er hängt ein wenig schief dort... und der Link führt zu einem PDF, jedoch ohne dies anzukündigen. Externe Links werden ebenfalls nicht angekündigt - beim Überfahren mit der Maus kommt allerdings eine Meldung. Bloß ist die in Englisch:

extern.jpg

Viele Links haben auch gar keine unterstützenden Meldungen beim Mouse-Over, zum Beispiel die komplette Navigation rechts und links.

Dafür ist die Funktionalität umfangreich. So kann man mittels einfachem Formular eine Online-Fernleihe durchführen, jeder Mitarbeiter hat eine eigene E-Mail-Adresse, die Sitemap ist korrekt und hilfreich (wenngleich inkonsistent in der Gestaltung der Links).

Als Fazit: ein für Bibliotheken durchaus ungewöhnlich umfangreicher Webauftritt mit mehreren kleinen Schwächen in der Usability - und größeren Schwächen in der Barrierefreiheit. Gerade Bibliotheken sollten hier mehr Bemühungen zeigen. Dennoch ist die Seite von ihrer Modernität sicher ein Wegweiser für andere Städte, ihre Webseiten zeitgemässer zu gestalten. Mit ein bisschen mehr Nutzerfreundlichkeit dazu - eine gute Idee.
Still und heimlich (jedenfalls war ich neulich noch auf der alten Seite!) wurde http://www.fellbach.de/ einem Relaunch unterzogen. Der war, wie hier bereits kurz angedeutet, auch nötig. Und hat sich gelohnt:

fellbach.jpg
Deutlich zu sehen ist, dass die komplette Seite entzerrt wurde und nun viel übersichtlicher ist. Das Design ist moderner, gleichzeitig wurde aber behutsam vorgegangen: die obere Bildleiste hat sich in eine Drop-Down-Menüleiste verwandelt, dafür gibt es jetzt Fellbacher Bilder als Animation im vergrößerten Kopf-Bereich. Die "Schnellzugriff"-Navigation am rechten Rand ist zielgruppenorientiert, wichtige Infos wie Standort und Öffnungszeiten des Rathauses gibt es auf einen Blick. Auch die Schriftgröße ist endlich lesefreundlicher ;) Und die Gruppierung von Inhalten macht es dem Auge leichter, sich zurechtzufinden. Insgesamt ein schöner Relaunch.

Die Zusatznavigation ganz oben (auf dem Bild jetzt nicht zu sehen, dazu bitte mal auf der Webseite schauen) ist allerdings etwas kontrastarm durch den leicht schraffierten Hintergrund. Es gibt auch noch ein paar Inkonsistenzen in der Gestaltung, beispielsweise sind die "Aktuellen Nachrichten" und die "Nachrichten aus dem Rems-Murr-Kreis" unterschiedlich gestaltet im Hinblick auf die Art und Weise, wie mit Teasern und kompletten Artikeln umgegangen wird. Auch bei Schriftarten sollte man nochmal die Konsistenz prüfen, und manchmal ist nicht klar, warum bei einigen Unterseiten Grafiken zur Orientierung verwendet werden, bei anderen aber nicht.

Aber hören wir mal auf zu meckern... ein guter Relaunch, irgendwas findet man immer, was man noch verbessern könnte. :)
So geht's oft zu, tatsächlich...

webdesign.jpg
Den kompletten Artikel gibts hier: http://theoatmeal.com/comics/design_hell.

Auch empfehlenswert: Das Blog über Kunden aus der Hölle.