Einführung Interface Design / 2018-03-22 / Matthias Edler-Golla, CC BY-SA 4.0


|



 



Hallo!


Themen heute

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

Unterricht bei mir

Bei mir habt Ihr innerhalb der ersten 4 Semester aufeinander aufbauende Module, die alle direkt oder indirekt mit Interaction Design zu tun haben:

  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…)

Website zum Kurs


Interaction Design ist unsichtbar

Sky, CC von Will Powell

Das Interface ist die Schnittstelle zwischen Mensch und Maschine; es ermöglicht es erst, dass Mensch und Maschine interagieren …

Interaction Design manifestiert sich somit im Interface …


Interface: Schnittstelle

Der Begriff stammt ursprünglich aus der Naturwissenschaft und bezeichnet die physikalische Phasengrenze zweier Zustände eines Mediums. Er beschreibt bildhaft die Eigenschaft eines Systems als Black Box, von der nur die „Oberfläche“ sichtbar ist, und daher auch nur darüber eine Kommunikation möglich ist. Zwei benachbarte Black Boxes können nur miteinander kommunizieren, wenn ihre Oberflächen „zusammenpassen“.

Black Box Mensch kommuniziert mit oder mittels der Black Box Computer


Interface: Mensch-Maschine-Schnittstelle

Laptop-Compubody-Sock von Becky Stern

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?

Interface Design

Im Teilmodul „Interface Design“ werden die Grundlagen der Gestaltung von unterschiedlich komplexen Mensch-Maschinen-Schnittstellen mit einem Schwerpunkt auf „Graphical User Interfaces“ (GUI) bzw. „Natural User Interfaces“ (NUI) behandelt. In einem Schritt für Schritt Prozess wird den Studierenden der Weg von einfachen Paper-Prototyping über Wireframing bis hin zur detaillierten Ausgestaltung von Interfaces vermittelt.

Modulhandbuch FK12

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.


Wäre dies eine erfolgreiche App?

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

Lochkarten Interface

Hollerith Punched Card, Wikipedia Commons

Eine Lochkarte war ein aus zumeist hochwertigem Karton gefertigter Datenträger. In der Datenverarbeitung wurde sie zur Datenerfassung und -Speicherung verwendet. In ihr wurden die Dateninhalte durch einen Lochcode abgebildet, der mithilfe von elektro-mechanischen Geräten erzeugt und verarbeitet wurde.

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!


CLI – Command Line Interface

A command-line interface (CLI) is a means of interaction with a computer program where the user (or client) issues commands to the program in the form of successive lines of text (command lines).

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

Recognition Over Recall

Memory for recognizing things is better than memory for recalling things

Universal Principles of Design, S. 164

Satisficing (Experimentieren & Durchwursteln):

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


GUI – Graphical User Interfaces

GUIs sind seit den 80-er Jahren das dominante Interface mit einem eigenen Vokabular an User Interface Design Patterns und GUI Widgets


NUI – Natural User Interfaces

leapmotion.com

Natural User Interfaces (NUI) oder „Reality Based User Interfaces" ermöglichen dem Nutzer eine direkte Interaktion mit der Bedienoberfläche durch Wischen, Tippen, Berühren, Gesten oder Sprache.

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


Gestensteuerung: Pro und Contra

Android 8

Gestures add a welcome feeling of activity to the otherwise joyless ones of pointing and clicking. But the lack of consistency, inability to discover operations, coupled with the ease of accidentally triggering actions from which there is no recovery threatens the viability of these systems.

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

Frage an Euch:

Wer von Euch weiss, wie man versehentlich gelöschten Text bei iOS wieder herstellen kann?

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


Semester-Planung

unser Design Prozess


Human Centered Design

Wir fangen immer bei den Wünschen und Bedürfnissen der Menschen an – erst dann kommen die anderen Überlegungen!

Double Diamond, British Design Council

Divided into four distinct phases – Discover, Define, Develop and Deliver – the Double Diamond is a simple visual map of the design process.


Double Diamond: Divergent und Konvergent

In all creative processes a number of possible ideas are created (‘divergent thinking’) before refining and narrowing down to the best idea (‘convergent thinking’), and this can be represented by a diamond shape. But the Double Diamond indicates that this happens twice – once to confirm the problem definition and once to create the solution.


