[A#10, P1]

(1) Evaluate your test results.

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

We created this based on the System Usability Scale developed by John Brookee at the Digital Equipment Corporation, but had not the time to use it during the tests.

We used the method introduced in Assignment #6 for this evaluation too because we received very good feedback after presenting it to our other fellow students and we believe it fits to the other methods given in this assignment.

How did you evaluate the results?

After filling in the formulas provided we expanded it with our difficulty estimation and with both we created the following table to summarize the results:

TaskNotesTake-Away
Log-inNo option to log-in without google or social media.Add more anonymous way or even without log-in.
Figure out what is the last recipe you cooked
Add ingredientsIngredients doesn’t have unit. This confused the user since it is not consistent with other ingredients.

Additional after adding the users are confused why the home-screen is the next one and not the fill-pot-screen.
No drop-down when no unit.

Test person should stay in FillPotLayout when adding an ingredient.

App bar name should be Fill Pot and not My Pot when searching for ingredients
Access potNo indication that the pot is clickable.Add tutorial.
Not-clickable with grey color could work too.
Get recipeAdd more content
Add recipe to historyTest person literally said that he would never click the „Add to history“ button after cooking.He want to use the smartphone for something different after cooking.We will describe a better way to motivate the click on the „Add history“ button in the next block(see below).

Get recipe with too little ingredientsThe provided explanation text is very helpful when no recipe suggestions available
Log-outMake it more difficult to log-out, because we want to keep users as long as possibleLogout should be just on the home-screen not in every screen and also with a pop-up.

What did you learn from the testing?

We want to improve a general issue which is the size of the fonts which might be a bit too small, especially for seniors. We will now mention one part of our design that was continuously discussed in every single task and we think it is important to go into detail about the ideas we can share after this semester regarding this.

What are your main takeaways?

The main general takeaway from usability testing is the idea that the developer/designer perspective might be very different from the user’s expectation from the app. Concretely, we could improve our prototype through test evaluations. Besides, the tests drew our attention to a serious usability problem. Namely, the last step of the recipe preparation contains a button named „Add to History“ that has to be clicked for the application logic to work. What we noticed during tests is that all test participants tend to think that the goal is achieved when they reach the recipe preparation description which is not the case. The „Add to History“ button is crucial since it doesn’t only add the recipe to history if the user wants to access it later but it updates the ingredients pot by removing the used ingredients. The solution that we came out with is to always pop the confirmation alert dialog whenever the user tries to exit the application or go to the main screen. If the user isn’t cooperative and chooses to forcefully exit the application, notifications should be pushed to remind the user that he has to update his ingredients pot. We also want to mention in the pop-up that we will empty the pot and add to history every looked up recipe because we have „favorites“ as a list controlled just by the user.

(2) Project description

Mouadh Khlifi – Master student on Computer Science at the FU Berlin

Christian Zygmunt Jeschke – Master student on CS Education at the FU Berlin

Take-away or food delivery is convenient, but ordered food mostly comes with too much plastic. Moreover, leftovers have to be thrown away. To protect the environment and save food we want to make it easier to find out which meal you can do with leftovers. From our own experience, we know: Even if we have ingredients, sometimes we decide not to cook because we are just too hungry and want to save time. We designed and implemented the app Hello Fridge to solve this issue. The app allows searching for recipes just by inserting ingredients. We expect that our users will more likely open their fridge (and check with our app if they can create something novel by themselves) before ordering food. We used proto.io for the first iterations and now the Flutter Framework from Google for the development. During the methodology-oriented design process, we made multiple types of user tests. On one hand to conceive a concrete idea of what the end product should look like. On the other hand, to detect and solve usability ambiguities that a user can encounter.

Our most important lesson with the focus on HCI was this design decision since we had to change it a lot

Test the app in you browser here (preferabily on your phone)

Hello Fridge App

Please ask us for access to the source code

Who did what?

We had a strong pair work this week but we can mention that Mouadh was more focused on the administration of the web app while Christian did that for the evaluation.

What have we learned?

We identified that Meta Strategies like the consideration of multiple perspectives is a very important and difficult task. We need to keep this in mind during the whole process because once we forget it we are developing just for ourselves and have no chance to sell to the user.

What went well?

We managed better to find a good timing here.

What do we want to improve?

We need to find out how to work in the future.

[A#9, P1] Preparation of a summative evaluation

(1) Improve your high-fidelity prototype

In the heuristic evaluation we received 4 violations while 1 of them reached the 4th level of severity, two reached the 3rd level and one is on the lowest. Nevertheless, we decided not to pick the highest level available because it was, we believe, not our initial design approach. Since changing this design will make a fundamental change on our problem to solve, we do not want to follow this feedback and rather focus on the other. The problem is described „To look at the preparation you need to press the button on the bottom right corner. To go back to the ingredients, you need to click on the arrow in the upper left corner.“ A bit special is that we received two ideas for „Recommendation:“ where we skip „a) Ingredients + preparation on one page with scrolling“ and going as our solution „b) Divide both parts and store the preparation step (where you were) when you switch to ingredient list. Switching to back to ingredient list should be with the same button as ‘Showing preparation’“. We expect that this will change one of the first interaction problems which is also the most intense one because we discussed on every iteration, namely, how should the user interact with our app after cooking.

