📖UI, UX, Usability

Ein "gutes GUI" wird heute als Selbstverständlich angeschaut.

Die Gewohnheiten von heute haben sich über lange Zeit entwickelt und früher war nicht alles besser:

Das Konzept von GUIs im heutigen Sinne stammt aus den 1970er Jahren.

Seit 1973 erarbeitete man am Xerox PARC in Kalifornien den Xerox Alto (erster Computer mit einem GUI)

Den ersten kommerziellen Einsatz zeigte 1981 der Xerox Star. Einen grösseren Kreis von Anwendern erreichte das Konzept erst durch die populäreren Computer von Apple (Apple Lisa, 1983).

1985 begann Microsoft mit Windows mitzumischen. Der grosse Durchbruch erfolgte erst Anfang der 90er Jahre mit Windows 3.1.

💬 Ergonomie

• Was versteht ihr unter "Ergonomie"?

• Was bedeutet Ergonomie im Bezug auf Software?

Standard EN-9241-110

Die Norm EN ISO 9241 ist ein internationaler Standard, der Richtlinien der Mensch-Computer-Interaktion beschreibt. Die Normenreihe trägt seit 2006 den deutschen Titel Ergonomie der Mensch-System-Interaktion und löst damit den bisherigen Titel Ergonomische Anforderungen für Bürotätigkeiten mit Bildschirmgeräten ab, um die frühere Einschränkung auf Büroarbeit aufzulösen.

https://de.wikipedia.org/wiki/EN_ISO_9241

Begriffe

„The difference lies in whether people are regarded as extensions of the machine or the machine is designed as an extension of people.“ Czaja (1987)

Usability

"Dumme" Benutzer gibt es nicht, es gibt nur schlecht gestaltete Benutzungsschnittstellen.

Usability steht für die Benutzbarkeit oder Bedienungsfreundlichkeit eines interaktiven Systems. Interaktive Systeme sind Systeme, die eine Benutzungsschnittstelle aufweisen und auf Benutzeraktionen reagieren. Dazu gehören einfache Maschinen ebenso wie komplexe Softwaresysteme.

Der Begriff Usability bedeutet, dass ein System:

• leicht erlernbar

• eine geringe Fehlerrate aufweist (effektiv)

• effizient benutzbar

• Benutzerbefriedigung bewirken

Die 5 E’s nach Whitney Quesenbery

Im Zusammenhang mit Usabilty werden die folgenden 5 E's oft verwendet:

• Effective:

  How completely and accurately the work or experience is completed or goals are reached

• Efficient:

  How quickly this work can be completed

• Engaging:

  How well the interface draws the user into the interaction and how pleasant and satisfying it is to use

• Error Tolerant:

  How well the product prevents errors and can help the user recover from mistakes that do occur

• Easy to Learn: How well the product supports both the initial orientation and continuous learning throughout its complete lifetime of use

UI - User Interface

Das User Interface oder auch Benutzerschnittstelle ist die Art wie ein Mensch mit einer Maschine in Kontakt tritt. Daher wird es in Fachliteratur oft auch Mensch-Maschine-Schnittstelle genannt. Damit eine Benutzerschnittstelle für den Menschen nutzbar und sinnvoll ist, muss sie seinen Bedürfnissen und Fähigkeiten angepasst sein. Die Grundlagenkenntnisse für eine ergonomische und benutzerfreundliche Schnittstellen-Gestaltung werden in der Wissenschaftsdisziplin der Ergonomie erarbeitet.

Der Erfolg eines technischen Produktes hängt nicht nur von den Faktoren Preis, Zuverlässigkeit und Lebensdauer ab, sondern auch vom Faktor Handhabbarkeit bzw. Bedienungsfreundlichkeit. Idealerweise erklärt sich eine Benutzerschnittstelle intuitiv von selbst, also ohne Schulungsaufwand. Der Lichtschalter ist trotz seiner Beliebtheit und Einfachheit keine ideale Benutzerschnittstelle, sondern der Kompromiss eines Zielkonflikts. Dieser besteht darin, dass der Schalter einerseits direkt am einzuschaltenden Gerät angebracht sein sollte, also an der Lampe selbst (damit man ihn nicht suchen muss). Andererseits sollte er in der Nähe der Tür sein (wo er in der Regel auch ist), damit man nicht im Dunklen erst nach der Lampe tasten muss.

UX - User Experience

