Interaktionselemente
Tasten / Buttons
Tasten sind sensitive Flächen auf dem Monitor, die der Benutzer mit seinem Zeigegerät betätigen kann.
Es ist seit langem bekannt, dass zu kleine Tasten zu häufigen Fehlbedienungen führen. (Luczak, Seite 481). Das ist gemäß eigenen Untersuchungen ebenfalls zielgruppenabhängig. Dabei liegen z.B. große Unterschiede zwischen einem mit Schutzhandschuhen in einem Labor oder einer Werkstatt auf einen Touch-Screen drückenden Grobmotoriker und einem feinfühligen Grafikdesigner mit einer hochsensiblen 6.400 DPI auflösenden / einstellbaren Spezialmaus.
Im Internet sind dank Grafiktools Bildschirmtasten in jeder Form und Farbe denkbar. Auch wenn der Profidesigner nun einwendet, dass es sich physikalisch immer um ein rechteckiges Objekt handelt, so ist dieses Gebilde dank Transparenz und anderer technischer Möglichkeiten dem Benutzer in der Regel nicht bewusst.
Prüfen Sie die Reaktion auf das Betätigen eines Buttons. Wenn danach eine für den Benutzer zu lange Pause eintritt, ohne dass etwas geschieht, besteht die Gefahr, dass er den Button nochmals anklickt. Was passiert dann?
Grundsätzlich gilt, dass man lange Reaktionszeiten vermeiden muss und immer Fehleingaben bereits vorher berücksichtigen sowie abfangen muss. Falls für den Nutzer unerwartet lange Wartezeiten (bei z.B. überlastetem Server) ggf. nicht vermieden werden können, muss man bereits vorher darauf hinweisen mit klaren Angaben, z.B. der Art: 'Bitte haben Sie nach dem Absenden (etc.) bis zu 5 Sekunden Geduld. Sie erhalten danach eine Antwortmeldung hier auf dieser Seite'.
Radio-Button
Ein Radio-Button ist eine Radiotaste zur einfachen und ausschließlichen Auswahl unter mehreren Optionen. In der Regel wird eine allerdings teilweise unklare Voreinstellung bereits von den Browsern vorgenommen. Deshalb ist beim Programmieren unbedingt eine eigene Vorauswahl zu treffen!
Check-Box
Eine Check-Box ist ein Markierungsfeld, das mit einem Häkchen versehen werden kann. Dies erlaubt die Mehrfachauswahl, von unterschiedlichen Optionen.
Der Unterschied zwischen Radio-Button und Check-Box ist bei weitem nicht jedem Benutzer klar. Man sollte je nach Zielgruppe die Funktionen durchaus situativ angemessen umschreibend erklären.
Cycle-Buttons
Diese lassen sich zum Beispiel mittels einer Programmiersprache wie JavaScript erzeugen. Sie zeigen in einem Kreislauf bei jedem Anklicken einen Wert aus einer Reihe von Werten an (Man kennt dies zum Beispiel bei Fahrrad- oder Pkw-Computern, die auf Knopfdruck die gefahrenen Kilometer, die durchschnittliche Geschwindigkeit, die Gesamtfahrzeit, die Uhrzeit, die Temperatur etc. anzeigen. Im Internet stiften derartige Anzeigen viel Verwirrung. Der Aufwand für die Erklärung der Multifunktionstasten ist in der Regel größer als die Anbringung von Einzelfunktionstasten.
Skalen / Schieberegler
Der vertikale Scroll-Balken hat sich im Internet bewährt. Bei anderen Schiebereglern hängt die Akzeptanz jedoch vom Einzelfall ab. Vor allem die Eingabe exakter Zahlenwerte ist nur über Eingabefelder möglich.
Pull-Down-Menüs
Pull-down-, Drop-down-, Pull-up- etc.- Menüs sind heftig umstritten.
Die Form der Listen (List-Box) sind Auswahlmenüs, die bei besonderer Länge auch mit einem Scroll-Balken versehen sein können. Im Internet werden sie je nach Platzierung zum Fensterrand automatisch als Pull-Down oder Pull-Up-Auswahlmenü angezeigt. Ferner sind sie per Programmiersprache auch zur Seite hin ausfahrbar.
Kaskadenmenüs für die Navigation sind mittels spezieller Programmiersprachen erstellbar. Sie sind bereits im Betriebssystem mit der Maus schwer zu bedienen. In Internet-Seiten und bei Benutzung eines Laptops ohne Maus wird die Benutzung oft zu einer unergonomischen Geduldsprobe. Das Hauptproblem scheint hierbei in der fehlenden dauernden Aktivierung zu liegen. Die geringste unbeabsichtigte Bewegung des Mauszeigers vom aktivierten Menü weg, schließt in der Regel (alle) Kaskadenmenüs. - Dennoch haben sie sich in den letzten Jahren weltweit durchgesetzt.
Pop-Up-Menüs sind unergonomisch, da sie beim Klick auf ein anderes (Browser-) Fenster für die meisten Benutzer verschwinden. Das Symbol in der Task-Bar wird oft übersehen.
Vor allem bei Designern gelten sie in der klassischen in HTML mit JavaScript integrierten Form der List-Box als unter ästhetischen Gesichtspunkten indiskutabel. Designer bevorzugen eher die mit viel JavaScript und Layern gestalteten Varianten. Diese sind jedoch aufwändig zu programmieren und zu warten. Jeder neu erscheinende Browser-Typ, teilweise sogar jede neue Version eines existierenden erfordert erhebliche Anpassungen am Quellcode, damit die Menüs noch fehlerfrei arbeiten. Ferner sind sie selbst in den funktionierenden Varianten oft schwer zu bedienen, da sie bei geringsten Bewegungen des Mauszeigers außerhalb des sensitiven Feldes sofort zuklappen.
List-Boxen sind für Anfänger oft kompliziert zu bedienen. Viele fortgeschrittene Nutzer hingegen schätzen sie sehr, da man mit ihnen zum Beispiel in Frames einen Menüpunkt anklickt und danach jeden weiteren Punkt respektive jede weitere Seite mit einem einfachen Fingertipp auf die Pfeil-nach-unten-Taste aufrufen kann. - Testen Sie es selbst aus: Wählen Sie in obigem Listenmenü die '- Fünf' aus und verwenden Sie dann die Pfeil-Hoch- und Pfeil-runter-Taste. Das funktioniert blitzschnell. - Ergonomischer kann man tatsächlich nicht in kurzer Zeit riesiger Inhalte durchblättern. Somit hängt auch hier die Einschätzung der Ergonomie von der Zielgruppe und deren Zielen ab!
List-Boxen lassen sich auch als Teil eines Auswahl-Formulars benutzen. Der Vorteil liegt in der großen Zahl der Auswahlmöglichkeiten, die auf kleinem Raum angebracht werden kann.
Konsequent
Vor allem, wenn man neue Erwartungen weckt, muss man sie auch konsequent erfüllen. Wenn man zum Beispiel grafische Buttons zum Ausführen einer Aktion benutzt, dann muss jeder solcher Button auch eine Funktion besitzen. Logos, die wie ein Button aussehen, sollten folglich auch anklickbar sein.
Mailto
Zum Verschicken einer E-Mail an den Betreiber des Internet-Auftrittes ist ein Link mit Mailto notwendig. Aber nicht alle Browser und E-Mail-Clients unterstützen dies. Es ist deshalb sinnvoll, die E-Mail-Adresse nochmals daneben zu schreiben, so dass sie jeder auch lesen und manuell selbst in sein E-Mail-Programm eintippen kann.
Sofern Sie den Missbrauch der Mailto-Funktion unterbinden wollen, dann finden Sie weitere Praxis-Hinweise im Artikel Bekämpfung unerwünschter Werbe-E-Mails (Spam).
Kontaktformular
Zusätzlich zum Mailto ist ein serverseitiges Kontaktformular für die Kunden hilfreich, die keinen E-Mail-Client benutzen können oder wollen. Dieses Kontaktformular ist auch heute noch erforderlich, da keineswegs jeder Nutzer seine eigene / echte E-Mail-Adresse verwenden und damit gefährden will, um Ihnen z.B. nur einen Hinweis (evtl. zu einem Tippfehler oder einem nicht funktionierenden Interaktions-Werkzeug) zu geben.
Helfen Sie dem Anwender, bereits im Formular Fehler zu erkennen, zu verstehen und zu korrigieren. Dies betrifft alle Formulare. Z.B. lassen sich mittels client-seitiger JavaScript-Abfragen direkt im Formular viele Fehler früh abfangen und dem Nutzer verständlich darlegen. Noch detaillierter funktioniert dies mit PHP oder vergleichbaren Programmiersprachen.
Dieses Formular muss unter allen denkbaren Umständen auch funktionieren! Fehlerhafte Formulare gelten in Nutzerbefragungen zu den enervierendsten Themen. Der Imageschaden bei sichtbaren Fehlern ist bereits groß. Wirklich ärgerlich und teilweise sogar teuer kann es für die Firma allerdings werden, wenn die Fehler unsichtbar sind, und die Nachricht ohne Fehlermeldung nicht am Ziel ankommt!
Dialogboxen
Dialogboxen können in der einfachen Form von Hinweistexten erscheinen, bei denen man nur die "OK"-Taste als Bestätigung anklicken muss, bevor man weiter arbeiten kann. Ferner gibt es komplexe Dialogboxen mit umfangreichen Eingabefeldern. Man sollte deren Einsatz nicht übertreiben, da viele Nutzer sich einem automatisierten und nicht von ihnen selbst steuerbaren externen Zwang ausgesetzt fühlen.
Eingabe-Felder
Eingabe-Felder sind in der Regel in ihrem Erscheinungsbild abhängig vom benutzten Browser. Selbst Grundlegende Dinge wie die Feldlänge auf dem Monitor lassen sich für alte Browser-Versionen nicht einheitlich bestimmen. Nur bei modernen Browser-Versionen lassen sich in Grenzen gezielte Manipulationen in ihrer Wirkung vorherbestimmen.
Die Anzahl der eingebbaren Zeichen sollte den maximal denkbaren Fall berücksichtigen. Falls dieser nicht eruierbar ist, sollte man zumindest einen Zuschlag von 20% zum bisher gefundenen maximalen Fall hinzufügen.
Texteingabefelder für größere Textpassagen sollten mit einem Umbruch versehen sein, da die Benutzer sonst den eigenen Text nicht mehr im Zusammenhang lesen können. Dieser Umbruch vermeidet unverständliche Sätze / Anfragen beim Empfänger!
Zur Erhöhung der Fehlertoleranz sind Eingabefelder bereits online zu überprüfen und Eingaben zu beschränken. Denn es ist sinnlos z.B. unverständliche Daten zu erhalten, nur weil jemand Buchstaben in ein Zahlenfeld eintrug. Das verursacht täglichen Zusatzaufwand, den man durch saubere Planung und Programmierung vorab vermeiden kann. Auch dies funktionierte früher oft mit JavaScript, wurde allerdings in den letzten Jahren zunehmend von PHP ersetzt. PHP ist serverseitig schlichtweg sicherer zu verwenden und zudem für viele Programmierer einfacher, flexibler und ausbaufähiger - vor allem in Zusammenarbeit mit Datenbanken. Ein weiterer Grund war jedoch immer, dass JavaScript client-seitig (also im Browser des Anwenders) abläuft und sowohl von sicherheitsbeflissenen Administratoren in Firmen abgeschaltet wurde, als auch von jedem privaten Nutzer in fast allen Browsern bis heute deaktiviert werden kann. Somit war der gesamte Programmieraufwand in JavaScript vergebene Liebesmühe.
Formulare sollten nicht zu sehr unterteilt werden. Dies betrifft vor allem bei Dingen zu, die für den Nutzer eher zusammen gehören (zum Beispiel Vorwahl und Durchwahl der Telefonnummer).
Auszufüllende Pflichtfelder in Formularen sollten klar gekennzeichnet und deren Anzahl nicht zu groß sein. Sie riskieren hier nur, falsche Einträge zu erhalten.
Persönlich rate ich seit einigen Jahren dazu, sowieso nur noch absolute Pflichtfelder in Formularen anzubieten / abzufragen. Angesichts des Datenschutzes geht es aktiv um Datenvermeidung. Entweder hat man einen rechtlich triftigen Grund für die Abfrage z.B. der Telefonnummer, oder der Nutzer trägt die Daten in einem freiwilligen Feld heute meist sowieso nicht ein.
Drehregler
Normalerweise sind Drehregler so zu konzipieren, dass eine Drehung nach rechts die Wirkung von "es wird mehr, plus, an" besitzt, und eine Drehung nach links, "weniger, minus und aus". Allerdings existiert eine Ausnahme bei Ventilen und Wasserhähnen. Diese beruht auf dem in Kontinentaleuropa überwiegenden Rechtsgewinde bei Schrauben. Falls Sie ein ökologisches Lernspiel oder ein Adventure-Spiel konzipieren, müssen Sie auch im Internet die Erwartungshaltung der Nutzer (Kompatibilität) hierzu berücksichtigen.
Auch die Anordnung von Drehreglern sollte den Erwartungen der Benutzer entsprechen. Es sei hier die ketzerische Frage erlaubt, wer auf einem Herd mit vier Heizplatten die Zuordnung zu den vier Bedienschaltern kennt.
Beispiel
Zum Abschluss noch ein interessantes Beispiel eines komplexeren interaktiven Rechen-Werkzeugs im Internet (auf diesem, meinem Auftritt): Miss-Lupun.
Hilfe
Ich helfe Ihnen bei der