App InventorS: Teil 2|3 – Design

Im ersten Beitrag dieser Digezz-Reihe ging alles rund um das Thema Konzeption einer App. Wie aber geht es nun mit dem Entwickeln der WatchList-App weiter? Die nächsten Schritte sind das Screendesign und das Prototyping.

Prototyp kommt vom griechischen protos, “der Erste” und typos, “Urbild, Vorbild”. Genau das ist auch unser Prototyp: Er bildet für uns die Basis zur Weiterentwicklung der App. Die Aufgabe im Prototyping liegt darin, einen visuellen Prototypen für die App zu erstellen. Wir unterscheiden hier zwischen dem Low-Fidelity und dem High-Fidelity Prototyping.

Low-Fidelity Prototype (Paper Prototype)

Beim Low-Fidelity Prototypen liegt der Schwerpunkt auf der einfachen Erstellung von einem Screen Design. Hier sind Formen und Farben noch nicht wichtig, es geht vor allem um die Anordnung der Elemente. Um die Benutzerfreundlichkeit unserer App zu testen, haben wir eine aussenstehende Probandin, Rahel Vetsch, gebeten, unseren Prototypen zu testen. In unserem Falle ist es ein Prototyp aus Papier.

Screendesign

Vom Papier auf den Bildschirm: Wie wird die App später aussehen? Das Screendesign zeigt eine pixelgetreue, statische Umsetzung des Designs der App.

High-Fidelity Prototype

Nach dem Low-Fidelity Prototypen und dem Screendesign geht es nun zum High-Fidelity Prototypen. Der High-Fidelity Prototyp soll bereits einsehr genaues visuelles und dynamisches Abbild unserer späteren App zeigen.

Auch hier wurde unser Prototyp von Rahel Vetsch getestet.

Do it Yourself

    • Für alle iPhone-User unter euch: Ladet euch die Keynote-Datei herunter. (Dafür benötigt ihr die Keynote-App!)
    • Für alle nicht-iPhone-User: Ladet euch das PDF herunter.
    • Keine Lust? Dann schaut es euch direkt hier an:

prototype_watchlist

Im nächsten – finalen – Teil unserer Digezz-Reihe geht es an die Umsetzung der App, also ans Programmieren. Bleibt gespannt…

Kritik
von Rahel Weibel und Tobias Balmer

Die Umsetzung

Low-Fidelity-Prototyp | Die Zeit sollte hier eher kurz gehalten werden. Der Paper-Prototyp ist eher für den Design-Prozess, als für das Testing geeignet. Genaueres kann in diesem Artikel dazu gelesen werden. Leider haben wir ihn erst später entdeckt.

Screendesign | Das Umsetzen des Screendesigns verlief ziemlich reibungslos, da wir schon Erfahrungen mit dem Screendesignen hatten.

High-Fidelity-Prototyp | Es gibt diverse Tools zum Umsetzen eines Prototyps: Marvel, Keynote, Powerpoint und sogar Adobe After Effects. Für die Umsetzung haben wir uns schlussendlich für das Programm Keynote entschieden. Keynote bietet verschiedene Möglichkeiten, an welche man vielleicht gar nicht denkt. Dazu ein Video. Aufgefallen ist uns ein Nachteil von Keynote, und zwar die fehlende Möglichkeit das natürliche Scroll-Verhalten nachzubilden.

Testing | Bei den Filmen hätte natürlich deutlich mehr rausgeholt werden können — uns ging es aber in erster Linie um den Inhalt und nicht um die Filmqualität.

Erkenntnisse

Auch dieser Teil, das Screendesign und das Prototyping, war zeitintensiv. Dennoch ist es ein wichtiger Bestandteil, welcher unverzichtbar ist. Dank des Prototype-Testing konnten wir ein paar Fehlerquellen ausfindig machen, und diese eliminieren, bzw. ändern.

Wenn man — so wie wir — noch nie eine richtige App entwickelt hat, weiss man auch nie so recht, ob man auf dem richtigen Weg ist. In einem Theorieteil vom Fach Interaktive Medien bei der Dozentin S. Bosiers behandelten wir dann aber unter anderem genau das Thema (Low-Fidelity und High-Fidelity Prototyping), was uns folglich auch bestätigte, dass wir auf dem richtigen Weg waren.

Keine Kommentare

Schreibe einen Kommentar