Double Diamond

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


Design Thinking & Double Diamond


Design Thinking = Kursstruktur

Der Aufbau des Kurses „Interface Design“ entspricht der Vorgehensweise von Design Thinking

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

Semester-Aufgabe: SmartPhone mit Add-On

YUBZ Retro Handset

Durch welche Hardware-Add-Ons lassen sich Smartphones sinnvoll erweitern? Wie schaut Bedienung & Interface dabei aus?

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!


Zwischenpräsentation

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…


Auslosen der Team-Mitglieder

Seven von Niklas Morberg


Phase 1: Empathie

Bild von Elvert Barnes

Was brauchen Menschen in einer bestimmten Situtation – wie kann ihnen dabei mit einer Smartphone-App geholfen werden?

Alltag, Hobby, Beruf, Sport, Behinderung…


Qualitative Interviews

Interview von Heinrich-Böll-Stiftung

Das qualitative Interview hilft uns, konkrete Informationen zu sammeln und lebensechte Erkenntnisse über unsere Nutzer und deren Lebenswelt zu erlangen.


Bedürfnisse sind dynamisch

Bedürfnisse nach Maslow: Dynamische Darstellung der Bedürfnishierarchie – Überlappungen sind dabei möglich und zu einem Zeitpunkt oft mehrere Bedürfnisse (aus verschiedenen Kategorien) aktiv → Wikipedia

Bisher hat unsere theoretische Diskussion den Eindruck erweckt, dass diese fünf Sätze von Bedürfnissen irgendwie in einer schrittweisen, all-oder-keiner Beziehung zueinander sind. Wir haben so gesprochen: ‚Wenn ein Bedürfnis erfüllt ist, so entsteht ein anderes.‘ Diese Aussage könnte den falschen Eindruck vermitteln, dass ein Bedürfnis 100 Prozent erfüllt sein muss, bevor die nächste Notwendigkeit entsteht.


Die Bedürfnisszwiebel

Weil wir mithilfe der qualitativen Interviews nach tief verborgenen, bisher unerfüllten Bedürfnissen suchen, müssen wir erst durch jene Bedürfnisse „hindurchfragen“, die für den Nutzer offensichtlich und leicht zu benennen sind.

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.


Interview-Leitfaden

Die meisten Menschen können Anforderungen und Erwartungen an ein Produkt recht klar formulieren, doch dies reicht uns nicht! Wir wollen die Wünsche des Nutzers erfahren, tiefer liegende Bedürfnisse erfassen – und diese dann mit unserer Lösung befriedigen.

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


Contextual Interview

Workshop von Oleksii Leonov

During these interviews, researchers watch and listen as users work in the user’s own environment, as opposed to being in a lab. Contextual interviews tend to be more natural and sometimes more realistic as a result.

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!


Five-Why-Technik

KIDS von Sayad Mohammad Hooseiny

Warum-Fragen müssen sein. Sie sind das Salz in der Interview-Suppe!

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!


Interview-Rollen

Bild von Boris Baldinger

Jedes Interview sollte von zwei Interviewern geführt werden. Dieses Ungleichgewicht zwischen einem Interviewten und zwei Interviewern federn wir mit klar verteilten Interviewrollen ab.

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…


Schnelle Auswertung nach dem Interview

Unmittelbar nach dem qualitative Interview müssen sich Inspektor und beste Freundin austauschen!

  • 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


Post-Its: Vier Regeln

User by caba kosmotesto from the Noun Project

Wir benutzen Post-its wie ein Inhaltsverzeichnis: Hinter jedem einzelnen verbirgt sich ein Informationspaket

  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

Welches Themenfeld?

Bitte einigt Euch bis zum nächsten Mal, welches Themenfeld Ihr innerhalb Eurer Gruppe bearbeiten möchtet

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

https://lynda.com/

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


Bis zum nächsten Mal (1)

lynda-Kurs: User Experience Grundlagen: User Research


Bis zum nächsten Mal (2)

Digital Innovation Playbook, Seite 80

Bitte macht die Sachen innerhalb Eurer Gruppe!

  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!


Danke!

Weitere Vorträge: