Das Design der Benutzeroberfl%C3%A4che - Anathema-e7/ZIMTOS-SPACEFIND-3000 GitHub Wiki

#Das Design der Benutzeroberfläche

von Kevin Wisotzki und Lisa Anselmi

##Anforderungen

Es sind zu erstellen:

  • Eine Start/Begrüßungsseite
  • Ein- und Ausgabeseiten für Lehrersuche und Stundenpläne
  • Eine Vorlage, in die der 3D Stundenplan eingebunden werden kann

Mit der Implementierung der Benutzeroberfläche wird schnell klar, wo welche Features gebraucht werden. Es ist daher von Vorteil, einen Prototyp für die UI herzustellen, auf dessen Basis die Funktionen implementiert werden können. Die erste Konzeptzeichung für die UI ist hier zu finden.

Zur Implementierung eignet sich die Bootstrap Bibliothek, um der Seite einen zeitlichen Look zu verleihen, dabei aber für Handydisplays kompakt bleiben. ##Protokoll

11.11.2015
In dem Bootstrap-Template Zweig wird dem Namen entsprechend eine Vorlage erstellt. Sollte die Gruppe dem Design des Template beistimmen, wird die Arbeit an einer vollständigen Implementierung der Benutzeroberfläche begonnen.

12.11.2015
Die erste Version der Template ist fertig. Index.html ist gefüllt mit einigen Beispielementen, die anderen Seiten sind noch leer. Es sollte gemeinsam überlegt werden, welche Eingaben vom Nutzer gemacht werden können/sollten und in welcher Form die Ergebnisse dargestellt werden.

17.11.2015 Nach einer kurzen Einweisung in die Template wurde ein Konzept für die vollständige Benutzeroberfläche erstellt. Die Arbeitsaufteilung steht noch aus.

19.11.2015
Die Aufgabenverteilung lautet wie folgt:
Lisa:

  • Eingabeseite für Stundenplan
  • Eingabeseite für Lehrersuche

Kevin:

  • Ausgabeseite für Stundenplan
  • Ausgabeseite für Lehrersuche
  • Interaktive Seite für Schulplan

Dynamische Inhaltgenerierung via PHP und Javascript wird vorerst ignoriert, Das HTML-Design muss vorliegen.

26.11.2015
Die Konzepte für die Eingabeseiten wurden konkretisiert.

  • Dropdownmenü für Klasse
  • Dropdownmenü mit Tickboxes für Kurse
  • Tickboxes für den Turnus
  • Eingabefelder für Lehrernamen

30.11.2015
Für eine verbesserte logische Struktur wurde das Konzept der UI leicht geändert.

  • Bei dem ersten Aufruf der Web-App wird eien Setup Seite aufgerufen, welche den Nutzer dazu aufruft, seine Klasse und Kurse einzugeben
  • Bei jedem anderem Aufruf ist der Stundenplan die Hauptseite, eine Eingabeseite für Stundenpläne ist nicht mehr nötig
  • Alle anderen Einstellungen sind in einer seperaten Settings-Seite möglich.

08.12.2015
Angesichts der baldigen Neuauflage des Schulplansystems und Inkompatiblität zwischen mehreren Frameworks werden einige Funktionen gekürzt. Die neue Zeichnung klärt auf:

  • Bei der Lehrersuche wird jediglich nur ein Block angezeigt werden können.
  • Der Stundenplan wird vorerst nur für die OG3 funktionieren.
  • Eine Zentrale Seite mit allen Einstellungen ist mit der Kürzung der Funktionen nicht mehr erforderlich.
  • Die Startseite wird wieder den Nutzer in die Features einführen.

09.12.2015
Für alle essentielle Seiten steht eine erste Version bereit. Während die Funktionen weiter implementiert werden, können Layout und Design weiter verändert werden, da sie im Moment noch etwas grob aussehen. Was ist neu:

planwahl.html

  • Dropdown-Menü mit Tickboxes für die Kurswahl
  • Buttom zum Übernehmen der Eingaben (leitet vorerst nur weiter zu stundenplan.html)

lehrersuche.html

  • Eingabefeld für den Lehrernamen
  • Dropdown-Menüs für Wochentag- und Blockauswahl
  • Button zum Übernehmen der Eingaben

10.12.2015
Trotz der Kürzung von mehreren Funktion wird die Optionsseite wieder eingeführt, vorerst nur mit einer Verlinkung zu planwahl.html. In Zukunft soll diese Seite verhindern, dass der User entweder nur ein mal die Kurse wählen kann, oder jedes mal durch planwahl.html gehen muss, um zu stundenplan.html zu kommen. Eine off-canvas sidebar auf stundenplan.html könnte das Wechseln von Kursen auch ermöglichen, aber zum testen und weiterimplementieren reicht eine Optionsseite aus.

11.12.2015
Alle Eingabeseiten und Stundenplan wurden überarbeitet. Komponenten sind zentriert und konsistent in einer Bildschirmbreite bis 768 px. Änderungen:

lehrersuche.html & planwahl.html

  • Komponenten zentriert
  • Breite der Kompontenten angepasst

stundenplan.html

  • Block- und Zeitanzeigen sind jetzt immer links vom Block
  • Eine Wochentagsleiste erlaubt das Wechseln zu den verschiedenen Wochentagen, die Anordnungen bleiben bei Skalierungen konsistent
⚠️ **GitHub.com Fallback** ⚠️