Schlagwort: interface design

Untersuchung der visuellen Evolution

Am Mittwoch habe ich meinen bisherigen Ansatz im Masterstudio präsentiert. Dabei war zum einen wichtig, worum es im Kern meiner Untersuchung geht, zum anderen welche Aspekte ich dabei berücksichtigen möchte.

Am Mittwoch habe ich meinen bisherigen Ansatz im Masterstudio präsentiert. Dabei war zum einen wichtig, worum es im Kern meiner Untersuchung geht, zum anderen welche Aspekte ich dabei berücksichtigen möchte.

Der Fokus soll, wie schon beschrieben, klar auf der visuellen Untersuchung liegen, jedoch bin ich überzeugt davon, dass man die visuelle Ebene nicht isoliert betrachten kann. Zudem finde ich es spannend und wichtig, welche kulturellen und technologischen Aspekte daran angeknüpft werden können.

Weiter stelle ich mögliche theoretische Inhalte vor, wie die Historie des World Wide Webs, die Auseinandersetzung mit Informationssystemen sowie die Entwicklung grafischer Benutzeroberflächen. Zudem schwebt mir vor, mein Thema medientheoretisch zu untermauern; hier muss ich jedoch überdenken, welche Theoretiker tatsächlich passend für mein Thema sind. Bisher hatte ich an Marshall McLuhan, Vilém Flusser, Byung-Chul Han, Luciano Floridi und Felix Stalder gedacht. An dieser Stelle muss ich die Unterscheidung treffen, wer seine Theorien schon mit der Kenntnis der digitalen Welt geschrieben hat und ob beispielsweise Han, welcher sich im Allgemeinen kulturkritisch äußert, überhaupt relevant ist.
Es könnten weitere Vertreter wie Ada Lovelace, Charles Babbage oder Alan Turing berücksichtigt werden, welche aber aufgrund ihrer Irrelevanz für mein Thema nur am Rande auftauchen können.

Die wichtigste und gleichzeitig offenste Frage ist, welches Ziel ich mit meiner Arbeit verfolge. Hier konnten wir aufgrund der kleinen Runde fast drei Stunden diskutieren und Möglichkeiten abwägen. Auf mögliche Ansätze und weitere Research-Möglichkeiten werde ich im Anschluss meiner Präsentation eingehen.

Die dargestellte Präsentation ist nicht vollständig, da ich zu viel redundante Informationen, wie beispielsweise die Namen der Medientheoretiker, für überflüssig halte.

Präsentation | Kern der Untersuchung

Präsentation | Kulturelle und technische Aspekte

Präsentation | Entwicklung zum eigenen Medium mit eigener Formsprache

Präsentation | Beispielhaft für theoretische Inhalte: Ted Nelson

Präsentation | Beispielhaft für theoretische Inhalte: Vannevar Bush

Präsentation | Beispielhaft für theoretische Inhalte: Doug Engelbart

Präsentation | Grafische Analyse

Präsentation | Grafische Analyse

Präsentation | No-Layout-Ära – Statisch – Fluid

Präsentation | Mögliche Stilrichtungen

Präsentation | Veränderung des Designs

Präsentation | Neue Ansprüche

Präsentation | Auflösung von Interfaces

Grenzen der Evolution

Einen Ansatz, den ich zunächst ausgeschlossen habe, ist die Überlegung, wie grafische Benutzeroberflächen der Zukunft aussehen könnten. Dabei geht es nicht zwingend darum, ein mögliches Interface bis zum Ende zu gestalten. Viel wichtiger ist es, die Ergebnisse meiner visuellen Recherche zu analysieren, beschreiben, hinterfragen und zu verbinden. Auf Basis analysierter Muster, und mit dem Verständnis wie vergangenes und gegenwärtiges funktioniert, können Schlüsse für das Kommende gezogen werden.

Zudem ist wichtig zu wissen, dass eine Evolution nicht unendlich weiter geht, sondern sich als abflachende Kurve oder sogar in Wellen verhält. Das bedeutet, dass sich Entwicklungen nicht nur verlangsamen, sondern sogar umkehren können.

Kulturelle Bedeutung des Interfaces

Auf Grundlage des Status Quo kann nicht nur interessant sein, wie zukünftige Interfaces aussehen, sondern auch wie User Interfaces die Zukunft verändern können. Weiter ist die Perspektive, wie die gesellschaftliche Wirkung von Interfaces ist, interessant. Für diese Impulse, die ich besonders spannend finde, benötige ich aber noch Zeit, um sie weiter reifen zu lassen. Generell scheint es vielversprechend, eine Brücke zu gesellschaftlichen Themen zu schlagen.

Eine wichtige Essenz des Gesprächs ist zudem die, dass sich die visuelle Analyse letztendlich auf ein völlig anderes Thema beziehen könnte. Auf technischer Seite haben wir weitere Punkte verdeutlicht.

Die Erhaltung des menschlichen Körpers

Vannevar Bush und Doug Engelbart zielen mit ihren Visionen und Entwicklungen nicht darauf ab, die Technik selbst zu verbessern. Vielmehr geht es im Kern darum, das menschliche Leben zu verbessern. Diese Feststellung ist insofern aufschlussreich, dass auch heutzutage die unausweichliche Frage im Raum steht, was wir mit der Gestaltung von Interfaces bewirken. Geht es darum, die Technik selbst zu verbessern oder spielt es tatsächlich eine Rolle, welche Erleichterung der Mensch durch das Ergebnis erfährt? In welchen Bereichen benötigt der Mensch zweifelsfrei Unterstützung? Ein Fazit aus dem Gespräch ist, dass es ein Anliegen sein sollte, den menschlichen Körper nicht verkümmern zu lassen, sondern dessen Können zu akzeptieren, miteinzubeziehen und mit technischen Möglichkeiten lediglich zu verbessern.

Weiter ist eine erkennbare Entwicklung, dass sich Mensch und Maschine immer näher kommen und zunehmend verschmelzen. Schnittstellen verschwinden zunehmend und es ist eine generelle Entwicklung zurück zum Körper zu sehen. An dieser Stelle frage ich mich jedoch, wie weit wir gehen wollen. Möchte ich beispielsweise bei meiner täglichen Arbeit wirklich wild gestikulierend vor einem Riesen-Interface stehen, um Inhalte durch die virtuelle Welt zu swipen?

Eine zusätzliche Erkenntnis ist, dass sich Technik dessen Evolution vollstreckt ist, nicht mehr rückgängig machen lässt. Hier ist nur die völlige Verbannung oder die sinnvolle Integration hilfreich. Halbverbannte Technologien, wie beispielsweise die Google Glass, leben sonst in versteckten Grauzonen weiter.

Darstellerische Möglichkeiten

Eine der Ideen, welche ich hatte, konnten weiter ausgeführt werden. Ursprünglich dachte ich an den Bau eines Raums oder Tunnels, in dem die Evolution dargestellt wird. Im Gespräch hatten wir innerhalb der Studenten unter anderem die Idee, dass man eine Zeitreise durchgehen kann. Jeder hat seine eigenen Erfahrungen mit dem Web und durch eine gute Inszenierung könnte sich der Besucher selbst gedanklich zurückerinnern und somit emotional angesprochen werden. Das kann durch die Verwendung von passenden Requisiten und Soundelementen unterstützt werden. In Bezug auf die Soundkomponente, kann man festhalten, dass das Web sowohl auditiv als auch visuell ruhiger und klarer geworden ist. Das beginnt bei der vorhandenen Technologie wie beispielsweise Modems, die sich geräuschvoll einwählen, oder laut kleckernden Tastaturen und zieht sich durch die visuelle Ebene weiter durch. Auch hier ist zu erkennen, dass sich das sehr überladene und blinkende Design in eine minimalistische, geordnete und ruhige Umgebung verwandelt.
Der enzyklopädische Ansatz könnte durch mehrere Handlungssträngen unterstützt werden, welche sich durch die Evolution ziehen und das Storytelling unterstützen.
Wünschenswert, aber sehr schwierig umzusetzen, wäre eine poetische Ebene miteinzubringen. Prof. Dr. Phi. Stefan Asmus spricht auch von einer Metaebene, über die man von oben oder unten auf alles blicken kann. Auch denkbar wäre, dass ich eigene Thesen oder die eigene Sicht einarbeite – das würde meine Arbeit von der rein faktischen Ansicht unterscheiden. Das ist vor allen Dingen deshalb wichtig, da die Arbeit als Designer sehr von Intuition geprägt ist. Im Gespräch fällt der Vergleich mit einem Gitarrenspieler, der sich intuitiv voll und ganz auf die Musik einlässt und möglicherweise nicht wissenschaftlich exakt erklären kann, was nun genau passiert ist.
Die poetische Ebene könnte auch dazu dienen, dass das was kodifiziert gezeigt wird, gleichzeitig das zeigt, was nicht dargestellt wird. Hier verwenden wir die berühmte Eisberg-Metapher, bei der nur die Spitze des Eisbergs sichtbar über dem Wasser liegt.

Die Erweiterung des Menschen

Im weiteren Verlauf sprechen wir über künstliche Intelligenz und wie schon erwähnt über Technologien, die den Menschen unterstützen sollen. Letztendlich geht es immer darum, das Leben des Menschen zu verbessern und die künstliche Intelligenz trägt unterstützend dazu bei. In Kooperation können Probleme gelöst werden und die häufige Darstellung, dass wir mit Chips leben und von KIs getrieben und bedroht werden, ist vorerst weit hergeholt. Ein Kernpunkt ist der, dass Algorithmen im Unterschied zum Menschen nichts Unbekanntes benennen können. Das heißt nicht, dass sie keine Fähigkeit haben selbst zu lernen und sich selbst zu verbessern, jedoch kann etwas, das in keiner Form im System war, nicht selbst erstellt werden. Die Gedanken im Bezug auf künstliche Intelligenzen finde ich auch in Bezug auf Interface Design sehr spannend. Letztendlich geht es immer darum, dem Menschen bestmöglichen Zugang zu einem System zu geben und hier ist die Überlegung spannend, was der Mensch überhaupt braucht, um sinnvoll auf ein System zugreifen kann. Das meine ich sowohl im allgemeinen Bezug auf Interfaces als auch speziell mit Blick auf das Design grafischer Benutzeroberflächen.

Weitere Empfehlungen

Je nachdem in welche Richtung ich mich entscheide, können mir eine weitere theoretische Auseinandersetzung helfen. Dabei geht es zum einen um den Technikbegriff von Heidegger. Zum anderen könnte Bruno Latours Akteur-Netzwerk-Theorie interessant sein, falls ich mich tiefer mit der Koexistenz von Mensch und Maschine beschäftigen möchte. Barads buch über den agentiellen Realismus, Dirk Bäckers Text über Designvertrauen sowie Luhmanns Theorien über Weltkunst könnten weitere Quellen sein.

Momentan bin ich mir unschlüssig, welche Richtung ich einschlagen möchte. Die theoretischen Hintergründe, welche wir im Studio diskutiert haben, habe ich prinzipiell verstanden. Letztendlich fällt es mir aber schwer so schnell eine Verknüpfung zu meinem Thema zu finden. Hier möchte ich mir noch einige Tage Zeit geben und in den nächsten Tagen intensiv über mein Abschlussprojekt nachdenken. Dabei kommen Pro-Contra-Listen zum Einsatz und die wichtige Frage, die ich mir selbst beantworten muss, ist was ich selbst möchte. Was möchte ich mit meinem Abschlussprojekt später machen und welches Thema holt mich so leidenschaftlich ab, dass ich darin nicht nur wochenlang eintauchen möchte, sondern bestenfalls einen Forschungsschwerpunkt oder Interesse für danach finde.

Randlose Gestaltung

Frank Chimero teilt mit seinem Beitrag »The Web’s Grain« Überlegungen, wie man aus einer anderen Perspektive für das Web gestalten kann. Für besonders interessant und zugleich naheliegend halte ich seine Idee, randlos zu gestalten.

Frank Chimero teilt mit seinem Beitrag »The Web’s Grain« Überlegungen, wie man aus einer anderen Perspektive für das Web gestalten kann. Für besonders interessant und zugleich naheliegend halte ich seine Idee, randlos zu gestalten. Er vertritt dabei die Idee, zunächst Elemente ohne bekannte Größe der »Leinwand« zu arrangieren und sie erst dann in eine Box zu packen.1 Das steht dem häufigen Ansatz gegenüber, in festen Bildschirmgrößen zu denken – sei es nur klein, mittel, groß –, um diesen Raum auszufüllen.
Er ist zudem der Meinung, dass wir unsere Designs mit dem Hintergedanken entwickeln, wie sie am besten in der responsiven Ansicht zusammenbrechen. Vielmehr sollten wir uns darauf konzentrieren, wie sich die Elemente aufbauen.2

Seine Ansichten machen meiner Meinung nach durchaus Sinn, da das Web kein begrenzter Raum ist, wie wir es beispielsweise auf dem Printbereich kennen. Meinem Verständnis nach, geht es ihm jedoch nicht darum, den angezeigten Bereich ins unendliche auszuweiten, so dass man in alle Richtungen scrollen kann, sondern eher darum, dass man vorgefertigte Größen nicht als Grundlage der Gestaltung nehmen soll. Hier denke ich auch an Raster, welche viel zu häufig viel zu schnell zum Einsatz kommen. So hat sich eine Aufteilung in 12 oder 16 Spalten zwar bewährt, was jedoch nicht bedeuten muss, ein solches Raster sofort zu wählen. Vielmehr sollte sich die Aufspaltung aus dem Design heraus ergeben. Weiter finde ich seine Kritik berechtigt, dass zu viel darüber nachgedacht wird, wie Elemente im responsiven aussehen. Auch hier weiß man zwar aus der Erfahrung, welche Muster sich bewährt haben, was aber auch hier nicht automatisch zu einer Aufteilung ohne vorherige Gestaltung führen sollte. Die Verbreitung hat meiner Ansicht nach auch damit zu tun, dass weit verbreitete Frameworks wie beispielsweise Bootstrap die Anzahl der Spalten fest definieren. So können Webseiten schnell und funktional umgesetzt werden, was aus wirtschaftlicher Sicht natürlich sinnvoll ist.

Vor allen Dingen in Hinblick darauf, dass sich das Web aus seiner statischen Begrenztheit befreit und den Weg zurück zur fluiden Gestaltung findet, halte ich den Ansatz für spannend und für einen gelungenen Anreiz, um weiter über das Thema nachzudenken.

Quellen
  1. Vgl. Chimero, Frank: »The Web‘s Grain«, Stand: 2015, URL: https://frankchimero.com/writing/the-webs-grain/, Absatz 75, abgerufen am 6.4.2018.
  2. Vgl. Ebd., Absatz 78.

Mögliche Wege meiner Master-Arbeit

In meiner Zwischenbesprechung mit Alain Yimbou am 28.3.2018 geht es um den aktuellen Stand meines Master-Projekts sowie um die mögliche praktische Umsetzung. Mein Thema, das den Arbeitstitel »evolution of a medium« trägt, zielt auf die kulturellen, technologischen und visuellen Veränderungen des World Wide Webs von Beginn an.

In meiner Zwischenbesprechung mit Alain Yimbou am 28.3.2018 geht es um den aktuellen Stand meines Master-Projekts sowie um die mögliche praktische Umsetzung. Mein Thema, das den Arbeitstitel »evolution of a medium« trägt, zielt auf die kulturellen, technologischen und visuellen Veränderungen des World Wide Webs von Beginn an.

Mögliche Inhalte

Kulturell sind für mich die Verformung der Gesellschaft, die Auflösung geographischer Grenzen, die Infosphäre, die Neuordnung von Raum und Zeit sowie das Web als Abbild der Kultur interessant. Technologisch könnte man das Web als jeweiligen Prototype der nächsten Entwicklung sehen. Zudem ist die Technologie als Motor und Lösung spannend für mich. Entwicklungen im Frontend, wie beispielsweise die Erstellung von Web-Layouts mit Tabellen, Floats, Flexbox oder CSS Grid gehören dabei fast schon in den visuellen Bereich.

Während kulturelle und technologische Aspekte vielmehr eine Nebenrolle spielen werden, steht vor allen Dingen der visuelle Part im Vordergrund. Nachdem das Web anfänglich mit seinen sehr gegenständlichen UI-Elementen eher eine Übersetzung der materiellen Welt war, evolviert es zunehmend zu einem eigenen Medium. Weiter halte ich den Verlauf von einer »No-Layout-Ära« hin zu sehr statischen Layouts und zurück zu fluiden Umsetzungen für sehr wichtig. Auch hier ist zu sehen, dass sich das Web zunächst sehr am Printbereich orientiert hat, um sich dann als eigenes Medium zu etablieren. Die Veränderung der grafischen Benutzeroberflächen, basierend auf kulturellen Lernprozessen und technologischem Fortschritt, ist ein weiterer essenzieller Bestandteil.

Theoretischer Teil

In meinem theoretischen Part möchte ich mich neben der historischen Entwicklung des World Wide Webs und grafischer Benutzeroberflächen mit Informationssystemen, medientheoretischen Inhalten sowie allgemeinen Konzepten des World Wide Webs auseinandersetzen. Dieser Bereich bietet zwar nur oberflächliche Einblicke, hilft mir jedoch zur Orientierung und zur Erfassung des Gesamtkontexts.
Im Bereich der Informationssysteme werde ich mich unter anderem mit Paul Outlet, Vannevar Bushs Memex, J.C.R. Licklider, Ted Nelson, Doug Engelbart und Bill Atkinsons HyperCard beschäftigten. Im medientheoretischen Teil möchte ich Einblicke in die Theorien von Marshall McLuhan, Vilem Flusser, Luciano Floridi, Byung-Chul Han oder Felix Stalder geben. Hier muss eine weitere Auswahl oder Erweiterung zeigen, welche Inhalte tatsächlich relevant für meine Arbeit sein werden. Im allgemeinen könnten Konzepte wie z. B. das von Linked Open Data bereichernd sein.

Praktische Ansätze

In welche exakte Richtung mein praktisches Projekt gehen könnte, ist momentan noch unklar. Für ein spannendes Detail halte ich die zeitliche Einordnung. In diesem Jahr wird das freie World Wide Web 25 Jahre alt und das erste Proposal jährt sich im kommenden Jahr zum 30. Mal. Ich kann mir sowohl eine Ausstellung im World Wide Web als auch im realen Raum vorstellen, wobei wir die ausschließliche Präsentation im Web während des Gesprächs ausgeschlossen haben. Um die digitalen Ergebnisse physisch greifbarer zu machen, macht es durchaus Sinn eine Exposition im realen Raum zu entwickeln. Wie die finale Umsetzung aussehen könnte, muss sich allerdings während meiner weiteren Arbeit herauskristallisieren.

Wie in meinem Beitrag »evolution of a medium« schon ausgeführt, kann ich mir vorstellen, eigene Räume zu bauen und Elemente des Webs, wie beispielsweise den berühmten Sternenhimmel oder MIDI-Sound, ins Analoge zu transportieren. Weiter wäre die Übersetzung von UI-Elementen mithilfe von 3D-Druck denkbar. Im vergangenen Beitrag beschreibe ich mögliche weitere Komponenten, welche ich an dieser Stelle nicht weiter ausführen möchte.

Ausblick

Meine Arbeit könnte Fragen nach zukünftigen Veränderungen beinhalten. Sowie der Einsatz von Natural User Interfaces vieles in der Gestaltung verändert hat, gehe ich davon aus, dass Conversational User Interfaces, Voice Interfaces oder dergleichen massive Auswirkungen auf grafische Benutzeroberflächen haben werden. Auch das Konzept von Linked Open Data beziehungsweise die generelle – auch automatisierte – Darstellung von Informationen wird sicher noch viele, neue Herausforderungen für Gestalter mit sich bringen.
Vor allem die neueren Formen von Interfaces als auch die Verwendung von Technologien wie Eye-Tracking und Augmented oder Virtual Reality, könnten aus meiner Sicht die Auflösung aktueller Formen von grafischen Benutzeroberflächen mit sich bringen.

Inspirierende Projekte

