Matthias Edler-Golla
matthias.edler-golla@hm.edu
http://matthias-edler-golla.de

• Definiton von „Interface Design“
• Kurzer geschichtlicher Abriss von verschiedenen Interfaces
• Double Diamond & Design Thinking
• Semester-Aufgabe
• Interview-Techniken für Phase 1 „Empatie“

1. Semester: Interaktion Grundlagen ✔
2. Semester: Interface Design – Gestaltung von Bildschirmoberflächen (Smartphone-Apps…)
3. Semester: Webdesign – Gestaltung und Programmierung einer Website (z.B. eigenes Portfolio zur Bewerbung fürs Praktikum…)
4. Semester: Digitales Prototyping – Erstellen von digitalen Prototypen; Kombination aus den drei anderen Kursen (Internet of Things-Anwendungen mit Arduino, Particle und Raspberry Pi…)

https://matthias-edler-golla.de/index.php/Interface/Sommersemester18

Interaction Design manifestiert sich somit im Interface …

Black Box Mensch kommuniziert mit oder mittels der Black Box Computer

Mensch-Maschinen-Interfaces können unterschiedliche Sinne des Menschen ansprechen:

• Haptische Wahrnehmung – wie fühlt sich die Hardware an (Knöpfe, Schieberegler …)?
• Visuelle Wahrnehmung – wie sieht die Bedienoberfläche aus, was verändert sich, wohin wird die Aufmerksamkeit gelenkt?
• Akustische Wahrnehmung – wie »antwortet« die Maschine, welche Geräusche macht das Gerät?
• Olfaktorische Wahrnehmung … wird momentan (zum Glück) noch nicht als Interface genutzt – oder doch?

Das Interface ist die (Schnitt-)Stelle, an der Menschen mit Maschinen eine Interaction durchführen.

In diesem Semester liegt der Schwerpunkt auf dem Graphical User Interfaces (GUI), das aktuell das am weitesten verbreitete Interface ist. Typischerweise haben Betriebssysteme, Computer-Programme, Websites, Smartphone-Apps ein GUI, um dadurch intuitiv bedienbar zu sein.

• Warum wäre sie nicht erfolgreich?
• Für welche Zielgruppe könnte die App trotzdem interessant sein?

Zum Vergleich: Der Inhalt einer Million Lochkarten füllte damit etwa eine 80-MB-Festplatte, eine in den 1970er Jahren übliche Größenordnung auf Großrechnern. Als einzelner Kartenstapel würde dies rechnerisch mit 170 Metern etwa die Höhe des Ulmer Münsters ausmachen, das Gewicht beträgt in trockenem Zustand etwa 2.500 kg, die etwa 100 kg Verpackung nicht mitgerechnet.

Zur Kommunikation mit dem Computer wurde zuerst eine Lochkarte vom System eingelesen, dann die Kalkulationen durchgeführt um dann wieder eine Lochkarte auszugeben – dazwischen konnten Stunden und sogar Tage liegen!

Der Benutzer muss genau wissen, wie die Befehle heißen …

Das CLI ist nach wie vor ein sehr erfolgreiches und flexibles Interface, der Benutzerkreis beschränkt sich jedoch auf Experten, die bereit sind, die teilweise kryptischen Befehle zu erlernen:

Console

# Die Option -r sorgt dafür, dass rekursiv bis zu einer Tiefe von 8 (-l 8) vorgegangen wird, 
# -k konvertiert die Links, so dass sie lokal funktionieren und -E erzwingt die Endung .html 
# für alle Dateien (ist dann nützlich, wenn .php- oder .asp-Seiten geladen werden.
wget -r -k -E -l 8 https://scripte.matthias-edler-golla.de

# Probiert das doch mal im Terminal aus!
# Wetterberiche für den kältestes Ort auf der Erde
curl wttr.in/Oymyakon

Satisficing (Experimentieren & Durchwursteln):

Man kann Buttons einfach mal ausprobieren und sehen, was passiert – das ist beim Eingeben von Befehlen viel schwerer möglich …