Die User Experience oder wörtlich Deutsch Nutzererfahrung umschreibt alle Aspekte der Erfahrungen eines Nutzers bei der Interaktion mit einem Produkt, Dienst, einer Umgebung oder Einrichtung. Der Begriff „User Experience“ kommt meist im Zusammenhang mit der Gestaltung von Websites oder Apps zur Anwendung, umfasst jedoch jegliche Art der Produktinteraktion, also unter anderem auch die nicht-digitale, physische Nutzung. Festigkeit bzw. Stabilität, Nützlichkeit und Schönheit können gemessen werden. Bei der Stabilität oder einer minimalen Antwortzeit ist das noch relativ einfach. Das Messen der beiden anderen Kriterien ist aufwändiger. Es stehen verschiedene Methoden zur Verfügung, u. a. die Blickerfassungsmethode, bei der die spontane Wahrnehmung der Website über die Augenbewegung des Benutzers gemessen wird. Auch Benutzerbefragungen anhand standardisierter Fragebögen sind üblich. Bei der Validierung der User Experience in der Praxis sind Fragen wichtig wie: „Wie schnell vermittelt sich dem User Sinn, Konzept und Zweck einer Website?“

💬 Klassendiskussion

Wie beurteilt ihr die UI, UX und Usability dieser zwei Varianten der Ketchup-Flasche?

Gestaltprinzipien

Bislang wurden über 100 Gestaltprinzipien formuliert, die sich teilweise überschneiden. Insofern beschränke ich mich exemplarisch auf die Wichtigsten:

Prinzip der Ähnlichkeit

Das Gesetz der Ähnlichkeit besagt, dass wir ähnliche Elemente als zusammengehörig wahrnehmen. Es spielt dabei keine Rolle, auf welche Eigenschaft sich die Ähnlichkeit bezieht. Es kann beispielsweise die Farbe, Form, Textur, Größe, Geschwindigkeit, Bewegungsrichtung etc. als Gruppe wahrgenommen werden. Je mehr Gemeinsamkeiten ein Element hat, umso deutlicher nehmen wir die Gruppierung wahr.

Als Beispiel haben wir eine Grafik mit Punkten. Jeder Punkt hat denselben Abstand zum anderen. In der Grafik verändere ich zuerst nur die Farbe einiger Elemente und unser Auge verarbeitet dies sofort zu einer Gruppierung. In einem nächsten Schritt ändere ich die Form. Obwohl die Farbe hier wieder einheitlich ist, sehen wir die Zusammengehörigkeit. Diesen Effekt erzielen wir allein durch die Veränderung einer einzigen Eigenschaft.

Prinzip der Nähe

Elemente, die räumlich näher beieinander liegen, werden als zusammengehörig wahrgenommen. Unsere Wahrnehmung gruppiert diese Elemente automatisch. Im folgenden Beispiel sieht man, wie sich dieses Gesetz mit einfachen Punkten, deren Abstand zueinander variiert, zeigen lässt.

Nur durch leichte Anpassungen der Abstände der Punkte zueinander, gruppiert unser Gehirn diese Punkte entweder zu einer vertikalen oder zu einer horizontalen Einheit. Dieses Gesetz ist eines der stärksten und wichtigsten Gesetze in der Gestaltung und sollte daher immer berücksichtigt werden.

Prinzip der gemeinsamen Region

Dieses Gestaltgesetz besagt, dass Komponente in umschlossenen Gebieten als Einheit empfunden werden. Dinge, die durch Linien getrennt sind, wirken nicht als zusammengehörig. Besonders für Webseiten mit viel Fremdwerbung ist es wichtig, das Gesetz der gemeinsamen Region zu nutzen, um die Vielfalt der Produkte voneinander sichtbar abzugrenzen.

Prinzip des gemeinsamen Schicksals

Elemente, die sich gemeinsam verändern oder bewegen, werden als zusammengehörig wahrgenommen. Bekannt aus Animationen, Leuchtreklamen, Paraden uvm. Auch nehmen wir Vogelschwärme nicht als tausende einzelner Vögel wahr, sondern als einen sich bewegenden Schwarm.

💡 Gruppenarbeit Usability

Teilt euch in 3 Gruppen auf und erläutert bezogen auf eure Aspekte

• Kriterien für eine benutzerfreundliche Oberfläche (GUI)

• je ein gutes und ein schlechtes Beispiel

Gruppe 1: Aspekt Übersichtlichkeit und Sebsterklärend Gruppe 2: Aspekt Logischer Aufbau und Komfortabilität Gruppe 3: Fehlerbewusstheit und Gewohnheit

Zeit: 20min