Autor: Marc Oprisiu

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

We now start working on the Hifi-Prototypes and start building an interactive product.

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

Wir werden Figma benutzen, da zumindest einer unserer Gruppenmitglieder ein wenig Erfahrung damit und ein ziemlich guten Eindruck von dem Tool hat. Weitere Vorteile sind, die große Community und zahlreichen Tutorials und zusätzlich, dass es auch kostenlos ist.

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

Funktionale Anforderungen:

  • Das System soll Nutzer:innen abgelaufene Routen in einer Übersicht darstellen können.
  • Das System soll Statistiken erfassen und diese in einer Übersicht darstellen können.
  • Empfehlenswerte Sehenswürdigkeiten mit Routen werden angezeigt (Informationen über Orte sollen deshalb aktuell sein).
  • Auswahlmöglichkeiten an der Routenkategorie (landschaftlich/kulturell/kulinarisch ansprechend)
  • Informationsübersichten über Points of Interest.
  • (Live Besuchsdaten werden angezeigt, um eventuelle Wartezeiten zu vermeiden.)
  • persönliche Daten sollen vertraulich behandelt und nicht an Dritte weitergegeben werden
  • Account erstellen
  • (Routenvorschlag akzeptieren oder ablehnen)
  • (Bewertung zur Route abgeben)

Nichtfunktionale Anforderungen:

  • Das System darf nicht länger als 5 Sekunden benötigen, um die gewünschte Route darzustellen.
  • Schnelle und genaue Berechnung der Routen
  • Benutzeroberfläche soll intuitiv und einfach sein
  • Die Sprache der App ist englisch
  • Plattformunabhängig für IOS- und Android-Nutzer:innen
  1. 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.
DeadlineMilestone
14.6.2021First iteration of high fidelity prototype ready (design decisions, color maps, icon selection)
21.6.2021Test and note feedback from testers and peers (affinity diagrams, individual talks)
27.6.2021Improve prototype according to feedback (human centered design process)
4.7.2021Test and note feedback from testers and peers
11.7.2021Final changes and bug fixes of prototype
18.7.2021Prototype is being sent to programmers to develop the app for iOS and Android
  1. Start building your prototype.

Here is the link of our Figma project for the high-fidelity prototype

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?

Unserer Meinung nach ist unsere Menu-Art nicht in den Folien aufgeführt, aber wir haben eine Art Guided-Menu, wo man Button auswählt und aufgrund von der Auswahl der Button wieder neue Auswahlmöglichkeiten erscheinen.

Wir haben uns hierfür entschieden, weil wir der Meinung waren, dass dies für die User am leichtesten nutzbar ist und man sich nicht groß mit der App auseinandersetzen muss um sie zu benutzen.

  • Which UI controls are appropriate for your application and why?

Wir haben uns hauptsächlich für “Action and Navigation controls” entschieden, da dies gut mit unser Menu-Art harmoniert und an den Stellen, wo Texteingaben erforderlich sind werden “Data entry controls” genutzt.

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

Da die Buttons zur Verlinkung zu anderen Zuständen dienen und gleichzeitig verschiedene Funktionen erfüllen, wie z.B. Daten in eine Datenbank speichern oder abrufen, handelt es sich bei Ihnen um “Creational Patterns”, welche die Logik, die dahinter versteckt ist, verbergen.

REFLEXION:


WHO MADE WHAT CONTRIBUTION?

We sat together at a Webex meeting for the first part of the Assignment. We collaboratively discussed what we are going to implement in a prototype and how to design it. We also planned the next weeks and discussed our project and milestones in general. The prototyping we did between the two meetings, in Figma, collaboratively, while updating each other and discussing the current state of the prototype regularly via WhatsApp. On the second meeting in the second week, we made some tests and changes to the prototype and we finished the blogpost. 

WHAT DID YOU LEARN?

We have learnt how to use a nice new tool called Figma which is useful in designing the prototypes. We also have a clearer understanding of how low-fidelity and high-fidelity prototypes intertwine and why both are useful. We have also gotten ourselves familiar and had hands-on experience with some of the designing practices and principles.

WHAT WENT WELL?

Very nice teamwork and workload balance. We are still satisfied with how we do the task division – mostly we do it together. We are happy that we learnt a new tool – Figma, and the whole designing – prototyping process went really well. 

WHAT WOULD YOU LIKE TO IMPROVE?

There is nothing we would like to improve, since we are pretty much satisfied with how it went, both content wise and atmosphere wise.

