Usability Heidi Tilliger, Bremen

Präsentation zum Thema: "Usability Heidi Tilliger, Bremen"—  Präsentation transkript:

1 Usability Heidi Tilliger, Bremen 23.04.2013
Autor / Thema der Präsentation Usability Heidi Tilliger, Bremen T-Systems International GmbH Telekom IT Heidi Tilliger, Dipl. Informatikerin (FH) Teamleiterin TSOAC-Fulfillment Cu3 Utbremer Str. 90, Bremen (Tel.) (Mobil)

2 Autor / Thema der Präsentation
Gebrauchstauglichkeit (englisch usability) bezeichnet nach EN ISO das Ausmaß, in dem ein Produkt, System oder ein Dienst durch bestimmte Benutzer in einem bestimmten Anwendungskontext genutzt werden kann, um bestimmte Ziele effektiv, effizient und zufriedenstellend zu erreichen. Sie ist damit eng verwandt mit dem Konzept der Benutzerfreundlichkeit (engl. User friendlyness). Die Gebrauchstauglichkeit bildet dabei die Mindestanforderung ab, dass ein System zur Zufriedenstellung der Nutzer arbeitet, wohingegen die Benutzerfreundlichkeit auch die emotionalen Aspekte des gesamten Nutzungserlebnisses, der sogenannten User Experience berücksichtigt. Autor / Thema der Präsentation Erkenntnisgewinn dieser Folie: wir alle erkennen schlechte Usability unstrittig auf den ersten Blick

3 Autor / Thema der Präsentation
Agenda Autor / Thema der Präsentation Was ist (gute) Usability Die Regeln (Grundprinzipien) Vorgehensweise User Experience User Stories Testlabor Grafikdesign Dieser Foliensatz behandelt das Basiswissen für IT‘ler um Bildschirmmasken zu layouten, die besser usable sind, also im Gründe das „Pflichtprogramm“ der Usability. Die rechts gelisteten Punkte werden hier nicht behandelt, sie stellen eher die Kür dar, bauen auf die Pflichtpunkte auf und sind vor allem im Massenmarkt (Internet, Endkunden) relevant, essentiell in der Beeinflussung von Kaufentscheidungen These H. Tilliger: Für mich sind diese links gelisteten Punkte Bestandteil des Anforderungsmanagements, da sie klar von den Anforderungen abzuleiten sind und die daraus abzuleitenden Bildschirmmasken Teil des Fachkonzeptes sind, während die rechts gelisteten Punkte eher in den Aufgabenbereich des klassischen Grafikdesigners, einer Werbeagentur fallen

4 Usability ist KEINE Geschmackssache
Autor / Thema der Präsentation Wieso? Geht doch, Du musst doch nur… und dann … und dann… Wenn wir uns mit Usability beschäftigen, geht es nicht darum, dass man irgendwie zum Ziel kommt, sondern dass man das Produkt möglichst gut und einfach benutzen kann. „Intuitiv“ ist eine Frage von Millisekunden, nicht Sekunden. Ordentliche Usability fällt dem Nutzer i.d.R. nicht bewusst auf, schlechte Usability wird bewusst als unangenehm empfunden. Gute Usability schafft Sympathie und schlechte Usability auch Antipathie Die Aussage „Wieso? Geht doch…“ ist i.d.R. ein Indikator für schwache Usability. Beispiel Aufzug: UseCase: ich möchte die Tür aufmachen. Das geschieht oft in der Situation, in der ein Kollege um die Ecke kommt, die Tür schon halb zu ist und ich schnell reagieren muss. Die Knöpfe für „Tür auf“ und „Tür zu“ sehen sich zu ähnlich, so dass insb. unter Zeitdruck nicht gut erkennbar ist, welchen man drücken muss. Dieser Knopf wird wohl kaum benutzt werden. Noch dazu befindet sich direkt daneben der Alarmknopf, so dass das schnelle Drücken auch noch mit dem Risiko eines Alarms verbunden ist. Alle Knöpfe sind klar erkennbar, wenn man sich Zeit nimmt darüber nachzudenken („Wieso, geht doch…“), die Usability ist dennoch schlecht, weil im Anwendungsfall dafür keine Zeit ist, der Anwendungsfall durch dieses Layout nicht gut unterstützt wird. Beispiel Herd (typisches amerikanisches Modell): Um eine Herdplatte auszumachen, muss man über den heißen Topf fassen. Das Beispiel soll zeigen, Usability ist überall im Alltag ein Thema. Wenn man sich mit dem Thema aktiv beschäftigt, sieht man es auf einmal überall und das schärft auch die Sinne für Usability-Kriterien in der IT. Beispiel Eine derart formatierte Mail ist ebenfalls ein Beispiel für schlechte Usability. Natürlich lässt sich der Inhalt erschließen, aber mit mehr Mühe, als wenn die Mail im Layout besser aufbereitet worden wäre. Hier steckt ein Risiko mit drin, dass wichtige Inhalte oder Todos übersehen werden. Man kann auch sagen: Usability ist eine Form der Kommunikation, und wenn der Empfänger die Botschaft nur schwer versteht, trägt man als Absender dafür mit eine Verantwortung, dass man sich nicht verständlicher ausgedrückt hat.

