Update Dokumentation authored by Kunz Susanne's avatar Kunz Susanne
...@@ -64,17 +64,12 @@ Bei der Erstellung der Spielwelt wurde mit Substance Painter und Photoshop gearb ...@@ -64,17 +64,12 @@ Bei der Erstellung der Spielwelt wurde mit Substance Painter und Photoshop gearb
#### Grafiken Menü: #### Grafiken Menü:
Zum Design des User Interface wurde überwiegend mit Adobe XD gearbeitet, damit später auch ein High-Fidelity Prototyp entsteht der für die User Tests verwendet werden kann. Zum Design des User Interface wurde überwiegend mit Adobe XD gearbeitet, damit später auch ein High-Fidelity Prototyp entsteht der für die User Tests verwendet werden kann.
Die Farben zum Design sind abgeleitet worden von den Farben die für die Charaktere des Spiels verwendet wurden. Hier war es wichtig dem Spieler ein einheitliches Bild auch außerhalb des Spiels durch die Menüführung zu bieten. Genauso wurde versucht das einheitliche Bild in den Icons und Werte die am Rand des Spiels zu sehen wieder zu spiegeln, um die Benutzung so einfach wie möglich zu gestalten, damit der Spieler nicht durch noch mehr Farben vom eigentlichen Spiel abgelenkt wird. Die Farben zum Design sind abgeleitet worden von den Farben die für die Charaktere des Spiels verwendet wurden. Hier war es wichtig dem Spieler ein einheitliches Bild auch außerhalb des Spiels durch die Menüführung zu bieten. Genauso wurde versucht das einheitliche Bild in den Icons und Werte, die am Rand des Spiels zu sehen, wieder zu spiegeln, um die Benutzung so einfach wie möglich zu gestalten, damit der Spieler nicht durch noch mehr Farben vom eigentlichen Spiel abgelenkt wird.
Bei der Überlegung was alles im User Interface untergebracht werden muss, wurde erstmal nach unterschiedlichen Inspirationen von User Interface speziell für Spiele in Google und Pinterest geschaut. Denn es war nicht ganz einfach dieses umzusetzen, denn es gab keine Erfahrungen wie dieses für Spiele umgesetzt wird. Zusätzlich wurde dann in Absprache mit den anderen Departments festgelegt, was alles in dem Spiel benötigt wird um dem User alles benötigte anzubieten aber doch nicht zuviel, sodass es unübersichtlich wird. Bei der Überlegung was alles im User Interface untergebracht werden muss, wurde erstmal nach unterschiedlichen Inspirationen von User Interfaces speziell für Spiele in Google und Pinterest gesucht. Denn es war nicht ganz einfach dieses umzusetzen, denn es gab keine Erfahrungen wie dieses für Spiele umgesetzt wird. Zusätzlich wurde dann in Absprache mit den anderen Departments festgelegt, was alles in dem Spiel benötigt wird um dem User alles benötigte anzubieten aber doch nicht zuviel, sodass es unübersichtlich wird. Bei den Icons wurde versucht das Design der Figuren mit den fetten Outlines zu übernehmen, was nicht ganz so einfach umzusetzen war. Es wurde darauf geachtet dass die Linien der Icons dick sind. Die Icons wurden größtenteils komplett selber erstellt und paar wurden aus flaticon.com verwendet.
Bei der Erstellung des Prototypen wurde darauf geachtet, dass es einfach ist, die verwendeten Farben in jedem Element zusammen zu ändern. Dass hat es uns im Nachhinein erleichtert, nochmal kleinere Anpassungen zu machen und somit kurz schauen welcher Farben am besten zueinander passen, damit nicht jedes einzelne Teil angefasst werden musste.
> Susanne: TODO Zum Schluss als das ganze Design des Prototypen stand, wurden überall noch die ganzen Verlinkungen eingefügt. Somit könnte der Prototyp zum Testing verwendet werden und war einfach zum Durchklicken.
- prototypen
- einzelne icons
- einheitliche farben - einfache gestaltung in adobe xd
- schriftart auswahl
- verlinkungen in adobe xd
#### Charaktere & Eye Candy: #### Charaktere & Eye Candy:
![UI_Kit___2](uploads/f68169a5368f32adfd9fe545cfdae9d4/UI_Kit___2.png) ![UI_Kit___2](uploads/f68169a5368f32adfd9fe545cfdae9d4/UI_Kit___2.png)
...@@ -104,21 +99,16 @@ Tamara erstellte zu Projektbeginn eine Informations- und Navigationsarchitektur ...@@ -104,21 +99,16 @@ Tamara erstellte zu Projektbeginn eine Informations- und Navigationsarchitektur
Das UI Kit [3] stellte einen einheitlichen Design-Leitfade dar. Durch Angaben zu Farb-Hexwerten und der Gestaltung von Buttons, Textfelder etc. erreichte Tamara eine einheitliche Basis zwischen UX und Design. Dies erwies sich auch später als sehr nützlich, da die Einteilung in primäre und sekundäre Farben die Gestaltung des Posters oder Factsheets maßgeblich vorgab und so alles sehr einheitlich erscheinen ließ. Auch hatten wir immer einen zentralen Ort, um Änderungen zu besprechen verhinderten somit Mehrarbeit und Missverständnisse. Das UI Kit [3] stellte einen einheitlichen Design-Leitfade dar. Durch Angaben zu Farb-Hexwerten und der Gestaltung von Buttons, Textfelder etc. erreichte Tamara eine einheitliche Basis zwischen UX und Design. Dies erwies sich auch später als sehr nützlich, da die Einteilung in primäre und sekundäre Farben die Gestaltung des Posters oder Factsheets maßgeblich vorgab und so alles sehr einheitlich erscheinen ließ. Auch hatten wir immer einen zentralen Ort, um Änderungen zu besprechen verhinderten somit Mehrarbeit und Missverständnisse.
#### Prototyping und User Testing #### Prototyping und User Testing
Durch den iterativen Projektansatz war es uns möglich, das Game in drei Stufen zu testen. Dabei handelte es sich jeweils um Prototypen, also um Konzepte mit zunehmender Genauigkeit und Detailtreue. Dabei stellte der Papierprototyp Stufe 1 dar, mit Hilfe dessen wir die größten Schwierigkeiten in Bezug auf die Bedienbarkeit und des Designs finden konnten. Das direkte Feedback der fünf Personen wurde dann direkt in die nächste Iteration, die des Low fidelity Prototyp, eingebaut. Dieses bezog sich besonders auf den allgemeinen Designansatzes: wir entschieden Pop-ups für alle Inhalte zu nutzen, da diese für den User näher wirken und zum Stil des Spiels passten. Außerdem waren kurze Erklärungstexte bei dem Steuerungs-Screen gewünscht, um die Funktion der einzelnen Tasten deutlicher zu machen, sowie um die direkte Einbindung der Mini-Karte in das Spiel gebeten. Grund dazu war, dass die Probanden nicht immer während dem Spielen extra auf einen Button klicken wollen. Durch den iterativen Projektansatz war es uns möglich, das Game in drei Stufen zu testen. Dabei handelte es sich jeweils um Prototypen, also um Konzepte mit zunehmender Genauigkeit und Detailtreue. Dabei stellte der Papierprototyp Stufe 1 dar, mit Hilfe dessen wir die größten Schwierigkeiten in Bezug auf die Bedienbarkeit und des Designs finden konnten. Das direkte Feedback der fünf Personen wurde dann direkt in die nächste Iteration, die des Low fidelity Prototyp, eingebaut. Dieses bezog sich besonders auf den allgemeinen Designansatzes: wir entschieden Pop-ups für alle Inhalte zu nutzen, da diese für den User näher wirken und zum Stil des Spiels passten. Außerdem waren kurze Erklärungstexte bei dem Steuerungs-Screen gewünscht, um die Funktion der einzelnen Tasten deutlicher zu machen, sowie um die direkte Einbindung der Mini-Karte in das Spiel gebeten. Grund dazu war, dass die Probanden nicht immer während dem Spielen extra auf einen Button klicken wollen. Weiteres Feedback findet sich im Anhang.
*Weiteres Feedback findet sich im Anhang.*
Auf Stufe 2 findet sich der klickbare Low fidelity Prototyp, der mithilfe von Adobe XD erstellt wurde. Wir legten das Dokument auf der Adobe Cloud ab, um gemeinsam daran arbeiten und über Änderungen diskutieren zu können. Da das Design nicht im Vordergrund stand, wurden Platzhalter für Bilder und Buttons verwendet. Beim User Testing ging es primär um die allgemeine Struktur und den Zusammenhang der einzelnen Komponenten. Wir testeten mit fünf Personen im Alter von 19 bis 27 Jahren. Wunsch war es die Fähigkeitenregler der Helden manuell selbst einstellen zu können. In der jetzigen Versionen waren die jeweiligen Fähigkeiten schon pro Heldenart (Fern-, Nahkämpfer) vordefiniert und konnten nicht einzeln verändert werden. Außerdem war der Button „Erklärung“ in dem Slide „Player Mode“ unnötig, da die Begriffe für jeden gut verständlich waren und keiner Erklärung benötigten. Die Probanden fanden dies eher störend. Einstellungen zum Spiel waren ebenso gewünscht wie die Möglichkeit sich das Erklärungstutorial nochmal anschauen zu können, falls es vergessen wurde. Dafür bauten wir einen neuen Screen und verlinkten über das „Einstellung“ Symbol im Hauptmenü. Zudem wurde gewünscht das Spiel pausieren und beenden zu können. Wir hatten diese Funktionen zunächst vernachlässigt, merkten durch die Tests jedoch, dass sie für die User Experience maßgeblich dazugehörten. Somit passten wir alles an und arbeiteten die Rückmeldung ein.
*Weiteres Feedback findet sich im Anhang.*
Als letzte Vorstufe zum fertigen Spiel, kann der high fidelity Prototyp angesehen werden. Dieser weist durch die fertigen Designs der Controls und den Spielfiguren eine sehr hohe Genauigkeit und Detailtreue auf. Er eignet sich daher perfekt um das Spiel zu testen, ohne es implementieren zu müssen. Somit war es uns möglich letztes Feedback zu sammeln, ohne auf die Entwicklung angewiesen zu sein. In unseres Fall war dies sehr hilfreich, da Alexander und Oliva zu diesem Zeitpunkt noch mitten in der Entwicklung steckten. Im Gegensatz zu den beiden vorherigen Iterationen gab es nicht mehr so viel Rückmeldung, da vieles schon verbessert wurde. Durch die Erstellung eines UI Kits hatten Julian, Tamara und Susanne ein einheitliches Verständnis darüber. Susanne erstellte die Control Elemente und Team UX baute dann alles in dem Prototyp zusammen. Dabei funktionierte die Absprache und Zusammenarbeit sehr gut. Die Farben gefielen den vier Testpersonen gut, da es den comichaften Charakter der Figuren unterstützte. Außerdem fanden drei der Probanden die Position des „Einstellung“ Icon unpassend, da es getrennt von den anderen Buttons wahrgenommen wurde. Hierbei könnte man über eine andere Anordnung nachdenken. Des Weiteren wurde der „Zurück-Button“ und „Fertig-Button“ als teilweise redundant kritisiert (siehe Screen „Steuerung“). Da jedoch nur zwei Personen dieser Meinung waren und die anderen es hilfreich fanden, nicht in die obere linke Ecke navigieren zu müssen, müsste man eine erneute Befragung mit anderen Testpersonen vornehmen, um eine endgültige Entscheidung treffen zu können. Ein Infobutton mit Mouse Hover über die „Ultimative Fähigkeit“ zur Erklärung ist zudem denkbar, um Verwirrung zu verhindern. Dabei ist jedoch zu beachten, die Screens nicht zu überladen und das Spiel so übersichtlich wie möglich zu halten.
Insgesamt hatten Julian und Tamara bei dem dritten Testing die Schwierigkeit Probanden zu finden, da Freunde und Bekannte schon die früheren Iterationen getestet hatten und wir, aus Gründen der Datenverfälschung durch Vorkenntnisse, nicht die Personen doppelt befragen wollten. Wir schafften es am Ende noch vier Personen des niedrigen Semesters zu akquirieren, die bei Tamara das Mathetutorium besuchten. ??
??
Das Feedback wurde von Tamara und Julian dann direkt umgesetzt und die finale Version in Unity implementiert.
Das Feedback wurde von Tamara und Julian dann direkt umgesetzt und die finale Version in Unity implementiert. Dabei war es uns leider nicht möglich alle Funktionen und Designs so umzusetzen, wie wir es im Prototypen erstellt hatten. Das lag an der Tatsache, dass die Implementierung der Funktionen und Screens natürlich in echt viel länger dauert, als in Adobe XD und Alexander und Oliva die einzigen beiden Entwicklern waren. Trotzdem zeigt der Prototyp gut wie eine Weiterentwicklung des Spiels aussehen könnte und auf welche Dinge man dabei aus User Experience Sicht achten sollte. Papierprototyp: siehe "Anhänge", MI Cloud
*Weiteres Feedback findet sich im Anhang.* Low-fidelity Prototyp: https://xd.adobe.com/view/f8a14f84-5dce-4e75-78b3-670b9e913b98-8e90/
High-fidelity Prototyp: https://xd.adobe.com/view/fe1b4f74-d1c3-49fc-72bc-eaa6cbc4bbe5-882a/
Papierprototyp: siehe "Anhänge", MI Cloud
Low Fidelity Prototyp: https://xd.adobe.com/view/f8a14f84-5dce-4e75-78b3-670b9e913b98-8e90/High-fidelity High Fidelity Prototyp: https://xd.adobe.com/view/fe1b4f74-d1c3-49fc-72bc-eaa6cbc4bbe5-882a/
Alle Adobe XD Dateien und ausführlichen Testergebnisse finden sich unter Anhang [4]. Alle Adobe XD Dateien und ausführlichen Testergebnisse finden sich unter Anhang [4].
### 5.3.4 Department "Projektmanagement" ### 5.3.4 Department "Projektmanagement"
...@@ -178,9 +168,11 @@ Gegenständen die auf dem Boden liegen, welche man einsammeln kann, sowie mehr I ...@@ -178,9 +168,11 @@ Gegenständen die auf dem Boden liegen, welche man einsammeln kann, sowie mehr I
Aus Sicht der User Experience, wären weitere Nutzertests, besonders die des fertigen Spieles der nächsten Schritt. Dabei könnte verstärkt der Fokus auf die Menüführung und Steuerung gelegt werden, da dies zentrale Elemente des Spiels sind. Besonders wenn noch anderen Features und somit auch Menüpunkte wie z.B. Highscore Board oder die Heldeninfo dazu kommen, ist es wichtig den Navigationsflow möglichst intuitiv und einfach zu halten, um unserer Zielgruppe gerecht zu werden. Auch ist ein Eye-Tracking Test sehr gut denkbar, um herauszufinden welche Bereiche, Farben oder Symbole stark und welche weniger stark wahrgenommen werden. Daraus lassen sich dann auch wichtige Erkenntnisse zur Lesbarkeit, Auswahl und Verständlichkeit von Icons und der Schrift finden. Aus Sicht der User Experience, wären weitere Nutzertests, besonders die des fertigen Spieles der nächsten Schritt. Dabei könnte verstärkt der Fokus auf die Menüführung und Steuerung gelegt werden, da dies zentrale Elemente des Spiels sind. Besonders wenn noch anderen Features und somit auch Menüpunkte wie z.B. Highscore Board oder die Heldeninfo dazu kommen, ist es wichtig den Navigationsflow möglichst intuitiv und einfach zu halten, um unserer Zielgruppe gerecht zu werden. Auch ist ein Eye-Tracking Test sehr gut denkbar, um herauszufinden welche Bereiche, Farben oder Symbole stark und welche weniger stark wahrgenommen werden. Daraus lassen sich dann auch wichtige Erkenntnisse zur Lesbarkeit, Auswahl und Verständlichkeit von Icons und der Schrift finden.
## 9. Fazit ## 9. Fazit
Abschließend lässt sich sagen, dass das Projekt uns sehr viel Spaß gemacht hat und jedes Teammitglied seine Fähigkeiten verbessern und sich in neuen Programmen, Bibliotheken und Technologien ausprobieren konnte. Durch die hohe Varianz an Fähigkeiten im Team, lernten wir wie wir komplexe Zusammenhänge möglichst verständlich Anderen beibringen können. Durch den Austausch hatten nach Abschluss des Projekts jeder ein besseres Verständnis von den anderen Departments und deren Herausforderungen, was eine wertvolle Erfahrung darstellt. Außerdem war das Zusammenspiel von Entwicklung , Design und UX sehr lehrreich und zeigte den großen Zeitaufwand für die Entwicklung und das Testing eines Spiels auf. In den nächsten Projekten werden wir dies nun realistischer einschätzen können. > TODO: alle
Das Projekt zeigte außerdem, dass es nicht möglich ist, eine Projektmanagment Methode bzw. Vorgehensweise auf verschiedene Teams zu übertragen, da diese individuell arbeiten. So sind Feingefühl und Flexibilität wichtige Merkmale eines guten Managements, um teamspezifische Anpassungen vornehmen und die Gruppe somit optimal unterstützen zu können. Auch unterscheidet sich die Akzeptanz von Tools von Team zu Team, wodurch man sich nicht von Anfang an auf bestimmte Programme festlegen, sondern erst das Team richtig kennenlernen sollte.
Alles in allem freuten wir uns über das durchweg positive Feedback an der Media Night und bedanken uns bei Herrn Prof. Kriha, der uns jederzeit für Fragen und Anregungen zur Seite stand. Abschließend lässt sich sagen, dass das Projekt uns sehr viel Spaß gemacht hat und jedes Teammitglied seine Fähigkeiten vertiefen bzw. verbessern konnte. Besonders das Zusammenspiel von Entwicklung und UX war dabei sehr lehrreich. ???
Bedanken wollen wir uns außerdem bei Herrn Prof. Kriha, der uns jederzeit für Fragen und Angregungen zur Seite stand.
## Anhangsverzeichnis: ## Anhangsverzeichnis:
[1] Personas [1] Personas
... ...
......