Usability und User-InterfaceDesign Human-Computer-Interaction User-Interface-Design Marcel Götze

“The old computing was about what computers can do. The new computing is about what humans can do.“ Ben Shneiderman*

*Leonardo’s Laptop - Human Needs and the new Computing Technologies. The MIT Press, Cambridge, Massachusetts, London, GB.

Agenda • • • • •

Human Computer Interaction (HCI) The Design of Every Day Things Mensch-Maschine-Kommunikation Usability User-Interface-Design – User Centered Design (UCD)

• Literatur

Literatur (Auszug) • • • • •

Ben Shneiderman, Catherine Plaisant: „Designing the Userinterface: Strategies for Effective Human-Computer Interaction“, Addison Wesley; Auflage: 4 (April 2004) Jenifer Tidwell, Designing Interfaces, Sebastopol, CA: O'Reilly Media, 2005. Bernhard Preim, Interaktive Systeme, Berlin [u.a.]: Springer, 2010. W.O. Galitz, The Essential Guide to User Interface Design: An Introduction to GUI Design Principles and Techniques, John Wiley & Sons, 2007. C.D. Khazaeli, Systemisches Design, rororo, 2005.

Literatur (Auszug) • • • •

Theo Mandel: „The Elements of User Interface Design“, John Wiley & Sons, 1997 Alan Cooper: „About Face 3: The Essentials of Interaction Design”, John Wiley & Sons; Auflage: 3. Auflage, 2007 Jef Raskin: „The Humane Interface. New Directions for Designing Interactive Systems.”, Addison-Wesley, 2000 Don Norman: „The Design of Everyday Things“, Perseus Books, 2002

• Cooper Alan, “The Inmates are Running the Asylum: Why High Tech Products Drive Us Crasy and How To Restore the Sanity“, Sams - Pearson Education, 2004

– Why does Software sucks, Wenn dies jeder Entwickler lesen würde gäbe es wohl keine Hall Of Shame des Interface Design

• Nielson, Jakob, del Galdo, Elisa, International User Interfaces, Wiley, 1996 – Welche Aspekte müssen bei der Entwicklung Internationaler Interfaces berücksichtigt werden.

• Tufte, Edward: “The Visual Display Of Quantitative Information”, – Ist eine Reference zum Thema Informationsdesign. Sehr viele Beispiele.

• Tufte, Edward: „Envisioning Information“, – Wie wird Information präsentiert. Grundlegende Sichtweise auf dieses Thema.

Web Ressourcen - Suche • Google Suche in wissenschaftlichen Texten: – http://scholar.google.de/

• Scientific Literature Digital Library and Search Engine: – http://citeseerx.ist.psu.edu/

Paradigmenwechsel in der MenschMaschine-Kommunikation 1970er/1980er Jahre

1980er/1990er Jahre

später

Operator bedient

User benutzt

Manager Deligiert an

Maschine

Tool

Assistenten

Command line Interface

Graphical User Interface

Attentive User Interface

Zeit

•Neue Technologien ermöglichen neue Interaktionsformen •Neue Anwendungsgebiete -> neue Formen der Mensch-Maschine-Interaktion

http://www.gdv.informatik.uni-frankfurt.de/lehre/ws2009/HCI/HCI_WS0910_V0.pdf

Neue Technologien

Information, Design, Usability • Daten werden zu Information durch Interpretation (durch den Menschen)

Die Information verliert, sobald sie informiert hat, ihre Qualität als Information: „News is what's different.” [Bogart, 2008]

• Daten müssen Menschen präsentiert werden: • Unterscheidung zwischen Systemseite und Anwenderseite – Systemseitig: Aufbereitung und Präsentation – Anwenderseite: Interaktion mit den Daten

• Ziel: Verbesserung der Benutzbarkeit von Systemen (Usability)

Human-Computer-Interaction

MENSCH-COMPUTER-INTERAKTION

Human-Computer-Interaction (HCI) • Definition: „Human-computer interaction is a discipline concerned with the design, evaluation and implementation of interactive computing systems for human use and with the study of major phenomena surrounding them.” [Hewett at al., 1996] • A basic goal of HCI is to improve the interactions between users and computers by making computers more usable and receptive to the user's needs. http://en.wikipedia.org/wiki/Human–computer_interaction

Specifically, HCI is concerned with: • methodologies and processes for designing interfaces (i.e., given a task and a class of users, design the best possible interface within given constraints, optimizing for a desired property such as learning ability or efficiency of use) • methods for implementing interfaces (e.g. software toolkits and libraries; efficient algorithms) • techniques for evaluating and comparing interfaces • developing new interfaces and interaction techniques • developing descriptive and predictive models and theories of interaction http://en.wikipedia.org/wiki/Human–computer_interaction

HCI ist interdisziplinär

Informatik

Psychologie

HCI

Design

Soziologie und Anthropologie

Psychologische Grundlagen • Wichtige Teilbereiche: Wahrnehmung und Kognition • Aufbau des Gedächtnisses: Arbeitsgedächtnis, Langzeitgedächtnis – Informationsverabeitung, bspw.: Symbolische Namen oder Superzeichenbildung – Erkennen und Behalten von Informationen

• (visuelle) Wahrnehmung: – – – – – –

Präattentive Wahrnehmung Farbwahrnehmung Gestaltwahrnehmung (Gestaltgesetze) Wahrnehmung von Form und Objekt Wahrnehmung von Bewegung Aufmerksamkeit und Lenkung von Aufmerksamkeit

Präattentive Wahrnehmung

In welchem Kasten befindet sich der rote Punkt? (Eigene Darstellung in Anlehnung an Preim, 2010)

Metaphern und Mentale Modelle • Begriff stammt aus dem altgriechischen: μεταφορά, metaphorá bedeutet wörtlich „Übertragung“ • „Metaphern nutzen die Vertrautheit eines Begriffes in einer Quelldomäne, um ein Konzept in einer unvertrauten und abstrakten Zieldomäne anschaulich erscheinen zu lassen.“ Preim, 2010 • Metaphern sind sprachliche Bilder, die genutzt werden, um unbekannte Gegenstände oder Sachverhalte anschaulich zu erklären.

