»Laws of UX« von Jon Yablonski

Gestern ging die Webseite Laws of UX (lawsofux.com) von Jon Yablonski online. Er präsentiert damit ein Regelwerk mit den wichtigsten Punkten, die ein Designer beim Erstellen von Benutzeroberflächen berücksichtigen sollte. Eine großartige Arbeit, die theoretische Inhalte hervorragend mit guter Gestaltung verbindet.

Gestern ging die Webseite Laws of UX (lawsofux.com) von Jon Yablonski online. Er präsentiert damit ein Regelwerk mit den wichtigsten Punkten, die ein Designer beim Erstellen von Benutzeroberflächen berücksichtigen sollte.

Meiner Ansicht nach punktet er dabei nicht nur mit den Inhalten bzw. den Regeln selbst, sondern setzt sie zusätzlich großartig in Szene.

Gelangt man auf die Seite sieht man bildschirmfüllend lediglich eine grafische Karte mit dem Titel der jeweiligen Regel, einen kurzen erklärenden Text sowie einen Button mit »Learn more«. Dezent im Hintergrund – Ton in Ton – erscheint die Ordnungsnummer der Regel sowie ein grafisches Element. In dieser Ansicht kann man sich durch die einzelnen Regel-Teaser scrollen. Eine seitliche Navigation verweist auf soziale Netzwerke, über das Burger-Menu erreicht man die Navigation, die alle Inhalte im Überblick zeigt.

Laws of UX Jon Yablonski Fitt‘s Law
Laws of UX – Fitt‘s LawII
Laws of UX Jon Yablonski Law of Proximity
Laws of UX – Law of ProximityIII
Laws of UX Jon Yablonski Miller‘s Law
Laws of UX – Miller‘s LawIV
Laws of UX Jon Yablonski Serial Position Effect
Laws of UX – Serial Position EffectV
Laws of UX Jon Yablonski Navigation
Laws of UX – NavigationVI

Klickt man sich in eine Regel, sind – wieder bildschirmfüllend – eine Farbfläche im Hintergrund, der Titel, die Ordnungsnummer sowie dezente grafische Elemente zu sehen. Der Aufbau vollzieht sich dabei in zurückhaltenden, wirkungsvollen und meiner Ansicht nach visuell sehr ansprechenden Animationen.
Scrollt man nun weiter, erhält man einen bei allen Regeln den strukturell gleichen Überblick über sie. Die »Übersicht«, den »Ursprung« sowie weitere Leseempfehlungen.

Laws of UX Jon Yablonski Fitt‘s Law Detail
Laws of UX – Fitt‘s LawVII
Laws of UX Jon Yablonski Miller‘s Law Detail
Laws of UX – Miller‘s LawVIII
Laws of UX Jon Yablonski Miller‘s Law Detail
Laws of UX – Miller‘s LawIX

Insgesamt halte ich das Projekt für eine großartige Arbeit, die zeigt wie man theoretische Inhalte visuell ansprechend inszenieren kann. Generell fällt mir auf, dass mir vor allem die Arbeiten im Gedächtnis bleiben, die sowohl mit theoretischen Inhalten als auch mit hervorragender Gestaltung bzw. Umsetzung hervorstechen. Dazu gehören beispielsweise auch »In Pieces« von Bryan James oder »Pulse« von Markus Kison. Mit »theoretischen Inhalten« meine ich dabei nicht allein Daten, die so auch auf Unternehmenswebseiten oder ähnlichen auftauchen können. Ich verstehe darunter ein gut recherchiertes Thema dessen Hauptinhalte durch gute Gestaltung fokussiert und in Szene gesetzt werden. So basiert »In Pieces« beispielsweise auf dem Wissen über bedrohte Tierarten, »Pulse« dagegen auf einer Emotionstheorie von Robert Plutchik aus dem Jahr 1980.
Diese Arbeiten sowie das aktuelle Projekt von Jon Yablonski verdeutlichen mir im Bezug auf meine Masterarbeit zunehmend, welche Schwerpunkte für mich immer bedeutender werden.

Abbildungen
  1. Titelbild: Eigener Screenshot; Yablonski, Jon: »Laws of UX«, URL: http://lawsofux.com, abgerufen am 16.1.2018.
  2. Eigener Screenshot; Yablonski Jon: »Laws of UX«, URL: http://lawsofux.com, abgerufen am 16.1.2018.
  3. Ebd.
  4. Ebd.
  5. Ebd.
  6. Ebd.
  7. Eigener Screenshot; Yablonski, Jon: »Laws of UX«, URL: http://lawsofux.com/fitts-law.html, abgerufen am 16.1.2018.
  8. Eigener Screenshot; Yablonski, Jon: »Laws of UX«, URL: http://lawsofux.com/millers-law.html, abgerufen am 16.1.2018.
  9. Ebd.

Carbon Design System

Vor längeren bin ich bereits auf das Carbon Design System aufmerksam geworden. Da vor kurzem ein Interwiew mit Bethony Sonnenfeld, Design Lead bei IBM, veröffentlicht wurde, habe ich nochmals mit dem System auseinandergesetzt. Carbon ist ein Designsystem, das für die Produkte der IBM Cloud entwickelt wurde.

Vor längeren bin ich bereits auf das Carbon Design System aufmerksam geworden. Da vor kurzem ein Interwiew mit Bethony Sonnenfeld, Design Lead bei IBM, veröffentlicht wurde, habe ich mich erneut mit dem System auseinandergesetzt.

Carbon ist ein Designsystem, das für die Produkte der IBM Cloud entwickelt wurde. Nachdem anfänglich nur ein überarbeitetes System für IBM Bluemix eingeführt werden sollte, wuchs der Wunsch, dass Carbon ein allgemeines, produktunabhängiges System wird. Im März 2016 wurde mit dem Umbau begonnen, seit Juni 2016 gibt es die Version 6.0, im Oktober 2017 wurde die aktuelle Version 8 des Systems veröffentlicht.

Im Interview mit Jason Grant stellt Bethony Sonnenfeld die Herangehensweise bei der Überarbeitung bzw. Neugestaltung des Systems vor. Sie erläutert die Motivation und Denkweise, sowie den Prozess selbst. Zwei für mich wichtige Punkte sind dabei die Verhaltensregeln sowie die Dokumentation. Die Verhaltensregeln zeigen, auf welchen Wegen und in welcher Art und Weise bestenfalls kommuniziert wird. Das betrifft unter anderem die zwischenmenschliche Umgangsweise. So wird beispielsweise auf die Selbstverständlichkeit hingewiesen, dass man trotz unterschiedlicher Ansichten respektvoll miteinander umgehen sollte. Zusätzlich schafft eine Übersicht der möglichen Kontaktmöglichkeiten Klarheit und vermeidet eine chaotische Kommunikation auf diversen Kanälen.

Die Dokumentation klärt viele Fragen rund um das Carbon Design System. Zu jedem Element gibt es Informationen, so dass viele Fragen überflüssig werden und bestenfalls auf allen Seiten Zeit eingespart wird.1 Dabei ist nicht nur ein reibungsloser Arbeitsauflauf wichtig. Wie Alla Kholmatova in ihrem Buch »Design Systems – A practical guide to creating design languages for digital products.« schon festhält, ist es vor allem in größeren Teams wichtig, die Elemente eindeutig festzulegen. Das verhindert beispielsweise, dass doppelte Bausteine aus unklaren oder unvollständigen Vorgaben entstehen und das System inkonsistent wird.
Für einen weiteren wichtigen Punkt halte ich die Nutzung von GitHub. Der Prozess ist sehr kontrolliert festgelegt, es müssen stets zwei Designer Änderungen absegnen. Damit kann trotz der Zusammenarbeit vieler sichergestellt werden, dass das System konsistent bleibt und den Spezifikationen entspricht.
Bethony Sonnenfeld betont, dass die Auswahl eines vorhandenen Designsystems von der persönlichen Präferenz abhängt. Sie basieren beispielsweise auf verschiedenen JavaScript-Softwarebibliotheken und als Unerfahrene würde sie ein System auswählen, das eine gute, saubere Code-Basis besitzt sowie User Experience-Richtlinen anbietet. Viele Systeme zeigen laut ihr viel zu wenig Anwendungsbeispiele, so dass man es als Nicht-Designer in der Umsetzung sehr schwer hat.2 Wobei ich mir hier die Frage stelle, wie »einfach« solche Systeme wirklich angelegt werden müssen. Aus meiner Sicht sollen sie den Arbeitsablauf von Designern und Entwicklern effizienter und schneller gestalten, die Berufe an sich jedoch nicht völlig ersetzen.

Mir persönlich gefällt das Carbon Design System vor allem im Hinblick auf das synchronisierte Arbeitsmaterial für Designer und Entwickler. Für Designer gibt es beispielsweise eine Sketch-Datei, die alle Elemente enthält. Für Systeme bzw. Frameworks wie Bootstrap gibt es zwar unzählige Sketch-Dateien im Web zu finden, dabei sind aber sicherlich nicht alle vollständig, sauber angelegt und vor allem nicht stets synchron. Abschließend finde ich es sehr spannend einen näheren Einblick in den Prozess erhalten zu haben, da er verständlich macht wie lange die Entwicklung eines solchen Systems inklusive der einzelnen Versionen und Verbesserungen benötigen kann. Das wirkt zum einen abschreckend, da in dieser Zeit natürlich auch die nötigen Ressourcen bereitgestellt werden müssen. Auf der anderen Seite zeigt es den zwischenzeitlich standardisierten Ablauf vieler Produkte, die erst auf den Markt gelangen, um dann stetig verbessert zu werden.

Quellen
  1. Vgl. Sonnenfeld, Bethony, Integral: »UX Design Interview With Bethany Sonnenfeld, Design Lead at IBM for Carbon Design System«, URL: https://www.youtube.com/watch?v=HI-hvAjQc4A, TC: 00:13:50–00:15:15, abgerufen am 27.12.2017.
  2. Vgl. Ebd., TC: 00:45:40–00:47:40.
Abbildungen
  1. Titelbild: Eigener Screenshot; IBM, Download: »Carbon_Design-Kit_8.0.0.sketch« URL: https://github.com/carbon-design-system/carbon-design-kit, abgerufen am 27.12.2017.

Reflet Communication – Ein Must-See

Die französische Kommunikationsagentur Reflet Communication zaubert eine Seite, die mich in ihrem Gesamterscheinungsbild und in ihrer Navigation sehr positiv überrascht.

Heute gibt es einfach nur ein kleines Must-See für zwischendurch:
http://www.refletcommunication.com/.

Die französische Kommunikationsagentur Reflet Communication zaubert eine Seite, die mich in ihrem Gesamterscheinungsbild und in ihrer Navigation positiv überrascht.

