List your various requirements elicited from the user research.

• Fragebogenstruktur
• Relevante Fragen
• Ergebnispräsentation
• Transparenz
• Datenschutz
• Benutzerfreundlichkeit
• Barrierefreiheit

Decide based on your requirements and the insights from the low-fi prototype-testing what functionality to include in your high-fidelity prototype.

Consider your problem statement

Problem: Es gibt bisher keine Möglichkeiten, verschiedene ePAs zu vergleichen.

What insights did you gain from the testing? What are your main takeaways?

User 1:

• Wusste was die Buttons machen
• Zurückpfeil verwirrend 
• Bei der Texterklärung lieber Zurückbutton oder x statt Swiping
• Bei der Ergebnisanzeige sollte man zurückgehen können, um einzelne Fragen anders beantworten zu können, damit man nicht komplett von vorne anfangen muss, wenn man nur eine Änderung vornehmen möchte
• Tutorialpage am Anfang  
• Macht Sinn für 25 Jährige 
• Für Ältere Personen nicht
• Transparenz erhöhen, während gewischt wird

User 2:

• Wusste was die Buttons machen 
• Extraslide mit Tutorial 
• Man erkennt nicht, dass man auf die Punkte klicken kann, um zu springen
• Mehr Auswahloptionen eventuell

User 3:

• Hat den Zurückbutton nicht gesehen in der ersten Iteration 
• Und das Fragezeichen nicht
• Bei Klick auf dem Fragezeichen wurde das Tutorial erwartet und nicht die Erklärung der Frage: Statt Fragezeichen ein “i” zusätzlich zur Klärung der Frage
• Fand es nicht ganz intuitiv 
• Erklärung der Buttons beibehalten

Decide on an approach to select the most appropriate requirements (whatever appropriate means in your context)

Es ergeben sich folgende vier Punkte, die wir an dem Prototypen verbessern wollen:

• Ein Tutorial für die Bedienung
• i statt Fragezeichen für Erläuterungen der aktuellen These
• Bei der Texterklärung lieber Zurückbutton oder x statt Swiping
• Zurückmöglichkeiten an jeder Stelle der App

Die Punkte wurden so ausgewählt: Entweder wurden sie mehrfach genannt oder sind Low Hanging Fruits. 

Define the major task flow you want to support.

Task Flow 1:

Aufgabenfluss: Die beste Krankenversicherungsoption finden
Beschreibung: Leo möchte mithilfe der Wahl-O-Mat-Plattform die beste Krankenversicherungsoption finden, die seinen Bedürfnissen entspricht.

Schritte:

1. Leo landet auf der Startseite von Wahl-O-Mat und sieht einen klaren Aufruf zum Start der Bewertung.
2. Leo beginnt die Bewertung, indem Leo eine Reihe von Fragen zu Präferenzen und Anforderungen an die Krankenversicherung beantwortet.
3. Leo werden empfohlene Krankenversicherungsoptionen basierend auf den Antworten präsentiert.
4. Leo kann detaillierte Informationen zu jeder empfohlenen Option erkunden, einschließlich Leistungen, Beiträgen und zusätzlichen Services.

---

Task Flow 2:

Aufgabenfluss: Erhalten weiterer Informationen durch Drücken der Informationstaste bei den Wahl-O-Mat-Fragen

Beschreibung: Der Benutzer öffnet den Wahl-O-Mat und drückt die Informationstaste bei den einzelnen Fragen, um weitere Informationen zu erhalten.

Schritte:

1. Der Benutzer sieht eine Fragen, die im Wahl-O-Mat beantwortet werden sollen.
2. Jede Frage ist mit einer Informationstaste oder einem Informationssymbol versehen.
3. Der Benutzer drückt die Informationstaste neben der ausgewählten Frage.
4. Nachdem die Informationstaste gedrückt wurde, öffnet sich ein Overlay oder eine Pop-up-Anzeige mit weiteren Informationen zu der ausgewählten Frage.
5. Das Overlay oder die Pop-up-Anzeige enthält detaillierte Hintergrundinformationen, Kontext oder Erläuterungen zur Fragestellung.
6. Der Benutzer liest sich die Informationen durch und kann bei Bedarf zur vorherigen Ansicht zurückkehren oder weitere Fragen auswählen.
7. Nachdem der Benutzer die Informationen erhalten hat, schließt er das Overlay oder die Pop-up-Anzeige und setzt die Beantwortung der Fragen fort.

Start building your prototype. The UI should be clearly developed (consider all interaction, visual, and information design)

Screenshot aus Penpot:

(1) List your various requirements elicited from the user research.

• This step should be earlier in the process, as you know, but it is useful for focusing your work

• it should be easy to understand how to follow tutorial
• the most basic information should me explained/shown on each step
• each feature in the down section of app has to be explained
• by the end of tutorial user should be able to use the Smoke Free app on their own