Beispiele für Metaphern • Redensartlich: Strohfeuer, Die Nadel im Heuhaufen suchen, Jemandem nicht das Wasser reichen können, Die Kuh vom Eis kriegen, Teamplayer, etc. • Betrachtung einer Organisation als Maschine, der Mensch ist ein Rädchen (Zahnrad) im großen Getriebe (Preim, 2010) • Metaphern in interaktiven Systemen: Desktop, Ordner , Papierkorb, Fenster, Lupe, Reiter (Karteikarten), Schreibmaschine • Metaphern können auch problematisch sein!

Mentale Modelle „Mentale Modelle beinhalten die Vorstellung von Menschen über ein System, ein Gerät oder ein Computerprogramm, das sie benutzen wollen. Auf Basis dieser Vorstellungen entwickeln Benutzer Erwartungen: wenn ich diesen oder jenen Knopf betätige, wird dieser oder jener Effekt eintreten. Die tatsächliche Reaktion des Systems bestätigt dann entweder diese Erwartung, sodass sich das mentale Modell verstärkt oder widerspricht ihr, sodass Benutzer neue Überlegungen anstrengen. (Preim, 2010)

Mentale Modelle • Problem: Mentale Modelle von Menschen unterscheiden sich → Auch das von Entwickler und Benutzer • Idealfall: beide sind identisch • Metaphern können als Realisierung Mentaler Modelle aufgefasst werden

Beispiele für (schlechte) Mentale Modelle • Schere, Tasse, Kanne • (Norman, 2002, Preim, 2010): ThermostatProblem: – Ein Heizungsventil auf höchste Stufe zu stellen erhöht nicht die Aufheizgeschwindigkeit

• Eigene Erfahrung: Mikrowelle – Unterschiedliche Leistungsangaben bedeuten nicht, dass die Energiezufuhr auch unterschiedlich stark ist

Phasen von Bedienhandlungen nach Norman, 2010

1. 2. 3. 4. 5. 6. 7.

Zielsetzung, Formulierung einer Absicht Handlungsplanung, Ausführen einer (Bedien-)Handlung, Wahrnehmen der Reaktion des Systems, Interpretation des Systemzustandes und Vergleich zwischen dem interpretierten Systemzustand und dem ursprünglichen Ziel.

Phasen der Bedienhandlung nach Norman

Bildquelle: Preim, 2010

Betrachtung von Alltagsgeräten

THE DESIGN OF EVERY DAY THINGS

Was will der Benutzer von seinem „Gerät“? Optimale Unterstützung bei der Lösung seiner Aufgabe. Intuitive Benutzung -keine Handbücher notwendig. Es soll einfach zu benutzen sein. Es soll effizient zu benutzen sein. Das System soll möglichst wenig Fehler machen. Das System soll möglichst wenig mentale Anstrengung vom Benutzer erfordern. • Möglichst ermüdungsfreies Arbeiten. • • • • • •

Dr. Matthias Schneider: Entwurf ergonomischer Benutzungsoberflächen, Vorlesung TU-München, SoSe2010

Was will der Benutzer von seinem „Gerät“? • Übersichtlichkeit • Die Benutzung soll leicht zu erlernen und leicht zu behalten sein. • Fehlertoleranz • Ansprechendes Design, attraktives Aussehen • Die Lösung seiner Aufgaben. • Die Benutzung soll Spaß machen. • Übertragbarkeit der Benutzungsprinzipien auf möglichst viele Systeme. Dr. Matthias Schneider: Entwurf ergonomischer Benutzungsoberflächen, Vorlesung TU-München, SoSe2010

Warum sind konventionelle Benutzungsoberflächen oft so schlecht? • Keine Rücksicht auf die Arbeitsabläufe des Benutzers • Keine Rücksicht auf das mentale Modell des Benutzers • Keine Rücksicht auf die Fähigkeiten von Benutzern. • NIH-Syndrom: Ignoranz gegenüber vorhandenem Wissen Dr. Matthias Schneider: Entwurf ergonomischer Benutzungsoberflächen, Vorlesung TU-München, SoSe2010

Intuitive Benutzungsschnittstellen? • Beispiel: alter Wasserhahn – 2 Knöpfe ein Hahn – Links warm, rechts kalt

• In welcher Richtung schließen beide Knöpfe? • Wer möchte: finden solcher Wasserhähne, herausfinden welche intuitiv und welche nicht und warum.

The Design of Every Day Things • In welcher Stellung ist das Fenster angeklappt und in welcher ist es offen?

1

2

3

The Design of Every Day Things

Gutes Design bedingt nicht automatisch gute Benutzbarkeit

CS Building in Saarbrücken (Photo A. Butz, Dresden)

DFKI in Saarbrücken (Photo A. Butz, Dresden)

The Design of Every Day Things

Gutes Design bedingt nicht automatisch gute Benutzbarkeit

Bilder von Prof. Dr. Keith Andrews: http://courses.iicm.tugraz.at/hci/hci.pdf

The Design of Every Day Things Dekanatstür

Tür von außen

Tür von innen

The Design of Every Day Things

Bilder von Prof. Dr. Keith Andrews: http://courses.iicm.tugraz.at/hci/hci.pdf

The Design of Every Day Things

The Design of Every Day Things

Kontext ist wichtig!

Bilder von Prof. Dr. Keith Andrews: http://courses.iicm.tugraz.at/hci/hci.pdf

The Design of Every Day Things

Konzepte für die Gestaltung von Bedienelementen (Norman, 2002)

• Affordances: wahrgenommene und tatsächliche Eigenschaften eines Gerätes, aus denen ersichtlich wird, wie dieses Gerät benutzt werden kann. • Constrains: Einschränkung der möglichen Aktionen zur einfacheren Bedienung. – Physikalisch, logisch, semantisch, kulturell

Constraints

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

https://cdn.pixabay.com/photo/2012/04/12/1 0/29/traffic-29365_960_720.png