Vollflächige Fotos, die beim Bewegen der Maus sachte mitschwingen, untermalt von leichtem Sound. Sehr wenige Wörter und dünne Grafiken, die der Navigation dienen und minimal animiert sind. Sie unterstreichen die leichte Anmutung. Auf jeder Seite steht ein Wort in großen serifenlosen Lettern. Mit gedrückter Maustaste kann man dieses Wort zur Phrase »ziehen«.
Erst durch Scrollen schiebt sich eine Ebene mit Textelementen über etwa 75 % des Bildschirms, so dass man nun mehr über die Agentur erfährt.

Reflet Communication Interface Design
Reflet Communication | passionII
Reflet Communication Interface Design
Reflet Communication | youthIII

Insgesamt konzentriere mich dabei nur auf das Look and Feel der Seite und es macht Spaß mit ihr zu interagieren, hier und da ein paar Bewegungen auszulösen. Die Tiefeneffekte sind zum Teil großartig.

Inhaltlich bin ich mir noch etwas unschlüssig, ob man als Nutzer mehr Spaß am Spiel hat oder tatsächlich auf den ersten Blick erfährt, was die Agentur zu bieten hat. Jemandem mit ernsthaften, inhaltlichen Interessen steht aber ausreichend Text zur Verfügung.

Die Website ist unter anderem mit dem JavaScript-Webframework AngularJS gebaut.

Abbildungen
  1. Titelbild: Eigener Screenshot; Reflet Communications, URL: http://www.refletcommunication.com/en/experience, abgerufen am 17.10.2017.
  2. Eigener Screenshot; Reflet Communications, URL: http://www.refletcommunication.com/en/passion, abgerufen am 17.10.2017.
  3. Eigener Screenshot; Reflet Communications, URL: http://www.refletcommunication.com/en/youth, abgerufen am 17.10.2017.

Die Erarbeitung eines Designsystems für digitale Produkte

Zur weiteren Recherche im Bezug auf Designsysteme arbeite ich mit dem Buch »Design Systems – A practical guide to creating design languages for digital products.« von Alla Kholmatova. Im Gesamten dient es als gute Grundlage, die die Umsetzung eines Designsystems in der Praxis zeigt.

Zur weiteren Recherche im Bezug auf Designsysteme arbeite ich mit dem Buch »Design Systems – A practical guide to creating design languages for digital products.« von Alla Kholmatova. Das Buch erscheint digital in zwei Hälften – eine Mitte des Jahres, die andere im September 2017. Anschließend liegt das Buch auch als Printausgabe vor.

Im Gesamten dient es als gute Grundlage, die die Umsetzung eines Designsystems in der Praxis zeigt. Mit vielen Beispielen von Unternehmen wie sipgate, TED, Airbnb oder FutureLearn wird verständlich, inwiefern sich die Erstellung der sowie die Arbeit mit Designsystemen von Team zu Team unterscheiden. Parameter wie z. B. die Team- und Projektgröße oder die generelle Arbeitsweise sind dafür entscheidend und müssen individuell gehandhabt werden.

In kleineren Teams hat der einzelne mehr Einblick und Verantwortung, in größeren müssen Verantwortlichkeiten eventuell anders verteilt werden.1 Zudem müssen die Designprinzipien für jeden verständlich sein. Das bedeutet entweder, dass im Team wirklich jeder weiß, welche Grundsätze gelten oder dass die fundamentale Gestaltungslinie eindeutig dokumentiert ist. Auch in der Anwendung der Systeme muss klar sein, ob die Regeln strikt oder eher locker eingehalten werden. Während beispielsweise bei Airbnb alles exakt festgelegt ist und die Pattern strikt angewendet werden müssen,2 sind bei dem kleineren Team von TED ein offener Umgang und mehr Flexibilität zu finde.3 Bei einer rigorosen Einhaltung der Regeln muss das Designsystem dementsprechend so gut konzipiert sein, dass die Gestaltung trotz Modularität nicht generisch wirkt.4

Bei der Dokumentation bzw. im allgemeinen Verständnis des jeweiligen Systems ist zudem das gemeinsame Sprachverständnis wichtig. So nennt sie das Beispiel eines Sequenz-Moduls.5 Dieses Modul sollte für jeden Sequenz heißen, nicht »Wizards Control« oder »Fancy Bubbles«.6 Des Weiteren sollten die Ausdrücke eindeutig so gewählt werden, dass man auch als Designer, der nicht bis in die Tiefen des Projekts involviert ist, weiß um welches Element es sich handelt. Neben dem klaren Einsatz des Elements werden Dopplungen durch Neugestaltung verhindert. Bestimmte Buttons wurden bei FutureLearn »Minions« genannt, ein großer Button heißt »Boss«7. Durch diese Benennung wird klar, dass es nur einen großen Button auf der Seite geben kann, da es nur einen Boss gibt. Diese metaphorische Benennung halte ich – insofern man für alle Elemente ähnliche Bezeichnungen finden kann – für sehr vorteilhaft. Ein weiteres Beispiel ist die »Whisperbox« sowie eine zugefügte Komponente namens »Boombox«. Schon im Wortlaut wird klar, welches der beiden zurückhaltend leise und welches prominent laut ist. Die Autorin schlägt generell vor sich vorzustellen, dass das Interface nicht visuell ist, sondern laut vorgelesen wird. Dadurch erkennt man schnell, ob man in Bezug auf die »Visual loudness scall« bereits ein Element der gleichen Lautstärke vorhanden ist.8

Kholmatova unterteilt die Pattern in zwei große Gruppen. Die funktionalen sowie die, die der Wahrnehmung zuzuordnen sind. Zur Unterscheidung kann man sich vorstellen, dass funktionale im HTML-, zweitere typischerweise im CSS-Code zu finden sind.9 Noch klarer macht sie es mit dem Beispiel eines Hauses, indem alle Möbel funktional dieselben sein können. Jeder hat etwa einen Tisch, ein Sofa oder ein Bett. Und doch macht der Stil den großen Unterschied, ob man sich in der Umgebung wohl oder sogar völlig fehl am Platz fühlt.

Insgesamt könnte ich noch unzählige weitere Absätze verfassen. Wenn man in diesem Bereich arbeitet, sind zwar einige Dinge nicht überraschend neu, dennoch fühlt es sich gut an sie zum einen gesammelt niedergeschrieben zu sehen und zum anderen einen Einblick in die Arbeit anderer zu bekommen. Vor allem die Methodik anderer Unternehmen zu verstehen, finde ich sehr spannend. Zudem gibt es natürlich trotzdem viele neue Erkenntnisse und das Buch hilft hervorragend die eigene Arbeitsweise zu analysieren und zu hinterfragen. Aus diesem Grund empfehle ich das Buch absolut jedem, der sich für Designsysteme interessiert.

Quellen
  1. Vgl. Kholmatova, Alla: »Design Systems«, Freiburg 2017, S. 144.
  2. Vgl. Ebd., S. 136.
  3. Vgl. Ebd., S. 140.
  4. Vgl. Ebd., S. 99.
  5. Vgl. Ebd., S. 29.
  6. Vgl. Ebd., Freiburg 2017, S. 30.
  7. Ebd., S. 114.
  8. Vgl. Ebd., S. 78.
  9. Vgl. Ebd., S. 27.

UX und UI – Konzentrischer Kreis

Die niederländlische UX-Agentur »Bankai« stellt in einem Medium-Artikel vom 17.3.2017 ein komprimiertes Poster vor, das sämtliche Themen mit UX-/UI-Bezug sowie UX-/UI-Elemente in konzentrischen Kreisen zeigt.

Die niederländlische UX-Agentur »Bankai« stellt in einem Medium-Artikel vom 17.3.2017 ein komprimiertes Poster vor, das sämtliche Themen mit UX-/UI-Bezug sowie UX-/UI-Elemente in konzentrischen Kreisen zeigt. Die Elemente werden dabei zunächst in 15 Gruppen eingeteilt: Action Buttons, Input Device, In/ Output Device, Output Device, User Controls, Visual Design, Kollaboration, Sketchen, User Satisfaction, Sitemapping, User Testing, Data analytics, Prototypen, Content und Tools. Vom Zentrum aus werden die Bereiche in noch detailliertere aufgeteilt bis man letztendlich bei den Elementen oder Inhalten landet.

Das Poster dient mir als sehr gute Grundlage für meine Recherche sowie meine praktische Umsetzung. Während manches wie z. B. Data analytics für mein Thema sehr wahrscheinlich nicht von Belang ist, sind andere Bereiche wie Action Buttons, Visual Design oder Content sehr interessant. Insgesamt gefällt mir die Visualisierung sehr gut, da die Fülle der Bereiche User Experience und User Interface deutlich gezeigt wird. Vor allem aber fokussiert sich die Übersicht nicht nur darauf, was am Ende für ein gutes Nutzererlebnis vorausgesetzt wird, sondern zeigt Elemente und Tools, die für den kompletten Prozess wichtig sind.

Abbildungen
  1. Titelbild: Eigener Ausschnitt aus dem frei verfügbaren Poster; bankai: »UX and UI – concentric circle«, URL: Download UX and UI concentric circle, abgerufen am 20.5.2017.

In Pieces: Hinter den Kulissen

Bereits Mitte letzten Jahres habe ich das Projekt »In Pieces« vorgestellt. Seitdem möchte ich mich etwas näher mit dem technischen Hintergrund auseinandersetzen, da mich das Projekt nachhaltend begeistert hat und ich es sehr interessant finde, dass es basierend auf CSS umgesetzt wurde.

Bereits Mitte letztens Jahres habe ich die interaktive Ausstellung »In Pieces« von Bryan James vorgestellt. Damals hatte ich fälschlicherweise noch den Titel »Species in pieces« verwendet.
Seitdem möchte ich mich etwas näher mit dem technischen Hintergrund auseinandersetzen, da mich das Projekt nachhaltig begeistert hat und ich es sehr interessant finde, dass es basierend auf CSS umgesetzt wurde.

Neben der Dokumentation, die auf der Projektseite selbst zu finden ist, bin ich auf »The Making Of ›In Pieces‹: Designing an Interactive Exhibition With CSS Clip Paths« auf Smashing Magazine gestoßen. Hier erklärt Bryan James ausführlich seine Vorgehensweise und auf welche Probleme er während des Prozesses gestoßen ist. Da die Dokumentation sowie das Making Of sehr detailliert sind, möchte ich den technischen Hintergrund nicht einfach wiedergeben, sondern lediglich die für mich spannenden Punkte herausgreifen.

Die Outlines des Pfeilgiftfrosches in Illustrator
Die Outlines des Pfeilgiftfrosches in IllustratorI

