Incom ist die Kommunikations-Plattform der Fachhochschule Potsdam

In seiner Funktionalität auf die Lehre in gestalterischen Studiengängen zugeschnitten... Schnittstelle für die moderne Lehre

Incom ist die Kommunikations-Plattform der Fachhochschule Potsdam mehr erfahren

BOOM - Keep your conversation alive.

Wie sieht eine gute Nutzeroberfläche aus? Wie funktioniert sie und was macht sie leicht zugänglich und verständlich? Diesen Fragen stellten wir uns im Kurs „Interfaces de-constructed“, zunächst unter der Leitung von Prof. Matthias Krohn, später mit Frank Rausch und Timm Kekeritz. Als Grundlage dieser Aufarbeitung kreierten wir selber eine App und deren Prototyp.

1. Einleitung

In der Aufgabenstellung hatten wir die Wahl eine taskbasierte App wie einen Messenger oder eine Fitness-App, oder eine contentbasierte App wie eine Musik-, Sport- oder Museumsapp zu entwickeln. Wir entschieden uns für einen Messenger. Wir Menschen kommunizieren tagtäglich mit Messenger-Apps, die viele Vorteile, aber auch Nachteile bieten. Es stellten sich die Fragen, warum bestimmte Messenger viel und gerne genutzt werden und andere nicht, warum lieber geschrieben als direkt per Telefonat oder persönlichem Gespräch kommuniziert wird und wie Messenger unsere Kommunikation in der Zukunft noch gestalten und beeinflussen werden.

2.1 Das Problem der digitalen Kommunikation

WhatsApp Image 2017-11-19 at 21.04.32.jpegWhatsApp Image 2017-11-19 at 21.04.32.jpeg

Digitale Kommunikation hat sich in den letzten zwei Jahrzehnten rasant verändert. Die Nutzung von E-Mail in den 90er Jahren gleichte noch eher der vorsichtigen Komposition eines Briefes als einem tatsächlichen Gespräch. Seit es aber SMS und Instant Messaging Systemen, wie ICQ oder MSN, gibt, wird digitale Kommunikation immer mehr in ihrer Nutzung realen Gesprächen gleichgestellt und hat darüber hinaus eine neue Form der Sprachnutzung ergeben, die durch die Eingliederung von Zeichensprache und Akronymen in vielerlei Hinsicht über das gesprochene Wort hinausgewachsen ist. Nichts desto trotz ist wörtlicher Rede immer noch der Kern zwischenmenschlicher Kommunikation. Digitale Kommunikation - so effizient sie auch sein mag - ist immer noch „nur“ ein Ersatz dessen. In dieser Einsicht sahen wir die Kernfragestellung für unser Projekt: Wie bringen wir Instant Messaging so nah wie möglich an das Erlebnis eines realen Gesprächs heran?

2.2 Analyse digitaler Kommunikation

Aus der Kernfragestellung ergaben sich zwei Kategorien, in denen sich die aktuelle Form von Instant Messaging von realen Gesprächen unterschieden.

  1. Zeit Während man sich in einem Gespräch gegenübersteht und eine direkte Antwort, wenn man so will, gesellschaftliche Etikette ist, können beim Instant Messaging Stunden, teilweise Tage vergehen, bevor man eine Antwort erhält. Diese zeitliche Distanz kreiert eine inhaltliche Distanz zum Gesprächsthema. Man vergisst, unter welchen Umständen man alte Nachrichten verfasst hat, teilweise auch was man selber damit meinte. Folglich fehlt einem dann auch der Bezug, zu dem was das gegenüber geschrieben hat. Nachrichten verlieren ihre Relevanz.

  2. Kontext Redet man im realen Leben miteinander, bekommt man sehr viel mehr Kommunikationsebenen mit - sei es ein räumlicher Umstand Mimik, Gestik, oder Betonung des Gesagten. Diese zusätzlichen Ebenen helfen bei der inhaltlichen Auseinandersetzung, einander besser zu verstehen. Fehlkommunikation wird minimiert. Sowas sieht man z.B. sehr deutlich bei der Nutzung von Sarkasmus, der in geschriebener Form nur teilweise oder gar nicht funktioniert und somit die Bedeutung der Nachricht völlig verändert.

Wir entschieden uns, die Problematik unter dem zeitlichen Aspekt zu bearbeiten.

2.3 Lösungsansätze

Wir erarbeiteten drei Lösungsansätze.

  1. Average Response Time (ART) Nutzer erhalten Einsicht in die durchschnittliche Antwort-Zeit des Gegenübers. Aus allen Antworten, die man jemals verschickt hat, wird ein Durchschnitt ermittelt, nach dem man die Freunde anhand ihrer „Zuverlässigkeit“ vergleichen kann. Es wäre eine Quantifizierung zwischenmenschlichen Kontakts. 2. Selbstzerstörungs-Timer Nachrichten zerstören sich eine gewisse Zeit, nachdem sie gelesen wurden - es sei denn man antwortet innerhalb der Timer-Zeit. So wird man dazu motiviert, zu antworten und die Konversation fortzuführen.
  2. Callchat Eine Person telefoniert, die andere chattet mithilfe der Tastatur - beides im selben Gespräch. Fertige Callchats werden als Protokolle abgespeichert und sind wie Chatverläufe einsehbar.

