Project Progress Report – Seite 2 – Human-Computer Interaction I

[A#8, P1] Heuristic Evaluation

Continue to improve your high-fidelity prototype

We finished our onboarding on Flutter and started to design concrete Screens. We already have reusable Widgets that will accelerate the development process but some Screens are still work in progress. The planning was made before having a concrete idea of how things should be done in Flutter so we will use the time of preparing „Dummy Data“(the plan was to store data in JSON files) to finish the screens since we already created dummy data inside Dart objects.

Conduct the first and second phases of a heuristic evaluation

Phase 1: Preparation

We have exchanged Tasks with Group8. We prepared the tasks we received as starting point for the evaluation

Tasks for the evaluators

-In der echten App fängt der User mit 0 Zutaten an . Zur Testvereinfachung, wurden schon Zutaten hinzugefügt.
-Finde heraus welche Zutaten du schon hast?
-Was ist das letzte Rezept das gekocht wurde ?
-Wie wurdest du einen Rezeptvorschlag bekommen ?
-Wähle das Vorgeschlagene Rezept -Bestätige dass du das vorgeschlagene Rezept gekocht hast
-Was ist das letzte Rezept das du gekocht hast ?
-Welche zutaten hast du übrig nachdem du gekocht hast ?
-Füge 2 Baguette zu HelloFridge Topf

We used the following form template for the evaluation process

https://docs.google.com/forms/d/1CtM835Rphnc312GX8F15cvzG1dIpIFrA3T9vDYXlV7o/edit

Screenshots

Mouadh used Monosnap to easily take screenshots and copy the link. Christian uploaded the images in Google drive and posted the links.

Phase 2: Evaluation

The given resource(https://www.nngroup.com/articles/ten-usability-heuristics/) helped us to have the Nielsen’s heuristics listed in a compact page where we can easily extract the violated heuristics from the prototype.

Summary of our evaluation processes

The tasks that we received presented a good starting point to understand the prototype. We decided to not play with the prototype until we accomplish all the tasks in order to keep the mind of a completely fresh user.
We took one hour to separately evaluate the prototype using the mentioned Google Doc. Concretely, each team member followed the tasks and added the detected violation.
Parallelly, we wrote down some unclarities that we couldn’t clearly associate with heuristics violations. Afterwards, we discussed the extracted violations and discussed the ambiguous ones in order to classify them.

Who did what?

We prepared the tasks together and then met another day to solve the assignment questions. We prepared the evaluation together then evaluated the prototype individually. Afterwards we met again to discuss our evaluation results.

What have we learned?

Nielsen’s Heuristics were eye openers, not only as we evaluated the other group’s prototype but also made us conscious about the violations that our prototype has.

What went well?

Communication was smooth. We are organized since we have fixed times reserved for solving the assignment.

What do we want to improve?

We are happy with our process and results.

Assignment #9 – Preparation of a summative evaluation

? Deadline: Tuesday, 6th July 12 PM (noon, two weeks)
? Goals: Improve your prototype, by fixing usability issues found during heuristic evaluation and prepare for the last round of usability testing.

(1) Improve your high-fidelity prototype

Now there are two weeks left to improve your prototype, to fix found usability issues or implement new features.

Choose the biggest problem found during the last heuristic evaluation and answer the following questions:
- Why is this the biggest problem for your users?
- How will you solve it?
- How do you expect the user will behave, after the problem is solved?
Decide what usability issues you are going to fix in your prototype and what features you are going to implement next.

(2) Preparation for a summative evaluation

On Tuesday, 6th of July, we will conduct (online, sorry for that!) usability tests during the time of the lab/exercise. There will be guests invited from the Human-centered Computing (HCC) research group, who will function as usability test participants. Please prepare for this test session accordingly. We will have three test sessions per group. A test session lasts about 35 minutes.

Please recall your experience and takeaways from your first testing session (Assignment #6):
What are things you would like to do differently this time?
Prepare all documents (script, consent form, …) you will need during the test session:
What documents do you need?
This time, you will measure the effectiveness using the task completion rate. Please use the provided template (PDF, see below).
This time, you will also measure the satisfaction of users, by using a post-task or post-test questionnaire. Please choose independently what suits your project.
Which standardized questionnaire did you choose and why?
Document your preparation.

HCC_Short_ObservationCodingForm Herunterladen

[A#8, P4] Heuristic Evaluation

We further developed our prototype.

Heuristic Evaluation

Phase 1:

For the evaluation we wanted to use the Nielsen’s heuristics. For the evaluation, we created a Google Form based on Alexa’s template.

We then created two scenarios and two use cases for the other evaluators. Both use cases are broken down in further tasks.

Aufgaben für Evaluatoren

Anwendungsfall 1 – Ein Schema erstellen
Yun ist Jura Student der Freien Universität Berlin. Sein Strafrecht Professor hat ein Delikt in der Vorlesung vorgestellt und Yun soll jetzt für diesen Fall das Mordschema prüfen. Yun und seine Lerngruppe haben sich das Schema aufgeteilt, er muss nur den Objektiven Tatbestand prüfen.

1. Navigieren Sie zur geleiteten Schemata Erstellung
2. Suchen Sie das Prüfungsschema zu Mord heraus
3. Erstellen Sie das Schema mit nur dem Punkt des „Objektiver Tatbestand“
4. Speichern Sie das Schema

Anwendungsfall 2 – Gespeichertes Schemata öffnen
Yun ist sehr effizient mit seiner Zeit. Das Schema hat er schnell erstellt, während er auf den Bus gewartet hat. Im Bus eingestiegen hat er alte Bekannte getroffen. Da er seine Bekannten lange nicht gesehen hatte, hat er sich entschieden das Schema zu speichern. Zuhause angekommen setzt sich Yun wieder fleißig an die Bearbeitung des Schemas. Dazu öffnet er das vorhin gespeicherte Schema.

1. Navigieren Sie in den Aktenkoffer
2. Öffnen Sie das Schema

Phase 2

We contacted group 8 through mattermost but we haven’t got a response until now.

Reflection

Who did what?

Tobias did the improvements for the prototype. Simon created the google form for the evaluators and tried to get in contact with group 8. And Anil was responsible for the scenarios, use-cases and the blog.

What have we learned?

We learned to improve our prototype with a use case and evaluators in mind. This helped us to see some missing parts and which we tried to solve then.

What went well?

Our teamwork went well. And we are happy with the minor prototype improvements.

What do we want to improve?

This assignment was a little confusing for us at first. We had problems to define what was preperation for evaluating the other group and what we should prepare for the other groups evaluation. Then we would like to improve the difficulties to get in touch with group 8.

[A#8, P7] Heuristic Evaluation

1) Continue to improve your high-fidelity prototype.

Our prototype was already almost ready to test. We only fixed a few errors and then called it done.

2) Conduct the first and second phases of a heuristic evaluation

Phase 1: Prepare

Phase 2: Evaluate (Individual Inspection)

The results of our individual evaluation are available here.

We tested the prototype of group Scenic Route and found violations in most categories. Most of the violations we found were of severity 3. We used the tasks from their assignment submission for our evaluation.

The descriptions of our violations and the Screenshots can be found at the bottom of the survey above.

We used screenshots-Chrome AddOn for screenshots.

A summary of important issues can be found here.

Reflection

Who made what contribution?

We discussed the tasks and Phase 1 together and the split up to do Phase 2 individually. Clemens wrote this blogpost.

What did you learn?

We improved our skills with Google Forms again and now know how to create multiple pages. It was also interesting to use the Figma prototypes of others as that gave us a better understanding on how we should adjust our prototype.

What went well?

Communication with the team again went well. Again, we are also happy with the direction that we are going to with the prototype and look forward to the feedback of other groups.

What would you like to improve?

We would like to improve the prototype further as it does not look as good as it could be.

[A#3, P8] Heuristic Evaluation

We continued to improve our Prototype. We added info square about the interesting places nearby while on the route.

Heuristic evaluation

Phase 1:

We are going to use Nielsen’s heuristics.

The results of our individual evaluation are available here.

We tested the prototype of group Veritas.

We used Imgur to upload our screenshots.

A summary of important issues can be found here.

Here is also the Anwendungsfall:

Anwendungsfall 1 – Starte eine Routenführung:

Herr Mustermann ist vor wenigen Wochen für sein Studium nach Berlin gezogen und möchte jetzt seine Nachbarschaft erkunden. Er kennt sich nicht sehr gut in der Umgebung aus und möchte an seinem freien Tag einen Spaziergang mit kulturellen Entdeckungen verbinden. Er hat für den restlichen Tag keine Verpflichtungen mehr und möchte den Tag draußen verbringen.

Aufgaben:

Erstellen Sie sich zunächst einen Account für die App.
Starten Sie eine neue Route und füllen Sie die notwendigen Felder bzgl. dieser gemäß Ihrer Präferenzen aus.
Wählen Sie eine geeignete Route durch swipen aus (links: ja, rechts: nein)
Starten Sie die Navigation
Unterwegs haben Sie einen interessanten Ort gefunden, welchen Sie gerne als Ort speichern möchten. Fügen Sie diesen in der App hinzu.

Phase 2:

Evaluation of Group 7’s prototype by each group member separately.

REFLEXION:

WHO MADE WHAT CONTRIBUTION?

For Phase 1 we met in a WebEx meeting. We made some improvements to our prototype. We all together discussed what we are going to send to group 7. We wrote the Anwendungsfall and made a Google form which will serve as a heuristic evaluation which members of group 7 would have to fulfill for us. In the form we also included our prototype and Anwendungsfall. Once we receive the form from Group 7, each of us separately goes through their Figma prototype and conducts heuristic evaluation for group 7.

WHAT DID YOU LEARN?

We have learnt about heuristic evaluation, specifically Nielsen’s heuristics. Apart from getting ourselves theoretically familiar with the concept, we also had hands-on experience of the whole process and we find that very useful. It makes it easier to understand.

WHAT WENT WELL?

We like the teamwork and load balance we share between ourselves. We are still satisfied with how we do the task division – mostly we do it together and if an individual tasks appear – we afterwards share opinions and thoughts.

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#8, P5] Heuristic Evaluation

(1) Improving our high-fidelity prototype

We continued working on our prototype and mostly fine-tuned it so that we were as happy as possible with the latest version we gave to the evaluators in our partnering group. This was important for us in order to get the most out of the evaluation and really be able to make use of the incoming feedback.

Here is the latest version of our high-fidelity prototype:

https://www.figma.com/proto/uyswzIlrEDZOnSqmzk08te/Sleepy-Heads-HiFi-Prototype?node-id=17%3A11&scaling=scale-down&page-id=0%3A1

(2) Conducting the first and second phases of a heuristic evaluation

Phase 1: Preparation

Tasks For the Evaluators

You are looking for help in the app, where would you find it?
Pick a relaxation method.
Pick a sleeping sound.
You have a headache and muscle soreness, choose these factors in the app.
Add your own custom factor.
Activate the option to record your sound during sleep.
Start the sleeping mode.

Our evaluation form

We used the evaluation form template in order to make our own for the evaluation process.

https://docs.google.com/forms/d/e/1FAIpQLSe_-bejHJuFllO1uwi9hQ1E8uUpEFpXDQEg1q9P8z5QNIGDKw/viewform?usp=sf_link

Screenshots

We each used Google Drive to collect our screenshots individually and share their URLs in the evaluation form.

Phase 2: Evaluation

While conducting our individual inspections, we all benefitted from the following sources in order to better understand the Nielsen’s Heuristics:

Summary of our evaluation processes

We all found the tasks that were given to us very well written and had no problems understanding what was wanted from us. Each of us carried out the tasks and noted the problems we came across while doing so. We then used the sources stated above to link the issues we had found with the corresponding heuristics. Once we knew which heuristic the issue belonged to, we filled out the evaluation form and supported our explanation with a linked screenshot. Once we had all finished our individual inspections, we met up to briefly exchange our experiences during the heuristic evaluation process.

Our heuristic evaluation report for Group 1:

https://docs.google.com/presentation/d/15QT9JuhXICgxco4mfTA4s6zQVY1cxVwdC5XPKEWonXc/edit?usp=sharing

Seiten: 12

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

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

Timeline für zu erledigende Aufgaben

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.

Seiten: 12

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

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

Wir haben uns auf das Framework Bootstrap geeinigt. Einen hi-fi Prototypen oder eine WebApp mit Bootstrap zu implementieren, ist geht relativ schnell. Zum einen ist es ein ausgereiftes Framework für das GUI, das sich leicht mit beliebigen Frameworks für den funktionalen Unterbau kombinieren lässt, zu nennen wären bspw. phalconphp oder Laravel, bzw. mit vielen für das Web gedachte Sprachen, wie bspw. Dart, Ruby on Rails oder Java. Weiterhin gibt es mit jQuery eine direkte Implementierung, um auf der Seite der Nutzer Funktionalitäten in JavaScript sicher und schneller umzusetzen. Die langfristige Etablierung des kostenfreien Frameworks Bootstrap am Markt sowie dessen Beliebtheit führen zu einer umfassenden Dokumentation – durch die Entwickler:innen selbst -, aber auch zu einer Vielzahl von Code-Schnipseln und How-tos für auftretende Probleme und deren Lösungen. Weiterhin gibt es dadurch für mögliche weitere zu nutzende Webtools (Karten, weitere Bibliotheken u.v.a.m.) auch Anleitungen zur Einbindung in Bootstrap selbst durch deren Entwickler:innen.

Für die Einbindung von interaktiven Karten schwanken wir zwischen openstreetmap (OSM) und Google Maps. Ein erster Test zur Einbindung mit OSM schlug fehl. Die Dokumentation ist veraltet; im Wiki wird auf Schaltflächen verwiesen, die es im UI nicht (mehr) gibt. Eine Einbindung zur Realisierung von Routenplanungen muss mit Web-Frameworks Dritter umgesetzt werden, die auf weitere Tools anderer Entwickler:innen aufsetzen. Trotz der Registrierung bei allen Anbietern konnte das „einfache Beispiel“ – so die Entwickler:innen – nicht zum Laufen gebracht werden.

Seiten: 1234

[A#7, P2] Starting High Fidelity Prototyping

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

We decided to use Figma as our main prototype tool. We chose this tool because we believe that we are able to implement the range of features we need in a reasonable amount of time with a respectable result with it.

2) Functional and non-functional requirements

functional requirements

User should be able to add recipes to his favourites
User should be able to create a group
User should be able to get to every possible menu-bar-screen
User should be able to share recipe with a group
User should be able to change the profile settings
Daily recipes should be shown on home-screen

non-functional requirements

Every page should have headers
Insert explanations where needed
Make screens srcollable
No waiting period after user-interaction

3) Timeline

For the timeline we decided to use a Gantt-chart.

4) The HiFi Prototype

The link below shows the current state of our HiFi Prototype.

https://www.figma.com/proto/kNaLd8fh8vCCDXN7t6bBhf/Foodi-HiFi-Prototype?node-id=27%3A46&scaling=scale-down&page-id=0%3A1

What menu did you choose and why?

We are using one menu-bar to get to the main features as well as a slide menue on the home-screen. The screens are in a Full-Screen Flat menu navigation which doesnt overwhelm the user with too much information at once. By now the screens arent yet scrollable, but we hope to implement this feature in the folloing weeks.

These types of menus are easy to understand and to use with a smartphone.

Which UI controls are appropriate for your application and why?

We use buttons, radio buttons, drop-down menus and text-input fields so far.

The Buttons are used for confirmation of actions, as well as to get back or forth in the app. Radio buttons are used to check or uncheck ingredients, and the drop-down menus are used to make the screen less overfilled with information. The text input fields are mainly used as search function for recipes or ingredients.

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

We searched the icons for the menu-bar in the figma resources and found fitting ones. We had a certain vision of the app design in our heads which we were able to construct with figma to our satisfaction.

Seiten: 12

[A#7, P5] Starting High Fidelity Prototyping

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

Figma will remain our main prototype tool. This time we will use design kits like the one from Material UI to improve our prototype and give it feeling of an almost finished app. Because of the former assignments we improved our interaction with Figma and can now build an even more complex prototype.

Functional requirements

Select and add factors
Provide sleep aid
- Select music/sounds and set a timer for it (or not)
- Select a relaxation method that than provides you with instructions
View and export statistics
Rate sleep quality
Log sleep time (if it isn’t tracked automatically)
Record dreams in a diary
- Write down dreams
- Record your dream via voice input
Sound recording during sleep
- If sleep music is activated, start recording after the set music timer
- If no music timer is set, disable sound recording
Alarm clock function with alarm tone selection, intervals and possibiliy that alarm will grow louder the longer it rings
Notification outside the app when music is playing, when sound is recorded/sleep mode started.

non-Fuctional requirements

Separate sound and relaxation
Icons should be understandable
Categories should have labels, not only icons
Use darker and earthy colors
Insert explanations where necessary
Two different design – day & night

Timeline

Seiten: 123