Abschließend habe ich inspirierende Projekte zusammengefasst, welche ich innerhalb meiner Master-Dokumentation behandelt habe. Dazu gehört »Once Upon« von Olia Lialina und Dragan Espenschied, welche im Jahr 2011 soziale Netzwerke mit den technologischen Möglichkeiten von 1997 nachbauten. Weiter inspiriert mich von den beiden Netzkünstlern »One Terabyte of Kilobyte Age«, welches ein Archiv von geocities-Seiten darstellt, die kurz vor Schließung des Dienstes gesichert wurden. Bei beiden gefällt mir vor allen Dingen die visuelle Komponente, welche die visuelle Ästhetik der 90er Jahre widerspiegelt. »Grosse Fatigue« stellt für mich eine großartige, poetische Form dar, ein Thema zu behandeln. Eine beeindruckende Verbindung zwischen theoretischen Inhalten und visueller Darbietung sehe ich zudem in den Projekten »In Pieces« von Bryan James, »Pulse« von Markus Kison und »Laws of UX« von Jon Yablonski.

Für meine Abschlussarbeit möchte ich eine visuelle Form finden, welche die Inhalte direkt und ohne Umschweife kommuniziert und die Ästhetik des Webs gleichermaßen mit aufnimmt.

Räumliche Bedienumgebungen

John Underkoffler, welcher unter anderem ein Interface für den Minority Report entwickelt hat, hält einen TED-Talk über die Zukunft der Interfaces.

John Underkoffler, welcher unter anderem ein Interface für den Minority Report entwickelt hat, hält einen TED-Talk über die Zukunft der Interfaces.

Ein wichtiger Standpunkt, den er vertritt, ist der, dass wir uns grundlegende Gedanken über neue Benutzeroberflächen machen müssen.1 Seit der Entwicklung des Macintoshs und dessen Benutzeroberfläche Anfang der 80er Jahre, hat sich auf technologischer Ebene unglaublich viel verändert. Nichtsdestotrotz arbeiten wir nach wie vor mit ähnlichen Systemen.2

Er führt den Raum als wichtige Komponente an, der Computer und deren Programmiersprachen verstehen die Geometrie der realen Welt jedoch nicht.3 In einem ersten Beispiel zeigt er, wie projizierte Objekte in realen Objekten verschwinden können.4 Er zeigt damit, wie virtuelle und nicht-virtuellen verschmelzen und erklärt, dass Eingabe und Ausgabe im selben Raum stattfinden. Er führt ein weiteres Beispiel an, welches ich besonders beeindruckend finde. Das System Urp für »urban planners« ist ein Werkzeug für Architekten, welche nun mit ihren eigenen Händen im realen Raum mit digitaler Unterstützung arbeiten können. Underkoffler spricht davon, dass den Architekten und Stadtplanern damit Modelle zurückgegeben werden, welche einst durch CAD-Systeme konfisziert wurden. Auf einer projizierten Oberfläche können beispielsweise Häusermodelle verschoben werden, welche Schatten werfen. Die Tageszeit wird dabei auf einer Uhr dargestellt, welche auch als reales Modell vorhanden ist, und die manuelle Veränderung der Zeit verändert gleichermaßen den Schattenwurf. Informationen, ob es beispielsweise Probleme mit der Baubehörde geben könnte, werden umgehend mit einbezogen.5
Diesen Anwendungsfall halte ich für ein gelungenes Beispiel, wie die Verbindung zwischen virtueller und nicht-virtueller Welt sinnvoll eingesetzt werden kann. Erstaunlich ist, dass diese »räumlichen Bedienumgebungen« bereits vor 15 Jahren im MIT und Media Lab entstanden sind.6

Räumliche Bedienumgebung Urp
Urp – Urban plannersI

Ein weiteres Beispiel von Underkoffler halte ich dagegen für nicht allzu anwendbar. Ihm werden auf der Leinwand (in der realen Arbeitsumgebung vermutlich kleiner) Bilder angezeigt, welche er mithilfe eines Bedienhandschuhs frei anordnen kann. Er navigiert durch die Galerie, zoomt rein und raus und zeigt Beispiele, wie die Bilder auf verschiedene Arten, z.B. nach Farbe, sortiert werden können.7 Er zeigt, wie Bilder einfach per Handbewegung auf andere Bildschirme geschoben werden können, was vor allem bei der Kollaboration verschiedener Teammitglieder spannend ist.8

Das System an sich halte ich grundsätzlich zwar nicht für schlecht, bei der Bedienung frage ich mich jedoch, ob sie alltagstauglich ist. Mit Blick auf die Zukunft und möglicher Interfaces, sehe ich mich nicht den ganzen Tag wild gestikulierend vor einer projizierten Fläche. Ich bin überzeugt davon, dass Interfaces zunehmend den Körper mit einbinden und halte die direkte Arbeit mit Händen auch grundsätzlich für sinnvoll. Aber diese Art von Bedienung sehe ich eher in zeitlich begrenzenden Umgebungen, wie beispielsweise innerhalb einer Präsentation.

Quellen
  1. Vgl. Underkoffler, John: »Pointing to the future of UI«, URL: https://www.ted.com/talks/john_underkoffler_drive_3d_data_with_a_gesture, TC: 00:01:07–00:02:03, abgerufen am 26.2.2017.
  2. Vgl. Ebd., TC: 00:00:12–00:01:07.
  3. Vgl. Ebd., TC: 00:01:07–00:02:03.
  4. Vgl. Ebd., TC: 00:02:03–00:02:26.
  5. Vgl. Ebd., TC: 00:04:15–00:05:20.
  6. Vgl. Ebd., TC: 00:05:20–00:06:29.
  7. Vgl. Ebd., TC: 00:07:18–00:08:31.
  8. Vgl. Ebd., TC: 00:09:50–00:10:56.
Abbildungen
  1. Eigener Screenshot; Underkoffler, John: »Pointing to the future of UI«, URL: https://www.ted.com/talks/john_underkoffler_drive_3d_data_with_a_gesture, TC: 00:10:22, abgerufen am 26.2.2017.

Zurück auf Los

Frank Chimero spricht in einem Vortrag im Oktober 2017 bei der Mirror Conf in Braga über die steigende Komplexität in der Webentwicklung und wiederkehrende Verwirrtheit in Bezug auf technologische Neuerungen und Möglichkeiten. Seine Schilderung finde ich vor allen Dingen dahingehend spannend, dass es mir in vielerlei Hinsicht ähnlich geht.

Frank Chimero spricht in seinem Vortrag »Everything Easy is Hard Again« im Oktober 2017 bei der Mirror Conf in Braga über die steigende Komplexität in der Webentwicklung und wiederkehrende Verwirrtheit in Bezug auf technologische Neuerungen und Möglichkeiten. Seine Schilderung finde ich vor allen Dingen dahingehend spannend, dass es mir in vielerlei Hinsicht ähnlich geht.

Er erläutert die Veränderung bei der Entwicklung von Web-Layouts und von dem Gefühl, dass es sich alle fünf Jahre so anfühlt als würde man noch einmal von vorne beginnen,1 nachdem man sich gerade in die aktuelle Technologie eingearbeitet hat. Ab Mitte der 90er Jahre war die Gestaltung mithilfe von Tabellen üblich; später waren es Floats, Flexbox oder CSS Grid, welche auch in Kombination verwendet werden können.
Zudem spricht er von der Tatsache, dass Methoden, die Tabu waren plötzlich zu den Empfehlungen gehören. Hier nennt er das Beispiel, dass er einen Artikel gelesen hat, in dem es um die Vorteile geht, keine Stylesheets, sondern Inline-Styles zu verwenden.2 Ich selbst hing auch schon an diesem Punkt als ich das erste mal von »above the fold« hörte und eine Seite nach diesem Konzept verbessern sollte.

Ähnlich wie Chimero gab es bei mir immer wieder – wenn auch riesengroße – Lücken bei der Entwicklung von Webseiten. Nachdem ich meine ersten Webseiten im Jahr 2000 erstellte, habe ich mich jahrelang nicht mehr im Detail damit beschäftigt. Hier und da nur Versuche bis ich mich mit Beginn meiner Ausbildung 2007 wieder angenähert habe. Durch kleine statische Seiten oder die Betreuung von Seiten via Content Management Systeme wurde es wieder wärmer, doch den richtigen Sprung habe ich nicht mehr geschafft. Erst mit dem Beginn meines Studiums hatte ich immer wieder die Motivation, »das jetzt endlich richtig lernen zu wollen«. Es ging damit los, Floats richtig zu verstehen und plötzlich gab es dieses Responsive Webdesign, welches vieles durcheinander brachte: Pixel, em, rem oder Prozent? Fluid, Adaptiv, was? Und nach kurzer Pause gab es mit Flexbox plötzlich wieder etwas Neues. Ist das zusätzlich? Oder alternativ? Die meiste Zeit verbrachte ich wohl damit, zu verstehen, was wie und warum verwendet wird.

Mit meinen Kenntnissen war es bisher kein Problem, kleinere Webprojekte umsetzen, doch vor wenigen Wochen habe ich mich entschieden, tiefer eintauchen zu wollen. Ich habe damit begonnen bei #100daysofcode mitzumachen, um zu sehen, was passiert, wenn ich jetzt länger am Ball bleibe. Dabei geht es darum, sich eigene Ziele zu setzen und 100 Tage lang mindestens eine Stunde täglich zu üben und zu lernen. Es ist erstaunlich wie viel man in so kurzer Zeit lernen kann und ich hoffe trotz Master-Arbeit dran bleiben zu können. Vor allem wünsche ich mir, nicht wie bisher demotiviert zu sein, sobald es in JavaScript zu sehr ins Detail geht.

Der Vortrag von Frank Chimero inspiriert und motiviert mich dahingehend, dass es aus seiner Sicht egal sein könnte, ob man direkt aus der Schule kommt oder 20 Jahre Erfahrung mitbringt. Man könnte an der gleichen Stelle landen, nämlich im ersten Jahr, in dem man Webseiten erstellt.3 Und das ist immerhin ein hervorragender Anfang für viele weitere Jahre.

Quellen
  1. Vgl. Chimero, Frank: »Everything Easy is Hard Again«, Stand: 12.10.2017, URL: https://frankchimero.com/writing/everything-easy-is-hard-again/, Absatz 18, abgerufen am 15.2.2017.
  2. Vgl. Ebd., Absatz 26.
  3. Vgl. Ebd., Absatz 52.

(Un-)Menschlickeit im digitalen Mittelalter

Der Film »Lo and Behold – Wovon träumt das Internet?« des Regisseurs Werner Herzog geht in seinen zehn Kapiteln der Geschichte des Internets und dessen Auswirkungen auf unsere Gesellschaft nach. In Gesprächen werden beispielsweise »Die Herrlichkeit des Netzes«, »Die dunkle Seite«, »Internet auf dem Mars« oder die Zukunft des Netzes thematisiert. Gesprächspartner sind dabei Leonard Kleinrock, Elon Musk, Sebastian Thrun sowie viele weitere wichtige Protagonisten dessen tägliche Arbeit vom Internet bestimmt wird oder deren Leben durch das Netz massiv verändert wurde.

Der Film »Lo and Behold – Wovon träumt das Internet?« des Regisseurs Werner Herzog geht in seinen zehn Kapiteln der Geschichte des Internets und dessen Auswirkungen auf unsere Gesellschaft nach. In Gesprächen werden beispielsweise »Die Herrlichkeit des Netzes«, »Die dunkle Seite«, »Internet auf dem Mars« oder die Zukunft des Netzes thematisiert. Gesprächspartner sind dabei Leonard Kleinrock, Elon Musk, Sebastian Thrun sowie viele weitere wichtige Protagonisten dessen tägliche Arbeit vom Internet bestimmt wird oder deren Leben durch das Netz massiv verändert wurde. Wie in meiner Dokumentation üblich, möchte ich keine Filmrezension schreiben, sondern lediglich die wichtigen Punkte herauspicken. Vor allem die Kapitel »Künstliche Intelligenz« und »Das Internet des Ichs« sind dabei spannend für mich.

In ersterem prophezeit Sebastian Thrun, dass wir an einen Punkt kommen werden, an dem fast alles von Maschinen übernommen werden kann und dass sie das meiste besser als wir Menschen können. Das liegt unter anderem daran, dass Maschinen sehr viel schneller lernen.1 Zudem erklärt er schon zuvor, dass die Fehler, die selbstfahrende Autos machen, sofort mit anderen – auch »ungeborenen« – Autos geteilt werden. Dadurch wird dieser Fehler niemals wiederholt, was ein enormer Vorteil gegenüber menschlichen Fahrern ist.2

Theologische Revolution

Solche grundlegenden Veränderungen, die durch das Internet und die Maschinen, die für uns denken, einhergehen, benötigen laut Computerwissenschaftler Danny Hillis eine Veränderung unserer Moral. Wir müssten über die Definition, was menschlich sein wirklich bedeutet, nachdenken und er sagt eine theologische Revolution voraus. Wir ergründen und entwickeln eine neue Gesellschaft sowie neue Ideen darüber, was richtig und falsch ist. Er sieht die momentane Zeit zudem als eine unglaublich kreative Zeit in der Menschheitsgeschichte – nicht nur technologisch, sondern auch moralisch und kulturell.3 Dieser Gedanke ist dem Luciano Floridis, der von einer neuen Informationsphilosophie spricht, sehr nahe. Auch er ist der Meinung, dass die Entwicklung einer neuen Philosophie notwendig ist, um dem rasanten Wandel, dem unsere Zeit unterliegt, gerecht zu werden.

Das digitale Mittelalter

Der Computerwissenschaftler sieht eine weitere Entwicklung, die den Gedanken Floridis sehr ähnlich ist. Während der Informationsphilosoph es als »Digitalen Gedächtnisverlust« formuliert (Die Hypergeschichte »), spricht Hillis vom »Digitalen Mittelalter«. Seinen Beobachtungen nach passieren heutzutage viele Dinge deren Hintergründe später nicht mehr nachvollziehbar sind. Während es noch handschriftliche Briefe der Gründerväter der USA gibt, wird heute vieles per E-Mail geklärt. Diese Unterhaltungen vorweg werden höchstwahrscheinlich also nicht mehr rekonstruierbar sein und verloren gehen.4 Während die Ausführung beider ziemlich unterschiedlich sind, entsprechen sie sich im Kern doch sehr. Im Grunde geht es bei beiden um eine nicht vorhandene oder verlorene Historie, welche es den Generationen nach uns sehr schwierig machen wird, die Hintergründe zu verstehen.

Das unsichtbare Internet

Während meines Researchs beschäftigt mich immer wieder das Verschwinden von Schnittstellen. Technologie wird zunehmend unsichtbar und rückt in den Hintergrund. Der Internetpionier Leonard Kleinrock erläutert im Film, dass ein Raum wissen müsste, wenn man da ist. Er spricht von Voice User Interfaces, so dass man mit der Technologie kommunizieren kann, welche wiederum mit Sprache, einem Hologram oder einem Display auf natürliche Weise antworten kann. Auch Gesten, Berührungen oder sogar das Miteinbeziehen des Geruchssinns hält er für möglich. Er vergleicht sie dabei mit der Elektrizität, welche einfach unsichtbar in unseren Wänden eingelassen ist. Zu dieser Unsichtbarkeit müsste sich das Internet jedoch noch entwickeln.5 Ähnlich sieht das der Sicherheitsanalytiker Sam Curry, welcher von Räumen spricht, in denen das Licht nach eigenen Vorlieben gedimmt oder die Musik angeschaltet wird, wenn man den Raum betritt.6 Vor allem der letzte Ansatz eines Smart Homes, ist heutzutage teilweise schon möglich. So können beispielsweise HUE-Lampen eingeschaltet werden, sobald sich das Smartphone mit dem W-LAN verbindet oder Lampen von z. B. Trilux je nach Tageslicht gesteuert werden.

Abschließend liefert mir der Film »Lo and Behold – Wovon träumt das Internet?« leider kaum neue Erkenntnisse oder Ansätze, welche ich für meine Master-Arbeit verwenden kann. Die interessanten Gedanken habe ich hier für mich zusammengefasst, jedoch habe ich vor allem im Hinblick darauf, dass Elon Musk oder Ted Nelson Teil des Films sind, mehr erwartet.

Quellen
  1. Vgl. Herzog, Werner: »Lo and Behold – Wovon träumt das Internet?«, 98 Minuten, Vereinigte Staaten 2016 [Deutschland 2017], TC: 01:23:30–01:24:22, VIII. Künstliche Intelligenz.
  2. Vgl. Ebd., TC: 00:34:56–00:36:18, II. Die Herrlichkeit des Netzes.
  3. Vgl. Ebd., TC: 01:24:23–01:25:08, VIII. Künstliche Intelligenz.
  4. Vgl. Ebd., TC: 01:29:46–01:30:20, IX. Das Internet des Ichs.
  5. Vgl. Ebd., TC: 01:26:17–01:27:20, IX. Das Internet des Ich.
  6. Vgl. Ebd., TC: 01:27:20–01:28:28, IX. Das Internet des Ich.

Der schmale Grad zwischen Nutzerfreundlichkeit und Funktionalität

Die erste graphische Benutzeroberfläche für Personal Computer bzw. Workstations wird dem Xerox Alto zugeschrieben. Welches Unternehmen nun den allerersten kommerziellen Computer mit GUI entwickelte und vertrieb, ist für mich dagegen etwas unklar.

Die erste grafische Benutzeroberfläche für Personal Computer bzw. Workstations wird dem Xerox Alto zugeschrieben. Welches Unternehmen nun den allerersten kommerziellen Computer mit GUI entwickelte und vertrieb, ist für mich dagegen etwas unklar. Zum einen wird hier der PERQ genannt, welcher 1979 von dem Unternehmen Three Rivera Computer Corporation veröffentlicht wurde und sich sehr am Xerox Alto orientiert. Das Jahr der Veröffentlichung spricht eindeutig dafür. Zum anderen bin ich bisher häufig über den Xerox Star gestolpert, welcher als eine verbesserte Version des Xerox Alto gilt und erst im Jahr 1981 auf den Markt kam. Scheinbar gehörte er jedoch zu den damals eher unbekannten Workstations. Weiter zählt der 1983 veröffentlichte Apple Lisa zu den ersten kommerziellen Computern, der eine grafische Benutzeroberfläche beinhaltete, die zudem – wie beim Xerox Star – über eine Maus bedienbar war. Er gilt wohl als zunächst bekannteste und revolutionärste Erfindung in dieser Reihe.

Unabhängig davon, ob nun Windows, Mac oder Linux sieht Carrie Anne Philbin jedoch eins: dass fast immer eine evolvierte Version des WIMP Interfaces verwendet wird, welches mit dem Xerox Alto eingeführt wurde.1

Der Apple Lisa

Der Entwicklung des Apple Lisas ging 1979 ein entscheidender Besuch von Steve Jobs und seinem Team bei Xerox voraus.2 Während Adele Goldberg, Gründerin von ParcPlace Systems, zu diesem Zeitpunkt bereits klar war, dass Xerox mit einer Präsentation des Altos das Tafelsilber des Unternehmens verschenkte, bestanden die Manager auf diese Vorführung.3 Das Problem war, dass die Forscher in Palo Alto zwar dazu angehalten wurden, neue Ideen für die Zukunft zu entwickeln.4 Auf der anderen Seite verstand die Führung in New York, welche grundsätzlich auf die Entwicklung von Druckern aus war, jedoch nicht die Visionen, die dort entstanden.5 Umso begeisterter war Larry Tesler, früher Forscher bei Xerox PARC, dass Steve Jobs und sein Team innerhalb einer Stunde mehr verstanden als die Manager über Jahre nicht.6 Auch Jobs sah, dass das Unternehmen keine Ahnung hatte, was mit Computern alles möglich ist und glaubt daran, Xerox den Sieg vor den Füßen weggeschnappt zu haben. Aus seiner Sicht könnte das Unternehmen die Computerindustrie beherrschen und das IBM oder Microsoft der 90er Jahre sein.7

Dem Apple-Mitgründer wurden bei dieser Demo drei Dinge gezeigt, von denen eine Sache besonders hervorstach. Neben der objektorientierten Programmierung und dem Netzwerk-Computersystem war vor allem die grafische Benutzeroberfläche interessant für ihn. Laut ihm war es das bis dahin beste, was er in seinem Leben gesehen hatte und trotz der kleinen Fehler, die er erkannte, wusste er innerhalb von zehn Minuten, dass in Zukunft alle Computer so arbeiten würden.8 Die Besucher sahen einen Computer, der dafür gestaltet wurde, einfach bedient zu werden und den jeder verwenden konnte.9