We implemented our app here https://mouadhkh.github.io and we followed the desciption above to know the usability issues and features and here is the excact list:

implemented fillPotLayout, fillPotlayout action still missing

implement mainLayout, theme not working, log out button missing,no links for buttons and recipes are not clickable at all

-fixed TabBar and restyled

add recipes suggestions

horizontal slider for recipes

add new recipe layout

add layouts for a single recipe

add preparation implementation for recipe

add alertDialog for confirmation

log out button on all screens

(2) Preparation for a summative evaluation

Even if on the tests at the 6th assignment we had no problems, we want to make some improvements because of the heuristic evaluation where we had to improve our tasks from the #6 assignments. Especially the task amount is higher now because our current prototype allows more and therefore, we have more details here.

In the second attempt the task has been specified by this HCI seminar and it was not necessary to add them like in the #6 assignments. Same as the other group we hoped that the tasks presented are a good starting point to understand the prototype without our own interruption.

Skript

The roles: The observer is taking notes while the facilitator guides the interview. All participants are affected by the solution that HelloFridge offers. Since the target group is living in our area we decided to provide the script in German:

1.Hinweis für den User
Wir testen die App, nicht dich! Fragen bitte gerne stellen, ich kann aber nicht versprechen, alle Fragen direkt zu beantworten! Bitte laut denken

2- Erklärung des Kontexts
Essen bestellen und Fast Food ist bequem und schnell, aber es schadet der Umwelt. Um diese zu schützen erlaubt unsere App HelloFridge mit einer Zutatenliste passende Rezepte zu finden. So können für die Essensreste Zuhause neue Gerichte gefunden werden.

3-Fragebogen
Alter ?
Erfahrung mit dem Umgang mit Smartphones ?
Regelmäßiges Nutzen von Mobile Food Apps ?

4-Szenario
Du hast Hunger. Wie immer, gehst du zum Kühlschrank und schaust ob du etwas kochen kannst vor allem damit du deine Essensreste verkochst. Du hast zwar einige Zutaten, aber ein Rezept fällt dir nicht direkt ein. Deshalb nimmst du dein Smartphone, suchst nach einer Rezepte App und klickst auf das innovative Hello Fridge.

5-Aufgaben
Sollten zu einem Zeitpunkt Verständnisfragen zu den Aufgaben auftreten, bitten wir dich, diese uns gegenüber zu äußern. Wir stehen dir auch gerne zur Seite falls mal etwas schiefgelaufen ist.

Log Dich ein
Was ist das letzte Rezept das gekocht wurde ?
Wir wollen nun dieses Rezept nur mithilfe der Rezeptliste finden.
Füge dazu eine normale Einkaufsportion von Hänchenbrust, Reis, Tomaten Olivenöl und Gewürze hinzu.
Lass dir von der App ein Rezept finden.
Bestätige dass du das vorgeschlagene Rezept gekocht hast.
Finde heraus welche Zutaten du noch hast nachdem du gekocht hast.
Füge noch ein beliebige Zutat zum Hello Fridge Topf hinzu und versuche nach einem Rezept zu suchen. (Du wirst kein Rezpt sehen können)
Log Dich aus

6-Abschließende Fragen
Welche Vor- und Nachteile siehst du grundsätzliche bei der Rezeptesuchen-Funktion der Hello Fridge App ?

7- Abschluss
Hast du weitere Fragen oder Anmerkungen ?

Which standardized questionnaire did you choose and why?

After talking about it with the guests, we used the time for that.

Who did what?

We splited this week the tasks in detail but we have both worked on the programming and writing.

What have we learned?

We learned especially how to finish a project with the SDK Flutter and interaction design.

