Mensch-Maschine-Interaktion

1 LMU München · LFE Medieninformatik · Mensch-Maschine Interaktion (Prof. Dr. Florian Alt) · SS2016

Kapitel 9 - Einige Grundmuster grafischer Benutzerschnittstellen• Ein Entwurfsmuster: Model-View-Controller • Zoomable UIs • Fokus & Kontext

2 LMU München · LFE Medieninformatik · Mensch-Maschine Interaktion (Prof. Dr. Florian Alt) · SS2016

Model View Controller

3 LMU München · LFE Medieninformatik · Mensch-Maschine Interaktion (Prof. Dr. Florian Alt) · SS2016

Benutzer

Model

View

Con-troller

aktuali-siert

modi-fiziert

mani-puliert

sieht

Model

View 1

Con-troller

View 2

MVC Beispiel: Finder bzw. Explorer

4 LMU München · LFE Medieninformatik · Mensch-Maschine Interaktion (Prof. Dr. Florian Alt) · SS2016

MVC Beispiel: 3D Modellierung (hier: Blender)

5 LMU München · LFE Medieninformatik · Mensch-Maschine Interaktion (Prof. Dr. Florian Alt) · SS2016

Kapitel 9 - Einige Grundmuster grafischer Benutzerschnittstellen• Ein Entwurfsmuster: Model-View-Controller • Zoomable UIs • Fokus & Kontext

6 LMU München · LFE Medieninformatik · Mensch-Maschine Interaktion (Prof. Dr. Florian Alt) · SS2016

…Das derzeit wohl bekannteste ZUI…

7 LMU München · LFE Medieninformatik · Mensch-Maschine Interaktion (Prof. Dr. Florian Alt) · SS2016

Urelter aller ZUIs: PAD (1993) und PAD++

8 LMU München · LFE Medieninformatik · Mensch-Maschine Interaktion (Prof. Dr. Florian Alt) · SS2016

Zoomable User Interfaces

9 LMU München · LFE Medieninformatik · Mensch-Maschine Interaktion (Prof. Dr. Florian Alt) · SS2016

Geometrischer vs. Semantischer Zoom

10 LMU München · LFE Medieninformatik · Mensch-Maschine Interaktion (Prof. Dr. Florian Alt) · SS2016

Ein ZUI für Präsentationen: Prezi

11 LMU München · LFE Medieninformatik · Mensch-Maschine Interaktion (Prof. Dr. Florian Alt) · SS2016

Ein ZUI für Präsentationen: Prezi

12 LMU München · LFE Medieninformatik · Mensch-Maschine Interaktion (Prof. Dr. Florian Alt) · SS2016

Kapitel 9 - Einige Grundmuster grafischer Benutzerschnittstellen• Ein Entwurfsmuster: Model-View-Controller • Zoomable UIs • Fokus & Kontext

13 LMU München · LFE Medieninformatik · Mensch-Maschine Interaktion (Prof. Dr. Florian Alt) · SS2016

Overview & Detail gleichzeitig in einem ZUI?

14 LMU München · LFE Medieninformatik · Mensch-Maschine Interaktion (Prof. Dr. Florian Alt) · SS2016

Fisheye Objektiv: verschiedene Maßstäbe

15 LMU München · LFE Medieninformatik · Mensch-Maschine Interaktion (Prof. Dr. Florian Alt) · SS2016

Bildautor: mjposner, Quelle: http://en.wikipedia.org/wiki/File:Car_Fisheye.jpg

Fisheye Views auf abstraktere Daten

16 LMU München · LFE Medieninformatik · Mensch-Maschine Interaktion (Prof. Dr. Florian Alt) · SS2016

Further UI Design Patterns

17 LMU München · LFE Medieninformatik · Mensch-Maschine Interaktion (Prof. Dr. Florian Alt) · SS2016

Jennifer Tidwell: Designing Interfaces - Patterns for Effective Interaction Design, 2nd edition, O’Reilly 2011

Tidwell Beispiel: Two-Panel Selector

18 LMU München · LFE Medieninformatik · Mensch-Maschine Interaktion (Prof. Dr. Florian Alt) · SS2016

Tidwell Beispiel: Illustrated Choices

19 LMU München · LFE Medieninformatik · Mensch-Maschine Interaktion (Prof. Dr. Florian Alt) · SS2016