Zunächst finde ich es erstaunlich, dass die Polygone aus denen die Tiere zusammengesetzt sind mit der CSS-Eigenschaft clip-path generiert wurden. Ich bin mehr Designerin als Entwicklerin, so dass mir das breit gefächerte Verständnis fehlt. Jedoch war meine Vermutung die, dass mit SVG-Grafiken gearbeitet wurde, die dann via Code verändert und bewegt werden. Zur Erstellung der Formen stellt Bryan James das Tool Clippy » vor. Mit dieser Browseranwendung können eigene sowie vorgefertigte Masken ausgewählt werden. Der dazugehörige Code erscheint dabei direkt am unteren Rand des Browsers. Schade finde ich, dass man den Code nicht direkt im Browser ändern kann, um die erstellte Form selbst noch einmal im Detail zu ändern. Zwar ist ein klickbares Logo von Codepen zu sehen, dessen Sinn erschließt sich mir aber leider nicht ganz, da sich nichts ändert oder öffnet. Davon abgesehen, ist es aber ein einfaches, schönes Tool, um visuell die Formen zu erstellen. Den Code kann man nachträglich immerhin selbst ändern, so dass ich das nicht als sehr großen Nachteil empfinde.

Als weitere spannende Lösung stellt James eine Funktion vor, die ermöglicht die prozentualen Werte eines Punktes auszulesen. Er nutzt eine PNG-Datei als Unterstützung und durch einen Klick wird ein Fenster mit den Daten des jeweiligen Punkts zum Kopieren ausgegeben. Die Funktion ist im Making Of zu finden.

Aus grafischer bzw. konzeptioneller Sicht finde ich es zudem überraschend, dass die 30 Tiere jeweils aus etwa 30 Polygonen bestehen. Das war mir im Vorfeld nicht bewusst bzw. habe ich nicht darauf geachtet.

Eine weitere bemerkenswerte Herangehensweise sehe ich in der Maskierung von Bildern mit Zahlen durch die Polygone als Hilfestellung. Eine simple Methode, um die Ränder der Formen hervorzuheben, um sie anschließend zueinander passend zu verändern. So können feine Linien vermieden werden, die zwischen den Gebilden entstehen, wenn sie exakt aufeinander liegen.

Visuell ansprechend finde ich außerdem den von ihm verwendeten und erwähnten Schimmer-Effekt. Generell bin ich kein Fan von Schimmern, Schatten oder beispielsweise Verläufen. Doch der Einsatz im Web kann bei dosierter Anwendung sehr reizvoll sein. Im Vergleichsbild seiner Grafiken sieht man deutlich, dass sie durch den Schimmer-Effekt sehr viel hochwertiger wirken.

Schlussendlich finde ich es großartig, dass Bryan James das Projekt und den Prozess so ausführlich dokumentiert. Einen Einblick in die Arbeitsweise und die Problemlösungen machen deutlich, wie das große Ganze Schritt für Schritt und Hürde für Hürde gewachsen ist. Dass die Arbeit beinahe wegen zu großer Probleme beendet wurde, motiviert zudem sich an mancher Stelle weiter durchzubeißen. Denn das Ergebnis finde ich nach wie vor so imposant, dass es Mut macht dem ein oder anderen Hindernis zu trotzen. Zudem inspiriert mich die interaktive Ausstellung so sehr, dass ich mich nun mit mehr technischem Verständnis, selbst an einer erstmaligen Gestaltung durch Polygone versuchen möchte.

Abbildungen
  1. James, Bryan: »The Making Of ›In Pieces‹: Designing an Interactive Exhibition With CSS Clip Paths«, Stand: 2.6.2015, URL: https://www.smashingmagazine.com/2015/06/the-making-of-in-pieces/, abgerufen am 2.3.2017.

Die Kölner Büdchenmap

Als Büdchenhauptstadt hat Köln die kleinen »Du-kannst-hier-alles-Kaufen«-Lädchen in unzähligen Variationen. Sie dienen als Treffpunkt im Veedel und sind fester Bestandteil der Kölner Kultur. Die Büdchenmap soll sie alle zeigen, inklusive dem 100-Meter-Distanz-Regel-Entregler.

Ich bin online, also bin ich. Sehr häufig ist mir bei der Selbstbeobachtung aufgefallen, dass ich mich in meinem Alltag – wie sicher sehr viele Menschen – sehr auf Google verlasse. Ich google das nächste vietnamesische Restaurant, eine Buchhandlung oder suche nach einem Schreibwarenhandel. Wenn ich nicht gerade neu in einer Stadt bin, sind es vor allem die kleinen Lädchen, nach denen ich suche. Wo H&M, MediaMarkt und Co. ist weiß man meist sehr schnell. So traurig es ist: Finde ich etwas nicht bei Google, so gibt es das für mich nicht – außer ich entdecke es durch Zufall oder auf Empfehlung. Selbst, wenn man in Köln im Normalfall kein Büdchen googeln muss, weil man an jeder Ecke ohnehin eins findet, war das der ausschlaggebende Gedanke einer Projektidee: Die Kölner Büdchenmap.

Dabei ist für mich nicht nur die Verortung interessant, sondern auch der visuelle Charme. Die Büdchenmap soll alle Büdchen in Köln auf einer Karte vereinen und jeweils mit einem Foto abbilden. Als Büdchenhauptstadt hat Köln die kleinen »Du-kannst-hier-alles-Kaufen«-Lädchen in unzähligen Variationen. Einzelne Gebäude, in Häuserketten eingegliedert an Hauptstraßen, versteckt im Erdgeschoss von Hochhäusern oder U-Bahnhöfen. Sie sind traditionell, chic, hip, verratzt, geordnet oder chaotisch. Manche von ihnen stehen leer, eine Eiskarte als letztes Zeichen, dass dort mal Leben war.

Bei meiner Recherche bin ich auf »Am Büdche« von Stefan Matthiessen gestoßen. Das Fotoprojekt zeigt Büdchen auf einer Karte, visuell jedoch anders als ich es mir vorstelle. Sie sind nur als Marker gesetzt, während ich mir eine einzige Karte mit allen Informationen vorstelle. Ein möglicher Zusatz könnte das Einzeichnen von Distanzen sein. In Köln wird gemunkelt, dass eine Stadtverordnung besagt, dass man nur mit einer Mindestdistanz von 100 Metern zu Einrichtungen wie z. B. Schulen öffentlich trinken darf. Im Hinblick darauf könnte die eingezeichnete Distanz die erlaubten Trinkflächen anzeigen.

Karte des Projekts »Am Büdche«I
Karte des Projekts »Am Büdche«I

Stefan Matthiessen beschreibt das »Büdche« weiter als Lebensmittelpunkt im Veedel.1 Diesen Gedanken hatte ich auch dahin gehend, dass das Büdchen einen analogen Treffpunkt darstellt, den man trotz aller digitaler Transformation nicht in der digitalen Welt nachbilden kann. Eine besondere Atmosphäre und ein spezieller Charme mit einer bunten Mischung Menschen.

In den nächsten Wochen werde ich mich entscheiden, ob das mein Masterprojekt werden könnte. Auf der einen Seite halte ich die Idee nämlich für großartig, auf der anderen Seite könnte sie aber auch zu plump sein. Manchmal sind es jedoch die einfachen Dinge.

Quellen
  1. Vgl. Matthiessen, Stefan: »Am Büdche«, Über das Projekt, URL: http://www.ambuedche.de/projekt-am-buedche/, abgerufen am 29.12.2016.
Abbildungen
  1. Eigener Screenshot; Matthiessen, Stefan: »Am Büdche«, Karte, URL: http://www.ambuedche.de/projekt-am-buedche/, abgerufen am 29.12.2016.

Sketchisketch

Erst seit kurzem arbeite ich mit der SketchApp, welches bei mir – wie sicher bei vielen – Photoshop im Bereich Interface Design ablöst. Mit dem Tool arbeitet es sich nicht nur sehr viel effizienter, sondern vor allem die Webnähe sehe ich als eindeutigen Vorteil. Momentan sehe ich SketchApp klar vorne, jedoch frage ich mich, wie schnell und gut Adobe mit XD nachziehen wird.

Erst seit kurzem arbeite ich mit der SketchApp, welches bei mir – wie sicher bei vielen – Photoshop im Bereich Interface Design ablöst. Mit dem Tool arbeitet es sich nicht nur sehr viel effizienter, sondern vor allem die Webnähe sehe ich als eindeutigen Vorteil. Während man in Photoshop Ebene für Ebene anlegt, bearbeitet und im schlechtesten Fall später wieder Ebene für Ebene ändern muss, hält SketchApp einige Ansätze bereit, durch die die Arbeit sehr viel schneller zu erledigen ist.

So gibt es beispielsweise »Textstile«, die sehr nah am CSS sind. Damit kann man Stile für Elemente wie z. B. h1, h2, etc. anlegen und ihnen zuordnen. Vor allem im Hinblick auf spätere Abänderungen sieht man hier den großen Fortschritt gegenüber Photoshop.

Auffallend ist auch, dass die komplette Bearbeitungsleiste direkt auf die Arbeit im Web schließen lässt. So gibt es Borders, Shadows, Spacing oder Opacity. Alles Begriffe, die so auch im CSS auftauchen. Zwar können diese Eigenschaften auch in Photoshop angelegt werden, aber allein schon der Begriff »Kontur« anstelle von Border zeigt, dass die Software nicht primär für Interface Design entwickelt wurde, sondern nach der Ära von fireworks eher dafür missbraucht wurde.

Die Symbole sind für mich der größte Entwicklungsschritt. Man kann zentral Symbole anlegen, die zum einen dafür sorgen, dass man gewisse »Templates« für bestimmte Gestaltungselemente hat. Zum anderen können mit den Symbolen beispielsweise Zustände angelegt werden. Während man in Photoshop Zustände händisch oder maximal noch mit Ebenenstilen angelegt hatte, um sie dann umzustellen, kann man das bei SketchApp via DropDown ändern. Einmal richtig angelegt, kann ein Zustand z. B. Stück für Stück auf active oder inactive (oder jede Begrifflichkeit der Wahl) gestellt werden.

SketchApp arbeitet sehr eng mit Invision zusammen, was vor allem im Bezug auf Prototyping sehr hilfreich ist. So können die einzelnen Artboards bei Invasion hochgeladen werden und zu einem klickbaren Prototypen zusammengeschustert werden.

Insgesamt hat die Software auch eine ganze Reihe von guten PlugIns, die die Arbeit immens erleichtern. Allein schon PlugIns, die den Export für den Entwickler – inklusive assets – ermöglichen, helfen nicht nur der reibungslosen Übergabe, sondern auch dem Entwickler bei der späteren Arbeit.

Abschließend halte ich SketchApp für einen großen Fortschritt im Bereich Interface Design und bin sehr gespannt, ob Adobe XD das Ruder nochmal herumreißen kann. Im Moment scheint mir ersteres vorne zu liegen, doch bleibt es abzuwarten, was Adobe – mit sicher etwas mehr Budget – auf den Tisch zaubert.
Nach anfänglichen Umstellungsschwierigkeiten, habe ich doch sehr schnell in die Software gefunden und bin jeden Tag froh darüber, wie sehr meine Arbeit von SketchApp profitiert. Jetzt wenn man die Software kennt, fragt man sich, wieso es nicht schon viel früher diesen logischen Schritt gab.

UX Foundations: Research

