Verknüpfung zwischen realer und digitaler Kommunikation: Interaktiver Service

Interaction Design// Sketching & Just-Enough-Prototyping

Interface Design // Die digitalen Medien beeinflussen unsere Lebens- und Arbeitsräume grundlegend. Wir kommunizieren über elektronische Wege dank Mobiltelefon und Internet. Maschinen und Produkte werden über digitale und virtuelle Schnittstellen gesteuert. Medienfassaden und Interactive Bedienoberfl ächen übernehmen in weiten Teilen die Informationsvermittlung. Das stellt neue und hohe Ansprüche an Interface Designer, die neben dem klassischen zwei- und dreidimensionalen Design nun auch Prozessabläufe
zwischen Menschen und Maschinen gestalten und darstellen müssen.

Thema // In diesem Kurs werden anhand des aktuellen Themas „Digital
Private Information Tool“ Digitalisierung des privaten Handlungsraumes interaktiv sinnvoll zu bedienende und benutzbare Benutzeroberfl ächen außerhalb des Computers entwickelt. Produkt- und Interface Design wird hier für interaktive Arbeitsoberfl ächen aus der physischen und digitalen Welt kombiniert. Untersucht werden Verhalten und Eigenschaften physischer und digitaler Interfaces. Interface Konzepte, die plausible Visualisierung von dynamischen Informationen der persönlichen und auch vernetzen gemeinschaftlichen Kommunikation mit anderen Personen durch das Internet werden schrittweise entwickelt.

Ziel // Gesucht werden Szenarien, die eine sinnvolle Erweiterung persönlicher Aufgaben auf interaktiven Arbeitsoberfl ächen außerhalb des persönlichen Computers sind, wie dem interaktiv Table.

Kursinhalte // Konkret erhalten die Teilnehmer des Kurses Einblick in das Fachgebiet, in Interface Design Prozesse und Methodiken der Gestaltung. Wir arbeiten mit Entwürfen und spielerischen interaktiven Experimenten, ausgehend von den Methoden Sketching & Just-Enough-Prototyping, vom Video bis zum einfachen interaktiven Prototypen, über Ideensammlungen zu konzeptionellen Studien. Der Kurs ist in drei wöchentliche Einheiten gegliedert:

// Visualisierung von Informationen im privat geschützten Raum
// Gestalten von Interaktionen zwischen Objekten und Informationen
// Grundlagen zum Aufbau von interaktiven Installationen
// Design eines persönlichen Tools (Widget, Service)
= Videopräsentation der Entwürfe, Dokumentation und Plattform

Vermittelt wird technisches Know How für interactive Space:

// Hardware Installation des „Interactiv Table“
// Software Installation mit „Whiteboard“ von Johnny Lee/ HCI
// Videoprototyping mit iMovie/ Apple iLife 09
// Basic Coding mit Processing von Ben Fry and Casey Reas/ MIT
Das digitale Werkzeug, die Open-Source Entwicklungsumgebung Processing wird in einem Tutorial mit leicht zugänglichen Übungen in den Kurs eingebettet.

Den detaillierten Ablaufplan für den Kurs besprechen wir gemeinsam in den ersten Unterrichtsstunden.

Das volle Potenzial neuer Technologien kann nur dann ausgeschöpft werden, wenn der gesamte Funktionsumfang des Gerätes oder Systems auch durch das Interface sinnvoll dargestellt und benutzbar gemacht wird.

Erstellen Sie ein schlüssiges Konzept.

01) Titel der Arbeit
02) Einführung: Abstract und These
03) Brainstorming
04) Idee
05) Kommunikationskonzept: Beschreibung des Szenarios, Darstellung des Szenarios, Zielgruppe, Vorteile
06) Navigationskonzept: Interaktionsformate, Funktion und Handlung, Interpretation, etc.
07) Strukturplan für dien Funktionen
08) Interaktionsformate
09) Storyboard für den Videoprototypen
10) Entwürfe und Variationen
11) Technische Umsetzung: Skizzen des Installationsaufbau, Technische Implementierung: WiiFlash Server, Whiteboard, ActionScript3 und Installation
12) Design
13) Interaktive Prototypen
14) Videoprototyp

Wie werden reale Produkte und dessen Handlungsräume in der digitalen Welt in ihrer Bedeutung aufgeschlüsselt?

Dies wollen wir analysieren.

Wir wollengemeinsam herausfinden, wie Metaphern (Übertragungen) für Informationen von realen Produkte gefunden werden.

Was können reale Produkte in der digitalen Darstellung simulieren?

Wie können Funktionen aus Produkten in die digitale Welt übertragen werden.

