{"id":1576,"date":"2021-06-13T16:08:20","date_gmt":"2021-06-13T14:08:20","guid":{"rendered":"https:\/\/blogs.fu-berlin.de\/hci1-sose2021\/?p=1576"},"modified":"2021-06-15T15:16:12","modified_gmt":"2021-06-15T13:16:12","slug":"a7-p2-starting-high-fidelity-prototyping","status":"publish","type":"post","link":"https:\/\/blogs.fu-berlin.de\/hci1-sose2021\/2021\/06\/13\/a7-p2-starting-high-fidelity-prototyping\/","title":{"rendered":"[A#7, P2] Starting High Fidelity Prototyping"},"content":{"rendered":"\n<h3 class=\"wp-block-heading\">1) What framework or tools are you going to use? Why?<\/h3>\n\n\n\n<p>We decided to use <strong>Figma<\/strong> as our main prototype tool. We chose this tool because we believe that we are able to implement the range of features we need in a reasonable amount of time with a respectable result with it.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">2) Functional and non-functional requirements<\/h3>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<h4 class=\"wp-block-heading\">functional requirements<\/h4>\n\n\n\n<ul class=\"wp-block-list\"><li>User should be able to add recipes to his favourites<\/li><li>User should be able to create a group<\/li><li>User should be able to get to every possible menu-bar-screen<\/li><li>User should be able to share recipe with a group<\/li><li>User should be able to change the profile settings<\/li><li>Daily recipes should be shown on home-screen<\/li><\/ul>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<h4 class=\"wp-block-heading\">non-functional requirements<\/h4>\n\n\n\n<ul class=\"wp-block-list\"><li>Every page should have headers<\/li><li>Insert explanations where needed <\/li><li>Make screens srcollable<\/li><li>No waiting period after user-interaction<\/li><\/ul>\n<\/div>\n<\/div>\n\n\n\n<h3 class=\"wp-block-heading\">3) Timeline<\/h3>\n\n\n\n<p>For the timeline we decided to use a Gantt-chart.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"295\" src=\"https:\/\/blogs.fu-berlin.de\/hci1-sose2021\/files\/2021\/06\/Timeline-1024x295.png\" alt=\"\" class=\"wp-image-1579\" srcset=\"https:\/\/blogs.fu-berlin.de\/hci1-sose2021\/files\/2021\/06\/Timeline-1024x295.png 1024w, https:\/\/blogs.fu-berlin.de\/hci1-sose2021\/files\/2021\/06\/Timeline-300x86.png 300w, https:\/\/blogs.fu-berlin.de\/hci1-sose2021\/files\/2021\/06\/Timeline-768x221.png 768w, https:\/\/blogs.fu-berlin.de\/hci1-sose2021\/files\/2021\/06\/Timeline-1536x443.png 1536w, https:\/\/blogs.fu-berlin.de\/hci1-sose2021\/files\/2021\/06\/Timeline-1200x346.png 1200w, https:\/\/blogs.fu-berlin.de\/hci1-sose2021\/files\/2021\/06\/Timeline.png 1707w\" sizes=\"auto, (max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">4) The HiFi Prototype<\/h3>\n\n\n\n<p>The link below shows the current state of our HiFi Prototype.<\/p>\n\n\n\n<p><a href=\"https:\/\/www.figma.com\/proto\/kNaLd8fh8vCCDXN7t6bBhf\/Foodi-HiFi-Prototype?node-id=27%3A46&amp;scaling=scale-down&amp;page-id=0%3A1\">https:\/\/www.figma.com\/proto\/kNaLd8fh8vCCDXN7t6bBhf\/Foodi-HiFi-Prototype?node-id=27%3A46&amp;scaling=scale-down&amp;page-id=0%3A1<\/a><\/p>\n\n\n\n<h4 class=\"wp-block-heading\">What menu did you choose and why?<\/h4>\n\n\n\n<p>We are using one menu-bar to get to the main features as well as a slide menue on the home-screen. The screens are in a Full-Screen Flat menu navigation which doesnt overwhelm the user with too much information at once. By now the screens arent yet scrollable, but we hope to implement this feature in the folloing weeks.<\/p>\n\n\n\n<p>These types of menus are easy to understand and to use with a smartphone.<\/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>We use buttons, radio buttons, drop-down menus and text-input fields so far.<\/p>\n\n\n\n<p>The Buttons are used for confirmation of actions, as well as to get back or forth in the app. Radio buttons are used to check or uncheck ingredients, and the drop-down menus are used to make the screen less overfilled with information. The text input fields are mainly used as search function for recipes or ingredients.<\/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>We searched the icons for the menu-bar in the figma resources and found fitting ones. We had a certain vision of the app design in our heads which we were able to construct with figma to our satisfaction. <\/p>\n\n\n\n<!--nextpage-->\n\n\n\n<h3 class=\"wp-block-heading\">Reflexion<\/h3>\n\n\n\n<p><strong>WHO MADE WHAT CONTRIBUTION?<\/strong><\/p>\n\n\n\n<p>Jeder hat in der Anfangsphase des HiFi Prototypens gleicherma\u00dfen mitgearbeitet. <\/p>\n\n\n\n<p>L<strong>EARNING &amp; TAKE-AWAYS<\/strong><\/p>\n\n\n\n<p>Wir haben gelernt Figma zu bedienen und etwas tiefer in die M\u00f6glichkeiten die uns damit offenstehen einzudringen. <\/p>\n\n\n\n<p><strong>WHAT WENT WELL?<\/strong><\/p>\n\n\n\n<p>Wir sind mit dem aktuellen Stand des Prototypens zufrieden. Das Design muss zwar noch angepasst werden, aber der bisherige Fortschritt ist der Zeit angemessen. <\/p>\n\n\n\n<p><strong>IMPROVEMENT AND CONCERN<\/strong><\/p>\n\n\n\n<p>Wir haben alle gelernt mit Figma zu arbeiten.<\/p>\n\n\n\n<p>In der zweiten Woche des Assignments hatten leider manche des Teams nicht so viel Zeit weiter an dem Prototypen und dem Blogeintrag zu arbeiten.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>1) What framework or tools are you going to use? Why? We decided to use Figma as our main prototype tool. We chose this tool because we believe that we are able to implement the range of features we need in a reasonable amount of time with a respectable result with it. 2) Functional and &hellip; <a href=\"https:\/\/blogs.fu-berlin.de\/hci1-sose2021\/2021\/06\/13\/a7-p2-starting-high-fidelity-prototyping\/\" class=\"more-link\"><span class=\"screen-reader-text\">\u201e[A#7, P2] Starting High Fidelity Prototyping\u201c<\/span> weiterlesen<\/a><\/p>\n","protected":false},"author":6145,"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":[411106,384908,396666,401222],"tags":[],"class_list":["post-1576","post","type-post","status-publish","format-standard","hentry","category-foodie-projekt-2","category-blogbeitraege","category-week-9","category-assignment-7"],"_links":{"self":[{"href":"https:\/\/blogs.fu-berlin.de\/hci1-sose2021\/wp-json\/wp\/v2\/posts\/1576","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\/6145"}],"replies":[{"embeddable":true,"href":"https:\/\/blogs.fu-berlin.de\/hci1-sose2021\/wp-json\/wp\/v2\/comments?post=1576"}],"version-history":[{"count":2,"href":"https:\/\/blogs.fu-berlin.de\/hci1-sose2021\/wp-json\/wp\/v2\/posts\/1576\/revisions"}],"predecessor-version":[{"id":1641,"href":"https:\/\/blogs.fu-berlin.de\/hci1-sose2021\/wp-json\/wp\/v2\/posts\/1576\/revisions\/1641"}],"wp:attachment":[{"href":"https:\/\/blogs.fu-berlin.de\/hci1-sose2021\/wp-json\/wp\/v2\/media?parent=1576"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogs.fu-berlin.de\/hci1-sose2021\/wp-json\/wp\/v2\/categories?post=1576"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogs.fu-berlin.de\/hci1-sose2021\/wp-json\/wp\/v2\/tags?post=1576"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}