• Schrift & Farben im MLJ

    Nach mehreren ausführlichen Artikel zum Interface- und Interaktionskonzept folgt nun das Thema Design. Für ein gelungenes Produkt ist nicht nur ein durchdachtes Konzept sondern auch die dazu passende Gestaltung nötig. Beide Aspekte gehen Hand in Hand. In den nächsten Blog-Artikeln wird beschrieben, wie die Gestaltung der Bedienschnittstelle (User Interface) das vorher beschriebene Konzept des MLJ vervollständigt. Es gibt mehrere Aspekte, die für die Gestaltung des MLJ wichtig sind. Das User Interface des Systems soll funktional sein und dem Nutzer Hinweise zur Bedienung geben. Weiter soll es sich in die Laborumgebung einfügen und die Anmutung eines professionellen Werkzeugs besitzen. Auch ein  ästhetisches Erscheinungsbild ist wichtig (vgl. User Experience).

    Schrift

    Beim MLJ kommt die Schriftfamilie „Segoe“ zum Einsatz. Diese Schriftfamilie existiert in mehreren Variationen, wie z.B. „Segoe UI“ und „Segoe Print“. Segoe wurde von Steve Matteson entworfen und von Microsoft lizensiert. Die Schriftfamilie kommt zum Beispiel in Windows 7 und verschiedenen anderen Produkten von Microsoft zum Einsatz (vgl. Wikipedia).

    Segoe UI

    Segoe UI

    Segoe UI

    Die Schrift Segoe UI wurde speziell für die Verwendung in einem User Interface (UI) entwickelt. Sie hat eine hohe x-Höhe, offene Punzen und ein sehr klares Schriftbild. Dadurch wirkt die Schrift offen, freundlich, und ist sehr gut lesbar. Weiter hat sie den Charakter einer humanistischen, serifenlosen Schrift und ist in mehreren Schriftschnitten erhältlich. Damit entspricht die Segoe UI allen Anforderungen an eine  gute Schrift für Bildschirmanwendungen.

    Im MLJ wird hauptsächlich die Segoe UI verwendet. Die Schriftgröße beträgt dabei jeweils 6mm oder höher, wie mit der Formel von Wandmacher errechnet wurde. Eine visuelle Gewichtung der Schriftelemente erfolgt über drei Schriftschnitte, die in der nebenstehenden Abbildung zu sehen sind.

    Alle wichtigen Elemente, wie z.B. Überschriften, sind im Schriftschnitt „Semibold“ gestzt. Bedienelemente wurden im Schriftschnitt „Regular“ beschriftet und bei Inhalten, wie z.B. Statusnachrichten etc., wird „Light“ verwendet.

    Segoe Print

    Segoe Print

    Segoe Print

    Da sich die Gestaltung des Dokumentenfächers an der realen Welt bzw. einem handschriftlichen Laborbuch orientiert, wird hierfür eine weitere Schrift verwendet. Segoe Print ist typografisch an Segoe angelehnt und hat einen handschriftlichen Charakter (vgl. Abbildung oben). Trotzdem ist sie gut lesbar und wird unter anderem im User Interface zur Handschrifterkennung von Windows 7 eingesetzt.
    Durch die Verwendung von Segoe Print im Dokumentenfächer wird die Eingabe mittels Stift gestalterisch unterstützt. Schreibt der Nutzer mit dem IR-Stift auf den Fächer, so wird per Handschrifterkennung der eingegebene Text in die genannte Schrift umgewandelt. Die Computer-Handschrift zeigt wie das System die Nutzereingabe interpretiert und erlaubt dem Nutzer die Unterscheidung zwischen selbst eingegebenen Texten und denen, die vom System erzeugt wurden. Außerdem erhält das System durch die Verwendung dieser Schrift eine persönliche und menschliche Komponente. Im Gegensatz zum Dokumentenfächer nutzt das Versuchsdokument im Präsentationsmodus die Segoe UI. Die Ansicht dient Präsentationszwecken und soll dementsprechend klar aussehen und gut lesbar sein.

    Farben

    Farbschema des MLJ

    Farbschema des MLJ

    Bei der Verwendung von Farben für User Interfaces ist wichtig, auf gute Kontraste und die Farbsemantik zu achten. Für das MLJ wurden insgesamt vier Farben verwendet. Die nebenstehende Abbildung zeigt das Farbschema mit den zugrunde liegenden Farben.

    Bedienelemente wie Menüs und Beschriftungen haben im MLJ einen starken Hell-Dunkel-Kontrast. Bei einem dunklen Untergrund wurden Beschriftugnen und Icons in Weiß gehalten, bei einem hellen Untergrund in Anthrazit. Durch einen solch hohen Kontrast sind die Elemente auch bei schlechten Lichtverhältnissen gut erkennbar.

    Ein helles Blau kommt als Akzentfarbe zum Einsatz, um Schaltflächen und Hervorhebungen zu Kennzeichnen. Ein Beispiel dafür ist das Hand- oder Werkzeugmenü. Die Farbe bietet sowohl auf hellen als auch auf dunklen Hintergründen einen ausreichenden Konstrast.

    Ein helles Grün wird für die Fortschritts-Anzeige in Versuchen verwendet und kennzeichnet zudem alle Schaltflächen, die ein neues Objekt erzeugen, z.B. beim Hinzufügen einer neuen Aufgabe. Für diese Funktion hat sich Grün im User Interface Design etabliert.

    Dezente Hervorhebungen sind in einem hellen Braun gehalten. Die Farbe dient zur visuellen Gewichtung und sticht nicht hervor. Zum Beispiel sind nicht aktive Abschnittsmarken im Dokumentenfächer in einem hellen Braun eingefärbt.

    Die Farben des MLJ wirken frisch, freundlich und haben einen semantischen Bezug zum Nutzungskontext. Blau und Grün kommen im biochemischen Bereich häufig vor und werden im Allgemeinen mit Natur, Leben und Biologie in Verbindung gebracht. Ein helles Braun als Farbe der Erde komplettiert die natürlich anmutende Farbpalette.

    Das hier vorgestellte Farbschema ist allerdings nur ein Beispiel. Das Konzept des MLJ sieht vor, dass das System mehrere Farbschemata anbietet, aus denen der Nutzer auswählen kann. Zum Beispiel kann dabei auch die Farbe festgelegt werden, mit der der Nutzer im „Arbeitsuniversum“ dargestellt wird. Die Anwendung kann so ein Stück weit an die persönlichen Vorlieben des Nutzers angepasst werden.

    Schlagwörter: , , , , , , ,

Dieser Artikel hat noch keine Kommentare.


Sag und deine Meinung!