Wie kann der Benutzer diese Informationen lesen und aufrufen? Wie finden die Interaktionen statt? Wir wollen Metaobjekte identifizieren. Zugänge zu Informationsstrukturen deutlich darstellen. Interaktionen durchführen.

Die Ideen und Konzepte durch eine Videoprototype umsetzten.

Objekte anpassen und verändern:
Linie zeichen – Strichstärke verändern – Radiergummi
Licht aus Licht an
Gummiband
Stempel
Lupe
Video an/aus
Images an/ aus
Text schreiben

1. Zeichnen in Processing

1a void setup() und void draw()

In jedem Processing Sketch gibt es feste Bauteile.
Im void setup() steht alles was zu Beginn des Programms nur einmal ausgeführt werden muss, wie z.B. die Fenstergröße. Alles was im void draw() steht, wird dagegen 30mal/sekunde ausgeführt. diese beiden Hauptfunktionen werden mit einer geschweiften Klammer geöffnet und ebenso wieder geschlossen. In diesen Bodies stehen Funktionen, d. h. vorgefertigte Befehle, die noch mit Werten gefüttert werden müssen. Dazu gleich mehr… Jede Zeile wird mit einem Strichpunkt abgeschlossen.

void setup(){

      funktion();
      funktion();
      funktion();
        …

}

void draw(){

      funktion();
      funktion();
      funktion();
        …

}

1b Koordinatensystem

Der Koordinatenursprung beim Start von Processing liegt bei (0, 0), kann aber mit der funktion translate(x, y) verändert werden.

1c Funktionen

Um Objekte in processing zu zeichnen gibt es sog. Funktionen → funktion(Wert) Je nachdem wie viele Werte notwendig sind, um ein Objekt zu definieren, stehen diese zwischen den beiden Klammern hinter dem Befehl.

     size()              Breite, Höhe
     point()                x-Koordinate, y-Koordinate
     line()                  1. x-Koordinate, 1. y-Koordinate, 2. x-Koordinate, 2. y-Koordinate
     rect()                 x-Koordinate, y-Koordinate, Breite, Länge
     ellipse()              x-Koordinate, y-Koordinate, horizontaler Durchmesser, vertikaler Durchmesser
     triangle()            x-Koordinate1, y-Koordinate1, x-Koordinate2, y-Koordinate2, x-Koordinate3, y-Koordinate3

Der größte Teil der Funktionen sind in der Reference aufgeführt und erklärt.

1d Farben

Die Standard-Hintergrundfarbe grau kann mit der Funktion background() verändert werden, die Strichfarbe mit der Funktion stroke() und die Füllfarbe durch fill(). Dabei gibt es mehrere Definitionsmöglichkeiten, der Wertebereich geht aber immer von 0 bis 255:

     background(Wert)                       Grauwert/ 0=schwarz, 255=weiß
     background(Wert, Wert)                 Grauwert, Alphawert für Transparenz
     background(Wert, Wert, Wert)           Rot, Grün, Blau
     background(Wert, Wert, Wert, Wert)     Rot, Grün, Blau, Alphawert

Um die Strichfarbe oder Füllfarbe auszuschalten gibt es die Befehle noStroke() oder noFill(). Da es hier keiner Werte bedarf, bleiben die Klammern leer.

Beispiel1: Punkt, Gerade, Rechteck und Ellipse

 void setup(){
     smooth();                     //besseres Linienbild
     size(900, 200);
     background(255);
   }

   void draw(){

     background(255);

     noFill();
     stroke(0, 120);
     strokeWeight(10);              //Strichstärke

     translate(width/4, height/2);  //Verschiebung des Koordinatensystems

     point(0, 0);

     strokeWeight(.5);
     line(0, 0, width/2, 0);

     translate(width/4, 0);

     rectMode(CENTER);              //Ursprung des Rechtecks
     strokeWeight(.5);
     rect(0,0, 40, 40);

     translate(width/4, 0);

     ellipseMode(CENTER);
     strokeWeight(.5);
     ellipse(0,0, 60, 60);
   }

Aufgabe1:Zeichne ein Gesicht!

1)
Zuerst analysieren wir Photoshop und Word. Untersucht werden Verhalten und Eigenschaften physischer und digitaler Interfaces. Parallel hierzu wird der Fokus auf Verhalten und Handlungen
des Nutzers gerichtet.
Aufgabe: Bitte erstellen Sie Photos mit jeweils zwei Szenarien.

In- and Output physikalischer Gegenstände
1. Was für eine Aktion führt der Benutzer aus?
2. Die digitale interaktive Funktion
3. Die analoge Handlungsausführung der Interaktion
Beim In-Output digitaler Applikationen werden Funktionen aus der realen Welt abstrakt in die digitale zweidimensionale Ebene dargestellt. Mit Hilfe von analogen Prozessen sollen 2 Funktionen dargestellt werden. Der In- Output physikalischer Gegenstände soll nachvollzogen werden.