What went well?

We are very happy with our final result.

What do we want to improve?

We try to work on our time management and to find a balance between programming and Human-Centered Design.

[A#9, P7] Preparation of a summative evaluation

(1) Improve your high-fidelity prototype

Group 3 mentioned that clicking on the same tab from different screens led to different results.

Feedback from group 3

Updated Prototype

Why is this the biggest problem for your users?

This is the biggest problem because it deviates from the expectations of the user, thus potentially confuses them.

How will you solve it?

We followed their recommendation and made the state constient by removing the forgotten link we still had active in figma.

How do you expect the user will behave, after the problem is solved?

Thanks to the added tutorial at the beginning of the interference with our app, the user is guided how to start using the app. The layout of our diagrams is consistent now and follow general guidelines on which we decided. 

Decide what usability issues you are going to fix in your prototype and what features you are going to implement next.

We implemented all of the three proposed fixes (add tour through the app at start, change one icon, fix one inconsistent screen), as they were small in scope and we saw their potential for improving the usability and understandability of our app.

(2) Preparation for a summative evaluation

What are things you would like to do differently this time?

The tasks were formulated too specific. For example, 2 b) was:

“Schaue dir die Statistik zu diesem Thema an”

We wanted the user to acknowledge the “stats” tab but now we just told them to click on it. Instead, we should have formulated it like “get an overview of the number of articles” or similarly, so that it’s an actual behavior which might be observed in real users. 

Additionally, there were too many tasks compared to the small scope of the prototype.

What documents do you need?

Consent form:

6.1 Pilot Study Forms 

Think-Aloud and Interview Pilot Study – Consent Form
Sheet #1 

I agree to participate in the study conducted by the Human-Centered Computing Lab of the Freie Universitat Berlin. Participation in this study is voluntary and I agree to immediately raise any concerns or areas of discomfort during the session with the study administrators. 

I understand that all data gathered in this test, including sound records, will be anonymized. I am aware that results from these tests might be published. Please sign below to indicate that you have read and you understand the information on this form. 

Date:  ____________________
Please print your name:  ____________________
Please sign your name:  ____________________

Thank you! 

The Task Observation Form

We updated our script:

(1) Hinweise für den User

Small-talk

Disclaimer: “Wir testen die App, nicht dich! Fragen bitte gerne stellen, ich kann aber nicht versprechen, alle Fragen direkt zu beantworten! Bitte laut denken (Think aloud).”

(2) Kontext der Anwendung

Veritas ist eine App, die für alle gesellschaftspolitisch interessierten Menschen entwickelt wurde. Veritas bietet Usern die Möglichkeit, URLs oder Themen einzugeben. Den Usern wird dann ein umfangreicher Überblick über das Thema gezeigt.

Wie interessiert bist du an gesellschaftspolitischen Themen?

(3) Szenario(s) und 

Du bist auf der Website der NYTimes. Du liest einen spannenden Kommentar über Joe Bidens Waffenpolitik. Du findest den Artikel nicht sehr ausgewogen und würdest gerne andere Perspektiven über dieses Thema einholen.

Benutze die veritas-App, um ähnliche Artikel zu finden. 

(4.1) Aufgaben

  1. Lies einen Artikel, der eine gegensätzliche Meinung zu dem NY-Times Artikel hat
  2. Verschaffe dir einen Überblick, wie die Medien über dieses Thema berichten

(4.2) Post test questionnaire

https://forms.gle/9NYpoejYoFVRM9Js7

(5) Abschließende Fragen

Hast du noch irgendwelche Fragen oder Anregungen?

(6) Abschluss

Danke für deine Zeit

Which standardized questionnaire did you choose and why?

We used the UMUX questionnaire and adopted it to our needs: Link

(3) REFLEXION

WHO MADE WHAT CONTRIBUTION?

We met all together and analyzed the evaluation that we received from group 3 and decided what we need to change in our prototype. Daniel played the biggest role in working on the Figma prototype On another meeting we conducted preparations for summative evaluation. On all of that we worked together during the meetings. 

WHAT DID YOU LEARN?

We could retrospect assignment #6. After gaining more experience and knowledge about our project, we changed our approach in testing and restructured the tasks for the next testing session.

WHAT WENT WELL?

As we were quite happy with our prototype already, with tips from group 3 and our own conclusions, we made our prototype even better. 

WHAT WOULD YOU LIKE TO IMPROVE?

We could have split up the work as some of the points we did during our meetings didn’t require all of us at the same time.

