Wer kennt nicht die Angst davor, die Herdplatte aus Versehen eingeschaltet zu lassen. Die praktischen roten Lämpchen beim Keramikherd helfen einem hier leider nicht weiter: sie zeigen zwar an, dass die Platten heiss sind, aber nicht ob sie aktiv geheizt werden oder am auskühlen sind.

Das empfinde ich täglich als einen grossen Mangel, der mit diesem simplen Trick behoben werden könnte: ist die Energiezufuhr aktiv leuchtet die Lampe kontinuierlich, ist sie unterbrochen aber die Platte noch heiss, blinkt die Lampe. Dass die Platte noch nicht heiss ist, wenn man den Herd eben erst eingeschaltet hat, interessiert einen herzlich wenig, denn man würde da so oder so nicht mehr die Hand draufhalten, also kann die Lampe in diesem Moment bereits ganz normal leuchten.

Einführung

Die Navigation ist wohl eines der wichtigsten Elemente einer Website um deren Bedienbarkeit zu gewährleisten. Eine gut strukturierte und klar gestaltete Navigation hilft dem Benutzer sich zu orientieren und gibt ihm im besten Fall die Sicherheit, immer zu wissen wo auf der Website man sich befindet.

Problem

Einen entschiedenden Fehler in der Gestaltung ist bei dem folgenden Beispiel zu sehen. Die Navigation besteht aus Drop-Down Elementen, was bereits eine höhere Komplexität darstellt als eine eindimensionale Liste. Dies stellt jedoch für den Benutzer noch keine Herausforderung dar. Das eigentliche Problem liegt im :hover Status der Hyperlinks. Wenn der Benutzer mit der Maus über den zu-klickenden Link fährt, verschwindet die Schrift und die umfassende Box färbt sich schwarz. Im CSS sehen wir, dass die Schriftfarbe genauso wie die Hintergrundfarbe des Elementes zu schwarz wechseln.

Lösung

Mit dem Weglassen der Zeile color: #000 wäre diese Problem sofort gelöst und die Ratespiel in der Navigation hätte ein Ende.

Eine Idee, um Weblinks auf einfache Weise bedienungsfreundlicher zu gestalten: macht sie anfassbar! Eigentlich ist das Prinzip bekannt: Wenn man einen Gegenstand drückt, dann bewegt er sich. Diese intuitive Erfahrung lässt sich auf einfachste Weise auch aufs Web anwenden:

a:active { position: relative; top: 1px; left: 1px }

Wenn ein Benutzer auf einen solchen Link klickt, bewegt er sich nach rechts unten (wird «eingedrückt») und gibt so dem Benutzer sofortiges Feedback über den erfolgreichen Klick. Dieses Feedback kann intuitiv verstanden werden und vermittelt die Sicherheit, dass die Aktion registriert wurde, obwohl das Laden der nächsten Seite möglicherweise noch einen kurzen Moment dauert.

Zwei Beispiele findet ihr auf naehrstoff.ch und artillery.ch. Es gibt auch aufwändigere grafische Beispiele, die das Prinzip des Anfassens gut veranschaulichen. So etwa die aktuelle Apple-Website, deren Navigations-Reiter nicht nur einen :hover, sondern auch einen :active Status besitzen.

Na dann los, ab zur Umsetzung! Aber nicht vergessen, auch :link, :visited und :hover sind wichtig…

Bei der Suche nach einer geeigneten Universität für ein Austauschsemester bin ich auf folgende Darstellung der Studiengänge der Fontys Fachhochschule gestossen, die ich als überarbeitungswürdig empfand.

Probleme

1. Im allgemeinen ist die Typografie der gesamten Site sehr klein gesetzt, zusammen mit dem minimalistischen Design kann dies eine Ausdrucksweise sein, doch ich denke für eine Universitätswebsite sollten Lesbarkeit und Barrierefreiheit wichtige Merkmale sein.
2. Neben der sehr kleinen Schriftgrösse trägt die geringe Linienhöhe noch mehr zur Unleserlichkeit bei. Hier wird eine Linienhöhe von 1em zusammen mit einer Textgrösse von 10pt verwendet.

Lösungen