• Step-by-step instructions: The user wants simple and clear instructions to guide them through the registration process and tutorial. It should be clear that one has to swipe up to continue.
• Skipping steps: There should be a button that allows the user to skip certain steps in the tutorial.
• Show button functions: The users would like the ability to click on the highlighted button to view the functions while other buttons are disabled.
• Additional information: In addition to health status, some users would like the ability to indicate other information such as cravings for certain foods.
• Cancel tutorial: The user should be able to cancel the tutorial at any point.
• Skip text inputs: It should be possible to skip certain input steps instead of having to enter something.
• Go back to previous step: Users would like the ability to return to the previous step in the tutorial.
• Clearer highlighting of buttons: The color of buttons should stand out more clearly to make them easier to see, especially for the colorblind.
• Adaptations for people with visual impairments: Measures should be taken to ensure that colorblind people can easily recognize the buttons and markers.
• Highlighting the save button: In the tutorial, the save button to save entered values should be highlighted more prominently, for example by making it larger.
• Clarity and understandability: The tutorial should be easy to understand and comfortable for users.

(2) Decide based on your requirements and the insights from the low-fi prototype-testing what functionality to include in your high-fidelity prototype.

• Consider your problem statement
• What insights did you gain from the testing? What are your main takeaways?
• Decide on an approach to select the most appropriate requirements (whatever appropriate means in your context)
• asy to follow as you’re guided step-by-step through the process.

• Skip step button.
• Ability to click on the highlighted button to view its functions. Other buttons disabled.
• Ability to cancel the tutorial at any point.
• Option to skip input; not mandatory.
• Option to go back to the previous step.
• The color of the buttons is not prominent enough. Can be difficult for color-blind users to recognize see it.
• Make the save button more noticeable (for example, larger), as this is a tutorial and it’s not clearly indicated that something needs to be entered.

(3) Define the major task flow you want to support.

• Based on your scenario, describe at least two major task flows.
• These descriptions will serve as task descriptions for the evaluators within heuristic evaluation next week.

Task Flow 1: Simplified Introduction

1. User opens the SmokeFree app for the first time.
2. After successful registration, the user is guided through the onboarding tutorial.
3. The tutorial provides step-by-step instructions on using the app, including features like tracking smoking habits, setting goals, and accessing resources.
4. The user completes each tutorial step, following the instructions and interacting with the app accordingly.
5. Once the tutorial is finished, the user is directed to the app’s main dashboard, where they can access the full range of features and functionalities to aid in their smoking cessation journey.

minor task flow:

Task Flow 2: Revisiting Tutorial Steps

1. User is actively using the SmokeFree app.
2. While navigating through the app, the user realizes they have missed certain tutorial steps or information related to a specific page or feature.
3. On the current page, the user looks for a dedicated option or button to revisit the tutorial steps.
4. The user locates the „Tutorial Recap“ or similar option on the page and clicks on it.
5. The app presents a recap of the tutorial steps associated with that specific page or feature.
6. The user reviews the instructions, explanations, and interactive elements presented in the tutorial recap.
7. If necessary, the user follows the instructions and interacts with the app to practice the steps covered in the tutorial.
8. Once the tutorial recap is completed, the user can continue using the app with the refreshed knowledge and understanding of the missed information.
9. If the user encounters another page or feature where they feel they have missed tutorial steps, they can repeat this process by finding the „Tutorial Recap“ option on that particular page.

(4) Start building your prototype. The UI should be clearly developed (consider all interaction, visual, and information design)

https://www.figma.com/proto/vKlEYIkcpOjpLLNpAIOY6F/HCI-first-prototype?type=design&node-id=1-3&scaling=min-zoom&page-id=0%3A1&starting-point-node-id=1%3A3

(1) Summarize the feedback you received on your storyboard.

Overall, the feedback to our storyboard was positive. One of the main points of critique was the lack of environment to show where our persona would be most likely using the app and its accessibility options.Additionally, we had not drawn a face in every frame, which led to the storyboard seeming less consistent. In our storyboard, the persona interacts with their phone. We can see this from over their shoulder, but the visible screen is rather small. We were advised to include a larger copy of said screens when they are visible in the storyboard, so a viewer has an easier time understanding what is happening.

(2) Develop an interactive paper prototype.

For starters, we decided to use Figma to create our prototype. It seemed like a simple but effective tool to use. We wanted to create a prototype to address our user scenario from the previous assignment. That meant creating the screens to activate accessibility settings was very important, as well as the screens relevant to registering a visit to the doctor and sharing/creating documents.As we wanted to showcase our idea for including a voice controlled assistant, we had to add a button for that on every screen, including the button links to and from said assistant. We have not decided to make a different version for each combination of accessibility tools, as that seemed extremely excessive, though it is an idea to keep in mind for the next task.We believe that our storyboard is represented rather well in our prototype, as all the actions taken by Martin should be possible to reenact here as well.In the end, the prototype could probably use some more screens to explore. This includes at least a dummy version of the menu when accessibility options are disabled, so the difference becomes clear (that would probably be a screenshot of the actual app). We are happy with our result overall.