Auf dieser Grundlage ging Jobs und sein Team zurück zu Apple und entwickelte Lisa.10 Dabei wurde das System nicht einfach nachgestellt, sondern um viele Funktionen erweitert. So gab es beim Xerox Alto beispielsweise keine Menüs, sondern Pop-up-Fenster. Zudem konnten Fenster mit einem Doppelklick geöffnet werden und sich erstmals überlappen. Weiter soll er über eine vollständige Schreibtisch-Metapher verfügt haben, so dass es nun Features wie den Papierkorb gab. Auch Befehle wie Apfel-S wurde mit dem von Apple eingeführten »Macintosh Human Interface Guide« eingeführt.11

Screenshot Apple Lisa
Screenshot des Apple Lisa Betriebssystems

In einer Demo wird diese neue Technologie vorgestellt. Dabei wird gezeigt, dass Lisa einen Desktop simuliert, auf dem frei platzierbare Icons zu finden sind.12 Neben der Vorstellung von gewöhnlichen Schreibtisch-Tools wie einer Uhr oder einem Kalkulator,13 werden Programme zur Textverarbeitung oder Gestaltung demonstriert. Wenn man bedenkt, dass der Einzug von Computer für den privaten Gebrauch erst Ende der 70er Jahre so wirklich begann, sind Werkzeuge zur Text- oder Grafikbearbeitung als revolutionär einzustufen.

Später wurde zwar häufig behauptet, dass Steve Jobs die Ideen von Xerox geklaut hätte, aber unter dem Strich gab es einen Deal: Xerox konnte vor dem Börsengang Apples günstige Aktien-Anteile kaufen, welche sich später vervielfachten.14

Insgesamt zählt Apple Lisa zwar als sehr fortschrittlich, war aber für den normalen Privatgebrauch zu teuer. Heute läge der Preis immerhin bei 25.000 Dollar, was in der heutigen Welt voller günstiger Bauteile unvorstellbar wäre. Somit war er ähnlich wie der Xerox Star ein Flop und Apple bastelte an einem Nachfolger, dem Macintosh. Er wurde 1984 präsentiert und war mit – nach heutigen Verhältnissen – 6.000 Dollar vergleichsweise günstig.15

Der Macintosh

Bei der Produktpräsentation definiert Steve Jobs zwei Meilenstein-Produkte in der damaligen Computerindustrie. Dazu gehörte der Apple II aus dem Jahr 1977, sowie der IBM Personal Computer von 1981. Den Macintosh sah er als dritten Meilenstein in dieser Reihe. In der auf dem Macintosh-Bildschirm gezeigten Präsentation, werden verschiedene Features wie die Veränderung von Schriftgrößen, -stilen und arten gezeigt. Die Schrift konnte deformiert werden, Bildbearbeitung wurde ermöglicht und auch die Tabellenkalkulation erhält einen Platz in dieser Demonstration.16 Manche Funktionen sind zwar bereits im Lisa zu finden, der Macintosh versprach jedoch der weit verbreitete Computer für den heimischen Gebrauch zu werden.

Innerhalb eines Textes, welcher von einer Computerstimme vorgelesen wurde, gibt es zudem eine Spitze gegen den IBM-Computer, welcher als Konkurrent des Lisas zählte. Dort heißt es »Ich würde gerne eine Maxime mit dir teilen, welche ich erkannte, als ich zum ersten Mal ein IBM-Großrechner sah: TRAU NIE EINEM COMPUTER, DEN DU NICHT HOCHHEBEN KANNST!«17.

Kampf um die Marktmacht

Obwohl Steve Jobs in seiner Erfindung einen revolutionären Fortschritt sah, stürzten die Verkäufe schnell ein. Selbst Werbekampagnen, in denen IBM als beherrschender Tyrann ganz nach George Orwell dargestellt wurde oder in denen gezeigt wurde, wie einfach der Macintosh im Gegensatz zum IBM-Rechner bedient werden kann, brachten nichts.18

Auch wenn die grafische Oberfläche und die generelle Bedienbarkeit tatsächlich fortschrittlich waren, konnte der Rechner nicht mit dem deutlich günstigeren IBM-Rechnern mithalten.19 Ein weiteres Problem war der Umgang mit dem eigenen System, den Apple bis heute beibehalten hat. Für die geschlossene Architektur gab es kaum Software. IBM hat sich dagegen deutlich offener positioniert, so dass fremde Produkte oder nicht-IBM-Computer mit dem Label »IBM-kompatibel« versehen werden konnten.20 Das hatte zur Folge, dass die Computer von Apples Konkurrenz zwar nicht so intuitiv zu bedienen waren, die Menschen aber auf einen viel größeren Markt an kompatibler Hard- und Software zugreifen konnten.

Im Bezug auf die grafische Oberfläche konnte man bei Microsoft Windows erst mit der Einführung von Windows 3.0., beziehungsweise noch eher mit der von Windows 95, wirklich von einem verbesserten und konsumerorientierten GUI sprechen. Mit Windows 95 wurden Elemente wie die Taskbar, der Datei-Manager Windows Explorer oder das Start-Menü eingeführt. Zudem wurde mit dem Projekt Microsoft Bob ein kompletter Raum mit Regalen, Tisch und Türen zu weiteren Räumen als Metapher geschaffen. Dieses Konzept war jedoch nicht erfolgreich.21

Um den Macintosh zu retten, benötigte es die »Killer-Anwendung«, welche bereits auf IBM-Rechnern zu finden waren. Ein großer Fortschritt war dabei die Einbindung von Adobe, dessen Gründer John Warnock und Charles Geschke zuvor bei Xerox arbeiteten. Deren Entwicklung der Druckersprache Interpress fand dort keinen Anklang, was in die Gründung von Adobe und der bis heute verbreiteten Druckersprache PostScript mündete. Damit war es möglich »WYSIWYG« ernsthaft zu verwirklichen: Mit Laserdruckern konnte genau das gedruckt werden, was auf dem Bildschirm zu sehen war.22 Dieser Fortschritt präziser Ausdrucke, gekoppelt an ein System mit nutzerfreundlicher Oberfläche, mündete in eine völlig neue Branche: dem Desktop-Publishing. Damit wurde der Macintosh der Computer der Wahl in der kreativen Branche.23

Der schmale Grad zwischen Nutzerfreundlichkeit und Funktionalität

An diesem Beispiel erkennt man, wie schmal der Grad zwischen Nutzerfreundlichkeit und nötiger Funktionalität ist. Zudem lässt sich einiges zu deren Wichtigkeit ablesen.

Bei einer Demonstration des Apple Lisas 1984 betont Alfred Di Blasi, dass Leute nicht wissen sollten wie ein Computer funktioniert. Sie müssen ihn einfach bedienen können, um ihre Arbeit machen zu können. Computer seien Produktivitätstools, weshalb Leute mehr Zeit dafür aufbringen sollten, das zu tun, was sie können anstatt erst zu lernen, wie man das Werkzeug nutzt.24 Nichtsdestotrotz sollten solche Produktivitätstools erst einmal vorhanden sein.

Diesen Punkt kann man aus meiner Sicht auch auf die Gestaltung im Web übertragen. Zum einen halte ich es für wichtig, dass eine Webseite, angefangen bei der grundsätzlichen Struktur bis hin zum letztendlichen grafischen Interface, durchweg so aufgebaut sein muss, dass der Nutzer so wenig Hürden wie nötig bewältigen muss. Jedes Unverständnis und jede Unsicherheit auf dem Weg zum Ziel, birgt die potenzielle Gefahr, dass der Besucher abspringt. Zum anderen darf jedoch die Wichtigkeit der grundsätzlichen Funktionalität nicht übersehen werden.

Bestenfalls leben natürlich die primären Funktionen im harmonischen Einklang mit Nutzerfreundlichkeit und unterstützendem Interface-Design. Nichtsdestotrotz macht bei der Entwicklung von Webseiten der Einsatz von minimum viable products (mvp) durchaus Sinn. Dadurch wird sichergestellt, dass ein Produkt die Mindestanforderungen erfüllt, welche meiner Ansicht nach darin liegen, dass ein Produkt funktioniert. Das bedeutet, dass der Nutzer beim Besuch einer Webseite sein Ziel (und natürlich das des Unternehmens) erreichen soll. Hier sehe ich die Funktionalität als primären Faktor. Zwar können unterstützendes Design und hervorragende Nutzerfreundlichkeit die Chance auf Erreichen des Ziels massiv steigern, alleine kann jedoch nur die Funktionalität überleben.

Quellen
  1. Vgl. Philbin, Carrie Ann, CrashCourse: »Graphical User Interfaces: Crash Course Computer Science #26«, Stand: 30.8.2017, URL: https://www.youtube.com/watch?v=XIGSJshYb90, TC: 00:11:32–00:11:47, abgerufen am 12.1.2018.
  2. Vgl. Ebd., TC: 00:08:13–00:09:12.
  3. Vgl. Cringely, Robert X: »Triumph of the Nerds«, Dokumentation, 150 Minuten, Vereinigte Staaten 1996, TC: 01:52:54–01:53:33.
  4. Vgl. Ebd., TC: 01:46:50–01:47:00.
  5. Vgl. Ebd., TC: 01:48:55–01:49:42.
  6. Vgl. Ebd., TC: 01:54:21–01:54:32.
  7. Vgl. Ebd., TC: 01:54:32–01:54:55.
  8. Vgl. Ebd., TC: 01:50:41–01:51:48.
  9. Vgl. Ebd., TC: 01:53:34–01:54:09.
  10. Vgl. Philbin, Carrie Ann, CrashCourse: »Graphical User Interfaces: Crash Course Computer Science #26«, Stand: 30.8.2017, URL: https://www.youtube.com/watch?v=XIGSJshYb90, TC: 00:08:13–00:09:12, abgerufen am 12.1.2018.
  11. Vgl. Dernbach, Christoph: »Apple und Xerox PARC«, Stand: 10.8.2013, URL: http://www.mac-history.de/apple-geschichte-2/2012-01-29/apple-und-xerox-parc, Absatz 19 & 20, abgerufen am 20.1.2018.
  12. Vgl. DiBlasi, Alfred, adiblasi: »Tech: Apple Lisa Demo (1984)«, Stand: 19.11.2006, URL: https://www.youtube.com/watch?v=a4BlmsN4q2I, TC: 00:08:00–00:08:35, abgerufen am 12.1.2018.
  13. Vgl. Ebd., TC: 00:08:35–00:09:15.
  14. Vgl. Philbin, Carrie Ann, CrashCourse: »Graphical User Interfaces: Crash Course Computer Science #26«, Stand: 30.8.2017, URL: https://www.youtube.com/watch?v=XIGSJshYb90, TC: 00:08:13–00:09:12, abgerufen am 12.1.2018.
  15. Vgl. Ebd., TC: 00:09:12–00:09:43.
  16. Vgl. Cringely, Robert X: »Triumph of the Nerds«, Dokumentation, 150 Minuten, Vereinigte Staaten 1996, TC: 02:04:07–02:05:43.
  17. Ebd.
  18. Vgl. Ebd., TC: 02:06:41–02:07:37.
  19. Vgl. Ebd.
  20. Vgl. Philbin, Carrie Ann, CrashCourse: »Graphical User Interfaces: Crash Course Computer Science #26«, Stand: 30.8.2017, URL: https://www.youtube.com/watch?v=XIGSJshYb90, TC: 00:08:73–00:08:53, abgerufen am 12.1.2018.
  21. Vgl. Ebd., TC: 00:10:45–00:11:32.
  22. Vgl. Cringely, Robert X: »Triumph of the Nerds«, Dokumentation, 150 Minuten, Vereinigte Staaten 1996, TC: 02:09:09–02:09:42.
  23. Vgl. Ebd., TC: 02:09:48–02:09:42.
  24. Vgl. DiBlasi, Alfred, adiblasi: »Tech: Apple Lisa Demo (1984)«, Stand: 19.11.2006, URL: https://www.youtube.com/watch?v=a4BlmsN4q2I, TC: 00:06:18–00:06:32, abgerufen am 12.1.2018.
Abbildungen
  1. Titelbild: Light, Alan: »Apple Convention, Boston, Spring 1983. An original Apple Lisa at work.«, Stand: Frühling 1983, via Wikimedia Commons, abgerufen am 28.1.2018, Lizenz: CC BY 2.0.

»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.

Die Anfänge der grafischen Benutzeroberfläche

Während meinen Nachforschungen bezüglich der grafischen Veränderungen im Web, gelange ich unweigerlich an den Ursprung der meisten heutigen GUIs. Obwohl das GUI grundsätzlich vom Webdesign zu unterscheiden ist, ist es für mich zum einen wichtig, die Ursprünge dessen zu erkunden, was uns heutzutage die Gestaltung im Web überhaupt ermöglicht. Zum anderen ist für mich der damalige Umgang mit gestalterischen Elementen spannend, welcher noch mehr von der Technologie bestimmt wurde als heute.

Während meinen Nachforschungen bezüglich der grafischen Veränderungen im Web, gelange ich unweigerlich an den Ursprung der meisten heutigen GUIs. Obwohl das GUI grundsätzlich vom Webdesign zu unterscheiden ist, ist es für mich zum einen wichtig, die Ursprünge dessen zu erkunden, was uns heutzutage die Gestaltung im Web überhaupt ermöglicht. Zum anderen ist für mich der damalige Umgang mit gestalterischen Elementen spannend, welcher noch mehr von der Technologie bestimmt wurde als heute.

Die Entwicklung des Konzepts der GUIs wird üblicherweise dem Forschungszentrum Xerox Palo Alto Research Center (Xerox PARC) zugeschrieben. Das ist zwar grundsätzlich richtig, jedoch kann diese Entwicklung nicht gänzlich isoliert betrachtet werden – ihr gingen jahrzehntelange Forschung voraus.

Sketchpad und Spacewar! als Inspiration für Doug Engelbart

Frühe interaktive, grafische Anwendungen wie Ivan Sutherlands »Sketchpad« (1962) oder das von Steve Russell am MIT entwickelte Spiel »Spacewar!« (1962) waren Teil dieser Evolution. Vor allem Sketchpad soll Doug Engelbart in seiner Arbeit inspiriert haben,1 welcher erst 1968 das oN-Line System (NLS) demonstrierte. Das NLS unterstütze dabei schon viele Eigenschaften moderner Computer wie beispielsweise Bitmap-Grafiken, Videokonferenzen, Textverarbeitung oder die kollaborative Bearbeitung von Dokumenten in Echtzeit. Des weiteren erinnert die Benutzung der von ihm erfundenen Maus sowie die Verwendung von Fenstern an heutige Verhältnisse.2

Sketchpad Ivan Sutherland
Der Erfinder Ivan Edward Sutherland bedient sein Programm Sketchpad, welches 1962 innerhalb seiner Dissertation entstanden ist. Sketchpad gilt als erstes Programm mit grafischer Benutzeroberfläche. Mithilfe eines Lichtgriffels, einem Vorläufer der Maus als Eingabegerät, konnte direkt auf dem Bildschirm gezeichnet werden.II
In der Zusammenfassung in einer seiner Schriften heißt es: »Es wurde verwendet, um elektrische, mechanische, wissenschaftliche, mathematische und animierte Zeichnungen zu zeichnen«3.
Spacewar! von Steve Russell
Steve Russells Erfindung »Spacewar!« auf dem PDP-1, welches als eines der ersten grafischen Computerspiele gilt und 1962 fertiggestellt wurde. Auch hier wird der Lichtgriffel als Eingabegerät genutzt.III

Xerox Alto mit dem WIMP Interface

Ein interessanter Verlauf ist der, dass – durch die Reduzierung staatlicher Finanzierungen – viele von Engelbarts Team zum neu gegründeten Xerox PARC wechselten. Dort wurde 1973 mit dem Xerox Alto der erste wirkliche Computer mit einer grafischen Benutzeroberfläche fertiggestellt. Das grafische Konzept orientierte sich dabei an bekannten Mustern, weshalb der 2D-Bildschirm als Oberfläche eines Schreibtisches dargestellt wurde. Innerhalb von einzelnen Rahmen wurden die Programme angezeigt, welche wir heute als Fenster bzw. auch im deutschen als windows kennen. Aus der realen Welt wurden weitere Hilfsmittel wie ein Kalkulator oder die Uhr übernommen, welche frei platzierbar waren. Diese Metapher wird auch »Schreibtisch-Metapher« genannt.4 Bis heute werden Metaphern dieser Art genutzt – noch immer verwenden wir einen sehr abstrahierten Schreibtisch mit Ordnern oder einem Papierkorb. Beides war in dieser Version jedoch noch nicht vorhanden.

Das Alto Team verwendete für seine Gestaltung Windows, Icons, Menüs sowie Zeiger (Pointer). Diese Art wird als WIMP Interface bezeichnet und ist bis heute weitestgehend in Verwendung. Zudem bot Alto wiederverwendbare, grafische Bausteine wie Buttons, Chechboxen oder Tabs an, aus denen GUI-Anwendungen entwickelt werden konnten. Auch sie waren an Objekte der realen Welt angelehnt.5

Grafische Benutzeroberfläche des Xerox Alto
Das Dynabook, entwickelt von Alan Kay, gilt als konzeptioneller Vorläufer des Xerox Alto. Die Grafik zeigt die grafische Benutzeroberfläche des Xerox Alto, welche – dem Bildschirm entsprechend – vertikal statt horizontal ist. Die Grafik zeigt, dass das GUI bereits aus einzelnen, sich überlappenden Fenstern sowie Symbolen bestand. Alan Kay und sein Team entwickelten als Softwareumgebung die objekt-orientierte Programmiersprache SmallTalk. Um mit Dokumenten, Anwendungen und Co. interagieren zu können, konnten Symbole, Dialogfelder und Dropdown-Menüs angeklickt werden.IV

Xerox Star – Cut, Copy, Paste

Vom Xerox Alto gab es nur 2000 Exemplare, mit denen intern oder an Universitäts-Laboren gearbeitet wurde. Sie wurden nie kommerziell verkauft und 1981 kam die Folgeversion Xerox Star mit verbesserter Hard- und Software auf den Markt. Bei dieser Version wurde die Schreibtisch-Metapher weiter ausgereizt, so dass Dateien wie Papier aussahen und in Ordnern oder virtuellen Aktenschränken verstaut werden konnten.6 Auch weitere Funktionen, die wir heute verwenden, wurden mit dem Xerox Star eingeführt. Es sollte die Möglichkeit bestehen, Veränderungen unsichtbar zu machen, was mit Cut, Copy und Paste gelang. Die Idee dahinter war zudem, dass ausgedruckte Dokumente ein perfektes Abbild realer Versionen sein sollten. Das wurde »What-You-See-Is-What-You-Get« (WYSIWYG) genannt7 und ist bis heute ein weit verbreiteter Terminus.

Grafische Benutzeroberfläche des Xerox Star
Grafische Benutzeroberfläche des Xerox StarV

Im folgenden Verlauf möchte ich mich zwar weiterhin mit der Entwicklung grafischer Benutzeroberflächen beschäftigen und etwas detaillierter auf die Interfaces selbst eingehen. Insgesamt wird die Beobachtung aber eher oberflächlich bleiben, da mein Fokus sehr klar auf der Evolution im Web selbst liegt.

Quellen
  1. Vgl. Philbin, Carrie Ann, CrashCourse: »Graphical User Interfaces: Crash Course Computer Science #26«, Stand: 30.8.2017, URL: https://www.youtube.com/watch?v=XIGSJshYb90, TC: 00:01:58–00:02:36, abgerufen am 12.1.2018.
  2. Vgl. Ebd., TC: 00:02:36–00:02:53.
  3. Sutherland, Ivan Edward: »Sketchpad: A man-machine graphical communication system«, Stand: September 2003, URL: http://www.cl.cam.ac.uk/techreports/UCAM-CL-TR-574.html, abgerufen am 12.1.2018.
  4. Vgl. Philbin, Carrie Ann, CrashCourse: »Graphical User Interfaces: Crash Course Computer Science #26«, Stand: 30.8.2017, URL: https://www.youtube.com/watch?v=XIGSJshYb90, TC: 00:03:03–00:04:36, abgerufen am 12.1.2018.
  5. Vgl. Ebd.
  6. Vgl. Ebd., TC: 00:06:30–00:07:00.
  7. Vgl. Ebd., TC: 00:07:05–00:07:48.
Abbildungen
  1. Titelbild: Hicks, Michael: »Xerox PARC Alto with mouse and chorded keyset.«, Stand: 3.11.2013, via Wikimedia Commons, abgerufen am 13.1.2018, Lizenz: CC BY 2.0.
  2. Von Kerry Rodden gescanntes Originalfoto von Ivan Sutherland: »Sketchpad Dissertation: Ivan Sutherland operating the Sketchpad system.«, Stand: 1.1.1963, via Wikimedia Commons, abgerufen am 13.1.2018, Lizenz: CC BY-SA 3.0.
  3. Ito, Joi: »Spacewar! auf einer PDP-1 des Computer History Museums.«, Stand: 12.5.2007, via Wikimedia Commons, abgerufen am 13.1.2018, Lizenz: CC BY 2.0.
  4. parc – A Xerox Company: »Smalltalk GUI«, URL: https://www.parc.com/newsroom/media-library.html, abgerufen am 13.1.2018.
  5. Baecker, Ronald M.; Buxton, William; Greenberg, Saul; Grudin, Jonathan: »Reading in Human-computer Interaction: Toward the Year 2000«, Burlington (MA) 1995, S. 57.

Erste Sammlung von UI-Elementen

Wie in meinem Beitrag »evolution of a medium« vorweggenommen, habe ich es mir zur Aufgabe gemacht, UI-Elmenete zu sammeln und zusammenzuführen. Das Ziel ist es, Veränderungen der letzten Jahrzehnte visuell herauszuarbeiten, um die Entwicklungen deutlich zu machen. Ich verspreche mir davon zudem, diese Evolution in einen Gesamtkontext einordnen zu können, um sie noch besser verstehen zu können.

Wie in meinem Beitrag »evolution of a medium« vorweggenommen, habe ich es mir zur Aufgabe gemacht, UI-Elmenete zu sammeln und zusammenzuführen. Das Ziel ist es, Veränderungen der letzten Jahrzehnte visuell herauszuarbeiten, um die Entwicklungen deutlich zu machen. Ich verspreche mir davon zudem, diese Evolution in einen Gesamtkontext einordnen zu können, um sie noch besser verstehen zu können.

Bis dato habe ich Buttons gesammelt. Die Auswahl der Webseiten folgte dabei Kriterien, welche ich in »Evolution der Webästhetik« grob formuliert habe. Obwohl ich die möglichen Webseiten noch nicht final eingegrenzt habe, habe ich erste Buttons von amazon, eBay, Google und yahoo! gesammelt. Der Fokus lag dabei zunächst auf dem primären Button, der jeweils für den Kern der Plattform – nämlich die Suchfunktion –, eingesetzt wurde.
Weitere vorstellbare Quellen sind: Apple, BILD, Bing, Chip, Facebook, Firefox, Focus, GMX, Microsoft, MSN, New York Times, PayPal, Spiegel, T-Online, Twitter, web.de, Wikipedia, youTube. Die Selektion beruht dabei zum Teil auf den Top 100 Webseiten in Deutschland.

Erste Buttons

Die nachfolgende Übersicht zeigt eine erste Sammlung von Buttons der Webseiten von Amazon, Google, yahoo! und web.de. Ich habe mich dabei auf den primären Button, in diesem Fall immer die Suchfunktion betreffend, fokussiert.

UI-Elemente Buttons Grid

evolution of a medium

Mein Master-Projekt wird nun immer konkreter. Nach meiner bisherigen Recherche zur Entwicklung des World Wide Web, präzisiert sich meine Vorstellung, welche theoretische Auseinandersetzung und welche praktische Umsetzung Teil meiner Arbeit werden können.

Mein Master-Projekt wird nun immer konkreter. Nach meiner bisherigen Recherche zur Entwicklung des World Wide Web, präzisiert sich meine Vorstellung, welche theoretische Auseinandersetzung und welche praktische Umsetzung Teil meiner Arbeit werden können.

Die erste Fragestellung innerhalb meines Master-Studiums beinhaltet bereits erste Gedanken meines jetzigen Ansatzes. Nichtsdestotrotz habe ich sehr breit recherchiert, da mir auf meinem Weg unzählige spannende Themen begegnet sind, die mich stets in eine neue Richtung gelenkt haben. Ich hatte viele Ideen von zu plump bis zu komplex und habe enorm viel Kraft in die theoretische Arbeit gesteckt. Ich habe viel gelesen und recherchiert, viel geschrieben und verworfen.

Während meiner Master-Zeit hatte ich ab und an das Gefühl den Wagen fälschlicherweise von hinten aufzurollen. Habe mich aber aus Leidenschaft nicht davon abbringen lassen.
Ich habe mir kein Thema XY ausgesucht für das ich nun ein passendes Medium für die praktische Umsetzung suche, sondern ich beschäftige mich von Anfang an mit dem Medium selbst. So liebe ich beispielsweise Netzkunst, weil sie oft eine besondere Art hat mit dem Medium Web umzugehen und eine außergewöhnliche, visuelle Sprache spricht. Ich interessiere mich für die Auflösung virtueller und nicht-virtueller Grenzen, die Veränderung der Gesellschaft durch die virtuelle Welt und für die Theorien von beispielsweise Flusser und McLuhan. Ich bin überzeugt davon, dass sich Schnittstellen zunehmend auflösen und eine neue Art der Kommunikation entsteht. Ich bin begeistert von neuen Technologien und mich bewegen Projekte, die Theorie und Praxis lückenlos verschmelzen.

Letztendlich merke ich jedoch, dass meine Gedanken häufig um ähnliche Themen kreisen. Dazu gehören wiederkehrend die Anfänge und die Entwicklung des World Wide Web, die mich sowohl visuell, technologisch als auch kulturell interessieren. Das Medium selbst wurde lange wie eines behandelt, das ausschließlich die nicht-virtuelle Welt in die virtuelle überträgt. Webseiten waren »Schaufenster« des realen Lebens, Buttons waren zum Teil rote Knöpfe mit Schrift und Baustellenschilder zeigten, dass die Webseite noch in Bearbeitung ist. Das Verständnis für das Medium wächst zunehmend und wir wissen zwischenzeitlich, dass Webseiten so gut wie immer »under construction« sind. Zum einen kann aus meiner Sicht erst eine spezifische, visuelle Sprache für ein Medium entwickelt werden, sobald das Medium verstanden wird – sprich, dass das Web kein Buch ist. Auf der anderen Seite frage ich mich, ob nicht gerade dieser spielerische Umgang mit einem unbekannten Medium – wie er in den 90er Jahren stattfand – die unantastbarste und »originalste« Sprache von allen spricht.
In meiner bisherige Recherche zeigt sich, dass sich die visuelle Sprache immer weiter von der materiellen Welt entfernt und sich das Web zunehmend zu einem eigenen Medium entwickelt. Neben visueller und kultureller Veränderungen, halte ich hierfür auch die technologischen Entwicklungen für sehr wichtig. So nutzte man teils solange wie nötig die default styles für z.B. Buttons und ersetzt sie nach und nach mit Grafiken und letztendlich Code.

Der bisher stärkste Ansatz ist meiner Ansicht nach eine Ausstellung anlässlich des 25-jährigen Jubiläums des freien Webs. Dabei kann ich mir zum einen eine interaktive Webausstellung vorstellen, aber auch eine nicht-virtuelle Exhibition mit gebauten Räumen voller Sternenhimmeltapeten und MIDI-Sound. Die Ausstellung könnte die Entwicklung des Web zeigen. Dabei wären aus meiner Sicht die visuellen Veränderungen im Vordergrund.
Ich möchte zum einen schon zum Teil gesammelte und katalogisierte UI-Elemente zusammenführen, um grafische Veränderungen deutlich zu zeigen. Die Elemente stammen dabei von verschiedenen Unternehmen, die auch in der Wayback Machine des Internet Archive zu finden sind: https://archive.org/web/. Ein erster Ansatz der Auswahlkriterien ist in meinem Beitrag »Evolution der Webästhetik« zu finden. Dabei steht noch offen, ob diese – dem Plan nach mehrere tausend – Elemente im Zentrum stehen oder einfach nur ein Pattern für die Ausstellung darstellen könnten. Zudem soll eine inhaltlich-kulturelle Komponente hinzukommen, die ich noch erarbeiten muss und eine poetische Ebene enthalten kann. Eine weitere Komponente könnte die Frage nach dem Danach sein, da ich mir unter anderem die Frage stelle, ob grafische Benutzeroberflächen durch neue Technologien wie z.B. Voice Interfaces ersetzt werden können.

An dieser Stelle wird mein Titel »Digitale Primaten« wieder mit der anfänglichen Bedeutung belegt. Nämlich, dass Menschen der Technologie noch immer hinterherhinken und wohl auch nicht mehr aufholen werden. Mein gewählter Arbeitstitel ist »digital primates – evolution of a medium« in englischer oder deutscher Form.

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.

Klick Klick – Hallo Welt!

Das WordPress-Theme »The Ark« wird als »Best Rated Theme of All Time« angepriesen – aus meiner Sicht nicht umsonst. Mich hat in den letzten Jahren kein Theme so sehr überzeugt, weshalb ich meine Erfahrung teilen möchte.

Heute möchte ich dem WordPress Theme »The Ark« einen Beitrag widmen. Warum? Jahrelang habe ich mal mit guten, mal mit schlechten Themes gearbeitet und bisher hat mich keins so sehr überzeugt. Ich denke, dass es nicht umsonst als »Best Rated Theme of All Time«1 angepriesen wird. Der Beitrag basiert dabei auf persönlichen Erfahrungswerten und soll kein Tutorial darstellen.

Zu Beginn sei gesagt: Das Frustrationslevel liegt erstmal sehr hoch. Der Aufbau ist – bis hierhin – sehr unüblich und man weiß nicht, wo man was ändern und einstellen muss, um zum gewünschten Ergebnis zu kommen. Zusätzlich hatte ich bei der ersten Website, die ich mit diesem Theme umgesetzt habe (literaturarchiv1968.de), große Probleme damit, dass die (tatsächlich nur gefühlte) Standard-Antwort des Supports die war, dass custom code benötigt wird. Das Problem war hier nicht, dass ich es nicht per Code lösen hätte können, sondern dass ich mich ständig gefragt hatte, wofür ich ein so umfangreiches Theme mit scheinbar unzähligen Elementen benötige, wenn ich ohnehin die Hälfte selbst coden muss. Zum einen weiß ich nun, dass die Seite nach sehr vielen individuellen Lösungen verlangt hat. Zum anderen hat sich seitdem sehr viel durch Updates getan. Das Entwicklerteam ist dabei ein besonderes Plus. Die Antwortzeiten sind unheimlich kurz, das Team unheimlich hilfsbereit und die Entwickler stehen im ständigen Dialog mit der Community, um das Theme stetig zu verbessern. Das bedeutet natürlich gleichermaßen, dass es an einigen Stellen noch Verbesserungsbedarf hat.

Benutzeroberfläche im Bereich Sitemap
Benutzeroberfläche im Bereich Sitemap

Der Aufbau

Grundsätzlich baut das mobile-first-Theme auf Bootstrap auf, so dass zumindest die Logik sehr einfach zu verstehen ist. Des Weiteren arbeitet es mit dem »Fresh Builder« – einem sehr eingängigen page builder, mit dem man die Webseite via Klicks aufbaut. Dabei kann man nicht nur sehr schöne, sondern auch sehr gut funktionierende Websites in kürzester Zeit erstellen. Die Möglichkeiten sind dabei wohl unbegrenzt, da man sich die sections entweder selbst aus unzähligen Elementen zusammenstellt oder vorgefertigte section blocks als Vorlage verwendet. Jedes einzelne Element hat dabei viele, zusätzliche Einstellungsmöglichkeiten. Durch die global styles können ähnlich wie bei SketchApp Stile angelegt werden, die per Klick eingefügt werden. Zum Verständnis: Man kann sich damit beispielsweise eine große Headline anlegen, der wiederum durch Klicks einzelne, selbst zu erstellende Komponenten wie font-size, line-height, etc. zugeordnet werden. Dieses gesamte Headline-Element ordnet man nun den Überschriften zu, die so aussehen sollen. Zudem können zum einen Abschnitte wie Header, Footer oder die Titlebar mit dem Fresh Builder aufgebaut werden. Zum anderen Seiten, die man via Sitemap gestaltet. In der Sitemap können die einzelnen Seitentypen (Blog Archive, Blog Single, Page, …) global angelegt werden, so dass sie nicht wie in den meisten Themes über die PHP-Dateien geändert werden. Selbst die Übersetzungen durch das PlugIn WPML, eigene Felder durch das PlugIn ACF oder die Verwendung der sections für custom post types funktionieren hervorragend.

Auswahlmenü der Elemente
Auswahlmenü der Elemente

Das Grundprinzip Einfachheit

Vor allem die Funktionalität und Gestaltungsfreiheit spricht aus meiner Sicht für The Ark. Bisher hatte ich die Erfahrung, dass Themes häufig sehr eingeschränkt sind. So sehen sie auf den ersten Blick gut aus und spätestens beim mobilen Design müsste man die ganze Seite – aus visueller Sicht – neu schreiben. Ein weiteres Problem hatte ich häufig durch die Begrenztheit der Elemente. Zwar kann man bei der Entwicklung sehr viel selbst einbauen und z.B. für die einfache Bedienung durch den Kunden eigene Felder erstellen. Jedoch bin ich der Meinung, dass das Grundprinzip von WordPress Einfachheit bedeutet und die wird bei The Ark von Haus aus mitgeliefert.

Durch weitere Projekte wird mir das Theme immer zugänglicher und es ist erstaunlich, wie effizient man damit arbeiten kann. Alles in allem, trotz einiger Mankos, ein absolut empfehlenswertes Theme. Also ab, online mit euch: Klick Klick – Hallo Welt!

Quellen

  1. Theme-Website: http://arktheme.com/, abgerufen am 3.5.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.

»Moments of Happiness« – Einige Erkenntnisse

»Moments of Happiness« ist ein Nebenprojekt der »EPIC Agency«. Dabei werden sechs kleine Situationen gezaubert, die dem Nutzer Spaß machen und Momente des Glücks hervorbringen. Das Projekt führt mich zusätzlich zu weiteren Erkentnissen bezüglich der Weiterentwicklung des Mediums.

»Moments of Happiness« ist ein Nebenprojekt der »EPIC Agency«. Dabei werden sechs kleine Situationen gezaubert, die dem Nutzer Spaß machen und Momente des Glücks hervorbringen. Man könnte es zum Teil »Mini-Spielchen« nennen, da beispielsweise gefordert wird so schnell wie möglich zu klicken oder mit einer Katze mittels eines Wollballs zu spielen.

Ich nehme das Projekt mit in meiner Dokumentation auf, da es mich inspiriert mit Technologie und Grafik zu experimentieren. Zudem finde ich es wichtig zu sehen, dass inhaltliche Einfachheit – zumindest an mancher Stelle – auch hilfreich sein kann, um sich nicht zu sehr zu verstricken.

Die Umsetzung ist grafisch ansprechend und mir fällt zunehmend auf, wie sehr sich der – wenn man es so nennen mag – Webtrend mit großen Farbflächen und kleinen grafischen Elementen zu arbeiten durchsetzt. Minimalistische Gestaltung ist generell natürlich nichts Neues, aber immer häufiger treffe ich auf Projekte, wie z. B. auch »In Pieces«, die sich einem überschaubaren Thema widmen und es grafisch und technisch hervorragend umsetzen.

Moments of Happiness | EPIC Agency
05 – Click to jump, avoid the hedgehogs, grap the carrots.II

Die Weiterentwicklung des Webs

Neben der Tatsache, dass die Gestaltungsqualität im World Wide Web generell zunimmt, vermute ich zum einen, dass die immer einfachere Zugänglichkeit des Mediums ein Grund dafür sein könnte. Zum anderen denke ich, dass sich das allgemeine Verständnis des Mediums stark ändert. Während sich in den Anfängen des World Wide Web die analoge Denkweise sehr in der Gestaltung niedergeschlagen hat, versteht man es zunehmend, wie man den Gestaltungsraum mediumspezifisch nutzen kann. Zudem spekuliere ich, dass der künstlerisch freie Raum nach der Kommerzialisierung des Webs stark in den Hintergrund gedrängt wurde und sich nun wieder Platz schafft. Ähnlich wie es im Analogen gleichermaßen Platz für Imagebroschüren von Unternehmen und Bildbände von Illustratoren gibt, bietet auch der virtuelle Raum unbegrenzte Möglichkeiten für das parallele Bestehen. Meine letzte Vermutung ist die, dass sich Technik und Grafik immer mehr annähern. Auf Entwicklerseite entsteht ein Verständnis für die grafische Arbeit, sowie sich auf der Gestaltungsseite zunehmend ein Verständnis und Interesse für Technologie entwickelt.

Abbildungen
  1. Titelbild: Eigener Screenshot; EPIC Agency, »Moments of Happines«, URL: https://moments.epic.net/, abgerufen am 2.7.2017.
  2. Ebd.

Die Schaffung veränderbarer Räume im Web

Im Anschluss an meinen Text »Von der No-Layout-Ära zur wiedergewonnenen Fluidität des Webs« möchte ich mich kurz und knapp mit einem Artikel von Ethan Marcotte aus dem Jahr 2010 beschäftigen. Marcotte, Begründer des Terminus »Responsive Web Design«, beschreibt darin seinen Ansatz, Webseiten unabhängiger von ausgewählten Endgeräten zu entwickeln.

Im Anschluss an meinen Text »Von der No-Layout-Ära zur wiedergewonnenen Fluidität des Webs« möchte ich mich kurz und knapp mit einem Artikel von Ethan Marcotte aus dem Jahr 2010 beschäftigen. Marcotte, Begründer des Terminus »Responsive Web Design«, beschreibt darin seinen Ansatz, Webseiten unabhängiger von ausgewählten Endgeräten zu entwickeln. Er verfolgt dabei den Vorschlag mit Media Queries zu arbeiten, auf welche ich an dieser Stelle nicht weiter eingehen möchte. Sie sind zwischenzeitlich zum Standard-Werkzeug responsiver Gestaltung geworden.

Viel reizvoller finde ich seine Verknüpfung zwischen »responsive architecture« und der Gestaltung im Web. Dabei geht es grundsätzlich um die Frage, »wie physische Räume auf die Anwesenheit von Passanten reagieren können«1. Mit Bezug auf das Buch Interactive Architecture von Michael Fox und Miles Kemp, kristallisiert er den feinen Unterschied heraus: Es geht nicht darum unveränderliche Räume zu schaffen, sondern darum, dass sich die Nutzer und die Struktur gegenseitig beeinflussen können.2 Das ist vor allen Dingen wichtig, da das Web ein vergängliches Medium ist. Innerhalb weniger Jahre ändern sich Fensterbreiten, Bildschirmauflösungen, Benutzereinstellungen oder installierte Schriftarten.3 Viel mehr spricht er sich dagegen aus, das Design auf immer mehr unterschiedliche Endgeräte zuschneiden zu wollen. Er ist überzeugt davon, dass wir als Webdesigner »ein optimales Seherlebnis entwerfen und standardbasierte Technologien in unser Design einbetten können, um sie nicht nur flexibler zu machen, sondern auch an die Medien anzupassen, die sie rendern«4. Nur so kann man effektiv mit der Tatsache arbeiten, dass sich die Landschaft an angebotener Betrachtungsmöglichkeiten enorm schnell ändert.5

Wichtig ist Marcotte dabei nicht nur das visuelle Ergebnis, sondern auch die Möglichkeit die Benutzerfreundlichkeit verbessern zu können. So kann beispielsweise Fitts’ Gesetz über Touch-Geräte besser umgesetzt werden.6

Die drei technischen Zutaten für RWD

Als primäre Zutaten zur Umsetzung von responsiven Webdesigns sieht Marcotte flüssige Raster, flexible Bilder und Medienabfragen. Zudem ist eine andere Denkweise in Bezug auf das Medium erforderlich,7 das sich letztendlich sehr stark vom Printdesign unterscheidet und somit sehr viele neue Herausforderungen an den Gestalter herangetragen hat.

Abschließend ist der Ansatz der Media Queries aus heutiger Sicht eine Selbstverständlichkeit. Im Jahr 2010 war die Einführung des »Responsive Web Design« jedoch eine massive Neuerung. Schon zuvor gab es z. B. verschiedene Bildschirmgrößen oder -auflösungen und schon durch das iPhone, das 2007 auf den Markt kam, ist das Bedürfnis gewachsen, flexibler reagieren zu können. Langfristig macht es bei der Masse an Geräten aber natürlich keinen Sinn für jedes separate Versionen zu gestalten. In der Übergangszeit und auch bis heute, sieht man zudem Webseiten, welche komplett abgekoppelt für mobile Endgeräte entwickelt sind und sogar mit einer eigenen Subdomain angesprochen werden. In manchen Fällen macht das sicher nach wie vor Sinn, doch insgesamt sollte im Vordergrund stehen, sich anpassende Seiten zu gestalten, die auch die nächsten Endgeräte überstehen.
In Bezug auf mein Thema finde ich es außerdem sehr spannend, wie sich erneut Technologie, Design und das Bedürfnis der Menschen gegenseitig beeinflussen und Schritt für Schritt in ihrer Evolution voranbringen.

Quellen
  1. Marcotte, Ethan: »Responsive Web Design«, Stand: 25.5.2010, URL: https://alistapart.com/article/responsive-web-design, Absatz 8, abgerufen am 26.6.2017.
  2. Vgl. Ebd., Absatz 9.
  3. Vgl. Ebd., Absatz 2.
  4. Ebd., Absatz 10.
  5. Vgl. Ebd., Absatz 3.
  6. Vgl. Ebd., Absatz 27.
  7. Vgl. Ebd., Absatz 31.

Von der No-Layout-Ära zur wiedergewonnnen Fluidität des Webs

Vor kurzem bin ich auf den Dokumentarfilm »What Comes Next Is the Future« von Matt Griffin gestoßen. Der Film setzt sich mit der Geschichte des Webs auseinander und wird von den Menschen, die bedeutende Figuren des Webs sind, erzählt. Darunter unter anderem Tim Berners-Lee, Eric Meyer, Ethan Marcotte, Brandon Eich oder John Resig. Mit den aus Interviews gewonnen Antworten, schustert Griffin einen Film, der kapitelweise auf unterschiedliche Themen eingeht.

Auf lynda.com findet man größtenteils Tutorials aus Bereichen wie z. B. Design, Entwicklung, Fotografie oder Web. Vor kurzem bin ich auf den Dokumentarfilm »What Comes Next Is the Future« von Matt Griffin gestoßen. Der Film setzt sich mit der Geschichte des Webs auseinander und wird von den Menschen, die bedeutende Figuren des Webs sind, erzählt. Darunter unter anderem Tim Berners-Lee, Eric Meyer, Ethan Marcotte, Brandon Eich oder John Resig. Mit den aus Interviews gewonnen Antworten, schustert Griffin einen Film, der kapitelweise auf unterschiedliche Themen eingeht.

Bei meiner Recherche stoße ich auf unzählige Timelines über die Entstehung des Webs, auf originale Dokumente oder kleine Zusammenfassungen. Zudem gibt es natürlich tausende Treffer inhaltlicher Natur, die sich auf Teile des technologischen oder visuellen Aspekts konzentrieren. Insgesamt stellt mich meine Suche jedoch noch nicht zufrieden, da es nur wenige ansprechende Auseinandersetzungen mit dem Web als Medium selbst gibt. Das macht den Film von Griffin so interessant für mich. Zum einen, weil die Entwicklung von Menschen erzählt wird, die sie miterlebt und beeinflusst haben. Zum anderen werden zum Teil genau die Aspekte angesprochen, für die ich mich interessiere.

Ein wichtiger Gesichtspunkt, der das Web fundamental ausmacht, wird dabei direkt zu Beginn angesprochen. Das Web wurde letztendlich als offener Informationsraum konzipiert, in dem es für Jeden möglich sein soll, etwas zu publizieren. Das ist für Dave Rupert, Co-Gründer von Paravel, die schönste Sache am Web: Man kann jederzeit Dinge veröffentlichen, die man selbst nützlich findet und Andere können daraus wiederum neues kreieren.1 Brad Frost, welcher Atomic Design entwickelt hatte, liebt den freien Fluss der Ideen, Informationen und Gedanken und betont, dass das vor dem Web unmöglich war.2 Dieser unaufhaltsame, geistige Fluss war auch für John Perry Barlow (Cyberspace als neue Heimat des Geistes ») eine essenzielle Eigenschaft des Webs. Ähnlich wie Barlow sieht Lyza Danger Gardner, Co-Autorin von »Head First Mobile Web«, eine offene Welt. Sie spricht davon, dass das Web keine Wände besitzt und die Kosten, um daran teilzuhaben, eher gering sind.3 Jeffrey Feldmann, unter anderem Autor von »Designing Web Standards«, sieht dagegen die technischen Hürden weiter sinken. Jeder kann zumindest Twitter und Facebook nutzen und hat so die Möglichkeit sich frei zu äußern. Zudem reicht es bei mehr Interesse für einen Tumblr-Blog oder sogar eine WordPress-Seite. Er findet die Tatsache, dass man responsive Webseiten machen kann, ohne überhaupt zu wissen, was die Wörter bedeuten, sehr bemerkenswert und gut.4 Diesen Aspekt finde ich extrem wichtig, da dadurch garantiert wird, dass jeder an dieser Welt teilnehmen kann. Bei solchen Aussagen muss natürlich immer von den vielen Menschen abgesehen werden, welche noch keinen Internetzugang besitzen oder in Ländern leben, wo viele Inhalte gesperrt sind. Die Erschließung des ganzen Planeten wird sicher einer Hauptaufgabe der nächsten Jahre sein.

Chris Wilson, welcher unter anderem an der Entwicklung des ersten Massen-Browsers Mosaic beteiligt war, erinnert sich dagegen noch gut an die Erschließung des Webs in der westlichen Welt. Er spricht davon, dass »wir keine normalen Menschen waren, welche das Web nutzten«5. Zwar gab es das Internet schon vor dem Web, doch es war sehr schwierig, an Informationen zu kommen. Daher bestätigt er Tim Berners-Lee in seiner Idee, dass es wirklich einfach sein muss, Zugang zu erhalten.6 Berners-Lee sieht den Schlüssel zum Web darin, dass es ein virtuelles System geben muss, dass über allen bereits vorhandenen Systemen liegt. Dieses große Hypertext-Buch wird via Internet zugänglich.7

No-Layout-Ära

Zu Beginn des Webs waren die Inhalte eher strukturierte Informationen, als wirklich gestaltete Seiten. Jen Simmons nannte das die No-Layout-Ära und die Darstellung der Inhalte war je nach Browser unterschiedlich.8 Eric Meyer erzählt, dass sich »Seiten gestalten« eher wie ein Witz anhörte.9 Der Designer David Siegel war es schließlich, welcher mit seinem Buch »Creating Killer Web Sites« einen Weg fand, Webseiten mit Tabellen zu gestalten.10 Dass das Buch, das 1996 erschien, im selben Jahr das meistverkaufte Buch bei Amazon war11 spricht Bände. Daran lässt sich erkennen, dass der Wunsch nach Gestaltungsmöglichkeiten riesig war. Ein erster Vorschlag für Cascading Style Sheets (CSS) wurde zwar schon 1993 gemacht, doch erst im Dezember 1996 wurde das CSS Level 1 veröffentlicht.12 Im ersten Moment funktionierten die Tabellen als erstes Grid, doch wie John Allsopp erklärt, gab es das Gefühl, dass es einen besseren Weg geben muss solche Anforderungen zu erfüllen.13 Christopher Schmitt sieht in der Nutzung von CSS eine Goldrausch-Ära. Jeder arbeitete daran durch CSS-Floats bessere Layouts erstellen zu können, so dass man die Gestaltung durch Tabellen endlich hinter sich lassen kann.14 Nichtsdestotrotz waren die Tabellen ein wichtiger Schritt auf dem Weg zur besseren Umsetzung. Eric Meyer sieht viele Dinge im CSS, welche darauf basieren, was Entwickler mit Tabellen-Layouts erstellt hatten.15

Flash als Prototype für CSS und JavaScript-Libraries

Viele Standards im Web basieren auf einer ähnlichen Herangehensweise, wie es mit der Übertragung von Tabellen auf CSS geschehen ist. Bedürfnisse werden experimentell mit vorhandenen Mitteln »irgendwie passend gemacht« bis aus ihnen langfristig neue Standards heranwachsen. Weitestgehend könnte man dabei von Prototypen sprechen, welche später in verbesserte, weniger komplexe Standards übertragen werden. Eine Aussage von Kelly Goto hat mich in Bezug auf Adobe Flash überrascht, selbst wenn sie absolut einleuchtend ist. Aus ihrer Sicht war die Arbeit mit Flash ein stückweit wie Prototyping. Flash gab vielen die Möglichkeit visuell für das Web zu denken. Als Werkzeug hat Flash den Prozess ermöglicht, dass kreative Personen Ideen ausdrücken konnten.16 Laut Aaron Gustafson gab Flash zudem die Möglichkeit mehr Kontrolle über die Gestaltung zu erhalten als mit CSS. Elemente konnten animiert und vereinnahmende Nutzererlebnisse geschaffen werden.17 Val Head sieht Flash auch als gute Chance herauszufinden, was das Web benötigt. Bei der Entwicklung einer neuen JavaScript-Library startete man somit zumindest nicht bei null.18
Eric Meyer sieht dagegen in Flash das komplette Gegenteil zum grundsätzlichen Aufbau des Webs. Der Ursprungsgedanke des Webs ist, dass die weite Verbreitung über der Konsistenz steht. Flash zu nutzen bedeutet jedoch, dass man alles oder nichts haben kann: Entweder man installiert Flash und hat ein konsistentes Nutzererlebnis oder man sieht im Gegenzug nichts.19

Letztendlich wurde die Ära Flash mit dem Erscheinen des iPhones 2007 eingeläutet. Das iPhone unterstützte kein Flash und Apple war überzeugt davon, dass alle Aufgaben mit HTML5 zu lösen sind. Das war ein entscheidender Einschnitt, da die Darstellung von Inhalten nun komplett zurück in die Hände der Browser bzw. des Codes gelegt wurde. Dieser Schritt vorwärts war gleichzeitig ein positiver Schritt rückwärts Richtung Web, das offen und zugänglich sein sollte.

Die Fluidität des Webs annehmen

Während das World Wide Web ursprünglich visuell sehr überschaubar war, wurde die Gestaltung zunehmend komplexer. Der Wunsch von Gestaltern mehr und mehr Einfluss auf die tatsächliche Darstellung zu nehmen wuchs und wirkte sich auch auf die Umsetzung aus. Tabellen und Frames wurden als Layout-Elemente verwendet, die Layouts selbst wurden immer statischer.

Ein entscheidender Beitrag von CSS ist der, dass Inhalt und Gestaltung getrennt werden. Dadurch kann der Fokus beim HTML-Dokument ausschließlich auf die inhaltliche Struktur gelegt werden. Mit CSS Zen Garden entstand im Mai 2003 ein Projekt, das das Ziel hatte zu zeigen, was alles einzig mit CSS möglich war. Das HTML-Dokument blieb dabei immer gleich und zugehöriges CSS konnte eingeschickt werden. Lyza Danger Gardner spricht von einem Art ersten universellen Gefühl dafür, was diese Trennung tatsächlich bedeuten kann.20 Kelly Goto bezeichnet das sogar als großen Moment, der alles im Web änderte und das Kreativitätslevel auf eine völlig neue Ebene anhob.21

Obwohl Tantek Çelik erklärt, dass CSS vorwärts-kompatibel für verschiedene Bildschirmgrößen angelegt war und Seiten somit auf verschiedenen Bildschirmen funktionierten,22 wurde diese Kompatibilität aus meiner Sicht durch fix angelegte Layouts zerstört. Nichts sollte dem Zufall überlassen werden und alles perfekt aussehen.
Mit dem Erscheinen des iPhones wurde das Web aus Kevin M. Hoffmans Sicht stark vermenschlicht. Es war immer dabei und man hatte nicht mehr das Gefühl online gehen zu müssen. Diesen Punkt empfand Tim Berners-Lee schon zu Beginn als sehr störend (Struktureller Aufbau des Webs und die Koexistenz von Mensch und Maschine »). Gleichzeitig wuchs das Bedürfnis nach mobiler Gestaltung deutlich und krempelte alles um. Während Jonathan Snook noch davon spricht, dass es ok war, dass man sich nur um zwei Auflösungen (1024 x 768 px und 320 x 240 px) kümmern musste,23 empfand es John Allsopp langfristig als eher unüberschaubare Aufgabe. Er fragt sich, wie weit es gehen soll und wann wir damit aufhören für jedes Endgerät einzelne Versionen zu entwickeln.24
Einen fundamentalen Fortschritt erreicht Ethan Marcotte, der 2010 den Begriff Responsive Design prägte. Ihm war die Wichtigkeit von flexiblen oder fluiden Layouts bewusst. Zudem musste der mediale Inhalt innerhalb dieser Layouts funktionieren. Mit den Mediaqueries aus CSS3 erreicht er, dass alles in allem responsiv funktioniert und ebnet damit den Weg für eine neue Dimension der Webgestaltung.
Auch Macrotte betont die Tatsache, dass das Web als flexibles Medium angelegt wurde und Designer und Entwickler das Extra an Komplexität in das Medium brachten. Er sieht es als wirklich flexibles, komplett anpassbares Medium, für das wir auch so gestalten sollten.25 Aus seiner Sicht, funktioniert die Industrie umso besser, je weniger wir versuchen die Darstellung zu kontrollieren.26 Jonathan Snook fügt hinzu, dass wir das Web umso einfacher verwalten können, wenn wir die Fluidität des Webs annehmen.27

Zugänglichkeit von Informationen

Die Entwicklung von Apps habe ich bisher – abgesehen vom Aufwand für die Bereitstellung auf verschiedenen Plattformen – als eher unproblematisch angesehen.
Durch Apps wird jedoch die Zugänglichkeit von Informationen stark eingeschränkt. Aus Sicht von Tim Berners-Lee treten die Leute damit in die Falle, dass sie denken eine App ist interaktiv und schneller. Doch bei Apps für beispielsweise Magazine ist es unheimlich wichtig, dass die Beiträge nicht ausschließlich in einem Programm landen, sondern offen im Web zugänglich sind. Ein essenzieller Bestandteil des Webs ist der, dass man Inhalte miteinander verknüpft. Einen Magazinbeitrag in einer App kann man dagegen ohne URL nicht einfach verlinken oder teilen.28
Çelik sieht zudem das Problem, dass jedes Programm evaluiert wird, bevor es – teilweise Tage später – zum Download bereitsteht. Man solle sich vorstellen, wenn man bei jeder Änderung einer Webseite tagelang warten muss, bis die Änderung akzeptiert wird. Den gleichen Standpunkt vertritt Lyza Danger Gardener. Nämlich das genau das das Web ausmacht: Wenn man etwas publizieren möchte, publiziert man das – ohne Autorisierung oder Bewertung des veröffentlichten Inhalts.29 Das würde nämlich wieder die Frage aufgreifen, wer dazu überhaupt legitimiert wäre, über die Veröffentlichung von Inhalten zu entscheiden (Verformung der Gesellschaft »).

Die Einzigartigkeit der Unbeschränktheit

Dass man etwas ohne »Pförtner« publizieren kann empfindet auch Alex Russell als sehr elementar. Ob es letztendlich jemanden interessiert oder nicht, ist erstmal irrelevant. Keine Möglichkeit zu haben sich zu äußern, wäre dagegen viel schlimmer. In dieser Unbeschränktheit sieht er die Einzigartigkeit des Webs. Er sieht das Web als das demokratischste System unserer Generation.30

Tim Berners-Lee spricht davon, dass es unser Web ist und fordert uns auf, dass wir alles dafür tun müssen, dass das Web weiterhin offen bleibt. Denn das ist nach wie vor keine Selbstverständlichkeit.31

Resümee

»What Comes Next Is the Future« von Matt Griffin ist aus meiner Sicht ein großartiger Zusammenschnitt der Web-Stimmen der letzten drei Jahrzehnte. Erst während des Films ist mir aufgefallen, was für ein Privileg es ist, dass noch so viele »originale« Stimmen zu hören sind. Das Web ist so selbstverständlich in unserem Alltag verankert, dass es nicht mehr wegzudenken ist. Gleichermaßen ist es noch so jung, dass Griffin den Begründer des Webs selbst, Tim Berners-Lee, interviewen konnte. Mit Brandon Eich als Entwickler von JavaScript oder Chris Wilson als Mitentwickler des Browsers Mosaic werden weitere Menschen gezeigt, welche das World Wide Web richtungsweisend beeinflusst haben. Das Schöne daran ist, dass der Film klar macht, dass wir nach wie vor in einer enormen Entwicklungsphase sind. Vor wenigen Jahren war der Ausdruck Responsive Webdesign noch nicht bekannt, erst seit kürzerer Zeit gibt es das CSS Grid, welches die Gestaltung weiter vereinfachen soll. Das Web entwickelt sich weiter und weiter und diese Evolution mitzuverfolgen ist großartig, da man nicht weiß, was der nächste Schritt sein wird. Wie viel wird sich noch einmal fundamental ändern? Wird es das Web in seiner Form weiter geben? In welche Richtung könnte es sich verändern?

Da ich die Auseinandersetzung mit der Vergangenheit sehr wichtig finde, um die jetzige Situation in ein Gesamtbild zu bringen und weitere Veränderungen abzusehen, möchte ich weiter in diese Richtung recherchieren. Unter anderem möchte ich mich mit dem Begriff »The next Web« auseinandersetzen. Zudem bin ich durch den Film auf Ethan Marcotte aufmerksam geworden dessen Aussagen mir in vielerlei Hinsicht zusagen. Auch mit ihm möchte ich mich weiter beschäftigen.

Nachtrag

Glücklicherweise habe ich das Video nachträglich öffentlich zugänglich bei Vimeo gefunden: What Comes Next Is The Future (2016) ».

Quellen
  1. Vgl. Griffin, Matt: »What Comes Next Is the Future«, »Why the Web«, USA 2016, URL: https://www.lynda.com/Web-Development-tutorials/What-Comes-Next-Future-Creating-Web/647684-2.html, TC: 00:01:03–00:01:24, abgerufen am 16.6.2017.
  2. Vgl. Ebd., TC: 00:01:57–00:02:12.
  3. Vgl. Ebd., TC: 00:01:44–00:01:57.
  4. Vgl. Ebd., TC: 00:02:12–00:02:42.
  5. Ebd., TC: 00:00:00–00:00:34, »The web arrives«.
  6. Vgl. Ebd.
  7. Vgl. Ebd., TC: 00:00:38–00:01:27.
  8. Vgl. Ebd., TC: 00:00:00–00:00:16, »Killer websites«.
  9. Vgl. Ebd., TC: 00:02:40–00:02:45.
  10. Vgl. Ebd., TC: 00:00:38–00:01:03.
  11. Vgl. Ebd., TC: 00:01:35–00:01:46.
  12. Vgl. »Cascading Style Sheets« in: »Wikipedia, the free encyclopedia«, Stand: 8.5.2017, URL: https://de.wikipedia.org/wiki/Cascading_Style_Sheets, abgerufen am 16. Juni 2017.
  13. Vgl. Griffin, Matt: »What Comes Next Is the Future«, »Cascading styles«, URL: https://www.lynda.com/Web-Development-tutorials/What-Comes-Next-Future-Creating-Web/647684-2.html, TC: 00:00:00–00:00:15, abgerufen am 16.6.2017.
  14. Vgl. Ebd., TC: 00:00:26–00:00:48.
  15. Vgl. Ebd., TC: 00:01:27–00:01:44.
  16. Vgl. Ebd., TC: 00:01:03–00:01:23, »There can be only one Flash«.
  17. Vgl. Ebd., TC: 00:00:10–00:00:21.
  18. Vgl. Ebd., TC: 00:03:15–00:03:48, »JavaScript spreads«.
  19. Vgl. Ebd., TC: 00:02:08–00:02:45, »There can be only one Flash«.
  20. Vgl. Ebd., TC: 00:02:43–00:02:53, »Web standards«.
  21. Vgl. Ebd., TC: 00:03:19–00:03:39.
  22. Vgl. Ebd., TC: 00:04:39–00:05:00.
  23. Vgl. Ebd., TC: 00:01:28–00:01:52, »Many devices, one approach«.
  24. Vgl. Ebd., TC: 00:02:40–00:02:57.
  25. Vgl. Ebd., TC: 00:00:00–00:00:33, »Flexible by default«.
  26. Vgl. Ebd., TC: 00:01:23–00:02:10.
  27. Vgl. Ebd., TC: 00:01:01–00:01:22.
  28. Vgl. Ebd., TC: 00:00:53–00:01:08 und TC: 00:02:45–00:03:20, »Connecting and distributing«.
  29. Vgl. Ebd., TC: 00:04:35–00:05:02.
  30. Vgl. Ebd., TC: 00:02:44–00:03:23, »The next web«.
  31. Vgl. Ebd., TC: 00:00:02–00:00:13, »Growing standards«.

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.

Die Master-Arbeit: Fokussierung

Zu Beginn meines Master-Studiums habe ich mich unter anderem mit der Frage auseinandergesetzt, inwiefern sich das Web auf gestalterischer und kultureller Ebene verändert hat. Nachdem ich nun lange Zeit breit recherchiert und mich auch mit völlig anderen Bereichen auseinandergesetzt habe, möchte ich mich nun wieder fokussieren und mein Thema eingrenzen.

Zu Beginn meines Master-Studiums habe ich mich unter anderem mit der Frage auseinandergesetzt, inwiefern sich das Web auf gestalterischer und kultureller Ebene verändert hat. Nachdem ich nun lange Zeit breit recherchiert und mich auch mit völlig anderen Bereichen auseinandergesetzt habe, möchte ich mich nun wieder fokussieren und mein Thema eingrenzen.

Vor kurzem habe ich begonnen mich inhaltlich und grafisch näher mit der Entwicklung des Webs von Beginn an auseinanderzusetzen (Evolution der Webästhetik »). Diesen Weg möchte ich weitergehen und einen visuellen Weg finden, meine Ergebnisse zu präsentieren. Dabei kann ich mir zum einen eine Ausstellung, zum anderen eine interaktive Ausstellung oder Weberzählung vorstellen.

Ein erster praktischer Ansatz ist die Sammlung diverser UI-Elemente, welche ich katalogisiert darstellen möchte. Ich stelle mir vor, dass so die Entwicklung visuell greifbarer wird. Zudem habe ich bereits erste Gestaltungsmuster erkannt, welche den kulturellen Weg sowie das veränderte, allgemeine Verständnis des Webs deutlich zeigen. Weitere Gedanken und Ideen – sowohl in Bezug auf Theorie als auch Praxis – möchte ich noch reifen lassen und für mich selbst prüfen.

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.

A is for Albert

»A is for Albert» von Studio Lovelock ist ein kleines Nebenprojekt, dass alle Buchstaben des Alphabets in Form einer Buchstabiertafel darstellt. Ich finde das Projekt grafisch ansprechend, was auch der Hauptgrund dafür ist, dass es in meiner Dokumentation auftaucht

»A is for Albert« von Studio Lovelock ist ein kleines Nebenprojekt, dass alle Buchstaben des Alphabets in Form einer Buchstabiertafel darstellt. Jeder Buchstabe erhält ein passendes Wort, meiner Recherche nach jedoch unabhängig von der tatsächlichen Buchstabiertafel der englischen Sprache. Die Buchstaben werden durch grafische Grundformen dargestellt und durch eine kurze Animation zusammengebaut.

A is for Albert | Studio Lovelock
Die Buchstaben K und LII

Ich finde das Projekt grafisch ansprechend, was auch der Hauptgrund dafür ist, dass es in meiner Dokumentation auftaucht. Inhaltlich ist es selbstverständlich überschaubar und liefert – außer möglicherweise für Kinder – keinen Mehrwert. Ich finde Nebenprojekte dieser Art nichtsdestotrotz gut und wichtig. Zum einen motivieren sie beispielsweise mit Technologie und Grafik zu experimentieren. Zum anderen machen mir selbst die inhaltlich einfachsten Webseiten Freude, insofern sie ansprechend umgesetzt sind.

Abbildungen
  1. Titelbild: Eigener Screenshot; Studio Lovelock: »A is for Albert«, URL: http://www.aisforalbert.com/, abgerufen am 28.2.2017.
  2. Eigener Screenshot; Studio Lovelock: »A is for Albert«, URL: http://www.aisforalbert.com/, abgerufen am 28.2.2017.

Interaktive Karten mit Leaflet

In »Interaktive Karten« habe ich mich mit Lösungen für Karten auseinandergesetzt, die innerhalb von WordPress umsetzbar sind. In der weiteren Recherche möchte ich mich mit drei weiteren PlugIns bzw. Libraries auseinandersetzen.

In »Interaktive Karten« habe ich mich mit Lösungen für Karten auseinandergesetzt, die innerhalb von WordPress umsetzbar sind. In meiner weiteren Recherche fiel das angekündigte PlugIn »wp google maps« direkt raus, da mir die Möglichkeiten doch sehr begrenzt schienen.

Leaflet Map für WordPress sowie die ursprüngliche Library leaflet.js sind weiterhin interessant für mich. Für Leaflet spricht vor allem die Tatsache, dass es eine weit verbreitete Library ist. Das halte ich mit Blick auf den Support oder auch die Arbeit in der Community für ein sehr wichtiges Kriterium.
Zufällig bin ich bereits auf PlugIns für Leaflet.js gestoßen, die Ansätze meiner Ideen beinhalten. So z. B. Leaftlet.Instagram und Leaflet.Photo. Ersteres platziert Fotos aus dem Instagram-Stream direkt in der Karte, zweiteres platziert sie mithilfe von Geotagging. Während Smartphone-Fotos normalerweise schon getaggt sind, trifft das auf Bilder, die mit einer analogen oder digitalen Kamera ohne GPS-Empfänger gemacht wurden, nicht zu. Hier möchte ich noch recherchieren, ob die Metadaten nachträglich geändert werden können, so dass sie als getaggt zählen.

Die Informationen zu leaflet.js sowie deren Funktionen sind sehr umfangreich. Ich habe noch immer keine endgültige Wahl getroffen, jedoch möchte ich mich zwischen leaflet.js und WP Google Map Pro entscheiden. Die abschließende Entscheidung richtet sich nicht danach, wie umfangreich die Tools sind, sondern nach der Frage inwieweit meine Kompetenz ausreicht. Leaflet setzt im Vergleich sehr viele Kenntnisse voraus. An diesem Punkt stehe ich aber regelmäßig vor der Frage, inwiefern ich mich ausschließlich auf das Design konzentrieren und wie weit ich mich im Bereich Webentwicklung weiterentwickeln möchte.

Evolution der Webästhetik

Nach wie vor interessiere ich mich sehr für die Webästhetik der 90er Jahre – den Anfängen des World Wide Webs. Daher möchte ich mich mit der Ästhetik der einzelnen Jahre auseinandersetzen. In Frage kommen dabei zum einen Webseiten, die heutzutage populär sind, sowie Plattformen, die früh gegründet wurden und dadurch immerhin teilweise verwertbares Material liefern. Bei meiner Arbeit ist mir dabei nicht nur die Ästhetik der 90er Jahre wichtig, sondern wie sie sich – z.B. technisch und kulturell bedingt – verändert hat.

Nach wie vor interessiere ich mich sehr für die Webästhetik der 90er Jahre – den Anfängen des World Wide Webs. Daher möchte ich mich mit der Ästhetik der einzelnen Jahre auseinandersetzen. In Frage kommen dabei zum einen Webseiten, die heutzutage populär sind, sowie Plattformen, die früh gegründet wurden und dadurch immerhin teilweise verwertbares Material liefern. So wurde Facebook beispielsweise erst im Jahr 2004 gegründet, ist jedoch aus der heutigen Welt nicht mehr wegzudenken.

Wie bei meiner begonnen »Web-Analyse« bildet die Grundlage die Wayback Machine von archive.org ». Durch erste Recherchen vermute ich, dass sich nicht allzuviel Material von vor 1995 finden lässt. Im gleichen Zuge möchte ich mich meine eigenen Webseiten von geocities ausfindig machen. Hier hoffe ich auf das Projekt »One Terabyte of Kilobyte Age«.

Bei meiner Arbeit ist mir dabei nicht nur die Ästhetik der 90er Jahre wichtig, sondern wie sie sich – z. B. technisch und kulturell bedingt – verändert hat. Als ersten Schritt möchte ich eine Sammlung sämtlicher UI-Elemente erstellen, um auf dieser Grundlage weiter zu forschen.

Interaktive Karten

Zur Zeit setze ich mich mit der Darstellung und Umsetzung interaktiver Karten auseinander, die man innerhalb von WordPress umsetzen kann. Dafür recherchiere ich PlugIns, die man möglicherweise verwenden kann.

Zurzeit setze ich mich mit der Darstellung und Umsetzung interaktiver Karten auseinander, die man innerhalb von WordPress umsetzen kann. Meine favorisierten PlugIns sind bisher WP Google Map Pro sowie Mapify.it.
In naher Zukunft möchte ich die Open-Source-Lösung Leaflet, wp google maps sowie Leaflet Map für WordPress genauer unter die Lupe nehmen.

Wichtig sind mir neben der individuellen Gestaltung der Karte, die Inhalte, die man bereits der Karte selbst entnehmen kann. Zum Beispiel möchte ich die Möglichkeit haben, ausgewählten Orten Bildergalerien hinzufügen zu können. Bisher habe ich keine eigenen Erfahrungen mit den PlugIns sammeln können, auf den ersten Blick scheint WP Google Map Pro aber sehr viel umfangreicher als Mapify zu sein. Zwar besitzt Mapify laut Beschreibung von Haus aus die Funktion Galerien anzuzeigen. Auf der anderen Seite kann man bei WP Google Map Pro unter anderem mit dem PlugIn ACF arbeiten, womit man theoretisch Galerien sowie unzählige andere Inhalte anzeigen lassen kann. Zudem werden Custom Post Types unterstützt, mit denen ich zur Unterscheidung der einzelnen Inhalte sehr gerne arbeite.

Die Darstellung kann bei letzterem durch snazzymaps beeinflusst werden, während man bei Mapify eigene Karten – ganz egal welcher Art – einbauen kann. Zwar besitzt WP Google Map Pro unzählige Funktionen von Routenführung über Street View bis zu den genannten Custom Post Types. Beim Testen der Demos fällt mir die Bedienung der Mapify-Karte jedoch deutlich einfacher, da sie sich mehr nach zeitgemäßen Web anfühlt. Man kann sicher auch die WP Google Map Pro mit mehr Dynamik ausstatten, jedoch möchte ich bei meiner aktuellen Recherche ausschließlich die Möglichkeiten in Betracht ziehen, die von Haus aus gegeben und in der Demo zu sehen sind.

Grundsätzlich gefällt mir das PlugIn WP Google Map Pro mit Blick auf die Funktionen deutlich besser. Einzig die Bedienbarkeit missfällt mir, so dass ich hier noch kein eindeutiges Ergebnis für mich gefunden habe. Diese Punkte werde ich im Vergleich mit den anderen oben genannten Lösungen besonders beachten und letztendlich werden mir wohl – trotz kostenpflichtiger PlugIns – nur ein Test und die eigene Erfahrung, die ich damit sammeln werde, weiterhelfen.

Abbildungen
  1. Titelbild: Eigener Screenshot; WP Google Map Pro: »Display Maps Using ACF (Advanced Custom Fields)«, URL: https://www.wpmapspro.com/example/maps-with-acf/, abgerufen am 2.1.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.

Präsentation IV

In meiner Präsentation stelle ich nicht nur das 2. Semester vor, sondern gebe auch einen oberflächlichen Überblick des 1. Semesters. In diesem Beitrag verweise ich auf die einzelnen Themen und Projekte.

In meiner Präsentation stelle ich nicht nur das 2. Semester vor, sondern gebe auch einen oberflächlichen Überblick des 1. Semesters. In diesem Beitrag verweise ich auf die einzelnen Themen und Projekte. Bei Bezugnahme auf Autoren mache ich hier keine Quellenangaben. Die Quellen sind im jeweiligen Beitrag angegeben.

Analyse grafischer Veränderungen

Im 1. Semester hatte ich im Großen und Ganzen zwei Schwerpunkte. Zum einen die Analyse der grafischen Veränderungen von Webseiten seit den 90er Jahren. Basierend auf Screenshots habe ich dabei die verändernden Text-Bild-Verhältnisse, sowie Interaktionen untersucht.
Das ist dahingehend sehr spannend, dass sich das Web und die Gestaltung durch neue technologische Möglichkeiten verändert haben, aber auch durch die Gesellschaft bzw. durch deren Nutzung und Ansprüchen stark beeinflusst wurden.
Web-Analyse: google.de seit 2001 »

Veränderte Internetnutzung

Mit der Nutzung des Internets beschäftigen sich auch die ARD-ZDF-Onlinestudien, mit denen ich mich auseinandergesetzt habe. Die Umfragen gibt es seit ca. 15 Jahren.
Nutzung von Bewegtbild (ARD/ZDF-Onlinestudie) »
Die Nutzung des Internets unterwegs (ARD/ZDF-Onlinestudie) »

Die Studien sind wiederum wichtig für meinen 2. Schwerpunkt, in dem es um Erzählformen geht bzw. um die Fragestellungen, welche neuen Erzählformen durch neue Medien entstehen können.

Netzkunst

Eine Erzählform, die oft nicht als solche wahrgenommen wird, ich aber sehr spannend finde, ist die Netzkunst. Aus meiner Sicht besitzt sie eine spezielle Ästhetik und arbeitet sehr mit dem Medium selbst. Es wird nicht einfach als zu füllender Platz missbraucht, sondern das Medium und die Technik selbst werden zum Teil der Erzählung gemacht. So z. B. die Frames bei Olia Lialinas »My boyfriend came back from war!«
Olia Lialinas »My boyfriend came back from the war!« »

Zusätzlich finde ich Künstler spannend, die im Netz mit dem Netz arbeiten wie z. B. Addie Wagenknecht. Sie hat generell kritische Arbeiten und eine Arbeit ist beispielsweise ein Diskurs zwischen webbasierten Erfahrungen (lolcatz, memes, gifs) und historisch geschlossenen Systemen, welche die physische Welt regieren. Das Internet ist nach ihr demokratischer Natur, aber kein demokratisches Medium. Sie stellt zudem fest, dass wir mehr auf die Bildschirme als aus unseren Fenstern schauen.
Von Dildodrohnen und lolzcat »

Trans- und crossmediale Erzählungen

Des Weiteren habe ich mich mit trans- und crossmedialen Erzählungen beschäftigt. Darunter auch »about:kate«, welche mit user-generated content und 2nd-Screen-Anwendungen gearbeitet hat.
About:Kate – »Wann haben Sie bemerkt, dass Sie nicht mehr wissen, wer Sie sind?« »

Film und Game

Mit »Fort McMoney« habe ich mich im Bereich Dokumentarspiel auseinandergesetzt. Es enthält viele Cut scenes, spielerisch erlangt man hier neues Wissen. Generell ist Gamification ein wichtiges Thema, denn das Spiel wird als neues Leitmedium angesehen.
Als Erzählform finde ich es an sich spannend, jedoch hat nicht jeder Interesse sich mühevoll durch einen Film oder das Spiel zu spielen.
Das Doku-Game »Fort MyMoney« von David Dufrense »

In Bezug auf die Kombination Film-Game habe ich eine Ausstellung im Filmmuseum Frankfurt besucht: »Film und Games. Ein Wechselspiel«, die genau diesen Aspekt beleuchtet. Schon Ende der 80er beeinflussen sich Game und Film gegenseitig, heutzutage verschmelzen die Medien noch mehr.
»Film und Games. Ein Wechselspiel.« im Filmmuseum Frankfurt

Neben dieser temporären Ausstellung im Filmmuseum, halte ich die allgemeine für sehr interessant. Vor allem mit Blick auf Geräte zur Wiedergabe von Bildern oder für die Erzeugung von Bewegtbildern. Teilweise erinnern sie an heutige Geräte. Generell hatte ich mich bereits mit Augmented und Virtual Reality beschäftigt. Hier hatte ich die Überlegung, ob nicht sogar eine Transformation aus dem Digitalen ins Analoge zu schaffen ist.
Mechanische GIF: Das Giphoscope »

Natürliche Art der Erzählung

Am Ende des 1. Semesters war meine Erkenntnis, dass sich alles Richtung »natürliche Art der Erzählung« entwickelt. Ähnlich wie vor der Schrift als alles noch dynamischer war. Dazu habe ich Parameter aufgestellt, welche solche Erzählungen erfüllen müssten:
Rückbesinnung auf eine natürliche Art der Erzählung »

Projekte: Eye-Tracking-Demo und Giphy-Experiment

In Bezug auf transparente Schnittstellen, entwickelte ich mit zwei Medientechnikern in einer sehr kurzen Zeit eine Eye-Tracking-Demo. Der einzige Anspruch war zu zeigen, was möglich ist. Das Thema »Mystery« war dabei nicht unbedingt meins, jedoch fand ich es spannend, an so einem Projekt mitzuarbeiten. Die großen Fragen waren, was geht und was nicht, was ist grafisch umsetzbar und wo sind die Grenzen.
Das verlassene Haus »

Des Weiteren habe ich mein Giphy-Experiment vorgestellt:
Erstes Experiment mit der giphy-Bibliothek »

Eine weitere Projektidee ist eine Erzählung zu entwickeln, die automatisch bebildert wird. Das widerspricht Byung Chul Hans These, dass Wissen narrativ und Informationen additiv sind. Von daher ist es aus meiner Sicht grundsätzlich nicht möglich, Narrationen automatisiert aus Daten zu generieren. Jedoch ist meine Überlegung die, eine Narration mit genauem Rahmen und exakten Parametern für Daten zu schaffen, um sich einer automatisch bebilderten Erzählung anzunähern.

Eine weitere Idee, die aus dem Giphy-Experiment entstanden ist, ist eine personalisierte Bildsprache zu entwickeln. Dabei müsste der große Datenpool auf dem eigenen Rechner genau getaggt und beschrieben oder zukünftig per Bilderkennung analysiert werden. Die eigene Sprache wird bei dieser Idee in Bilder übersetzt.

Loop-Erzählungen

Eine Loop-Erzählung mithilfe von giphy z. B. als Rauminstallation zu erarbeiten wäre ein weiterer Ansatz.
Dieser Ansatz ist meiner These aus dem 1. Semester, nämlich dass wir durch die Schrift sequentiell denken, sehr nahe. Wir sind als Europäer im Gegensatz zu orientalischen Ländern sehr linkshemisphärisch geprägt. Insgesamt denken wir sehr in Kausalitäten und alles hat einen zeitlichen Aufbau. McLuhan spricht davon, dass wir zunehmend in einer Welt der Gleichzeitigkeit leben und die Zeit aufgehört hat und der Raum verschwunden ist. Durch Loop-Erzählung wäre die Positionierung aufgelöst – es gäbe keinen klaren Zeitpunkt. Die Geschichte würde sich nach und nach – non-linear – erschließen.
Das globale Dorf – Raum, Zeit und Dynamik
Von Loops und der Hyper-Realität »

Interface und Interaction Design

Momentan sind all diese Ansätze auf Eis gelegt, um mich neu zu orientieren. Insgesamt finde ich nämlich sowohl das Web an sich als auch Medieninstallationen sehr spannend. Es wäre auch eine Kombination beider Medien denkbar.

Daher habe ich mich zunächst wieder darauf konzentriert, Beispiele für Weberzählungen zu finden.
Für das schönste Beispiel halte ich Species in Pieces: Eine interaktive Ausstellung »: Species in Pieces (Projekt) »

