Skip to content
Snippets Groups Projects

Changes

Page history
  • New page
  • Templates
    • Update Timer authored by Georgia Marie-Theres König's avatar Georgia Marie-Theres König
    Hide whitespace changes
    Inline Side-by-side
    Showing
    with 90 additions and 37 deletions
    Timer.md
    View page @ 5f3a6996
    ......@@ -11,24 +11,31 @@
    ------
    # 1 Einführung
    # 1 Einführung
    Im Rahmen des "Kollaborative Systeme" Moduls im Wintersemester 2019 / 2020 wurde ein Timer für den Accelerator konzipiert und implementiert.
    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 dazu entstand während einer Accelerator-Sitzung. Innerhalb dieser wurden alle Teilnehmer gebeten, eine Kurz-Präsentation zu halten. Dabei kam der Gedanke auf, dass eine zeitangebende Funktionalität ein expliziter Teil von Accelerator sein sollte, da dieser häufig für Vorlesungen und Präsentationen genutzt wird. Ein Timer wäre sowohl für die Rolle des Moderators als auch der Teilnehmer zur Gestaltung von Accelerator-Sitzungen nützlich. Der Timer ist hierbei von einer Stoppuhr zu unterscheiden.
    Zielsetzung : Der implementierte Timer sollte die in den folgenden aufgezählten Anforderungen erfüllen.
    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.
    Projektkontext: Kurze Einführung in Accelerator (?), kurzer Überblick über die verwendete IDE, wo die Code-Base liegt, Code-Versionierung und ähnliches.
    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.
    Bedienelemente: Der Timer kann durch einen eigenen Button angesprochen werden.
    ------
    # 2 Konzeption
    # 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.
    In diesem Kapitel wird die Konzeption beschrieben (Anforderungen, Darstellung der verschiedenen Varianten mittels Mockups, etc.)
    ## 2.1 Anforderungen
    ## 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.
    Im Folgenden werden die grundlegenden Anforderungen festgehalten.
    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 |
    | -------- | -------- |
    ......@@ -48,44 +55,70 @@ Im Folgenden werden die grundlegenden Anforderungen festgehalten.
    | A_14 | Design „Punktetimer“ umsetzen. |
    ## 2.2 Design
    ## 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)
    ### 2.2.1 Ampelmetapher
    A metaphor expresses things unfamiliar in terms of things familiar. When we talk about something abstract, we often use metaphors to explain it clearly and easily (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.
    Metaphor is a literary figure of speech that uses images, stories or tangible things to represent less tangible things or some intangible qualities or ideas.
    This function allows metaphors also to be used for any rhetorical figures of speech that achieve their effectiveness and persuasiveness via association, comparison or resemblance. This verbal use of metaphors is a very effective skill in communication because it does not only provide better understanding but it can also form a powerful emotional attachment between the audience and the intended meaning of the subject. This advantage in metaphors is not only used in verbal communication but also applied in non-verbal communication, especially in the design domain, from products, graphics and UI (User Interface) to services.
    Designers communicate with users through products, and design is the mean of communication for them. As metaphor has a role in communication, design engages also the cross-mapping process between the idea (the source) and the product (the target). Knowing and applying this in the design process, metaphors can provide designers with intuition and inspiration to trigger their imagination. It can also deliver better understanding to users when they experience the product since the embedded metaphor makes the product familiar to them.
    Consequently, when metaphors are applied in design, designers can provide familiar and meaningful products to users (Hekkert & Cila, 2009).
    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
    In diesem Abschnitt werden mögliche Tests für den Timer beschrieben.
    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.
    # 4 Implementierung
    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.
    Zwischenstand zum 13.01. - Dieser Abschnitt beschreibt den aktuellen Stand des Timers zum Zeitpunkt der Zwischenpräsentation.
    Der folgende Abschnitt enthält die Testfälle, welche für den Timer und das Timer Settings Modal erstellt und genutzt wurden.
    Finale Version zum 21.01. - Dieser Abschnitt beschreibt den aktuellen Stand des Timers zum Zeitpunkt der Abschlusspräsentation.
    -------------
    # 4 Implementierung
    ## 4.1 Implementierungsdetails
    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.
    - Modal Timer Settings
    - Start /Stopp Funktionalität
    - Löschen
    ## 4.1 Timer Settings Modal
    **Timer Button**
    Der Timer 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.
    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.
    **Timer Settings Modal**
    Ein Click auf den timer Botton öffnet das Settings modal. In diesem ist es möglich verschiedene Einstellungen für den timer festzulegen. Dazu gehört folgendes.
    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.
    ......@@ -97,26 +130,46 @@ Die Eingabe einer Zeitdauer erfolgt an dieser Stelle. Dabei werden Input Felder
    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 die folgenden Optionen zur Verfügung.
    Diese können in zukünftigen Iterationen erweitert werden und dann als Option im Drop Down Menü erweitert werden.
    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.
    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 Button zu Verfügung gestellt.
    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]
    ## 4.2 Deployment
    **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
    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.
    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
    ......