5 Autor / Thema der Präsentation
Kommt darauf an Autor / Thema der Präsentation Entscheidungen für gute Usability sind immer Einzelfallentscheidungen, denn sie sind abhängig vom Anwendungsfall (und der Zielgruppe, technischen Rahmenbedingungen…) Nehme ich Radiobuttons oder Checkboxen? Wie groß mache ich das Eingabefeld? Wo positioniere ich es? Befülle ich es initial und wenn ja wie? Beispiel Eingabe Kreditkartennummer: 1 Feld für 16 Ziffern oder 4 Felder á 4 Ziffern? Checkbox „männlich“ Soll ein Mensch sein Geschlecht eingeben, sind 2 Radiobuttons „männlich“ und weiblich“ einzusetzen In einem Biologielabor, bei dem nur männliche Exemplare ausgewertet werden sollen, also nur die Informationen „männlich ja oder nein“ interessant ist, könnte eine solche Checkbox angemessen sein Eingabe Kreditkartennummer: Vorteile 1 Feld Motorisch einfacher und schneller handhabbar Copy&Paste der gesamten Nummer möglich 1 Feld kann sinnvoll sein, wenn z.B. in einem Call-Center tausende Kreditkartendaten an einem Tag eingetippt werden oder per Copy&Paste übernommen werden sollen Das Feld sollte damit umgehen können, dass ein User auch Leerzeichen oder Bindestriche zur Trennung der Blöcke eingibt Vorteile 4 Felder Besseres visuelles Feedback Hilfreich, wenn nicht so versierte Anwender die Nummer eingeben sollen, da die Aufteilung optisch der auf der Kreditkarte entspricht und Verwechslungen z.B. mit dem Inhabernamen reduziert werden Auch hilfreich, wenn die Daten zwar in einem Callcenter bulkweise eingegeben werden, aber daneben direkt die Sozialversicherungsnummer o.ä. erfasst wird, so dass Verwechslungen minimiert werden Hilfreich, wenn die Nummern nochmal geprüft werden sollen, weil es weniger fehleranfällig ist, jeweils 4 Ziffern zu prüfen, als 16 Aber Achtung: der nicht-IT affine Anwender wird i.d.R. mit der Maus ins nächste Feld wechseln, ein Techie ggf per Tab. Idealerweise wechselt der Fokus nach Eingabe der vierten Ziffer von alleine ins nächste Feld, fängt aber dann ein Tab ab, so dass der Techie dadurch nicht aus Versehen im übernächsten landet. Die größte Schwierigkeit für IT‘ler liegt m.E. darin, den „Schwierigkeitsgrad“ einzelner Controls einzuschätzen (siehe Backup 2) , Vorschlag dazu: z.B. mal die Großeltern beobachten, wie sie Eingabefelder bedienen

6 Autor / Thema der Präsentation
Autor / Thema der Präsentation Die regeln

7 User in Control & Form follows Function
Autor / Thema der Präsentation Der User ist immer der Herr über die Software, der Kapitän auf dem IT-Schiff dazu benötigt er Orientierung (Wo bin ich) Überblick (Was leistet die „Maschine“, wie reagiert sie) Möglichkeiten (Welche Optionen und Alternativen habe ich) Entscheidungshoheit (Aktionen aktiv ausführen können) Form follows Function Abbildung der Arbeitsprozesse (Reihenfolge von Arbeitsschritten, Häufigkeit in der Nutzung, Datenvolumen) Berücksichtigung der Zielgruppe (Kultureller Hintergrund, Erfahrungen) Berücksichtigung der IT-Constraints (Speicher, Display, Durchsatz) Diese Folie ist quasi die Management-Summary über die nachfolgenden beide Folien Die Software ist Dienstleister am Benutzer, nicht Bevormunder Ausnahmen gibt es Stand heute meines Wissens nur in sicherheitskritischen Bereichen (Raumfahrt, Flugzeug, Atomkraftwerk), obwohl auch da die abgeleiteten Prinzipien gelten (sogar noch stärker) Die hier magentafarben markierten Grundsätze sind die Allerwichtigsten, hier passieren Stand heute noch zu viele grundlegende Fehler, hier liegen die QuickWins, die noch dazu i.d.R. kostengünstig zu erreichen sind Die untere Abbildung zeigt eine Skizze zur Analyse von Arbeitswegen in der Küche, die Grundlage für das Design der sogenannten Frankfurter Küche, dem Vorläufer der Einbauküche, die auf Usability optimiert wurde.

8 EN ISO 9241-110 Grundsätze der Dialoggestaltung
Autor / Thema der Präsentation muss soll kann Erwartungskonformität Aufgabenangemessenheit Selbstbeschreibungsfähigkeit Steuerbarkeit Fehlertoleranz Lernförderlichkeit Individualisierbarkeit Die ersten drei Punkte sind essentiell. Hier werden die grausamsten Schäden angerichtet, aber hier können auch die günstigsten und einfachsten QuickWins erzielt werden. Fehler in diesen Punkten führen dazu, dass auch der unbedarfte Benutzer bemerkt, dass die Usability schlecht ist. Erwartungskonformität = Die Software verhält sich, wie der User das erwartet Hier spielt maßgeblich die Erfahrung mit ein, die der User bereits gemacht hat: in der echten Welt: Nutzung von Metaphern wie Mülleimer, Play-Taste in anderer Software: Strg-S speichert, es wäre fatal, wenn Strg-S löschen würde in eigener Software: Konsistenz in sich!!! Gleiche Dinge müssen gleich heißen und gleich Aussehen, Ungleiche Dinge müssen ungleich heißen und aussehen. Z.B. Reihenfolge von Menüpunkten auf jeder Maske gleich. Menüpunkt heißt genauso wie die Maske Die Erfahrung des Users kann sogar alle anderen Aspekte der Usability „überstimmen“, insbesondere bei regelmäßig und häufig ausgeführten Aktionen. (Beispiel schlechte Microsoft-Usability nachahmen) Besser gut „geklaut“ als schlecht selbst ausgedacht: Wie macht Amazon das, Apple, Google, Facebook… Aufgabenangemessenheit = Aufgabe lässt sich effektiv und effizient lösen Was ist überhaupt die Aufgabe, was muss der User, was kann er, was braucht er nicht/soll er nicht tun? Reihenfolge der Arbeitsschritte unterstützen Muss-Aufgaben primär unterstützen, Nice2Haves in Randbereiche (unten, rechts, zusätzliche Dialoge…) Arbeitserleichterungen durch sinnvolle Defaults Selbstbeschreibungsfähigkeit = Screen erklärt sich selbst Orientierung, Navigation: wo bin ich, wie bin ich hierhergekommen, was passiert wenn ich da klicke (Schlimmes Negativbeispiel: persönlich angepasste Menüs bei Microsoft) Namen, Constraints: was muss ich in das Feld eintragen, in welchem Format, was ist ein Pflichtfeld? Hilfe? Eine gute Hilfe ist wichtig, aber NICHT die Selbstbeschreibung, also kein Ersatz für alle anderen Usability-Grundsätze. Für selten genutzte, komplexe oder riskante Sachverhalte ist die Nutzung von Hilfetexten nicht vermeidbar. Sind einfache Basisaufgaben nicht ohne Lesen der Hilfe zu bewältigen, ist das Produkt nicht usable!!! Die nächsten 2 Punkte sind definitiv auch wichtig, hier ist der User ja nach Tätigkeit aber leidensfähiger (kann durch Gewohnheit ausgeglichen werden)