Normalerweise finden Tutorials oder Kurse keinen Platz in meiner Dokumentation. Der Kurs »UX Foundations: Research auf lynda.com macht dabei eine Ausnahme, da er thematisch interessant für meinen Master sein könnte.

Normalerweise finden Tutorials oder Kurse keinen Platz in meiner Dokumentation. Der Kurs »UX Foundations: Research« auf lynda.com macht dabei eine Ausnahme, da er thematisch interessant für meinen Master sein könnte. Zu Beginn des Masters war es unsere große Aufgabe herauszufinden, was es überhaupt bedeutet zu forschen und uns selbst Methoden zu erarbeiten. Dafür habe ich mich zum einen mit dem Buch »101 Design Methods« sowie mit einzelnen Methoden im Fokus, z. B. den »Personas«, auseinandergesetzt.

Hier möchte ich nicht weiter auf bestimmte Methoden eingehen, sondern lediglich unkommentiert drei große Unterscheidungen festhalten, die Amanda Stockwell im Kurs trifft: quantitativ vs. qualitativ, Verhalten vs. Einstellung und moderiert vs. unmoderiert.

Die erste Kategorie ist sicher eine der bekannteren, da dies zwei große Unterscheidungsmerkmale in der Forschung sind. Quantitative Forschung zielt dabei auf numerische Daten, während die qualitative keine numerischen Daten hervorbringt. Beispiele für eine quantitative Vorgehensweise sind A/B-Tests oder Umfragen, die nicht meinungsbasiert sind. Die qualitative Seite fragt dabei nach dem Warum: Warum präferieren Nutzer das eine Produkt gegenüber dem anderen? Diese Art ist sehr stark von Subjektivität und Emotionen geprägt. Usability Tests oder Interviews sind Beispiele hierfür. Eine Kombination könnte in einer Umfrage stattfinden, wenn offene und geschlossene Fragen gestellt werden.1

Die zweite Unterscheidung zwischen Verhalten und Einstellung ist für mich die interessantere. Während bei ersterem Nutzer beobachtet werden und deren Verhalten bewertet wird, ist die Einstellung eine Frage der Meinung. Das bedeutet aber auch, dass Vorsätze oder Wünsche stark vom tatsächlichen Verhalten abweichen können, was wiederum keine zufriedenstellenden Ergebnisse für den Research im Bezug auf die Einstellung ergibt.
Ethnographische Studien, A/B Tests oder Eye-Tracking werden beispielsweise für das Verhalten, Umfragen oder Präferenztests für die Einstellung verwendet. Für letzteres wäre z. B. auch die Fragestellung nach den »Top XY« zuständig und wichtig. Das wäre über die Fragestellungen der Verhaltensforschung nicht abrufbar.2

Die letzte, eher uninteressante, Unterscheidung ist die zwischen moderierter und unmoderierter Forschung. Das bedeutet, wie vermutet werden kann, ob einzelne Methoden persönlich angewandt werden oder der Nutzer z. B. nur alleine einen Fragebogen ausfüllt.3

Quellen
  1. Vgl. Stockwell, Amanda: »UX Foundations: Research«, »2. Types of Research«, »Qualitative vs. quantitative research«, URL: https://www.lynda.com/User-Experience-tutorials/UX-Research-Fundamentals/439418-2.html, TC: 00:00:00–00:02:44, abgerufen am 14.12.2016.
  2. Vgl. Ebd., »Behavioral vs. attitudinal research«, TC: 00:00:00–00:01:50.
  3. Vgl. Ebd., »Moderated vs. unmoderated research«, TC: 00:00:00–00:01:38.

CUI – Conversational User Interface

Welche Vorteil bietet das Conversational User Interface zu graphischen Benutzeroberflächen? Sind Einkäufe innerhalb von Messenger-Diensten tatsächlich die Zukunft?

Welchen Vorteil bietet das Conversational User Interface gegenüber graphischer Benutzeroberflächen? Sind Einkäufe innerhalb von Messenger-Diensten tatsächlich die Zukunft? Durch diverse Artikel im Internet bin ich auf Conversational User Interfaces aufmerksam geworden. Was sich auf den ersten Blick spannend anhört, möchte ich im zweiten Schritt genauer überprüfen. Daher möchte ich mich im kommenden weiter mit CUIs auseinandersetzen und innerhalb meiner Dokumentation davon berichten.

Ästhetische Veränderung des World Wide Web als Werkzeug der Erzählung durch Technologie

Zu Beginn meiner Masterarbeit war einer meiner Ansätze, die Veränderung des Webs seit Beginn an zu untersuchen. Wichtig war mir dabei die Untersuchung der Symbiose zwischen dem WWW und der Gesellschaft. Ein neuer Ansatz beschreibt die Überlegung, inwiefern sich das World Wide Web als Werkzeug der Erzählung durch technologische Entwicklungen ästhetisch verändert.

Zu Beginn meiner Master-Arbeit war einer meiner Ansätze, die Veränderung des Webs seit Beginn an zu untersuchen. Wichtig war mir dabei die Untersuchung der Symbiose zwischen dem WWW und der Gesellschaft. Während ich mich in den letzten Monaten auf andere Fragestellungen und Ansätze fokussiert habe, rückt diese Überlegung zurück ins Zentrum, da ich regelmäßig feststelle, dass ich dieses Thema unheimlich spannend finde.
In meiner anfänglichen Fragestellung (Erste Fragestellung meiner Master-Arbeit ») ging es darum, inwiefern sich die Gestaltung im World Wide Web und die Veränderung der Gesellschaft durch das World Wide Web gegenseitig beeinflussen. So führt beispielsweise eine veränderte Nutzung, ausgelöst sowohl durch das WWW als auch durch neue Technologien, wiederum zu neuen Gestaltungsansätzen im Web. Neue, intuitivere Gestaltungsansätze beispielsweise treiben wiederum die engere Verschmelzung zwischen Mensch und Technik an, indem grafische und technologische Hürden abgebaut werden.

Die ästhetische Veränderung des Webs

Die beschriebene Überlegung ist sehr weit gefasst, so dass es aus meiner Sicht unmöglich ist, sämtliche gesellschaftliche und technologische Veränderungen der letzten 25 Jahre in ein konkretes Projekt zu überführen. Aus diesem Grund begrenze ich mich zunächst auf den technologischen Aspekt. Diese Eingrenzung schließt zwar zum einen gesellschaftliche Themen nicht komplett aus und ist zum anderen noch immer sehr allgemein gefasst. Jedoch bin ich überzeugt, dass eine schrittweise Eingrenzung und erneute, überlegte Ausweitung meines Themenkomplexes, zum Ziel führen wird.

Ich konzentriere mich dabei auf die ästhetische Veränderung des World Wide Webs als Werkzeug der Erzählung durch technologische Entwicklungen. Nach wie vor, interessiert mich dabei ein Teil der Netzkunst im Web. Aus meiner Sicht werden durch die vermeintlich nichtkommerziellen Projekte häufig die Möglichkeiten und Grenzen von Ästhetik und Technologie radikaler ausgelotet. Zum einen besitzen sie eine sehr eigene, spannende Ästhetik zum anderen eine sehr besondere Anmutung. Das kann natürlich auch bei kommerziellen der Fall sein, jedoch halte ich es für unwahrscheinlich, dass beispielsweise ein Kreditinstitut eine Webseite zur Eigenwerbung präsentiert, die sämtliche Grenzen der konventionellen Gestaltung überschreitet.
Im Weiteren möchte ich mich mit den angesprochenen Punkten auseinandersetzen, um dann weitere Eingrenzungen oder Ausweitungen vorzunehmen, sowie eine Richtung innerhalb meiner Master-Arbeit festzulegen.

»Touched Echo« von Markus Kison

Durch Jakob Behrends Buch »Interreaction – Interaktive Medien und Kommunikation im Raum – eine Einführung für Gestalter« wurde ich auf Markus Kisons Arbeit »Touched Echo« aufmerksam, die sehr spannend und eindrücklich umgesetzt ist.

Durch Jakob Behrends Buch »Interreaction – Interaktive Medien und Kommunikation im Raum – eine Einführung für Gestalter« wurde ich auf Markus Kisons Arbeit »Touched Echo« aufmerksam.

Die Grundlage der Arbeit bilden Soundaufnahmen aus dem Jahr 1945, als deutsche Städte im 2. Weltkrieg nieder gebombt wurden. Das Audiomaterial wird dabei erst übertragen, wenn sich der Besucher mit den Ellenbogen auf ein mit selbstgebauten Schalleitern präpariertes Geländer abstützt und sich mit den Händen die Ohren zuhält. Technisch ist das durch eine Knochenleitung möglich, die für Hörgeräte entwickelt und verwendet wird. Wie Kison auf seiner Projektseite beschreibt, nimmt der Besucher dadurch eine natürliche Haltung ein, die die Menschen wohl auch damals unter anderem eingenommen haben: Eine gebeugte Haltung mit zugehaltenen Ohren, um sich vor der Lautstärke der Angriffe zu schützen.

Neben der technischen Umsetzung, halte ich das Gesamtkonzept für herausragend. Geschichte wird damit erlebbarer gemacht und der Besucher wird gezwungenermaßen in eine ähnliche – wenn natürlich auch unbedrohte – Situation versetzt. Ohne es selbst ausprobieren zu können, schätze ich, dass die Arbeit einen hohen Grad an Immersion mitbringt und die geschichtliche Auseinandersetzung – im Gegensatz zu ein paar Postern – tatsächlich stattfindet. Des Weiteren beeindruckt mich wie hier Medienkunst und Geschichte miteinander verschmelzen. »Touched Echo« halte ich deshalb im Bereich der digitalen Medienkunst für sehr inspirierend.

Abbildungen
  1. Kison, Markus: »Touched Echo Osnabrueck«, abgerufen am 23.7.2016, Lizenz: CC BY-NC-SA 2.0.

Empathische Interaktion

In »The digital turn – Design in the Era of Interactive Technologies« spricht Björn Bertrand in seinem Essay »The Empathetic Interaction« darüber, wie durch Reize eine Verbindung zwischen Mensch und Maschine hergestellt werden kann.

In »The digital turn – Design in the Era of Interactive Technologies« spricht Björn Bertrand in seinem Essay »The Empathic Interaction« darüber, wie durch Reize eine Verbindung zwischen Mensch und Maschine hergestellt werden kann.1

Bertrand nutzt dafür das Beispiel eines langjährigen Kranfahrers, der seine Arbeit mit absoluter Routine erledigt. Jeder Handgriff sitzt, er lenkt den Kran beinahe blind und sein Körper ist mit dem Kran fast schon eins. Sie sind miteinander verbunden.
Auf der anderen Seite nutzt er das Beispiel eines Autofahrers, der wir selbst sein könnten: In einer Kurve klingt das Auto komisch und der Fahrer hält an. Das akustische Signal hat ihn davor gewarnt, dass irgendetwas nicht stimmen kann. Dass irgendetwas nicht »normal« ist, nicht wie sonst in seiner alltäglichen Routine als Autofahrer. In der Routine, in der er eins mit dem Auto ist und jede Abweichung – durch welchen Reiz auch immer – bemerkt.

Im nächsten Schritt erhält der Kranfahrer eine Fernsteuerung für seinen Kran. Er kann frei wählen, von welcher Position er ihn steuert, doch sowohl die neue Position als auch die andere Steuerung führen dazu, dass eine körperliche Distanz aufgebaut wird. Das alltägliche Gefühl der Verbundenheit ist verflogen, da er das Fahrzeug nun völlig anders steuert und die körperliche Verbindung nicht im gleichen Maß wie bisher vorhanden ist. Um diese Distanz wieder abzubauen, kann in der Fernsteuerung beispielsweise eine Vibration eingebaut werden – eine taktile Rückmeldung. Zwar bedeutet das noch immer, dass es eine Zeit der Umgewöhnung benötigt, doch der Körper lernt diese neue Routine und er kann sich wieder zunehmend in den Kran einfühlen. Das Autobeispiel zeigt, dass nicht nur taktile Reize in Frage kommen. In diesem Fall waren es akustische Warnsignale und auch andere Reize wären möglich. Bertrand schreibt, dass Empathie in der Regel aus einem komplexen Zustand der Stimulation entsteht. Durch eine empathische Interaktion kann also die Distanz zwischen Mensch und Maschine abgebaut werden, ein »Gefühl dafür« kann entstehen. Und wie Bertrand schon andeutet, dürfen wir nicht vergessen, dass der Mensch mit seinem Körper an die Umwelt gebunden ist.2

Veräußerung des menschlichen Körpers

An dieser Stelle möchte ich Marshall McLuhans Interpretation des Narziss einfließen lassen, der sein eigenes Spiegelbild im Wasser sieht. Laut McLuhan handelt die Sage nicht davon, dass er sich in sein Spiegelbild verliebte. Sie handelt primär davon, dass »Menschen sofort von jeder Ausweitung ihrer selbst in einem andern Stoff als dem menschlichen fasziniert sind«3. Dies betrifft sowohl Medien als auch beispielsweise Werkzeuge. Demnach ist eine abgebaute Distanz zu dem jeweiligen Stoff enorm wichtig, um eine tatsächliche Verbindung zwischen ihm und dem Körper herzustellen.

Rückmeldung im Web

Ich halte Bertrands Ansichten für sehr entscheidend beim Interaction als auch Interface Design. Zwar scheint es zum einen selbsterklärend und zum anderen selbstverständlich. Doch ich denke, dass das ein nicht zu unterschätzender Ansatz ist, der nach wie vor viel zu oft unbeachtet bleibt. Im Web erhält man visuelle Rückmeldungen durch z. B. Farbe beim MouseOver oder textliche Rückmeldungen beim Absenden eines Formulars. Obwohl beides meiner Ansicht nach völlig selbstverständliche Mechanismen sind, die zum Standard geworden sind, findet man noch immer unzählige Webseiten, die diese Kleinigkeiten nicht beachten.
Seit wenigen Jahren sieht man durch scroll activated animations den eigenen »Scroll-Einfluss«: Objekte bewegen sich dabei abgestimmt auf das Scroll-Verhalten. Scrollt man nach unten, kann sich beispielsweise ein Objekt aufbauen, dass sich wieder abbaut, wenn man zurück scrollt. Teilweise mag das als Spielerei und Effekthascherei abgestempelt werden, nichtsdestotrotz machen Seiten dieser Art unheimlich viel Spaß. Zusätzlich sehe ich darin eine hervorragende Möglichkeit die Distanz abzubauen und den eigenen Körper, die eigenen Tätigkeiten im Web abzubilden. Macht es gerade deshalb so viel Spaß?

Stimulation in virtuellen Realitäten

Ich denke in jedem Bereich ist bezüglich der empathischen Interaktion viel Raum nach oben. Zwar sind die Beispiele Bertrands eher im Bereich Arbeit und alltäglicher Routine angesiedelt. Ich denke dabei eher an graphische Benutzeroberflächen oder Welten, die via Virtual Reality betreten werden können. Vor allem bei letzterem darf nicht vergessen werden, dass der Körper in die Umwelt eingebunden ist. Meine ersten Gehversuche mit der Google Cardboard (Erste Gehversuche mit der Google Cardboard ») habe ich im privaten Raum gemacht. Ich habe dabei auf Kopfhörer verzichtet, so dass lediglich der visuelle Reiz vollständig übrig blieb, der Sound kam dabei aus den Handy-Boxen. Obwohl ich nur auf visueller Ebene in die virtuelle Realität eingetaucht bin, war die Immersion immens und es war schwierig sich im realen Raum zu orientieren. In anderen Beispielen, wie im Labor des Fachbereichs Medien der Hochschule Düsseldorf, werden noch zusätzliche Reize, wie beispielsweise ein Ventilator für die Windsimulation eingesetzt.
Durch Stimulation wie diese werden aus meiner Sicht Raum und Zeit aufgelöst, der Körper geht in der virtuellen Realität auf. Ich finde es dabei immer wieder spannend, wie wenig Stimulation nötig ist, um das Gehirn auszutricksen. Zwar bietet Virtual Reality momentan gerade diesen Anreiz in einer virtuellen Realität abzutauchen und sich aufzulösen. Langfristig stellt sich mir jedoch die Frage, wie es möglich ist, seinen Körper und die Umgebung so gut als möglich einzubinden, sprich eine Verbindung herzustellen. Vor allem bin ich mir zur Zeit unsicher, ob Reize wie der Wind dafür sorgen, dass man sich noch mehr in der virtuellen Umgebung auflöst oder ob man gerade dadurch seinen Körper noch mehr in einer Verbindung spürt. Beides kann viel Spaß bereiten, aber unabhängig davon wie ich beide Möglichkeiten bewerte, halte ich es für essentiell sich dieser Wege bewusst zu sein.

Den Beitrag und die Erkenntnisse von Bertrand halte ich bisher für einen der spannendsten Ansätze für mein Master-Thema. Sicherlich ließe sich das auch mit der Frage nach Interaktivität, die ich als mögliche neue Richtung festgehalten habe, verbinden.

Quellen
  1. Vgl. Betrand, Björn: »The empathetic Interaction«, in: Junge, Barbara; Eds.: Berzina, Zane; Scheiffele, Walter; Westerveld, Wim; Zwick, Carola, »The digital turn – Design in the Era of Interactive Technologies«, Berlin 2012, S. 138–143.
  2. Vgl. Ebd.
  3. Baltes, Martin; Böhler, Fritz; Höltschl, Rainer; Reuß, Jürgen (Alle Hg.): »Medien verstehen – Der McLuhan-Reader«, Mannheim 1997, S. 120.

For better coffee

»For better Coffee« » verrät fünf essentielle Tipps für besseren Kaffee. Die Seite der finnländischen Freese Coffee Company zeigt parallel zu den Tipps illustrativ den Prozess von der Kaffeebohne bishin zum heißen und duftenden Kaffee. Wie »Kaipo Che!« » wird die Story mit Unterstützung von scroll activated animations erzählt.

»For better Coffee« verrät fünf essentielle Tipps für besseren Kaffee. Die Seite der finnischen Freese Coffee Company zeigt parallel zu den Tipps illustrativ den Prozess von der Kaffeebohne bis hin zum heißen und duftenden Kaffee. Wie »Kaipo Che!« wird die Story mit Unterstützung von scroll activated animations erzählt.

Screenshot »For better Coffee«: Die Bohne wandert Richtung Mahlmaschine
Screenshot »For better Coffee«: Die Bohne wandert Richtung MahlmaschineII
Screenshot »For better Coffee«: Der fertige Kaffee wird ausgegossen
Screenshot »For better Coffee«: Der fertige Kaffee wird ausgegossenIII

Bis zu Regel #1 wandert die ganze Bohne mit durch den Bildschirm, bevor sie vor Regel #2 gemahlen wird. Als Nächstes verschwindet das gemahlene Pulver in einem Filter und wird kurz vor der vierten in einer Kanne aufgebrüht. Der fertige Kaffee fließt beim weiteren Scrollen durch die vierte Regel bis zu der letzten, um direkt in einer Tasse zu landen mit dem Tipp »Drink it fresh«. Jede Regel wird ergänzt durch die Frage »Why is this so important?«, die bei einem Klick auf die Frage in einem überlagerten Bildschirm weiß auf schwarz beantwortet wird.

Screenshot: For better Coffee: Why is this so important?
Screenshot von »For better Coffee«: Why is this so important?IV

Die Website finde ich nicht nur aus dem Grund empfehlenswert, weil ich persönlich Seiten mit scroll activated animations durch die man die Grafik spielerisch beeinflussen kann. Ich halte »For better Coffee« vor allem deshalb für eine empfehlenswerte Erzählung, da sie das Thema an sich sowohl mit der visuell-ästhetischen als auch mit der technologischen Ebene hervorragend verbindet. So einleuchtend wie diese Verbindung zu sein scheint, so selten findet man sie jedoch im World Wide Web.

Abbildungen
  1. Eigene Screenshot; Freese Coffee Company: »For better coffee«, URL: forbetter.coffee/, abgerufen am 29.6.2016.
  2. Ebd.
  3. Ebd.
  4. Ebd.

Species in Pieces: Eine interaktive Ausstellung 

»Species in Pieces« von Bryan James, zeigt gefährdete Tierarten in einer ästhetisch hochwertigen interaktiven Ausstellung.

»Species in Pieces« von Bryan James, welches sich selbst als »interaktive Ausstellung« beschreibt, zeigt gefährdete Tierarten.
Das Löwenäffchen, der goldene Giftfrosch, die Waldeule und 27 andere sind sehr abstrakt durch die Zusammensetzung unterschiedlich eingefärbter Dreiecke dargestellt. Sie besitzen eine, aus meiner Sicht, sehr starke Formsprache und die »Gesamterfahrung« der Seite ist beeindruckend. Sie ist insgesamt sehr reduziert und ästhetisch schön gestaltet. Klassische Hintergrundmusik unterstützt die einzelnen Formen, die sich langsam durch den Raum bewegen, um sich zum jeweiligen Tier zusammenzusetzen. Sie unterstreicht den leichten, fast schon schwerelosen, Eindruck, der einen beinahe meditativ in diesem Projekt versinken lässt.

Species in Pieces | 30. Drill
Dynamischer Zusammenbau | Species in Pieces | 30. DrillII

Weiterführende Informationen

Für jedes Tier sind zusätzlich Informationen bereitgestellt: das Vorkommen, die Art der Gefährdung, statistische Werte, weiterführende Links oder ein Video.

Zusatzinformation | Species in Pieces | 30. DrillII
Zusatzinformation | Species in Pieces | 30. DrillIII
Beispielhaftes Video | Species in Pieces | 30. DrillIII
Beispielhaftes Video | Species in Pieces | 30. DrillIV

