Transcript Usability

Usability
Heidi Tilliger, Bremen 23.04.2013
Gebrauchstauglichkeit (englisch usability) bezeichnet nach EN ISO 9241-11
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.
Usability - 23.04.2013
Seite 2
Agenda

Was ist (gute) Usability

User Experience

Die Regeln (Grundprinzipien)

User Stories

Vorgehensweise

Testlabor

Grafikdesign
Usability - 23.04.2013
Seite 3
Usability ist KEINE Geschmackssache

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



Usability - 23.04.2013
Seite 4
Kommt darauf an

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
Usability - 23.04.2013
4 Felder á 4 Ziffern?
Seite 5
DIE REGELN
Usability - 23.04.2013
Seite 6
User in Control & Form follows Function
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



Usability - 23.04.2013
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)
Seite 7
EN ISO 9241-110 Grundsätze der Dialoggestaltung
muss
soll

Erwartungskonformität

Aufgabenangemessenheit

Selbstbeschreibungsfähigkeit

Steuerbarkeit

Fehlertoleranz
kann

Lernförderlichkeit

Individualisierbarkeit
Usability - 23.04.2013
Seite 8
Der Apple-Weg
Grundprinzipien aus dem Buch Macintosh Human Interface Guidelines

User Control

Feedback & Dialog

Gefühlte Stabilität

Metaphern

Konsistenz

Wysiwig

Verzeihend

Ästhetische Integrität

Direkte Manipulation

Zielgruppe kennen und verstehen

See & Point

Accessibility

Modelessness (Zustandslosigkeit)
Usability - 23.04.2013
Seite 10
Macintosh Human Interface Guidelines

User Control

Gefühlte Stabilität

Konsistenz

Verzeihend

Direkte Manipulation

See & Point

Modelessness (Zustandslosigkeit)
Usability - 23.04.2013
Social Network Stream:
Popup bei Klick auf die (2):



Seite 11
Macintosh Human Interface Guidelines

User Control

Feedback & Dialog

Gefühlte Stabilität

Metaphern

Konsistenz

Wysiwig

Verzeihend

Ästhetische Integrität
Das ist was für Grafikdesigner!
Farbenlehre
Proportionen
Licht & Schatten Typographie

Direkte Manipulation

Zielgruppe kennen und verstehen

See & Point

Accessibility

Modelessness (Zustandslosigkeit)
Usability - 23.04.2013
Seite 13
Allgemeinwissen

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
Usability - 23.04.2013
Seite 14
VORGEHENSWEISE
Usability - 23.04.2013
Seite 15
Quick Wins
Am Beispiel Telekom Social Network:

Orientierung
 Einheitliche Sprache
Eine Gruppe ist ein Ort?

Storyboard
 Auf welchen Wegen komme ich nach…
Wie erkenne ich, dass ich

jetzt in einer Gruppe bzw. in einem Ort bin?
Arbeitsabläufe
 Was mache ich als erstes,
am häufigsten,
am wichtigsten?
Usability - 23.04.2013
Seite 16
Quick Wins



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
Usability - 23.04.2013
Seite 17
Dauerhafte Arbeitsweise
Ongoing – Sinne schärfen
Im Projekt
1. Analyse
•
Andere Anwendungen analysieren
•
Zielgruppe definieren
•
Teilnahme Usability Test
•
Anwendungsfälle definieren
•
Anfänger beobachten
•
Technische Rahmenbedingungen definieren
•
Hotline betreuen
•
Zielgruppe befragen
2. Design
•
Simple Scribbles
•
Wireframes, Sitemap, Storyboard
•
Detail-Layouts pro Maske
3. Auswertung
Usability bewerten
•
Wo bin ich, wie bin ich hierher
gekommen, wo kann ich hin?
•
Wo finde ich…?
•
Usability Labor
•
Verstehe ich was ich tun kann, soll?
•
Offene Beta
•
Sind Objekte logisch gruppiert?
•
Auswertung der Hotline
•
Aber: Anzahl Mausklicks?
Usability - 23.04.2013
Seite 18
Zur Übung

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?
Usability - 23.04.2013
Seite 19
Wie teuer ist gute Usability?

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
Usability - 23.04.2013
Seite 20
Barrierefreiheit – Denken wir auch an diese Nutzer?
Gehörlos
Blind
Rot-Grün-
Schlecht Sehen &
Farbenblind
Schlecht Hören
Schlecht Sehen
Motorisch eingeschränkt
Lernschwäche
Usability - 23.04.2013
Seite 21
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
Usability - 23.04.2013
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
Seite 22
Mehr im Netz





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
Usability - 23.04.2013
Seite 23
BACKUP 2 –
EIGENSCHAFTEN VON CONTROLS
Usability - 23.04.2013
Seite 24
Controls I
 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)
Sehr gutes visuelles Feedback
Vereinfacht Validierung
Benötigt viel Platz
Schränkt Auswahl ein
Usability - 23.04.2013
Seite 25
Controls II

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
Usability - 23.04.2013
Seite 26
Controls III

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
Usability - 23.04.2013
Seite 27
Controls IV
 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.
Usability - 23.04.2013
Seite 28
Controls V

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
Usability - 23.04.2013
Seite 29