The Design of Every Day Things • Konzeptuelles Modell: Die Funktionsweise eines technischen Gerätes, z.B. eines Kühlschranks, einer Heizung oder eines Radios, basiert auf bestimmten Wirkprinzipien auf elementarer Ebene und einem konzeptuellen Modell auf höherer Ebene. Die Bedienung des Gerätes sollte das konzeptuelle Modell möglichst klar vermitteln. Preim, 2010

The Design of Every Day Things Konzeptuelles Modell

• Wichtig für Konzeptuelle Modelle sind Informationen über den internen Zustand des Geräts • → Mappings: Abbildungen die Beziehungen zwischen den Bedienhandlungen und dem internen Zustand herstellen • Stimulus-Antwort-Kompatibilität: Benutzung des Bedienelements und die Reaktion des Gerätes müssen kompatibel sein – Drehen des Lenkrads am Auto → Kurvenfahrt

Benutzbarkeit von Geräten, Gegenständen, Software, Webseiten

USABILITY

Usability • Definition: Usability ist das Ausmaß, in dem ein Produkt durch bestimmte Benutzer in einem bestimmten Nutzungskontext genutzt werden kann, um bestimmte Ziele effektiv, effizient und zufriedenstellend zu erreichen. [EN ISO-Standard 9241-11] • Unterschied Benutzbarkeit, Gebrauchstauglichkeit

Benutzbarkeit vs. Gebrauchstauglichkeit • Ein Gegenstand kann benutzbar sein, aber trotzdem eine schlechte Gebrauchstauglichkeit haben. Original von Jacques Carelman: Catalog of Unfindable Objects, Balland, editeur, Paris-France.

Grundsätze der Dialoggestaltung DIN/EN/ISO 9241, Teil 10(110)-17

• Aufgabenangemessenheit

– Effizienz und Effektivität der Unterstützung

• Steuerbarkeit

– Freiheitsgrade in der Geschwindigkeit und Richtung des Dialogablaufs

• Selbstbeschreibungsfähigkeit

– Dialogschritte ergeben sich intuitiv oder werden erklärt

• Erwartungskonformität

– Übereinstimmung mit Kenntnissen und Modellen des Benutzers

• Fehlertoleranz

– Fehleingaben erfordern keinen oder nur geringen Korrekturaufwand

• Individualisierbarkeit

– Möglichkeit zur Anpassung an andere oder veränderte Bedingungen

• Lernförderlichkeit

– Hilfestellung beim Erfassen der Systematik des Dialogs

Leitsätze für Gebrauchstauglichkeit DIN ISO 9241-11

• Effektivität: Die Genauigkeit und Vollständigkeit, mit der Benutzer ein bestimmtes Ziel erreichen. • Effizienz: Der im Verhältnis zur Genauigkeit und Vollständigkeit eingesetzte Aufwand, mit dem Benutzer ein bestimmtes Ziel erreichen. • Zufriedenstellung: Freiheit von Beeinträchtigung und positive Einstellung gegenüber der Nutzung des Produkts. → Diese Leitkriterien sind abhängig vom Nutzungskontext

Nutzungskontext ist abhängig von:

• Benutzern und Benutzerinnen • Zielen • Arbeitsaufgaben • Arbeitsmitteln (Hardware, Software, Materialien) • der physischen und sozialen Umgebung Bildquelle: http://www.globalspec.com/reference/35583/203279/chapter-7responsiveness-bloopers

Normans Theorie kann zur Bewertung von Benutzungsschnittstellen benutzt werden. 1. Kann die Funktion eines Gerätes leicht bestimmt werden? 2. Ist offensichtlich, welche Aktionen mit einem Gerät ausgeführt werden können? 3. Ist klar, wie eine Absicht in physische Aktionen bzw. Kommandos umgesetzt wird? 4. Ist erkennbar, wie die Aktion tatsächlich ausgeführt wird? 5. Ist es leicht zu erkennen, ob das System im gewünschten Zustand ist? 6. Kann der Benutzer den wahrgenommenen Zustand leicht interpretieren? 7. Wird der Systemzustand so dargestellt, dass ein Vergleich mit den Zielen des Benutzers leicht fällt?

Kriterien zur Bewertung von Gebrauchstauglichkeit • • • • • •

•

Sichtbarkeit: die relevanten Teile der Software sollen zum richtigen Zeitpunkt hervorgehoben werden. Rückmeldung: über den Ausgang einer Benutzeraktion sollen – im Erfolgs- wie im Misserfolgsfall – Informationen ausgegeben werden. Einschränkungen: nur zulässige und sinnvolle Aktionen sollen ermöglicht werden. Abbildung: eine logische Korrespondenz zwischen dem mentalen Modell der Benutzerinnen und Benutzer und der tatsächlichen Funktionsweise des Systems soll gegeben sein. Konsistenz: gleiche oder ähnliche Aufgaben sollen mit gleicher oder ähnlicher Benutzungsoberfläche und gleichen oder ähnlichen Operationen durchgeführt werden können. Eigenheiten: Softwareanwendungen sollen selbsterklärend so gestaltet werden, dass die Benutzerinnen und Benutzer einen richtigen Eindruck haben und eingeladen werden das Richtige zu tun. http://www.enzyklopaedie-der-wirtschaftsinformatik.de/wi-enzyklopaedie/lexikon/ismanagement/Systementwicklung/Management-der-Systementwicklung/Software-Qualitatsmanagement/softwareergonomie

GUI-Bloopers

GUI Bloopers • Progressbar: Installation Opera 10.62

GUI-Bloopers • Thunderbird Emailkonto einrichten

GUI-Bloopers • Thunderbird Emailkonto einrichten

GUI-Bloopers • Outlook/Exchange Abwesenheitsnachricht

GUI-Bloopers • Adobe MasterCollection Update

GUI-Bloopers • Adobe Update

Nächstes Thema

USER INTERFACE DESIGN

Interface Design • Beschäftigt sich mit der (graphischen) Gestaltung von Benutzungsschnittstellen zwischen Mensch und Maschine • Ziel: Optimierung der der Benutzbarkeit (Usability) – Auch Aussehen als Marketingkriterium

Klassisches Prinzip der Softwareentwicklung: Wasserfallmodell • [Royce, 1970]: Wasserfallmodell Analyse Entwurf Implementierung Test Wartung

