{"id":621,"date":"2018-03-21T20:03:42","date_gmt":"2018-03-21T18:03:42","guid":{"rendered":"http:\/\/www.netz-barrierefrei.de\/wordpress\/?page_id=621"},"modified":"2023-09-11T19:05:13","modified_gmt":"2023-09-11T17:05:13","slug":"grafiken-als-gestaltungselement","status":"publish","type":"page","link":"https:\/\/www.netz-barrierefrei.de\/wordpress\/barrierefreies-internet\/konzeption\/farben-und-grafiken\/grafiken-als-gestaltungselement\/","title":{"rendered":"Grafiken als Gestaltungselement"},"content":{"rendered":"<p>Funktionale Graphiken sind Graphiken, mit denen eine Funktion verbunden ist;-) Sie werden auf praktisch allen Webseiten eingesetzt, bekannt ist das Druckersymbol f\u00fcr Druckfunktionen und das RSS-Symbol, das wohl f\u00fcr Schallwellen stehen soll.<br \/>\nDiese Symbole sind \u00e4u\u00dferst eing\u00e4ngig, weil wir sie teilweise schon aus anderen Kontexten kennen: den Desktop-Anwendungen, wo sie von Normal-Sehenden und Maus-Liebhabern ausgiebig genutzt werden.<br \/>\nAbgesehen von Blinden und stark sehbehinderten Menschen kommen diese Graphiken praktisch allen Menschen zu Gute, wenn sie gut gew\u00e4hlt und eing\u00e4ngig sind. Sie machen aus einer komplexen Interaktion mit der Website einen einfachen und intuitiven Prozess. F\u00fcr Menschen mit Lernschwierigkeiten erleichtern sie ungemein die Bedienung der Seite. <\/p>\n<div style=\"width:425px\" id=\"__ss_5837287\"><strong style=\"display:block;margin:12px 0 4px\"><span class=\"removed_link\" title=\"http:\/\/www.slideshare.net\/domingosdeoliveira\/bilder-barrierefrei-verwenden\">Bilder barrierefrei verwenden<\/span><\/strong><object id=\"__sse5837287\" width=\"425\" height=\"355\"><param name=\"movie\" value=\"http:\/\/static.slidesharecdn.com\/swf\/ssplayer2.swf?doc=bilderbarrierefreiverwenden-101119121627-phpapp01&#038;stripped_title=bilder-barrierefrei-verwenden&#038;userName=domingosdeoliveira\" \/><param name=\"allowFullScreen\" value=\"true\"\/><param name=\"allowScriptAccess\" value=\"always\"\/><embed name=\"__sse5837287\" src=\"http:\/\/static.slidesharecdn.com\/swf\/ssplayer2.swf?doc=bilderbarrierefreiverwenden-101119121627-phpapp01&#038;stripped_title=bilder-barrierefrei-verwenden&#038;userName=domingosdeoliveira\" type=\"application\/x-shockwave-flash\" allowscriptaccess=\"always\" allowfullscreen=\"true\" width=\"425\" height=\"355\"\/><\/object><\/p>\n<div style=\"padding:5px 0 12px\">View more <span class=\"removed_link\" title=\"http:\/\/www.slideshare.net\/\">webinars<\/span> from <a href=\"https:\/\/www.slideshare.net\/domingosdeoliveira\">Domingos de Oliveira<\/a>.<\/div>\n<\/div>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_82_2 counter-hierarchy ez-toc-counter ez-toc-white ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Inhalt<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/www.netz-barrierefrei.de\/wordpress\/barrierefreies-internet\/konzeption\/farben-und-grafiken\/grafiken-als-gestaltungselement\/#Wahl_der_Symbole\" >Wahl der Symbole<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/www.netz-barrierefrei.de\/wordpress\/barrierefreies-internet\/konzeption\/farben-und-grafiken\/grafiken-als-gestaltungselement\/#Die_groesse_der_Funktionsgraphiken\" >Die gr\u00f6\u00dfe der Funktionsgraphiken<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/www.netz-barrierefrei.de\/wordpress\/barrierefreies-internet\/konzeption\/farben-und-grafiken\/grafiken-als-gestaltungselement\/#Auszeichnung\" >Auszeichnung<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/www.netz-barrierefrei.de\/wordpress\/barrierefreies-internet\/konzeption\/farben-und-grafiken\/grafiken-als-gestaltungselement\/#Weniger_%E2%80%93_dafuer_besser\" >Weniger &#8211; daf\u00fcr besser<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/www.netz-barrierefrei.de\/wordpress\/barrierefreies-internet\/konzeption\/farben-und-grafiken\/grafiken-als-gestaltungselement\/#Zum_Weiterlesen\" >Zum Weiterlesen<\/a><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"Wahl_der_Symbole\"><\/span>Wahl der Symbole<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Um ein Symbol verwenden zu k\u00f6nnen, sollte es hinreichend bekannt sein. Webdesigner m\u00f6gen viel Energie in eine h\u00fcbschere Metapher zum Einkaufswagen investieren. Das bringt aber nur etwas, wenn die Funktion &#8222;Ware in eine Zwischenablage speichern, um sie beim Abschlie\u00dfen des Bestellvorgangs mit weiteren Waren zu bestellen&#8220; dem NUTZER deutlich wird. Diese ausschweifende Funktionsbeschreibung macht den Sinn dieser simplen Metapher vom Warenkorb deutlich. Statt langatmige Erkl\u00e4rungen abzugeben, versteht jeder Mensch mit ein wenig eShopping-Erfahrung, was mir der Erschaffer der Seiten mit dem Warenkorb-Symbol mitteilen m\u00f6chte.<br \/>\nDas gilt nat\u00fcrlich nur f\u00fcr Funktionen, die hinreichend etabliert sind. Nehmen wir an, ich erfinde eine vollkommen neue Funktion, wenn ich etwa eine neue Webanwendung etabliere. Dann kann bzw. muss ich mir eine eigene Symbolsprache ausdenken, sofern keine Vorbilder vorhanden sind. In diesem Falle komme ich kaum daran vorbei, dem Nutzer einen Lernprozess zu unterwerfen, indem er bei der Nutzung der Anwendung nach und nach auch die Funktionen der Symbole kennen lernt und die verwendete Bildsprache versteht. Eine Bildsprache muss ebenso konsistent und intuitiv verst\u00e4ndlich sein wie die Alltagssprache. Ich w\u00fcrde mir nicht zutrauen, so etwas zu entwickeln. <\/p>\n<h2><span class=\"ez-toc-section\" id=\"Die_groesse_der_Funktionsgraphiken\"><\/span>Die gr\u00f6\u00dfe der Funktionsgraphiken<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Ich denke, es leuchtet auf Anhieb ein, dass jede Graphik so gro\u00df sein muss, dass sie mit der Maus gut anzuklicken ist. Die Graphiken m\u00fcssen einen gewissen Abstand zueinander haben und sie sollten bei normaler Aufl\u00f6sung auf einem mittelgro\u00dfen Bildschirm gut zu erkennen und gut anzuklicken sein. Das sie mit der Tastatur per Tab-Taste erreichbar sein sollten, ist ebenso selbstverst\u00e4ndlich, ich schreibe es aber trotzdem. F\u00fcr Menschen mit motorischen Schwierigkeiten, die mit einer Maus oder einem speziellen Eingabeger\u00e4t arbeiten, sind Winzgraphiken ein Graus. Frustrationen dieser Art f\u00fchren mit Sicherheit dazu, dass selbst der geduldigste Nutzer der Site den R\u00fccken zukehren wird, um nie wieder zur\u00fcckzukommen. <\/p>\n<h2><span class=\"ez-toc-section\" id=\"Auszeichnung\"><\/span>Auszeichnung<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Blinde ben\u00f6tigen das Alt-Attribut, alle Nutzer brauchen den title, um bei Verwendung der Maus zu erfahren, welche Funktion sich hinter der Graphik verbirgt. Ein Briefxymbol k\u00f6nnte eine Kommentarfunktion, ein Leserbrief-Angebot oder ein E-Mail-Formular sein. F\u00fcr Funktionstexte gilt immer das Gleiche: m\u00f6glichst kurz, m\u00f6glichst pr\u00e4gnant, m\u00f6glichst eindeutig. <\/p>\n<h2><span class=\"ez-toc-section\" id=\"Weniger_%E2%80%93_dafuer_besser\"><\/span>Weniger &#8211; daf\u00fcr besser<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Vor zwei, drei Jahren war es noch \u00fcblich, die Seite mit Social Bookmark-Symbolen zu \u00fcberladen. Es gibt sicher viele Leute, die bis heute nicht wissen, was sich dahinter verborgen hat, zumal Dienste wie StumbleUpon oder Digg in Deutschland ohnehin keine Rolle spielen. Mittlerweile haben viele diese Dienste wieder entfernt und nur noch Facebook und Twitter auf ihren Seiten. Monopolisierung, ja sicher. Aber selbst diese Funktionen d\u00fcrften nur einen Bruchteil der Leute interessieren. Und diejenigen, die wissen, was dahinter steckt sind wahrscheinlich selbst in der Lage, etwas in diesen Diensten zu posten.<br \/>\nMan sollte daher auf die wesentlichen Funktionen der Seite fokussieren und bei jedem einzelnen Symbol und jeder Funktion \u00fcberlegen, ob diese Funktion gebraucht wird, ob sie an der richtigen Stelle steht und ob sie von hinreichend vielen Leuten genutzt oder verstanden wird. <\/p>\n<h2><span class=\"ez-toc-section\" id=\"Zum_Weiterlesen\"><\/span>Zum Weiterlesen<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<ul>\n<li><a href=\"https:\/\/netz-barrierefrei.de\/en\/infographics.html\">Accessible Information Graphics for Blind and visually Impaired<\/li>\n<li><a href=\"https:\/\/netz-barrierefrei.de\/en\/desc-blind.html\">How to describe complex things for the Blind<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Funktionale Graphiken sind Graphiken, mit denen eine Funktion verbunden ist;-) Sie werden auf praktisch allen Webseiten eingesetzt, bekannt ist das Druckersymbol f\u00fcr Druckfunktionen und das&#8230;<\/p>\n<div class=\"more-link-wrapper\"><a class=\"more-link\" href=\"https:\/\/www.netz-barrierefrei.de\/wordpress\/barrierefreies-internet\/konzeption\/farben-und-grafiken\/grafiken-als-gestaltungselement\/\">Weiterlesen<span class=\"screen-reader-text\">Grafiken als Gestaltungselement<\/span><\/a><\/div>\n","protected":false},"author":1,"featured_media":0,"parent":619,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-621","page","type-page","status-publish","hentry","entry"],"_links":{"self":[{"href":"https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-json\/wp\/v2\/pages\/621","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-json\/wp\/v2\/comments?post=621"}],"version-history":[{"count":7,"href":"https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-json\/wp\/v2\/pages\/621\/revisions"}],"predecessor-version":[{"id":8474,"href":"https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-json\/wp\/v2\/pages\/621\/revisions\/8474"}],"up":[{"embeddable":true,"href":"https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-json\/wp\/v2\/pages\/619"}],"wp:attachment":[{"href":"https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-json\/wp\/v2\/media?parent=621"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}