{"id":900,"date":"2012-10-01T20:38:03","date_gmt":"2012-10-01T18:38:03","guid":{"rendered":"http:\/\/robert.kolatzek.org\/wblog\/?p=900"},"modified":"2012-10-01T20:38:03","modified_gmt":"2012-10-01T18:38:03","slug":"dem-benutzer-auf-die-sprunge-helfen","status":"publish","type":"post","link":"https:\/\/blog.kolatzek.org\/wblog\/900\/dem-benutzer-auf-die-sprunge-helfen","title":{"rendered":"Dem Benutzer auf die Spr\u00fcnge helfen"},"content":{"rendered":"<p>Mit steigender Menge an Informationen wird es immer schwieriger die richtigen (eigentlich: die gew\u00fcnschten) zu finden. Die Informationswissenschaft entwickelte viele interessante Instrumente, um der Datenflut Herr zu werden. Andere Wissenschaften steuerten andere Hilfsmittel bei. Aus diesem Pool an Ideen sollen hier die f\u00fcr das WWW relevanten kurz vorgestellt werden.<\/p>\n<p><!--more--><\/p>\n<h1>Einf\u00fchrung<\/h1>\n<p>Um die Menge an Informationen zu beherrschen d.h. sich dienlich zu machen, brauchen wir immer bessere Werkzeuge, die die Daten auswerten und uns nur die anzeigen, die unserem Wunsch (&#8222;unserer Neugier&#8220;) entspricht. Dass es diese Werkzeuge nicht gibt, erf\u00e4hrt man sp\u00e4testens dann, wenn man anf\u00e4ngt, bestimmte Informationen zu suchen. Auch bei Google muss man nicht selten einige Seiten durchbl\u00e4ttern und mehrere Links in Augenschein nehmen, um das Gesuchte zu finden. <strong>Es kommt letztlich auf den suchenden Menschen an. Dieser entscheidet, ob das, was er gerade sieht auch das ist, was er braucht.<\/strong> Dies geschieht bei durchbl\u00e4ttern der Suchergebnisse in einem Bereich von einer halben bis zu ca. 30 Sekunden. Bei dieser Entscheidung k\u00f6nnen wir ihn gut unterst\u00fctzen. Am besten ist es, man nimmt den Besucher an der Hand und zeigt ihm alles. (Das geht nat\u00fcrlich nicht, also muss man sich gut beeilen. Webseitenbesucher sind &#8222;gehetzte und scheue Tiere&#8220;, sie sind st\u00e4ndig auf dem Sprung&#8230;) Auch sonst im Umgang mit den Webseiten und Webanwendungen kann man es dem Benutzer leicht oder schwer machen. Im Folgenden werden die besten Ideen und ihre Umsetzungsm\u00f6glichkeiten dargestellt.<\/p>\n<h1>Ein wenig Geschichte<\/h1>\n<p>Bevor wir zur Gestaltung von Webseiten und -Anwendungen kommen, m\u00f6chte ich Sie auf eine kurze Zeitreise mitnehmen. Es ist mir nicht bekannt, wann jemand auf die Idee eines <strong>Inhaltsverzeichnisses<\/strong> kam, doch diesem Menschen verdanken wir eine der gr\u00f6\u00dften Arbeitserleichterungen, die ich in der analogen Welt kenne. Ein System von (analogen) Links in einem linearen Medium ist ebenso wie andere Verzeichnisse (Standortverzeichnis etc) ein Organisationswerkzeug, der die &#8222;<strong>Pfade auf das N\u00f6tigste verk\u00fcrzt<\/strong>&#8222;. Dieses Werkzeug haben die Bibliothekare ebenfalls verwendet, als sie neben den strukturierenden Daten (B\u00fccher, Kapitel, Serien etc) auf die Inhalte angewandt haben. Sie haben die B\u00fccher <strong>Themen, Autoren und Schlagw\u00f6rtern<\/strong> zugeordnet. Die Schlagw\u00f6rter und ihre <strong>Vorzugsbenennungen<\/strong> ergaben ein System von aufeinander bezogenen Ausdr\u00fccken, die eine sehr gute Suchbasis ergeben. Irgendwann haben sie auch solche Daten (die sog. <strong>Metadaten<\/strong>) von Fremdbest\u00e4nden bezogen und den eigenen Nutzern bereitgestellt, obwohl sie die Werke nicht im Bestand hatten. Ein anderes Verfahren f\u00fcr Ihre Produkte haben die Zeitungsverleger f\u00fcr sich entdeckt. Sie ordneten s\u00e4mtliche Daten, Berichte, Kommentare und sonstige Beitr\u00e4ge<strong> in einem bestimmten Schema<\/strong>, das im Gro\u00dfen und Ganzen in jeder Zeitung wiederholt wird: Das Titelblatt mit dem Titel der Zeitung, Datum der Ausgabe, relevante aktuelle Themen, gefolgt vom Falz und weiteren wichtigen Themen darunter. Um es gut lesbar zu machen und auch mehr Nachrichten auf einer Seite unterzubringen, hat man die Unterteilung in Spalten eingef\u00fchrt. Zwischen dem (manchmal schockierenden aber sonst wenig aussagekr\u00e4ftigen) Titel und der dem &#8222;ad res&#8220; (dem Einstig in die Materie) platziert man immer einen <strong>Anreisser<\/strong>, aus dem der Leser die Relevanz des Inhalts f\u00fcr sich in wenigen S\u00e4tzen erkennen kann.<\/p>\n<p>All&#8216; diese Mittel haben bis heute im Web ihre Berechtigung. Die einen mehr, die anderen weniger. Ein Teil dieser Erfahrungen mit der Handhabung der Informationen sowie Best-Practice-L\u00f6sungen im Design werden unter dem Thema &#8222;Usability&#8220; zusammengefasst. Einige werden jedoch kaum beachtet, weil sie zu neu sind oder bisher schlecht umsetzbar waren. Ich m\u00f6chte hier einige davon vorstellen, ohne Anspruch auf Vollst\u00e4ndigkeit oder genaueste Werte der Wirksamkeit zu achten.<\/p>\n<h1>Ad res!<\/h1>\n<p>Wie wollen die folgenden Ziele erreichen:<\/p>\n<ul>\n<li>auf (aus Sicht des Benutzers) Relevantes vorfiltern<\/li>\n<li>strukturieren (von l\u00e4ngeren Texten, gr\u00f6\u00dferen Datenmengen)<\/li>\n<li>Informationen verdichten (f\u00fcrs &#8222;Querlesen&#8220;)<\/li>\n<li>Wiedererkennungswerte schaffen und nutzen<\/li>\n<\/ul>\n<h2>1. Erfahrungsgrad, Vorwissen und Zielgruppe<\/h2>\n<p>Bevor man alle technisch m\u00f6glichen Werkzeuge umzusetzen versucht, sollte man sich zuallererst fragen, wen man zu informieren Beabsichtigt. Einem Jugendlichen braucht man den Link nicht blau zu machen, einem \u00e4lteren Benutzer, der den Namen seines Browsers nicht kennt, hingegen schon. Es ist die Erfahrung mit dem Web und das Vorwissen um gewisse Funktionen oder Strukturen, die ihre Nutzer in Gruppen aufteilt. Wer einmal eine Zeitung gelesen hat, wird in weiteren Zeitungen immer mehr das ordnende Schema dahinter verstehen. Irgendwann wei\u00df er <strong>in welcher Zeitung welches Heft die Sportnachrichten<\/strong> enth\u00e4lt. Hat er dieses Wissen gewonnen, wird er irgendwann &#8222;blind&#8220; dieses Heft herauszuziehen versuchen. Wehe, wenn der Verlag die Sortierung ver\u00e4ndert hat! Auch sie als Webseiten- bzw. Webanwendung-Produzent unterliegen diesem Gesetz. <strong>Man nutzt die Erfahrung, um sich die langsame Suche zu ersparen.<\/strong><\/p>\n<p>F\u00fcr unerfahrene Benutzer lohnt es sich, Webseite- (oder WebApp-) -Tour zu machen. Beim ersten Besuch von GMail wird man freundlich von einem Tooltip begr\u00fc\u00dft, der einem die Lage und Bedeutung der meisten Bedienelemente(-gruppen) aufzeigt und erkl\u00e4rt. Ein Tool f\u00fcr solche <strong>Webguides<\/strong> findet man unter <a title=\"pageguide.js - Erkl\u00e4rungstexte bleiben am selben Ort\" href=\"http:\/\/tracelytics.github.com\/pageguide\/\">pageguide.js<\/a> oder unter <a title=\"Man klickt sich durch die Seite mit dem Tooltip durch\" href=\"http:\/\/www.zurb.com\/playground\/jquery-joyride-feature-tour-plugin\">Joyride<\/a>.<\/p>\n<h2>2. Metadaten (Was findet man dort? Wer ist der Autor?)<\/h2>\n<p><strong>Metadaten sind kein Werkzeug der Suchmaschinenoptimierung<\/strong> (mehr). Gott sei Dank! Es gibt also keinen Grund, darin jeden in Frage kommenden Unsinn dort einzutragen. Sie geben den Lesern <strong>aussagekr\u00e4ftige Fakten \u00fcber den Inhalt an die Hand, bevor sie diese Seite betreten<\/strong>. Das kann im verweisenden Link im <strong>&#8222;title&#8220;-Attribut<\/strong> sein, im RDF oder einfach im <strong>Header<\/strong> des HTML (am besten nach Dublin Core Schema). Diese Seite wird kurz zusammengefasst dargestellt, wenn sie verlinkt wird (und hier k\u00f6nnen <strong>Browser-Add-Ons auch die Metadaten der Seite einbinden<\/strong>), wenn sie im Suchergebnis der Suchmaschine auftaucht, wenn sie in Social Networks zitiert wird oder wenn sie in den Lesezeichen aufgelistet wird. Einige nutzen die Zotero-Erweiterung, um die Seite zu archivieren oder gar zu <strong>zitieren<\/strong>!<\/p>\n<p>(Eine Untersuchung mit Eyetracking ab der Hochschule Darmstadt hat ergeben, dass <strong>kurze Zusammenfassungen dem Leser wichtiger sind als Titel oder Autor. Mit einem pr\u00e4gnanten Anreisser mit relevanten Stichworten helfen Sie dem Benutzer, zu erkennen, ob es f\u00fcr ihn lesenswert ist.<\/strong> Und noch was: Je l\u00e4nger jemand schon sucht, desto weniger liest er, bevor er zum n\u00e4chsten Ergebnis springt.)<\/p>\n<h2>3. \u00dcber dem Falz (Bedienung, Einleitung, Wo bin ich?, Einkaufswagen)<\/h2>\n<p>Nielsen und Loranger predigen die alte Lehre des Satzes von Zeitschriften&#8230; Und sie haben Recht! Wenn man die Ergebnisse des Eyetrackings richtig anschaut, f\u00e4llt sofort auf, dass <strong>die meiste Aufmerksamkeit in den ersten Sekunden immer der Anfang der Seite bekommt<\/strong>. Wenn sie ihre Inhalte hinter der Werbung und \u00fcberdimensionierten Bildchen verstecken wollen, dann bitte sch\u00f6n. Wundern sie sich nur nicht, wenn die Absprungrate innerhalb der ersten 10 Sekunden h\u00f6her ist als bei der Konkurrenz. Machen sie die Titel deutlich. Zeigen sie, wohin der Besucher sich durchgeklickt hat. (Vielleicht ist er hier absolut falsch. Ihn in Unwissenheit zu lassen und zu t\u00e4uschen kann der Reputation ihrer Seite durchaus schaden. Es darf schlie\u00dflich jeder zum <a title=\"Gemeinsam f\u00fcr mehr Sicherheit im Netz sorgen bzw. sich aus schlechten Erfahrungen anderer vorwarnen lassen. Sehr empfehlenswert!\" href=\"http:\/\/www.mywot.com\/\">WebOfTrust<\/a> beitragen!)<\/p>\n<p>Ein unschlagbares Argument ist die &#8222;Basket-Position&#8220;. Aus der Erfahrung mit anderen Shops heraus werden alle Benutzer den <strong>Einkaufwagen bzw. -Korb immer oben rechts suchen<\/strong>. Dieser Ort ist in Shop-Systemen heilig! Ob die <strong>Navigation<\/strong> rechts oder links zu finden ist, ist meist nicht von Bedeutung, sofern sie <strong>als solche erkennbar<\/strong> ist. Die Idee des Footers als &#8222;Ort f\u00fcr alles andere&#8220; ist meines Wissens noch nicht genau untersucht. Ich selbst finde es sehr unpraktisch, scrollen zu m\u00fcssen, um zu wichtigen Inhalten zu gelangen. Impressum und Kontakt haben sich da jedenfalls eingeb\u00fcrgert. (Sind sie in 99% der F\u00e4lle auch nicht der Schwerpunkt des Interesses.)<\/p>\n<h2>4. Scanbar f\u00fcr &#8222;economic evaluators&#8220; (&#8222;sparsames&#8220; Lesen)<\/h2>\n<p>Granka, Feusner und Lorigo beschreiben in ihrem Artikel &#8222;Eye Monitoring in Online Search&#8220; <strong>zwei Typen von Benutzern: den genauen Leser und den sparsamen Leser<\/strong> (jener &#8222;economic evaluator&#8220; der \u00dcberschrift). Die genauen lassen sich mehr Zeit beim lesen, blicken auf viele Elemente einer Seite und entscheiden \u00f6fter: Diese Seite m\u00f6chte ich ganz durchlesen. Die sparsamen Leser lesen weniger\/konzentrierter, schauen meist die vergleichbaren Teile einer Seite an und entscheiden fr\u00fcher: Dies ist nichts f\u00fcr mich!<\/p>\n<p>M\u00e4nner waren in der Untersuchung an der Uni Darmstadt die \u00f6konomischeren. Sie waren schneller, lasen weniger und hielten weniger Ergebnisse f\u00fcr relevant als Frauen &#8211; und das bei h\u00f6herer \u00dcbereinstimmung mit den Experten. (<em>Mehr dazu in: Reichert, Stefanie; Mayr, Phillip: Untersuchung von Relevanzeigenschaften in einem kontrollierten Eyetracking-Experiment. In: Information. Wissenschaft und Praxis. Heft 3\/2012<\/em>)<\/p>\n<p>Die Scanbarkeit geht eher in die Richtung der Lesbarkeit (unser n\u00e4chster Punkt), weil es sehr viel mit der Gestaltung zu tun hat. <strong>Stichw\u00f6rter<\/strong> (wie <strong>standardisierte Bezeichnungen \/ Vorzugsbenennungen, Ortsnamen, Personennamen oder Ma\u00dfangaben<\/strong>) werden <strong>fett dargestellt<\/strong>. Der einleitende erste Satz ist perfekt, wenn er ohne Nebens\u00e4tze auskommt (eine schwierige Kunst, ich wei\u00df). <strong>Titel der Abschnitte unterscheiden sich in der Gr\u00f6\u00dfe<\/strong> (absteigend nach Hierarchie). <strong>Bilder besitzen eine Unterschrift<\/strong> (wirklich unten) und sind mit diesen in einem eigenen Rahmen erkennbar zusammengefasst.<\/p>\n<h2>5. Lesbar (Spalten, Schrift und Farben)<\/h2>\n<p>Kennen Sie &#8222;<strong>Web-Gurken<\/strong>&#8222;? Es sind Webseiten, die f\u00fcr eine <strong>Breite von 920 oder gar 720 Pixeln<\/strong> optimiert sind aber auf einem 1920 Pixel breiten Monitor dargestellt werden. Sie h\u00e4ngen von oben nach Unten (kleben oft am linken Rand) und sind vom wei\u00dfen Nichts umgeben. Dann gibt es noch das Gegenst\u00fcck dazu: die <strong>volle Breitseite<\/strong>. Wenn man hier den Text liest bekommt man einen Krampf im Nacken (wie nach einem Tennis-Match). Beides nicht gerade Benutzerfreundlich. Das T\u00fcpfelchen auf dem &#8222;i&#8220; bildet meist die <a title=\"Voreingestellte Schriftgr\u00f6\u00dfe und die Fallen. Sowie ein erfrischendes mediaquery mit 'em's.\" href=\"http:\/\/filamentgroup.com\/lab\/how_we_learned_to_leave_body_font_size_alone\/\"><strong>Schriftgr\u00f6\u00dfe, angegeben in Pixeln<\/strong><\/a>: fast immer zu klein.<\/p>\n<p>Die Lehre des Textsatzes ist in Vergessenheit geraten. Dabei haben wir im Web immer mehr Werkzeuge, um sie umzusetzen! <strong><a title=\"CSS Multi-column Layout\" href=\"http:\/\/www.w3.org\/TR\/css3-multicol\/\">CSS-Mehrspaltendesign<\/a><\/strong> funktioniert jetzt schon <a title=\"Wo ist multcolumnt jetzt schon einsetzbar?\" href=\"http:\/\/caniuse.com\/#feat=multicolumn\">in vielen Browsern<\/a>, auch wenn die Definition noch nicht endg\u00fcltig verabschiedet wurde. Auch sog. <strong>Grid-Systeme<\/strong> erlauben eine flexible Ausnutzung des Bildschirms durch bessere Unterteilung. Es sind <strong>nicht alle flexibel (Prozent statt Pixel)<\/strong> aber <a title=\"Responsives CSS-Grid-Framework\" href=\"http:\/\/responsify.it\/\">Responsify<\/a> ist es! F\u00fcr kleinteilige Darstellung von vielen kurzen Beitr\u00e4gen mit Gestaltungsm\u00f6glichkeit f\u00fcr den Benutzer empfiehlt sich <a title=\"jQuery plugin for multi-column grids\" href=\"http:\/\/gridster.net\/\">gridster.js<\/a>. (Ich halte sie pers\u00f6nlich f\u00fcr Spielerei, weil nur mit JavaScript umsetzbar aber es soll Menschen geben, die genau dies haben wollen.)<\/p>\n<p>Zur Gestaltung geh\u00f6ren neben der Schrift (die sich den Vorgaben des Benutzers und seines Browsers anpasst) die Farben und die Struktur. Farben sind Geschmackssache. Aber nicht nur. Sie sollen entweder in das <strong>Corporate Design<\/strong> des Unternehmens passen oder (bei Web-Applikationen) <strong>internationale Richtlinien umsetzen (<a title=\"Farben der Benutzerschittstellen nach IEC\/EN\" href=\"http:\/\/de.wikipedia.org\/wiki\/Benutzerschnittstelle#Kennzeichnungen\">IEC\/EN<\/a>)<\/strong>. Was die Struktur anbetrifft ist ein <strong>Rahmen (auch ein imagin\u00e4rer im Sinne eines gr\u00f6\u00dferen Abstandes zu andren Elementen)<\/strong> der gr\u00f6\u00dfte Freund des Designers. Die Zusammengeh\u00f6rigkeit von Bild und Unterschrift wird durch einen Viereck drum herum oder durch einen Leerraum deutlich. Der Benutzer kann es besser zuordnen und seinen Blick auf einzelne Teile fixieren. Es k\u00f6nnen auch die <strong>Hintergrundfarben<\/strong> sein, jedoch nicht zu blass (wegen farbenblinder Benutzer) oder zu kr\u00e4ftig (da der Kontrast zum Text sinkt). Reiter (sog. &#8222;Tabs&#8220;) helfen einzelne Gruppen von Bedienelementen zusammenzufassen und somit einen logischen Zusammenhang anzudeuten. Mit &#8222;<strong>legend<\/strong>&#8220; kann man zus\u00e4tzlich Eingabeelemente eines HTML-Formulars &#8222;unter ein Motto stellen&#8220; &#8211; vorausgesetzt, man hat sie per &#8222;<strong>fieldset<\/strong>&#8220; zusammengefasst. \u00dcber &#8222;label for=&#8217;inputname'&#8220; sollte man als Webentwickler auch schon mal geh\u00f6rt haben. Bei <strong><a title=\"kurzum: Accessibility Verordnung f\u00fcr die \u00c4mter-Webseiten\" href=\"http:\/\/www.barrierefreies-webdesign.de\/richtlinien\/beschriftungen-labels-oder-anweisungen.html\">BITV<\/a><\/strong> ist dies ein Muss.<\/p>\n<h2>6. Benutzerschnittstellen explorieren (Kommandozeile, Text, Grafik, Spracheingaben, andere &#8222;Sensoren&#8220;-Eingaben: Ort, Sprache, Himmelsrichtung, Autocomplete)<\/h2>\n<p>Mit &#8222;explorieren&#8220; ist hier das vielseitige Nutzen der Ber\u00fchrungspunkte zur Zielperson\/Zielgruppe oder genauer gesagt &#8211; der daraus resultierenden Daten &#8211; gemeint. Es gibt Daten, die bewusst eingegeben werden m\u00fcssen und es gibt Daten, die schon da sind (implizit in anderen Daten oder nicht vom Benutzer selbst eingegeben werden). Diese m\u00f6glichst gut zu nutzen, ist das oberste Gebot. So erspart man dem Benutzer die Frustration mit unpassenden Informationen und sich selbst die unn\u00f6tigen trial-and-error-Versuche.<\/p>\n<h3>Kommandozeile<\/h3>\n<p>Manchmal kann man dem Benutzer ohne viel Aufwand (aus seiner Sicht) Eingaben entlocken und zum Anpassen des Informationsangebotes nutzen. Es kling vielleicht etwas schr\u00e4g aber es ist kein Unsinn: Auch das Web kann Kommandozeilen verkraften! Wie? Ganz einfach. Viele sog. Poweruser nutzen es schon l\u00e4ngst. <strong>Googles Suchschlitz wird zur Kommandoziele, wenn man neben den Suchbegriffen auch Suchbefehle eingibt.<\/strong> Beispiele w\u00e4ren hier Minus, Anf\u00fchrungszeichen, <em>&#8218;inurl:&#8216;<\/em> etc. Man sagt nicht nur, was gesucht werden soll, sondern wie und wo. Das ist ein Kommando, weil es den Ablauf des Programms steuert. Eine andere Art von Kommandozeile w\u00e4ren die URLs, die f\u00fcr REST-Schnittstellen gebaut worden sind. <em>&#8222;\/Bibliothek\/abc\/Medium\/Buch\/ISBN\/123456789X&#8220;<\/em> k\u00f6nnte f\u00fcr HTTP-GET bedeuten: Aus der Bibliothek <em>abc<\/em> fordere ich das Medium <em>Buch<\/em> mit der <em>ISBN<\/em> zur Ansicht der Metadaten an. Dieses Beispiel wirkt vielleicht zu technisch, kann aber f\u00fcr die Poweruser genau das richtige sein. Es gibt nachweislich Menschen, die ihren Browser ganz ohne Maus bedienen k\u00f6nnen (der <a title=\"Mit vi Browser steuern\" href=\"https:\/\/addons.mozilla.org\/en-US\/firefox\/addon\/vimperator\/\">vi-Modus<\/a>). Warum nicht auch die ganze Webseite?<\/p>\n<h3>Textschnittstelle<\/h3>\n<p>Die Eingabefelder brauchen neben einer aussagekr\u00e4ftigen <strong>Beschriftung<\/strong> (<em>&#8222;Was muss ich dort eingeben?&#8220;<\/em>) auch einen Hinweis auf das <strong>Format<\/strong> (<em>&#8222;Wie muss ich es eingeben?&#8220;<\/em>). Letzteres wird in der nahen Zukunft (hoffentlich!) mit <a title=\"Eingaben und Formulare in HTML5\" href=\"http:\/\/www.html5rocks.com\/de\/tutorials\/forms\/html5forms\/\">Platzhaltern des HTML5<\/a> abgedeckt werden k\u00f6nnen. Eingaben f\u00fcr Suche oder in einen gr\u00f6\u00dferen Pool von Personennamen k\u00f6nnen mit der HTML5-Funktionalit\u00e4t des <a title=\"Einfaches Beispiel f\u00fcr autocomplete\" href=\"http:\/\/www.html5tothepoint.com\/datalist.htm\">Autocomplete<\/a>s (<a title=\"Autocomplete in jQueryUI\" href=\"http:\/\/jqueryui.com\/demos\/autocomplete\/\">auch gegenw\u00e4rtig in vielen JS-Frameworks schon enthalten<\/a>) abgedeckt werden. <strong>Warum soll der Benutzer alles bis zum Ende selber tippen, wenn wir ihm die Arbeit abnehmen k\u00f6nnen? Man bedenke, dass diese Vorgehensweise auch die Rechtschreibfehler oder Variationen der Schreibweise eliminieren kann und die Suche zielgenauer bzw. den Datenbestand einheitlicher werden l\u00e4sst.<\/strong> Das <em>&#8222;Warum muss ich das eingeben?&#8220;<\/em> stellt sich nicht wenigen, wenn die Abfragen von sensiblen Daten (wie Adressen oder Kontonummern) sich nicht von selbst erschlie\u00dfen lassen. Das Misstrauen ist nicht nur schlecht. Man muss es akzeptieren und freundlich den <strong>Zweck erkl\u00e4ren<\/strong>.<\/p>\n<p>Eine \u00fcbliche textbasierte Schnittstelle zum Benutzer ist das <strong>Men\u00fc bzw. die Navigation<\/strong>. Unter bestimmten W\u00f6rtern bzw. Phrasen zusammengefasste Funktionen oder Kategorien\/Gruppen sind weit verbreitet und in der Bedienung allgemein gut verst\u00e4ndlich. Die Schwierigkeit hierbei ist, die <strong>Begrifflichkeiten konsistent, der Erfahrung entsprechend und kurz zu halten<\/strong>. Es muss immer sofort erkennbar sein, was sich dahinter versteckt. Es darf auch nicht an verschiedenen Stellen unterschiedlich hei\u00dfen (vor allem in der Bedienungshilfe!). In den meisten F\u00e4llen hat man Platz nur f\u00fcr wenige W\u00f6rter. Abzuraten ist jedoch von Substantiven. Sie gelten als Sprache der Fachleute. Statt &#8222;Substantivierung&#8220; verwendet man besser &#8222;in Substantiv umwandeln&#8220; und statt &#8222;Autorenschaft&#8220; oder &#8222;Urheberschaft&#8220; einfach &#8222;Sch\u00f6pfer des Werkes&#8220; o.\u00c4. (Und wo wir bei Abk\u00fcrzungen angekommen sind: je weniger ein Mensch in seinem Leben liest, umso weniger ist er Imstande, die Abk\u00fcrzungen richtig zu &#8222;deuten&#8220;.)<\/p>\n<h3>Grafische Schnittstelle<\/h3>\n<p>&#8222;Ein Bild sagt mehr als Tausend Worte&#8220; &#8211; sagt man. Es ist nur schade, dass wir nicht alle dieselbe Sprache sprechen. Es ist also zu beachten, welche &#8222;Sprache&#8220; f\u00fcr die Benutzerf\u00fchrung verwendet wird. Die 3,5&#8243;-Diskette als Symbol f\u00fcr das Speichern zu nehmen ist in Zeiten des Cloud-Computings ein Anachronismus. Dass jeder es sofort versteht, liegt daran, dass wir entweder Disketten zu diesem Zweck verwendet haben oder dass diese Repr\u00e4sentation in unz\u00e4hligen Programmen \u00fcber ein Jahrzehnt tradiert wurde. Festzuhalten ist, dass <strong>eine grafische Repr\u00e4sentation eines Sachverhalts deutlich weniger Platz braucht als eine textuelle<\/strong> &#8211; vorausgesetzt, alle k\u00f6nnen es deuten.<\/p>\n<p>Au\u00dfer im GUI (&#8222;graphical user interface&#8220;) treffen wir die Grafiken im Web auf Schritt und Tritt an. Sie k\u00f6nnen die vielen <strong>textuellen Informationen auflockern, Orientierung in der Seite bieten<\/strong> &#8211; z.B. indem sie die den Inhalt des Abschnitts wiedergeben. (Beispiel: das Bild der Frankfurter Paulskirche werden die bewanderten Leser mit der Epoche des V\u00f6lkerfr\u00fchlings in Verbindung bringen und in einem chronologisch geordneten Text den Abschnitt nebenan dieser Zeit zuordnen.) In einem anderen Kontext d\u00fcrfen die Bilder auch nicht fehlen: die Darstellungen von Orten oder Sehensw\u00fcrdikeiten. <strong>Der Wiedererkennungswert vor Ort<\/strong> ist enorm. (Es d\u00fcrfte den Meisten aufgefallen sein, dass vor allem Frauen die Wegbeschreibung mit markanten Orten anreichern und diese sehr detailreich beschreiben.) Manchmal sehnen sich die Besucher von Webseiten nach Bildern: am besten viel und gro\u00df. Z.b. beim Online-Shopping oder bei der Wohnungssuche. <em>&#8222;Wie? Sie wollen das auf Lager haben, haben aber kein Bild davon?&#8220;<\/em> h\u00f6rt man manchmal die Menschen denken. Es ist ein (manchmal tr\u00fcgerischer) Hinweis auf die Echtheit des Angebotes. K\u00f6nnen sie sich noch auf den Originalverpackung-Nepp bei ebay erinnern? Die Kunden sehen manchmal mehr als sie lesen.<\/p>\n<p>Andererseits sollte man mit Bildern nicht unn\u00f6tig verschwenderisch umgehen. Eine Seite von 1 MByte Umfang (mit css, JS und Bildern) ist bei gut angebundenen Unternehmen kein Problem. Auf dem Lande oder im \u00fcberlaufenen 3G-Netz und beim knappen RAM des Handys kann der Seitenaufbau zu qualvollen Minuten werden (und das Scrollen zur Gedulds\u00fcbung). F\u00fcr responsive d.h. an die Bildschirmgr\u00f6\u00dfe und Ausrichtung angepasste Bild-Auslieferung gibt es zwar einige <a title=\"Eine PHP+Cookie basierte L\u00f6sung \" href=\"http:\/\/adaptive-images.com\/\">Workarrounds<\/a> und <a title=\"Standardisierungsvorschlag f\u00fcr HTML5\" href=\"http:\/\/dvcs.w3.org\/hg\/html-proposals\/raw-file\/tip\/responsive-images\/responsive-images.html\">Vorschl\u00e4ge<\/a> f\u00fcr die Standardisierung. F\u00fcr Schmalband-Internet gibt es im Browser nicht einmal ein Messverfahren, geschweige denn Eingriffsm\u00f6glichkeiten!<\/p>\n<h3>Audio(visuelle) Schnittstelle<\/h3>\n<p>Haben Sie schon Googles Browser Chrome installiert und auf dem neuesten Stand? Sehr sch\u00f6n! Dann sprechen Sie mit ihm. &#8230;wenn Sie eine Seite antreffen, die diese Funktionen nutzt. Neben der reinen Erfassung von T\u00f6nen soll der <a title=\"die experimentelle Version von speech-to-text-API\" href=\"http:\/\/developer.chrome.com\/extensions\/experimental.speechInput.html\">Browser menschliche Sprache in Text<\/a> umwandeln. Es k\u00f6nnte Ihre Nutzer erschrecken, wenn Chrome sie mit einer Warnung wie <em>&#8222;Diese Seite will das Mikrofon nutzen.&#8220;<\/em> &#8218;begr\u00fc\u00dft&#8216;. Aber bei Menschen mit motorischen Schwierigkeiten oder solchen, die der Eingabe per Tastatur nicht m\u00e4chtig sind (Kinder, Senioren oder Behinderte) kann das durchaus gut und n\u00fctzlich sein. <strong>Auch Smartphones bieten diese M\u00f6glichkeit: Android seit Version 4.1 sogar ganz offline.<\/strong><\/p>\n<p>Auf umgekehrtem Wege ist die Textausgabe in Form von Sprache ebenfalls selten n\u00f6tig. (Ich nehme jetzt die Beschaffenheit der Webseiten und Webapps, die von Screenreadern sinnvoll vorgelesen werden zu k\u00f6nnen, aus diesem Kontext heraus.) Solche F\u00e4lle gibt es durchaus: z.B. Navgation beim Autofahren, \u00dcbersetzungsprogramme etc. Genau dann, <strong>wenn der Benutzer nicht in der Lage ist, den Text selber vorzulesen<\/strong>, sollte man die M\u00f6glichkeit vorsehen. (<em>Eine kleine Anekdote am Rande: Googles Navigation spricht in Deutschland nur deutsch. Franz\u00f6sische Stra\u00dfennamen werden also vorgelesen, wie wenn sie ein Erstkl\u00e4ssler gelesen h\u00e4tte. Die Spitze ist aber &#8222;St. Ingbert&#8220;. Das K\u00fcrzel wird nicht aufgel\u00f6st und alles zusammen gelesen: &#8222;Stingbert&#8220;!<\/em>)<\/p>\n<h3>Sensoren als Schnittstelle<\/h3>\n<p>Neben Eingaben in Form von Text, Ton, Dateien, Klicks (sowie Gesten) gibt es weitere Datenquellen, die man &#8211; mit Erlaubnis des Benutzers &#8211; anzapfen kann. Eine davon ist die <strong>Geolokation<\/strong>. Eine entsprechende Schnittstelle f\u00fcr <a title=\"Erkl\u00e4rung an Beispielen samt Funktion zur Berechnung von Entfernungen\" href=\"http:\/\/www.html5rocks.com\/en\/tutorials\/geolocation\/trip_meter\/\">JS wurde innerhalb von HTML5<\/a> definiert. <em>&#8222;Warum in die Ferne schweifen? Sieh, das Gute liegt so nah!&#8220;<\/em> Was hilft es dem Benutzer, zu wissen, dass am anderen Ende der Republik ein Laden existiert, der das bestimmte Buch im Angebot hat? Er steht mitten auf der Einkaufsmeile und will wissen, wo er eine Buchhandlung findet. Zurecht setzt deshalb Google die (vermutlich) \u00f6rtlich n\u00e4heren Gesch\u00e4fte im Suchergebnis oben. Nat\u00fcrlich kann die Ortung ohne GPS nur einen Hinweis auf das Bundesland oder bestenfalls einen Vorwahlbereich geben. Auch die Vermutung, dass Ergebnisse &#8222;manipuliert&#8220; sind, kaum untermauern kann, so ist das Empfinden negativ beeinflusst. Damit das nicht passiert, w\u00e4re eine freundliche Frage an den Benutzer mit Zweckangabe sicher hilfreich.<\/p>\n<p>Es gibt noch andere Informationen, die wir f\u00fcr uns und unseren &#8222;Kunden&#8220; einspannen k\u00f6nnten. Die Himmelsrichtung des Smartphone-Kompass kann uns helfen, Informationen zum angeschauten Objekt zu geben. (Das nat\u00fcrlich nur in Verbindung mit Geolokation per GPS.) Uhrzeit ist f\u00fcr die Anzeige der noch offenen Gesch\u00e4fte genauso dienlich, wie die <strong>Selbstauskunft des Browsers \u00fcber die Sprachlichen Vorlieben des Nutzers<\/strong>. (Android wechselt z.B. die Sprache der Bedienung und [wenn nicht eingeloggt] der Suche im Browser sobald man die SIM-Karte eines polnischen Netzbetreibers einlegt. Auch einige andere Webseiten sprechen dann mit einem auf polnisch.)<\/p>\n<p>Eine ganz tolle Erfindung ist der <strong><a title=\"QR kurz erkl\u00e4rt\" href=\"http:\/\/qr.robert.kolatzek.org\/\">QR-Code<\/a><\/strong>, der zwar patentiert ist aber von jedem frei verwendet werden kann (anders als das gesch\u00fctzte &#8222;Schneidebrett-Design&#8220; eines Hardware- und Softwareherstellers). Im QR-Code kann sich ein beliebiger <strong>Text, eine URL oder eine VCard<\/strong> verstecken. Das Schlaue an dem System ist, dass es die digitale Welt des &#8222;Informationsgebers&#8220; mit der digitalen Welt des &#8222;Informationsnehmers&#8220; \u00fcber den analogen Weg (z.B. gedruckte Werke wie Plakate, Zeitschriften, etc.) verbindet. Es <strong>erspart Tipparbeit, eliminiert Fehlerquellen und ist viel schneller<\/strong>.<\/p>\n<h2>Im Falle des Falles &#8211; Wenn man wirklich Hilfe braucht<\/h2>\n<p>Nach dem Weg zu fragen, f\u00e4llt vielen M\u00e4nnern schwer. Es ist auch ein Eingest\u00e4ndnis, dass man Hilfe braucht. Das muss aber nichts Peinliches sein. Laut einer Umfrage in einem Artikel in der &#8222;Information. Wissenschaft und Praxis&#8220; (<em>Stallmann, Anika: Silver Surfer im Internet. IWP 2012\/4. S. 217-226<\/em>), hat die Mehrheit der \u00fcber 50-J\u00e4hrigenn keine Scheu, andere (auch j\u00fcngere) Benutzer um Hilfe zu bitten. (Warum denn auch?) Gleichzeitig suchen aber auch viele von ihnen aktiv nach Hilfestellung vom Betreiber. Will sich ein stark symbolisiertes Funktionsgebilde (wie ein &#8222;Tabellen-Programm&#8220;) dem Benutzer nicht selbst erschlie\u00dfen, greifen viele gerne auf Screencasts auf youtube oder vimeo zu. (Nicht von sich aus &#8211; aber \u00f6fter, wenn sie verlinkt werden).<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Mit steigender Menge an Informationen wird es immer schwieriger die richtigen (eigentlich: die gew\u00fcnschten) zu finden. Die Informationswissenschaft entwickelte viele interessante Instrumente, um der Datenflut Herr zu werden. Andere Wissenschaften steuerten andere Hilfsmittel bei. Aus diesem Pool an Ideen sollen hier die f\u00fcr das WWW relevanten kurz vorgestellt werden.<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_sitemap_exclude":false,"_sitemap_priority":"","_sitemap_frequency":"","ocean_post_layout":"","ocean_both_sidebars_style":"","ocean_both_sidebars_content_width":0,"ocean_both_sidebars_sidebars_width":0,"ocean_sidebar":"","ocean_second_sidebar":"","ocean_disable_margins":"enable","ocean_add_body_class":"","ocean_shortcode_before_top_bar":"","ocean_shortcode_after_top_bar":"","ocean_shortcode_before_header":"","ocean_shortcode_after_header":"","ocean_has_shortcode":"","ocean_shortcode_after_title":"","ocean_shortcode_before_footer_widgets":"","ocean_shortcode_after_footer_widgets":"","ocean_shortcode_before_footer_bottom":"","ocean_shortcode_after_footer_bottom":"","ocean_display_top_bar":"default","ocean_display_header":"default","ocean_header_style":"","ocean_center_header_left_menu":"","ocean_custom_header_template":"","ocean_custom_logo":0,"ocean_custom_retina_logo":0,"ocean_custom_logo_max_width":0,"ocean_custom_logo_tablet_max_width":0,"ocean_custom_logo_mobile_max_width":0,"ocean_custom_logo_max_height":0,"ocean_custom_logo_tablet_max_height":0,"ocean_custom_logo_mobile_max_height":0,"ocean_header_custom_menu":"","ocean_menu_typo_font_family":"","ocean_menu_typo_font_subset":"","ocean_menu_typo_font_size":0,"ocean_menu_typo_font_size_tablet":0,"ocean_menu_typo_font_size_mobile":0,"ocean_menu_typo_font_size_unit":"px","ocean_menu_typo_font_weight":"","ocean_menu_typo_font_weight_tablet":"","ocean_menu_typo_font_weight_mobile":"","ocean_menu_typo_transform":"","ocean_menu_typo_transform_tablet":"","ocean_menu_typo_transform_mobile":"","ocean_menu_typo_line_height":0,"ocean_menu_typo_line_height_tablet":0,"ocean_menu_typo_line_height_mobile":0,"ocean_menu_typo_line_height_unit":"","ocean_menu_typo_spacing":0,"ocean_menu_typo_spacing_tablet":0,"ocean_menu_typo_spacing_mobile":0,"ocean_menu_typo_spacing_unit":"","ocean_menu_link_color":"","ocean_menu_link_color_hover":"","ocean_menu_link_color_active":"","ocean_menu_link_background":"","ocean_menu_link_hover_background":"","ocean_menu_link_active_background":"","ocean_menu_social_links_bg":"","ocean_menu_social_hover_links_bg":"","ocean_menu_social_links_color":"","ocean_menu_social_hover_links_color":"","ocean_disable_title":"default","ocean_disable_heading":"default","ocean_post_title":"","ocean_post_subheading":"","ocean_post_title_style":"","ocean_post_title_background_color":"","ocean_post_title_background":0,"ocean_post_title_bg_image_position":"","ocean_post_title_bg_image_attachment":"","ocean_post_title_bg_image_repeat":"","ocean_post_title_bg_image_size":"","ocean_post_title_height":0,"ocean_post_title_bg_overlay":0.5,"ocean_post_title_bg_overlay_color":"","ocean_disable_breadcrumbs":"default","ocean_breadcrumbs_color":"","ocean_breadcrumbs_separator_color":"","ocean_breadcrumbs_links_color":"","ocean_breadcrumbs_links_hover_color":"","ocean_display_footer_widgets":"default","ocean_display_footer_bottom":"default","ocean_custom_footer_template":"","ocean_post_oembed":"","ocean_post_self_hosted_media":"","ocean_post_video_embed":"","ocean_link_format":"","ocean_link_format_target":"self","ocean_quote_format":"","ocean_quote_format_link":"post","ocean_gallery_link_images":"on","ocean_gallery_id":[],"footnotes":""},"categories":[3,8],"tags":[26,30,48,107,119,126],"class_list":["post-900","post","type-post","status-publish","format-standard","hentry","category-informationswissenschaft","category-software","tag-css","tag-design","tag-html","tag-standards","tag-usability","tag-web","entry"],"_links":{"self":[{"href":"https:\/\/blog.kolatzek.org\/wblog\/wp-json\/wp\/v2\/posts\/900","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.kolatzek.org\/wblog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.kolatzek.org\/wblog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.kolatzek.org\/wblog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.kolatzek.org\/wblog\/wp-json\/wp\/v2\/comments?post=900"}],"version-history":[{"count":0,"href":"https:\/\/blog.kolatzek.org\/wblog\/wp-json\/wp\/v2\/posts\/900\/revisions"}],"wp:attachment":[{"href":"https:\/\/blog.kolatzek.org\/wblog\/wp-json\/wp\/v2\/media?parent=900"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.kolatzek.org\/wblog\/wp-json\/wp\/v2\/categories?post=900"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.kolatzek.org\/wblog\/wp-json\/wp\/v2\/tags?post=900"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}