Prototyping

Allgemein bezeichnet man als Prototyping die schrittweise Annäherung an Konzept und Design eines Produkts, eines Services oder einer Software. Aus produktionstechnischer Sicht ist Prototyping dem eigentlichen Produktfertigungsprozess vorgelagert, um diesen an den Bedürfnissen des Prototyps entlang Schritt für Schritt zu definieren. Insofern ist Prototyping eine wichtige kostenrelevante Produktphase, in der man die für die Fertigung des Produkts erforderlichen Materialien und Prozesse präzise auslotet, um kostspielige Produktionssackgassen zu vermeiden. Doch auch der Blickwinkel der Anwender oder User ist wichtig: Hier kommen Usability- und User-Tests ins Spiel, um die Nutzerfreundlichkeit von Produkten und Services zu garantieren.

mehr

Creative Producing in der Praxis

Autonomes Fahren hautnah: Für Volkswagen gestaltete Markenfilm SPACE eine Virtual-Reality-Testfahrt und kombinierte dabei Techniken wie 360-Grad-Film und volumetrisches Video.

mehr

Design-Coding

»Designer sollten mit HTML, CSS und SVG umgehen können, denn das ist die Basis fürs Design-Prototyping«, sagt Lars Richter, Prototyper, Design Coder, Coach und Inhaber von Innovativio in Köln.

mehr

UX-Design-Tool für Interaction Designer

Neues UX-Design-Tool für Interaction Designer: Phase

Mit Phase sollen sich nicht nur Prototypen, sondern direkt lauffähige Designs für Websites und Apps produzieren lassen.

mehr

Rapid-Prototyping-Tools für VR

Neue, intuitiv bedienbare Tools sollen Designern helfen, ihre Ideen selbst zum Leben zum erwecken. Wir stellen neun Lösungen vor …

mehr

Anzeige

Corporate Design, Scribble, Digital Design, Grafikdesign, UX Design

PAGE 12.2017 ist da! Diesmal geht’s ums Scribbeln in Briefings, Kundengesprächen und Workshops

Sketching, Graphic Recording, Visual Thinking – in diesem Heft dreht sich alles ums Scribbeln und wie man es am besten einsetzt. mehr

»Das macht ein UX-Designer bei Aperto – an IBM Company«

UX Design ist in aller Munde – aber was genau macht man da eigentlich? In unserem PAGE Connect eDossier klären wir auf, wie UX Designer bei Aperto in Berlin arbeiten und was man mitbringen sollte, um dort zu arbeiten.

mehr

Neues Prototyping-Tool von Adobe

Auf der Adobe MAX als Project Comet angekündigt, ist es jetzt unter dem Namen Adobe Experience Design CC erhältlich.
mehr

Peripheral Fictions – Prototyping Interactions for Connected Spaces

01.04.2016 - 01.04.2016

Berlin

Workshop des ART + COM-Labs zum Thema »Wie werden wir die Beziehung zwischen den Menschen ihrer Umgebung in Zukunft gestalten«. mehr

Anzeige

Photoshop-Prototyping mit InVision

Dieses Tool richtet sich an UX-Design-Teams, die mit inter­aktiven Wireframes arbeiten.

mehr

Interaktive Prototyping-Tools

Welches Prototyping-Tool eignet sich am besten für eine responsive Website, welches für eine simple App?

mehr

Design-Prototyping für Designer und Developer

Webbasierte Tools erleichtern interdisziplinären Teams die gemeinsame kreative Arbeit. Wir stellen hier eine Anwendung vor.

mehr

Newsgames-Hackathon Köln 2014

Das war der Newsgames Hackathon in Köln

Newsgames transportieren journalistische Inhalte auf spielerische Art. Dank simpler Spiele-Editoren interessieren sich auch Coding-Einsteiger immer mehr für das Genre. Wir zeigen Beispiele vom Newsgames Hackathon in Köln und stellen die fünf besten Baukastentools vor. mehr

Anzeige

Online-Plattform Shapeways: Rapid Prototyping aus eigenen Designs

Mittels Rapid Prototyping und Laser Sintering druckt der Online-Dienst Shapeways individuell gestaltete Designobjekte aus.

mehr

Designwettbewerb mit Paper Rapid Prototyping

Der holländische Rapid Prototyping Entwickler Freedom Of Creation (FOC) schreibt einen Ideenwettbewerb zum Thema Paper Rapid Prototyping aus. Deadline ist der 1. Dezember 2010.

