Autor: Brendan Gerrit Laschke

[A#10, P8] – Evaluation and Project Description

(1) Evaluate your test results.

  • What method(s) did you use to evaluate the results of your usability tests?
    How did you evaluate the results?

Wir haben die Verbesserungsvorschläge und Kritik am Prototypen der Testpersonen zusammengefasst und systematisch aufgeschrieben. Die Task Completion Rate weiter auszuwerten war nicht sinnvoll, weil alle Personen alle Tasks abgeschlossen hatten.

  • What did you learn from the testing?

Es macht einen großen Unterschied, ob man aus der Entwickler-Perspektive auf oder von außen auf den Prototypen schaut. Der Nutzer versteht eventuell Gedanken hinter Funktionen und Funktionsweisen nicht die für uns klar waren. Die Verbesserungsvorschläge von außen waren auch sehr hilfreich.

  • What are your main takeaways?

Testen ist gleichzeitig schwierig aber auch sehr wichtig. Auch sollte man relativ früh anfangen, damit Veränderungen noch leicht möglich sind. Die Aufgabenstellung für den Test ist relevant um möglichst aussagekräftige Ergebnisse zu produzieren.

(2) Project description

One image (1000×500 px, png), which shows your prototype:

One image (200×200 px, png), which shows some unique part(s) of your project or prototype in a very detailed way (e.g., some logo or part of a screen):

Name of your project + tagline/sub-line:

Social Gaming – no more messy remote board game nights

Project description text:

We are big fans of fun, relaxed board game nights with our friends. However, during the pandemic we experienced that remote version of the board game nights often turned out to be more frustrating than fun: switching between all the different websites, not knowing which games have an online version,…

With Social Gaming, we want to transform remote board game nights into a great time with your friends instead of an exhausting evening. To achieve this goal, Social Gaming consists of three core elements:

  • You are able to audio-, video chat and message your friends over our platform
  • You can filter all the online versions of the board games from our many partners exactly according to your needs
  • You can play the board games embedded on our website.

To conclude: With Social Gaming your whole game experience will take place on one website, and one website only – no more messy remote board game nights!

3-5 additional images:

Link to your GitHub/GitLab repo:

https://socialgaming.bubbleapps.io/version-test/landingpage

Seiten: Seite 1, Seite 2

[A#7, P8] Starting High Fidelity Prototyping (First Iteration)

What framework or tools are you going to use? Why?

Für das Gantt-chart haben wir ein normales Excel/Sheets Dokument verwendet, da das kein neues Tool ist mit dem man sich beschäftigen muss ist. Ausserdem hat das den Vorteil, dass die Darstellung recht flexibel ist. Für den Prototypen haben wir bubble.io ausgewählt, da es zum einen eine Zusammenarbeit ermöglicht und da sich bei uns nicht alle mit HTML/CSS auskennen eine einfachere Erstellung von Web Apps ermöglicht.

List your functional and non-functional requirements (features) you are planning to include in your High-Fidelity Prototype

  • Functional
    • Gruppe per Link beitreten
    • Filter View darstellen
    • Game Info Display
  • Non functional
    • Simpel
    • Klare Menü Führung

We now have 6 weeks left for our projects. Produce a detailed timeline (e.g., a Gantt-chart or similar) of jobs that need to be done and milestones that need to be reached starting from today.

Projektplan-HCI-Group8.xlsx-GanttChartHerunterladen

Start building your prototype.

https://socialgaming.bubbleapps.io/version-test/landingpage

Please answer the following question: How did you handle the topics: menu, UI consoles, and Design patterns?

What menu type did you choose and why?

Es existiert kein wirkliches Menu(daher haben wir auch keins ausgewählt), es gibt allerdings ein button zum Zeigen/Verstecken der Video Ansicht. Die eigentliche Navigation ist im Hauptbild zu finden.

Which UI controls are appropriate for your application and why?

Wir haben vor allem Buttons und Text Input Fields verwendet, da diese eine sehr gradlinige Navigation ermöglichen und klar ist welcher Schritt als nächstes erfolgt. Ausserdem gibt es selten mehr als 3 Möglichkeiten, um den Nutzer nicht zu überfordern. Für die Filter Views haben wir uns für Dropdowns entschieden, da es hier nur begrenzte Möglichkeiten für die Auswahl gibt.

Which design patterns are suitable for your application and which ones have you implemented or used? Why?

Wir haben nicht bewusst Design Patterns verwendet, allerdings kommt unsere filter Ansicht doch einem Design Pattern nahe, was man Table Filter nennen kann. Wir haben die Ansicht so gestaltet, da sie uns intuitiv vorkam und die Parameter übersichtlich darstellt.

Seiten: Seite 1, Seite 2

Interface Metaphor

Interface Metaphern ermöglichen dem Nutzer unbekannte Funktionen besser zu verstehen, indem sie mit bekannten Objekten (meistens aus der realen Welt) verknüpft werden. Diese haben dann meistens die gleiche oder eine sehr ähnliche Funktionalität. Durch diese gemeinsame Domain kann der Nutzer sich dann die Funktion der Komponente herleiten. Beispiele sind eine Speicherdiskette zum Speichern oder eine Schere zum Ausschneiden von Inhalten.

Vorteile:

  • einfacheres Erlernen neuer Funktionen
  • Mentales Modell wird klar
  • Chance innovative Ideen klar darzustellen

Nachteile:

  • Konflikte zu Design Prinzipien und kulturellen Regeln
  • Beschränkung der Funktion auf die Metapher
  • Limitiert Designer bei Kreativität und neuen Ansätzen

Quellen:

Human-Computer Interaction, Jenny Preece, 1994, Chapter 7 (http://www.perflensburg.se/Privatsida/cp-web/cajpmeta.htm)

Guss S. (2003) Interface Metaphors and Web-Based Learning. In: Zhou W., Nicholson P., Corbitt B., Fong J. (eds) Advances in Web-Based Learning – ICWL 2003. ICWL 2003. Lecture Notes in Computer Science, vol 2783. Springer, Berlin, Heidelberg. https://doi.org/10.1007/978-3-540-45200-3_17

Müller-Birn, C., Lecture 04-01 | From Requirements to Conceptual Design

Thematic Analysis

Die thematische Analyse ist eine iterative Methode, die zum Identifizieren und Analysieren von Mustern in Daten zum Einsatz kommt. Die Besonderheit besteht darin, dass Codes zugewiesen werden anhand des Inhalts, sollte später ein weiterer Code(=Inhalt) auftauchen werden vorangegangene Daten noch einmal auf diese überprüft. Diese Codes erlauben dann das Erkennen von Mustern. Der Prozess beinhaltet:

  1. Familisierung mit den Daten
  2. Code Zuweisung anhand der Daten
  3. Suche nach Mustern in Codes
  4. Überprüfen der Muster
  5. Definition und Bennenung der Muster
  6. Report

Vorteil: Große und nicht klare Datenmengen können flexibel interpretiert und eingeordnet werden.

Nachteil: Es können Nuancen in denDatenverloren gehen, außerdem ist eine solche Vorgehensweise meist subjektiv und vom Forscher abhängig.

Quellen:

How to do thematic analysis, https://www.scribbr.com/methodology/thematic-analysis/, abgerufen 02.05.2021 um 16 Uhr

HCI-03-01 HCI Elicitating Requirements, https://blogs.fu-berlin.de/hci1-sose2021/lu01-defining-requirements-and-design-rationales/

Thematic analysis | a reflexive approach, https://www.psych.auckland.ac.nz/en/about/thematic-analysis.html, abgerufen 02.05.2021 um 16 Uhr

[A#2, P8] Datenerhebung

Define the goals of your data gathering session

Zuerst wollen wir erfahren, was die größten Probleme sind, die aktuell bei Online Brettspielabenden bestehen, um danach anhand dieser Funktionen Prioritäten vergeben zu können. Weiterhin wollen wir erfahren wie und in welchem Umfang die Nutzer vor Corona und jetzt Brettspielabende gestalten um unsere Nutzer besser kennenzulernen und besser einzuschätzen wie sie die Anwendung nutzen würden. Auch wollen wir erfahren wie die Nutzer sich den „perfekten“ Brettspielabend vorstellen.

Based on your goal, derive the kind of people you want to gather data from

Unsere Teilnehmer für die Umfrage sind Personen die gerne Brettspiele spielen und eher jünger (wahrscheinlich eher Studenten). Für das Interview befragen wir 2 Freunde.

Decide on your data gathering method

Which methods are you using and why?

Zusätzlich zu den Interviews werden wir auch noch eine Umfrage durchführen, da die Daten die sich hier sammeln lassen deutlich besser vergleichbar sind und sich schneller/einfacher auswerten lassen sind dafür allerdings nicht so detailliert. Die Interviews dagegen sollen uns sehr detaillierte Antworten bringen, was für Probleme und Wünsche es gibt.

What type of interview (structured, unstructured, semi-structured)?

Wir planen ein semi-strukturiertes Interview durchzuführen. Wir werden ein Größtenteils wird es ein strukturiertes Interview sein, allerdings wenn es um Problembeschreibung oder Wünsche geht werden wir die Fragen offen stellen.

What kind of data do you want to gather?

Das Interview ist vor allem daraus ausgelegt qualitative Daten zusammen, die Umfrage dagegen soll hauptsächlich quantitative Daten sammeln.

Decide how you handle the topics pilot study & data recording.

Pilot Study

Wir haben die Pilot Study aufgrund der kurzen Zeit ausschließlich für die Umfrage durchgeführt um dafür zu sorgen, dass die Fragen verständlich für den Teilnehmer der Umfrage sind. Hierfür haben wir uns ein paar Personen aus unserem Bekanntenkreis Gesicht, die sich dass angeschaut haben.

Data Recording

Interviews: schriftliche Notizen – Die sind einfacher Auszuwerten und meistens akzeptierter bei Interviewpartner als Aufnahmen

Umfragen: Tabellen und Diagramme, die automatisch vom Umfrage Tool erzeugt werden.

Seiten: Seite 1, Seite 2

[A#1, P8] Social Gaming

Project Idea

  1. Who is your user group?
    People who are in need of social gathering during the pandemic time and want to have board games night online. Other stakeholders might be board game companies that want to   create an online version of their board game (or already have one) and want it to be known by a broad audience.
  1. What is the exact problem?
    It is difficult to have an overview over the online board games and thus to choose a game
  1. Where is your user group interacting with your software?
    At home with access to internet and a browser 
  1. When is the user group interacting with your software?
    At any time in their free time, the interacting with software depends on the common online time of someone’s friend circle
  1. Why do your users need this software?
    1. Pandemic time reduce the chance of meeting people physically
    2. psychological and mental need (lonely, lack so social contact, need to relax etc)
    3. time-consuming to search an online version of a social board game on google, currently there is no web app which helps people to communicate visually as well as play game together in the same application
  1. How do you want to solve the problem?
    We want to solve this problem by creating a web application: 
    1. helps people virtually interacting with each other 
    2. provides an overview of different kinds of social games, helps with selection
    3. includes embedded version of the online board game in our web application so the users won’t have to switch between different websites for different games all the time  

Reflection

Our team worked together on this blog post (with video chatting), we learned how to initialize a project idea with basic consideration for stakeholders, problem solving format, etc. The initial formulation of the project idea was quite smooth,  the only point we need to consider is how we specify our use groups and if we have access to them for further process.