[A#6, P3] Paper prototyping and usability testing

(1) Continue to develop (or start a new) paper prototype based on new insights or feedback from your peers.

Da es während dem Tutorium nicht stattgefunden hat, wurde kein Feedback erhalten und somit auch nichts groß verändert.

(2) Conduct 3 formative usability tests.

a) Skript

  1. Hinweise für den User: Wir testen die App, nicht dich! Fragen gerne stellen, wir können aber versprechen, dass wir sie alle direkt beantwortet werden. Du kannst also nichts falsch machen! Wir bitten dich deine Gedanken laut auszusprechen.
  2. Kontext der Anwendung: ScenicRoute ist ein unkonventionelles Routenplanerprogramm. Es berechnet anders als herkömmliche Routenplanung nicht die schnellste Route, sondern diejenige mit den meisten Sehenswürdigkeiten, den außergewöhnlichsten Attraktionen oder den als sehenswert erachteten Wanderwegen.
  3. Fragebogen: Wie alt bist du? Wie lange wohnst du in xxx?
  4. Szenario: Du stehst morgens um 9 Uhr, machst dir einen Kaffee, frühstückst und kümmerst dich um deine heutigen Uniaufgaben. Deine Arbeit für die Uni ist gegen 17 Uhr in der Regel erledigt und Du nutzt die Zeit um spazieren zu gehen. Meistens zieht es Dich in Richtung des nahegelegenen Parks, indem Du gerne spazieren gehst. An dem heutigen, recht sonnigen, Tag wanderst Du allerdings ziellos durch die Straßen Deines Viertels, Du nutzt den Spaziergang um Dir bei einer nahe gelegenen Rösterei einen Kaffee zu holen und Dich auf eine Bank zu setzen. Auf der gegenüberliegenden Straßenseite fällt Dir ein sehr schönes Gebäude auf. Du vermutest es stammt aus der Renaissance bist Dir aber nicht sicher. Das Gebäude sieht recht offiziell aus und Du fragst Dich, ob es öffentlich genutzt wird. Du probierst das zu Googeln kommst aber nicht weiter und brichst die Suche nach 3 Minuten ab und wünschst dir einen einfacheren Weg bei deinem Spaziergang an eine solche Informationen zu kommen.
  5. Aufgaben: Gucke Dir die App an und beschreib uns wie sie auf Dich wirkt. Mach Dich mit der App vertraut. Beginne eine neue Route zu planen und diese zu starten. Anschließend probiere eine neue Route hinzuzufügen.
  6. Abschließende Fragen: Bist Du der Meinung alles Nötige, was Du für die Nutzung einer solchen App erwartest gefunden zu haben? Hat Dich irgendwas am Design (abgesehen der mangelnden künstlerischen Fähigkeiten der Macher) gestört?
  7. Abschluss: Hast Du noch weitere Anmerkungen oder Fragen?

Vielen Dank für Deine Teilnahme und beim Helfen bei der Weiterentwicklung der App.

b) Rollenverteilung

In Interview 1 und 2 war Marc der Facilitator und Sebastian der Observer. Wir haben uns entschieden für das letzte Interview die Rollen zu tauschen, da Marc die ersten beiden und Sebastian den dritten Interviewten kannte und wir der Meinung waren, dass diese sich wohler fühlen, wenn jemand Bekanntes sie durch die App führt.

c) Decide if you want to record your test session and how you take notes during the test sessions.

Wir haben uns dazu entschieden, die Sessions nicht aufzunehmen, weil wir unsere Interviewees nicht unter Druck setzen wollten. Wir bemühten uns mit den Interviewten eine entspannte Atmosphäre aufrechtzuerhalten, da alle aus unserem Bekanntenkreis stammen. Demnach haben der Observer immer fleißig mitgeschrieben, Kommentare festgehalten und Bewegungen und Mausklicks analysiert.

d) Document who you are inviting for a test session and how long the session lasted.

  1. Tabea (23 Jahre, lebt seit 23 Jahren in Berlin, Interview 15min)
  2. Patricia (24 Jahre, lebt seit 16 Jahren in Berlin, Interview 20min)
  3. Daniel (26 Jahre, seit 8 Jahren in Berlin, Interview 15min)

(3) Document and evaluate the results of your testing.

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

Wir haben uns dazu entschieden, alle Interview Ergebnisse in einem Affinity-Diagram festzuhalten.

Zu Beginn haben wir alle Kommentare und Ideen als Anmerkung gesammelt, dann haben wir passende Über- und Unterüberschriften gesucht und im Anschluss die Kommentare gruppiert. Dies hat uns geholfen einen guten Überblick über unsere Nutzbarkeitstests zu erhalten und was für Verbesserungen wir noch durchführen sollten.

HIER IST DER LINK DAZU: https://jamboard.google.com/d/1u2wq7lK02_Zcluavk9skyVnJBRp10lJ_MeLbp_5A4NU/edit?usp=sharing

