Assignment #7 – Human-Computer Interaction I

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

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

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.

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

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.

Deadline	Milestone
14.6.2021	First iteration of high fidelity prototype ready (design decisions, color maps, icon selection)
21.6.2021	Test and note feedback from testers and peers (affinity diagrams, individual talks)
27.6.2021	Improve prototype according to feedback (human centered design process)
4.7.2021	Test and note feedback from testers and peers
11.7.2021	Final changes and bug fixes of prototype
18.7.2021	Prototype is being sent to programmers to develop the app for iOS and Android

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#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-GanttChart Herunterladen

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: 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

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

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.

What framework or tools are you going to use? Why?
List your functional and non-functional requirements (features) you are planning to include in your High-Fidelity Prototype.
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.
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.