9 Platzhalter für Foliennotizen der vorhergehenden Folie
Autor / Thema der Präsentation Steuerbarkeit = User trifft die Entscheidungen Werte werden nicht bei eintippen persistent gespeichert, sondern wenn der User auf „Speichern“ klickt In einer Wizard-Steuerung kann der User auch wieder zurück gehen, jederzeit abbrechen Der User hat die Freiheit wann er sich wohin bewegt: er wird z.B. nicht durch eine fehlgeschlagene Validierung an ein Feld gekettet, so dass er erst einen korrekten Wert eingeben darf, bevor er auf Abbrechen drücken darf Langlaufende Prozesse können abgebrochen werden Fehlertoleranz = Fehler vermeiden oder auflösen Das System soll nicht abstürzen, z.B. wenn der User in ein Zahlenfeld einen Text eingibt Den User gar nicht erst in einen Fehler hineinlaufen lassen. Z.B. Dateiupload: der User wählt eine Datei von 50MB, drückt „Hochladen“, das System fängt an die Datei hochzuladen, der User bekommt nach 5 Minuten den Hinweis, dass die Datei zu groß sei Der User soll Fehlermeldungen bekommen, die ihm helfen, die Situation aufzulösen Aber Achtung bei automatischer Fehlerkorrektur, das ist i.d.R. nur was für Usability-Profis Klassiker für Entwickler: definierter Zustand und Transparenz für den User bei Abbruch der Netzwerkverbindung oder Session Timeout Diese beiden Punkte sind i.d.R. aus meiner Sicht nur nice to have Lernförderlichkeit = System lehrt den Umgang mit sich Typisch: Guided Tours und Anzeige von Tipp-Dialogen Auch: Konfigurationsmöglichkeiten für Fortgeschrittene in einem „Erweitert“-Bereich eines Dialoges anzeigen DONT: persönlich angepasste Menüs á la Microsoft, bei dem selten genutzte Menüpunkte an anderer Position angezeigt und per Default ausgeblendet werden. Eine Katastrophe für die Orientierung von Nutzern Zumindest im Massenmarkt nice2have und etwas überholt und was über das bereits Bekannte hinausgeht nach der Maßgabe: wenn man nicht Apple ist, sollte man sich nicht daran versuchen. Es ist nur etwas für Usability-Experten. Wenn man alle anderen Usabilitypunkte gut macht, lernt der User von alleine alles was er braucht. Sinnvolle Ausnahmen sind Stand heute Simulatoren und Analysefeedback in sicherheitskritischen Bereichen, z.B. im medizinischen Bereich. Individualisierbarkeit = System lässt sich an Bedürfnisse anpassen Typisch: Konfigurationsdialoge Spracheinstellungen Integration von Plugins

10 Autor / Thema der Präsentation
Der Apple-Weg Grundprinzipien aus dem Buch Macintosh Human Interface Guidelines Autor / Thema der Präsentation User Control Gefühlte Stabilität Konsistenz Verzeihend Direkte Manipulation See & Point Modelessness (Zustandslosigkeit) Feedback & Dialog Metaphern Wysiwig Ästhetische Integrität Zielgruppe kennen und verstehen Accessibility Mein Stand dazu aus dem gleichnamigen Buch von 1992 enthält m.E. im Grunde alles, was man auch heute noch wissen muss, um gute Usability zu gestalten. Ich habe mir erlaubt, die Begriffe eigenständig soweit gut verständlich möglich ins Deutsche zu übersetzen. Die heutigen Human Interface Guidelines, auf der Apple Homepage für jeden zugänglich, haben sich im Grunde nicht geändert, es sind nur einzelne Controls in der Beschreibung dazugekommen Aus Konsistenz wurde im Grunde das Mental Model Modelessness wurde in das Kapitel User Experience verlagert

11 Macintosh Human Interface Guidelines
Autor / Thema der Präsentation User Control Gefühlte Stabilität Konsistenz Verzeihend Direkte Manipulation See & Point Modelessness (Zustandslosigkeit)  Social Network Stream: Popup bei Klick auf die (2):   User Control Der Benutzer steuert die Software und nicht umgekehrt Das System handelt nach Anweisung des Users Es warnt ihn bei riskanten Dingen, verbietet sie aber nicht (Löschen, Deinstallieren..) Don‘t: (2001 Odysee im Weltraum) Dave: Open the pod bay doors, HAL. HAL: I'm sorry, Dave. I'm afraid I can't do that Gefühlte Stabilität (My home is my castle) Der Anschein von Stabilität gibt dem Benutzer das Gefühl von Sicherheit und Vertrauen, damit er sich mit der Anwendung nicht nur wohlfühlt, sondern sich auch überhaupt traut, gewisse Features auszuprobieren Beständigkeit Die Anwendung bietet eine klar erkennbare und begrenzte Sammlung an Objekten und Funktionen Sie sieht nicht bei jedem Start anders aus Sie bietet fixe Ankerpunkte (Logo, Menüleiste, Fußzeile) Gleichmäßigkeit Die Feature-Dichte ist gleichmäßig verteilt Objekte sind gleichmäßig verteilt Performance verhält sich gleichförmig Robustheit Keine Systemfehler (Technical Exceptions) Alte Fehler dürfen nicht plötzlich wieder auftauchen Konsistenz Erlerntes Verhalten hat den stärksten Effekt hinsichtlich Erwartungskonformität und Usability insgesamt. Erlerntes Verhalten entsteht nicht nur durch frühere Erfahrungen, sondern auch im Arbeiten mit der Anwendung. Konsistenz zu dem was Nutzer bereits kennen und in sich selbst Was gleich aussieht, soll sich auch gleich verhalten. Was sich gleich verhält, soll auch gleich aussehen Beispiel: Ist die Menüleiste auf einer Seite links, so soll sie nicht auf einer anderen Seite rechts sein. Und die Menüpunkte sollen nicht die Reihenfolge wechseln In Windows-Welten steht der Abbrechen-Button immer rechts Strg-S steht für immer Speichern