CSS-basierte Entwicklung

Neben der Ausstellungs-Erfahrung und der grafisch hochwertigen Darstellung, ist für mich auch die technische Seite interessant und gleichzeitig beeindruckend. Da ich zunächst davon ausging, dass es ein durch WebGL unterstütztes Projekt handelt, überrascht es mich umso mehr, dass es eine rein CSS-basierte Seite ist. Das dokumentiert der Entwickler Bryan James ausführlich auf der Seite.

Dokumentation des ProjektsIV
Dokumentation des ProjektsV

Ich halte »Species in Pieces« für ein großartiges Projekt, in dem Technologie und Design erfolgreich zusammengeführt werden. Sie werten sich wechselseitig auf, anstatt das Gegenüber zu Kompromissen zu zwingen. Das Projekt zeigt mir erneut, dass interaktive Erzählungen im Web auch ohne Einsatz tausend verschiedener Medien funktionieren kann. Zwar setzt Bryan James neben Text und Grafik z. B. auch Videos ein. Diese sind jedoch so dezent verpackt und eingestreut, dass sie sich nicht aufdrängen. Ein Mindestmaß an Information auf jeder Seite sorgt dafür, dass man sich gänzlich auf die inhaltlichen Aspekte fokussieren und konzentrieren kann.

Abschließend habe ich nach diesem Projekt selbst Lust, die grafischen Möglichkeiten mittels CSS weiter auszuloten als bisher. Bisher hat sich der Einsatz meist auf das Bauen von unzähligen Layouts, die Einbindung künstlerischer oder grafischer Arbeiten oder die Entwicklung eines Webprojekts durch den Zusammenbau einzelner medialer Elemente beschränkt. Eine grafische Arbeit entwickelt durch den Code selbst wäre an dieser Stelle eine neue Herausforderung.

Abbildungen
  1. Titelbild: Eigener Screenshot; James, Bryan: »Species in pieces«, URL: www.species-in-pieces.com, abgerufen am 17.6.2016.
  2. Ebd.
  3. Ebd.
  4. Ebd.
  5. Ebd.

Portfolios: Geschichten über sich. 

Die Portfolios von Valentin Marmonier und Cody Brendan James Ellingham erzählen Geschichten über die Gestalter selbst. Gleichermaßen zeigen sie ihre Kompetenzen treffend innerhalb der Umsetzung.

Die Portfolios von Valentin Marmonier und Cody Brendan James Ellingham erzählen Geschichten über die Gestalter selbst. Gleichermaßen zeigen sie ihre Kompetenzen treffend innerhalb der Umsetzung.

Valentin Marmonier ist ein in Amsterdam ansässiger Front-End Entwickler. Auf seiner Seite, die er selbst nicht direkt als sein Portfolio bezeichnet, scrollt man durch ein grafisches Weltall, in dem Seite für Seite seine persönlichen Ambitionen und Visionen zu lesen sind. So z. B. »Keep trying« oder »Keep learning«. Unterstützt werden die Texte durch animierten 3D-Grafiken, die via WebGL eingebunden sind. Im Gesamtpaket unterstreicht er mit dieser Webseite vor allem eins: Er ist Front-End Entwickler und das kann er gut. Und das ist eine hervorragende Art über sich selbst zu Erzählen. Und zwar genau auf den Punkt.

Der Designer Cody Brendan James Ellingham lebt in Tokyo und beschäftigt sich vor allem mit Sound, Motion und Interaction. Mit einer Reise durch einen Kiefernwald zeigt er seine Spezialgebiete, die er in seiner Web-Erzählung gelungen inszeniert. Er schreibt von der Inspiration, die er im Kiefernwald gefunden hat und der Nutzer kann die Töne der Vögel und eines Hirsches hören. Im Bereich »Motion« sieht man eine filmische Nahaufnahme eines aus der Schneeschmelze entstandenen Bächleins, das sich sanft bewegt. Auch Ellingham ist es gelungen mit seiner Seite genau das zu zeigen, was er kann. Etwas Wichtigeres gibt es im Portfolio wohl nicht.

Besonders beeindruckend finde ich an den Portfolios, dass der Aufbau und die Art und Weise der Inszenierung genau das auf den Punkt bringen, was die Designer können. Häufig sieht man ähnliche Portfolios, die je nach Jahr massenhaft im Magazin-Style oder mit Fullscreen-Fotos/Videos entstehen. Unabhängig davon, ob es Designer mit dem Schwerpunkt Fotografie, Editorial, Corporate Design oder Screendesign sind. Auf der anderen Seite ist das natürlich nachvollziehbar. Obwohl man sich für die eigene Sache Zeit nehmen sollte, ist das genau das Gebiet, das man häufig monate- oder jahrelang vor sich herschiebt. Am Ende ist man doch nie zufrieden mit den Entwürfen und es muss eine improvisierte »Schnelllösung« her. Und was »kurz improvisiert« ist, währt meist am längsten.

Abbildungen
  1. Eigener Screenshot, URL: http://vaalentin.github.io/2015/, abgerufen am 23.5.2016.

Personas: Wer verbirgt sich hinter dem »Nutzer«?

Neben bekannten Methoden der Zielgruppenanalyse wie beispielsweise das »Sinus-Modell« stellt Marco Spies in »Branded Interactions – digitale Markenerlebnisse planen und gestalten« die mir unbekannte Methode der »Personas« vor. Diese Methode der Zielgruppenanalyse halte ich für sehr einleuchtend und naheliegend und möchte deshalb bei Gelegenheit selbst Personas erstellen.

Neben bekannten Methoden der Zielgruppenanalyse wie beispielsweise das »Sinus-Modell« stellt Marco Spies in »Branded Interactions – digitale Markenerlebnisse planen und gestalten« die mir unbekannte Methode der »Personas« vor.

Bei Personas handelt es sich laut Spies um die Beschreibung »typischer Vertreter einer Zielgruppe oder eines speziellen Zielgruppensegments«.1 Genauer definiert er sie als hypothetisch, archetypisch und spezifisch. Das heißt sie sind zum einen keine realen Personen und stellen keinen Durchschnittsnutzer, sondern einzelne Individuen dar. Diese besitzen besondere Eigenschaften, Erfahrungen und Verhaltensweisen.2

Bei den Personas geht es demnach nicht darum, Nutzer in allgemeine Modelle einzuordnen und die ganze Gruppe zu betrachten, sondern um die Vorstellung einzelner Personen, die auf unterschiedlichste Art und Weise mit dem Medium in Berührung kommen.

Daten einer Persona

Zum einen gehört dazu Spies’ Cousin Felix, der die Nintendo DS und Wii nutzt, zum anderen gehört auch seine Tante in die Zielgruppe, da sie die Spiele für den noch jungen Cousin kauft.3 Um sich diese Personen genau vorzustellen und deren Wünsche und Bedürfnisse einordnen zu können, werden Personas erstellt, durch die versucht wird die Zielperson genau zu charakterisieren. Das geschieht zum einen durch Personalisierungsdaten (Name, Foto), soziodemographische Daten (Alter, Geschlecht, Beruf, …), psychografische Daten (Wünsche, Werte, Lebensstil, Hobbys, …), technografische Daten (technische Aussattung, Nutzungsverhalten, …) und geographische Daten (Wohnort, Land, Kultur, …).4

Personas helfen dabei, sich in den Nutzer hineinzuversetzen und sie stets vor Augen zu haben, sollte es Unklarheiten innerhalb der Entwicklung des Konzepts geben. Mit »Persona Moodboards« werden die Zielpersonen visualisiert und geben ein klares Bild darüber ab, wer letztendlich der Nutzer der Anwendung sein könnte. Ich halte Personas für eine sehr spannende Methode der Zielgruppenanalyse. Durch die Analyse erhält man keine abstrakten Mileu-Zuordnungen wie beispielsweise das »Traditionelle Milieu« oder das »Hedonistische Mileu«, sondern eine sehr konkrete Vorstellung darüber, wer die Anwendung letztendlich nutzen könnte und wie die jeweiligen Anforderungen sind. Jeder besitzt im Verwandten- und Bekanntenkreis Menschen aus sämtlichen Zielgruppen. Dabei haben die Großeltern andere Anforderungen als die Eltern, die wiederum andere als Kinder oder Freunde. Durch die konkrete Vorstellung der jeweiligen Person werden die Bedürfnisse sehr deutlich und vereinfachen den Entwicklungsprozess immens. Da ich diese Methode so einleuchtend finde, möchte ich bei Gelegenheit selbst Personas erstellen, um mögliche Zielgruppen meines Masterprojekts darzustellen.

Quellen
  1. Spies, Marco: »Branded interactions: digitale Markenerlebnisse planen und gestalten«, Mainz 2012, S. 81.
  2. Vgl. Ebd.
  3. Vgl. Ebd., S. 82.
  4. Vgl. Ebd.

Natural User Interfaces – Die unsichtbaren Schnittstellen

Marco Spies erwähnt in seinem Buch »Branded interactions : digitale Markenerlebnisse planen und gestalten« das Natural User Interface (NUI), durch das Eingabegeräte wie z. B. die Maus oder Tastatur überflüssig werden. NUI bezieht sich dabei auf die »Art der Nutzung, nicht auf das Interface selbst.« Welche neuen Möglichkeiten eröffnen sich und welche Potentiale können genutzt werden?

Marco Spies erwähnt in seinem Buch »Branded Interactions: digitale Markenerlebnisse planen und gestalten« das Natural User Interface (NUI), durch das Eingabegeräte wie z. B. die Maus oder Tastatur überflüssig werden. NUI bezieht sich dabei auf die »Art der Nutzung, nicht auf das Interface selbst«1.
Luciano Floridi erwähnt bereits, dass Schnittstellen immer transparenter werden (Erkenntnisse und Eindrücke zu Luciano Floridis Buch»Die 4. Revolution« ») und Spies beschreibt, dass Interfaces nicht automatisch »Natural« sind, wenn z. B. an bekannten Mouse-Interaktions-Mustern festgehalten wird. Des Weiteren empfiehlt er, dass sich Gestalter von bekannten click-and-point Design Pattern frei machen sollten.2

Veränderung der Strukturen digitaler Inhalte

Diese Tatsache bringt viele neue Herausforderungen für den Gestalter mit sich. Auch wenn sich das NUI eher auf die Art und Weise der Interaktion bezieht, stellen sich Fragen inhaltlicher und gestalterischer Natur. Aus meiner Sicht könnten sich sämtliche Strukturen digitaler Inhalte verändern. Steht die Art der Eingabe erstmal fest, sei es beispielsweise via Spracheingabe oder via freier Gesten durch Hardware wie der Microsoft Kinect, müssen sämtliche bisherige Pattern (Interaktionsmöglichkeiten) überdacht werden. Benötigt man auf Webseiten noch Navigationshilfen wie beispielsweise »Zurück-Buttons« oder Breadcrumbs, wenn man sich auch durch Gesten wie beispielsweise Swipen behelfen kann? Benötigt man generell noch eine Navigation wie bisher oder könnte auch hier eine völlig neue Art gefunden werden? Wie sieht eine Suchfunktion aus, die nicht mehr zwingend grafisch sein müsste, sondern ähnlich wie »Google Now« funktionieren könnte?