mehr

Rapid Prototyping: Cases für das Blackberry Bold 9700

Freedom of Creation, der niederländische Entwickler von mit Rapid Prototyping erstellten Designobjekten, hat zusammen mit Casedesigner Freshfiber zum Ideenwettbewerb FOC Talents für ein Blackberry Case ausgerufen.

mehr

3-D-Drucker: Rapid Prototyping-Maschine zum Selberbauen

Rapid Prototyping war bislang immer noch sehr teuer, das Hackerkollektiv MakerBot Industries aus Brooklyn will dies aber ändern und bietet einen 3-D-Printer für 750 Dollar zum selber zusammenbauen an.

mehr

Anzeige



Aus betriebswirtschaftlicher Perspektive geht es beim Prototyping auch darum, Produkte in diversen aufeinander folgenden prototypischen Stadien zu testen, um sie optimal auf die Bedürfnisse von Endkunden abzustimmen.

Ein anderes Motiv für Prototyping ist die Möglichkeit, Produkte schon in einem sehr frühen Stadium unter realen Marktbedingungen zu testen, indem man sie in einer prototypischen Phase nicht nur auf Usability und Nutzerfreundlichkeit testet, sondern diese vermarktet, um sie on the fly unter realen Marktbedingungen zu optimieren.

Allgemein bekannt und anerkannt ist diese Vorgehensweise im Softwaresektor – Stichwort Betastadium –, doch festigt sich inzwischen insbesondere in der 3D-Druck-Szene die Zielvorstellung, das Feld der »betafähigen« Produktsparten auf alles, was sich theoretisch auch on demand fertigen ließe, zu erweitern (Stichwort Rapid Prototyping). In diesem Zusammenhang erhält der Begriff der Produktkonfiguration eine etwas andere, radikalere Färbung, trifft aber eigentlich nur auf solche Produkte zu, die derart segmentiert sind, dass sich einzelne Teile stets gegen optimierte austauschen (oder sich vom technisch selbstermächtigten User selbst anfertigen, sprich ausdrucken) lassen.

Software-Engineering, Service Design, User Experience Design, aber auch analoge Produktsphären wie Produkt– und Editorial Design, Buchgestaltung und Packaging Design kommen ohne Prototyping nicht aus, angefangen beim schlichten Dummy oder Papierprototyp bis hin zu Mockups oder Wireframes, die entweder in den ohnehin genutzten Designprogrammen oder mithilfe spezieller Prototyping Software erstellt werden. Je nach spezifischem Hard- und Software-Kontext sind hier auch unterschiedlichsten Prototyping-Szenarien abseits etablierter Standards denkbar. Hier eine kleine Liste der derzeit verfügbaren Prototyping-Tools …

… Interactives Screen- und Interface Design: Craft, FigmaFramerInVision StudioSketchZeplin

… Wireframes für Websites und/oder mobile Anwendungen:
Balsamiq, HotGloo, Justinmind, MockFlow, Wireframe.cc

… Design und Entwicklung:
Adobe XD, Atomic, Axure RP, Flinto, FramerInVision, Tumult Hype, Webflow, Origami, Principle, Proto.io, ProtoPie, RapidUI, UXPin



PAGE eDossier »Interaktive Prototyping-Tools«. Hier erfahren Sie mehr über die Klickdummys-Erstellung mit Axure, Bootstrap, Avocado, Flinto und Foundation.



Ein weiteres Feld, in dem sich die Entwicklungsumgebungen und Testverfahren gerade erst herausbilden, ist das Prototyping für Virtual-Reality-Anwendungen. Doch es gibt bereits eine ganze Reihe von VR-Prototyping-Tools. Mehr über den Funktionsumfang und die Einsatzgebiete von A-Frame, Amazon Sumerian, Framer mit VRComponent, Google Blocks, Hologram, Ottifox, Sketchbox, Tvori, Vizor erfahren sie in PAGE 04.2018, Seite 88 f.



Schöpfungsgeschichte

Entwickler wollen neue Produkte, Services und Interaktionen gestalten, die den Alltag ein wenig einfacher, herzlicher und erfreulicher machen. Wie man sich diesem Ideal mittels Prototypen annähert, demonstriert das Team von envis precisely anhand beispielhafter Projekte


Erstveröffentlichung dieses Beitrags: WEAVE 06.2009 / Autoren: Thomas Gläser, Markus Jaritz, Philipp Sackl


INHALT

