Functional requirements<\/h4>\n\n\n\n- Select and add factors <\/li>
- Provide sleep aid
- Select music\/sounds and set a timer for it (or not)<\/li>
- Select a relaxation method that than provides you with instructions<\/li><\/ul><\/li>
- View and export statistics<\/li>
- Rate sleep quality<\/li>
- Log sleep time (if it isn’t tracked automatically)<\/li>
- Record dreams in a diary
- Write down dreams<\/li>
- Record your dream via voice input<\/li><\/ul><\/li>
- Sound recording during sleep
- If sleep music is activated, start recording after the set music timer<\/li>
- If no music timer is set, disable sound recording<\/li><\/ul><\/li>
- Alarm clock function with alarm tone selection, intervals and possibiliy that alarm will grow louder the longer it rings<\/li>
- Notification outside the app when music is playing, when sound is recorded\/sleep mode started.<\/li><\/ul>\n<\/div>\n\n\n\n\n
non-Fuctional requirements<\/h4>\n\n\n\n- Separate sound and relaxation<\/li>
- Icons should be understandable<\/li>
- Categories should have labels, not only icons<\/li>
- Use darker and earthy colors<\/li>
- Insert explanations where necessary<\/li>
- Two different design – day & night<\/li><\/ul>\n<\/div>\n<\/div>\n\n\n\n
\n\n\n\nTimeline<\/h3>\n\n\n\n![\"\"](\"https:\/\/blogs.fu-berlin.de\/hci1-sose2021\/files\/2021\/06\/gantt-1-1024x275.png\")
Gantt chart<\/figcaption><\/figure>\n\n\n\n\n\n\n\nPrototyping<\/h2>\n\n\n\n
Our high-fidelity prototype: https:\/\/www.figma.com\/proto\/uyswzIlrEDZOnSqmzk08te\/Sleepy-Heads-HiFi-Prototype?node-id=17%3A11&scaling=scale-down&page-id=0%3A1 <\/a><\/p>\n\n\n\nWhat menu type did you choose and why?<\/h3>\n\n\n\n
We are using grid menus across our app and on some pages these are also scrollable (Relaxation methods and Sleep sounds). This kind of menu is easy to access because of its format and the options are big enough to be selected by touch controls.<\/p>\n\n\n\n
In later Iterations we want to add a slide menu for additional options, like settings for notification.<\/p>\n\n\n\n
Which UI controls are appropriate for your application and why?<\/h3>\n\n\n\n
We need and use data entry controls<\/em> because the main purpose of our app is to collect data. Examples are writing down dreams, the option to record sleep times and the option to rate sleep. <\/p>\n\n\n\nSelection controls<\/em> are also necessary because the user will have to make decisions and choose from existing data. Examples are turning the sleep audio recording on\/off, choosing a sleep timer for the music and to select sleep factors before going to sleep.<\/p>\n\n\n\nOf course there also have to be navigation controls<\/em> which is primarily the dashboard and later the slide menu too.<\/p>\n\n\n\nWhich design patterns are suitable for your application and which ones have you implemented or used? Why?<\/h3>\n\n\n\n
We used the Material Design from Google<\/a> because it looks most native to android systems. Figma offers predefined design kits and we were lucky to find one for Material: https:\/\/www.figma.com\/community\/file\/880534892514982400<\/a> <\/p>\n\n\n\n\n\n\n\nReflection<\/h2>\n\n\n\nWho did what?<\/h4>\n\n\n\n
Tanita created the blogpost. We all worked together to determine our requirements, to create the Gantt chart (on google docs) and to create our new prototype with Figma.<\/p>\n\n\n\n
What have we learned?<\/h4>\n\n\n\n
We realised that there are a lot of design kits that can be used to create a prototype, which helped to give the prototype the feel of a real app. Overall our prototyping skills improved significantly.<\/p>\n\n\n\n
What went well?<\/h4>\n\n\n\n
Thanks to the feedback we gathered last assignment, we were able to make fast design choices for our prototype.<\/p>\n\n\n\n
What do we want to improve?<\/h4>\n\n\n\n
Nothing, we are happy with our results. <\/p>\n","protected":false},"excerpt":{"rendered":"
What framework or tools are you going to use? Why? Figma will remain our main prototype tool. This time we will use design kits like the one from Material UI to improve our prototype and give it feeling of an almost finished app. Because of the former assignments we improved our interaction with Figma and … \u201e[A#7, P5] Starting High Fidelity Prototyping\u201c<\/span> weiterlesen<\/a><\/p>\n","protected":false},"author":6128,"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":[383756,384908,401222],"tags":[],"class_list":["post-1527","post","type-post","status-publish","format-standard","hentry","category-projekt-5","category-blogbeitraege","category-assignment-7"],"_links":{"self":[{"href":"https:\/\/blogs.fu-berlin.de\/hci1-sose2021\/wp-json\/wp\/v2\/posts\/1527","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\/6128"}],"replies":[{"embeddable":true,"href":"https:\/\/blogs.fu-berlin.de\/hci1-sose2021\/wp-json\/wp\/v2\/comments?post=1527"}],"version-history":[{"count":11,"href":"https:\/\/blogs.fu-berlin.de\/hci1-sose2021\/wp-json\/wp\/v2\/posts\/1527\/revisions"}],"predecessor-version":[{"id":1575,"href":"https:\/\/blogs.fu-berlin.de\/hci1-sose2021\/wp-json\/wp\/v2\/posts\/1527\/revisions\/1575"}],"wp:attachment":[{"href":"https:\/\/blogs.fu-berlin.de\/hci1-sose2021\/wp-json\/wp\/v2\/media?parent=1527"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogs.fu-berlin.de\/hci1-sose2021\/wp-json\/wp\/v2\/categories?post=1527"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogs.fu-berlin.de\/hci1-sose2021\/wp-json\/wp\/v2\/tags?post=1527"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
- Select music\/sounds and set a timer for it (or not)<\/li>
- Select a relaxation method that than provides you with instructions<\/li><\/ul><\/li>
- View and export statistics<\/li>
- Rate sleep quality<\/li>
- Log sleep time (if it isn’t tracked automatically)<\/li>
- Record dreams in a diary
- Write down dreams<\/li>
- Record your dream via voice input<\/li><\/ul><\/li>
- Sound recording during sleep
- If sleep music is activated, start recording after the set music timer<\/li>
- If no music timer is set, disable sound recording<\/li><\/ul><\/li>
- Alarm clock function with alarm tone selection, intervals and possibiliy that alarm will grow louder the longer it rings<\/li>
- Notification outside the app when music is playing, when sound is recorded\/sleep mode started.<\/li><\/ul>\n<\/div>\n\n\n\n\n
non-Fuctional requirements<\/h4>\n\n\n\n
- Separate sound and relaxation<\/li>
- Icons should be understandable<\/li>
- Categories should have labels, not only icons<\/li>
- Use darker and earthy colors<\/li>
- Insert explanations where necessary<\/li>
- Two different design – day & night<\/li><\/ul>\n<\/div>\n<\/div>\n\n\n\n
\n\n\n\nTimeline<\/h3>\n\n\n\n
Gantt chart<\/figcaption><\/figure>\n\n\n\n\n\n\n\n Prototyping<\/h2>\n\n\n\n
Our high-fidelity prototype: https:\/\/www.figma.com\/proto\/uyswzIlrEDZOnSqmzk08te\/Sleepy-Heads-HiFi-Prototype?node-id=17%3A11&scaling=scale-down&page-id=0%3A1 <\/a><\/p>\n\n\n\n
What menu type did you choose and why?<\/h3>\n\n\n\n
We are using grid menus across our app and on some pages these are also scrollable (Relaxation methods and Sleep sounds). This kind of menu is easy to access because of its format and the options are big enough to be selected by touch controls.<\/p>\n\n\n\n
In later Iterations we want to add a slide menu for additional options, like settings for notification.<\/p>\n\n\n\n
Which UI controls are appropriate for your application and why?<\/h3>\n\n\n\n
We need and use data entry controls<\/em> because the main purpose of our app is to collect data. Examples are writing down dreams, the option to record sleep times and the option to rate sleep. <\/p>\n\n\n\n
Selection controls<\/em> are also necessary because the user will have to make decisions and choose from existing data. Examples are turning the sleep audio recording on\/off, choosing a sleep timer for the music and to select sleep factors before going to sleep.<\/p>\n\n\n\n
Of course there also have to be navigation controls<\/em> which is primarily the dashboard and later the slide menu too.<\/p>\n\n\n\n
Which design patterns are suitable for your application and which ones have you implemented or used? Why?<\/h3>\n\n\n\n
We used the Material Design from Google<\/a> because it looks most native to android systems. Figma offers predefined design kits and we were lucky to find one for Material: https:\/\/www.figma.com\/community\/file\/880534892514982400<\/a> <\/p>\n\n\n\n\n\n\n\n
Reflection<\/h2>\n\n\n\n
Who did what?<\/h4>\n\n\n\n
Tanita created the blogpost. We all worked together to determine our requirements, to create the Gantt chart (on google docs) and to create our new prototype with Figma.<\/p>\n\n\n\n
What have we learned?<\/h4>\n\n\n\n
We realised that there are a lot of design kits that can be used to create a prototype, which helped to give the prototype the feel of a real app. Overall our prototyping skills improved significantly.<\/p>\n\n\n\n
What went well?<\/h4>\n\n\n\n
Thanks to the feedback we gathered last assignment, we were able to make fast design choices for our prototype.<\/p>\n\n\n\n
What do we want to improve?<\/h4>\n\n\n\n
Nothing, we are happy with our results. <\/p>\n","protected":false},"excerpt":{"rendered":"
What framework or tools are you going to use? Why? Figma will remain our main prototype tool. This time we will use design kits like the one from Material UI to improve our prototype and give it feeling of an almost finished app. Because of the former assignments we improved our interaction with Figma and … \u201e[A#7, P5] Starting High Fidelity Prototyping\u201c<\/span> weiterlesen<\/a><\/p>\n","protected":false},"author":6128,"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":[383756,384908,401222],"tags":[],"class_list":["post-1527","post","type-post","status-publish","format-standard","hentry","category-projekt-5","category-blogbeitraege","category-assignment-7"],"_links":{"self":[{"href":"https:\/\/blogs.fu-berlin.de\/hci1-sose2021\/wp-json\/wp\/v2\/posts\/1527","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\/6128"}],"replies":[{"embeddable":true,"href":"https:\/\/blogs.fu-berlin.de\/hci1-sose2021\/wp-json\/wp\/v2\/comments?post=1527"}],"version-history":[{"count":11,"href":"https:\/\/blogs.fu-berlin.de\/hci1-sose2021\/wp-json\/wp\/v2\/posts\/1527\/revisions"}],"predecessor-version":[{"id":1575,"href":"https:\/\/blogs.fu-berlin.de\/hci1-sose2021\/wp-json\/wp\/v2\/posts\/1527\/revisions\/1575"}],"wp:attachment":[{"href":"https:\/\/blogs.fu-berlin.de\/hci1-sose2021\/wp-json\/wp\/v2\/media?parent=1527"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogs.fu-berlin.de\/hci1-sose2021\/wp-json\/wp\/v2\/categories?post=1527"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogs.fu-berlin.de\/hci1-sose2021\/wp-json\/wp\/v2\/tags?post=1527"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}