{"id":1577,"date":"2021-06-13T22:17:12","date_gmt":"2021-06-13T20:17:12","guid":{"rendered":"https:\/\/blogs.fu-berlin.de\/hci1-sose2021\/?p=1577"},"modified":"2021-06-13T22:17:12","modified_gmt":"2021-06-13T20:17:12","slug":"a7-p8-starting-high-fidelity-prototyping-first-iteration","status":"publish","type":"post","link":"https:\/\/blogs.fu-berlin.de\/hci1-sose2021\/2021\/06\/13\/a7-p8-starting-high-fidelity-prototyping-first-iteration\/","title":{"rendered":"[A#7, P8] Starting High Fidelity Prototyping (First Iteration)"},"content":{"rendered":"\n<h3 class=\"wp-block-heading\">What framework or tools are you going to use? Why?<\/h3>\n\n\n\n<p>F\u00fcr das Gantt-chart haben wir ein normales Excel\/Sheets Dokument verwendet, da das kein neues Tool ist mit dem man sich besch\u00e4ftigen muss ist. Ausserdem hat das den Vorteil, dass die Darstellung recht flexibel ist.  F\u00fcr den Prototypen haben wir <a href=\"http:\/\/bubble.io\">bubble.io<\/a> ausgew\u00e4hlt, da es zum einen eine Zusammenarbeit erm\u00f6glicht und da sich bei uns nicht alle mit HTML\/CSS auskennen eine einfachere Erstellung von Web Apps erm\u00f6glicht. <\/p>\n\n\n\n<h3 class=\"wp-block-heading\">List your functional and non-functional requirements (features) you are planning to include in your High-Fidelity Prototype<\/h3>\n\n\n\n<ul class=\"wp-block-list\"><li>Functional<ul><li>Gruppe per Link beitreten<\/li><li>Filter View darstellen<\/li><li>Game Info Display<\/li><\/ul><\/li><li>Non functional<ul><li>Simpel<\/li><li>Klare Men\u00fc F\u00fchrung<\/li><\/ul><\/li><\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">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.<\/h3>\n\n\n\n<div class=\"wp-block-file\"><a href=\"https:\/\/blogs.fu-berlin.de\/hci1-sose2021\/files\/2021\/06\/Projektplan-HCI-Group8.xlsx-GanttChart.pdf\">Projektplan-HCI-Group8.xlsx-GanttChart<\/a><a href=\"https:\/\/blogs.fu-berlin.de\/hci1-sose2021\/files\/2021\/06\/Projektplan-HCI-Group8.xlsx-GanttChart.pdf\" class=\"wp-block-file__button\" download>Herunterladen<\/a><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Start building your prototype.<\/h3>\n\n\n\n<p><a rel=\"noreferrer noopener\" href=\"https:\/\/socialgaming.bubbleapps.io\/version-test\/landingpage\" target=\"_blank\">https:\/\/socialgaming.bubbleapps.io\/version-test\/landingpage<\/a><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Please answer the following question: How did you handle the topics: menu, UI consoles, and Design patterns?<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">What menu type did you choose and why?<\/h4>\n\n\n\n<p>Es existiert kein wirkliches Menu(daher haben wir auch keins ausgew\u00e4hlt), es gibt allerdings ein button zum Zeigen\/Verstecken der Video Ansicht. Die eigentliche Navigation ist im Hauptbild zu finden. <\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Which UI controls are appropriate for your application and why?<\/h4>\n\n\n\n<p>Wir haben vor allem Buttons und Text Input Fields verwendet, da diese eine sehr gradlinige Navigation erm\u00f6glichen und klar ist welcher Schritt als n\u00e4chstes erfolgt. Ausserdem gibt es selten mehr als 3 M\u00f6glichkeiten, um den Nutzer nicht zu \u00fcberfordern. F\u00fcr die Filter Views haben wir uns f\u00fcr Dropdowns entschieden, da es hier nur begrenzte M\u00f6glichkeiten f\u00fcr die Auswahl gibt.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Which design patterns are suitable for your application and which ones have you implemented or used? Why?<\/h4>\n\n\n\n<p>Wir haben nicht bewusst Design Patterns verwendet, allerdings kommt unsere filter Ansicht doch einem Design Pattern nahe, was man <a href=\"http:\/\/ui-patterns.com\/patterns\/TableFilter\">Table Filter<\/a> nennen kann. Wir haben die Ansicht so gestaltet, da sie uns intuitiv vorkam und die Parameter \u00fcbersichtlich darstellt.<\/p>\n\n\n\n<!--nextpage-->\n\n\n\n<h2 class=\"wp-block-heading\">Reflexion<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">(1) Team member contribution.<\/h3>\n\n\n\n<p>Zuerst haben wir uns auf Discord getroffen (1.Woche) und abgesprochen wie wir uns die Aufgaben aufteilen. Wir haben alle gemeinsam, aber selbst\u00e4ndig bis zur n\u00e4chsten Woche, an dem Prototypen gearbeitet. In der 2. Woche haben wir uns dann wieder getroffen und unsere Teile des Prototypen miteinander verbunden.<\/p>\n\n\n\n<p>Das GanttChart haben wir dann auch alle gemeinsam in einem geteilten Dokument erstellt. <\/p>\n\n\n\n<h3 class=\"wp-block-heading\">(2) Learnings from assignment.<\/h3>\n\n\n\n<p>Wir haben gelernt einen high fidelity Prototypen zu erstellen und die W\u00fcnsche und Feedback der Tester zu integrieren. Das kann je nach dem auch sehr schwierig sein die W\u00fcnsche der Tester konkret einzuarbeiten und auch teilweise widerspr\u00fcchliche Meinungen zu bewerten. <\/p>\n\n\n\n<h3 class=\"wp-block-heading\">(3) possitive\/successful experience<\/h3>\n\n\n\n<p>Wir haben erfolgreich einen Prototypen gebaut, der die Funktionen unserer App  gut repr\u00e4sentiert. <\/p>\n\n\n\n<h3 class=\"wp-block-heading\">(4)&nbsp;<strong>What would you like to improve?<\/strong><\/h3>\n\n\n\n<p>Es war schwer ein konkretes Gantt-Chart aufzustellen, weil wir nicht so richtig wussten, wie lange wir Zeit haben und was es f\u00fcr (konkrete) Aufgaben noch gibt. So war es schwer das Gantt zu gestalten, da hier eigentlich immer sehr konkrete Aufgaben und Abh\u00e4ngigkeiten beachtet\/dargestellt werden m\u00fcssen. <\/p>\n","protected":false},"excerpt":{"rendered":"<p>What framework or tools are you going to use? Why? F\u00fcr das Gantt-chart haben wir ein normales Excel\/Sheets Dokument verwendet, da das kein neues Tool ist mit dem man sich besch\u00e4ftigen muss ist. Ausserdem hat das den Vorteil, dass die Darstellung recht flexibel ist. F\u00fcr den Prototypen haben wir bubble.io ausgew\u00e4hlt, da es zum einen &hellip; <a href=\"https:\/\/blogs.fu-berlin.de\/hci1-sose2021\/2021\/06\/13\/a7-p8-starting-high-fidelity-prototyping-first-iteration\/\" class=\"more-link\"><span class=\"screen-reader-text\">\u201e[A#7, P8] Starting High Fidelity Prototyping (First Iteration)\u201c<\/span> weiterlesen<\/a><\/p>\n","protected":false},"author":6146,"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":[384608,401222],"tags":[],"class_list":["post-1577","post","type-post","status-publish","format-standard","hentry","category-projekt-8","category-assignment-7"],"_links":{"self":[{"href":"https:\/\/blogs.fu-berlin.de\/hci1-sose2021\/wp-json\/wp\/v2\/posts\/1577","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\/6146"}],"replies":[{"embeddable":true,"href":"https:\/\/blogs.fu-berlin.de\/hci1-sose2021\/wp-json\/wp\/v2\/comments?post=1577"}],"version-history":[{"count":1,"href":"https:\/\/blogs.fu-berlin.de\/hci1-sose2021\/wp-json\/wp\/v2\/posts\/1577\/revisions"}],"predecessor-version":[{"id":1590,"href":"https:\/\/blogs.fu-berlin.de\/hci1-sose2021\/wp-json\/wp\/v2\/posts\/1577\/revisions\/1590"}],"wp:attachment":[{"href":"https:\/\/blogs.fu-berlin.de\/hci1-sose2021\/wp-json\/wp\/v2\/media?parent=1577"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogs.fu-berlin.de\/hci1-sose2021\/wp-json\/wp\/v2\/categories?post=1577"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogs.fu-berlin.de\/hci1-sose2021\/wp-json\/wp\/v2\/tags?post=1577"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}