1 Never go to a meeting without a prototype
2 Design als MetaWissenschaft
3 Kernmechaniken einschätzen und vermitteln
4 Gut gewürzte Projekte
5 Prototypen für jeden Zweck
6 Prototypen von Low- bis High-Fidelity


Prototying, Arduino-Workshop, Medienlabor, Hochschule für Gestaltung Schwäbisch Gmünd
Arduino-Workshop im Medienlabor der Hochschule für Gestaltung Schwäbisch Gmünd

 

Wir alle lieben Abstimmungsrunden, Projektbesprechungen, Diskussionsgruppen, Gremienmeetings und wie sie nicht alle heißen. Oft gibt es dort diese Fläschchen mit Orangensaft, etwas zum Knabbern – und mit ein bisschen Glück auch die kleinen Kekse mit Marmeladenfüllung. Doch kommen wir zur Sache. Die Nutzeranforderungen sind zwar erstklassig definiert, passende Personas wurden verfasst, die Softwarespezifikationen in allen Details erstellt, das hierarchische Modell und die Klassendiagramme stehen wie eine Eins, zudem hat man an alle erdenklichen Use Cases gedacht. Alle sind begeistert von den vielen Anstrengungen für die gemeinsame Sache.

Und doch – irgendwie kann niemand die Ideen richtig fassen. Klar hat schon jeder für sich mehr oder weniger das Projektergebnis vor dem inneren Auge, doch fehlt die nötige Ausarbeitung. Während man noch versucht, sich gegenseitig mit Händen und Füßen die einzelnen Gedankengänge zu erläutern, wachsen über den Köpfen die Fragezeichen.
Top

»Never go to a meeting without a prototype«

Einen entscheidenden Beitrag können hier Prototypen leisten. Sie bringen dem Kunden und den Entwicklerteams die Ideen näher und helfen, einen Konsens zwischen den Beteiligten zu schaffen. Oder wie Ideo-Präsident Tim Brown einst treffend verkündete: »Never go to a meeting without a prototype. At whatever stage of development, one week, one month, or 6 months.«

Dabei reicht es nicht, Ideen einfach niederzuschreiben, man sollte schon die ersten Aussagen in ein paar groben Skizzen visualisieren. Die Qualität der Ausarbeitung spielt übrigens zu diesem Zeitpunkt keine Rolle, da es in der Frühphase eines Projekts in erster Linie um die Funktionalität geht. Auch die ästhetische Komponente ist zweitrangig, denn je detaillierter ein Prototyp ausgearbeitet ist, desto eher ist er gestalterischen Diskussionen ausgesetzt – und die sind im frühen Stadium weder hilfreich noch erwünscht.

Der Anfang jedes Prototyps sind die ersten Geistesblitze, die man auf Papier bannt; das allein bedeutet jedoch meist noch keine Innovation. Wer am viel zitierten Wissensstandort Deutschland das »next big thing« oder die neue »Killerapplikation« landen will, muss mit greifbaren Visionen punkten und Verfahren aufbieten, mittels derer sich Entwicklungen vorantreiben und etwas Neues zur Marktreife bringen lässt. Doch auch für das eigene Verständnis der gefundenen Ideen sind Prototypen äußerst hilfreich. Sie dienen als Werkzeug, um das, was einem vorschwebt, zu testen und aus vielen Alternativen das auszuwählen, was sich am besten zur Weiterentwicklung eignet.
Top

Design als MetaWissenschaft

Um Lösungen zu schaffen, sind besonders die Fähigkeiten der Designer gefragt, ungeachtet in welcher Disziplin sie tätig sind. Sie arbeiten als Metawissenschaftler an der Schnittstelle zu den unterschiedlichsten Spezialgebieten. Mit ihrem Wissen aus angrenzenden Fachgebieten und ihrer Fähigkeit, die verschiedenen Blickwinkel in einem Prototyp abzubilden, verbessern sie die interdisziplinäre Verständigung. Im Interaction Design verwischt die Grenze zwischen den Bereichen allerdings zusehends, da dem Designer immer neue Werkzeuge zur Verfügung stehen, um kreative Konzepte eigenständig in immer ausgereifteren Prototypen umzusetzen. Dies führt idealerweise zu einem integrierten Entwicklungsprozess, bei dem sich alle beteiligten Bereiche um den je aktuellen Prototyp versammeln.

