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 55 additions and 57 deletions
    Timer.md
    View page @ f73520fb
    ......@@ -3,8 +3,6 @@
    #### | 1 | [Einführung](#1--einführung)
    #### | 2 | [Konzeption](#2--konzeption)
    #### | 2.1 | [Anforderungen](#21-anforderungen)
    #### | 2.2 | [Design](#22-design)
    #### | 3 | [Tests](#3--tests)
    #### | 4 | [Implementierung](#4--implementierung)
    #### | 5 | [Ausblick](#5--ausblick)
    ......@@ -35,30 +33,28 @@ Dazu gehörten u. a.:
    * 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.
    Auf Basis dieser Fragen wurden zu Beginn der Entwicklungsphase grundlegende Anforderungen (siehe Tabelle 1) festgehalten und während der Entwicklung konkretisiert und erweitert.
    | Kürzel | Beschreibung der Anforderung |
    | -------- | -------- |
    | A_01 | Timer-Funktionalität via eigenen Button. |
    | A_01 | Timer-Funktionalität via eigenen Button ansprechen. |
    | 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_03 | Einstellung der Zeit mittels Stunden/Minuten/Sekunden. |
    | A_04 | Einstellung der Sichtbarkeit (für Moderator und / oder alle Teilnehmer. |
    | A_05 | Der Timer ist „verschiebbar“ (draggable). |
    | A_06 | Das Löschen des Timers via eigenem Button. |
    | A_07 | Ein Zurücksetzen des Timers für mehrmalige Nutzung. |
    | A_08 | Geeignetes Speichern / Anzeigen der verbleibenden Zeit. |
    | A_09 | Einstellung der Positionierung des Timers (Vertikale und horizontale Ausrichtung). |
    | A_10 | Dynamische Generierung von Anzeige-Elementen in Relation zur Timer-Dauer. |
    | A_11 | Ein „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. |
    | A_13 | Visuelles Feedback für Start / Stopp, sowie wenn der Timer abelaufen ist |
    ## 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)
    * 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.
    ......@@ -67,48 +63,52 @@ Auf beide Komponenten wird nun separat eingegangen, um deren jeweiligen Entwickl
    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).
    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.
    > “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)
    “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.
    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.
    Zusätzlich wird der Farbverlauf zwischen allen drei Fraben genutzt, wie es in der folgenden Skizze angedeutet ist.
    ![Ampelmethapher_Skizze_Acc](uploads/b6412544d15f80d189dffe1de4b5473e/Ampelmethapher_Skizze_Acc.PNG)
    *Abbildung 1: Skizze*
    *Abbildung 1: Skizze zur Ampelmetapher*
    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 Nutzung von Metaphern innerhalb von Design bietet verschiedene Vorteile. 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. Das Design von Produkten, Grafiken, User Interfaces bis hin zu Dienstleistungen kann davon profitieren.
    Die folgenden Abbildungen zeigen Mockups für einen Timer, der nach der Ampelmetapher gestaltet ist.
    ![Ampelmethapher_Mockup_Acc](uploads/08cf3582e7eb9f9321cef05587e14106/Ampelmethapher_Mockup_Acc.PNG =990x990)
    ![Ampelmethapher_Mockup_Acc](uploads/08cf3582e7eb9f9321cef05587e14106/Ampelmethapher_Mockup_Acc.PNG)
    *Abbildung 1: Mockup*
    *Abbildung 2: Mockup Ampelmetapher als HUD-Element*
    ![Ampelmethapher_Mockup_vertikal_Acc](uploads/daeca329e58aa9890871be38e712eb98/Ampelmethapher_Mockup_vertikal_Acc.PNG)
    *Abbildung 1: Mockup*
    *Abbildung 3: Mockup Ampelmetapher vertikale Ausrichtung*
    Das Arbeiten mit Mockups half uns von Beginn an grundlgegende Charakteristika des Timers zu entscheiden. Dazu gehörte die Farbgebung, Position und Ausrichtung des Timers. Andere Charakteristika ergaben sich durch den Aufbau anderer Accelerator-Features und des Accelerators selbst. Diese und weitere Mockups dienten als Leitfaden für die Entwicklung, besonders da Pair Programming nicht immer möglich war.
    ### 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.
    Im Accelerator werden sogenannte Modale benutzt, um Einstellungen vorzunehmen, z.B: die Auswahl von Präsentationsfolien. Innerhalb des Timer Settings Modals werden dem entsprechend Konfigurationsmöglichkeiten bezüglich des Timers gruppiert. Bevor das Timer Settings Modal und der zugehörige Timer Button implementiert wurde, wurde ein Dialog dafür festgelegt.
    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.
    Die Abbildung zeigt des Verlauf des Dialogs für die Erstellung / Löschung eines Timers. Sie diente als Grundlage für die Implementierung, auch wenn diese nicht eins zu eins umgesetzt wurde.
    ![Timer-Dialog_Mockup_Acc](uploads/7c2db3c786d8b9deef4f38985f05805b/Timer-Dialog_Mockup_Acc.PNG)
    *Abbildung 1: Dialog "Timer erstellen"*
    *Abbildung 4: Dialog "Timer erstellen"*
    Die Entscheidung, den Timer sowohl in vertikaler als aus horizontaler Ausrichtung anzubieten, wurde recht früh getroffen. Zunächst sollte der Nutzer die Ausrichtung über eine Option festlegen können. Dies wurde jedoch überflüssig, nachdem der Timer so überarbeitet wurde, dass der Nutzer die Ausrichtung per Draggable-Funktion jederzeit ändern kann.
    --------------
    # 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.
    Der folgende Abschnitt beschreibt, wie der Timer parallel zur Entwicklung getestet wurde. Dazu wurden mehrere Testfälle festgelegt, während der Entwicklung erweitert und zum Testen genutzt. 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.
    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. Während der Entwicklung hat jeweils ein Student die Rolle des Testers übernommen und die jeweiligen Erweiterungen des anderen getestet. Der Tester geht dabei jeden Schritt eines Testfalles durch und validiert das Verhalten. Die Ergebnisse jedes Tests werden festgehalten mittels *Pass, Fail, Suspended* und ein Fehlverhalten bei Bedarf dokumentiert. Der Entwickler bekommt somit explizites und detailiertes Feedback zum Verhalten seiner Änderungen / Erweiterungen und kann Auswirkungen besser einschätzen.
    Der folgende Abschnitt enthält die Testfälle, welche für den Timer und das Timer Settings Modal erstellt und genutzt wurden.
    Der folgende Abschnitt enthält eine Auswahl der Testfälle, welche für den Timer und das Timer Settings Modal erstellt und genutzt wurden.
    Step Details | Expected Results |
    | ------ | ------ |
    ......@@ -130,19 +130,21 @@ Step Details | Expected Results |
    | Change the role while the timer is paused (Visibility set to Moderator) | Timer is still visible if visibility is set for all, Timer is not visible if visibility is set for Moderator role only |
    | Change the position of the Timer by dragging it to a corner | Timer changes from horizontal to vertical layout and back |
    Für die Testfälle wurde ein Template genutzt:
    Quelle für die Templates:
    https://www.guru99.com/download-sample-test-case-template-with-explanation-of-important-fields.html
    (Last Checked 07.01.2020)
    Für die vollständige Spezifikation der Testfälle wurde ein Template genutzt:
    [text](https://www.guru99.com/download-sample-test-case-template-with-explanation-of-important-fields.html)
    (Zuletzt überprüft am 06.01.2020)
    -------------
    # 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.
    Das Video zeigt die grundlegende Gestaltung und Funktionalität des Timers zum Zeitpunkt des Projektabschlusses. Dazu gehört der Farbverlauf, Leserichtung und Position des endgültigen Designs, sowie die Funktionalitäten wie Timer erstellen, Timer löschen, Start / Stopp Funktionalität und automatische Anpassung der Ausrichtung (horizointal zu vertikal und zurück).
    ![Timer_Demo-1](uploads/34e001b96c34777ce2b3429f709c89f8/Timer_Demo-1.mp4)
    *Screen Recording 1: Demonstration Timer*
    Zudem zeigt das Video einen Bug, der zu Zeitpunkt der Aufnahme noch bestand, inzwischen aber gefixed ist: Wenn das Timer Settings Modal geöffnet wird, während der Timer läuft, wird dieser nicht mehr korrekt angezeigt.
    ## 4.1 Timer Settings Modal
    ......@@ -177,25 +179,22 @@ Das Settings Modal enthält auch einen Button, um den Timer zu löschen und dess
    ## 4.2 Timer
    Zuerst wurde eine Erstversion eines Timers implementiert, um die Logik zu entwicklen.
    Zuerst wurde eine simple Erstversion eines Timers implementiert, um die Logik zu entwicklen und mit dem Code des Accelerator vertraut zu werden.
    ![Erste_Version_Timer_Acc](uploads/47b7af82cd3c3c602f3434d1d078355b/Erste_Version_Timer_Acc.PNG)
    *Abbildung 5: Erstversion Timer*
    **Start / Stopp Funktionalität**
    Der Timer lässt sich bei Bedarf pausieren. Dazu werden jeweils Buttons zur Verfügung gestellt.
    Diese Erstversion half uns dabei, die Anforderungen für den Timer weiter zu konkretisieren. Im folgenden wird auf einige Details der Implementierung eingegangen.
    **Style**
    Option 1 : Pixeltimer
    [Screenshot]
    Bei der Erstellung des Timers wird die Anzahl der Darstellungselemente (Punkte) dynamisch festgelegt. Aktuell ist die maximale Anzahl an Punkten 14. Dies kann bei Bedarf geändert werden. Bei der Breite des Timers ist immer darauf zu achten, dass diese nicht länger ist als die Höhe des Fensters (aufgrund der vertikalen Ausrichtung).
    Option 2 : Punktetimer
    [Screenshot]
    **Start / Stopp Funktionalität**
    Der Timer lässt sich bei Bedarf pausieren. Dazu werden jeweils Buttons zur Verfügung gestellt. Dabei haben wir uns für einen Hoover-Effekt entschieden. Die Farbe Blau wird im Accelerator genutzt um Dinge hervorzuheben z.B: welche Buttons gedrückt sind. Um uns diese "Gewöhnung des Nutzers" zu Nutzen zu machen, ist das selbe Blau in den Buttons und der Zeitangabe aufgegriffen.
    **Ausrichtung**
    ![Stopp_Timer](uploads/a4447a490d1e37e29f4b93c85d71c28f/Stopp_Timer.PNG)
    * Vertikal
    * Horizontal
    *Abbildung 6: Stopp auf dem Timer*
    ## 4.3 Deployment
    ......@@ -205,16 +204,15 @@ 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
    ## 5.1 Erweiterung
    Eine Stoppuhr-Funktionalität könnte hinzugefügt werden. Diese könnte ebenfalls über den Timer Button eingestellt und gestartet werden.
    Während der Bearbeitung des Timers kamen uns ein paar Ideen für Erweiterungen:
    Es könnte ein Pacman-Timer implementiert werden.
    [Screenshot]
    * Eine Stoppuhr-Funktionalität könnte hinzugefügt werden. Diese könnte ebenfalls über den Timer Button eingestellt und gestartet werden.
    * Leider kam uns zu spät die Idee, aber wir hätten den Timer gern auch in einer Pacman-Variante angeboten. Für das Design könnte sich an diesem Video orientiert werden : [text](https://www.youtube.com/watch?v=NUlgyQsYznI&t=71s).
    Generell kann der Timer um andere Styles erweitert werden. Statt Punkten könnten z.B: andere Formen ausprobiert werden. Diese alternativen Styles könnten in einem Drop-Down-Menü im Settings Modal parallel zu unserem Timer angeboten werden.
    ## 5.2 Lessons learned
    Reflexion über die Arbeitsweise
    Trotz des verhältnismäßig geringen Umfangs des Timers an sich, erforderte dieser mehr Zeit als erwartet. Die Einarbeitung in die relevanten Funktionen und Dateien (besonders bezüglich der Server-Konfiguration) war recht zeitintensiv. Deshalb empfehlen wir künftigen Iterationen sich lieber auf kleine Idee / Features zu fokussieren, diese dafür aber umfassend zu testen, damit der Code in Accelerator ausgerollt werden kann. Dabei war es für uns sehr hilfreich von Anfang an Testfälle zu schreiben und zu teilen. Diese dienen dann bei der Entwicklung als Leitfaden, ebenso wie Mockups bei der Entwicklung als Leitfaden für das Design dienen sollten.