12 Platzhalter für Foliennotizen der vorhergehenden Folie
Autor / Thema der Präsentation Verzeihend Eine Anwendung ist „verzeihend“, wenn der User Arbeitsschritte wieder rückgängig machen kann oder gewarnt wird, bevor er eine Aktion ausführt, die zu Datenverlust führen kann. Eine verzeihende Anwendung ermutigt den User, die Funktionalität zu nutzen und zu erkundschaften. WICHTIG: Abbrechen-Button Warn-Hinweise vor kritischen Aktionen, Undo/Rückgängig, Kein direktes Speichern (Überschreiben) von Werten ohne Interaktion Beispiel: wie wäre es, wenn Excel jede Änderung in einer Zelle direkt speichert und damit den Wert in der Datei überschreibt Wichtig hier auch die Konsistenz: führt eine Aktionen zu Rückfragen (z.B. Löschen), so sollte die gleiche Aktion auch in anderem Kontext immer Rückfragen. Erfolgt z.B. auf einer Seite bei Überschreiben eine Rückfrage, so muss diese immer auch auf allen anderen Seiten beim Überschreiben kommen. Aber: gemäß „The boy who cried wolf“: Rückfragen sparsam einsetzen und nur dann, wenn unbedingt notwendig. Exzessive Nutzung führt dazu, dass der User die Meldung gar nicht mehr durchliest, sondern sofort wegklickt. Beispiel für ein diesbezügliches „don‘t“ sind die Rückfragen der Benutzerkontensteuerung bei Microsoft Vista Schlechte Performance ist „nicht verzeihend“, weil jede Aktion die zu lange dauert, dem User „Schmerzen“ (wie ein kleiner Stromschlag) verursacht und ihn entmutigt, auch mal was auszuprobieren (anzuklicken). Der User wird sich dann auch keine Orientierung verschaffen. Direkte Manipulation (Simulation der Haptik) Direkte Manipulation bedeutet, dass das System dem User visuelles (und ggf. akustisches) Feedback gibt, während dieser eine Aktion ausführt und als Bestätigung nach Ausführung der Aktion Beispiele: Button erscheint während des Klickens optisch eingedrückt. Während des Drag&Drop einer Datei bewegt sich diese mit der Maus mit. Ausschneiden (Ctrl-X) auf eine Datei lässt diese nur noch schemenhaft erscheinen. Nach leeren des Papierkorbs zeigt das Icon einen leeren Papierkorb Dies gibt dem User Sicherheit darüber, was er gerade tut und ob sein Handeln erfolgreich war Negativ-Beispiele: Verzögerte Reaktionszeiten bei Touchscreens, bei Handy-Rotationen, bis zum Erscheinen einer Sanduhr Schlechte Performance kann dem User das Gefühl geben, es sei etwas kaputt, See-and-Point (Substantiv-dann-Verb) Voraussetzung 1: Der User kann sehen, was er tut (tun kann) Voraussetzung 2: Der User kann auf das, was er sieht, auch zeigen Beispiel: Ich wähle ein Dokument und wähle für das Dokument die Aktivität Drucken. Ich sage nicht erst dass ich Drucken möchte und suche mir dann aus, welches Dokument ich drucken möchte. Drag & Drop setzt diese Regel implizit um, da das Ziel von Drag&Drop implizit die Aktion (also das Verb) beinhaltet. Modelessness (Zustandslosigkeit) Der Nutzer soll nicht in einem Zustand „gefangen“ sein, bis das System entscheidet, dass der Zustand beendet ist z.B. der Prozess in einer Wizard-Steuerung muss abbrechbar sein z.B. ein Spiellevel muss vor beenden abbrechbar sein Langläufige Threads müssen abbrechbar sein Verschiedene Aufgaben sollten gekapselt und losgelöst voneinander zu bearbeiten sein Modale Dialoge nur selten einsetzen, das gilt auch für unkritische Statusrückmeldungen Für Entwickler: dass eine Webapplikation sich den Zustand in Form einer Session für den Nutzer „merkt“, ermöglicht diesem erst das empfundene zustandslose Surfen, d.h. er ist nicht gezwungen „Ware anschauen, in den Warenkorb legen, bezahlen“ unmittelbar hintereinander durchzuführen, er ist nicht in der Abhängigkeit dieser Arbeitsschritte gefangen