Die größte Hürde bei der Entwicklung von interaktiven Anwendungen ist allerdings immer noch der Dialog zwischen Mensch und Maschine. Um sie zu nehmen, muss man von Anfang an ein Gefühl für die jeweils angestrebte Art der Interaktion entwickeln. Dazu gilt es immer wieder Fragen wie die folgenden zu klären: Was nehme ich wahr, wenn die Anwendung startet? Wie verhält sich ein Objekt in meinem Interface dem Benutzer gegenüber? Wie reagieren die anderen Objekte darauf? Nach welcher Logik reagiert das gesamte System, und ist sie nachvollziehbar? Welche Sinne werden wie angesprochen? Macht die Bedienung Spaß? Langweile ich mich? Oder bin ich gar frustriert? Realistische Antworten können hier wieder nur Erfahrungswerte mit Prototypen liefern. Doch der Einstieg in die Prototypingphase wird leider immer noch zu oft verpasst oder zu weit nach hinten gerückt.
Top

Kernmechaniken einschätzen und vermitteln

Beim Entwicklungsprozess von Computerspielen geht es nach den ersten Storyboards und Skizzen sehr schnell in die Programmierung der ersten Funktionalität. Christian Kluckner, Geschäftsführer von Chimera Entertainment (chimera-entertainment.de) aus München, erklärt den Prozess wie folgt: »Wenn wir entsprechend Zeit und Ressourcen zur Verfügung haben, investieren wir diese nach der ersten Konzeptphase nach Möglichkeit in einen aussagekräftigen Prototyp, der es erlaubt, die Kernmechanik eines Spielkonzepts im Hinblick auf dessen Umsetzbarkeit richtig einzuschätzen und diese glaubwürdig zu vermitteln. Dazu ist das Gesamtkonzept des Spiels meist noch nicht bis ins Detail ausgearbeitet.«

Diesen Prototyp verwendet man laut Kluckner im Anschluss häufig als Fundament für die weitere Entwicklung und erweitert ihn iterativ, wobei man versucht, ihn möglichst modular zu entwickeln, da sich die Anforderungen an das Endprodukt im Prozess noch verändern. So nimmt während des Projektverlaufs der Detailgrad der Anwendung sowie der Visualisierungen stetig zu, und es steht ab dem ersten interaktiven Prototyp jederzeit eine spielbare Version zum Testen bereit. Prototypen sind während der gesamten Entwicklungsphase unabdingbar, sie materialisieren Visionen und dienen als Projektionsfläche für neue Ideen – ganz gleich, ob es sich dabei um eine Softwareanwendung, ein Produkt oder um eine Installation handelt.
Top

Gut gewürzte Projekte

Prototyping kann in jedem Designprojekt helfen, unentschlossenen Kunden eine Idee schmackhaft zu machen. Auch bei der Zubereitung eines leckeren Gerichts muss man zwischendurch immer wieder abgeschmecken und bei Bedarf nachwürzen, bevor man das Menü serviert. Entsprechend unerlässlich sind erste Erfahrungen mit einem Prototyp. Er zeigt Stärken und Schwächen eines Konzepts auf und bildet die Basis für eine anschließende Evaluation. Fällt dem Koch erst kurz vor dem Serviergang auf, dass die Suppe versalzen ist, hilft ihm diese Erkenntnis leider nicht mehr. Genauso kann das Prinzip der frühen Rückmeldung im wahrsten Sinne des Wortes projektrettend sein.

Arbeitet ein flexibles Team uneingeschränkt in freien Strukturen, kann es innerhalb des iterativen Prozesses auf jede kommende Änderung schnellstmöglich Einfluss nehmen. Dabei sollte man eine Arbeitsumgebung etablieren, die während der Kreation jederzeit Zugriff auf notwendige Ressourcen und erforderliches Wissen gewährt. Hier geben gut gepflegte Wikis wichtige Hilfestellung, denn in ihnen lassen sich gängige Praktiken dokumentieren und erläutern, um in späteren Projekten von bereits gesammelten Erfahrungswerten profitieren zu können.

In größeren Organisationen greift man auf bestimmte Abläufe oder sogar ganze Projektideen immer wieder zurück. Viele Firmen und Institutionen pflegen schon seit einigen Jahren die sogenannte »Lab«-Kultur, in der Medienlabore Raum für interaktive Entwicklung schaffen. Grundsätzlich sollte die Laborausstattung die neuesten Anwendungen und Geräte bereitstellen. Im Idealfall sind Frameworks und erste Prototypen bereits vorhanden und müssen lediglich neu implementiert werden. Nur so lässt sich eine Arbeitsumgebung schaffen, in der sich kollaborativ und interdisziplinär Prototyping betreiben lässt. Ein Beispiel dafür ist das Medienlabor der Hochschule für Gestaltung in Schwäbisch Gmünd (ig.hfg-gmuend.de). Dort stehen dem Interaction Designer – ähnlich wie dem Koch in der Küche – alle Werkzeuge zur Verfügung.
Top