Des Weiteren habe ich mich mit Interaction Design beschäftigt. So z. B. mit Conversational User Interfaces, welche teilweise die graphischen Benutzeroberflächen ersetzen sollen. Zudem find ich den Ansatz der emphatischen Interaktion interessant, welcher sich darauf konzentriert, inwiefern Rückmeldungen für den Menschen wichtig und sinnvoll sind. Ein schönes Beispiel fand ich hier das eines Baggerfahrers, der jahrelang Bagger fährt und plötzlich eine Fernbedienung bekommt. Hier muss durch Rückmeldung wieder eine Verbindung zum Material aufgebaut werden.
CUI – Conversational User Interface »
Natural User Interface – Die unsichtbaren Schnittstellen »
Empathische Interaktion »

Medieninstallation

Abschließend stelle ich zwei Installationen von Markus Kison vor. Eine davon ist »Pulse« dessen Zentrum ein Gummiobjekt ist, das auf dessen acht Seiten die Grundemotionen des Menschen darstellt. Die Daten kommen dabei via APIs n Echtzeit aus WordPress-Blogs.
»Pulse« von Markus Kison »
»Touched Echo« von Markus Kison »

Der momentane Stand ist der, dass ich große Motivation habe eine Medieninstallation zu bauen, die in irgendeiner Form auf Echtzeitdaten zurückgreift. Dafür werde ich weiter recherchieren, um genaueres über Technologie und Medienechnik zu erfahren.

Abbildungen
  1. Titelbild: Studio SML: Projekte – Deutsches Filmmuseum Frankfurt, Änderung zum Zweck der Präsentation meiner Recherche: Headline sowie Quellenangabe, abgerufen am 30.1.2016.

Real-Time Data Streaming

Eine weitere Möglichkeit des Real-Time Data Streaming bietet die Verwendung von WebSockets. Hier liefert Steve Schwartz einen guten, ersten Einblick.

Ein weiterer Fund in meiner Recherche bezüglich verwendbarer Technologien für eine Medieninstallation sind WebSockets. Neben der Tatsache, dass man das Wort mal gehört hat, sind mir WebSockets in ihrer Funktion gänzlich unbekannt. Eine auf den ersten Blick gute Zusammenfassung veröffentlicht Steve Schwartz auf seiner Seite, die ich zu Recherchezwecken durcharbeiten möchte: WebSockets.
Eine mögliche Engine könnte auf folgender Seite zu finden sein: socket.io.

application programming interface

Nach wie vor recherchiere ich bezüglich der Form und möglichen Technologie einer Medieninstallation . Während Markus Kisons Projekt »Pulse« unter anderem auf Processing und einer WordPress.com-API, stoße ich auch bei der Recherche regelmäßig auf die Verwendung von APIs, um Echtzeit-Daten auszulesen. Hierzu möchte ich in der kommenden Zeit weiterarbeiten und -recherchieren.

Nach wie vor recherchiere ich bezüglich der Form und möglichen Technologie einer Medieninstallation (Formsuche »). Während Markus Kisons Projekt »Pulse« unter anderem auf Processing und einer WordPress.com-API, stoße ich auch bei der Recherche regelmäßig auf die Verwendung von APIs, um Echtzeit-Daten auszulesen. Zwar ist mir die grundsätzliche Bedeutung und Nutzung von APIs bekannt, jedoch habe ich noch keine Erfahrung damit, in welcher Form sie in den eigenen Code eingearbeitet werden und in welcher Form, die Information wieder – aus technischer Sicht – ausgegeben werden kann. Aus diesem Grund möchte ich mich hier in der nächsten Zeit in die Nutzung von APIs einarbeiten, um solche möglicherweise in meinem Projekt nutzen zu können. Als erste, interessante Quelle finde ich folgende Seite, die eine kleine Übersicht über Real-Time-APIs liefert: Real Time APIs. Mit dieser Seite möchte ich mich erstmal grundsätzlich über diverse APIs informieren, um dann selbst mit den ersten zu experimentieren.

Ursprung der Codes: Die gesprochene Sprache

Die westliche Kultur befindet sich im großen Umbruch, ausgelöst durch die Fortschritte der Technologie. Veränderte Koden, verändern unsere Art zu denken grundlegend. Wie sieht die Zukunft aus?

In meinen vorherigen Beiträgen »Das globale Dorf – Raum, Zeit und Dynamik« sowie »Von der Kultur, die statisch wurde« setzte ich mich bereits mit der Tatsache auseinander, dass die Linearität das Denken in unserem Kulturkreis maßgeblich beeinflusst hat. Meine abschließende Erkenntnis war die, dass sich diese Linearität aufzulösen scheint und unsere Lebenswelt weniger festgezurrt und dynamischer wird.
Sicher wird die Zukunft unserer Kultur durchweg von Algorithmen bestimmt, die sehr wohl eindeutig sind. Jedoch wird das Denken des Menschen sehr viel flexibler sein und grundlegend verändert werden.

Vilém Flusser bringt in Bezug darauf beispielsweise vor, dass wir »nicht mehr Daten zu lernen haben, sondern das zweckmäßige Speichern, Abberufen und Variieren von Daten. Nicht mehr das Repertoire, sondern die Struktur von Systemen. Dieses Prozessieren von Daten, das bisher von der Notwendigkeit der Datenerwerbung gebremst war, heißt ›Kreativität‹, und es ist daher mit einer wahren Explosion der menschlichen Kreativität zu rechnen«1.

Dieser Ansatz Flussers ist vor 30 Jahren schätzungsweise revolutionär, heute im Jahr 2017 sind wir schon mitten im Umbruch. Die Denkweise in unserem Kulturkreis wird bereits auf das Verstehen von Strukturen getrimmt, während wir wissen, dass wir beispielsweise nichts mehr zwingend auswendig lernen müssen. Alles ist abrufbar, die Suchmaschine Google ist nur ein beispielhaftes Werkzeug hierfür. Man muss nicht mehr die Information selbst kennen, es genügt zu wissen, wie wir sie abrufen können. Diesen Ansatz habe ich bereits in diversen Beiträgen verfolgt und halte ihn nach wie vor für eine der grundlegendsten Veränderung unserer Zeit. Dieser Fortschritt der Technologie, unterstützt weiter die Aussage Flussers, dass jede Revolution technisch ist.2 Nicht irgendeine Ideologie, sondern die Technik veränderte unsere Lebenswelt und unser Denken in den letzten Jahrzehnten entscheidend.

Eine weitere maßgebliche Veränderung wird laut Flusser durch die Veränderung der Koden ausgelöst: »Die Veränderung wäre tiefgreifend, weil unser Denken, Fühlen, Wünschen und Handeln, ja sogar unser Wahrnehmen und Vorstellen, in hohem Grad von der Struktur jenes Codes geformt werden, in welchem wir die Welt und uns selbst erfahren. Wir sind ›westliche Menschen‹, weil unsere ›forma mentis‹ von der Linearität des alphanumerischen Codes ausgebildet wurde. Sollten unsere Kinder und Enkel die Welt und sich selbst mittels anders strukturierter Codes (etwa mittels technischer Bilder wie Fotos, Filme und Fernsehen, und mittels Digitalisation) erfahren, dann wären sie anders in der Welt als wir es sind, und als es unsere Vorfahren waren«3. Dieser Aussage möchte ich ein weiteres Zitat zur Auseinandersetzung hinzufügen: »Nun verfügen wir, seit Urzeiten, über einen Code, nämlich über die gesprochene Sprache, welcher diese Aufgabe leistet«4.

Koden dienen grundsätzlich der Kommunikation, aus meiner Sicht unabhängig davon, ob zwischen Menschen oder Menschen und Maschinen. In »Conversational User Interfaces« und »Natural User Interfaces – Die unsichtbaren Schnittstellen« sehe ich daher Ansätze, die seine Denkweise nicht nur bestätigen, sondern weit darüber hinaus gehen. Zudem werden Voice User Interfaces (VUI) immer populärer. Mit VUIs erhalten wir meiner Ansicht nach nicht nur eine zusätzliche Art der Mensch-Maschine-Kommunikation, sondern wir kommen zurück zum ursprünglichen Code – der gesprochenen Sprache.
Insgesamt drängt sich mir hier die Frage auf, wie zukünftige User Interfaces aussehen könnten, wenn sie denn überhaupt noch »aussehen«. Amazons Alexa oder Apples Siri sind nur zwei Beispiele für ein sprachgesteuertes Gerät bzw. sprachgesteuerten Assistenten. Während Siri auch visuell reagiert, existiert Alexa ausschließlich auf der auditiven Ebene. Unter dem Strich können Alexa und Siri alle Fragen gestellt werden.
Mein Problem damit ist momentan noch das, dass ich mir nicht vorstellen kann, wie eine Welt basierend auf Audio Interfaces aussehen könnte. Nach meinem Verständnis müsste man zumindest wissen, welche Informationen vorhanden sind, um die entsprechende Antwort zu erhalten. Ein reines Stöbern oder zufälliges auf Informationen stoßen wären damit ausgeschlossen. Daher stellt sich die nächste Frage, inwiefern Audio Interfaces tatsächlich andere Interfaces ersetzen und ob sie nur als zusätzliche Variante dienen könnten.

Quellen
  1. Röller, Nils; Wagnermaier, Silvia (Alle Hg.): »absolute Vilém Flusser«, Freiburg 2003, S. 171.
  2. Vgl. Ebd., S. 157.
  3. Ebd., S. 71.
  4. Ebd., S. 74.
Abbildungen
  1. Titelbild: Lecourt, Pierre: »Amazon Echo«, abgerufen am 7.11.2016, Lizenz: CC BY-NC-SA 2.0.

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.

See the World in a New Light

Für meine Recherche habe ich mich sehr auf das Buch »GUI Design : [interface, interaction, application, icon, button, typeface, themes]« von Felix Ma gefreut. Leider wurden meine Erwartungen nicht erfüllt, da sich das Buch überraschenderweise zum einen hauptsächlich aus Beispielen zusammen setzt und ich diese zum anderen überwiegend nicht einmal für gute halte.

Für meine Recherche habe ich mich sehr auf das Buch »GUI Design : [interface, interaction, application, icon, button, typeface, themes]« von Felix Ma gefreut. Leider wurden meine Erwartungen nicht erfüllt, da sich das Buch überraschenderweise zum einen hauptsächlich aus Beispielen zusammen setzt und ich diese zum anderen überwiegend nicht einmal für gute halte. Selbst der Blick auf das Erscheinungsjahr 2015 hilft mir nicht weiter. Ich hatte gehofft, dass das Buch schon ein paar Jahre älter ist und die negative Überraschung etwas gedämpft wird. Eine weitere Erklärung könnte die sein, dass das Buch in Hong Kong erschienen ist und sicherlich eine andere Art von Gestaltung als schön empfunden wird.

Nichtsdestotrotz kann ich zumindest ein Beispiel vorstellen, dass mir sehr gut gefällt. Eine iPad-App (See the World in a New Light ») der israelischen Designerin Yael Cohen zeigt uns die Wirkung des Lichts auf unserem Planeten. Ich persönlich konnte die App zwar noch nicht testen, soweit ich es jedoch verstehe, bezieht sich die App auf ausgewählte, öffentliche Räume. Dort kann man mittels der App die Gegend fotografieren und mehr Informationen über das Licht – auch bezogen auf den jeweiligen Ort und die Zeit – erhalten.

Abbildungen
  1. Einbau von Vimeo; Yael Cohen: »See the world in a new light‹«, URL: https://vimeo.com/36784613, TC: 00:00:19, abgerufen am 7.8.2016.

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.

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.

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.

Linius – Ein Tool für digitales Storytelling

Für eine Exkursion nach Tarifa, habe ich mich in das Linius Storytelling-Tool eingearbeitet. Das Tool ist dafür gedacht, multimediale Stories einfach umsetzen zu können.

Für eine Exkursion mit Britta Wandaogo, Prof. Dr. phil. Stefan Asmus und Dr. phil. habil. Hyun Kang Kim nach Tarifa, habe ich mich in das Linius Storytelling-Tool eingearbeitet. Als wissenschaftliche Hilfskraft wird es später meine Aufgabe sein, die Geschichten der einzelnen Gruppen im Web technisch aufzubereiten. Die Exkursion findet Anfang Juni für fünf Tage statt.

Das Tool

Das Tool ist dafür gedacht, multimediale Stories einfach umsetzen zu können. Neben gewöhnlichen Artikeln oder Bildergalerien können zum Beispiel Hotspots oder eine Lupe eingebaut werden, wodurch Details erst auf den zweiten Blick sichtbar werden. Des Weiteren gibt es die Möglichkeit ein Intro zu erstellen oder einen Zähler auf der Seite zu integrieren, der nach vorheriger Dateneingabe das mitzählt, was man mitzählen möchte. Beispiel: Seit Sie auf dieser Seite sind, wurden xy Plastikbeutel im Meer versenkt.
Eine seitliche Navigation bietet einen schönen Überblick über die einzelnen Kapitel oder Inhalte.

Tools des Linius Storytelling-ToolsI
Tools des Linius Storytelling-ToolsI

Beispiele

Die Projekte Diyarbakir – Belagerte Stadt und Das Oktoberfest-Attentat sind zwei schöne Beispiele, die mit Linius entwickelt wurden. Beide Projekte zeigen den Umgang mit der Kombination aus Videos, Fotos sowie Bildergalerien, die teilweise grafisch genutzt werden.

Nicht sonderlich spektakulär

Zwar werde ich erst im Verlauf des Projekts weitere Einblicke in das Tool erhalten, auf den ersten Blick scheint es jedoch ein solides Tool zu sein, das einfach zu bedienen ist. Auffallend ist, dass einzelne Elemente wie die Hotspots scheinbar nicht responsive sind. Das werde ich im Prozess noch einmal testen. Sollte es jedoch tatsächlich so sein, fände ich das für ein bezahltes Tool, das wohl aus öffentlichen Geldern finanziert ist, keine gute Werbung. Den Anspruch als Tool, das sich in erster Linie an Menschen richtet, die Webseiten nicht selbst umsetzen können und ein einfach zu handhabendes Werkzeug benötigen, um Geschichten zu erzählen, kann es allemal erfüllen. Insgesamt sind jedoch die möglichen Beitragsarten wie z. B. Artikel, Audio, Vimeo- und YouTube-Embedding, Video oder Bildergalerie nicht sonderlich spektakulär.

Abbildungen
  1. Eigener Screenshot, URL: http://linius-storytelling.de/wp/, abgerufen am 7.4.2016.

Erinnerungsnetzwerk

Das Erinnerungsnetzwerk resultiert ursprünglich aus dem Problem, meine Gedanken, Ideen und Recherchen bezüglich des Masterthemas klar zu ordnen und zu strukturieren.

Das Erinnerungsnetzwerk basiert ursprünglich aus dem Problem, meine Gedanken, Ideen und Recherchen bezüglich des Masterthemas klar zu ordnen und zu strukturieren.

Die Lösung war zunächst, alles niederzuschreiben, um aus dieser Sammlung neue Ansätze zu entwickeln. Da es schwierig ist die komplexen Zusammenhänge analog darzustellen, habe ich nach digitalen Lösungen gesucht. Auf eine Empfehlung hin war die erste Überlegung, die Software »the brain« zu nutzen, die es mittels Verknüpfungen ermöglicht ein komplexes Netzwerk der einzelnen Beiträge zu entwickeln.

Aus diesem Gedanken entstand die Fragestellung, wie viel verborgene Erinnerungen in unserem Gehirn lagern, sowie die Idee das eigene Gehirn zu visualisieren.

Nur ein kleiner Teil des Gehirns wird genutzt

Im Alltag denken wir nur an eine bestimmte Zahl von Menschen und Dingen, die uns wichtig sind und verbinden damit meist nur wenige Eigenschaften, Erlebnisse oder Ähnliches. Bei genauerem Nachdenken wird einem erst bewusst, wie viele Erinnerungen oder Fakten es tatsächlich gibt, wenn man an einem Strang weiter denkt. So wäre beispielsweise allein mein Hobby Fußball ein komplexes Konstrukt aus unzähligen Untersträngen mit Menschen, Erlebnissen, Eindrücken oder Strängen, die in einen anderen Lebensbereich reichen. Das macht mir erst bewusst, wie komplex und umfangreich so ein Gehirn tatsächlich ist.

»Weißt Du noch«-Momente

Eine weitere Grundlage ist etwas, dass ich in meiner Jugend – wenn auch selten – gemacht habe: Ich habe »Weißt Du noch«-Erlebnisse in meinen Kalender eingetragen. Dabei schreibt man beispielsweise ein Ereignis von heute als »Weißt du noch«-Moment ein paar Monate später in den Kalender. An diesem Tag wird man dann an das heutige Erlebnis erinnert.

Diese Ansätze habe ich gedanklich zum Erinnerungsnetzwerk weiter entwickelt. Das Grundsätzliche ist dabei nicht, einfach alles zu speichern oder zu visualisieren. Sondern das Anzeigen, sprich das Erinnern an das Vergessene.

Das Netzwerk beruht dabei zunächst auf Bildern, die sehr gut getaggt sein müssten, was ich jedoch ohnehin als zukünftigen Standard ansehe. Zudem besitzen schon jetzt, zum Teil sehr einfache, Bildarchivierungsprogramme die Möglichkeit der Gesichtserkennung. Das Programm findet sogar Fotos einer Person aus unterschiedlichen Lebensjahren. Zusätzlich könnten beispielsweise Anekdoten eine Rolle spielen. Das halte ich jedoch für zu viel Aufwand für den Nutzer, da er das selbst einpflegen müsste.

Das Netzwerk könnte daraufhin »Weißt Du noch«-Momente schaffen. Wie bei Blogs, die ähnliche Artikel anzeigen, könnte das Erinnerungsnetzwerk Fotos zeigen, die passend zum angezeigten Foto sind. Sprich ein angezeigtes Urlaubsfoto zeigt weitere Fotos aus einem anderen Urlaub an, das Bild einer Person andere Erlebnisse und Momente mit dieser Person.

Das Konzept des Erinnerungsnetzwerks möchte ich gern weiter entwickeln, da ich es für einen spannenden Ansatz halte. Technisch scheint es erstmal nicht sehr aufwändig zu sein, da es ähnlich wie ein Blogsystem im Web funktionieren könnte. Dieser einfache Start könnte jedoch noch weitaus komplexer sein.

Der Verlust der 90er Jahre

»Digital Folklore – To computer users, with love and respect« von Olia Lialina und Dragan Espenschied beschäftigt sich so wie die gesamte Arbeit der Medien- bzw. Netzkünstler mit der Webkultur der 90er Jahre.
Mit ihrer Arbeit »One Terabyte of Kilobyte Age« archivieren und analysieren sie Geocities-Webseiten, die kurz vor der Schließung des Webseiten-Dienstes, gesichert werden konnten. Auch in ihrem Buch weisen sie erneut darauf hin, dass unsere Inhalte auf MySpace, Facebook und Co. eines Tages gelöscht und vergessen werden könnten.

»Digital Folklore – To computer users, with love and respect« von Olia Lialina und Dragan Espenschied beschäftigt sich so wie die gesamte Arbeit der Medien- bzw. Netzkünstler mit der Webkultur der 90er Jahre.
Mit ihrer Arbeit »One Terabyte of Kilobyte Age« archivieren und analysieren sie Geocities-Webseiten, die kurz vor der Schließung des Webseiten-Dienstes, gesichert werden konnten. Auch in ihrem Buch weisen sie erneut darauf hin, dass unsere Inhalte auf MySpace, Facebook und Co. eines Tages gelöscht und vergessen werden könnten.1

Auch Luciano Floridi (Von der Kultur, die statisch wurde ») sieht das als problematisch an. Er spricht dabei vom digitalen Gedächtnisverlust, der z. B. durch veraltete Technologien zu Stande kommt, da diese nicht mehr nutzbar sind (z. B. Diskette) oder die Inhalte nicht von einer alten Technologie in eine neue übertragen werden (z. B. von der Diskette auf CD).2 Durch die Überspeicherung von Webseiten werden Dokumente in einen Zustand der Geschichtslosigkeit geführt und damit flüchtig wie die mündliche Kultur.3