Winston W. Royce: „Managing the Development of Large Software Systems: Concepts and Techniques“, In: Technical Papers of Western Electronic Show and Convention (WesCon) August 25-28, 1970, Los Angeles, USA.

Probleme des Wasserfallmodells • Phasen oft nicht klar trennbar • Oft sind Rückschritte erforderlich • Falsche Annahmen werden oft zu spät erkannt – Schlecht oder nicht korrigierbar

• Benutzungsszenarien sind oft zu abstrakt, nicht realistisch genug • Normaler Software-Entwicklungsprozess kann leicht an den Bedürfnissen der BenutzerInnen vorbeigehen. http://animalrace.uni-ulm.de/lehre/courses/ss01/interaktiv/IS-Kapitel5.1-5.4.pdf

Lösung, Verbesserung • Benutzer von Beginn bis Ende in die Entwicklung einbeziehen • Normalerweise mehrere Durchläufe bis Design stimmt • Bei jedem Durchlauf wird

– Design präziser – Prototyp detaillierter und technisch anspruchsvoller http://www.theomandel.com/ – Das Feedback der Nutzer auf kleinere Probleme konzentriert

• Erste Iteration: grobe Fehler ausbügeln, später feinere korrigieren

Planung und Analyse • Benutzer in alle Phasen mit einbeziehen, mit Schwerpunkt am Projektanfang in Analyse: – Zielbenutzergruppe herausfinden

• Wer sind die typischen Benutzer? (Denken)

• Funktionsbedarf herausfinden

– Was wollen diese typischen Benutzer vom System? (Fragen)

• Plagiarisieren

– Von existierenden Lösungen lernen (Abgucken)

• Taskanalyse

– Typische Aufgaben modellieren, z.B. mit GOMS (Fragen)

• Bearbeitungszeiten, Lernzeiten abschätzen (Denken)

http://animalrace.uni-ulm.de/lehre/courses/ss01/interaktiv/IS-Kapitel5.1-5.4.pdf

Planung und Analyse

Herausfinden, was Nutzer wirklich wollen

• • • • • •

Benutzer-Befragung, Interview Benutzer Beobachtung Personas Fokusgruppen, Gruppendiskussion (Online)-Umfragen Zielgruppenanalyse

Entwurf • Diverse Regeln für den Entwurf von Benutzungsschnittstellen • Siehe auch Barrierefreiheit und Gestaltung von Nutzungserlebnissen (User-Experience) • Beispielhaft: – Acht goldene Regeln des Interface Designs – Szenarien entwickeln, Wenn-Dann – Taskanalyse

8 Goldene Regeln des UI-Designs Ben Shneiderman (2004)

1. 2. 3. 4. 5. 6. 7. 8.

Strebe Konsistenz an Stelle Shortcuts für erfahrene Benutzer bereit Gib aussagekräftige Rückmeldungen Designe Dialoge, die dem (der) Nutzer(in) die Abgeschlossenheit von Dialogen anzeigen Biete eine einfache Fehlerbehandlung Biete eine einfache Möglichkeit der Rücknahme von getätigten Aktionen (Undo) Gibt dem Benutzer, der Benutzerin das Gefühl, das er/sie das System kontrolliert Entlaste das Kurzzeitgedächtnis von Benutzer(innen)

Design/Entwurf • Prototyp bauen – Auf Basis des ersten Systementwurfs – Zweck: frühes Feedback von Benutzern – Schwerpunkt auf Interaktion, nicht auf Funktionalität – Ggf. mehrmals aufgrund des Feedbacks überarbeiten (iteratives Design)

• Benutzbarkeit testen (Usability Studies) – am Prototypen und fertigen Produkt

Prototyping • • • • • • • • •

Skizzen, Storyboards PostIt Software-Prototyp Paper-Prototyp Director, ToolBook Flash http://groups.csail.mit.edu/graphics/classes/6.831/paper-prototypes/ Dialog-Bibliotheken für Sprachen (Swing, JFC, etc.) Software zur Erzeugung der Medien, Pro Tools, Logic Audio, Photoshop, Illustrator, InDesign, Maya, Softimage, Inkscape, etc.

Entwurfsprinzipien (Preim, 2010)

basierend auf den allgemeinen und kognitiven Aspekten der MCI

• Kenntnis potentieller Benutzer und ihrer Aufgaben • Unterstützung beim Aufbau mentaler Modelle, • Terminologie der Benutzer verwenden und • Reduktion der kognitiven Belastung

Entwurfsprinzipien (Preim, 2010) die Benutzungsschnittstelle betreffend

• Strukturierung der Benutzungsschnittstelle, • Kombination visueller und textueller Elemente, • Sichtbarkeit von Systemzuständen und möglichen Aktionen, • Angemessene Rückkopplung, • Konsistenz, • Abbruch und Rückgängigmachen von Aktionen, • Berücksichtigung von Fehlern, • Erwartungskonformes Verhalten und • Adaptierbarkeit der Schnittstelle.

User-Experience (UX) • Vermittlung eines bestimmten Erlebnisses, verbunden mit Emotionen und Gefühlen die einprägsam sind (Preim, 2010) • Vermittlung von positiven Erfahrungen • Positive Erfahrungen mit der Benutzungsschnittstelle werden mit hoher Produktqualität assoziiert. • Beispiel: Apple Zahleneingabe, iMac, Dock

User-Experience

Bildquelle: http://www.ifun.de/15-jahre-imac-video-praesentation44511/

http://images.apple.com/v/imac-withretina/a/images/overview/family_large.png

User-Experience

Bildquelle: http://www.maclife.com/files/u220903/dock_with_preferences_620px.jpg

Bildquelle: Preim, 2010

Richtlinien und Styleguides • Richtlinien z.B.: 8 golden rules von Shneiderman • Pattern • Styleguides: Richtlinien, die Konsistenz sichern, sowohl innerhalb eines Produkts als auch produktübergreifend • Allgemeine Vorteile: Verbesserung der Usability, Standardisierung und Einhaltung von Standards (ISO 9241) http://www.usability-forum.com/richtlinien-und-styleguides/vorteilevon-styleguides.html