Prototypen für jeden Zweck

Jede Projektphase hat ihre spezifischen Prototypen. Generell gilt: Prototypen sollen in relativ kurzer Zeit mit wenig Materialkosten ein Konzept erfahrbar machen. Somit wäre der einfachste Prototyp eine Zielformulierung, bebildert mit einer groben Skizze.

Prototyping, Tangible Desk, HfG Schwäbisch Gmünd
Erweiterte Desktop­metapher für Multitouch in Büro und Heim lautete die Zielvorstellung von Linde Böhm, Sandra Hollmichel und Julian Köhn, alle Studenten an der HfG Schwäbisch Gmünd – Name des Projekts: Tangible Desk

Generell ordnet man Prototypen nach Funktionsumfang und Funktionalität. Es gibt horizontale, vertikale und Use-Case-Prototypen. Ein horizontaler Prototyp zeigt alle Charakteristiken eines Interfaces auf, ohne in die Tiefe vorzudringen. Vertikale Prototypen bilden die volle Funktionalität ab, aber nur ausgehend von ein paar ausgewählten Punkten oder Funktionen. Beim Use-Case-Prototyp werden die benötigten Funktionen für eine Aufgabe ausgearbeitet, so erstreckt er sich in Breite und Tiefe des Projekts.

Je nach Komplexität bewegen sich Prototypen zwischen Low- und High-Fidelity. Erstere sehen in der Regel nicht besonders ansprechend aus. Bestehend aus einfachen Materialien wie Karton, Holz und Papier, lassen sie sich günstig und schnell entwickeln und leicht verändern, um in kurzer Zeit eine Vielzahl an Designs zu testen. Durch ihr grobes Aussehen lenken sie die Aufmerksamkeit zudem auf die Funktionalität, da niemand annimmt, dass sie ein finales Produkt repräsentieren.

High-Fidelity-Prototypen verwenden Materialien, die auch im finalen Produkt vorkommen können. Für softwarebasierte Prototypen würde dies bedeuten, dass ihr Aussehen glaubhaft das finale Produkt widerspiegelt. Sie eignen sich, um eine Idee zu verkaufen oder um technische Fragen zu klären. Die oft aufwendige Gestaltung lenkt jedoch von der Interaktion ab, was beim Testen Probleme bereiten kann.
Top



Prototypen von Low- bis High-Fidelity


Erstveröffentlichung dieses Beitrags: WEAVE 06.2009 / Autoren: Thomas Gläser, Markus Jaritz, Philipp Sackl


INHALT

1 Sketch
2 Storyboard
3 Papier-Prototyp
4 Digitaler Sketch
5 Simulation
6 Video-Prototyp
7 Demo-Prototyp
8 Behaviorialer Prototyp
9 Experience Prototype
10 Interaktions-Prototyp
11 Haptischer Prototyp


Sketch

Prototyping, Sketch

Eine Skizze ist der erste Schritt der Produktentwicklung. Beginnend mit dem User Research und dem Initial Idea Sketching, werden zu jedem Zeitpunkt der Ideenfindung alle Informationen und Gedankenschritte auf Papier gebannt. Letzteres sollte in dieser Phase tonnenweise greifbar sein, damit die Ideen sprudeln können. Die vollgezeichneten Blätter werden erst lose verteilt und anschließend kategorisiert. Jede Skizze verdient ihren »catchy name«, damit man im Gespräch auf sie verweisen kann. So bilden die Skizzen bereits zu Beginn des Projekts eine erste Diskussionsgrundlage und schaffen Klarheit für die anschließenden Prototypen. Auch die Studenten am Kopenhagener Institut für Interaction Design planen zunächst mit simplen Papierskizzen.
Top


Storyboard

Prototyping: Storyboard 1

Prototyping, Storyboard 2