[A#9, P6] Go Walkies

(1) Improve your high-fidelity prototype

Gruppe 2 hat bei uns 17-19 Makel festgestellt, die folgenden erschienen ihnen am Wichtigsten:

  • Link zur Startseite mit Logo (links oben) ist nicht offensichtlich, die User wussten nicht direkt, wie sie zurück zur Startseite gelangen.
    • wie vorgeschlagen, werden wir das Wort „Startseite“ hinzufügen
    • anschließend werden User erkennen, dass das Logo (und das Wort „Startseite“) im Kasten zur Homepage zurückführen
  • Bei den „Buddies in meiner Nähe“ war den Usern unklar, ob das noch „meine“ Buddies sind, oder ganz andere Leute. Das hat die Nutzenden sehr verwirrt.
    • um dieses Missverständnis zu klären, werden die Buddies auf dieser Seite nur „User“ genannt
    • die Änderung sollte helfen, dass unsere User wissen, sie müssen nicht mit den Usern auf dieser Seite befreundet sein, damit sie hier angezeigt werden
  • Top5-Buddies Seite ist nicht richtig verlinkt von der Startseite aus. Dieses ist nur ein kleiner Makel und typisch für einen Prototypen in diesem Stadium.
    • die Top5-Buddies Seite ist der Start der Buddiesseiten und sollte daher von der Startseite erreichbar sein, dieser Link wird einfach getauscht
    • anschließend sind die User nicht mehr verwirrt, wenn sie von beiden Menüs auf dieselbe „Startseite“ gelangen
  • Menüfarben vom Sidemenü passen nicht zu den Farben im Header. Das ist eine subjektive Meinung und hat keine maßgebende Severität.
    • dies werden wir vielleicht nicht ändern, da ein buntes Sidemenü doch sehr aufdringlich ist
  • Schriftfarben stimmen nicht auf allen Seiten überein, das soll aber nicht weiter schlimm sein. Das werden wir überprüfen und uns auf eine Schriftfarbe einigen, die überall benutzt wird
    • mit einheitlichen Schriftfarben sollte es zu keinen Unstimmigkeiten beim Anblick unseres UserInterfaces mehr kommen

Wir werden folgende dieser von der Gruppe 2 dargestellten Probleme in Angriff nehmen.

  • Link zur Startseite ist jetzt beschriftet mit „Startseite“
  • Verlinkungen auf der Homeseite sind für Buddy-Seiten da
  • einheitliche Überschriften auf jeder Seite

(2) Preparation for a summative evaluation

1. What are things you would like to do differently this time?

Wir haben nach den letzten Evaluationen festgestellt, dass unsere Aufgaben nicht sehr genau waren und sie gerne etwas mehr aufteilen wollen (siehe Assignment 6). Inzwischen können wir sogar noch Aufgaben hinzufügen, wie wir es für die Heuristic Evaluation (Assignment 8) getan haben.
Mit unserer Aufteilung der Rollen für’s Usability Testen waren wir sehr zufrieden.

(2+3+4) What documents do you need?

Testskript

https://cryptpad.fr/pad/#/3/pad/edit/404621470fcb0b35d66cf574d45226ab/ (Testskript)

Testperson:
Datum:
Beginn / Startzeit:
Ende / Endzeit:
Max. Zeit: 

(1) Einführung

Vorstellungsrunde + Aufgabenerklärung
Wir testen die App – oder genauer, einen digitalen interaktiven Prototypen. Wir testen nicht dich!
Wir nehmen zur nachträglichen Auswertung die digitale Testung auf. Die Aufzeichnung bleibt bei uns intern und wird direkt nach der Auswertung gelöscht. Es wird nur das Audio aufgenommen. Du selbst bist nicht zu sehen.
Stelle gerne Fragen! Ich kann aber nicht versprechen, alle Fragen direkt zu beantworten!

(2) Kontext der Anwendung erklären

GoWalkies ist eine WebApp mit der es möglich sein soll, Gassirouten zu planen. GoWalkies bietet dazu an, vorgefertigte Routen auszuwählen und zu verändern. Im Rahmen dieses Usability Test möchten wir die Schnellroutenplanungs-Funktion (anhand unsere digitalen Papierprototypen) testen und Feedback dazu einholen.


(3) Szenario(s) 

Du kommst nach einem langen Arbeitstag im Büro (vor dem Rechner und über Akten)  nach Hause und hast wenig Zeit, denn deine zwei Kinder und dein/e Partner/in warten auf Dich und erwarten, dass Du am häuslichen Familienleben teilnimmst. Dein zweijähriger Schäferhund braucht aber auch Auslauf – und Abwechslung. Denn Du hast selbst höhere Ansprüche, wenn man sich ein Haustier anschafft. Deshalb willst Du eine halbe Stunde raus mit dem Hund und es soll nicht jedesmal die gleiche Route sein. 

Da Deine Zeit so knapp bemessen ist, darf die Planung nicht länger als 15 Minuten dauern.

  • Du setzt dich also an den Essenstisch im Wohnzimmer,
  • öffnest deinen Laptop,
  • den Browser,
  • tippst die Adresse der Webseite von GoWalkies ein,
  • meldest Dich an und
  • legst los mit der Planung.


(4) Aufgaben

  • Aufgabe 1: Erstelle dir ein Konto (Daten werden nicht gepeichert, man kann sich aber durchklicken)
  • Aufgabe 2: Melde dich an
  • Aufgabe 3: Finde eine max. 30min lange Route
  • Aufgabe 4: Finde heraus, wie oft du bestimmte Routen bereits gelaufen bist.
  • Aufgabe 5: Finde heraus, wer die Hunde von Martin sind und was er über sich und seine Hunde schreibt.
  • Aufgabe 6: Melde dich ab

(5) Post evaluation skript

Questionnaire

Please answer the following questions. Tick the circles that best describes your answer. Please do not leave any question blank.

1. Do you have one or more dogs?  O Yes    O No

2. How would you rate yourself in the following domains?

noviceexpert
Using digital devicesOOOOOOOOOO
Using and navigating websitesOOOOOOOOOO

​​​​​​​For each word below, please indicate how well it describes the app.

Describes
the app
very poorly
Describes
the app
very well
AccurateOOOOOOOOOO
AnnoyingOOOOOOOOOO
HelpfulOOOOOOOOOO
InterestingOOOOOOOOOO
LikableOOOOOOOOOO
EasyOOOOOOOOOO
SatifyingOOOOOOOOOO
FrustratingOOOOOOOOOO
Good naming and labelingOOOOOOOOOO
Relevance of imagesOOOOOOOOOO
Good look and feelOOOOOOOOOO

(6) Abschluss​​​​​​​​​​​​​​​​​​​​​

Hast Du weitere Fragen oder Anmerkungen?
Vielen Dank für Deine Teilnahme! Du hast uns sehr geholfen.


Consent Form

Einwilligungserklärung

Einwilligungserklärung gemäß DSGVO in die Verarbeitung von Daten durch die Entwickler*innen von GoWalkies! Für unsere Erhebung erfolgt die Verarbeitung folgender personenbezogener Daten: 

  • Pseudonymisierte Zuordnungen zwischen ID und Antwortbogen
  • Pseudonymisierte Antworten

Die oben genannten Daten werden zum Zweck einer Produktverbesserung erhoben und zudem auf den Servern von der TU Berlin gespeichert. Die Daten können nur von berechtigten Personen eingesehen und bearbeitet werden.
Sollten weitere Daten benötigt werden, braucht es dafür separat wieder die Zustimmung des Nutzers. Eine (automatische) Löschung der erhobenen Daten erfolgt nach 2 Monaten.

Widerrufsrecht

Der Unterzeichnende hat das Recht, diese Einwilligung jederzeit ohne Angabe einer Begründung mit Wirkung für die Zukunft zu widerrufen. Hierfür genügt eine E-Mail an max@maxmustermann.de. Die Rechtmäßigkeit der aufgrund der Einwilligung bis zum Widerruf erfolgten Verarbeitung wird durch den Widerruf nicht berührt.

Folgen des Nicht-Unterzeichnens

Der Unterzeichnende hat das Recht, dieser Einwilligungserklärung nicht zuzustimmen – da unsere Evaluation jedoch auf die Erhebung und Verarbeitung der zu Anfang genannten Daten angewiesen ist, würde eine Nichtunterzeichnung eine Inanspruchnahme des Dienstes ausschließen.

Zustimmung durch den Betroffenen

Hiermit versichert der Unterzeichnende, der Erhebung und der Verarbeitung seiner Daten zum Zweck einer Produktverbesserung freiwillig zuzustimmen und über die Datenverarbeitung und seine Rechte belehrt worden zu sein:

___________________________ Ort, Datum, Unterschrift

[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.

[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#7 P1] Starting High Fidelity Prototyping (First Iteration)

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

We decided to use Flutter because it offers an intuitive approach to building user interfaces. It provides higher productivity than implementing the application natively and thus saves us time. Moreover, its artefact is cross-platform what means that our codebase will be the same for multiple platforms(Android, ios…).
We hesitated between Flutter and React Native. Since Mouadh had some experience with the latter, we decided to use the Hello Fridge project as an opportunity to learn new promising technologies.

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

Sorted by priority in descending order.

Functional:

  • User should be able to add ingredients with limited possible ingredients at this stage
  • User should at least get one recipe suggestion from his ingredients
  • Already cooked meals should be automatically saved in the history menu
  • User should be able to manually add meals to favourites
  • User should be able to sign in with social media

Non functional: Database access should be done in reasonable time

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.

What menu type did you choose and why?

Our menu type is not explicitly in the visible area since we decided that in our design we want to focus the route on the functionality and not the other way around.

Which UI controls are appropriate for your application and why?

In general we are using buttons which describes the functionality in the button’s label. One special case is the pot in the home screen. We used this analogy for our ingredients stack. Even if practically the pot is also just a button we have designed this element as a support for the understanding of our functional requirements. An animation that looks like the pot is opened or closed will help in this mindset.

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

Since it’s important for our app to break down single goals into smaller one we want to use the wizard design pattern. „The task of inputting data into the system is parted into multiple steps. Each step is presented to the user one at a time. The user should be presented with information about the steps that exist, progress through the process and which steps are completed.“ http://ui-patterns.com/patterns/Wizard We will use it especially when the recipe is presented where we have some options like adding this recipe to the favorites or at the ende when the user can click on „Already coocked“. With the design pattern wizard we have a previous and a next Logic and we have that during this preparations steps. It`s also very good to show a step by step process.

Who did what?

In this week we have clarified our approach before the start of the first week and had in both following weeks a very separate to-do list.

What did we learn?

We learned Flutter and CI basics but we talked a lot about our priorities too.

What went well?

Everything.

What do we want to improve?

Despite having a clear idea of what the product should look like, we experienced some uncertainties since we are new to the technology and we are still in the explorative prototyping phase.

User Interface Design Patterns

User interface (UI) design patterns are ready solutions for recurring design problems. Those patterns come in form of UI Components. To exemplify, Captcha is a component that enables a strong verification of the data origin and makes sure it comes from a human and not a robot.

Design patterns are the standard reference point for experienced user interface designers. They provide a common language for designers that could save time and improve collaboration by boosting communication since mentioning a design pattern’s name implicitly express much more details than just the name.

Source:

Design patterns,http://ui-patterns.com/patterns

Assignment #8: Heuristic Evaluation

?    Deadline: Monday, 21st June 12 PM (noon)
?    Goals: Continue building your prototype and prepare a heuristic evaluation


  1. Continue to improve your high-fidelity prototype.
  2. Conduct the first and second phases of a heuristic evaluation and prepare to continue with phases 3, and 4 during the next lab session.

Phase 1: Prepare

Use the Nielsen’s Heuristics presented in the lecture.

Prepare the tasks for the evaluators.

Please use an (online) form to collect the violations by each evaluator in a systematic way.

Prepare so everybody can take screenshots and is able to link them in the previous form.

Don’t forget: You need to get access to the application of the other group!

Phase 2: Evaluate (Individual Inspection)

  • Carry out the individual inspection using the prepared documents.
  • Document your violations using your adapted form.
  • All team members should carry out the individual inspection. This should be calculated with 45 minutes per person (max. 1 hour).

Documentation and Reflection

Document and reflect your process and list the files/documents you used during evaluation in the blog post.


Hint: The group discussion (Phase 3) will take place during the next lab session. Prepare for that.


Selected Sets of Heuristics Principles

Assignment #7: Starting High Fidelity Prototyping (First Iteration)

?   Deadline: Monday, 14th June 12 PM (noon)
 ?   Goals: Make a plan on how to build your high-fidelity prototype and start building it.

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?
  2. List your functional and non-functional requirements (features) you are planning to include in your High-Fidelity Prototype.
  3. 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.
  4. Start building your 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?
  • Which UI controls are appropriate for your application and why?
  • Which design patterns are suitable for your application and which ones have you implemented or used? Why?

Hint: During the next lab session (in two weeks), we want to test your prototype using a Heuristic Evaluation. The concept of a heuristic evaluation gets introduced next week.