Interaktionstechniken • Interaktionsaufgaben werden durch Interaktionstechniken realisiert • Sprachbasierte Interaktion – Kommandosprache – Natürliche Sprache

• Menüauswahl • What you see is what you get (WYSIWYG) • Direkte Manipulation

Interaktion mit graphischen Benutzungsschnittstellen (Beispiele) • Dialoge und Dialoggestaltung • Was erleichtert die Bearbeitung, was erschwert sie, was wird als attraktiv, was als unangenehm wahrgenommen (Preim 2010)?

Probleme mit GUI-Elementen • Dynamische Menüs: ändern Ihren Inhalt je nach ausgewähltem Objekt • Checkboxen statt Radiobutton (und umgekehrt) • Benutzung von Eingabefeldern für die Textausgabe • Modale und nicht modale Dialoge

Beispiele

Beispiel Checkboxen und Radiobutton

Opera Schnelleinstellungen Projekt X, Checkboxen werden als Radiobutton benutzt

Beispiel: MSconfig

• Dialog lässt sich nicht in der Größe ändern

Beispiel Skype

• Schließen des Fensters beendet Skype nicht

Beispiele • Versteckte Funktionen: – Touch-Interface: Finger länger auf Menü liegen lassen

• Verschwundene Funktionen – Windows 8: Drahtlosnetzwerke verwalten – MouseOver bei Touch-Interface

Beispiele • Fenster vs. Fullscreen, bspw. bei Windows 8 • Lautstärkeeinstellung Samsung S3 Neo – Einstellung läuft nur über Software

• Cursorpositionierung iOS

http://www.amazon.de/Tasche-Samsung-Galaxy-i9301iDisplayschutzfolie-dunkelblau/dp/B00LVUH5N8 https://snapguide.com/guides/move-the-cursor-on-iphone-exactly-where-you-need/

Mensch-Computer-Interaktion

BENUTZUNGSSCHNITTSTELLEN FÜR KINDER DESIGN GUIDELINES

https://openclipart.org/detail/206181/computer-boy-cartoon

Benutzungsschnittstellen für Kinder • Kindliche Entwicklung kann grob in drei Bereiche eingeteilt werden: – Kognitiv – Physisch – Sozial/Emotional

• Diese drei Bereiche müssen bei der Entwicklung von Benutzungsschnittstellen betrachtet werden

Benutzungsschnittstellen für Kinder Kognitive Fähigkeiten

• Lesefähigkeit: die meisten Benutzungsschnittstellen verlangen gute Lesefähigkeit – Sowohl bei der Textausgabe als auch –eingabe

• Lösungsmöglichkeiten: – Metaphern – Altersgerechte Darstellung – Vorlesemöglichkeit – Animierte Figuren können Anweisungen geben

Benutzungsschnittstellen für Kinder Kognitive Fähigkeiten

• Rückmeldung und Anleitung: – Kinder erwarten eine unmittelbare Antwort auf Eingaben • Sonst werden Eingaben oft so lange wiederholt bis etwas passiert.

– Benutzungsschnittstellen sollten intuitiv sein: (auch) Kinder können nicht erst ein Handbuch lesen – Kinder haben mitunter Probleme wiederkehrende Handlungen auszuführen, hierbei ist Unterstützung nötig

Benutzungsschnittstellen für Kinder Kognitive Fähigkeiten

• Rückmeldung und Anleitung: – Die Bedeutung von Icons sollte für Kinder ersichtlich sein – Interaktionsmöglichkeiten sollten akustisch, durch Animationen und/oder Hervorhebungen gekennzeichnet werden – Der Systemstatus sollte ersichtlich sein (Beschäftigt oder auf Eingabe wartend) – Interfaces sollten Kinder bei der Orientierung in virtuellen Welten helfen

Benutzungsschnittstellen für Kinder Kognitive Fähigkeiten

• Geistige Entwicklung: – Kinder haben Schwierigkeiten mit abstrakten Konzepten und komplexen Benutzungsschnittstellen – Benutzungsschnittstellen sollen keine komplexen und umfangreichen Menüs sowie Untermenüs aufweisen – Kinder sind an direkt manipulative Schnittstellen gewöhnt

Benutzungsschnittstellen für Kinder Kognitive Fähigkeiten

• Vorstellungskraft: – Kinder können gut in Fantasiewelten eintauchen • Fühlen sich als Teil einer Szenerie und verhalten sich auch so

– Wenn Metaphern benutzt werden, dann sollten sich die Objekte auf dem Bildschirm wie im „richtigen“ Leben verhalten • Regentropfen sollten auch nach unten Fallen, selbst wenn sie anders programmiert wurden

Benutzungsschnittstellen für Kinder Physische Entwicklung

• Motorische Fähigkeiten: – Feinmotorik entwickelt sich bei Kindern erst → Kinder sind ev. nicht in der Lage, die Maus wie erwartet zu bedienen – Auch schwierig: Mousebutton gedrückt halten und gleichzeitig Maus bewegen (Drag) – Tastatureingaben können langwierig sein, da Kinder üblicherweise das Adlersuchsystem anwenden – Für jüngere Kinder, die Schwierigkeiten mit der Maus haben ist ein Touchscreen ev. besser

Benutzungsschnittstellen für Kinder Physische Entwicklung

• Motorische Fähigkeiten: – Kinder bringen u.U. Mousebutton durcheinander → Abhilfe: jedem Button die selbe Funktion geben – Point and Click ist besser als Drag and Drop (Inkpen, 2001) – Einmal klicken ist besser als Doppelklick

Benutzungsschnittstellen für Kinder Physische Entwicklung

• Tangibility: – Kinder sind das Spielen mit Teddys und Bausteinen gewöhnt – > Sie mögen es, Dinge direkt anzufassen und zu bearbeiten – > Direkt manupilative BSSt. sind intuitiver für Kinder und versetzen Sie einfacher in die Lage Prozesse zu untersuchen

Benutzungsschnittstellen für Kinder Soziale/Emotionale Entwicklung

• Motivation und Engagement:

– Erwachsene betrachten Software als Werkzeug, das möglichst effizient helfen soll • Und sie haben grundlegende Computerkenntnisse

– Kinder nutzen Software eher für Lernzwecke, für soziale Aktivitäten oder für Unterhaltung – > Software sollte das Interesse und die Aufmerksamkeit von Kindern haben und halten

• Entertainment spielt eine wesentliche Rolle

– Kleine Animationen, Töne, die per Mausklick abgespielt werden, etc. – Animierte Charaktere sind hilfreich

Benutzungsschnittstellen für Kinder Soziale/Emotionale Entwicklung

• Soziale Interaktion: ist ein wichtiger Teil der Kindlichen Entwicklung – Normalerweise erfolgt dies Face-to-Face – Rechner erlauben eine weltweite Kommunikation – Alternativen für schüchterne oder eher zurückhaltende Kinder – Kinder haben u.U. höhere Erwartungen an die Interaktion mit Rechnern, da sie diesen schneller menschliche Eigenschaften zuweisen

Zusammenfassung • Kinder sind nicht „kleine Erwachsene“ • Benutzungsschnittstellen müssen entsprechend angepasst werden – Kognitive – Physische – Sozial-/Emotionale Entwicklung

• Altersunterschiede beachten • Software mit Kindern testen!

Zusammenfassung

Wie können wir Benutzungsschnittstellen bewerten?

• Überprüfung: Grundsätze der Dialoggestaltung • Normans Theorie zum Handlungsablauf • Leitsätze für Gebrauchstauglichkeit • Kriterien zur Bewertung von Gebrauchstauglichkeit • 8 Goldenen Regeln für Dialogdesign von Shneiderman

Themen zum Weiterlesen • • • • •

Webdesign und Webusability Barrierefreiheit Allgemein: Softwareergonomie Ergonomie interaktiver Lernmedien Usability mobiler Geräte