Mehrere Skizzen, chronologisch aneinandergereiht, ergeben ein Storyboard. Dies kann unterschied-liche Funktionen erfüllen. So kann ein Experience Storyboard die allgemeine Stimmung um das zu gestaltende Objekt wiedergeben und so beschreiben, welches Erlebnis die Interaktion auslösen soll. Mit einem Scenario Storyboard lässt sich das Interfacekonzept näher ins Auge fassen, indem man den Anwendungsfall visualisiert. Und bei der Entwicklung von Webseiten und Applikationen bildet üblicherweise ein Screen Flow Storyboard alle Abläufe ab. Das Scenario Storyboard im großen Bild links entstand am Kopenhagener Institut für Interaction Design.

Das kleine Bild zeigt ein Screen Flow Storyboard von der Hochschule für Gestaltung Schwäbisch Gmünd.
Top


Papier-Prototyp

Prototyping, Papier-Prototyp

Ausgezeichnete und dazu preiswerte Materialien für erste Prototypen sind Papier und Pappe in allen erdenkli­chen Variationen. Für einen Testlauf durch erste Interfacekonzepte reichen ein Stift und ein paar Blatt Papier. In Verbindung mit einer Hardwarekonstruk­tion bietet sich hierfür Wellpappe als Material an, denn sie ist leicht verformbar und überall erhältlich. Mit etwas Glück ist ein Verpackungsunternehmen in der Nähe ansässig, das ein paar Reste verschenkt. Paper Prototyping ist nach dem Storyboard der günstigste Schritt und liefert erste funktionierende Prototypen, mit denen sich bereits Benutzertests durchführen lassen. Im Bild sieht man einen Hardware-Papierprototyp, der am Kopenhagener Institut für Interaction Design gebaut wurde.
Top


Digitaler Sketch

Prototyping, Digitaler Sketch 1 und 2

In fast jeder Projektphase gelangt man früher oder später an den Punkt, an dem die weiteren Schritte am Computer gefertigt werden. Dabei bilden erste Layouts in den gängigen Grafiktools eine detaillierte Basis für einzelne Screen­­designs, die – verglichen mit den Handskiz­zen – um einiges komplexer ausfallen. Mit digitalen Sketchingwerkzeugen lassen sich rohe Screen­layouts und interaktive Prototypen für Interface-Design-Konzepte erstellen.

An der University of Washington verfolgt man inzwischen den Ansatz, die gesamte Webseitenentwicklung vom Papier auf den Computer zu verlagern: So lässt sich mit dem Zooming User Interface DENIM jeder Schritt von der ersten Skizze bis zur detaillierten Seitenaufteilung in einem Dokument verwal­ten. Dabei schafft die auf Stift- oder Toucheingabe ausgelegte Benutzer­­ober­fläche lediglich einen digitalen Rahmen für das gute, alte Sketchen auf Papier.

Die Baukastenwerkzeuge Balsamiq und pidoco° ersetzen dagegen Sketching durch das Herumschieben vorgefertigter Elemente – ein Vorteil, wenn komplexe Layouts stetig adaptiert werden sollen. Solche Layouts lassen sich jedoch auch in einfachen Grafikpro­grammen umsetzen, man muss dafür kein eigenes Tool erwerben. Oben eine Nightlife-Website von der UIDesign Group, unten ein Entwurf für den Community Almanac vom The Open Planning Project.
Top


Simulation

Prototyping, Simulation, Touchtable, Fuß

Um einen schnellen Überblick über die Vorzüge einer Anwendung zu schaffen, muss eine Simulation – anders als bei einem interaktiven Demonstrations­aufbau – keine zeitaufwendige Programmierung durchlaufen. Je nach Projektplan lässt sich damit in einer Zwischenpräsentation den Verantwortlichen und möglichen Benutzern ein Eindruck vermitteln. Dabei veranschau­li­chen ausgewählte Abläufe die diversen Funktionen. Allerdings sollte man das komplete Prozedere perfekt einstudieren, damit die Illusion entsteht, es handle sich um eine lauffähige Anwendung – und wer wollte nicht schon immer einmal David Copperfield spielen?

Für eine derartige Präsentation gibt es mehrere Möglichkeiten. Entweder spielt man einfach ein Video vom Interface ab, und der Darsteller führt die dazu einstudierten Bewegungen aus. Für mehr Flexibilität kann ein Assistent das Video an passenden Stellen pausieren lassen, oder der Darsteller steuert es selbst.

Im Falle der Simulation des »Photoshop MT«-Konzepts, das in Zusammenarbeit mit Jens Franke und Wera Reinhardt an der HfG Schwäbisch Gmünd entstand, wurde eine Simulation in Flash aufgebaut. Die Steuerung funktionierte über zwei kleine Fußpads für »vor« und »zurück«. So konnte der Vorführer jede Interaktion selbst auslösen.
Top


