{"id":1593,"date":"2021-06-14T07:51:03","date_gmt":"2021-06-14T05:51:03","guid":{"rendered":"https:\/\/blogs.fu-berlin.de\/hci1-sose2021\/?p=1593"},"modified":"2021-06-14T08:47:53","modified_gmt":"2021-06-14T06:47:53","slug":"a7-p3-starting-high-fidelity-prototyping-first-iteration","status":"publish","type":"post","link":"https:\/\/blogs.fu-berlin.de\/hci1-sose2021\/2021\/06\/14\/a7-p3-starting-high-fidelity-prototyping-first-iteration\/","title":{"rendered":"[A#7, P3] Starting High Fidelity Prototyping (First Iteration)"},"content":{"rendered":"\n<p><strong>We now start working on the Hifi-Prototypes and start building an interactive product.<\/strong><\/p>\n\n\n\n<ol class=\"wp-block-list\"><li><strong>What framework or tools are you going to use? Why?<\/strong><\/li><\/ol>\n\n\n\n<p>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\u00dfe Community und zahlreichen Tutorials und zus\u00e4tzlich, dass es auch kostenlos ist.<\/p>\n\n\n\n<ol class=\"wp-block-list\" start=\"2\"><li><strong>List your functional and non-functional requirements (features) you are planning to include in your High-Fidelity Prototype.<\/strong><\/li><\/ol>\n\n\n\n<p><strong>Funktionale Anforderungen:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Das System soll Nutzer:innen abgelaufene Routen in einer \u00dcbersicht darstellen k\u00f6nnen.<\/li><li>Das System soll Statistiken erfassen und diese in einer \u00dcbersicht darstellen k\u00f6nnen.<\/li><li>Empfehlenswerte Sehensw\u00fcrdigkeiten mit Routen werden angezeigt (Informationen \u00fcber Orte sollen deshalb aktuell sein).<\/li><li>Auswahlm\u00f6glichkeiten an der Routenkategorie (landschaftlich\/kulturell\/kulinarisch ansprechend)<\/li><li>Informations\u00fcbersichten \u00fcber Points of Interest.<\/li><li>(Live Besuchsdaten werden angezeigt, um eventuelle Wartezeiten zu vermeiden.)<\/li><li>pers\u00f6nliche Daten sollen vertraulich behandelt und nicht an Dritte weitergegeben werden<\/li><li>Account erstellen<\/li><li>(Routenvorschlag akzeptieren oder ablehnen)<\/li><li>(Bewertung zur Route abgeben)<\/li><\/ul>\n\n\n\n<p><strong>Nichtfunktionale Anforderungen:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Das System darf nicht l\u00e4nger als 5 Sekunden ben\u00f6tigen, um die gew\u00fcnschte Route darzustellen.<\/li><li>Schnelle und genaue Berechnung der Routen<\/li><li>Benutzeroberfl\u00e4che soll intuitiv und einfach sein<\/li><li>Die Sprache der App ist englisch<\/li><li>Plattformunabh\u00e4ngig f\u00fcr IOS- und Android-Nutzer:innen<\/li><\/ul>\n\n\n\n<ol class=\"wp-block-list\" start=\"3\"><li><strong>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.<\/strong><\/li><\/ol>\n\n\n\n<figure class=\"wp-block-table\"><table><tbody><tr><td><strong>Deadline<\/strong><\/td><td><strong>Milestone<\/strong><\/td><\/tr><tr><td><strong>14.6.2021<\/strong><\/td><td><strong>First iteration of high fidelity prototype ready (design decisions, color maps, icon selection)<\/strong><\/td><\/tr><tr><td><strong>21.6.2021<\/strong><\/td><td><strong>Test and note feedback from testers and peers (affinity diagrams, individual talks)<\/strong><\/td><\/tr><tr><td><strong>27.6.2021<\/strong><\/td><td><strong>Improve prototype according to feedback (human centered design process)<\/strong><\/td><\/tr><tr><td><strong>4.7.2021<\/strong><\/td><td><strong>Test and note feedback from testers and peers<\/strong><\/td><\/tr><tr><td><strong>11.7.2021<\/strong><\/td><td><strong>Final changes and bug fixes of prototype<\/strong><\/td><\/tr><tr><td><strong>18.7.2021<\/strong><\/td><td><strong>Prototype is being sent to programmers to develop the app for iOS and Android<\/strong><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<ol class=\"wp-block-list\" start=\"4\"><li><strong>Start building your prototype.<\/strong><\/li><\/ol>\n\n\n\n<p><a rel=\"noreferrer noopener\" href=\"https:\/\/www.figma.com\/proto\/2XDG2goU2Iyc4LmI697YjU\/ScenicRoute?node-id=51%3A86&amp;scaling=scale-down&amp;page-id=0%3A1\" target=\"_blank\">Here is the link of our Figma project for the high-fidelity prototype<\/a><\/p>\n\n\n\n<p><strong>Please answer the following question: How did you handle the topics: menu, UI consoles, and Design patterns?<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>What menu type did you choose and why?<\/strong><\/li><\/ul>\n\n\n\n<p>Unserer Meinung nach ist unsere Menu-Art nicht in den Folien aufgef\u00fchrt, aber wir haben eine Art Guided-Menu, wo man Button ausw\u00e4hlt und aufgrund von der Auswahl der Button wieder neue Auswahlm\u00f6glichkeiten erscheinen.<\/p>\n\n\n\n<p>Wir haben uns hierf\u00fcr entschieden, weil wir der Meinung waren, dass dies f\u00fcr die User am leichtesten nutzbar ist und man sich nicht gro\u00df mit der App auseinandersetzen muss um sie zu benutzen.<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Which UI controls are appropriate for your application and why?<\/strong><\/li><\/ul>\n\n\n\n<p>Wir haben uns haupts\u00e4chlich f\u00fcr \u201cAction and Navigation controls\u201d entschieden, da dies gut mit unser Menu-Art harmoniert und an den Stellen, wo Texteingaben erforderlich sind werden \u201cData entry controls\u201d genutzt.<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Which design patterns are suitable for your application and which ones have you implemented or used? Why?<\/strong><\/li><\/ul>\n\n\n\n<p>Da die Buttons zur Verlinkung zu anderen Zust\u00e4nden dienen und gleichzeitig verschiedene Funktionen erf\u00fcllen, wie z.B. Daten in eine Datenbank speichern oder abrufen, handelt es sich bei Ihnen um \u201cCreational Patterns\u201d, welche die Logik, die dahinter versteckt ist, verbergen.<\/p>\n\n\n\n<p><strong>REFLEXION:<\/strong><\/p>\n\n\n\n<p><strong><br><\/strong><strong><em>WHO MADE WHAT CONTRIBUTION?<\/em><\/strong><\/p>\n\n\n\n<p><em>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.&nbsp;<\/em><\/p>\n\n\n\n<p><strong><em>WHAT DID YOU LEARN?<\/em><\/strong><\/p>\n\n\n\n<p><em>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.<\/em><\/p>\n\n\n\n<p><strong><em>WHAT WENT WELL?<\/em><\/strong><\/p>\n\n\n\n<p><em>Very nice teamwork and workload balance. We are still satisfied with how we do the task division \u2013 mostly we do it together. We are happy that we learnt a new tool &#8211; Figma, and the whole designing &#8211; prototyping process went really well.&nbsp;<\/em><\/p>\n\n\n\n<p><strong><em>WHAT WOULD YOU LIKE TO IMPROVE?<\/em><\/strong><\/p>\n\n\n\n<p><em>There is nothing we would like to improve, since we are pretty much satisfied with how it went, both content wise and atmosphere wise.<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>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\u00dfe Community und zahlreichen Tutorials und &hellip; <a href=\"https:\/\/blogs.fu-berlin.de\/hci1-sose2021\/2021\/06\/14\/a7-p3-starting-high-fidelity-prototyping-first-iteration\/\" class=\"more-link\"><span class=\"screen-reader-text\">\u201e[A#7, P3] Starting High Fidelity Prototyping (First Iteration)\u201c<\/span> weiterlesen<\/a><\/p>\n","protected":false},"author":6277,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"footnotes":""},"categories":[410768,401222],"tags":[],"class_list":["post-1593","post","type-post","status-publish","format-standard","hentry","category-scenicroute-projekt-3","category-assignment-7"],"_links":{"self":[{"href":"https:\/\/blogs.fu-berlin.de\/hci1-sose2021\/wp-json\/wp\/v2\/posts\/1593","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blogs.fu-berlin.de\/hci1-sose2021\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blogs.fu-berlin.de\/hci1-sose2021\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blogs.fu-berlin.de\/hci1-sose2021\/wp-json\/wp\/v2\/users\/6277"}],"replies":[{"embeddable":true,"href":"https:\/\/blogs.fu-berlin.de\/hci1-sose2021\/wp-json\/wp\/v2\/comments?post=1593"}],"version-history":[{"count":4,"href":"https:\/\/blogs.fu-berlin.de\/hci1-sose2021\/wp-json\/wp\/v2\/posts\/1593\/revisions"}],"predecessor-version":[{"id":1603,"href":"https:\/\/blogs.fu-berlin.de\/hci1-sose2021\/wp-json\/wp\/v2\/posts\/1593\/revisions\/1603"}],"wp:attachment":[{"href":"https:\/\/blogs.fu-berlin.de\/hci1-sose2021\/wp-json\/wp\/v2\/media?parent=1593"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogs.fu-berlin.de\/hci1-sose2021\/wp-json\/wp\/v2\/categories?post=1593"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogs.fu-berlin.de\/hci1-sose2021\/wp-json\/wp\/v2\/tags?post=1593"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}