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.

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.

Die Navigation:
Die Hauptnavigation (schwarzer Riegel) speist sich aus den BlogKategorien, die angelegt sind. Es werden allerdings nur die Kategorien angezeigt, die auch mit Artikeln gefüllt sind. Ich habe die einzelnen Kategorien, die du mir geschickt hast schon vorbereitet ( ci, logo, naming,…) Es müssen quasi nur noch die Artikel erstellt werden, also die Studis müssen nur noch einen Artikel zur entsprechenden Kategorie erstellen und diesen dann zur Kategorie zuordnen – beim speichern.

Die Artikel
die einzelnen Artikel können mit PreviewBildern versehen werden (310×150px) – die dann immer überhalb des Titels sichtbar sind. Die sind sehr zu empfehlen, da die Seite dadurch sehr lebendig wird. und für die Kategorie Logo ist das sicherlich auch sehr spannend. Ich habe kurz zusammengefasst, wie das funktioniert in dem Artikel : ANLEITUNG – BILDER!+MULTIMEDIA. in der Kategorie Webdesign…. hehe. Es sind auch sehr viele BeispielEinträge im Blog, von denen man abgucken kann.

Die Seiten
Ich habe noch versucht die Pages in die Navigation zu integrieren, was mit zwar technisch gelungen ist, ich das CSS nur nicht dazu bekomme, die Elemente auch anzusprechen – kurzum das sah scheisse aus. Daher würde ich vorschlagen die allgemeinen Inhalte zur Kategorie auch als Artikel zu verfassen und am Ende unter dem aktuellstem Datum abzuspeichern. (Alle Artikel werden chronologisch geordnete, d.h. der Artikel zur Beschreibung wäre dann der Erste) – sorry, das ich da nichts besseres bieten kann, mir fehlt ein bischen die Zeit für ne Recherche deswegen. Ich hoffe das geht so.

Logo+ Artwork
Das Logo hab ich dir noch angehangen als .ai. Alle Bildelemente die vom Blog benutzt werden, sind auch auf dem Webspace, also wenn irgendetwas geändert werden muss, dann reicht es die Datei auf dem Server einfach zu überscheiben – dafür am Besten FileZilla nehmen, das mach keinen Mist.

CSS
Das CSS ist unterteilt in die verschiedenen Funktionsbereiche.sehr übersichtlich. Wenn noch etwas geändert werden muss, dann geht das am Besten, in dem man nur den betreffenden CodeTeil (also Header,…) in das Super Programm TopStyleLite > http://topstyle.en.softonic.com/ > einfügt – da sieht man die Änderung gleich live, super.

Navigation Admin
Die Navigation und essentielle Funktionen befinden sich in der header.php – ich habe dort alle Funktionsweisen hinterlegt und auskommentiert, falls ihr doch noch was freischalten wollt. auskommentierte Tag sehen so aus.