{"id":560,"date":"2010-04-27T18:30:17","date_gmt":"2010-04-27T16:30:17","guid":{"rendered":"http:\/\/robert.kolatzek.org\/wblog\/?page_id=560"},"modified":"2010-04-27T18:30:17","modified_gmt":"2010-04-27T16:30:17","slug":"web-usability","status":"publish","type":"page","link":"https:\/\/blog.kolatzek.org\/wblog\/web-usability","title":{"rendered":"Web-Usability"},"content":{"rendered":"

Das Wort „Usability<\/a>“ ist in aller Munde. Doch was ist diese Benutzerfreundlichkeit (oder eigentlich „Benutzbarkeit“)?<\/p>\n

Prim\u00e4r bedeutet es die Ausrichtung an den Bedienungsm\u00f6glichkeiten des Kunden<\/strong>: an seiner Wahrnehmungsf\u00e4higkeit<\/strong>, seiner Erfahrung<\/strong> mit Bedienung derartigen Sachen und seinen geistigen und k\u00f6rperlichen Interaktionsm\u00f6glichkeiten<\/strong>. Einen wei\u00dfen Text auf wei\u00dfem Hintergrund kann im Normalfall niemand wahrnehmen. Das spreizen der Finger auf einem iPhone l\u00f6st eine bestimmte Aktion aus – wann und welche sagt dem Benutzer seine Erfahrung. Man soll auch nicht von einem Rentner erwarten, dass er mit seiner Maus ein Doppelklick auf einem wenige Pixel gro\u00dfem Aktionsfeld ausf\u00fchren kann. Das Alles geh\u00f6rt zur Usability. Sie ist im Internet ebenso wichtig wie im Cockpit eines Flugzeugs. Was in welchem Ma\u00dfe oder unter welchen Voraussetzungen gilt, m\u00f6chte ich hier zusammenstellen und von den Lesern diskutieren lassen. Die Reihefolge ist nicht immer wertend gemeint, wenn auch als Checkliste mit einer langsam sinkenden Priorit\u00e4t zu betrachten.<\/p>\n

<\/p>\n

    \n
  1. Der Benutzer wei\u00df, wo er sich befindet<\/strong>. Wichtig vor allem bei Gro\u00dfunternehmen, \u00c4mtern und Organisationen. Corporate Design gibt dem Benutzer die Sicherheit immer noch dasselbe Angebot (Portal) vor sich zu haben. Gleich bleibende Gestaltung und Abl\u00e4ufe m\u00fcssen nur einmal kennengelernt werden, danach greift man auf die Erfahrung der allerersten Seite zur\u00fcck.<\/li>\n
  2. Die Internetseite muss inhaltlich dem entsprechen, was der dahin f\u00fchrende Hyperlink oder Seitentitel auch ank\u00fcndigt.<\/strong> So wird der Benutzer nicht mit leeren Versprechen auf Seiten gek\u00f6dert, die er bei richtiger „Ausschilderung“ nicht besuchen w\u00fcrde. Stellen Sie sich vor, jeder d\u00fcrfte in Deutschland Wegweiser (auch falsche) aufstellen – Sie k\u00e4men sicher von M\u00fcnchen nach Berlin, nur eben \u00fcber Hannover!<\/li>\n
  3. Es muss erkennbar sein, was eine Interaktionsfl\u00e4che ist und was nicht.<\/strong> Bei der Unterscheidung orientieren Sie sich am besten an der Wahrnehmungsf\u00e4higkeit und Erfahrung der Nutzer: blasses Rot und blasses Gr\u00fcn ist f\u00fcr Farbblinde grau, so dass ein Farbentausch (als Hinweis auf eine Interaktionsfl\u00e4che) nicht wahrgenommen werden kann. Es darf aber auch keine gr\u00f6\u00dfere Erfahrung der Nutzer voraussetzen, als sie praktisch vorhanden ist: bis heute ist eine Farben-wechselnde Fl\u00e4che f\u00fcr die Surfer nur dann ein Link, wenn auch der Maus-Cursor in Zeigefinger wechselt. Der „Zeigefinger“ ist insgesamt sehr universell, genauso wie die Unterstreichung. Kn\u00f6pfe (vor allem im grauen Standard-Design) werden ebenfalls als Aktionsfelder wahrgenommen. Ihre Beschriftung sollte z.B. den folgenden Satz erweitern:\u00a0 „Ich m\u00f6chte jetzt…“ („Bestellung aufgeben“, „Bekannte finden“, „Profil speichern“, „Abfrage starten“)<\/li>\n
  4. Jede ausgef\u00fchrte Aktion gibt ein wahrnehmbares (am besten sichtbares) Feedback<\/strong>. Formulare, die nach dem Klick auf „senden“ keine R\u00fcckmeldung geben und die Daten nicht l\u00f6schen, werden mehrfach abgeschickt. Verschwinden nur die Daten ohne eine R\u00fcckmeldung, glaubt der Benutzer, die Eingaben verloren zu haben. \u00c4nderungen an Bereichen, die bei der Ausf\u00fchrung nicht sichtbar sind, sind unkomfortabel und ebenfalls \u00e4rgerlich (man zwingt den Benutzer zum hin und her scrollen). Gleiches gilt f\u00fcr Eingabefelder, die ohne zus\u00e4tzliche Aktionen an den Server \u00fcbertragen werden (AJAX), sonst sucht man vergeblich nach einem „speichern“-Button.<\/li>\n
  5. Die Gr\u00f6\u00dfe gibt den Ton an<\/strong>. Je gr\u00f6\u00dfer ein Text ist, desto eher und wichtiger erscheint er in den Augen des Betrachters. Zu viel gro\u00dfe Texte f\u00fchren zum „Herumirrenden Auge“. Man sieht alles und nichts. Zu viel Kleintext ohne Unterteilung, Absetzung oder \u00dcberschriften f\u00fchrt ebenfalls zur „Blindheit“. Der Text sollte „scanbar“ sein – man muss anhand von Stichworten erkennen, in welchem Teil des Textes was zu finden ist.<\/li>\n
  6. Der Navigationsbereich muss als solcher erkennbar sein<\/strong>. Oben oder links gilt als am besten geeignet. Allerdings sind Punkte 3 und 4 ebenso wichtig. Meine Seite h\u00e4lt sich nicht an „links oder oben“. Dennoch sieht man, dass dieser Bereich etwas besonderes ist. Stichworte wie „Links“, „Archiv“, „Kategorien“ unterteilen den Bereich, eine Aufhellung des Textes unter dem Mauszeiger (und entsprechender Cursor) signalisieren: „Ich bin aktiv, kannst mich anklicken.“ Wenn Navigationsbereiche wie ein Teil des Logos wirken, werden sie auch oben \u00fcbersehen.<\/li>\n
  7. „Form follows function“ – das Design muss sich am Einsatzgebiet ausrichten<\/strong>. Lange Texte (wie in Romanen) m\u00f6chten gelesen werden. Zu kleine Schrift oder unruhiger, Vordergrund-\u00e4hnlicher Hintergrund verhindert genau dies. Ein zu starker Kontrast zwischen Hintergrund und Vordergrund schadet auf Dauer den Augen auch. Soll das Auge haupts\u00e4chlich das Bild auf sich wirken lassen, sollte man ihm genug Platz zur Verf\u00fcgung stellen und hervorheben. Begleittexte wirken bei Bildern als Unterschrift immer noch am besten. (Leicht zu erreichen z.B: mit yoxview<\/a>).<\/li>\n
  8. Der Wortschatz muss verst\u00e4ndlich sein<\/strong>. Je nach Empf\u00e4ngergruppe kann „Proletendeutsch“ zielf\u00fchrender sein als Fachchinesisch. Der Wortschatz muss auch f\u00fcr die Hyperlinks gelten (wie in Punkt 2 beschrieben). Das „title“-Attribut des HTML erlaubt eine kurze Beschreibung, die als Entscheidungshilfe beim Dr\u00fcberfahren eingeblendet wird. Nutzen Sie m\u00f6glichst homogen Ihren Wortschatz: „Auftrag“ hei\u00dft optimaler Weise immer „Auftrag“ (und nicht „Order“, „Beauftragung“ oder „Gebot“ zuf\u00e4llig abwechselnd). Unverst\u00e4ndlich Passagen umschreibt man kurz mit verst\u00e4ndlicheren Texten („Zusammenfassung des Kleingedruckten“).<\/li>\n
  9. Trotz unterschiedlicher Technik sollte das Design grunds\u00e4tzlich \u00fcberall gleich funktionieren und aussehen<\/strong>. Internet Explorer kann einen Webdesigner in den Wahnsinn treiben. Solange die Farben und Bilder gleich bleiben erkennt der Benutzer die Seite auch in diesem Browser wieder. Schatten und runde Ecken sind verzichtbar (wenn auch manchmal unter Tr\u00e4nen).<\/li>\n<\/ol>\n

    Immer N\u00fctzlich bei einer Pr\u00fcfung:<\/p>\n