Inhalt
| 1 | Einführung
| 2 | Konzeption
| 2.1 | Anforderungen
| 2.2 | Design
| 3 | Tests
| 4 | Implementierung
| 5 | Ausblick
1 Einführung
Im Rahmen des Kollaborative Systeme Moduls im Wintersemester 2019 / 2020 wurde ein Timer für den Accelerator konzipiert und implementiert. Mit Timer ist dabei eine Uhr gemeint, die einen bestimmten Zeitintervall abwärts zählt.
Die Idee, den Accelerator um eine Timer-Funktionalität zu erweitern, entstand passenderweise während einer Accelerator-Sitzung. Als Teilleistung für das Modul wurden alle Teilnehmer gebeten, eine Kurz-Präsentation (weniger als 15 Minuten) zu halten. Im Zuge dessen kam der Gedanke auf, dass eine zeitgebende Funktionalität ein expliziter Teil von Accelerator, der ja zunehmend für Vorlesungen genutzt wird, sein sollte.
Ein Timer würde zum einen die Präsentierenden dabei unterstützen in der Zeit zu bleiben. Zum anderen könnte er für die Organisation von Diskussionsrunden, Gruppen- und Einzelarbeiten oder Tests während Sitzungen genutzt werden.
2 Konzeption
Zunächst wird an dieser Stelle der Konzeptions-Prozess skizziert. Dazu wird unter anderem auf die Anforderungen eingegangen, sowie die Planung des Timers mittels Mockups verdeutlicht. Dabei ist der Timer klar von einer Stoppuhr zu unterscheiden.
2.1 Anforderungen
Nachdem die Implementierung eines Timers als Projektarbeit feststand und mit den betreuenden Professoren abgeklärt wurde, stellte sich die Frage, welche konkreten Funktionalitäten und Gestaltungsmöglichkeiten dieser einem Nutzer bieten soll. Obwohl die Timer-Funktionalität selbst einen vergleichsweise geringen Umfang aufweist, ergab sich durch die Einbettung in das System Accelerator eine Vielzahl an Fragestellungen, die frühzeitig diskutiert und entschieden werden mussten.
Dazu gehörten u. a.:
- Welche Accelerator-Rolle kann den Timer nutzen und sehen?
- Wo soll der Timer und seine Bedienelemente platziert werden?
- Welche Minimal- und Maximal-Werte werden bezüglich der Zeit vorgegeben?
- Welche Optionen zur Konfiguration müssen bspw. sollten Nutzern gegeben werden?
Auf Basis dieser Fragen wurden zu Beginn der Entwicklungsphase grundlegende Anforderungen (siehe Tabelle 1) festgehalten.
| Kürzel | Beschreibung der Anforderung |
|---|---|
| A_01 | Timer-Funktionalität via eigenen Button. |
| A_02 | Eigenes Modal für die Konfigurierung des Timers. |
| A_03 | Einstellung der Zeit. |
| A_04 | Einstellung der Sichtbarkeit (für Moderator und / oder Teilnehmer). |
| A_05 | Timer ist „verschiebbar“ (draggable). |
| A_06 | Löschen des Timers. |
| A_07 | Zurücksetzen des Timers. |
| A_08 | Speichern / Anzeigen der verbleibenden Zeit. |
| A_09 | Positionierung des Timers (Vertikale und horizontale Ausrichtung). |
| A_10 | Dynamische Generierung von Anzeige-Elementen. |
| A_11 | „Andocken“ des Timers an Fenster innerhalb des Accelerators. |
| A_12 | Start / Stopp – Funktionalität für den Timer. |
| A_13 | Visuelles Feedback für Start / Stopp. |
| A_14 | Design „Punktetimer“ umsetzen. |
2.2 Design
In diesem Abschnitt wird in zwei grundlegende Komponenten unterschieden:
- Der Timer selbst, als die visuelle Darstellung der ablaufenden Zeit für den Nutzer)
- Das Timer Settings Modal, als die Einstellungskomponente (in der u.a. der gewünschter Zeitintervall eingegeben wird)
Auf beide Komponenten wird nun separat eingegangen, um deren jeweiligen Entwicklungsprozess zu veranschaulichen.
2.2.1 Timer
Die grundlegende Gestaltung für den Timer orientierte sich an dem Konzept eines Head-up Displays (HUD), wie es zum Beispiel in Computerspielen benutzt wird. Dort ist das HUD der Anzeigebereich in dem einem Spieler Daten angezeigt werden, wie z.B. die aktuelle Levelanzahl, Gesundheit oder Position, ohne dass diese Daten die aktuelle Szene überdecken. Das Ziel liegt in dem subtilen Vermitteln von Informationen, ohne dass es zu einem Bruch in der Konzentration oder einer Verdeckung der unterliegenden Inhalte kommt.
Der zweite Einflussfaktor ergab sich durch die Metapher einer Ampel, auf welcher die Gestaltung basierte. Eine Metapher drückt Unbekanntes in Form von Vertrautem aus. Wenn wir über etwas Abstraktes sprechen, verwenden wir oft Metaphern, um es klar und einfach zu erklären (Lakoff, & Johnson, 1980).
“Metaphor is a device for seeing something in terms of something else. It brings out the thisness of a that, or the thatness of a this.” (Burke, 1945)
Wir haben die Metapher einer Ampel für das Timer-Design gewählt: Entsprechend einer Ampel wird mit drei Farben und deren Reihenfolge gearbeitet: So gibt die Farbe Grün in der Anzeige an, dass dem Nutzer des Timers noch viel Zeit bleibt. Die Farbe Gelb zeigt an, dass noch Zeit ist, jedoch demnächst zum Schluss gekommen werden sollte. Zuletzt gibt die Farbe Rot an, dass die Zeit (bald) vorbei ist.
Die Nutzung von Metaphern bietet Vorteile innerhalb des Designs. Die Metapher ist eine literarische Redewendung, die Bilder, Geschichten oder materielle Dinge benutzt, um weniger greifbare Dinge oder einige immaterielle Eigenschaften oder Ideen darzustellen. Diese verbale Verwendung von Metaphern ist eine sehr effektive Fähigkeit in der Kommunikation. Erstens ermöglicht sie ein besseres Verständnis, zweitens kann sie eine starke emotionale Bindung zwischen dem Publikum und der beabsichtigten Bedeutung des Themas bilden. Dieser Vorteil von Metaphern wird nicht nur in der verbalen Kommunikation genutzt, sondern auch in der nonverbalen Kommunikation, insbesondere im Designbereich, von Produkten, Grafiken und User Interface bis hin zu Dienstleistungen.
Die folgende Abbildung zeigt ein Mockup für einen Timer, der nach der Ampelmetapher gestaltet ist.
[Screenshot]
2.2.2 Timer Settings Modal
Im Accelerator werden sogenannte Modale benutzt, um Einstellungen vorzunehmen, z.B: die Auswahl von Präsentationsfolien. Innerhalb des Timer Modals werden dem entsprechend Einstellungen bezüglich des Timers gruppiert und erfasst.
Der Verlauf des zugehörigen Dialogs für die Erstellung / Löschung eines Timers wurde mittels Mockups gestaltet und als Grundlage für die Implementierung genutzt. Im Verlauf der Entwicklung kamen noch weitere Optionen als dargestellt hinzu.
[Screenshot]
3 Tests
Parallel zur Implementierung wurden mehrere Testfälle erstellt. Ein Testfall ist eine Reihe von (dokumentierten) Aktionen, die ausgeführt werden, um eine bestimmte Funktion oder Funktionalität des Timers zu bestimmen und zu validieren. Dafür ist es zum einen nötig, festzulegen, welches Verhalten erwartet ist. Auf Basis davon wird überprüft, ob das gezeigte Verhalten dem spezifizierten Verhalten entspricht.
Das Spezifizieren von Testfällen zwang uns frühzeitig dazu, genau zu besprechen und festzulegen, welches Verhalten von welcher Einheit erwartet wird. Das wiederholte Abarbeiten der Testfälle führte darüber hinaus zu einem besseren Überblick über den aktuellen Stand und gab zudem eine Struktur für die Implementierung.
Der folgende Abschnitt enthält die Testfälle, welche für den Timer und das Timer Settings Modal erstellt und genutzt wurden.
4 Implementierung
Dieser Abschnitt beschreibt den aktuellen Stand des Timers zum Zeitpunkt der Zwischenpräsentation.
Dieser Abschnitt beschreibt den aktuellen Stand des Timers zum Zeitpunkt der Abschlusspräsentation.
4.1 Timer Settings Modal
Timer Button Das Settings Modal wird über den Timer-Button geöffnet. Dieser befindet sich in der Toolbar, die der Rolle des Moderators zur Verfügung steht. Der Button ist aktuell neben dem Clock-Button platziert, dies kann jedoch sehr leicht geändert werden.
[Screenshot Timer Button]
Die Sanduhr als Symbol wurde für den Timer ausgewählt, da eine Uhrdarstellng schon existierte. Das Zahnrad deutet darauf hin, dass hier weitere Einstellungen ausgewählt werden können.
Ein Klick auf den Timer Button öffnet das zugehörige Modal, in welchem es möglich ist, verschiedene Einstellungen festzulegen.
[Screenshot Modal]
Dazu gehört folgendes:
Visibility An dieser Stelle kann der Nutzer auswählen, wer den timer nutzt / wem dieser angezeigt wird. Je nach Einstellung ist hier der Rollen Wechsel zu beachten.
Time Die Eingabe einer Zeitdauer erfolgt an dieser Stelle. Dabei werden Input Felder für Stunden, Minuten und Sekunden zur Verfügung gestellt. Im code wird dies wie folgt verarbeitet …
Position Der Nutzer wählt an hier aus, ob der Timer vertikal oder horizontal angezeigt werden soll.
Style Der Nutzer kann an dieser Stelle festlegen, welches Design der Timer aufweisen soll. Dabei stehen aktuell zwei Optionen zur Verfügung. Diese können in zukünftigen Iterationen erweitert werden und dann als Option im Drop Down Menü erweitert werden.
Delete Timer Das Settings Modal enthält auch einen Button, um den Timer zu löschen und dessen Anzeige zu beenden.
4.2 Timer
Start / Stopp Funktionalität Der Timer lässt sich bei Bedarf pausieren. Dazu werden jeweils Buttons zur Verfügung gestellt.
Style Option 1 : Pixeltimer [Screenshot]
Option 2 : Punktetimer [Screenshot]
Ausrichtung
- Vertikal
- Horizontal
4.3 Deployment
Beschreibung des Test-Branch ?
5 Ausblick
Dieser Abschnitt gibt einen Ausblick auf die zukünftige Nutzung bzw. Erweiterung der implementierten Timer-Funktionalität. Zudem wird skizziert wie die Funktionalität erweitert werden könnte.
5.1 Zukünftige Nutzung und Erweiterung
Eine Stoppuhr-Funktionalität könnte hinzugefügt werden. Diese könnte ebenfalls über den Timer Button eingestellt und gestartet werden.
Es könnte ein Pacman-Timer implementiert werden. [Screenshot]
5.2 Lessons learned
Reflexion über die Arbeitsweise