{"id":557,"date":"2023-06-06T13:34:09","date_gmt":"2023-06-06T11:34:09","guid":{"rendered":"https:\/\/blogs.fu-berlin.de\/hci2023\/?p=557"},"modified":"2023-07-04T13:25:55","modified_gmt":"2023-07-04T11:25:55","slug":"a6-p6-research-und-ziele","status":"publish","type":"post","link":"https:\/\/blogs.fu-berlin.de\/hci2023\/2023\/06\/06\/a6-p6-research-und-ziele\/","title":{"rendered":"[A6, P6] &#8211; Problematik und Storyboard"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">Problem und Hypothese<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Problemstellung und Akzeptanzkriterium<\/strong><\/h3>\n\n\n\n<pre class=\"wp-block-verse\">Marius braucht eine M\u00f6glichkeit, Software auf einfache Art und Weise auf ihre Barrierefreiheit untersuchen zu k\u00f6nnen, ohne gro\u00dfen Aufwand in Einarbeitung und Erlernen der Funktionalit\u00e4ten stecken zu m\u00fcssen.\n\nWir wissen, dass dies erf\u00fcllt ist, wenn jemand mit keinem ausgepr\u00e4gten Know-How zu digitaler Barrierefreiheit die Oberfl\u00e4che des geplanten Tools versteht und benutzen kann.<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Hypothese<\/h3>\n\n\n\n<pre class=\"wp-block-verse\">Wir glauben, dass wir durch die Gestaltung einer intuitiven und einfachen Benutzeroberfl\u00e4che f\u00fcr die Barrierefreiheitssoftware f\u00fcr Marius einen simpleren Workflow f\u00fcr seine Arbeit und damit einen h\u00f6heren Umfang von digitaler Barrierefreiheit in Software erreichen werden.<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Sketches<\/h3>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"623\" height=\"400\" src=\"https:\/\/blogs.fu-berlin.de\/hci2023\/files\/2023\/06\/sketch1.jpg\" alt=\"\" class=\"wp-image-677\" srcset=\"https:\/\/blogs.fu-berlin.de\/hci2023\/files\/2023\/06\/sketch1.jpg 623w, https:\/\/blogs.fu-berlin.de\/hci2023\/files\/2023\/06\/sketch1-300x193.jpg 300w\" sizes=\"auto, (max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 984px) 61vw, (max-width: 1362px) 45vw, 600px\" \/><figcaption>Homescreen der Anwendung und zu untersuchende Anwendung im Hintergrund<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"623\" height=\"406\" src=\"https:\/\/blogs.fu-berlin.de\/hci2023\/files\/2023\/06\/sketch2.jpg\" alt=\"\" class=\"wp-image-678\" srcset=\"https:\/\/blogs.fu-berlin.de\/hci2023\/files\/2023\/06\/sketch2.jpg 623w, https:\/\/blogs.fu-berlin.de\/hci2023\/files\/2023\/06\/sketch2-300x196.jpg 300w\" sizes=\"auto, (max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 984px) 61vw, (max-width: 1362px) 45vw, 600px\" \/><figcaption>Zu untersuchende Anwendung im Vordergrund mit farblich markierten Problemen<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"620\" height=\"402\" src=\"https:\/\/blogs.fu-berlin.de\/hci2023\/files\/2023\/06\/sketch3.jpg\" alt=\"\" class=\"wp-image-679\" srcset=\"https:\/\/blogs.fu-berlin.de\/hci2023\/files\/2023\/06\/sketch3.jpg 620w, https:\/\/blogs.fu-berlin.de\/hci2023\/files\/2023\/06\/sketch3-300x195.jpg 300w\" sizes=\"auto, (max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 984px) 61vw, (max-width: 1362px) 45vw, 600px\" \/><figcaption>Nutzung der Funktion zum \u00dcberpr\u00fcfen des gesamten Layouts der Anwendung mit aufgef\u00fchrten Problemen und L\u00f6sungsvorschl\u00e4gen<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"617\" height=\"399\" src=\"https:\/\/blogs.fu-berlin.de\/hci2023\/files\/2023\/06\/sketch4.jpg\" alt=\"\" class=\"wp-image-680\" srcset=\"https:\/\/blogs.fu-berlin.de\/hci2023\/files\/2023\/06\/sketch4.jpg 617w, https:\/\/blogs.fu-berlin.de\/hci2023\/files\/2023\/06\/sketch4-300x194.jpg 300w\" sizes=\"auto, (max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 984px) 61vw, (max-width: 1362px) 45vw, 600px\" \/><figcaption>Funktion zur technischeren Ansicht der einzelnen Elemente einer Ansicht<\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Storyboard<\/h2>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"582\" src=\"https:\/\/blogs.fu-berlin.de\/hci2023\/files\/2023\/07\/storyboard-1024x582.jpg\" alt=\"\" class=\"wp-image-751\" srcset=\"https:\/\/blogs.fu-berlin.de\/hci2023\/files\/2023\/07\/storyboard-1024x582.jpg 1024w, https:\/\/blogs.fu-berlin.de\/hci2023\/files\/2023\/07\/storyboard-300x171.jpg 300w, https:\/\/blogs.fu-berlin.de\/hci2023\/files\/2023\/07\/storyboard-768x437.jpg 768w, https:\/\/blogs.fu-berlin.de\/hci2023\/files\/2023\/07\/storyboard-1536x873.jpg 1536w, https:\/\/blogs.fu-berlin.de\/hci2023\/files\/2023\/07\/storyboard-1200x682.jpg 1200w, https:\/\/blogs.fu-berlin.de\/hci2023\/files\/2023\/07\/storyboard.jpg 1551w\" sizes=\"auto, (max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px\" \/><figcaption>Storyboard<\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Alt<\/strong>e Inhalte<\/h2>\n\n\n\n<pre class=\"wp-block-verse\">Eliana needs a way to seamlessly and efficiently interact with her digital devices and the (health) application on them despite her visual limitations.\n\nWe will know this to be true when we see a: clear and conclusive guideline on how to develop software in a manner that allows the use of and complete implementation of software assisted accessibility-functions.<\/pre>\n\n\n\n<p><strong>Alter Sketch im Drive<\/strong><\/p>\n\n\n\n<p>Beschreibung zum Sketch:<br>Resultierend aus den gef\u00fchrten Interviews sind den Beteiligten bei der Nutzung von Screenreadern, welches das meistgenutzte und g\u00e4ngigste Hilfsmittel ist, folgende Problematiken herausgestochen.<\/p>\n\n\n\n<ol class=\"wp-block-list\"><li>Bezeichnung der Elemente nicht eindeutig<\/li><li>Die Reihenfolge der vorgesehenen Elemente ist irref\u00fchrend.<br>Das Layout bzw. die Zugeh\u00f6rigkeit der einzelnen Elemente ist nicht nachvollziehbar<\/li><li>Das Layout ist \u00fcberf\u00fcllt mit zu vielen Elementen, sodass die Navigation und das Vorlesen der einzelnen Elemente schwierig ist.<\/li><\/ol>\n\n\n\n<p>Wir haben uns bei unserem Sketch an dem Layout der Desktop-Anwendung unserer Krankenkasse orientiert.<br>Das Layout besteht aus drei Hauptfragmenten, die gegebenenfalls in weitere Fragmente unterteilt sind.<\/p>\n\n\n\n<ol class=\"wp-block-list\"><li>Die Titelleiste am oberen Teil d. Layouts<\/li><li>Die Obermen\u00fc-Leiste am linken Rand<\/li><li>Die Detailansicht der einzelnen Men\u00fcpunkte auf der rechten Seite<ul><li>Dieses ist wiederum in zwei weitere Fragmente unterteilt.<\/li><\/ul><\/li><\/ol>\n\n\n\n<p>Unsere Idee ist, die Fragmentierung erstmals in Ebenen zu unterteilen, um die Navigation mit Screenreadern nicht unn\u00f6tig lang zu machen. Es werden erstmals die Fragmente der ersten Ebene \u00fcber ihre Titel beschrieben. Sobald mit einem Fragment interagiert, so wird in dieses navigiert und die unterliegenden Elemente bzw. bei weiterer Fragmentierung die Fragmente vorgelesen.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Research<\/h2>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"729\" height=\"1024\" src=\"https:\/\/blogs.fu-berlin.de\/hci2023\/files\/2023\/06\/step-9-apps-729x1024.png\" alt=\"\" class=\"wp-image-558\" srcset=\"https:\/\/blogs.fu-berlin.de\/hci2023\/files\/2023\/06\/step-9-apps-729x1024.png 729w, https:\/\/blogs.fu-berlin.de\/hci2023\/files\/2023\/06\/step-9-apps-214x300.png 214w, https:\/\/blogs.fu-berlin.de\/hci2023\/files\/2023\/06\/step-9-apps-768x1078.png 768w, https:\/\/blogs.fu-berlin.de\/hci2023\/files\/2023\/06\/step-9-apps-1094x1536.png 1094w, https:\/\/blogs.fu-berlin.de\/hci2023\/files\/2023\/06\/step-9-apps.png 1200w\" sizes=\"auto, (max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 984px) 61vw, (max-width: 1362px) 45vw, 600px\" \/><figcaption>https:\/\/bbc.github.io\/accessibility-news-and-you\/guides\/screen-reader-ux-ios-android.html<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-embed is-type-wp-embed is-provider-digital-communications-team-blog wp-block-embed-digital-communications-team-blog\"><div class=\"wp-block-embed__wrapper\">\n<blockquote class=\"wp-embedded-content\" data-secret=\"v50z3KYXkr\"><a href=\"https:\/\/digitalcommunications.wp.st-andrews.ac.uk\/2019\/07\/29\/designing-for-users-of-screenreaders\/\">Designing for users of screen readers<\/a><\/blockquote><iframe loading=\"lazy\" class=\"wp-embedded-content\" sandbox=\"allow-scripts\" security=\"restricted\" style=\"position: absolute; clip: rect(1px, 1px, 1px, 1px);\" title=\"&#8220;Designing for users of screen readers&#8221; &#8212; Digital Communications team blog\" src=\"https:\/\/digitalcommunications.wp.st-andrews.ac.uk\/2019\/07\/29\/designing-for-users-of-screenreaders\/embed\/#?secret=70sUKZSPmy#?secret=v50z3KYXkr\" data-secret=\"v50z3KYXkr\" width=\"600\" height=\"338\" frameborder=\"0\" marginwidth=\"0\" marginheight=\"0\" scrolling=\"no\"><\/iframe>\n<\/div><\/figure>\n\n\n\n<p><a href=\"https:\/\/www.w3.org\/WAI\/tips\/designing\/#ensure-that-interactive-elements-are-easy-to-identify\">https:\/\/www.w3.org\/WAI\/tips\/designing\/#ensure-that-interactive-elements-are-easy-to-identify<\/a><\/p>\n\n\n\n<p><a href=\"https:\/\/m2.material.io\/design\/usability\/accessibility.html\">https:\/\/m2.material.io\/design\/usability\/accessibility.html<\/a><\/p>\n\n\n\n<p><a href=\"https:\/\/medium.com\/salesforce-ux\/7-things-every-designer-needs-to-know-about-accessibility-64f105f0881b\">https:\/\/medium.com\/salesforce-ux\/7-things-every-designer-needs-to-know-about-accessibility-64f105f0881b<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Problem und Hypothese Problemstellung und Akzeptanzkriterium Marius braucht eine M\u00f6glichkeit, Software auf einfache Art und Weise auf ihre Barrierefreiheit untersuchen zu k\u00f6nnen, ohne gro\u00dfen Aufwand in Einarbeitung und Erlernen der Funktionalit\u00e4ten stecken zu m\u00fcssen. Wir wissen, dass dies erf\u00fcllt ist, wenn jemand mit keinem ausgepr\u00e4gten Know-How zu digitaler Barrierefreiheit die Oberfl\u00e4che des geplanten Tools versteht &hellip; <a href=\"https:\/\/blogs.fu-berlin.de\/hci2023\/2023\/06\/06\/a6-p6-research-und-ziele\/\" class=\"more-link\"><span class=\"screen-reader-text\">\u201e[A6, P6] &#8211; Problematik und Storyboard\u201c<\/span> weiterlesen<\/a><\/p>\n","protected":false},"author":7693,"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":[482331],"tags":[],"class_list":["post-557","post","type-post","status-publish","format-standard","hentry","category-team6"],"_links":{"self":[{"href":"https:\/\/blogs.fu-berlin.de\/hci2023\/wp-json\/wp\/v2\/posts\/557","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blogs.fu-berlin.de\/hci2023\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blogs.fu-berlin.de\/hci2023\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blogs.fu-berlin.de\/hci2023\/wp-json\/wp\/v2\/users\/7693"}],"replies":[{"embeddable":true,"href":"https:\/\/blogs.fu-berlin.de\/hci2023\/wp-json\/wp\/v2\/comments?post=557"}],"version-history":[{"count":22,"href":"https:\/\/blogs.fu-berlin.de\/hci2023\/wp-json\/wp\/v2\/posts\/557\/revisions"}],"predecessor-version":[{"id":752,"href":"https:\/\/blogs.fu-berlin.de\/hci2023\/wp-json\/wp\/v2\/posts\/557\/revisions\/752"}],"wp:attachment":[{"href":"https:\/\/blogs.fu-berlin.de\/hci2023\/wp-json\/wp\/v2\/media?parent=557"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogs.fu-berlin.de\/hci2023\/wp-json\/wp\/v2\/categories?post=557"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogs.fu-berlin.de\/hci2023\/wp-json\/wp\/v2\/tags?post=557"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}