Ergonomie interaktiver Lernmedien • Wichtig für die Gebrauchstauglichkeit von Medien sind nicht nur die bisher genannten Kriterien – Grundsätze der Gebrauchstauglichkeit (ISO 9241-11 – Grundsätze der Dialoggestaltung (ISO 9241-110)

• Wichtig ist auch eine „gute“ Informationsdarstellung – Grundsätze der Informationsdarstellung (ISO 9241-12)

DIN EN ISO 9241-12 • Erkennbarkeit (die Aufmerksamkeit des Benutzers wird zur benötigten Information gelenkt) • Unterscheidbarkeit (die angezeigte Information kann genau von anderen Daten unterschieden werden) • Lesbarkeit (die Information ist leicht zu lesen) • Verständlichkeit (die Bedeutung ist leicht verständlich, eindeutig, vermittelbar und erkennbar) • Klarheit (der Informationsgehalt wird schnell und genau vermittelt) • Kompaktheit/Prägnanz (den Benutzern wird nur jene Information gegeben, die für das Erledigen der Aufgabe notwendig ist) • Konsistenz (gleiche Information wird innerhalb der Anwendung entsprechend den Erwartungen des Benutzers stets auf die gleiche Art dargestellt).

http://www.redtenbacher.de/swergo/swergo.htm

Beispiel: Farbwahl

DIN 66234-5, "Bildschirmarbeitsplätze: Codierung von Information, Farbkombinationen"

http://www.redtenba cher.de/swergo/swerg o.htm#Kap2.3

+: -: n.a.:

Farbkombination gut geeignet; helle Untergrundfarben sind jedoch nur für flimmer- und blendfreie Geräte geeignet Farbkombination nicht geeignet, da entweder die Farborte zu nahe beieinander liegen, dünnlinige Zeichen nicht erkennbar sind oder zu hohe Anforderungen an den Scharfeinstellungsmechanismus der Augen gestellt werden nicht anwendbar, d. h. Vorder- und Hintergrundfarbe sind identisch.

Farbe Psychologie Farbwirkungen westeurop. Kulturkreis

Weitere Farbwirkungen: Heinrich Frieling (zitiert nach Holl, 2007)

Holl, Friedrich: Software-Gestaltung: Farbe auf dem Bildschirm, 2007, http://www.ergoonline.de/html/software/ergonomische_masken_und_dialo/07_08_Farbe.pdf (11.05.2015)

Human-Computer-Interaction

USABILITY MOBILE DEVICES

Usability mobile devices • Alle Grundsätze der Dialoggestaltung gelten hier ebenfalls • Besonderheiten, Beispiel: Bildschirmgröße Internetverfügbarkeit Geschwindigkeit der Datenübertragung Sensoren für Position, Bewegung, Beschleunigung, Himmelsrichtung, Luftdruck, Lage, etc. – Touchscreen – Immer eingeschaltet, dabei und persönlich – – – –

Usability mobile devices einige Überlegungen

• Kontext: Arbeit an Smartphones wird oft unterbrochen oder sie werden zum Zeitvertreib benutzt • Dateneingabe: – kleine Tasten, große Finger – Unterschiedliche Daten: URL, Email, Zahlen, Sonderzeichen, etc.

• Multitouch und Gesten • Orientierung: Hoch- und Querformat

Usability mobile devices Überlegungen, basierend auf (CB, 2012)

• Warum benutzen wir eine App? – Weil sie einzigartig ist, Spaß macht, gut zu benutzen ist?

• Wie benutzen wir ein Smartphone? – Wir sind gelangweilt, beschäftigt, orientierungslos

• Was ist grundlegend wichtig für die Interaktion? – Reaktionsgeschwindigkeit: sofortige Reaktion auf eine Eingabe ist wichtig – Daumen: Der Daumen ist das Maß der Dinge – Direkte Manipulation: Touchscreen erlaubt die Eingabe direkt am Inhalt, keine Abstraktion (Maus) notwendig

CB, 2012: The 10 principles of mobile interface design, online: Creative Bloq, http://www.creativebloq.com/mobile/10-principles-mobile-interface-design-4122910 (17.05.2015)

Usability mobile devices Überlegungen

• Wo sollten Interaktionselemente platziert werden? • Welche Art von Navigation ist sinnvoll? • Wie können Benutzereingaben erleichtert werden? – Unterschiedliche Tastaturen für unterschiedliche Daten – Autokorrektur – Hoch- vs. Querformat – Daumen und dicke Finger CB, 2012: The 10 principles of mobile interface design, online: Creative Bloq, http://www.creativebloq.com/mobile/10-principles-mobile-interface-design-4122910 (17.05.2015)

Usability mobile devices Überlegungen

• Woher weiss ich, welche Gesten benutzt werden können? • Sind Gesten immer sinnvoll? • Dialoge: Modal oder nicht-modal?

CB, 2012: The 10 principles of mobile interface design, online: Creative Bloq, http://www.creativebloq.com/mobile/10-principles-mobile-interface-design-4122910 (17.05.2015)

Human-Computer-Interaction towards Mobile Learning

MOBILE LEARNING - EINFÜHRUNG

Mobile Learning • Eigentlich gibt es mobile Learning schon seit der Erfindung des Buchdrucks (Stoller-Schai, 2010, zitiert nach deWitt, 2013)

• Mit Tablets und Smartphones neue Konzepte → Mobile Learning neu denken – Beispiel: Apps, überall verfügbar, schnell zu installieren und vergleichsweise günstig. – Location Based Services: Augmented Reality

Mobile Learning • Definitionen: Lernen mit mobilen Endgeräten, aktueller: Unterstützung mobil Lernender (Göth/Schwabe, n. de Witt, 2013) • E-Learning: alle Formen des Lernens mit elektronischen Medien • Blended Learning: Kombination aus Präsenzlehre und ELearning • Mobile Learning: lernen unterwegs mit mobilen, portablen Endgeräten • Ubiquitous Learning: ubiquitär oder allgegenwärtiges Lernen • Pervasive Media: Multimedia, Mobilität und Dienste aus der Cloud verschmelzen (Lucke & Specht, 2012).

Mobile Learning • Spontan, persönlich, informell, kontextualisiert, tragbar, allgegenwärtig, durchdringend1 • Hochgradig situiert, persönlich, kollaborativ, nachhaltig2 • Mobile Technologien ermöglichen den Lernenden von der artifiziellen Eingeengtheit weg in mehr realerer Umgebung zu lernen.3 1 Kukulska-Hulme und Traxler 2005, zitiert nach Seipold, 2013 2 Naismith et al. 2004, nach Seipold, 2013 3 Pachler, 2010, über die schulische Lernpraxis der Abstraktion von Dingen und Sachverhalten hinaus, Seipold, 2013

Mobile Learning

kritische Aspekte (Beutner und Pechuel, 2012) • Effizienz: durch die Möglichkeiten an unterschiedlichen Orten zu lernen • Persönliches Umfeld: Lernen findet im persönlichem Umfeld des Lernenden statt • Interaktion: zwischen Lernenden und Lehrenden (auch Lernende untereinander) • Inhalte: sollten auf stationären wie auf mobilen Plattformen gleich sein • Kontext: Analyse der Umgebung des Lernenden (situated Learning)

Kontext Mobile Learning

Lernumgebung in denen das mobile Lernen stattfindet

Ausprägungen der Gestaltungsdimensionen des Mobilen Lernens, (Göth und Schwabe, 2011, zitiert nach deWitt, 2013)

Seamless Learning • Zusammenarbeit der Schülerinnen und Schüler innerhalb und außerhalb des Klassenraums1 • Auch hinsichtlich Technology Enhanced Learning2 (TEL) – Lernende verfügen über ein Endgerät, das den individuellen Lernprozess begleitet und unterstützt2 1 2

(Wong & Looi, 2011) zitiert nach (Specht, Ebner, Löcker, 2013) (Chan et al., 2006) zitiert nach (Specht, Ebner, Löcker, 2013)

Mobile Learning

formales vs. Informelles Lernen

• Formales Lernen: Lernen in Bildungsinstitution (Schulen, Uni, etc.) • Informelles Lernen: Lernen außerhalb dieser Institutionen (am Arbeitsplatz, in der Familie, etc.) • Mobile Learning: kann in informellen und formalen Kontexten stattfinden – Bsp.: Bring your own device (BYOD)

Mobile Learning

Typen Informellen Lernens1

• Typ 1: geplante Lernsituation innerhalb des Klassenraums • Typ 2: geplante Lernsituation außerhalb des Klassenraums • Typ 3: nicht geplante Lernsituation außerhalb des Klassenraums • Typ 4: nicht geplante Lernsituation innerhalb des Klassenraums 1

(So et al., 2008) zitiert nach (Specht, Ebner, Löcker, 2013)

Seamless Mobile Learning1 10 Dimensionen

1. Formales und informelles Lernen 2. Aspekte des persönlichen und gemeinsamen Lernens 3. Zeitliche Unabhängigkeit im Lernen 4. Standortübergreifendes Lernen, örtliche Unabhängigkeit 5. Allgegenwärtige Verfügbarkeit von Wissen bzw. Informationen 1

(So et al., 2008) zitiert nach (Specht, Ebner, Löcker, 2013)

Seamless Mobile Learning1 10 Dimensionen

6. Präsenz sowohl der physischen(analogen) als auch der digitalen Welt im Lernprozess 7. Kombinierter Einsatz von verschiedenen Gerätetypen unter Einbindung von stationären Geräten (PCs, Tafelsysteme) 8. Nahtlose und schnelle Umschaltung zw. Verschiedenen Lernaufgaben (bspw. Datensammlung, Datenanalyse und Kommunikation) 9. Syntheseprozesse zwischen schon vorhandenem und neuem Wissen auch interdisziplinäres Denken 10. Pädagigische Modelle durch die Lehrpersonen das nahtlose mobile Lernen begünstigen können 1

(Wong, 2012) zitiert nach (Specht, Ebner, Löcker, 2013)

Mobile Learning Lerntheorien

• Mobile Learning: eigenverantwortliches und selbstorganisiertes Lernen (de Witt, 2013) • Problem: Veränderungen im Alltag durch veränderte soziale Beziehungen, Unkontrollierbarkeit personenbezogener Daten, etc. → Lerntheorien müssen weiterentwickelt werden.

Mobile Learning

Fragen, die eine Lerntheorie für mobiles Lernen bestehen sollte

• „Is it significantly different from current theories of classroom, workplace or lifelong learning? • Does it account for the mobility of learners? • Does it cover both formal and informal learning? • Does it theorise learning as a constructive and social process? • Does it analyse learning as a personal and situated activity mediated by technology?” (Sharples/Taylor/Vavoula 2007, S. 225)

Mobile Learning Didaktische Aspekte

• Ebner spricht von „Lernen im Kontext“ (Specht, Ebner & Löcker, 2013):

– Kopplung von Erfahrungen an die reale Welt verbessert Erinnerung – Synchronisation von Lernunterstützung mit der physischen Umwelt – Lerninhalte sollten so strukturiert werden, dass die Informationsmenge den Lernenden nicht überfordert → Cognitive Load Theorie (Sweller, 1988), Information Processing Theorie (Miller, 1956) – Sensorischer Kanal hat eine begrenzte Verarbeitungskapazität

• Beste Unterstützung der Informationsverarbeitung bei Nutzung unterschiedlicher, sich ergänzender Kanäle → Multimedia Learning Theory (Moreno, 2001; Moreno & Mayer, 2000)

– Informationen sollten in einem authentischen Kontext dargeboten werden

Mobile Learning Didaktische Aspekte

• Verschiedene Lerntheorien betonen die Notwendigkeit der Effizienz der Informationsvermittlung. Hierbei spielen sowohl die En- und Dekodierung von Informationen im Kontext, die Beschränkung des Kurzzeitgedächtnisses sowie Prozesse der multimedialen Informationsverarbeitung eine Rolle. (Specht, Ebner & Löcker, 2013)

Mobile Learning

Didaktische Aspekte nach Bachmayr, 2011 (zitiert nach Parzl & Bannert, 2013)

• (Allgemeine Ziele und) Begründung des mobilen Lernens • Warum? Mobiles Lernen ist die didaktische Antwort auf die veränderte Medien- und Lernkultur vieler Kinder und Jugendlicher – Die neue dominante Medienkultur des Alltags: individualisiert, mobil und konvergent – Zunehmende Bedeutung informellen Lernens und abnehmende Reichweite schulischen Lernens

Mobile Learning

Didaktische Aspekte nach Bachmayr, 2011 (Parzl & Bannert)

• Liste der Eckpunkte zur Didaktik • Wie? Die Strukturmerkmale des mobilen Lernens

– Mit dem Handy informelles Lernen in die Schule integrieren – Mit dem Handy Episoden situierten Lernens schaffen – Mit dem Handy Lern- und Medienkontexte generieren – Mit dem Handy Kommunikationsbrücken und Kommunikationsketten schaffen – Mit dem Handy die Schülerinnen und Schüler als Experten ihres Alltagslebens in der Schule individuell aktiv werden lassen – Mit dem Handy sensible Entwicklungs- und Lernkontexte schaffen

Mobile Learning

Didaktische Aspekte nach Bachmayr, 2011 (Parzl & Bannert) • Liste der Eckpunkte zu den technischen Funktionen des Handys • Womit? Die multimediale Funktionsvielfalt des Handys als mobiler Mini-Computer und Schnittstelle der Medienkonvergenz

– Persönliche und ständige Verfügbarkeit – Aktive Medienfunktionen für Video, Foto, Audio / Musik – Anwendungen für die Alltagsorganisation: Kalender, Wecker und Navigation – Hohe Speicherkapazität für vielfältige Darstellungsformen – Zugang zu einer vielfältigen persönlichen Kommunikation (SMS, MMS, Telefon) – Zugang zum Internet mit dessen spezifischer Kommunikation und dessen Informations- und Medienarchiven sowie zu anderen Schnittstellen wie dem interaktiven Whiteboard

Mobile Learning

Möglichkeiten der schulpraktischen Umsetzung • Drei Ansätze (Seipold, 2013): 1. Top-Down-Ansatz: Aufsetzen von Mobiltechnologien auf bestehende Unterrichtsstrukturen 2. Bottom-Up-Ansatz: Berücksichtigung vorhandener Ressourcen 3.

– Geräte, Know-How der Lehrenden und Lernenden – Bring your own device (BYOD)

Affordance-Ansatz: bedarfsorientierter Einsatz

– Verwendung nur dann, wenn es notwendig und sinnvoll ist → handlungsorientierter Ansatz

• Öffnung der Schule: Spektrum von stark angeleitetem Unterricht in formalisiertem Kontext bis zu individuellen Aneignungsmechanismen im Alltag der Lernenden (Seipold, 2013)

Mobile Learning

Trends und Zukunftsperspektiven (Specht, Kalz, Börner 2013)

• Siehe Folie n: immer mehr allgegenwärtige Technologien sind in die tägliche Lebenswelt integriert – Displays – Vernetzte Objekte –… – Weareables

Mobile Learning

Trends und Zukunftsperspektiven (Specht, Kalz, Börner 2013)

Smartphones als persönliche Lernportale Ortsbasierte und kontextsensitive Lernportale Mobile Augmented Raeality Tangible Interfaces und smart-Objects Cloud-basiertes und unterbrechungsfreies Lernen • Mobile Lernspiele • • • • •

Mobile Learning Probleme

• Selbstbestimmtes Lernen, freie Entscheidung über Lernzeiten, Häufigkeit des Lernens, etc. → Vorteil aber auch Nachteil • Ablenkung durch Umgebung oder Mobilgerät selbst • Ausfall der Internetverbindung • Technische Probleme • Kenntnisse im Umgang mit der Technik

Zusammenfassung • Mobile Geräte neue Lernformen • Kontext ist immer zu betrachten, mobiler Kontext zwischen formalem und informellen Lernen • Mobiles Lernen vs. Seamless Learning vs. Ubiquitäres lernen

Weitere Seminarplanung • Kurze Gruppenvorstellung: ca. 20min Vorstellung Thema+10min Diskussion • Noch 6 Termine • 1.6., 8.6., 15.6., 22.6., 29.6., 6.7. • 13 Gruppen, 3 Gruppen pro Termin