What framework or tools are you going to use? Why?
Wir benutzen HTML, CSS und JavaScript, da wir unseren Prototypen einfach ändern wollen. Da wir zur geleiteten Erstellung von Schemata vielfach den “selben” Bildschirm nutzen und sich lediglich die Fragen ändern, wäre es ein sehr großer Aufwand gewesen, dies mit gängigen Prototyping-Tools umzusetzen. HTML, CSS und JavaScript geben uns die Möglichkeit, die Inhalte dynamisch zu ändern.
List your functional and non-functional requirements (features) you are planning to include in your High-Fidelity Prototype.
Funktional:
- Geleitete Erstellung von Schemata
- Manuelle Suche nach bestimmten “Subschemata”
- Speichern eines erstellten Schemas
- Navigation zwischen den einzelnen Funktionen
- Übersicht der Abgespeicherten Schemata
Nicht-Funktional:
- Intuitive Bedienung (Keine “Anleitung” oder “Tutorial” o.Ä. notwendig)
- Einfache Handhabung: DIe geleitete Erstellung von Schemata soll die kognitive Last der Lernenden verringern und nicht zu weiterer Verwirrung beitragen.
Timeline
| Was? | Bis wann? |
| High-Fidelity Prototype Grundgerüst | 11.06.2021 |
| Farbkonzept – Erster Entwurf | 14.06.2021 |
| Schema-Übersicht entwickeln | 18.06.2021 |
| Einbingung aller Fragen zu einem Schema | 21.06.2021 |
| Icons Überprüfen/Raussuchen/Ersetzen | 24.06.2021 |
| Suchfunktion darstellen | 28.06.2021 |
| Schriftarten Überprüfen/Ersetzen | 28.06.2021 |
| Fragen an Schema-Übersicht koppeln | 05.07.2021 |
| Farbkonzept – Finalisieren | 05.07.2021 |
| Hintergrundgestaltung | 05.07.2021 |
| Namensgebung von Schemata einbinden | 12.07.2021 |
| Progress-Übersicht während Fragen entwickeln und einbinden | 12.07.2021 |
| „Hauptmenü“ fertig | 18.06.2021 |
| Geleitete Erstellung fertig | 28.06.2021 |
| Manuelle Suche fertig | 01.07.2021 |
| „Aktenkoffer“ fertig | 12.07.2021 |
Link zum Prototyp
https://userpage.fu-berlin.de/tobias80/prototyp/
Questions
What menu type did you choose and why?
Wir haben uns für ein Grid-Menü entschieden, da wir ein “aufgeräumtes” und “übersichtliches” Interface schaffen wollten, welches sowohl als Desktop-Anwendung, als auch auf größeren Tablets noch ausreichend gut funktioniert. Durch große Symbole möchten wir schaffen, dass die Nutzer*innen nach kurzer “Lernphase” die Anwendung benutzen können ohne die Schrift auf den Buttons lesen zu müssen. Darüber hinaus sind vielen Nutzern die “Kacheln” als Menüstruktur z.B. von Windows-Betriebssystemen bekannt.
Which UI controls are appropriate for your application and why?
Als UI-Controls kommen nur Maus und Tastatur, beziehungsweise die Umsetzung dieser durch einen Touchscreen in Frage. Alle Funktionen, die eine Maus kann auch über einen Touchscreen umgesetzt werden können, aber nicht anders herum, wird sich für die Analyse auf Maus und Tastatur beschränkt.
Which design patterns are suitable for your application and which ones have you implemented or used? Why?
Für unsere Anwendung wäre beispielsweise ein Design Pattern für die Suche nach Schemata verwendbar. Aktuell ist dort ein Input-Feld als Platzhalter angelegt. Im weiteren Verlauf wird dies entweder inspiriert durch Design Patterns abgeändert oder komplett durch eines ersetzt. Ansonsten haben wir bisher keines Umgesetzt und bis auf die Suchfunktion wird wahrscheinlich nichts durch solche ersetzt.