13 Macintosh Human Interface Guidelines
Autor / Thema der Präsentation User Control Gefühlte Stabilität Konsistenz Verzeihend Direkte Manipulation See & Point Modelessness (Zustandslosigkeit) Feedback & Dialog Metaphern Wysiwig Ästhetische Integrität Zielgruppe kennen und verstehen Accessibility Das ist was für Grafikdesigner! Farbenlehre Proportionen Licht & Schatten Typographie Feedback & Dialog Den User so genau wie möglich im Bilde halten, was gerade passiert oder nicht (und warum nicht, wie es weiter geht) Mauszeiger (Pfeil, Hand, Verschiebekreuz), Wartecursor, Fortschrittsanzeige, Erfolgsbestätigung („322 Datensätze wurden gelöscht“) Aussagekräftige Fehlermeldungen, die dem User weiterhelfen, das Problem zu beheben und zukünftig zu vermeiden. Z.B. statt „Dokument konnte nicht gedruckt werden“ besser „das Dokument konnte nicht gedruckt werden, es befindet sich kein Papier im Drucker. Nach Einlegen des Papiers wird der Druckvorgang automatisch fortgesetzt.“ Metaphern Wo immer es bereits etablierte Metaphern gibt, sollte man diese auch verwenden. Es ist nicht notwendig, dass die Funktionalität der Software 1:1 der Funktionalität in der Realität entspricht. Große Vorsicht bei der Einführung neuer Metaphern, auch das ist nur was für fortgeschrittene Designer WICHTIG: niemals eine etablierte Metapher mit einer völlig anderen Bedeutung verwenden Wysiwig Typische Beispiele: Druckvorschau, Auswahl Schriftart für Text Aber auch Features nicht verstecken Keine Funktionen, die ausschließlich über Tastaturkürzel erreichbar sind Wenn „verstecken“, dann mit einfach zu findendem Zugang (Beispiel „erweitert“-Button im Dialog „Suchen und Ersetzen“ von MS Word) Deaktivieren (disable) ist i.d.R. besser als nicht anzeigen (hide) Ein Feld oder einen Bereich je nach Kontext unsichtbar zu setzen, führt in den meisten Fällen zur Desorientierung des Users. Zum einen erkennt er den Bereich ggf nicht wieder, zum anderen sucht er vielleicht aktiv nach den fehlenden Objekten „wo war das denn“. Deaktivierte Bereiche belassen die Maske in ihrem vertrauten Layout und geben visuelles Feedback, dass ihr Content kontextabhängig ist („hier bin ich, es ist alles gut, nur jetzt noch nicht“). Hiden kann sinnvoller sein, aber man kann leicht mehr Fehler als Nutzen generieren. Ästhetische Integrität = sieht gut aus Falls kein Designer zu Hand ist: weniger ist mehr, je konservativer je besser: Wenig Farben, Keine eigene Bildsprache einführen Ein einheitliches Bild wirkt professionell und schafft Vertrauen für die ganze Applikation insgesamt! Zielgruppe kennen und verstehen Zielgruppe identifizieren, Szenarien für einen typischen Tag, Zielgruppe beobachten, fragen und zuhören Randbedingungen der Zielgruppe identifizieren (Bildschirmgröße, Rechnerperformance, Bandbreite aber auch Arbeitsatmosphäre (ungestört oder viele Ablenkungen. Lange Zeiten am Stück oder oft kürzere Phasen) Mal den eigenen Eltern oder Kindern am Rechner über die Schulter schauen Accessibility (Füllt min. einen eigenen Vortrag) Barrierefreiheit (Schriftgröße, Vorlesbarkeit, …) Internationalisierung (Textlängen, Leserichtung, kulturelle Einschränkungen)

14 Autor / Thema der Präsentation
Allgemeinwissen Autor / Thema der Präsentation Gehirn Der Mensch kann sich 7 +/- 2 Dinge im Kurzzeitgedächtnis merken. Der Lesefluss in der westlichen Welt erfolgt von links oben nach rechts unten. Lexikalisches „scannen“ ist erlerntes Verhalten. Design Serifen-Schriften eignen sich für Print, serifenlose für Screen. Beide sollte man nie mischen. Schriftgrade sollten (je nach Größe) um min. 2 auseinanderliegen Rot ist Signalfarbe für Achtung und Problem. Kommunikation „gesagt” ist nicht gehört…, „gehört” ist nicht verstanden… Was in einem Dialogtext steht, wird ungelesen oder unverstanden weggeklickt The boy who cried wolf: der 20ste Warnhinweis wird mit Sicherheit nicht mehr Ernst genommen Information hiding by information overflow Kulturelle Veränderungen Heutzutage wird immer mehr gescannt und immer weniger gelesen, das Kurzzeitgedächtnis wird immer schlechter! Dafür stört sich niemand mehr daran, eine Suche zu verwenden Dies sind hier nur die absolut minimalen Grundlagen, die man kennen sollte. Jedes der Wissensgebiete füllt selbst mehrere Bücher

15 Autor / Thema der Präsentation
Autor / Thema der Präsentation Vorgehensweise

16 Autor / Thema der Präsentation
Quick Wins Autor / Thema der Präsentation Am Beispiel Telekom Social Network: Orientierung Einheitliche Sprache Storyboard Auf welchen Wegen komme ich nach… Arbeitsabläufe Was mache ich als erstes, am häufigsten, am wichtigsten? Eine Gruppe ist ein Ort? Wie erkenne ich, dass ich jetzt in einer Gruppe bzw. in einem Ort bin? Eine saubere einheitliche Wortwahl bringt den allergrößten Effekt in Sachen Usability, weil eine inkonsistente Sprache die Orientierung unmöglich macht Beispiel Telekom Social Network (Beta-Version, basierend auf Jive): Wie komme ich nochmal zu meinen Gruppen? Ein Storyboard (wie komme ich von welchem Screen zu welchem anderen Screen) deckt Inkonsistenzen und Redundanzen auf Arbeitsabläufe Das Bild zeigt die Startseite in einer Gruppe in ihrer Default-Konfiguration Wenn ich das erste Mal eine fremde Gruppe betrete, interessiert mich vielleicht die Übersicht, ansonsten nie. Ich würde immer bei Inhalten starten wollen und muss dazu nochmal extra klicken. Die Übersicht gibt inhaltlich nicht mal eine Übersicht über die Gruppe, das erste was ich in der Gruppe sehe, sind Links auf andere Gruppen. Wenn ich das nicht kapiere, werde ich aus der Gruppe wieder herausgeführt, bevor ich drin war. Verwandte Gruppen sind bestimmt nicht der erste und häufigste Arbeitsschritt, wenn ich eine Gruppe betrete Und zur Orientierung: woran erkenne ich überhaupt, dass ich gerade in einer Gruppe bin? Wie bin ich dahingekommen?

17 Autor / Thema der Präsentation
Quick Wins Autor / Thema der Präsentation Der User arbeitet nicht linear Nicht nur von a nach b, sondern auch von b nach a Berücksichtigen, welche Situationen alle von der Außenwelt hervorgerufen werden (Störung durch Telefonanruf, Mittagspause, paralleles Arbeiten…) Browsen vs Suchen Layout verifizieren Augen kneifen Auf gaaaaaanz großer Leinwand vorstellen Unter Stress schnell entscheiden Funktionale Themen in allen Anwendungen Wenn Neu, dann Ändern & Löschen, dann Suchen/Filtern/Selektieren Initiales betreten (ggf mit Information von anderer Seite) oder schon mal dagewesen Pflichtfelder, Defaultwerte Der User wird anders arbeiten als ich es erwartet habe! Auch wenn ich die Maske noch so gut nach Arbeitsablauf ausgerichtet habe, wird es passieren, dass der User die Felder in einer anderen Reihenfolge bearbeitet als gedacht Es kann passieren, dass er aus Versehen eine Aktion auslöst, die nicht geplant war Browsen vs Suchen: Es gibt Menschen, die legen ihre Daten in ein großes Körbchen und greifen am liebsten mit einer ausgefeilten Suche auf ihre Daten zurück. Dann gibt es Menschen, die legen ihre Daten strukturiert in viele verschiedene Körbchen. Beide Gruppen finden i.d.R. die Arbeitsweise der anderen Gruppe schlecht und bieten sie daher nicht an. Layout verifizieren Augen zusammenkneifen und unscharf schauen hilft einem, die Ästhetik und Balance der Anordnung zu erkennen Vorstellen, dass man selbst kaum größer als die Computermaus ist und der Bildschirm so groß wie eine Kinoleinwand, hilft einem nachzuvollziehen, wie motorisch aufwändig das Layout und die einzelnen Controls sind und auch, wie übersichtlich zusammengehörige Elemente gruppiert sind Unter Stress schnell entscheiden, zeigt wie intuitiv verständlich das Layout ist, aber auch wie verzeihend Funktionale Themen Wenn man Daten neu anlegen kann, muss man sie immer auch ändern und löschen können, da man einfach Blödsinn angelegt haben kann, der noch nirgends referenziert wird Wenn man Daten ändern und/oder löschen können muss, muss man sie dazu auch auswählen können, also wird eine Liste, Suche … benötigt Mit welchen Daten wird eine Maske beim Betreten befüllt Pflichtfelder erhöhen nicht die Datenqualität (verstoßen gegen die Modelessness und gegen User Control) Unterscheiden, welche Felder zwingend zum Speichern, welche zur weiteren Verarbeitung notwendig sind. Zu viele oder die falschen Pflichtfelder führen dazu, dass ein Benutzer viele Zwischenergebnisse nicht erfassen kann, solange ihm nicht alle Informationen vorliegen. Oder er quasi in „Notwehr“ Datenmüll in den Pflichtfeldern eingibt Defaultwerte: Achtung, hier können komplexe Automaten entstehen, insbesondere bei Abhängigkeiten mit anderen Felder Beispiel: 2 Kalenderpicker für Start- und Endetermin Nach Setzen von Start wird Ende auf Start+1 gesetzt Was wenn Ende zuvor schon gesetzt worden war, wird das Überschrieben? Was wenn der Wert in Ende wieder gelöscht wird, wird dann beim nächsten Mal Setzen des Starts Ende wieder auf Start+1 gesetzt? Wenn Ende gesetzt wird, wird Start dann auf Ende-1 gesetzt, wenn Start leer war? Noch komplizierter werden die Fälle, wenn die Felder keine Pflichtfelder sind

18 Dauerhafte Arbeitsweise
Autor / Thema der Präsentation Im Projekt 1. Analyse Zielgruppe definieren Anwendungsfälle definieren Technische Rahmenbedingungen definieren Zielgruppe befragen 2. Design Simple Scribbles Wireframes, Sitemap, Storyboard Detail-Layouts pro Maske 3. Auswertung Usability Labor Offene Beta Auswertung der Hotline Ongoing – Sinne schärfen Andere Anwendungen analysieren Teilnahme Usability Test Anfänger beobachten Hotline betreuen Usability bewerten Wo bin ich, wie bin ich hierher gekommen, wo kann ich hin? Wo finde ich…? Verstehe ich was ich tun kann, soll? Sind Objekte logisch gruppiert? Aber: Anzahl Mausklicks? Zielgruppe: Zielgruppe kann auch „jeder“ sein. Aber je breiter die Zielgruppe, desto schwieriger das Design. Gute Usability beginnt mit Papier und Bleistift. Die ersten Entwürfe sollte man nur schnell kritzeln. Die kann man auch zusammenknüllen, wegwerfen und völlig neu anfangen. Denn wenn man sich erst mal mühsam mit Software einen Screen gebastelt hat, mag man den nicht mehr völlig über den Haufen werfen und neigt dazu, nur noch kleinere Korrekturen zu machen. Layout pro Maske: Jedes Feld wird auf jeder Maske exakt festgelegt. (Position und ControlTyp), alles ist eine Einzelfallentscheidung Anzahl Mausklicks sind häufig ein guter Indikator, aber nicht immer sind mehr Mausklicks zwingend schlechter (Beispiel Dropdown vs Eingabefeld)

19 Autor / Thema der Präsentation
Zur Übung Autor / Thema der Präsentation Kreditkarte: Feld Inhabername aus Benutzername vorausfüllen ja oder nein? Gültig bis als Eingabe oder Dropdown? Dropdown zur Auswahl eines Landes: In welcher Sprache den Ländernamen anzeigen? Woher die Sprache ermitteln? Sortierung? Inhabername: Wie wahrscheinlich ist es, dass der Benutzername ein anderer ist als der Inhaber der Karte? Beispiel: Applikation für Kinder, Benutzer ist das Kind, Bezahlender ein Elternteil Ist es ein Shop, in dem es wahrscheinlich ist, dass der Kunde mit der Karte des (Ehe)Partners bezahlt? Gültig bis: aufgrund der beschränkten Ausgabezeiträume ist ein solches Dropdown in der Länge gerade noch beherrschbar. Ein Eingabefeld (oder zwei) wären hinsichtlich ihres visuellen Feedbacks, in welcher Form das einzugeben ist (mm/jj…) auch nicht schön Da beide Lösungen nicht toll aber auch nicht schlimm sind, würde ich mich für das Drowdown entscheiden. Das spart Validierungsaufwände und auch Frust beim Anwender wenn es beim Eingabefeld zur Fehlerfall kommt Die Eingabe des eigenen Geburtsjahres ist übrigens grauenhaft als Dropdown, da gelten diese Argumente ja nicht. Die Liste ist länger, es muss mehr gescrollt werden und der Benutzer ist auch weniger unsicher bezüglich des korrekten Formats Dropdown zur Landesauswahl: Wähle ich ein Land als Urlaubsziel, wünsche ich mir alle Ländernamen in meiner Muttersprache Gibt ein Callcenter-Agent Herkunftsländer an, muss ggf jedes Land in jeweils seiner Sprache sein Gilt die Sprache des Users, woher bekomme ich die? Bin ich ein Fre er, sollte ich beachten, dass die Nutzung im Internetcafe zum Anwendungsfall gehört und die Browsersprache nicht unbedingt die Sprache des Nutzers ist Sortierung: immer lexikalisch. Aber: packe ich die häufigsten Länder oder die zur Sprache passenden an den Anfang der Liste? Oder selektiere ich ein Land in der Liste schon vor?

20 Wie teuer ist gute Usability?
Autor / Thema der Präsentation Ordentliche Usability kostet nicht mehr! Orientierung: Analyse der Laufwege in einem Storyboard führt häufig dazu, dass Navigationswege und Masken und Statusverwaltungen wegfallen => weniger Implementierungsaufwand Einheitliche Begriffe und Positionierungen sind kostenneutral Je Highend, desto teurer in der Implementierung Elegante Validierungen mit passgenauen Fehlermeldungen Intelligente Vorbelegungen mit Fallunterscheidungen Langlaufende Threads sauber abbrechbar Korrekte Anzeige bei Progressbars Neue Icons, neue Haptik

21 Barrierefreiheit – Denken wir auch an diese Nutzer?
Gehörlos Blind Schlecht Sehen Schlecht Sehen & Schlecht Hören Rot-Grün- Farbenblind Motorisch eingeschränkt Lernschwäche

22 Barrierefreiheit – Behindert ist man nicht, behindert wird man:
Äußert sich in der Nutzung z.B.: Einstellung Große Schriftart Vorlese-Software (Screenreader) Bildschirmlupe Nur Tastatur, keine Maus Langsameres Arbeiten Typische Software-Schwächen: Layouts für den Screenreader schlecht erkennbar Fehlende Alt-Texte Text-Grafik statt Text: lässt sich nicht vergrößern Information nur in Farbe, Schwacher farblicher Kontrast Umständliche Tabulator-Reihenfolge Fehlende Scrollbars bei Größenänderungen

23 Autor / Thema der Präsentation
Mehr im Netz Autor / Thema der Präsentation Fit für Usability (Fraunhofer) OS X Human Interface Guidelines iOS Human Interface Guidelines Usability Pattern Wikipedia: ISO-Norm Barrierefreiheit Barrierefreies Internet (Aktion Mensch) Barrierefreies Webdesign W3C Kurztipps Tools Scribbles erstellen mit Balsamiq

24 Backup 2 – Eigenschaften von controls
Autor / Thema der Präsentation Backup 2 – Eigenschaften von controls Die nachfolgenden Folien sollen dazu anregen sich Gedanken zu machen, wie handhabbar verschiedene Controls für den Benutzer sind. Es wird nur eine Auswahl an Controls und keine vollständige Übersicht dargestellt

25 Autor / Thema der Präsentation
Controls I Autor / Thema der Präsentation Eingabefeld Einfach und schnell zu bedienen Eingeschränktes visuelles Feedback (durch Länge des Feldes, Blasser Hint auf Inhalt) Dropdown Komplex und langsam zu bedienen Sehr gutes visuelles Feedback Vereinfacht Validierung Benötigt nicht viel Platz Schränkt Auswahl ein Listbox Mittelschwer aber schnell zu bedienen (wenn nicht zu viele Einträge) Benötigt viel Platz Visuelles Feedback ist insbesondere für nicht IT-affine User sehr wichtig. Aber auch bei Eingaben mit Verwechslungsgefahr Schnelle Bedienung ist für häufige Tätigkeiten wichtig. Beides ist im Einzelfall gegeneinander abzuwägen. Eingabefeld Bei mehrteiligen Feldern sollte der Fokus automatisch zum nächsten Teil-Feld springen (z.B. Seriennummer, Kreditkarte). Hier beachten, dass ein Techie/Nerd womöglich die Tab-Taste nutzt Dropdown Es müssen mehrere Mausklicks ausgeführt werden, der mit der Maus zu treffende Bereich ist relativ klein. Manuelle Eingabe nur Zulassen, wenn diese zur Auswahl in der Liste verwendet wird, aber nicht um die Liste zu erweitern! Achtung: bei nicht-Pflichtfeldern muss das Dropdown auch immer einen leeren Eintrag haben, damit der User sich nach einer Selektion wieder umentscheiden kann. Listbox Deselektieren und Multiselekt sind nur für fortgeschrittene User. Multiselekt ist nicht geeignet, wenn in der Listbox nicht alle Items auf einen Blick ohne Scrollen sichtbar sind und die Selektion direkt wirkt. In diesem Fall 2 Listboxen benutzen (Auswahlliste und Liste für Ausgewählt), bei sehr vielen Items Suche und Suchergebnistabelle oder Warenkorb-Workflow

26 Autor / Thema der Präsentation
Controls II Autor / Thema der Präsentation Scrollrad Mittelschwer zu bedienen (wenn nicht zu viele Einträge) Sehr gutes visuelles Feedback Vereinfacht Validierung Benötigt relativ viel Platz Erschwert „Browsen“ bei abhängigen Daten Schränkt Auswahl ein Checkbox / Radiobuttons Einfach und schnell zu bedienen Gutes visuelles Feedback Hängt sehr stark von Beschriftung ab Nur für geringe Anzahl geeignet Scrollrad besser als Listbox wenn natürliche Sortierung und alle Optionen verständlich ohne alle Einträge angeschaut zu haben nur genau ein Eintrag selektiert wird Nicht zu weit gescrollt werden muss, z.B. Datum: bei Fahrplanauskunft des Nahverkehrs vermutlich meistens heute oder morgen, gut. Zur Auswahl eines Datums dass viele Jahre in der Vergangenheit oder Zukunft liegt, nicht gut. Wenn das Scrollrad abhängige Daten hat (z.B. als Navigationsleiste), wird das Browsen erschwert, da mit jedem Wechsel die abhängigen Daten neu geladen werden. Daher unbedingt den Wechsel erst mit Mouserelease (und nicht Mousedown) vollziehen Checkbox Für verschiedene thematisch zusammengehörende aber voneinander unabhängige Optionen. Eine Checkbox kann ein äquivalent für 2 Radiobuttons sein, aber nur wenn der eine Zustand die Negation des anderen ist. (männlich – nicht männlich?) Es sollten i.d.R. nicht mehr als 5 Checkboxen gruppiert sein. Je nach Anzahl auch nebeneinander möglich. Radiobutton Es kann immer nur ein Radiobutton in einer Gruppe angeklickt sein. (ja oder nein) Es sollten i.d.R. nicht mehr als 5 Radiobuttons gruppiert sein.

27 Autor / Thema der Präsentation
Controls III Autor / Thema der Präsentation Datepicker Mittelschwer und langsam zu bedienen Sehr gutes visuelles Feedback Benötigt wenig Platz (Ansteuerung über Icon) Tabelle Sehr schnell zu bedienen Benötigt sehr viel Platz Schlechtes visuelles Feedback Relativ komplex zu programmieren / validieren Datepicker Immer nur als Ergänzung zu einem Eingabefeld Sollte mit einem sehr sinnvollen Wert vorbelegt sein Gut für „Heute“ oder Termine in naher Zukunft/Vergangenheit oder um sich an einem Wochentag zu Orientierung (der letzte Sonntag…) Schlecht für Datum, das weit in Vergangenheit oder Zukunft liegt (z.B. eigenes Geburtsdatum), wenn das nicht schon sinnvoll vorbelegt werden kann Tabelle Für Datenbearbeitung (also nicht nur Anzeige): Nur für komplexe Anwendungen mit häufiger Nutzung gut geeignet. Auch die reine Anzeige von Daten ist für nicht erfahrene Nutzer komplex. Dann prüfen, ob man auf wenige Zentrale Spalten reduzieren kann und die anderen Werte in eine zusätzliche Detailansicht (zum Listenmaster) auslagert Sollte immer einen HeaderSort bieten Es ist schwer erkennbar, was in welcher Zelle eingegeben werden darf. Ob ein bestehender Wert überschrieben wurde Wo undo greift Was sich beim Speichern ändert Wie wird eine neue Zeile erzeugt …

28 Autor / Thema der Präsentation
Controls IV Autor / Thema der Präsentation Explorer/TreeView Komplex und langsam zu bedienen Mittelmäßiges visuelles Feedback Baumansicht für reine Navigation sehr gut geeignet Karteireiter Einfach zu bedienen (wenn nicht zu viele Einträge) Sehr gutes visuelles Feedback Nur zur Gruppierung zusammengehöriger Elemente. Riskant, da bei falschem Gebrauch Orientierung erschwert. Explorer Die Baumansicht sollte im Baum außer Navigation besser keine Funktionen anbieten (umbenennen, kopieren, löschen, verschieben), die Fehlerquellen sind hier zu vielseitig In der Microsoft Exploreransicht ist insbesondere die Orientierung schlecht gelöst. Ist der Fokus im rechten Bereich, ist nicht immer optisch deutlich genug erkennbar, wo im linken Baum man sich befindet. Das sollte man bei eigener Implementierung optisch besser hervorheben! Im Beispiel ist im rechten Bereich der Inhalt von Program Files dargestellt, im linken Baum der Ordner Empirum Agent geöffnet Ein umfangreicher tief geschachtelter Baum sollte die Möglichkeit anbieten, alle Ebenen auf einmal zu schließen oder zu öffnen Karteireiter In einer Navigations-Hierarchie entweder nur auf Blattebene verwenden oder nur auf oberster Ebene verwenden. Verschachtelte Karteireiter sind komplex in der Orientierung

29 Autor / Thema der Präsentation
Controls V Autor / Thema der Präsentation Menü Mittelschwer und mittellangsam zu bedienen (je nach Schachtelungstiefe) Mittelgutes visuelles Feedback Als obere Navigationsleiste: Gut für Orientierung, guter Anker für gefühlte Stabilität Kontextmenü Komplex zu bedienen Sehr Gutes und Schwaches visuelles Feedback zugleich Toolbar Einfach und schnell zu bedienen Visuelles Feedback hängt sehr stark vom Icon ab Menü Konsequent 3 Punkte-Bedeutung („Ellipse“)einsetzen Tastatur-Shortcuts wo sinnvoll, gängige Shortcuts konsistent wiederverwenden (Strg-S, -C, -V, -X, F5, F1…) Maximal 2 Verschachtelungsebenen Sinnvoll gruppieren, Trennlinie nutzen Hilfe immer ganz rechts Icons eher vermeiden Disablen, statt Hiden. Immer feste Position Kontextmenü Man muss damit rechnen, dass die viele User das Kontextmenü nie zu Gesicht bekommen. Nur Optionen, die sich so auch im Menü wiederfinden, keine exklusiven Punkte, die es nur hier gibt! Maximal 1 Verschachtelungsebene Wirklich nur eine sinnvoll reduzierte Auswahl und nicht alles, was man in diesem Kontext irgendwann mal gebrauchen könnte Gut für die Lernförderlichkeit (was kann ich hier alles machen), wenn die Auswahl gut gewählt wurde Toolbar Nur für Werkzeuge Weniger ist mehr Am Besten für Aktionen, die unmittelbar ausgeführt werden und nicht einen Dialog erfordern Jedes Tool benötigt zwingend einen Tooltipp Direkt unter Menüleiste oder auf der linken Seite