Video-Prototyp

Prototyping, Video-Prototyp

Erlaubte die Grafikpower der Rechner in den Neunzigern noch keine Transformationen der Interface-Elemente, kommen moderne Interfaces heute kaum mehr ohne Animation aus. Einzelne Screens lassen sich nicht mehr autark betrachten. Es sind gerade die Übergänge zwischen den Zuständen, die zum Verständnis der Struktur beitragen. So ist es konsequent, bei der Entwicklung eines Prototyps Einzelbilder möglichst rasch in bewegte Bilder umzuwandeln. Der Designer entscheidet selbst, ob er eine einfache Grafikanimation, Stop-Motion, Videofilm oder eine 3-D-Animation einsetzt.

In einem von Mareike Graf geleiteten Kurs an der HfG Schwäbisch Gmünd entstand der Kurzfilm »ami – folding the future«. Dort zeigen Marc Osswald und Jakob Konrad in einem Zukunftsszenario die Interaktions­möglichkeiten faltbarer Displays. Durch seine feinere Ausarbeitung wird der Fokus weniger auf die Bedienung des Geräts als vielmehr auf das geschaffene Szenario gelegt. Mit Prototypvideos lassen sich komplette Abläufe schon früh detailliert ausgestalten. Damit kann man eine Idee auch ohne den Aufwand einer interaktiven Gestaltung verständlich präsentieren. Dank öffentli­cher Videoportale sind solche Proto­typen zudem einfach zu verbreiten.
Top


Demo-Prototyp

Prototyping, Demo-Prototyp

»Erkläre es mir, und ich werde es ver­gessen. Zeige es mir, und ich werde mich erinnern. Lass es mich selber tun, und ich werde es verstehen.« Wie schon Konfuzius sagte, verläuft der Königsweg des Begreifens über das eigene Tun. Aus diesem Grund besteht der überzeugendste Prototyp aus der funktions­fähigen Demonstration entscheidender Teile des finalen Produkts. Nachdem wir die Möglichkeiten der Prototypenaus­gestaltung aufgezeigt haben, gilt es nun noch, die Frage zu klären, welche Ziele man damit verfolgt und worauf man während der Entwicklung besonders Wert legt. Soll die viel zitierte User Experience im Vordergrund stehen oder eher die Art des Feedbacks begutachtet werden?

An dem von Christian Perstl und envis precisely entworfenen Multitouch-Software-Prototyp für das Designportfolio »Molecule MT« wird sichtbar, wie leicht sich die Interaktion mit der Anwendung am Gerät selbst erleben lässt. Im Gegensatz zu Skizzen und Videos regt dieses Demo dazu an, das Interface spielerisch zu erfor-schen – etwa beim Betrachten von Design-arbeiten, die sich in ihrer vieleckigen Form aus Atomen zusammensetzen. Diese stehen für diverse Designs und definieren so die Ausrichtung einzelner Projekte.
Top


Behaviorialer Prototyp

Prototyping, Behaviorialer Prototyp

Gerade in Systemen, bei denen Bewegung und Verhalten der einzelnen Elemente eine zentrale Rolle spielen, möchte man oft die Handlungsweise dieser Komponenten gesondert beurteilen. Dies ist insbesondere bei generativen Installa­tionen wie der »Bugworld« essenziell, 2007 entstanden im User-Interface-Design-Kurs der Fachhoch­schule Joanneum in Graz. Hier wurde das Verhalten eines oder mehrerer Käfer zunächst mit einfachen Rechtecken getestet. Auch wenn noch keine grafische Gestaltung vorhanden war, gab dies Aufschluss über wichtige Parameter, ohne sich zu sehr in Details zu verlieren. So wurden in erster Instanz einfache Kästchen animiert, um zu ver­folgen, wie sich die einzelnen Objekte im System verhalten. Ein Detaildesign ist hier zunächst nicht wichtig, da der Fokus auf den parameterbasierten Charakteristiken liegt.

In dieser Entwicklungsphase bildet man typischerweise auch eine Vielzahl von Hilfsmitteln ab. Im Falle der »Bugworld« gab es Indikatoren für Sichtradius, Richtung und Zielposition, die durch weiße Hilfslinien visualisiert waren, damit man nachvollziehen konnte, wie sich Änderungen am Code auf das Verhalten von Käfern und Pflanzen auswirkten. Nicht selten kommt es vor, dass solche Details es bis in die Endversion schaffen, da sie sich als äußerst nützlich erweisen.
Top