Nach Besprechen dieser Ideen im Kurs, entschieden wir uns für den Selbstzerstörungs-Timer.

3. Recherche

Um uns ein besseres Bild zu machen, schauten wir uns Messenger Apps an, die eine Selbstzerstörungsfunktion hatten. Dabei wollten wir herausfinden, welche Variationen es gibt und was dabei priorisiert wird.

Messenger Research3.pngMessenger Research3.png
Messenger Research.pngMessenger Research.png
Messenger Research4.pngMessenger Research4.png
Messenger Research2.pngMessenger Research2.png
Messenger Research5.pngMessenger Research5.png

In den meisten Apps dient die Selbstzerstörungsfunktion als Mittel zur Verteidigung der Privatsphäre. Es geht darum, dass Nachrichten nicht mehr existieren, um dem Nutzer zu versichern, dass niemand mehr auf diese Nachrichten zugreifen kann. Die Timer, die dabei eingesetzt werden, fangen bereits beim Senden an und können durch nichts gestoppt werden. Es gibt ein vorgegebenes unflexibles Zeitfenster, in dem die Nachricht gelesen werden kann bzw. muss.

Bei unserer Idee geht es um das Lesen, also darum, dass die Nachricht auch wirklich ankommt. Der Timer soll dazu da sein, das Gegenüber unter Druck zu setzen und eine Antwort zu provozieren. Er geht soll erst losgehen, sobald die Nachricht als gelesen markiert wurde.

4. Entwurfsprozess

Farb- und Formwirkungsstudien

Poster2.pngPoster2.png

4.1 LoFi

Zunächst haben wir uns Gedanken gemacht, wie man das Self-Destruct-Feature in die etablierte Messenger Struktur einbauen könnte und welche Form es annehmen könnte. Beim Self-Destruct-Timer stellt sich in erster Linie die Frage, wie und wo er gezeigt wird. Er muss stehts in klaren Bezug zur Nachricht stehen, an die er angehängt wurde, darf den Inhalt der Nachricht aber nicht überschatten. Wir haben hier noch in Erwägung gezogen, einen Deadline-Timer einzubauen, der einem Zeit bis zur Deadline gibt, um zu antworten. Zusätzlich gab es noch die Idee, man könnte sogenannte Emergency-Messages verschicken, die wie alarmartig die Aufmerksamkeit des Gegenübers erwecken sollen.

Poster3.pngPoster3.png

Wir entschieden uns jedoch, uns auf das Kern-Feature zu fokussieren und die App möglichst minimalistisch zu halten. Self-Destruct-Nachrichten als Mittel der Dringlichkeit (und nicht Datenschutz) erinnerten uns an die selbstzerstörenden Nachrichten aus dem Mission Impossible Franchise, in dem CIA Agent Ethan Hunt Missionsaufträge bekommt, die „sich in 5 Sekunden selbstzerstören“ - oft in explodierender Form. So kamen wir auf den Namen Boom Messenger.

4.2 Bomben-Metapher

Wir entwarfen die App für Android mit dem noch relativ jungen Prototyping-Tool Adobe XD. Farben und Frameworks der Screens basieren auf dem Material Design Styleguide.

Boom Messenger2.pngBoom Messenger2.png
Boom Messenger.pngBoom Messenger.png
Boom Messenger3.pngBoom Messenger3.png

Wir mussten eine kontinuierliche Formsprache finden, die den Timer über den Chat hinaus erkennbar und seinen aktuellen Status identifizierbar macht. Dafür bauten wir weiter auf der Bomben-Metapher auf und nutzten Farbe zur Kodierung von aktivierten Timern.

Die Problematik lag nämlich nicht nur in der Unterscheidung zwischen aktiven und inaktiven Timern, sondern auch zwischen gesendeten und empfangenen Timern, und zwischen gelöschten Nachrichten und Nachrichten, bei denen der Timer gestoppt wurde, dementsprechend auch zwischen einer noch ausstehenden Selbstzerstörung, einer bereits passierten Selbstzerstörung und einer verhinderten Selbstzerstörung.

4.1 Paper Prototyp

Timer Material Optik.jpgTimer Material Optik.jpg
Timer Boom Layover.jpgTimer Boom Layover.jpg
Timer Balken.jpgTimer Balken.jpg
Timer Filter.jpgTimer Filter.jpg

Wir gingen diese Problematik vielschichtig an. Der Paper Prototyp zum Beispiel diente der Realisierung bestimmter Interaktionskonzepte. Wir konnten so auch in Bezug auf Material Design neue Wege finden Informationen zu visualisieren und Funktionen kenntlich zu machen.

Das BOOM

Was die Animation anging, haben wir auch im Screen Design experimentiert - einerseits, wie wir die Zeit visualisieren und andererseits, wie wir die Löschung der Nachricht bzw. die „Explosion“ visualisieren.