Verschmelzung der virtuellen und analogen Welt

Ich sehe hier viel Potential, digitale Inhalte noch spezieller auf digitale Medien zuzuschneiden. Viele Inhalte sind bisher nach wie vor der analogen Welt entrissen, so haben beispielsweise eBooks noch immer Seitenzahlen, die aus meiner Sicht völlig überflüssig sind. Andererseits sehe ich noch viel Raum für Annäherungen zwischen der virtuellen und analogen Welt, welche durch Natural User Interfaces bereits enger aneinander rücken. In den Bestrebungen Innovation zu schaffen, sehe ich häufig ein übergeordnetes Ziel: Die Verschmelzung der virtuellen und analogen Welt. Wie können Muster der analogen Welt noch mehr im Virtuellen eingesetzt werden, so dass sie einerseits nicht einfach stupide überführt werden, jedoch bekannte Interaktionsmuster von Menschen abgerufen werden können? Da sich Menschen mit der Technologie verändern und an sie anpassen, stellt sich die weitere Frage, welche Muster es überhaupt wert sind wieder aufgegriffen zu werden und welche man getrost fallen lassen kann.

Natural User Interfaces wird definitiv ein Thema sein, das meinen Master begleiten wird. Hier sehe ich sowohl im technischen als auch im gestalterischen Bereich sehr viel Potential für gestalterische Experimente und Innovationen.

Quellen
  1. Spies, Marco: »Branded interactions: digitale Markenerlebnisse planen und gestalten«, Mainz 2012, S. 223.
  2. Vgl. Ebd.

Interaktives Schenken: Eine kommerzielle Web-Erzählung

Als Beispiel für eine kommerzielle Web-Erzählung habe ich ausgewählt. Der Däne Georg Arthur Jensen war Silberschmied, Designer und Künstler und so findet man auf www.georgjensen.com erstmal eine übliche Produktseite. Auf der Subdomain findet man dagegen ausgewählte Produkte in einer Erzählung präsentiert.

Als Beispiel für eine kommerzielle Web-Erzählung habe ich »gift of giving« ausgewählt. Der Däne Georg Arthur Jensen war Silberschmied, Designer und Künstler und so findet man auf www.georgjensen.com erstmal eine übliche Produktseite.
Auf der Subdomain findet man dagegen ausgewählte Produkte in einer Erzählung präsentiert. Man folgt in einzelnen Filmsequenzen verschiedenen Protagonisten auf einer Feier und kann bei Vier-Augen-Gesprächen auswählen, was dem Gegenüber geschenkt werden soll. Hat man ein Geschenk ausgewählt, folgt die nächste Sequenz, in der die Geschenkübergabe abgespielt wird. Anschließend wird das Produkt am Rande weiter angezeigt, so dass man bei Bedarf durch einen Klick weitere Details einsehen kann.

Screenshot: Gift of giving
Eine beschenkte FrauII

Auch wenn mich persönlich Web-Erzählungen, die rein für das Bewerben von Produkten gedacht sind, grundsätzlich nicht sonderlich interessieren, halte ich die Seite giving.georgjensen.com für gelungen. Die Möglichkeit einzelne Filmsequenzen mit interaktiven Momenten zu mischen, die den Verlauf ändern, finde ich spannend. Vor allem als Produktpräsentation, die nach wie vor sehr häufig langweilig inszeniert sind, halte ich das für einen wichtigen Schritt in die richtige Richtung.

Abbildungen
  1. Titelbild: Eigener Screenshot, Georg Jensen A/S, »gift of giving«, URL: www.giving.georgjensen.com/, abgerufen am 4.5.2016.
  2. Ebd.

Web-Erzählungen mit scroll activated animations

»Kaipo Che!« ist mehr Informationsseite über ein Kite Festival in Goa als eine tatsächliche Web-Erzählung. Dennoch möchte ich es als Beispiel zeigen, da es den Umgang mit den seit 1–2 Jahren häufig verwendeten scroll activated animations zeigt. Dabei werden, wie der Name schon ahnen lässt, Animationen durch das Scrollen beeinflusst.

»Kaipo Che!« ist mehr Informationsseite über ein Kite Festival in Goa als eine tatsächliche Web-Erzählung. Dennoch möchte ich es als Beispiel zeigen, da es den Umgang mit den seit 1–2 Jahren häufig verwendeten scroll activated animations zeigt. Dabei werden, wie der Name schon ahnen lässt, Animationen durch das Scrollen beeinflusst. Die Animationen werden dabei nicht einfach ausgelöst, sondern der Nutzer kann durch die Scrollgeschwindigkeit selbst Einfluss auf die Geschwindigkeit der Animationen nehmen.
Die Website zeigt zunächst das Logo von Kaipo Che!, sowie ein Schiff, das auf dem Wasser schwimmt. Scrollt man nach unten, zerbricht das Schiff durch einen Wal der nach oben springt. So verändert sich das Bild fortlaufend, wenn man weiter nach unten scrollt. Häuser mit fliegenden Drachen zoomen ein und wieder aus, später sieht man Menschen, die die Drachen halten. Des Weiteren erhält man Einblick in die Wohnhäuser, die offen gezeigt werden. Zwischendurch erhält der Nutzer die Information über das Kite Festival mit dem Datum und dem Ort, sowie genauere Informationen am Ende der Seite, die sich auf das Wesentliche konzentrieren.

Eindruck der Website

Grundsätzlich halte ich die Website für eine schöne Idee, ein Kite Festival zu bewerben. Die Illustrationen ergeben ein einheitliches Gesamtbild und es macht Spaß durch die Seite zu scrollen, um zu sehen, was als nächstes passiert. Dennoch ist innerhalb des illustrierten Parts nur eine einzige Information zu finden, nämlich dass es sich um das Goa Kite Festival handelt und wann und wo es stattfindet. Zwar bin ich Fan davon, Dinge nicht zu überladen und nur die nötigsten Informationen aufzunehmen, aber für diese eine Information scheint mir die Seite trotz minimalistischer Grafik etwas zu aufwändig und aufgebläht. Das Projekt zeigt jedoch, wie erwähnt, die scroll activated animations und findet daher einen Platz in meiner Auswahl.

Veranstaltungsseite für das Goa Kite Flying Festival 2016 auf www.kaipoche.co/II
Veranstaltungsseite für das Goa Kite Flying Festival 2016 auf www.kaipoche.coII

Zwischen Usability und User Experience

Die scroll activated animations finden sich zwischenzeitlich in unzähligen Webseiten, um eine spannende interaktive Komponente mit einzubringen. Ich persönlich mag Webseiten mit solchen Animationen sehr, da es Spaß macht, selbst das Bild der Seite zu verändern. Dennoch war bei Kaipo Che! schon bei Google der Hinweis, dass sie leider nicht auf Smartphones und Tablet funktioniert. Hier stellt sich mir die Frage, wie sehr die Usability eingeschränkt werden sollte, nur um eine tolle User Experience zu schaffen. In diesem Fall gibt es eine gute, alternative Lösung: Eine Illustration sowie alle Informationen kurz und knapp aufgelistet.
In anderen Fällen drängt sich die Frage nach Usability und User Experience jedoch auf. Dabei geht es nicht nur um Animationen dieser Art, sondern auch um multimediale Erzählungen oder anderen Seiten, die z. B. durch fehlerhafte Funktionsweise oder lange Ladezeiten zu Frustration beim Nutzer führen kann.
Letztere Fragestellung will ich weiter verfolgen, da ich das für ein wichtiges Thema halte, bei dem auch der Gestalter aufgefordert ist, umsetzbare Lösungen anzubieten.

Abbildungen
  1. Titelbild: Eigener Screenshot, Beard Design, »Kaipoche«, URL: www.kaipoche.co, abgerufen am 26.4.2016.
  2. Eigener Screenshot, Beard Design, »Kaipoche«, URL: www.kaipoche.co, abgerufen am 26.4.2016.

»Do not enter« – Storytelling mit Eye-Tracking

Das gemeinsame Projekt mit zwei Studenten des Bereichs Medientechnik ist nun abgeschlossen. Wie bereits in vorherigen Beiträgen berichtet ging es darum eine Demo zu bauen, die zeigt, welche möglichen Funktionen ein Eye-Tracker bietet.

Das gemeinsame Projekt mit zwei Studenten des Bereichs Medientechnik ist nun abgeschlossen. Wie bereits in vorherigen Beiträgen berichtet ging es darum eine Demo zu bauen, die zeigt, welche möglichen Funktionen ein Eye-Tracker bietet.

Die Reise führt den Nutzer durch ein verlassenes Haus, durch das er via Augen navigieren kann. Unterwegs werden Eye-Tracker-spezifische Möglichkeiten berücksichtigt. So kann z. B. in der Eingangshalle eine Taschenlampe mit den Augen gesteuert werden. An späterer Stelle wie z. B. dem Schlafzimmer mit Spiegel entwischt ein Gespenst, wenn man in den Spiegel schaut oder das Piano im nächsten Raum gibt Töne von sich, wenn man darauf schaut.

Die Reise durch das Haus ist letztendlich keine richtige Story, sondern eine passende Aneinanderreihung von Fotos, die eine einigermaßen einheitliche Welt aufbauen sollen.

Der Prozess

Die Arbeit mit den Medientechnikern war sehr angenehm und gut aufeinander abgestimmt. Man merkt jedoch schnell, an welchen Stellen Probleme zwischen den zwei Disziplinen Medientechnik und Design auftauchen und wo man sich gut abstimmen muss. So ist nicht jedes Design technisch umsetzbar und es müssen natürlich Kompromisse geschlossen werden. Ein Beispiel hierfür ist ein »Zurück-Pfeil«, den ich im Entwurf sowohl kleiner gestaltet als auch an anderer Stelle, näher am Rand, positioniert hatte. Das war jedoch nicht möglich, da der Eye-Tracker auf einen so kleinen Bereich am Rand nicht reagiert hat.


Passwort: eyetracking

Der Abschluss

Abschließend bin ich aus grafischer und konzeptioneller Sicht zwar nicht zufrieden mit dem Genre und Projekt an sich, dennoch war es eine gute Erfahrung in der Zusammenarbeit beider Disziplinen und eine gute Möglichkeit die Technik des Eye-Tracking für meine Arbeit in Betracht zu ziehen. Insgesamt halte ich es für keine Technologie, die eine große Zukunft im Bereich Storytelling haben wird, jedoch könnte es eine Funktion sein, die ähnlich der Webcam standardmäßig im Computer integriert ist.
Zusätzlich muss man natürlich kritisch hinterfragen, wie gut eine Technologie ist, die so sehr auf den reinen Instinkt abzielt. Damit ist es nicht nur möglich gezielt Inhalte auszuwählen. Wenn die Reaktionszeit des Eye-Trackers sehr schnell eingestellt ist, entscheidet der erste instinktive Blick und man ist ihm voll und ganz ausgesetzt.