b) What did you learn from the testing? What are your main takeaways?

Durch das Testen haben wir zusätzliche interessante Verbesserungsvorschläge an die wir bisher noch nicht gedacht haben erhalten können. Wir haben wertvolle Kritik erhalten bzgl. der Nutzung des Prototypens. Dieser kam größtenteils gut bei den Nutzer:innen an. Der Usability Test hat uns gezeigt, dass unsere Nutzer:innen sehr explorativ an den Prototypen herangegangen sind und teilweise entgegen unserer Erwartung sich durch einen anderen Weg geklickt haben. Lediglich die Darstellung der App, aufgrund der nicht wirklich großen künstlerichen Fähigkeiten der Entwickler wurde regelmäßig kritisiert (obwohl der dritte Testteilnehmer äußerte, dass es die App individuell machen würde (allerdings eher mit einem Augenzwinkern)). Wir haben also einen Blick outside the box erhalten können

(4) Reflection

Wer hat welchen Beitrag geleistet?
Aufgrund von begrenzter zeitlicher Möglichkeiten haben Marc und Sebastian diese Woche die Durchführung der Interviews übernommen und die Ergebnisse im Anschluss zusammengestellt. Milos hat das Ganze dann nochmal überprüft und abgesegnet.

Was habt ihr gelernt?
Wir haben gelernt, dass verschiedene Nutzer:innen mit einer App unterschiedlich umgehen und man aus diesem Grund vor der professionellen Entwicklung einer Anwendung definitiv eine Vielzahl von Usability-Tests mit unterschiedlichen Personen durchführen sollte. Dies hilft ein breites Spektrum der Nutzung zu erhalten und dadurch die Bedürfnisse der Nutzer:innen zu erfüllen.

Was lief gut?
Wir hatten Glück mit unseren Interviewees, da diese spontan Zeit gefunden haben und sehr motiviert mitgearbeitet haben. Das Moodboard hat uns geholfen besonders schnell einen Überblick über die gesammelten Informationen zu bekommen. Unsere Gruppenarbeit war sehr kommunikativ. Unstimmigkeiten konnten wir schnell klären.

Was möchtet ihr verbessern?
Uns ist aufgefallen, dass wir uns sehr gut verstehen, dadurch die Arbeitsatmosphäre sehr gut im Team ist, wir dennoch mittlerweile häufig vom Thema abkommen und uns verquatschen, weswegen die Arbeit nicht mehr ganz so effizient ist wie früher. Einerseits macht sie viel Spaß, andererseit verlieren wir viel Zeit. Wir wollen versuchen in Zukunft wieder etwas fokussierter zu arbeiten.

Interaktionstypen

Interaktionstypen bieten eine Möglichkeit den Designraum, der uns zur Verfügung steht, zu Konzeptionalisieren. Im Wesentlichen geht es dabei darum, sich Gedanken zu machen, wie Personen mit einem Software System interagieren können. Es werden zwischen den folgenden vier Haupttypen unterschieden.

  1. Instructing: Hier können können Nutzer:innen Befehle erteilen und Optionen auswählen. Eignet sich sehr gut für Aktivitäten, die sich wiederholen.
  2. Conversing: Ermöglicht die Interaktion mit dem Softwaresystem als würde man ein Gespräch führen
  3. Manipulating: Hier ist man in der Lage mit Objekten in der gewohnten Weise zu interagieren und sie zu verändern.
  4. Exploring: Ermöglicht es sich durch einen virtuellen oder physischen Raum zu bewegen.

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

Persona

Eine Persona ist eine fiktive/hypothetische Person mit individuellen Eigenschaften die stellvertretend für die Mitglieder einer von ihnen identifizierten Nutzer:innengruppe steht. Sie stellen dadurch einen Prototyp für eine Gruppe von Nutzer:innen dar. Personas werden aus vorhandenen Daten abgeleitet und um persönliche Eigenschaften wie Name, Aussehen, Beruf und Bildung angereichert. Die abstrakte Masse der späteren Nutzer:innen wird durch diese prototypische fiktive Persönlichkeit ersetzt. Personas stellen dabei nicht durchschnittliche Nutzer:innen dar, sondern spezifische Personen, die Muster im Nutzungsverhalten verdeutlichen.

Vorteile bei der Verwendung von Personas im Designprozess sind zum einen, dass implizite Anforderungen identifiziert werden können. Zum anderen helfen psychologische Aspekte Designentscheidungen auf Nutzer:innen auszurichten.

Quelle: HCI-03-02 Conceptual Models: User Focus, https://blogs.fu-berlin.de/hci1-sose2021/lu01-defining-requirements-and-design-rationales/, abgerufen 02.05.2021 um 13:25 Uhr