Möglichkeiten von Handlungen, die in Interaktionen umgesetzt werden:
suchen, wählen, auswählen, anzeigen,
mixen, rühren, drehen, kreuzen
aufbewahren, trocknen, kochen, kühlen,
abspielen, laufen, heizen, brennen,
Signal anzeigen, klingeln, klopfen, etc.

2)
In- and Output physikalischer Gegenstände
Welche Handlungsschritte werden beim Bedienen der Software ausgeführt?
Erstellen Sie eine Serie von Filmsequenzen mit 5-8 Interaktionen (Ein- und Ausgabe), der Prozesskette Ihres Szenarios: Fotografieren Sie die Zustände „Ausgangssituation, an, aus, Ergebnis“ der Interaktion ab. Erstellen Sie eine Prozesskette der Interaktionen der aufeinander folgenden Handlungen des Nutzers. Zustände mit physischen Gegenständen, beispielhaft aus der Küche, dem Wohnzimmer, dem öffentlichen Raum mit den Funktionen, die das Medium der Erinnerungen beinhalten soll. (Beispielhaft: Ein Mixer kann mixen. Er kann Materialien zerkleinern und gleichzeitig vermengen. Feste Masse wird flüssig => Metapher für Daten aus der digitalen Welt: Die Daten werden pixelgenau zerkleinert und beliebig vermengt.
Danach werden wir gemeinsam prüfen, ob die Handhabung (Aktion des Nutzers), die physikalische und digitale Interaktion passend zusammen gesetzt werden können.

Digital Privacy
Gastprofessorin Steffi Hußlein

Verknüpfung zwischen realer und digitaler Kommunikation: Digital Privat Information Tool- Interaktiver Service

Interface Design // Die digitalen Medien beeinfl ussen unsere Lebens- und Arbeitsräume grundlegend. Wir kommunizieren über elektronische Wege dank Mobiltelefon und Internet. Maschinen und Produkte werden über digitale und virtuelle Schnittstellen gesteuert. Medienfassaden und Interactive Bedienoberflächen übernehmen in weiten Teilen die Informationsvermittlung.
Das stellt neue und hohe Ansprüche an Interface Designer, die neben dem klassischen zwei- und dreidimensionalen Design nun auch Prozessabläufe zwischen Menschen und Maschinen gestalten und darstellen müssen.

Thema // In diesem Kurs werden anhand des aktuellen Themas „Digital
Private Information Tool“ Digitalisierung des privaten Handlungsraumes interaktiv sinnvoll zu bedienende und benutzbare Benutzeroberfl ächen außerhalb des Computers entwickelt. Produkt- und Interface Design wird hier für interaktive Arbeitsoberfl ächen aus der physischen und digitalen Welt kombiniert. Untersucht werden Verhalten und Eigenschaften physischer
und digitaler Interfaces. Interface Konzepte, die plausible Visualisierung von dynamischen Informationen der persönlichen und auch vernetzen gemeinschaftlichen Kommunikation mit anderen Personen durch das Internet werden schrittweise entwickelt.

Ziel // Gesucht werden Szenarien, die eine sinnvolle Erweiterung persönlicher Aufgaben auf interaktiven Arbeitsoberfl ächen außerhalb des persönlichen Computers sind, wie dem interaktiv Table.

Inhalte // Konkret erhalten die Teilnehmer des Kurses Einblick in das Fachgebiet, in Interface Design Prozesse und Methodiken der Gestaltung. Wir arbeiten mit Entwürfen und spielerischen interaktiven Experimenten, ausgehend von den Methoden Sketching & Just-Enough-Prototyping, vom Video bis zum einfachen interaktiven Prototypen, über Ideensammlungen zu konzeptionellen Studien.

Der Kurs ist in drei wöchentliche Einheiten gegliedert:
// Visualisierung von Informationen im privat geschützten Raum
// Gestalten von Interaktionen zwischen Objekten und Informationen
// Grundlagen zum Aufbau von interaktiven Installationen
// Design eines persönlichen Tools (Widget, Service)
= Videopräsentation der Entwürfe, Dokumentation und Plattform

Vermittelt wird technisches Know How für interactive Spaces:
// Hardware Installation des „Interactiv Table“
// Software Installation mit „Whiteboard“ von Johnny Lee/ HCI
// Videoprototyping mit iMovie/ Apple iLife 09
// Basic Coding mit Processing von Ben Fry and Casey Reas/ MIT
Das digitale Werkzeug, die Open-Source Entwicklungsumgebung Processing wird in einem Tutorial mit leicht zugänglichen Übungen in den Kurs eingebettet.