Die Arbeit der zwei Künstler findet primär im Bereich Web statt und sie greifen vergangene Trends sowie die Aufbruchstimmung zu Beginn des Webs auf. Hier wird mir erneut bewusst, wie viel kulturelle Eigenheiten und Phasen durch die Löschung von Daten verloren geht. Schon jetzt ist es schwierig, die 90er Jahre im Web zu »finden«. Zwar ist es insgesamt noch ein leichtes, da viele der jetzigen Nutzer schon damals online waren und die Ästhetik und Stimmung des damaligen Web 1.0 kennen. Zudem gibt es schon erste Retrotrends, die die 90er imitieren. Dennoch werden die Webseiten dieses Jahrzehnts – bis auf die, die bewusst gespeichert werden – in naher Zukunft sicherlich verschwunden sein.

Unabhängig davon, ob es erste Firmenwebseiten oder Seiten für das eigene Haustier sind: Wie ist es möglich, die Daten und damit ein Teil der Kultur und Geschichte zu konservieren? Gibt es Parallelen zu Büchern, welche sicher auch nicht vollständig die Zeit überdauert haben? Und wie wichtig ist es überhaupt, dass möglichst alles noch in 20 Jahren auffindbar ist? Wie vermessen wäre es denn, das alles nicht zu speichern, wenn wir doch generell die Möglichkeit haben vieles zu speichern?

Ich denke, dass es in den nächsten Jahren enorm wichtig sein wird, auf diese Fragen eine Antwort und eine gute Lösung zu finden. Vielleicht ist es schon ein Anfang, wenn wir zumindest mit unseren eigenen Daten sorgfältiger umgehen.

Abschließend noch ein Hoffnungsschimmer: Zumindest mit der waybackmachine kann man sich 498 Milliarden Webseiten ansehen, viele von ihnen reichen bis in die 90er Jahre.

Quellen
  1. Vgl. Lialina, Olia; Espenschied Dragan: »Digital Folklore«, Stuttgart 2009, S.8.
  2. Vgl. Floridi, Luciano: »Die 4. Revolution – Wie die Infosphäre unser Leben verändert«, Berlin 2015, S. 36.
  3. Vgl. Ebd., S. 37.

Digitales Storytelling – Eine lose Sammlung

Wie können Erzählungen im und mit dem digitalen Bereich aufgebaut werden? Zwei Beispiele für digitale Erzählungen sowie einer »immersive documentary«.

Im Rahmen meiner Recherche bezüglich des Projekts mit Eye Tracking (Storytelling mit Hilfe von Eye-Tracking ») bin ich auf die folgenden Beispiele gestoßen, die ich nur als lose Sammlung auflisten möchte. Es lohnt sich diese Erzählungen selbst durchzuklicken, letzteres (»Door in the dark«) wird auch als »immersive documentary« bezeichnet.

»Firestorm« von The Guardian (Jon Henley & Laurence Topham): Schauen und Klicken
»Snow Fall« von der New York Times (John Branch): Schauen
»Door in the dark« von Robert Frost: Trailer

Präsentation II

Präsentation vom 18.12.2015.

Am 16.12.2015 habe ich meine zweite Zwischenpräsentation gehalten.In der Präsentation stelle ich einen variablen Fragenkatalog für mein Interview mit dem Primatologen Dr. Christoph Schwitzer vor. Des Weiteren präsentiere ich einen verbesserten Vorschlag für meine grafische Analyse, die sich nun vom Videoformat gelöst hat.

Screenshot in grafische Elemente aufgelöt
Beispielhafte Abbildungen der grafische Analyse von zeit.de (2011–2104)

Mit dem Fokus auf transmedialer Erzählung, gebe ich einen kurzen Einblick in das »Transmedia Manifest«, sowie einen Überblick über ausgewählte Erzählungen wie »About:Kate« und »netwars / out of CTRL«.

Dabei beschäftigen mich zwei Hauptfragen:
· Wie werden neue Medien genutzt?
· Welche neuen Erzähl-Formate können entstehen?

Ein weiterer Fokus liegt auf dem Nutzungsverhalten der Zuschauer mit den Fragen, wo und wie Inhalte mit welchen Endgeräten konsumiert werden. Des Weiteren suche ich Gründe für diese Veränderung, wie z. B. weniger Zeit oder verkürzte Aufmerksamkeitsspannen. Spannend finde ich auch, ob dadurch zwischenzeitlich modulare Erzählweisen den Vorzug erhalten und ob dabei der reine Konsum oder Interaktion im Fokus steht. Bei diesen Fragen helfen mir u. a. die Onlinestudien von ARD und dem ZDF (Nutzung von Bewegtbild » und Die Nutzung des Internets unterwegs »).

Mögliche Ansätze

Als weitere Ansätze halte ich die Verwendung von Augmented oder Virtual Reality sowie 2nd Screen-Anwendungen für sehr spannend. Bereits in meiner Bachelor-Arbeit habe ich AR als Technologie genutzt, um Inhalte beispielsweise auf Postkarten oder Aufklebern in der Bahn darzustellen. Zusätzlich habe ich nun die Google Cardboard (Erste Gehversuche mit der Google Cardboard ») getestet, um Möglichkeiten von VR-Brillen auszuloten. Hier könnte sich auch das plattformunabhängige WebVR als interessante und nutzbare Technologie herausstellen.

Auf einer Postkarte abgespieltes Video durch die AR-App Aurasma
Auf einer Postkarte abgespieltes Video durch die AR-App Aurasma

Verschiebung meines Fokus: Transmediale Erzählungen

Mein Fokus verschiebt sich zunehmend auf transmediale Erzählungen, da ich hier viel Potential für kommende Erzählungen sehe.

Bei meinen ersten zwei Ansätzen ging es zum einen darum, wie sich das Web in seinen Text-/Bild-Verhältnissen und in seiner Interaktivität über die Jahre hin verändert hat. Dazu habe ich Screenshots der letzten 10-20 Jahre grafisch dargestellt und die Webseiten mittels eines Farbsystems in die einzelnen Elemente aufgeteilt. Ein nächster Schritt sollte das Animieren der interaktiven Flächen sein, um im Vergleich zu sehen, welche quantitativen Änderungen es über die Jahre gab.
Zum anderen ging es in meinem zweiten Ansatz darum, mich genauer mit Netzkunst auseinandersetzen, sowie generell das Web als ein Abbild der Gesellschaft zu betrachten. Hier ist besonders die Arbeit mit dem Archiv »One Terabyte of Kilobyte Age« interessant. Olia Lialina und Dragan Espenschied analysieren Webseiten, die auf den geocities-Servern, der 2009 geschlossen wurde, waren. Gerade hier ist besonders der gesellschaftliche Aspekt spannend, da der Umgang mit dem Web zu Beginn natürlich ein anderer war. Das Web war ein offenes und freies Medium, in das man – aus kultureller Sicht – große Hoffnungen steckte.

Bisherige Erkenntnisse als Basis

In diesem Bereich blieb es bisher nur bei der Recherche zu einzelnen Projekten. Insgesamt hat sich nun mein Fokus auf digitale Erzählungen verschoben. Die Netzkunst und die gesellschaftlichen Aspekte des Webs werden dabei nicht verworfen. Hier sehe ich noch immer einen wichtigen Ansatz für meine Arbeit. Meinen ersten Ansatz, nämlich der der Web-Analyse, lege ich jedoch erstmal auf Eis. Dieser rein analytische Ansatz in Bezug auf die Architektur einer Webseite, stand nie im Fokus meiner Arbeit und war als eine Art »Vorarbeit« gedacht, um grundsätzliche Mechanismen des Webs zu verstehen und aufzuzeigen.

Wie erwähnt, hat sich mein Fokus auf digitale Erzählungen verschoben, genauer auf transmediale Erzählungen. Hier sehe ich besonders viel Potential für kommende Erzählungen, da das Erzählen über mehrere Medien hinweg, sowie die Einbeziehung des Publikums als »Autoren« anstelle von reinen »Konsumenten«, aus meiner Sicht einen immer größeren Stellenwert genießen wird. Ich glaube daran, dass Rezipienten Erzählungen nicht nur von außen betrachten, sondern Teil davon sein wollen. Dass sie Geschichten selbst entdecken und erleben wollen.

Web-Analyse: google.de seit 2001

Eine Analyse der Webseite www.google.de und ihre Veränderung seit 2001 bezüglich der Bild-Text-Verhältnisse und Interaktivität.

Ich möchte an Hand veralteter Screenshots analysieren wie sich das Web in den letzten 10-20 Jahren sowohl in den Text-Bild-Verhältnissen als auch in seiner Interaktivität verändert hat. Die Vermutung liegt nahe, dass sich der Bild- gegenüber dem Textanteil stark vergrößert und die Interaktivität zugenommen hat. Die Vermutung ist begründet in verbesserter Technologie sowie dem breiten Zugang zum Web. Im Folgenden sind grafisch dargestellte Screenshots der Seite google.de seit 2001.

Mittels eines Farbsystems teile ich die Screenshots in die einzelnen Elemente auf. In einem nächsten Schritt soll das Animieren der interaktiven Flächen erfolgen. Im Gesamtbild soll ein Vergleich zu sehen sein, der diese Änderungen über die Jahre hinweg darstellt.
Die Screenshots stammen von der »Waybackmachine« (Internet Archive: Waybackmachine »). Soweit möglich habe ich versucht die Screenshots im jährlichen Rhythmus auszuwählen. Da die Anzahl der Screenshots aus den frühen Jahren des Webs aus ersichtlichen Gründen sehr dürftig ist, konnte ich diesen Rhythmus nicht durchgehend einhalten. Die folgende Darstellung ist im Bildschirmformat 1920 x 1080 px, da zu Beginn die Idee bestand, die Veränderung in einem Video darzustellen. Richtigerweise müssten die Seiten komplett in ihrer Länge dargestellt werden.

Das Farbsystem:
Das Farbsystem wurde in einem zweiten Schritt verbessert. Das folgende System berücksichtigt beispielsweise Interaktivität als einzelne Farbe. Im neuen System werden Art und Funktion deutlich unterschieden.
Text
Bild
Icons
Links
Interaktive Felder
Werbefläche

 

Übersicht der Screenshots von google.de
Übersicht der Screenshots von google.de seit 2001. Auffallend ist, dass sich google.de im Vergleich zu spiegel.de (spiegel.de seit 1996 ») strukturell kaum geändert hat. Die Grundstruktur wurde lediglich durch minimale Anpassungen aktualisiert und erweitert. Damit ist Google seinem anfänglichen Grundsatz noch immer treu. Nämlich auf vollgepumpte Werbungsseiten, wie man sie von der Suchmaschine yahoo.de kannte, zu verzichten.

 

Auf Basis eines Screenshots vom 18.4.2001
Auf Basis eines Screenshots vom 18.4.2001

 

Auf Basis eines Screenshots vom 29.5.2002
Auf Basis eines Screenshots vom 29.5.2002

 

Auf Basis eines Screenshots vom 27.3.2003
Auf Basis eines Screenshots vom 27.3.2003

 

Auf Basis eines Screenshots vom 7.4.2004
Auf Basis eines Screenshots vom 7.4.2004

 

Auf Basis eines Screenshots vom 7.4.2005
Auf Basis eines Screenshots vom 7.4.2005

 

Auf Basis eines Screenshots vom 6.4.2006
Auf Basis eines Screenshots vom 6.4.2006

 

Auf Basis eines Screenshots vom 5.4.2007
Auf Basis eines Screenshots vom 5.4.2007

 

Auf Basis eines Screenshots vom 10.4.2008
Auf Basis eines Screenshots vom 10.4.2008

 

Auf Basis eines Screenshots vom 3.4.2009
Auf Basis eines Screenshots vom 3.4.2009

 

Auf Basis eines Screenshots vom 2.4.2010
Auf Basis eines Screenshots vom 2.4.2010

 

Auf Basis eines Screenshots vom 2.4.2011
Auf Basis eines Screenshots vom 2.4.2011

 

Auf Basis eines Screenshots vom 5.4.2012
Auf Basis eines Screenshots vom 5.4.2012

 

Auf Basis eines Screenshots vom 4.4.2013
Auf Basis eines Screenshots vom 4.4.2013

 

Auf Basis eines Screenshots vom 3.4.2014
Auf Basis eines Screenshots vom 3.4.2014

 

Auf Basis eines Screenshots vom 3.4.2015
Auf Basis eines Screenshots vom 3.4.2015
Quellen
  1. Die Waybackmachine ist ein Internetarchiv von archive.org, das Screenshots sämtlicher Webseiten der letzten Jahrzehnte enthält. URL: https://archive.org/web/, abgerufen am 24.10.2015.
Abbildungen

Eigene grafische Abbildung auf Basis der Screenshots des Internetarchivs, URL: https://web.archive.org/web/*/www.google.de, abgerufen am 24.10.2015.

Web-Analyse: spiegel.de seit 1996

Eine Analyse der Webseite www.spiegel.de und ihre Veränderung seit 1996 bezüglich der Bild-Text-Verhältnisse und Interaktivität.

Ich möchte an Hand veralteter Screenshots analysieren wie sich das Web in den letzten 10-20 Jahren sowohl in den Text-Bild-Verhältnissen als auch in seiner Interaktivität verändert hat. Die Vermutung liegt nahe, dass sich der Bild- gegenüber dem Textanteil stark vergrößert und die Interaktivität zugenommen hat. Die Vermutung ist begründet in verbesserter Technologie sowie dem breiten Zugang zum Web. Im Folgenden sind grafisch dargestellte Screenshots der Seite spiegel.de seit 1996.

Mittels eines Farbsystems teile ich die Screenshots in die einzelnen Elemente auf. In einem nächsten Schritt soll das Animieren der interaktiven Flächen erfolgen. Im Gesamtbild soll ein Vergleich zu sehen sein, der diese Änderungen über die Jahre hinweg darstellt.
Die Screenshots stammen von der »Waybackmachine«1 (Internet Archive: Waybackmachine »). Soweit möglich habe ich versucht die Screenshots im jährlichen Rhythmus auszuwählen. Da die Anzahl der Screenshots aus den frühen Jahren des Webs aus ersichtlichen Gründen sehr dürftig ist, konnte ich diesen Rhythmus nicht durchgehend einhalten. Die folgende Darstellung ist im Bildschirmformat 1920 x 1080 px, da zu Beginn die Idee bestand, die Veränderung in einem Video darzustellen. Richtigerweise müssten die Seiten als Wireframes dargestellt werden.

Das Farbsystem:
Das Farbsystem wurde in einem zweiten Schritt verbessert. Das folgende System berücksichtigt beispielsweise Interaktivität als einzelne Farbe. Im neuen System werden Art und Funktion deutlich unterschieden.
Text
Bild
Icons
Links
Interaktive Felder
Werbefläche

Screenshots der spiegel.de seit 1996 grafisch dargstellt
Eine Übersicht aller grafisch dargesteller Screenshots. Bezeichnend ist, dass kaum Konstanz in den Seiten ist und ständig neu experimentiert und gerelauncht wurde. Bis heute hat spiegel.de aus meiner Sicht keine Webseite, die aktuellen Ansprüchen genügt. Die Webseite ist nicht responsive, dafür bietet spiegel.de immerhin eine eigene App an. Als Nachrichten-Seite arbeitet spiegel.de natürlich mit viel Text, jedoch sieht man in den letzten Darstellung schon deutlich, dass Headerbilder eine immer größere Fläche einnehmen und die Seiten zumindest teilweise geordneter aussehen.

 

Auf Basis eines Screenshots vom 23.12.1996
Auf Basis eines Screenshots vom 23.12.1996

 

Auf Basis eines Screenshots vom 11.12.1997
Auf Basis eines Screenshots vom 11.12.1997

 

Auf Basis eines Screenshots vom 11.2.1998
Auf Basis eines Screenshots vom 11.2.1998

 

Auf Basis eines Screenshots vom 29.4.1999
Auf Basis eines Screenshots vom 29.4.1999

 

Auf Basis eines Screenshots vom 16.8.2000
Auf Basis eines Screenshots vom 16.8.2000

 

Auf Basis eines Screenshots vom 13.7.2001
Auf Basis eines Screenshots vom 13.7.2001

 

Auf Basis eines Screenshots vom 3.6.2002
Auf Basis eines Screenshots vom 3.6.2002

 

Auf Basis eines Screenshots vom 9.6.2003
Auf Basis eines Screenshots vom 9.6.2003

 

Auf Basis eines Screenshots vom 15.4.2004
Auf Basis eines Screenshots vom 15.4.2004

 

Auf Basis eines Screenshots vom 22.7.2005
Auf Basis eines Screenshots vom 22.7.2005

 

Auf Basis eines Screenshots vom 12.7.2006
Auf Basis eines Screenshots vom 12.7.2006

 

Auf Basis eines Screenshots vom 11.7.2007
Auf Basis eines Screenshots vom 11.7.2007

 

Auf Basis eines Screenshots vom 10.7.2008
Auf Basis eines Screenshots vom 10.7.2008

 

Auf Basis eines Screenshots vom 15.7.2009
Auf Basis eines Screenshots vom 15.7.2009

 

Auf Basis eines Screenshots vom 21.7.2010
Auf Basis eines Screenshots vom 21.7.2010

 

Auf Basis eines Screenshots vom 13.7.2011
Auf Basis eines Screenshots vom 13.7.2011

 

Auf Basis eines Screenshots vom 19.7.2012
Auf Basis eines Screenshots vom 19.7.2012

 

Auf Basis eines Screenshots vom 17.7.2013
Auf Basis eines Screenshots vom 17.7.2013

 

Auf Basis eines Screenshots vom 16.7.2014
Auf Basis eines Screenshots vom 16.7.2014

 

Auf Basis eines Screenshots vom 15.7.2015
Auf Basis eines Screenshots vom 15.7.2015
Quellen
  1. Die Waybackmachine ist ein Internetarchiv von archive.org, das Screenshots sämtlicher Webseiten der letzten Jahrzehnte enthält. URL: https://archive.org/web/, abgerufen am 24.10.2015.
Abbildungen

Eigene grafische Abbildung auf Basis der Screenshots des Internetarchivs, URL: https://web.archive.org/web/*/www.spiegel.de, abgerufen am 24.10.2015.

Erste Fragestellung meiner Master-Arbeit

Wie beeinflusst die Digitalität im Allgemeinen die Menschen? Welche neue Gestaltungsmöglichkeiten, -prozesse und -formen entwickeln sich für den Gestalter? Im folgenden sind die ersten Fragestellungen zu meiner Master-Arbeit zu finden. Dabei betrachte ich die Fragestellung nicht als feste Hypothese, sondern als ersten Anhaltspunkt meiner Recherchen.

In meiner Master-Arbeit möchte ich mich mit der Frage auseinandersetzen, inwiefern und inwieweit das Internet und die Digitalität im Allgemeinen die Gesellschaft beeinflusst und wie der Gestalter rückwirkend in seiner Arbeit beeinflusst und gefordert wird.

Zum einen interessieren mich dabei ästhetische und gestalterische Aspekte.
Eine zentrale Frage ist, wie sich Webdesign verändert hat, verändern kann und wird. Dabei steht eine Analyse der gestalterischen Mittel im Webdesign im Vordergrund – mit dem Ziel die Veränderungen der letzten Jahre und Jahrzehnte herauszufiltern und aktuelle Trends zu erkennen. Auch technische Innovationen sind hier die Grundlage der Arbeit als Webdesigner.

Zum anderen soll ein Fokus auf die generelle Arbeit des Gestalters gelegt werden.
Non-Profit-Organisationen wie z. B. Creative Commons können zwar einerseits als Konkurrenz angesehen werden. Andererseits werden sie – zukünftig sicher an Qualität gewinnend – vielleicht sogar die Basis, noch komplexere und konzeptionell stärkere Projekte durchführen zu können. Einen spannenden Versuch finde ich hierbei, wie qualitativ hochwertig schon heute Projekte sein können, die ausschließlich auf den Creative Commons basieren.

Des Weiteren stellt sich für mich die Frage, wie sich die Aufgaben eines Webdesigners/-programmierers in Zukunft verschieben. Versuche wie Adobe Dreamweaver, Muse oder „Homepage-Baukästen“ wie z. B. wix, nämlich Webseiten ohne tiefergreifende Gestaltungs- oder Programmierkenntnisse publizieren zu können, werden sicher ausgebaut und optimiert. Ist auch hier eine Konkurrenz zu sehen oder die Chance, noch fokussierter in anderen Bereichen – wie z. B. in der Konzeption – einzusteigen? Ist die generelle Herausforderung nicht der – ohnehin schon im Printbereich geforderte – Anspruch an Professionalität?