High Fidelity-Prototyp: 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
Heuristic Evaluation Form: https://docs.google.com/forms/d/e/1FAIpQLSfYjptnWvuVZwWnj5XQnChkWsiv-P8ktnyN5SowfupHybUPiA/viewform
(1) Reflect on the results of the heuristic evaluation you conducted in class.
Bei der durchgeführten heuristischen Evaluation wurden verschiedene Bereiche identifiziert, in denen Verbesserungsbedarf besteht. Die Ergebnisse zeigen, dass das Design nicht auf allen Seiten konsistent ist. Das Design einiger Seiten weicht voneinander ab. Die Navigation auf der ersten Seite erfolgt durch Wischen anstelle von Klicken, was ebenfalls eine Inkonsistenz darstellt. In allen anderen Frames ist zum Navigieren bzw. Interagieren lediglich ein Klicken erforderlich. Die Kennzeichnung des der markierten Navigationselemente im Tutorial ist nicht auffällig genug und die Platzierung der Sprechblase des Roboters nicht auf allen Frames identisch. Die Position der „Weiter“-Buttons variiert auf den Sprechblasen der verschiedenen Screens und sollte einheitlicher gestaltet werden. Die „Weiter“-Buttons haben die gleiche Farbe wie andere Elemente, was ihre Sichtbarkeit verringert. Der „Zurück“-Button sollte eine relative Rücknavigation ermöglichen und nicht zu einem bestimmten Bildschirm führen. Des Weiteren wurden Kritikpunkte an der Gestaltung der Roboter-Grafik geäußert, da sie viel Platz auf dem Bildschirm einnimmt, jedoch keine zusätzlichen Informationen bietet. Bei Formularen ist der „Submit“-Button immer aktiv, obwohl keine Daten eingegeben wurden, was den Nutzer verwirren kann. Die Benutzerführung weist ebenfalls Schwächen auf. Bspw. wird der Nutzer beim Klicken auf „Skip Tutorial“ auf der ersten Seite nach keiner erneuten Bestätigung gefragt. Ebenfalls sollte eine Option zum Wiederholen des Tutorials vorhanden sein.
Zusammenfassend erfordern die Ergebnisse der heuristischen Evaluation Verbesserungen in verschiedenen Bereichen wie Designkonsistenz, Platzierung von UI-Elementen, Sichtbarkeit von Elementen und Benutzerführung. Diese Punkte sollten bei der weiteren Vorgehensweise berücksichtigt werden, um eine bessere Benutzererfahrung zu gewährleisten.
(2) Continue to improve your high-fidelity prototype.
Improvements / Areas we worked on:
Comment | Done |
First page is still in the old design | x |
Navigation on page 1 is different to all other pages (swipe instead of click) | x |
Marking of the footer icon is not eye catching enough | x |
The speech bubble of the robot is too far left in comparisson with all other screens | x |
Robot graphics take up a large part of the screen without providing any additional information. | x |
Submit button in forms is active when there is no data | x |
Chosen point in diagram needs to be bigger | x |
Mission screen is not the same as in the original app. desing should not be touched | x |
The „continue“ buttons are placed in different places each time, which can be a bit tricky | x |
The „continue“ buttons have the same color as most other elements. Not that visible | x |
Back button should be a real back button (navigation = back and not to a specific screen) | x |
When you click „Skip Tutorial“ on the first screen, you are not asked again if you are sure you want to cancel the tutorial. | x |
Welcome text should have correct interpunctation | x |
No skip button | x |
The Continue button is somewhat lost here, since it is in a different place than on the other screens. It is also | x |
The Continue button has the same shade of green as the bar chart and is therefore not directly noticed. | x |
Cancel button x is not centered in header | x |
Text in continue button should be bigger and better readable | x |
„Back“ button doesn’t feel like „Back“ button | x |
You can see pixels in robot icon. Need to be a bigger icon | x |
No question if we are sure we want to skip the tutorial in the beginning | x |
After finishing the tutorial, there is no possibility to repeat it. | x |
„Do you want to finish the tutorial?“ is separate page, doesn’t feel like warning | x |
Too sharp corners, rounded would look better | x |
Oval as a Speech Bubble looks a bit primitive | x |
(3) Prepare another round of heuristic evaluation (this time you test the interface of another group)
(4) Reflection
Wer hat welchen Beitrag geleistet? Wir haben uns die einzelnen Punkte, die in unserem High-Fidelity-Prototyp verbessert werden müssen, untereinander aufgeteilt, sodass jeder ungefähr den gleichen Arbeitsaufwand hat. Was habt ihr gelernt? Wir haben gelernt was bei der Erstellung eines High-Fidelity-Prototyps wichtig ist und wie man ein Formular für eine Heuristische Evaluation entwirft. Was lief gut? Die Kommunikation im Team lief sehr gut. Wir haben und regelmäßig getroffen, um uns auszutauschen und an der Bearbeitung der Aufgaben weiterzuarbeiten. Was möchtet ihr verbessern? Wir möchten unser Zeitmanagement weiter verbessern, um zum einen die uns zur Verfügung stehende Zeit effizienter zu nutzen und zum anderen genügend Zeit für unerwartete Änderungen zu haben.