Durch die Entwicklung von Touchscreens haben sich die bisherigen Bedienmuster von grafischen Oberflächen (GUI) stark verändert. Während bisher künstliche Eingabegeräte, wie eine Tastatur oder eine Maus zur Interaktion nötig waren, genügt nun eine Fingerberührung. Smartphones, aber auch Fahrkartenschalter oder Bankautomaten nutzen diese direkte Form der Bedienung.

Wikipedia

Pro

• keine Buttons nötig
• keine Verschwendung der wertvollen Bildschirmfläche
• Übergreifende Funktionen können einheitlich dargestellt werden
• Experten können damit effizienter arbeiten, Anfänger sollten einfachere Methode zusätzlich angeboten bekommen

Contra

• kein visueller Hinweis, welche Gesten benutzt werden können und welche nicht
• Gesten müssen erlernt oder entdeckt werden
• häufig wird mehr als ein Finger benötigt
• nur relativ grobmotorische Bewegungen sind zuverlässig

wenn man z.B. in der eMail-Eingabe-Maske Text markiert und dann auf „Löschen“ klickt?

unser Design Prozess…

Der Kurs „Interface Design“ ist entsprechend des Double Diamond aufgebaut – genauso wie alle meine Semesterprojekte…

Empathie

• Was brauchen Menschen in einer bestimmten Situtation? (Interviews, Beobachtungen, Shadowing…)

Definieren

• Wie sehen typische Benutzer aus? (Personas)
• In welchem Kontext benutzen Menschen Eure App? (Szenarios)
• Wie sieht der Bedienablauf aus? (User-Story)

Ideen generieren

• Möglichst viele unterschiedliche Lösungsansätze generieren
• Aussichtsreiche Ansätze mit einfachen Paper Prototypen testen

Prototyping

• Wireframing
• Marvel

Prototypen testen

• User Tests (interativ mit Verbesserungen & Korrekturen)

Realisieren

• Plattform festlegen
• entsprechende Human Interface Guidelines beachten
• Detaillierte Ausarbeitung (Raster, Farben, Icons, Schrift)
• Finaler Prototyp (Marvel oder Invision)
• Styleguide zur Übergabe an Entwickler

Vorstellbar sind Sachen wie Blutdruck-, Blutzucker, Alkoholmesser, Babyphones, Temperatur-Verhütungs-Geräte, Trainingsgeräte, Werkzeuge (…), die den Touchscreen des Smartphones als Interface nutzen. Dazu kann das Smartphone mit einer zusätzliche Hardware verbunden werden.

Achtung: Der Schwerpunkt liegt nicht auf der Gestaltung der Hardware, sondern auf dem SmartPhone-Interface! Euer gewähltes Thema muss deshalb genügend Möglichkeiten zur Gestaltung von Bildschirm-Elementen haben!

Team-Projekt (3 Leute)

Abgabe/Präsentation am Ende des Semesters!

Die Zwischenpräsentation findet am 24.5.2018 statt!

• Personas & Szenarios
• Konzept
• Paper-Prototypen
• Ergebnisse der User-Tests

Mehr dazu in den nächsten Vorlesungen…

• Gruppy X
• Gruppy Y

Alltag, Hobby, Beruf, Sport, Behinderung…

Buchempfehlung

DARK HORSE INNOVATION: Digital Innovation Playbook ISBN 978-3867745567

Wie bei einer Zwiebel müssen wir mit geschickten Fragen Bedürfnisschicht um Bedürfnisschicht freilegen, bis wir an den Kern – das heißt in das Innerste des Menschen – stoßen.

Zur Vorbereitung der Interviewfragen könnt Ihr die oben abgebildet Vorlage verwenden:

Meta-Level

• Themenbereiche (z.B. Sport, Ernährung, Haushalt, Krankheit…), die Ihr mit den Interviewpartnern besprechen wollt
• übergeordnete Struktur des Interviews – dies sollte auch die ungefähre Reihenfolge der Fragen während des Interviews beinhalten

Allgemeine Fragen

Die Fragen-Gerüste Was bedeutet … für Dich und Was verbindest Du mit … passen immer. Ihr Thema ergibt sich aus dem im Meta-Level-Kreis notierten Schlagworte: Was bedeutet Sport für Dich? Was verbindest Du mit Krankheit…

