1 T-Systems International GmbH Telekom IT Heidi Tilliger, Dipl. Informatikerin (FH) Teamleiterin TSOAC-Fulfillment Cu3 Utbremer Str. 90, 28217 Bremen +49 421 3799-706 (Tel.) +49 171 7673070 (Mobil) E-Mail: heidi.tilliger@t-systems.com
2 Erkenntnisgewinn dieser Folie: wir alle erkennen schlechte Usability unstrittig auf den ersten Blick
3 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 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 E-Mail: 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 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
7 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 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 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 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 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 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 and-point (Substantiv-dann 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 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 ( disable) ) ist i.d.r. besser als nicht anzeigen (hide ( 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 Dies sind hier nur die absolut minimalen Grundlagen, die man kennen sollte. Jedes der Wissensgebiete füllt selbst mehrere Bücher
15
16 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 Der User wird anders arbeiten als ich es erwartet habe! Layout verifizieren Funktionale Themen 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. 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 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) Defaultwerte: 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 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 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 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 Freemailer, 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
21
22
23
24 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 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 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. Je nach Anzahl auch nebeneinander möglich.
27 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 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 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