Chat Boom Effekt – 9.pngChat Boom Effekt – 9.png
Chat Boom Effekt – 3.pngChat Boom Effekt – 3.png
Chat Boom Effekt 1.pngChat Boom Effekt 1.png
Chat Timer Go – Info.pngChat Timer Go – Info.png
Chatlist Boom Effekt – 1.pngChatlist Boom Effekt – 1.png
Chat Boom Effekt 2.pngChat Boom Effekt 2.png

5. Formsprache

Neue Ikonografie

Visualizing Booms.pngVisualizing Booms.png

Diese Legende zeigt an, wie die Icons, die über Timer-Aktivitäten informieren sollen, kodiert sind und wie sie zu verstehen sind.

Farben

Mit Orange (#FF3D00) als Akzentfarbe ist noch etwas aus der Farbstudie geblieben. Es deutet auf Aktivität und erweckt Aufmerksamkeit. Grau (#717172) zeigt dagegen Inaktivität an. Weiß (#FFFFFF) und Hellgrau (#F9F9FA) (fast weiß) sind Hintergrundfarben, wobei Weiß in empfangen Nachrichten die Hintergrundfarbe der Textblase ist, um das Empfangene gegenüber dem Gesendeten (dunkleres Hellgrau (#DCDEE4)) hervorzuheben, und in allen Hintergründen, die keine Chats sind. Denn in Chats soll das Hellgrau an Papier erinnern und somit den Fokus auf schriftliche Kommunikation lenken. Das Schwarz (#181818) wird hier neben Schrift- auch als Werkzeug-Farbe verwendet. Es soll eine Aktions-Option andeuten (Tastatur, Icons, Sidebar, etc.).

Erklär-Screens4.pngErklär-Screens4.png

Endpräsi2.pngEndpräsi2.png

6. Die App

Zunächst haben wir uns grundlegend mit den Problemen, die Messenger heutzutage noch haben und was sie nicht leisten können, auseinandergesetzt. Daraus wurde schnell klar, dass durch die zeitlichen Abstände, in denen geantwortet wird, eine große Distanz entsteht - nicht nur emotional sondern auch logisch. Zusammenhänge gehen verloren und Nachrichten verlieren ihre Wichtigkeit. Deshalb kreierten den Messenger „Boom“, bei dem Nachrichten nach einer bestimmten Zeit gelöscht werden. Das Gegenüber wird so gezwungen schnell zu antworten, sodass Konversationen mehr Nähe bekommen.

Erklär-Screens.pngErklär-Screens.png

Erklär-Screens2.pngErklär-Screens2.png

Erklär-Screens3.pngErklär-Screens3.png

6.1 Klick-Prototyp

6.2 Animierter Prototyp

6.3 Reviews

Endpräsi3.pngEndpräsi3.png
Endpräsi4.pngEndpräsi4.png

7. FAZIT

Insgesamt war das Ergebnis zufriedenstellend. Wir haben auf unserem theoretischen Ansatz aufgebaut und eine Lösung für unsere anfängliche Problematik gefunden.

Unser Ansatz mag als kontrovers und provokant betrachtet werden, doch das ist für uns das interessante an diesem Projekt. Nutzern wird die Möglichkeit gegeben, die Distanz zu überbrücken, zu nerven und zum Gegenüber durchzudringen, was sonst so einfach nicht möglich ist. Denn egal was man macht, in der persönlichen digitalen Sphäre hat jeder die Macht, sein Gegenüber zu ignorieren - egal, wie viele Nachrichten kommen. In einem realen Gespräch ginge das nicht. Theoretisch könnte man, aber soziale Konventionen verbieten ein solches Verhalten. Diese Konventionen übertragen sich nicht immer auf digitale Unterhaltungen. Denn digitale Kommunikation ist Service-geprägt. Das heißt, jeder Nutzer ist Kunde, und jede Unbequemlichkeit - etwa eine soziale Konvention - wird beseitigt, um die User Experience zu optimieren. So setzt die digitale Kommunikation ihre eigene Entwicklung fort. Und für die Zukunft (und Gegenwart) müsste man unseren anfänglichen Vergleich mit dem wörtlichen Gespräch einfach umdrehen: nicht mehr „Wie beeinflusst gesprochene Sprache die digitale Kommunikation?“, sondern „Wie beeinflusst digitale Kommunikation gesprochene Sprache?“.

Die Umsetzung der Prototypen hätte noch mit einer Animationslastigen Prototyping-Software besser sein können. Gegen Ende der Bearbeitungsphase stellte sich heraus, dass unsere App einige Mikro-Interaktionen und Animationen haben würde, womit wir rückblickend bei einer Code-lastigeren Software besser aufgehoben gewesen wären. Wir hatten uns allerdings recht früh für Adobe XD entschieden, was für seinen Teil gut geeignet ist, um Screens zu gestalten und die im Stile eines Klick-Prototypen miteinander zu verbinden.

Fachgruppe

Kommunikationsdesign

Art des Projekts

Studienarbeit im ersten Studienabschnitt

Betreuung

foto: MK foto: Frank Rausch foto: Timm Kekeritz

Zugehöriger Workspace

Interfaces de-constructed.

Entstehungszeitraum

Wintersemester 2017 / 2018