The link to our prototype: https://www.figma.com/proto/FGW7aa5zIfj257zIb1JG90/FirstPrototypeHCIePA?type=design&node-id=0%3A1&t=nJUjm5Zdl5hhyjvY-1

(1) Summarize the feedback you received on your storyboard.

Our statement doesn’t mention the illness were working with is Parkinsons Disease.

The storyboard lacks a frame for adding a tremor which is important for context.

(2) Develop an interactive paper prototype.

Figma Prototype

https://www.figma.com/proto/EVtOTf6s5UELPFq9ZYWvHx/Untitled?type=design&node-id=1-2&scaling=scale-down&starting-point-node-id=1%3A2

We took our storyboard and our sketches as a starting point and implemented screens for the use case of entering data and medication into the diary, and then displaying them for understanding. We based most of the screens on the sketches we had already made. So far the prototype is not very pretty and lacks a lot of the smaller input choices the user could make.

Who contributed what?

We worked on the prototype together.

What have we learnt?

It was fun using a design tool.

What went well?

Coordination of teamwork, our time management was also very good this week.

What can be improved upon?

This week nothing.

(1) Summarize the feedback you received on your storyboard.

During the last lab session, you collected feedback from your peers. Please summarize the feedback and document which feedback you will incorporate into your prototype.

The people giving feedback noted that the storyboard’s design and personalization were done well and detailed, offering a nice picture of the app guide. There was however a weak connection with the scenario, so there could be more description of Sabine’s thoughts and actions.

(2) Develop an interactive paper prototype.

You will develop a low-fidelity interactive prototype that represents multiple states or views. Think about your persona who wants to use your product: What are the minimum needs of your persona? What are the must-haves?

Please describe briefly:

• Your prototyping process.
• The use case this prototype addresses.
• How the storyboard is reflected in your prototype.
• A self-assessment of the potential strengths and weaknesses of this first step into your design space.

We started by deciding to use figma as a plattform to create our first prototype. We created accounts and a project. Then we all started creating the first flow in figma. After we had all the frames we continued to create components and started filling the frames with our desired content. We all worked on different aspects of the frames.

The use case of our prototype is a onboarding process of a user after the user registered and starts using the app. They will be greated by a tutorial but can decide to skip it.

Our Storyboard was already very detailed and very focused on the prototype. Therefore we just recreated the storyboard as the prototype.

The strengths of our prototype are clear user interactions and a straight forward user guidance. But it lacks a refined design.

https://www.figma.com/proto/vKlEYIkcpOjpLLNpAIOY6F/HCI-first-prototype?type=design&node-id=0-1&scaling=min-zoom&page-id=0%3A1&starting-point-node-id=1%3A3&show-proto-sidebar=1

(1) Summarize the feedback you received on your storyboard.

Feedback	Maßnahme
Es gab keine Zurück-Funktion.	Zurück-Funktion einbauen
Es war nicht klar, wie navigiert wird.	Hilfestellung für die Navigation einbauen

(2) Develop an interactive paper prototype.

Your prototyping process.

Wir haben uns verschiedene Prototyping-Anbieter angeschaut und uns dann für Penpot entschieden, da Jan und Christopher damit schon in einer anderen Veranstaltung gearbeitet haben.

Die simultane Zusammenarbeit mit Penpot funktioniert leider nicht besonders gut, sodass wir uns oft gegenseitig in die Quere kamen. Wir haben deshalb beschlossen, dass nur einer arbeitet und die anderen per Videokonferenz zugucken und Feedback geben.

The use case this prototype addresses.

Unser Prototyp soll die Problemstellung im Szenario von Aufgabe 5 lösen.

How the storyboard is reflected in your prototype.

Tatsächlich haben wir unser Storyboard fast 1:1 in den Prototypen überführt. Nur die Verbesserungsvorschläge der Kommiliton*innen (siehe oben) sind zusätzlich eingeflossen.

Leider können wir keinen Link zum Teilen des Prototyps bereitstellen, falls jemand ihn ausprobieren möchte, laden wir natürlich sehr gerne zum Projekt ein.

A self-assessment of the potential strengths and weaknesses of this first step into your design space.

Eigentlich lief alles ganz gut, abgesehen davon, dass man mit Penpot nur schwierig simultan arbeiten kann.

Außerdem sind die Pfeile zum Navigieren etwas unglücklich, da sie das Swipen repräsentieren sollen, aber so in der Navigation geklickt werden müssen. ⚡