1. Die Typografie habe ich auf 14pt gesetzt um eine bessere Lesbarkeit auch bei schlechten Lichtverhältnissen oder eingeschränkter Sehkraft zu gewährleisten. Eine CSS Definition in einer relativen Einheit, zB. em oder % ermöglicht zudem die Veränderung der Schriftgrösse im Browser.
2. Die Linienhöhe habe ich für Fliesstext auf 1.5 eingestellt was einer absolute Grösse von 21pt bei 14pt Schriftgrösse entspricht. Für die Liste im speziellen wurde die Schriftgrösse gar auf 2 gesetzt, um eine deutlichere Trennung der Studiengänge zu visualisieren und die Findbarkeit des gesuchten Studienganges zu verbessern.

Der Lichtschalter ist so ein Ding das wir täglich in unzähligen Varianten benutzen. Als Knopf, als Kippschalter, als Drehregler, … Der Kippschalter gefällt mir persönlich am besten:

1. Man sieht sofort, ob er an- oder ausgeschaltet ist.
2. Bei mehreren Schaltern sieht man, welche an- oder ausgeschaltet sind.
3. Man kann fühlen, in welcher Position sich der Schalter befindet.
4. Durch «wischen» von unten nach oben können alle Schalter gleichzeitig angeschaltet werden.

Der Kippschalter hat jedoch einen grossen Nachteil: häufig wird ein Licht von mehreren Schaltern bedient, d. h. man kann das Licht am einen anschalten und dann später an einem anderen ausschalten. So kommen die Positionen durcheinander und die Vorteile verschwinden.

Darum schlage ich vor, einen Schalter zu entwickeln, der die Merkmale des Kippschalters mit denen des Drückschalters verbindet. Mein Ansatz wäre ein haptischer: Man nehme einen Drückschalter und versehe ihn mit einer veränderbaren Oberfläche. Rau wenn das Licht läuft, glatt wenn kein Strom fliesst. So kann man jederzeit spüren (und ich denke, sehen sollte man es auch), welche Schalter angestellt sind.

Es gibt ja bereits solche Ansätze, z.B. mit LEDs. Diese sind jedoch visuell störend, etwas das mit der im Hintergrund agierenden Oberfläche vermieden würde. Ich könnte mir auch vorstellen, dass so eine Oberfläche nach der Formumwandlung keinen Strom mehr braucht, dass sie also zwei stabile Zustände besitzt, die mit einem kurzen Energiestoss umgeschaltet werden können. Ich weiss allerdings nicht, ob es so etwas gibt …

Als erstes wird die Haltestellenanzeige in den Bussen der RBL überarbeitet. Das Display soll die nächsten Haltestellen sowie die Zielhaltestelle anzeigen, doch lässt das Layout der enthaltenen Elemente einigen Raum für Verbesserungen.

Probleme

1. Hier gibt es zu viele Farbwechsel in der Hintergrundfarbe und der Kontur des Pfeiles, die das Layout sehr nervös wirken lassen.
2. Dieser Platz wird durch den Pfeil unbrauchbar gemacht und fehlt gleichzeitig auf der gegenüberliegenden Seite, was das Interface dazu zwingt die Schrift des Zielortes zu skalieren.
3. Die Position der Uhr und die Position der Liniennummer bilden eine Diagonale quer über das Interface. Dies weckt eine Dynamik, die keinen weiteren Zweck erfüllt und die Lesbarkeit der Information beeinträchtigt.

Lösungen

1. Die Liniennummer wird zu ihrem zugehörigen Zielort gesetzt um die Verknüpfung unbewusst zu kommunizieren. Ebenfalls wird die Hintergrundfarbe der Linienfarbe gleichgesetzt. Der früher leer gebliebene Platz wird nun ausgenutzt und die Schrift hat zur rechten Seite hin genügend Platz.
2. Die obere Linie zeigt die aktuelle Haltestelle und bildet im Gegensatz zum unteren Rand die aktuelle Zeitposition, aus diesem Grund wird die Uhr hier dargestellt um den Moment der Aktualität zu verdeutlichen.
3. Die kommenden Haltestellen sind auf den ersten Blick weniger wichtig und können so durch den Einsatz eines feineren Schriftschnittes zurückgestellt werden. Ein Wechsel von Arial auf Helvetica Neue kann die Lesbarkeit auf einem Screen deutlich verbessern.

Download Refine Framework