{"id":705,"date":"2018-03-22T18:11:42","date_gmt":"2018-03-22T16:11:42","guid":{"rendered":"http:\/\/www.netz-barrierefrei.de\/wordpress\/?page_id=705"},"modified":"2023-07-24T19:19:59","modified_gmt":"2023-07-24T17:19:59","slug":"rolle-der-muster-erkennung","status":"publish","type":"page","link":"https:\/\/www.netz-barrierefrei.de\/wordpress\/hilfstechnik-und-mensch-maschine-interaktion\/rolle-der-muster-erkennung\/","title":{"rendered":"Mustererkennung und Barrierefreiheit"},"content":{"rendered":"<p>Die Mustererkennung klingt zun\u00e4chst trivial, ist aber tats\u00e4chlich eine der K\u00fcnste, die Lebewesen dem Computer voraus haben. So haben es Computer und Kameras recht leicht, etwas als ein Gesicht zu identifizieren. Tats\u00e4chlich ist die Erkennung bestimmter Gesichter auch in Mainstream-Programmen wie Facebook angekommen. <\/p>\n<p>Aber Computer scheitern dort, wo es darum geht, ein bestimmtes Gesicht aus einer beweglichen Menge zu erkennen. Wo ein Sehender problemlos seinen Kumpel aus dem Gew\u00fchl des K\u00f6lner Bahnhofs fischen kann, scheitern Computer bisher aufgrund der hohen Variabilit\u00e4t.<br \/>\nWie stark solche Muster in uns verankert sein k\u00f6nnen zeigt auch, wie ungn\u00e4dig die meisten Leute auf Ver\u00e4nderungen grafischer Benutzeroberfl\u00e4chen reagieren. Microsoft, das vielleicht alle 50 Jahre mal seine Oberfl\u00e4chen \u00e4ndert, bekommt das jedes Mal zu sp\u00fcren. Der Start-Button hat unten links zu sein, ansonsten gibt es \u00c4rger. Jetzt bekommt sogar der Usability-Liebling Apple \u00c4rger wegen des neuen Flat Designs. Flat Design und Microsofts Ribbon-Leiste in Office 2007 sind Beispiele daf\u00fcr, <a href=\"https:\/\/www.netz-barrierefrei.de\/wordpress\/hilfstechnik-und-mensch-maschine-interaktion\/usability-2\/usability\/\">wie Usability vom Nutzer abgelehnt werden kann<\/a>. Was f\u00fcr den Neueinsteiger vielleicht besser ist, wird vom alten Hasen zur\u00fcck gewiesen.<br \/>\nMuster sind ein Kernelement der Usability. Von Windows haben wir gelernt, dass der Best\u00e4tigen-Button links und der Abbrechen-Button rechts ist. Bei Apples iOS lernen wir, dass der Abbrechen-Button links und der Best\u00e4tigen-Button rechts ist. Nun mag man davon halten, was man will, aber eine eindeutige Design-Sprache in diesem Bereich w\u00fcrde sicher viele Fehleingaben vermeiden. Es geht nicht so sehr um die paar Milisekunden, die man ben\u00f6tigt, um die Button-Beschriftungen zu lesen, sondern vielmehr um die Verwirrung durch die Umstellung und um die Vermeidung von Fehlern.<\/p>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_85 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\/hilfstechnik-und-mensch-maschine-interaktion\/rolle-der-muster-erkennung\/#Muster_fuer_Blinde\" >Muster f\u00fcr Blinde<\/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\/hilfstechnik-und-mensch-maschine-interaktion\/rolle-der-muster-erkennung\/#Muster_fuer_andere_Gruppen\" >Muster f\u00fcr andere Gruppen<\/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\/hilfstechnik-und-mensch-maschine-interaktion\/rolle-der-muster-erkennung\/#Zeichen_und_Symbole\" >Zeichen und Symbole<\/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\/hilfstechnik-und-mensch-maschine-interaktion\/rolle-der-muster-erkennung\/#Fazit\" >Fazit<\/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\/hilfstechnik-und-mensch-maschine-interaktion\/rolle-der-muster-erkennung\/#Zum_Weiterlesen\" >Zum Weiterlesen<\/a><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"Muster_fuer_Blinde\"><\/span>Muster f\u00fcr Blinde<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Bei Mustern denkt man spontan an visuelle Muster, aber auch f\u00fcr Blinde spielen Muster eine gro\u00dfe Rolle. So wissen wir zum Beispiel, dass viele Websites nach dem Schema &#8222;Head &#8211; Navigation &#8211; Inhalt &#8211; Sidebar &#8211; Fu\u00df&#8220; aufgebaut sind. Bei Websites, die wir nicht regelm\u00e4\u00dfig aufsuchen, tippen wir solange auf &#8222;H&#8220; f\u00fcr \u00dcberschrift, bis wir den Inhalt gefunden haben, und wenn wir die Navigation vor uns haben rechnen wir fest damit, dass bald der Inhalt kommt. Wenn stattdessen die Fu\u00dfzeile kommt, wird es hakelig.<br \/>\nEin typisches Muster ist auch der Absende-Button am Ende eines Formulars. Ist doch logisch, ich bekomme die Schritte in der Reihenfolge angezeigt, in der ich sie absolviere. Ich f\u00fclle also zuerst das Formular aus und sende es dann ab. Amazon Deutschland hingegen leuchtet diese Logik nicht ein. in der Webversion ist der Absende-Button vor den Daten, die man vor dem Absenden \u00fcberpr\u00fcfen m\u00f6chte. F\u00fcr Sehende ist dieser Button ohne Weiteres ersichtlich, f\u00fcr Blinde nicht. Ich glaube aber dass auch Sehende von einer kl\u00fcgeren Platzierung des Absende-Buttons hinter der Bestell\u00fcbersicht profitieren w\u00fcrden, weil der Blickverlauf von oben nach unten verl\u00e4uft, also nach der \u00dcberpr\u00fcfung der Bestelldaten automatisch auf dem Absende-Button enden w\u00fcrde. Ihr d\u00fcrft selber spekulieren, warum die Usability-Experten von Amazon das so angelegt haben. <\/p>\n<h2><span class=\"ez-toc-section\" id=\"Muster_fuer_andere_Gruppen\"><\/span>Muster f\u00fcr andere Gruppen<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Andere Gruppen profitieren davon, wenn eine Website konsistent aufgebaut ist. Dazu geh\u00f6ren Sehbehinderte mit hohen Vergr\u00f6\u00dferungsgraden, Menschen mit Leseschw\u00e4che oder Ged\u00e4chcnisschwierigkeiten und so weiter.<br \/>\nAuch Inhalte k\u00f6nnen einheitlich aufgebaut werden. So kann ein Text in der Form eines Berichtes nach der umgekehrten Pyramide aufgebaut sein. Das Wichtigste steht am Anfang des Textes, weniger wichtige Informationen folgen mit absteigender Wichtigkeit. Alle 3 bis f\u00fcnf Abs\u00e4tze kommt eine Zwischen\u00fcberschrift, am Ende des Artikels gibt es weiterf\u00fchrende Links, Buchempfehlungen und so weiter. Der Nutzer wird von ihm unbemerkt in einen Lernprozess gef\u00fchrt. Er lernt, wie die Website und die Texte aufgebaut sind und kommt in das, was man als Flow nennt, er flowt durch die Website, was seine Motivation erh\u00f6ht, sie weiterzuempfehlen oder sp\u00e4ter noch einmal zur\u00fcckzukehren. <\/p>\n<h2><span class=\"ez-toc-section\" id=\"Zeichen_und_Symbole\"><\/span>Zeichen und Symbole<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Zur Mustererkennung geh\u00f6rt allerdings noch mehr. Es gibt zum Beispiel grob gesch\u00e4tzt eine Millionen Schriftarten. Dennoch k\u00f6nnen wir, bis auf einige Ausnahmen wie Fraktalschrift die meisten Texte gut lesen, auch wenn sie in exotischeren Schriftarten gesetzt sind. Ein A sieht in Arial oder in Times New Roman immer noch wie ein A aus, oft kann nur ein Experte erkennen, welche Schriftart er vor sich hat.<br \/>\nDas hei\u00dft aber nicht, dass man beliebige Schriftarten einsetzen sollte. Je bekannter eine Schrift dem Leser ist, desto einfacher f\u00e4llt es ihm, sie zu lesen. Die meisten Sehbehinderten oder Leseschwachen bevorzugen serifenfreie Schriften, weil  die Verzierungen an den Buchstaben eine gr\u00f6\u00dfere Herausforderung f\u00fcr die Augen sind. In manchen Schriftarten kann man das gro\u00dfe I vom kleinen l nicht gut unterscheiden, anderswo sieht eine 5 wie ein S aus und so weiter.<br \/>\nUnd bei Symbolen stehen wir vor \u00e4hnlichen Schwierigkeiten. Man mag von Microsoft halten, was man will, aber mit den Symbolen in Windows, Office und weiteren Programmen haben sie weitgehend unsere Vorstellung davon gepr\u00e4gt, wie Symbole f\u00fcr bestimmte Funktionen auszusehen haben. So kann kaum eine Anwendung auf die Schere verzichten, um Inhalte auszuschneiden, auf die Diskette zum Speichern, obwohl die meisten von uns seit Jahren keine Diskette mehr in der Hand hatten und so weiter.<br \/>\nUnd das ist durchaus sinnvoll, denn es gibt kaum einen Grund, dem Nutzer neue Symbole f\u00fcr alte Funktionen beibringen zu wollen. Nat\u00fcrlich ist die konkrete Gestaltung dieser Symbole durch den jeweiligen Anbieter gesch\u00fctzt, aber die Idee eines Scherensymbols sollte frei verwendet werden k\u00f6nnen. <\/p>\n<h2><span class=\"ez-toc-section\" id=\"Fazit\"><\/span>Fazit<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Muster sind eine wesentliche Hilfe nicht nur f\u00fcr behinderte Nutzer. Die ausf\u00fchrlichen Styleguides gro\u00dfer Software-Produzenten wie Microsoft, Apple oder Google sind nicht dazu da, die Entwickler zu \u00e4rgern oder die Webdesigner abzuw\u00fcrgen. Ihr Zweck ist eine <a href=\"https:\/\/www.netz-barrierefrei.de\/wordpress\/barrierefreies-internet\/barrierefreie-redaktion\/texte\/informationsarchitektur-von-texten\/\">\u00fcbergreifende Informationsarchitektur<\/a> die es erm\u00f6glicht, schnell, effizient und  fehlerfrei zu arbeiten. Viele Entwickler vergessen, dass die Nutzer ihr Programm f\u00fcr eine bestimmte Aufgabe verwenden und nicht, um deren Kreativit\u00e4t zu bewundern. Die Aufgabe steht im Vordergrund und jede St\u00f6rung bei der Erledigung derselben frustriert den Nutzer. <\/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:\/\/www.netz-barrierefrei.de\/wordpress\/barrierefreies-internet\/entwicklung-und-design\/design-patterns-und-best-practices\/\">Design Patterns und Best Practices f\u00fcr die Barrierefreiheit<\/a><\/li>\n<li><a href=\"https:\/\/www.netz-barrierefrei.de\/wordpress\/verstaendlichkeit-von-informations-grafiken\/\">Visual Literacy &#8211; zur Verst\u00e4ndlichkeit von Grafiken<\/a><\/li>\n<li><a href=\"https:\/\/netz-barrierefrei.de\/en\/recog.html\">Pattern Recognition and Accessibility<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Die Mustererkennung klingt zun\u00e4chst trivial, ist aber tats\u00e4chlich eine der K\u00fcnste, die Lebewesen dem Computer voraus haben. So haben es Computer und Kameras recht leicht,&#8230;<\/p>\n<div class=\"more-link-wrapper\"><a class=\"more-link\" href=\"https:\/\/www.netz-barrierefrei.de\/wordpress\/hilfstechnik-und-mensch-maschine-interaktion\/rolle-der-muster-erkennung\/\">Weiterlesen<span class=\"screen-reader-text\">Mustererkennung und Barrierefreiheit<\/span><\/a><\/div>\n","protected":false},"author":1,"featured_media":0,"parent":700,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-705","page","type-page","status-publish","hentry","entry"],"_links":{"self":[{"href":"https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-json\/wp\/v2\/pages\/705","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=705"}],"version-history":[{"count":15,"href":"https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-json\/wp\/v2\/pages\/705\/revisions"}],"predecessor-version":[{"id":9275,"href":"https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-json\/wp\/v2\/pages\/705\/revisions\/9275"}],"up":[{"embeddable":true,"href":"https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-json\/wp\/v2\/pages\/700"}],"wp:attachment":[{"href":"https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-json\/wp\/v2\/media?parent=705"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}