Archiv für die Kategorie ‘Gestaltung’

  • Gestaltung der Menüs im MLJ

    0
    Werkzeugmenü

    Werkzeugmenü

    Ein wichtiger Aspekt beim Interfacedesign des MLJ ist die Unterscheidung zwischen gegenständlich und abstrakt, was bei der Gestaltung von Präsentations- und Arbeitsmodus besonders deutlich wird. Die Menüs im MLJ stehen zwischen diesen gestalterischen Gegensätzen. Sie gehören konzeptionell zum System und sind abstrakt, weil sie in der realen Welt nicht vorzufinden sind. Zugleich exisiteren in der realen Welt aber zahlreiche Bedienelemente, wie z.B. Schaltflächen und Schieberegler, deren Bedienung der Nutzer gelernt hat.

    Die Gestaltung der Menüs im MLJ ist sehr flächig und kommt ohne Farbverläufe und Schatten aus. Gleichzeitig erwecken dünne kontrastreiche Linien den Eindruck von Einkerbungen und trennen so die einzelnen Bedienelemente voneinander ab. Abgerundete Ecken lassen die Menüs als eine abgeschlossene Einheit erscheinen. Die Abbildung links zeigt das Werkzeugmenü, an dem sich die genannten Aspekte gut erkennen lassen.

    Insgesamt haben alle Menüs im MLJ eine hochwertige Anmutung. Diese wird durch die Verwendung dunkler Farben im Hintergrund, einer leichten Transparenz, sowie zahlreicher gestalterischer Details erzeugt. Außerdem passen die Menüs gut in das Spannungsfeld von Hell und Dunkel bzw. Präsentations- und Arbeitsmodus.

  • Gestaltung von Präsentations- und Arbeitsmodus

    0

    Ein wichtiger Aspekt beim MLJ ist die Unterteilung in Arbeits- und Präsentationsmodus. Der Präsentationsmodus dient zum Planen und Organisieren der Arbeit, wohingegen im Arbeitsmodus Versuche durchgeführt und dokumentiert werden. Die Unterscheidung der beiden Modi sowie ihre Funktionen spiegeln sich auch im User Interface wider. Grundlage für die gesamte Gestaltung war  die Unterscheidung verschiedener Abstraktionsstufen. So spricht der Präsentationsmodus gestalterisch eine abstrakte Sprache, während der Arbeitsmodus eher gegenständlich dargestellt ist. Dazwischen gibt es jedoch auch Abstufungen. In den unteren beiden Abbildungen lassen sich die beiden Modi vergleichen. Die Aufteilung in „abstrakt“ und „gegenständlich“ hilft dem Nutzer, ein mentales Modell des Systems zu erstellen und die Interaktionsmöglichkeiten der jeweiligen Modi zu unterscheiden.

    Der Präsentationsmodus ist abstrakt gestaltet

    Der Präsentationsmodus ist abstrakt gestaltet

    Der Arbeitsmodus ist gegenständlich gestaltet

    Der Arbeitsmodus ist gegenständlich gestaltet

    Die Visualisierung der Versuche im Präsentationsmodus stellt ein real nicht existentes Prinzip der Organisation dar. Auch die Interaktion mit einer skalierbaren Benutzeroberfläche findet in der realen Welt keine Entsprechung. Deshalb folgt der Präsentationsmodus des MLJ einer abstrakten Darstellungsweise. Diese zeichnet sich dadurch aus, dass Elemente und Effekte, wie z.B. realistische Farbverläufe und Schatten, vermieden werden. » Mehr…

  • Schrift & Farben im MLJ

    0

    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. » Mehr…

  • Interface- und Interaktionskonzept: Zusammenfassung und Übersicht

    0

    Nachdem wir alle Bereiche des Systemkonzeptes einzeln betrachtet haben, kommt nun mal eine Übersicht über das gesamte Gefüge, was das “große Ganze” vielleicht etwas besser verständlich macht.

    MLJ Gesamtüberblick

    MLJ Gesamtüberblick

    In den vorherigen Artikeln haben wir detailliert das Konzept des MLJ erläutert. Ziel des Systems ist es Nutzerbedürfnisse zu befriedigen. Auf welche Art und Weise dies beim MLJ erreicht wird, fasst der folgende Artikel zusammen. » Mehr…

  • Interface- und Interaktionskonzept: Handmenü

    0
    Handmenü zum Öffnen der Bereichsebenen

    Handmenü zum Öffnen der Bereichsebenen

    Das Handmenü macht es möglich, sehr schnell die vier Bereichsebenen Kommunikation, Wissen, Ressourcen und Planung des MLJ aufzurufen. Sobald ein Daumen flach auf die Multitouch-Oberfläche gelegt wird, erscheinen unterhalb der verbleibenden vier Finger kreisrunde Schaltflächen. Ein Tip auf eine dieser Schaltflächen öffnet die entsprechende Bereichsebene. Dabei wird die betätigte Schaltfläche zum “Pin” der Bereichsebene. Sobald der Daumen wieder von der Oberfläche gehoben wird, blendet sich das Menü aus. Diese Geste kann mit einem Tastenkürzel verglichen werden, welches es dem Nutzer ermöglicht, sehr schnell auf eine bestimmte Funktion zuzugreifen. Das Handmenü beruht auf der Annahme, dass das System den Daumen von anderen Fingern unterscheiden kann. Dies ist dadurch möglich, dass der Daumen in der Regel seitlich aufliegt und daher eine längliche Auflagefläche hat. Alle anderen Finger(-spitzen) bilden dagegen eine gleichmäßig runde bzw. elliptische Form, wenn sie die Oberfläche berühren. Das MLJ-System erkennt zudem, ob der rechte oder linke Daumen aufliegt und passt das Handmenü dementsprechend an.

    » Mehr…

  • Interface- und Interaktionskonzept: Bereichsebenen

    0

    Neben dem Bereich “Versuchse”,  gliedert sich das MLJ in die vier weiteren Systembereiche “Kommunikation, Wissen, Ressourcen und Planung”. Diese legen sich wie Ebenen über das restliche System. Die untere Abbildung zeigt beispielhaft die Bereichsebene “Ressourcen”, die im Arbeitsmodus aufgerufen wurde.

    Bereichsebene Ressourcen

    Bereichsebene Ressourcen

    Interaktion

    Der Aufbau einer Bereichsebene folgt einem Akkordeonprinzip, bei dem Überkategorien jeweils untergeordnete Informationen führen. Ein Tip auf eine Leiste mit Überbegriff öffnet die entsprechende Kategorie. Innerhalb einer Kategorie kann der Nutzer verschiedene  Funktionen ausführen und Detailinformationen, z.B. zu Geräten, abrufen. Die Auswahl eines konkreten Gerätes erfolgt ähnlich wie beim Werkzeugmenü im Arbeitsmodus.
    Alle Geräte einer Klasse sind auf einem Band angeordnet, welches sich nach links und rechts schieben lässt. Diese Art der Interkation gilt z.B. auch
    für die Auswahl von Personen in der Bereichsebene Kommunikation. Wichtig bei der Interaktion mit den Bereichsebenen ist das Drag ‘n‘  Drop-Prinzip, das dazu dient Verknüpfungen zu erstellen. Verknüfpungen werden im Dokumentenfächer als Symbole dargestellt, die den schnellen Zugriff auf Bereichsebenen erlauben (z.B. ein Tip auf das Symbol der verwendeten Zentrifuge, führt zum Geräteblatt in der Kategorie Geräte im Bereich “Ressourcen”, vgl. Artikel über die “Dokumentaiton”). Um eine Verknüpfpung im Versuchsdokument zu erstellen, muss der Nutzer das entsprechende Objekt in der Bereichsebene mit einem langen Tip herauslösen und kann es dann in den Dokumentenfächer ziehen und dort fallen lassen (vgl. untere Abbildung). Dadruch können Arbeitsschritte mit Geräten verknüpft werden.  Gleiches gilt auch für andere Arten von Verknüpfungen. Wenn z.B. das Symbol einer Person auf einen Versuchsknoten in der Präsentationsansicht gezogen wird, so ist diese Person mit dem Versuch verknüpft und erscheint als „Partner“ in der Detailansicht des  Knotens. Aufgerufen werden die Bereichsebenen entweder über das Menü in der Seitenleiste oder über das “Handmenü“.

    Herstellen einer Verknüpfung durch Drag n' Drop

    Herstellen einer Verknüpfung durch Drag n' Drop

    » Mehr…

  • Interface- und Interaktionskonzept: Eingabe

    0

    Eine zentrale Frage bei der Interaktion mit dem Multitouch Lab Journal beschäftigt sich damit, wie Inhalte eingegeben (d.h. geschrieben oder generiert) werden können. Das Hard- und Softwarekonzept des MLJ sieht zu diesem Zweck einen speziellen Infrarot-LED-Stift vor, mit dem direkt auf die berührungsempfindliche Oberfläche geschrieben werden kann. Der folgende Artikel beschreibt, wie genau das funktioniert und wie das System den Nutzer bei der Eingabe intelligent unterstützt.

    Eingabe

    Das MLJ bietet zwar eine virtuelle Tastatur, ist aber für die Bedienung mit Stift und Hand optimiert. Das System unterstützt dabei den Aspekt, dass beim Schreiben meistens zwei Hände genutzt werden. Die bevorzugte Hand schreibt, die Andere verschiebt das Blatt. Bei der Eingabe mit dem Stift gilt deshalb der Grundsatz, dass mit dem Stift geschrieben und mit der Hand manipuliert wird, wie es auch Hinkley et al. vorschlagen (vgl. Stift- und Handbedienung von Multitouch-Systemen). Auf dem leeren Blatt werden Linien angezeigt. Sie regeln das Schriftbild und helfen dem Nutzer gerade zu schreiben. Weil ein IR-Stift unpräziser ist als sein analoges Gegenstück, haben die Linien einen Abstand von 8 mm. Bei Bedarf kann der Nutzer auch die Größe des Dokumentenfächers anpassen, wobei die Linien proportional mitskaliert werden. Gleiches gilt für das karierte Muster, welches, je nach Eingabemodus, vom System angezeigt wird.

    Schreib- und Zeichenmodi

    Zum Erstellen und Editieren von Dokumenten lassen sich grundsätzlich zwei Möglichkeiten unterscheiden. In der realen Welt werden leere Blätter von Hand beschrieben. Jede Berührung des Stiftes auf dem Blatt hat dabei eine unmittelbare Auswirkung. Ein Dokument in dieser Weise zu erstellen ist einfach und direkt, macht das spätere Bearbeiten aber schwierig. In der digitalen Welt dagegen werden Dokumente am Computer angelegt und Texte mit der Tastatur eingegeben. Die Dokumente bestehen in der Regel aus verschiedenen Elementen, die leicht editiert werden können, z.B. um Schreibfehler zu korrigieren oder ein ansprechendes Layout zu gestalten. Die Eingabeart im MLJ kombiniert die Vorteile dieser beiden Möglichkeiten. Sie unterstützt die direkte Eingabe mit einem Stift und bietet dem Nutzer gleichzeitig Hilfestellung beim Eingeben und Editieren. Zu diesem Zweck gibt es im MLJ drei verschiedene Eingabe-Modi:

    • Schreiben,
    • Zeichnen,
    • Freihand.

    Der Schreibmodus ist standardmäßig aktiviert. Er dient zum Eingeben von Text, Zahlen und chemischen Summenformeln (z.B. H2SO4). Das System arbeitet mit einer leistungsfähigen Handschrifterkennung und wandelt die handgeschriebenen Texte des Nutzers in Computerschrift um. Darüberhinaus verfügt das System über eine intelligente Autovervollständigung. Basierend auf den ersten Buchstaben eines Wortes macht das System Vorschläge zu dem, was der Nutzer vermutlich schreiben will. Dieses Prinzip wird unter anderem auch bei der Eingabe von SMS auf Mobiltelefonen und bei Suchmaschinen im Internet verwendet. Ein Kontextmenü über dem geschriebenen Wort zeigt dem Nutzer die Vorschläge des Systems an. Durch einen einfachen Tip kann er diese bestätigen. Ignoriert er die Vorschläge und schreibt weiter, blendet sich die Kontextbox selbsständig wieder aus.
    Darüber hinaus kann das MLJ-System auch die Bedeutung von Abkürzungen und Symbolen lernen. Dafür muss der Nutzer in den Einstellungen einmalig die Abkürzungen oder Symbole sowie die dazugehörigen Bedeutungen eingeben. Ein kreisrunder Pfeil könnte z.B. für die Tätigkeit „Zentrifugieren“ stehen. Wie in der oben beschriebenen Autovervollständigung, macht das System einen Vorschlag und wandelt die Abkürzung oder das Symbol in das entsprechend ausgeschriebene Wort um. So wird unterstützt, dass der Nutzer eigene Abkürzungen verwenden kann, wie er dies häufig auch im handschriftlichen Laborbuch tut (vgl. Artifact Model).

    Das MLJ im Zeichenmodus und eingeklappter Seitenleiste

    Das MLJ im Zeichenmodus und eingeklappter Seitenleiste

    Sobald das System erkennt, dass der Nutzer keinen Text eingibt sondern z.B. eine Zeichnung oder Tabelle anfertigen will, wechselt es automatisch in den Zeichenmodus. In diesem Modus wir das erwähnte karierte Muster auf dem Blatt angezeigt und die Handschrifterkennung ist ausgeschaltet (vgl. Abbildung oben). Wenn der Nutzer nun eine Linie auf das Blatt zeichnet, wird diese automatisch begradigt. Gleiches gilt für geometrische Formen, wie z.B. Kreise oder Vielecke. Der Zeichenmodus enthält zwei weitere Modi zum Zeichnen von Tabellen und chemischen Strukturformeln. Das MLJ erkennt dabei bestimmte Muster, z.B. Linien, die sich überkreuzen und eine Tabelle bilden, und bietet hier ebenfalls eine Art Autovervollständigung an. Bei einer Tabelle werden beispielsweise die fehlenden Zellen und Spalten ergänzt. Für alle Vervollständigungsvorschläge des Systems gilt, dass der Nutzer sie bestätigen oder einfach ignorieren kann. » Mehr…

  • Interface- und Interaktionskonzept: Dokumentation

    0

    Im vorherigen Artikel zum Bereich “Versuche” wurde beschrieben, wie Versuche im MLJ visualisiert und verwaltet werden. In diesem Artikel wird nun beschrieben, wie die Dokumentation der einzelnen Versuche aussieht bzw. funktioniert.

    Versuchsdokument

    Versuchsdokument im Präsentationsmodus

    Versuchsdokument im Präsentationsmodus

    Das Versuchsdokument ist mit einem Ausschnitt aus einem Laborbuch vergleichbar. Es enthält Alles, was zu einem Versuch dokumentiert wurde. In der realen Welt entspricht dies meist 2-4 Seiten in einem Laborbuch. Das Versuchsdokument im MLJ ähnelt einem Blog, bei dem die Informationen auf einer einzigen langen Seite untereinander angeordent sind. Das Dokument ist beliebig verlängerbar und lässt sich mit zwei Fingern scrollen (vgl. Abbildung oben). Wichtig beim Versuchsdokument ist, dass es alle Inhalte geordnet und in Computerschrift darstellt. Im Präsentationsmodus kann es nicht editiert werden. Dazu ist der Wechsel in den Arbeitsmodus nötig.

    Präsentations- und Arbeitsmodus

    Wechsel vom Präsentations- in den Arbeitsmodus

    Wechsel vom Präsentations- in den Arbeitsmodus

    In der Nutzungskontextanalyse hat sich gezeigt, dass viele Wissenschaflter zwei Laborbücher führen: ein handschriftliches und ein digitales (vgl. Artifact Model). Neben der einfachen Handhabung von digitalen Daten hat dies einen weiteren Grund. Ein digitales Laborbuch bietet die Möglichkeit, die Inhalte sauber anzuordnen, optisch ansprechende Seiten zu gestalten, Texte auszuformulieren und Computerschrift zu verwenden. Alle diese Aspekte sind dann besonders wichtig, wenn das Laborbuch anderen Personen gezeigt wird. Aber auch für die eigene Nachvollziehbarkeit ist ein sauber geschriebener Fließtext gut. Diese Form der Dokumentation kostet allerdings sehr viel Zeit und findet erst nach dem Versuch statt. Ein handschriftliches Laborbuch enthält dagegen die eventuell unleserliche Handschrift des Schreibers sowie Fehler, Durchstreichungen und Ähnliches. Außerdem werden hier häufig Stichwörter, Abkürzungen und Symbole verwendet. Diese Form der Dokumentation spart zwar Zeit, ist aber schlechter nachvollziehbar und wird von einigen Wissenschaftlern als nicht vorzeigbar empfunden. Um dem beschriebenen Spannungsfeld zwischen Schnelligkeit und Sauberkeit gerecht zu werden, gibt es im MLJ zwei verschiedene Modi für Präsentation und Arbeit. » Mehr…

  • Interface- und Interaktionskonzept: Bereich “Versuche”

    0

    Visualisierung der Versuche

    Der Bereich “Versuche” bietet alle Funktionen, die für das Planen, Vorbereiten, Durchführen, Dokumentieren und Analysieren von Versuchen nötig sind. Die Visualisierung aller Experimente eines Wissenschaftlers spielt dabei eine zentrale Rolle. Ordnung und Archivierung von Versuchen stellt Labormitarbeiter immer wieder vor Herausforderungen. Das handschriftliche Laborbuch ist aufgrund seiner linearen Abfolge chronologisch geordnet. Auf dem Computer dagegen archivieren viele Wissenschaftler ihre Versuche nach inhaltlichen Kriterien in Ordnern. Dabei wird z.B. die Versuchsreihe, das Ziel des Versuchs oder die verwendete Methode als Ordnungskriterium genutzt. Beide Ordnungsmethoden sind wichtig, bergen aber auch Probleme in sich. Wenn sich beispielsweise ein Versuch über eine längere Zeit erstreckt, müsste man bei der Dokumentation im Laborbuch gegebenenfalls Seiten freilassen oder Seiten nachträglich einkleben, was beides nicht zulässig ist. Bei der Organisation von Dokumenten auf dem PC geht der chronologische Ordnungsfaktor verloren und es kann es vorkommen, dass ein Dokument in mehrere Ordner gleichzeitig passen würde. Für das MLJ wurde deshalb eine neue Organisationsform für Versuchsdokumente entwickelt, welche die Vorteile digitaler und analoger Dokumentation vereint.

    Ordnung durch eine Baumstruktur

    Visualisierung der Versuche in einer Baumstruktur

    Visualisierung der Versuche in einer Baumstruktur

    Angelehnt an das mentale Modell von Forschungsarbeit, stellt im MLJ eine baumähnliche Struktur alle Versuche dar. Diese Art der Visualisierung soll dem Nutzer bei der Strukturierung seiner Arbeit helfen, den Überblick zu bewahren. Die Visualisierung beginnt mit einer Art Urknoten, der  eine Forschungsfrage oder eine Zieldefinition sein kann. Dort entspringen verschiedene Ansätze um sich der Forschungsfrage zu nähern. Jeder Ansatz wird als eigener Ast dargestellt. Dieser kann sich wiederum weiter aufteilen. Auf den einzelnen Ästen liegen eine Vielzahl von Versuchen in Form von kreisrunden Knoten.

    Versuchsknoten

    Jeder geplante oder durchgeführte Versuch wird durch einen Versuchsknoten repräsentiert. Knoten, die auf einem Ast liegen, bilden eine Versuchsreihe. Da Versuche oft auf den Ergebnissen des Vorgängerversuchs aufbauen, erlaubt das System sowohl neue Versuche anzulugen als auch bestehende, samt ihren Parametern, zu kopieren und wiederzuverwenden.

    Neuer Versuch durch "Zellteilung"

    Neuer Versuch durch "Zellteilung"

    Zum Anlegen eines neuen Versuchs ist ein langer Tip (ca. 2 Sekunden) auf die Stelle nötig, wo der Versuch eingeordnet werden soll. Ein bestehender Versuch kann dadurch kopiert werden, dass der Nutzer mit einem Finger den Vorlage-Versuch festhält und mit einem zweiten Finger eine ziehende Geste aus dem Versuchsknoten heraus ausführt (linkes Bild). Der Vorgang entspricht einer Art „Zellteilung“, d.h. der neue Versuch enthält alle Inhalte des Vorlage-Versuchs. Jeder Versuch enthält eine Identifikationsnummer (ID) und ist dadurch eindeutig identifizierbar. Zusätzlich kann jeder Versuch vom Nutzer selbst betitelt werden. Außerdem besitzt jeder Versuchsknoten eine Fortschrittsanzeige, die darstellt, wie weit der Versuch  fortgeschritten ist, oder ob er bereits abgeschlossen wurde. Die Berechnung des Fortschritts beruht dabei auf der Versuchsplanung, die über die Bereichsebene Planung durchgeführt werden kann. Aktuell laufende Versuche oder solche, bei denen eine Veränderung eintritt, werden besonders hervorgehoben. Sie sind größer als die anderen Versuchsknoten und werden von einem pulsierenden Licht umgeben (siehe unteres Bild). » Mehr…

  • Inspiration aus dem Web

    0

    Für die Phase der Konzeption und Gestaltung kann ein wenig Inspiration nie schaden. Hier ein paar ausgewählte Videos zum Thema Interaktions-/Interfacedesign:

Page 1 of 212»