Abbildungen

Die Bilder sind der Reihenfolge nach im Video zu finden.

1. AUSSENANSICHT
Alle: Lizenzfrei

2. EINGANGSHALLE
Eingangshalle | Zlatko Unger | Persönliche Zustimmung
Änderungen: Farbe, Belichtung , Einbau des Kerzenständers

Kerzenständer | Rod Waddington | CC BY-NC-SA 2.0
Änderungen: Einbau in Eingangshalle, Animation der Flammen, freigestellt

3. FLUR
Flur | stimpy023 (Flickr) | CC BY-NC-ND 2.0
Änderungen: Farbe, Belichtung

4. PIANOZIMMER
Zimmer | Vincent Ferron | CC BY-NC 2.0
Änderungen: Farbe, Belichtung

5. SCHLAFZIMMER
Zimmer | Vincent Ferron | CC BY-NC 2.0
Änderungen: Farbe, Belichtung, Änderung der Türfarbe

6. BILLIARDRAUM
Zimmer | Vincent Ferron | CC BY-NC 2.0
Änderungen: Farbe, Belichtung, Einbau einer animierten Maus

7. FLUR NACH BILLIARDRAUM
Flur | wildhack (Flickr) | CC BY-NC-SA 2.0
Änderungen: Farbe, Belichtung

8. LEERES ZIMMER
Bilderrahmen: Lizenzfrei
Bild im Bilderrahmen | Sarah Ackerman | CC BY 2.0
Änderungen: Farbe, Belichtung, Einbau des Bilderrahmens in den Raum, Einbau des Bildes in den Rahmen, Bild im Rahmen: Einbau eines Portraits

DREI ZIMMER ROSE HALL
Raum 1, Raum 2, Raum 3 | Sarah Ackerman | CC BY 2.0
Änderungen: Farbe, Belichtung, Portraiteinbau (R. 1), Türeinbau (R. 2)

9. KÄSTCHEN
Kästchen | Matthew Tomlinson | CC BY-NC 2.0
Änderungen: Farbe, Belichtung, Einbau einer Postkarte

Das verlassene Haus

Für unser Eye-Tracking-Projekt basteln wir gerade an einem Storyboard und testen die technischen Möglichkeiten des Geräts. In zwei Wochen soll die Demo dann vorgestellt werden.

Für das Eye-Tracking-Projekt (Wieso Eye-Tracking anstatt der Bedienung mit einer Maus oder der Tastatur? ») haben wir uns bereits für das mir ferne Genre »Mystery« entschieden. Genauer möchten wir ein verlassenes Haus entwerfen, durch das man via Eye-Tracking navigieren kann. Grundlage des Projekts sollen dabei Fotografien aus dem Netz sein, die mit der CC0-Lizenz gekennzeichnet sind.

Die Wahl des Genres ist damit begründet, dass hier besondere Eigenheiten des Eye-Trackings verwendet werden können. Für die reine Navigation durch ein Haus ständen genügend Alternativen wie z. B. die Maus zur Verfügung und würden den Einsatz von Eye-Tracking – aus meiner Sicht – nicht rechtfertigen. Viel mehr können damit beispielsweise Szenarien entwickelt werden, in denen ein Objekt reagiert, wenn man darauf schaut oder gerade dann, wenn es außerhalb des Blickes ist und nur durch eine Bewegung im Augenwinkel vermutet werden kann.

Für das Haus entwickele ich momentan ein erstes Storyboard, während die zwei Studenten aus dem Bereich Medientechnik verschiedene technische Möglichkeiten des Eye-Trackers testen. Die besondere Schwierigkeit beim Storyboard ist die Suche nach Fotografien, die natürlich auch die Entwicklung des Verlaufs beeinflussen. Durch die CC0-Lizenzen fällt es schwer ein einheitliches Bild zu schaffen. Die Unterschiede sollen, wenn möglich, durch anschließende Bildbearbeitung abgeschwächt werden.

Für die restliche Bearbeitung haben wir nun noch genau zwei Wochen Zeit bis die Demo vorgestellt werden soll.

Storytelling mit Hilfe von Eye-Tracking

Eine erste praktische Anwendung, um einen konkreteren Ansatz für meine Master-Arbeit zu finden.

Um einen konkreteren Ansatz für mein Master-Projekt zu finden, hat mich Prof. Anja Vormann in Kontakt mit Christian Geiger gebracht, der an der Hochschule Düsseldorf Professor für Mixed Reality und Visualisierung ist. Nach einem ersten Vortreffen, konnte der Kontakt zu zwei Studenten aus dem Bereich Medientechnik hergestellt werden. Gemeinsam möchten wir nun bis Ende April ein Projekt realisieren, das in erster Linie dazu dient, Möglichkeiten eines Eye-Trackers zu zeigen. Mit der Nutzung eines Eye-Tracker von tobii wurde bereits eine kleine Anwendung realisiert, in der man bei der Fokussierung festgelegter Punkte in die nächste Bildebene gelangt. So ist zu Beginn beispielsweise ein Haus mit Fenstern, beim Blick auf eine Weltkugel im Fenster gelangt man in das Zimmer. So arbeitet man sich Ebene für Ebene vor bis sich das ganze als Endlosschleife wiederholt.
Unsere Aufgabe ist es nun, eine ähnliche Anwendung umzusetzen, die die Möglichkeiten mit zusammenhängendem Inhalt zeigt. Dabei soll zunächst keine »Story« im eigentlichen Sinn entstehen, die Inhalte sollten jedoch nicht einfach lose und unabhängig voneinander sein.

netwars / out of CTRL

Lena Thiele stellt im Workshop »Transmediales Storytelling« das Projekt »netwars / out of CTRL« vor. Ihr gelingt damit ein umfangreiches, transmediales Projekt dessen inhaltlicher Fokus darauf liegt, die Menschen für die Gefahren des Netzes zu sensibilisieren.

Bei der Fachtagung des Journalistinnenbunds 2014 stellte Lena Thiele im Workshop »Transmediales Storytelling« das Projekt »netwars / out of CTRL« vor. Lena Thiele gelingt damit ein umfangreiches, transmediales Projekt dessen inhaltlicher Fokus darauf liegt, die Menschen für die Gefahren des Netzes zu sensibilisieren – denn wir sind schon längst mitten im Cyberwar. Neben den interaktiven dokumentarischen Web-Serien, streut sich das Projekt über weitere Medien: Es gibt eine 52-minütige TV-Dokumentation, eine TV-Serie, eine Graphic Novel App, sowie eine Audio- und E-Book-Serie.

Für mich steht v.a. die Web-Serie im Vordergrund. Sie setzt sich aus fünf Episoden zusammen, die jeweils durch Expertenmeinungen oder weiterführende Informationen wie z. B. die »ICS Sicherheitslücken« angereichert sind. Der Nutzer kann selbst entscheiden, welche zusätzlichen Informationen er anschauen oder lesen möchte. Er klickt sich damit spielerisch durch das teils humoristisch verpackte Wissen rund um die Thematik. »Gimmicks« wie ein ungefährlicher, aber nicht selbst gestarteter Download, zeigen mit Nachdruck, wie offen unsere Computer und Systeme sind. Der Titel der Episode 3 »Speichere dein Leben« gibt dagegen einen Hinweis darauf, wie viel heutzutage von gerade diesen Systemen abhängt.

»netwars / out of CTRL« ist aus meiner Sicht jedoch nicht nur deshalb interessant, weil es sich eines hochaktuellen Themas bedient. Sondern die Art der Erzählung macht für mich den ausschlaggebenden Unterschied. Mir macht es als Nutzer Spaß, mich in diesem Kosmos aus Wissen selbst fortzubewegen. Zu Klicken, was mir instinktiv auffällt und andere Dinge getrost vernachlässigen zu können, ohne das Gefühl zu haben, einen entscheidenden Punkt des Plots verpasst zu haben. Ich kann mich mit dieser Art der Erzählung perfekt sättigen, ohne übersättigt zu werden und meine Nutzung auf den Punkt darauf abstimmen, wie viel ich schon weiß und wie viel ich noch wissen möchte.

Momentan stellt das Projekt für mich nur eine kleine, kurze Recherchestation dar, die erwähnt werden will. Bei Bedarf wird die Recherche noch analytisch vertieft.

Website: netwars-project.com

Abbildungen
  1. Titelbild: Eigener Screenshot; Thiele, Lena: »netwars / out of CTRL«, URL: netwars-project.com/de/webdoc/episode2, Deutschland 2013, abgerufen am 18.1.2015.

Das Doku-Game »Fort McMoney« von David Dufrense

Wissensvermittlung als Erlebnis verpackt

»Fort McMoney« ist ein interaktives Doku-Game von David Dufrense, bei dem jeder Spieler mitbestimmen kann, wie es in Fort McMurray (Kanada) weitergeht. Die Ölindustrie ist dort riesig und die Spieler entscheiden über das Schicksal der Stadt. Man kann in Interviews und Gespräche der Einheimischen eintauchen und beispielsweise an Abstimmungen teilnehmen. Am besten man probiert es selbst unter http://fortmcmoney.com » aus.

Dieses Projekt habe ich für meine Recherchearbeit ausgewählt, da ich eine Kombination aus Dokumentation und Spiel für eine gute und spannende Lösung für interaktive Erzählungen halte. Durch Interaktion können zum einen die Geschehnisse beeinflusst werden, zum anderen der Verlauf des »Films« selbst. Dieses »Teil einer Geschichte werden« finde ich im Bezug auf meine Master-Arbeit sehr interessant, da die Verschmelzung von Film und Spiel sicher weiter zunehmen wird. Auch das realitätsnahe Thema gefällt mir gut. Des Weiteren finde ich diese Art der Wissensvermittlung, die nun – wenn auch nicht immer in Kombination mit einem Spiel – häufiger als interaktive Erzählung stattfindet, sehr passend. Zwar bedeutet eine Arbeit in dieser Form einen immensen inhaltlichen Aufwand, doch spricht bei gut gelungenen Projekten das Ergebnis (und das Erlebnis) für sich. Die generelle Frage wird weiter bleiben, welche neuen Formate nach solch‘ anfänglichen Hybridformen entstehen können.

Folge 1 »Boomtown« des Doku-Spiels Fort McMoney<sup>I</sup>
Folge 1 »Boomtown« des Doku-Spiels Fort McMoneyI
Übersicht möglicher Missionen, Umfragen und anderer interaktiver Elemente
Übersicht möglicher Missionen, Umfragen und anderer interaktiver ElementeII
Abbildungen
  1. Eigener Screenshot; Dufrense, David: »Fort McMoney«, URL: http://fortmcmoney.com/de/#/fortmcmoney, Kanada 2013, abgerufen am 17.12.2014.
  2. Ebd.