Üblicherweise erhalten wir mit diesen Fragen einen guten Einblick in die esten Gedanken des Users zum Interviewthema.

Erlebnisfragen

Wir wollen nicht direkt nach Problemen oder Bedürfnissen fragen, denn unsere Interviewpartner können sie in den seltensten Fällen richtig und vollständig benennen. Zielführender sind Fragen nach Erlebnissen, Geschichten und Erfahrungen. Sie enthalten die ungefilterten Informationen, wir wir später in Bedürfnisse und Hindernisse übersetzen können. Erlebnisfragen nehmen den größten Teil eines Interviews ein.

Beispielfragen

• Erzähle mir von deiner Erfahrung mit…?
• Warum ist … für dich wichtig?
• Was ist Dir daran wichtig? Und warum?

Positive Erlebnisse

• Was war deine beste Erfahrung mit …? Warum?
• Erzähle mir vom schönsten Erlebnis! Warum war es schön?
• Was sind Glücksmomente in Bezug auf …? Warum?
• Was waren Erfolge bei …?

Negative Erlebnisse

• Was waren schlechte Erfahrungen mit …? Warum?
• Erzähle uns vom schlimmsten Erlebnis? Warum war es so schlimm?
• Was ärgert und frustriert dich beim …? Warum?
• Was waren Misserfolge bei …?

Überraschende Erlebnisse

• Was hat Dich schon mal überrascht bei …? Warum?
• Erzähle uns von etwas, das für dich überraschend war? Warum war es überraschend?

Spezifische Fragen

Damit können wir noch einmal nach besonderen Erlebnissen oder Dingen fragen, die für unsere Recherche besonders wichtig sind – Beispiel:

• Wann hast du das letzte Mal … gemacht? Warum?

Wunschfragen

Erst am Ende des Interviews könnt Ihr die Wunschfrage stellen! Stellt Ihr die Wunschfrage zu früh, fühlen sich die Interviewten verleitet, Lösungsszenarien für Euch zu entwickeln. Nutzer können Euch meist nicht die Lösungen liefern – trotzdem könnt Ihr aus den geäußerten Wünschen Inspiration schöpfen.

• Du hast einen Wunsch frei, welcher wäre es? Warum?
• Wie stellst du Dir … in der Zukunft vor? Wie sieht es aus? Warum?

Download der Vorlage

Interview-Leitfaden-Vorlage von digital-innovation-playbook.de/templates/explore

Weiterführendes

The Art of the User Interview

Versucht Eure Interviews dort durchzuführen, wo Eure Nutzer später die App einsetzen werden!

Dort besteht eine gute Chance, dass Euch noch einige andere Sachen auffallen werden, die für Euer Konzept wichtig sein werden!

Menschen können sehr schlecht ihr eigenes Verhalten in Gänze beschreiben. Wenn wir aber immer wieder nachhaken, dann bringen wir sie dazu, über ihr Verhalten nachzudenken.

Es gibt keine dumme Fragen!

Wenn wir das erste Mal die Warum-Fragen mehrfach stellen, werden wir uns dumm vorkommen. Aber ohne Nachfragen und Nachbohren kommen wir den tiefer liegenden Erkenntnissen nicht auf die Spur!

Erinnert Ihr Euch noch an den Habituation-Film, den ich Euch im Wintersemester gezeigt habe?

Eine wichtige Fähigkeit von Designer*innen ist es, wieder wie Kinder zu sehen – aber auch wie Kinder Fragen zu stellen!

Folgende Rollenverteilung hat sich für uns in der Praxis bewährt: Einer von uns ist der beste Freund. […] Neben dem besten Freund sitzt der Inspektor. […] Er/sie verhält sich während des Gesprächs so neutral wie möglich, wie ein unsichtbarer Beobachter.

Beste Freundin

führt das Gespräch, geht auf den Interviewten ein, versucht dessen Bedürfnisse zu erforschen. Sie lässt sich voll und ganz auf dessen Interpretation der Welt ein. Dabei versucht der beste Freund, das größte Maß an Empathie aufzubringen. Dabei hinterfragt er auch immer die Angaben des Interviewten, mit Neugier und (fast) ohne Skepsis – eben wie eine allerbeste Freundin, die helfen will.

