Design - HackMD

> [name=Lucas] > [time=Thu, May 30, 2023 10:23 AM][color=#4f85e2] # Design ## Komponente - Home Page Title Modul Indentifikationen Icons/Cards mit modul namen + beschreibung Arbeitsjournal Login - Modul Page Modul Titel Fileablage inkl. link zu CodiMD maybe schüler aufgaben/vorschläge Lehrperson anzeigen Name ## WireFrame Bei *Version 1* wird ein Popout Menu dargestellt. Das wurde aber entfert da es für diesen keinen Sinn hat für nur 2 item ein ganzes menu zu erstellen. Deshalb wurde in der *Version 2* das Menu ganz einfach in die Top Bar eingebaut. ### Version 1 ![](https://hackmd.io/_uploads/ByA1KrXL3.png) ___ ### Version 2 ![](https://hackmd.io/_uploads/rycGtrm82.png) ## Design Prototyp ### Phone Design #### Home Screen ***Home V1*** <img src="https://hackmd.io/_uploads/HJRZKCH82.png" style="border:1.5px solid black; filter:drop-shadow(0px 0px 5px black); "/> ***Home V2*** <img src="https://hackmd.io/_uploads/S1_3gDXLh.png" style="border:1.5px solid black; filter:drop-shadow(0px 0px 5px black);"/> #### Modul <img src="https://hackmd.io/_uploads/SJAURCB8h.png" style="border:1.5px solid black; filter:drop-shadow(0px 0px 5px black);"/> #### Software Kiosk <img src="https://hackmd.io/_uploads/SyYoFCSU3.png" style="border:1.5px solid black; filter:drop-shadow(0px 0px 5px black);"/> #### Modulidentifikation <img src="https://hackmd.io/_uploads/Syibh0BU2.png " style="border:1.5px solid black; filter:drop-shadow(0px 0px 5px black);"/> #### ZP&LB Info <img src="https://hackmd.io/_uploads/rJLGn0HUh.png" style="border:1.5px solid black; filter:drop-shadow(0px 0px 5px black);"/> ### Desktop Design #### Home Screen <img src="https://hackmd.io/_uploads/HJSM6CH83.png" style="border:1.5px solid black; filter:drop-shadow(0px 0px 5px black);"/> #### Modul <img src="https://hackmd.io/_uploads/rJ2GaASIn.png" style="border:1.5px solid black; filter:drop-shadow(0px 0px 5px black);"/> #### Software Kiosk <img src="https://hackmd.io/_uploads/r1olRCrLh.png" style="border:1.5px solid black; filter:drop-shadow(0px 0px 5px black);"/> #### Modulidentifikation <img src="https://hackmd.io/_uploads/rk9bA0HUn.png" style="border:1.5px solid black; filter:drop-shadow(0px 0px 5px black);"/> #### ZP&LB Info <img src="https://hackmd.io/_uploads/Bk0ZRRBIn.png" style="border:1.5px solid black; filter:drop-shadow(0px 0px 5px black); "/> ### Figma <iframe style="border: 1px solid rgba(0, 0, 0, 0.1);" width="800" height="450" src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2F3ZHcEQ4WTk8uQHYo7Xcak1%2FDesign-Prototyp%3Ftype%3Ddesign%26node-id%3D0%253A1%26t%3DHM9Fd4ztCAvZNmdM-1" allowfullscreen></iframe> ## User Usability Tests ### Tests 1. User soll sich via GitHub anmelden 2. User soll in das Modul 245 hineingehen, und die Modulidentifikation anschauen. 3. User soll File XY aus dem Block 2 in Modul 245 runterladen. 4. User soll auf sein Arbeitsjournal gehen 5. User soll im Software Kiosk, unter Modul 245, VSCode runterladen. (2 Möglichkeiten) ### Tester + Feedback - Ethan (Student) (1:04 min) - Kein Feedback - Matthias (Student) (2:05 min) - Untertittel für jeweilige Buttons - Sy Viet (Student) (2:18 min) - Module im Homescreen sortieren. - Patrick Venzin (Dozent) (4:28 min) - Texte in "Modulidentifikation" & "ZP & LB Info" vergrössern. ### Gewonnene Lektionen Aus den Test haben wir erfasst, dass die Module sortierbar sein sollten. Auch sollten die Texte unter "Modulidentifikation" & "ZP & LB Info" vergrössert werden. #### Verbesserte "Home" Page Wie zu sehen ist, wurde eine "Sort by" spalte hinzugefügt. <img src="https://hackmd.io/_uploads/SJhT9M8U2.png" style="border:1.5px solid black; filter:drop-shadow(0px 0px 5px black);"/> ### Figma Test Prototyp <iframe style="border: 1px solid rgba(0, 0, 0, 0.1);" width="800" height="450" src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Fproto%2F3ZHcEQ4WTk8uQHYo7Xcak1%2FDesign-Prototyp%3Fpage-id%3D46%253A2106%26type%3Ddesign%26node-id%3D46-2141%26viewport%3D413%252C1761%252C0.31%26scaling%3Dscale-down%26starting-point-node-id%3D46%253A2141" allowfullscreen></iframe> ## Design Anpassungen ### Entscheidung Entschieden wurde, dass das Generelle Layout des Designs so übernommen wird wie aus denn Prototypen aber um das Lernportal ansprechender und interessanter zu gestalten haben wir uns für einen minimalistischen, aber angenehmen Farb/ - Layout design entschieden. Die Generelle Idee ist es, eine Seite zu gestalten, die für den Endnutzer ansprechend gestaltet ist, alle notwendigen Funktionalitäten beinhaltet aber trotzdem sehr einfach zu bedienen ist, sodass er/sie diese öfters nutzen möchte und nicht davor abschreckt. ### Design Änderungen Visualisiert. #### Home Page ***Altes Design*** <img src="https://hackmd.io/_uploads/HJSM6CH83.png" style="border:1.5px solid black; filter:drop-shadow(0px 0px 5px black);"/> ***Updated Design*** <img src="https://hackmd.io/_uploads/H1VLr_uD3.png" style="border:1.5px solid black; filter:drop-shadow(0px 0px 5px black);"/> ___ ### Modul Page ***Altes Design*** <img src="https://hackmd.io/_uploads/rJ2GaASIn.png" style="border:1.5px solid black; filter:drop-shadow(0px 0px 5px black);"/> ***Updated Design*** <img src="https://hackmd.io/_uploads/B1UMIdOPh.png" style="border:1.5px solid black; filter:drop-shadow(0px 0px 5px black);"/> ___ ### Software Kiosk ***Altes Design*** <img src="https://hackmd.io/_uploads/r1olRCrLh.png" style="border:1.5px solid black; filter:drop-shadow(0px 0px 5px black);"/> ***Updated Design*** <img src="https://hackmd.io/_uploads/H11xw__w2.png" style="border:1.5px solid black; filter:drop-shadow(0px 0px 5px black);"/> <img src="https://hackmd.io/_uploads/Hyf1vduvh.png" style="border:1.5px solid black; filter:drop-shadow(0px 0px 5px black);"/> ## Usability Test NR 2. ### Tests 1. User soll sich via Microsoft Konto anmelden 2. User soll in das Modul 117 hineingehen, und die Modulidentifikation anschauen. 3. User soll Sidequest Installation eines neuen lokalen Netzwerks aus dem Block 2 in Modul 117 Öffnen. 4. User soll auf sein Arbeitsjournal gehen und sich dort einloggen über OAuth (microsoft) 5. User soll sein Lieblinsmodul anheften (anpinnen) 6. User soll in denn SoftwareKiosk gehen, und für Modul 216 sortieren. ***Test Ethan*** <iframe src="https://www.veed.io/embed/0a16ac68-b307-4921-bed4-6ac9c972fae4" width="744" height="504" frameborder="0" title="Mozilla Firefox 2023-06-15 14-14-03.mp4" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> ### Tester + Feedback - Ethan (Student) (- min) (+) Viel übersichtlicher als Letztes Mal - Matthias (Student) (- min) (-) Button untertitel - Sy Viet (Student) (- min) (-) Zurück Button (+) Schönes Design - Patrick Venzin (Dozent) (- min) (+) Viel übersichtlicher als Letztes Mal ### Gewonnene Lektionen Aus denn Usability Tests wird nun ein "Home" Button eingefügt, sowie Untertitel. ## Finales Design ### Idee Aus den Erkenntnissen des 2. Unity test's wurden die Seiten überarbeitet. Hauptsächlich wurden nur minimale anpassungen gemacht wie zb Schriftgrösse, und farb anpassungen. Dazu wurde eine Admin Page und eine Page zum editieren der Module/Sidequests erstellt. ### Home Page ***Finales Design*** <img src="https://hackmd.io/_uploads/rk4Xkh5dn.png " style="border:1.5px solid black; filter:drop-shadow(0px 0px 5px black);"/> --- ### Modul Page ***Finales Design*** *Admin und Lehrer View* <img src="https://hackmd.io/_uploads/H1naAj5_3.png" style="border:1.5px solid black; filter:drop-shadow(0px 0px 5px black);"/> <img src="https://hackmd.io/_uploads/HkTR129_h.png" style="border:1.5px solid black; filter:drop-shadow(0px 0px 5px black);"/> *Schüler/User View* <img src="https://hackmd.io/_uploads/Sku1W2qd3.png" style="border:1.5px solid black; filter:drop-shadow(0px 0px 5px black);"/> --- ### Software Kiosk ***Finales Design*** <img src="https://hackmd.io/_uploads/HyO_J39u3.png" style="border:1.5px solid black; filter:drop-shadow(0px 0px 5px black);"/> --- ### Admin Page <img src="https://hackmd.io/_uploads/HkTR129_h.png" style="border:1.5px solid black; filter:drop-shadow(0px 0px 5px black);"/>