Experience Prototype

Prototyping, Experience Prototype

Während man im Interface Design auf klassische Usability-Kriterien wie Effektivität, Effizienz, Einprägsam­keit, Erlernbarkeit oder Fehlerrate achtet, reichen diese bei interakti­ven Installationen nicht aus, um die Qualität zu beurteilen. Hier ist vor allem das Nutzervergnügen ein entscheidender Faktor – von Computational Artist Zach Lieberman auch als »Open Mouth Phenomenon« bezeichnet.

In einem Spielkonzept namens »Magic Carpet«, das envis precisely gemeinsam mit Isabella Thaller erarbeitete, sollte mit möglichst geringem technischem Aufwand der Spaßfaktor getestet werden. Dazu klebten wir mit Klebeband eine teppichgroße Fläche ab und benutzten zwei Taschenlampen, um Kreise auf den Boden zu projizieren. Der eine Kreis folgt dem Benutzer, der den anderen Kreis fangen muss. Dabei filmten wir die Testpersonen, um anschließend ihre Reaktionen zu beurteilen. Lautes Schreien und Kichern vermerkten wir innerhalb einer »Spaßskala« als positiv. Ein aus­gesprochen heiteres Testverfahren.
Top


Interaktions-Prototyp

Prototyping, Interaktions-Prototyp

Auf der ewigen Jagd nach einer Alternative zu Maus und Tastatur gilt es moderne Benutzerschnittstellen zu erschaffen, deren Interaktionsmöglichkeiten den Anforderungen der Anwendung Rechnung tragen. Wie kann zum Beispiel eine Eingabe für ein Interface aussehen, mit dem man Wissen anschaulich vermit­­teln will? Bei der Interactive-Installation »Tiefsee« von Andreas Burghart, Christian van Elten und Felix Hohl können Besucher mit einem alten Drehrad ein U-Boot virtuell ins Meer abtauchen lassen. Für das Projekt griffen die Studenten auf Baumarktprodukte wie Metallrohre und -gitter zurück.

Stößt der Besucher auf einen Fisch, spürt er die Plattform vibrieren. Ein lauter werdender Rauschton verdeutlicht außerdem den enormen Druck in bis zu 10 000 Metern Tiefe. Für das hap­­tische Feedback kam ein Bodyshaker zum Einsatz – ein Körperschallgenerator, der einen fühlbaren Bass erzeugt, den man im Idealfall nicht hört. Den Rauschton erzeugte ein Subwoofer, dessen Lautstärke über Y-Mauskoordinaten reguliert wird. Auf diese Weise erzeugten die drei mit geringem Materialaufwand einen eigenständigen Prototyp, der auf klassische Eingaben verzichtet und somit ein neues Bediengefühl vermittelt.
Top


Haptischer Prototyp

Prototyping, Haptischer Prototyp

Bei Hardware-Prototypen ist es sehr wichtig, den Aufbau nicht nur zu sehen, sondern auch zu fühlen. Für die Beur­teilung einer Interaktion wird der Tastsinn immer wieder unterschätzt. Benedikt Burgmaier und Julia Stäbler entwickelten in Zusammenarbeit mit dem Forschungs­team haptICS, bestehend aus Götz Wintergerst und Ron Jagodzinski, eine spezielle Testreihe für Drehregler, da diese oft eine gute Alternative zur herkömmlichen Bedienung technischer Geräte darstellen. Ziel war es, den optimalen Regler zu bauen und ein – im Hinblick auf hap­tisches und akustisches Feedback – passendes Interface zu entwerfen.

Das Projekt gliederte sich in mehrere Teilbereiche: Zuerst suchte man verschie-denste Geräte, die Drehregler verwenden, und testete sie auf mögliche Parameter wie Drehwiderstand, Geräusch, Haptik, Geschwindigkeit oder Mapping. Nach der Sammlung konstruierte man diverse Widerstände aus unterschiedlichsten Materialien wie Aquariumschlauch, Plastikstreifen, Milchglas, Lochblech, Dreiecksplastik und Neusilber, um harmonische Reglerreihen mit sechs Abstufungen von weich bis hart zu gewährleisten. Zum Schluss erstellte man ein simples Interface, das eine verständliche Menünavigation mittels Drehreglern abbildet.
Top