Wenn wir die Rolle des besten Freundes einnehmen, wollen wir, dass es idealerweise keine gesellschaftlichen Hierarchien zwischen uns und unserem Interview-Partner gibt. Das ist auch wichtig für Kleidung und Auftreten.

Inspektor

Ihre Aufgaben sind das Mitschreiben und die Bebachtung der Körpersprache des Interviewten.

Die Distanz zum eigentlichen Gespräch ermöglicht dem Inspektor, die Aussagen der Interviewten in der späteren Analyse des Gesprächs deutlich kritischer zu bewerten.

Rollenwechsel

Wenn Ihr mehrere Interviews führt, empfehle ich Euch, die Rollen auch mal zu wechseln, so dass jede(r) von Euch ausprobieren kann, welche Aufgabe Euch leichter fällt…

• Welchen Eindruck hat Euch die Interviewte vermittelt?
• Was waren eventuelle Schlüsselsätze?
• Was ist das Eindrücklichste, das Ihr gerade erlebt habt?

Die ersten Eindrücke eines Interviews verfliegen sehr schnell. Deshalb ist es wichtig, sofort danach eine erste kurze Analyse durchzuführen und die wichtigsten Punkte festzuhalten!

Download der Vorlage

Interview-Auswertungs-Vorlage von digital-innovation-playbook.de/templates/explore

1. Auf jedem Post-It stehen maximal fünf große Worte. Das muss die Essenz sein -- mehr liest niemand!
2. Visualisieren: weil wir visualisierte Informationen viel schneller erkennen und verarbeiten können
3. Jede(r) schreibt und visualisiert: die eigenen Gedanken bringt jede(r) selbst am besten auf den Punkt
4. Schreiben, zuhören, mitdenken, weiterdenken: Wir teilen jedes Post-it im Team. Damit das funktoniert, müssen wir gleichzeitig schreiben, zeichnen, zuhören, mit- und weiterdenken – und wenn was unklar ist, natürlich nachfragen

Auswahlkriterien

• Interesse am Thema in der Gruppe
• Möglichkeit, 4 bis 5 Leute zu interviewen, die etwas mit dem Thema zu tun haben

Lynda.com bietet zu ganz vielen Themen gute Video-Tutorials an – schaut Euch dort mal um! Zum Anmelden braucht Ihr Eure hm.edu-Zugangsdaten – dann sind die Kurse für Euch kostenlos!

Interface Design

Für Interface Design gibt es auch ein paar Filme – ich gebe Euch als Hausaufgaben jeweils Links zu passenden Filmen → nächste Seite

Bitte schaut Euch im Online-Kurs „User Experience Grundlagen“ folgende Videos an:

1. Willkommen zu “User Experience Grundlagen: User Research“
2. User Research – entscheidend für den Erfolg
3. Wir tun nicht, was wir sagen
4. Verhalten oder Meinungen?
5. Generelles Vorgehen für jedes Interview
6. Nutzerbefragungen und Interviews
7. Contextual Inquiry – Kontextanalyse – teilnehmende Beobachtung

Die Filme sind jeweils nur wenige Minuten lang…

1. Pro Team entscheiden, welches Themenfeld Ihr bearbeiten möchtet
2. Überlegt, ob Ihr Leute kennt, die sich mit dem Thema auskennen und bereit sind, sich interviewen zu lassen
3. Recherchiert, ob es für das Thema schon eine App oder ein Gerät gibt
   • Falls ja: Was kann App/Gerät, was funktioniert, was funktioniert nicht so gut?

Interview-Vorbereitung

• Kann man passende Leute interviewen? (Idealerweise in der Umgebung, in der die App verwendet werden soll)
• Kann man den Leuten zusehen?
• Kann man evtl. etwas im geplanten Bereich selbst ausprobieren?

Bitte verwendet dazu den gerade vorgestellten Interview-Leitfaden und füllt diesen bis zum nächsten Mal passend zu Eurem Thema aus!