Usability

Heidi Tilliger, Bremen 23.04.2013

Seite 2 Usability - 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.

Seite 3 Usability - 23.04.2013

Agenda

Was ist (gute) Usability

Die Regeln (Grundprinzipien)

Vorgehensweise

User Experience

User Stories

Testlabor

Grafikdesign

Seite 4 Usability - 23.04.2013

Wieso? Geht doch, Du musst doch nur… und dann … und dann…

Usability ist KEINE Geschmackssache

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

Seite 5 Usability - 23.04.2013

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 4 Felder á 4 Ziffern?

Seite 6 Usability - 23.04.2013

DIE REGELN

Seite 7 Usability - 23.04.2013

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 erOrientierung (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)

Seite 8 Usability - 23.04.2013

Erwartungskonformität Aufgabenangemessenheit Selbstbeschreibungsfähigkeit

Steuerbarkeit Fehlertoleranz

Lernförderlichkeit Individualisierbarkeit

EN ISO 9241-110 Grundsätze der Dialoggestaltung

muss

soll

kann

Seite 10 Usability - 23.04.2013

Der Apple-WegGrundprinzipien aus dem Buch Macintosh Human Interface Guidelines

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

Seite 11 Usability - 23.04.2013

User Control

Gefühlte Stabilität

Konsistenz

Verzeihend

Direkte Manipulation

See & Point

Modelessness (Zustandslosigkeit)

Macintosh Human Interface Guidelines

Social Network Stream: Popup bei Klick auf die (2):

Seite 13 Usability - 23.04.2013

Macintosh Human Interface Guidelines

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 & SchattenTypographie

Seite 14 Usability - 23.04.2013

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

Seite 15 Usability - 23.04.2013

VORGEHENSWEISE

Seite 16 Usability - 23.04.2013

Quick Wins

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?

Am Beispiel Telekom Social Network:

Seite 17 Usability - 23.04.2013

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

Seite 18 Usability - 23.04.2013

Dauerhafte Arbeitsweise

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?

Ongoing – Sinne schärfen• Andere Anwendungen analysieren

• Teilnahme Usability Test

• Anfänger beobachten

• Hotline betreuen

Im Projekt1. 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

Seite 19 Usability - 23.04.2013

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?

Seite 20 Usability - 23.04.2013

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

Seite 21 Usability - 23.04.2013

Barrierefreiheit – Denken wir auch an diese Nutzer?

Blind

Gehörlos

Schlecht Sehen

Schlecht Sehen &

Schlecht Hören

Rot-Grün-

Farbenblind

Motorisch eingeschränkt

Lernschwäche

Seite 22 Usability - 23.04.2013

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

Seite 23 Usability - 23.04.2013

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

Seite 24 Usability - 23.04.2013

BACKUP 2 – EIGENSCHAFTEN VON CONTROLS

Seite 25 Usability - 23.04.2013

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

Seite 26 Usability - 23.04.2013

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

Seite 27 Usability - 23.04.2013

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

Seite 28 Usability - 23.04.2013

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.

Seite 29 Usability - 23.04.2013

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