Incom ist die Kommunikations-Plattform der Fachhochschule Potsdam

In seiner Funktionalität auf die Lehre in gestalterischen Studiengängen zugeschnitten... Schnittstelle für die moderne Lehre

Incom ist die Kommunikations-Plattform der Fachhochschule Potsdam mehr erfahren

Level - Prototyp eines Partytrackers

Die folgende Dokumentationen soll die Entwicklung eines Prototypen verdeutlichen, den ich in einem Satz so beschreiben würde:

Eine App die minütlich anonyme Proben von Umgebungsgeräuschen aufnimmt und versucht duch Veranstaltungsdatenbanken zu interpretieren um den Party-Ist-Zustand der Nacht abzuzeichen.

Kursbeschreibung

Der Kurs vermittelt theoretische und praktische Grundlagen, eigene Konzepte in kurzer Zeit effizient als mobile Prototypen zu realisieren. Wenn Skizzen und Wireframes an ihre Grenzen stoßen, die eigenen (App-) Ideen verständlich an Kunden, Teamkollegen oder Andere zu vermitteln, dann helfen digitale Prototypen zu überzeugen und zu begeistern. Sie ermöglichen die Darstellung von Animationen, Navigations- oder Interaktions-Konzepten und geben dem Betrachter die Möglichkeit die App selbst zu testen. Anhand eines praktischen Projektes lernen und erarbeiten die Studenten die notwendigen Grundlagen vom Konzept bis zum interaktiven Prototypen. In mehreren Iterationen werden die Prototypen evaluiert. Wir starten mit nicht code basierten Tools, die Basis-Animationen ermöglichen und Navigationsstrukturen erfahrbar machen. Der Schwerpunkt im Laufe des Kurses wird auf framerjs (und CoffeeScript) liegen, die einen schnellen und einfachen Einstieg ins Programmieren und die Entwicklung dynamischer Prototypen erlauben. Das Projekt wird für mobile Endgeräte konzipiert - generell lassen sich aber später mit framerjs auch Prototypen für Desktop Applikationen gestalten.

Das Projekt und meiner Erwartungen

Ich habe von diesem Kurs einen Einstieg ins App-Design erwartet. Vor diesem Kurs hatte ich mich noch nie aktiv mit App-Design oder Prototyping beschäftigt, allerdings hatte ich einige Erfahrungen im Webdesign gemacht die mir hier helfen konnten.

Laut Pierre's Vorgaben sollten wir einen App-Prototypen entwickeln der sich mit irgendeiner Art von Veranstaltungen befasst und zugleich monetarisierbar ist. Diese Apps sollten Ihre Daten möglichst von anderen Medien erhalten, wir sollten also keine Plattformen entwickeln die sich auf user user-generated content stützen.

Da ich seit zwei Jahren selbst Techno-Events organisiere habe ich mich schnell auf Ideen zu Party bzw. Konzert Apps festgelegt.

RECHERCHE

Bildschirmfoto 2016-03-10 um 00.58.32.pngBildschirmfoto 2016-03-10 um 00.58.32.png

Für mich gab es in den letzten Jahren zwei Systeme die mir das Feiern erleichtert haben:

  1. [Restrealität](https://www.restrealitaet.de/rr/index.html „Restrealität“) Eine geschlossene auf Berlin beschränkte Community. Hier wird Szene-Intern für Veranstaltungen geworben. War vor allem beliebt, da es immer Informationen zu aktuellen Illegalen Raves gab, man konnte aber auch immer an der Beteiligung in den Strängen sehen welche Partys gerade besonders beliebt und gut besucht sind. Mittlerweile eher ein Artefakt früherer Tage.

  2. Facebook. Kennen wir alle. Ab jetzt konnte jeder Partys ohne großen Aufwand publik machen. Das System der Facebook-Events hat sich schnell gegenüber den klassischen Medien durchgesetzt, da fast alle bei Facebook sind und man so (theoretisch) genaue Angaben über die Teilnehmerzahlen erhält. Hier zeichnen sich schnell trends ab, also welche Partys Interesse wecken, allerdings sind diese Zahlen oft weit von der Realität entfernt. Das mag mit Schmummeleien der Promoter zutun haben aber meistens tickt die Schwarmintelligenz im Internet auch einfach anders als auf der Straße. Außerdem ist Facebook furchtbar breit gefächert und Veranstaltungen findet man hauptsächlich durch Einladungen.

Wie können wie nun aus diesen Erfahrungen lernen und ein System für die Mobile Jugend entwickeln?

Ein neues innovatives System für Techno-Partys sollte meiner Meinung nach folgende Kriterien erfüllen:

  • Enge Zielgruppen. Lieber Lokal anstatt International.
  • Nur Veranstaltungen die ihren Fokus auf Musik haben.
  • Auch Spontane Partys bzw. Illegale werden sichtbar.
  • Es sollte ein genaues Bild der aktuellen Lage zeichen.
  • Verfälschungen durch Promoter sollen erschwert werden.
  • Natürlich sollte alles möglichst schlicht verpackt und intuitiv zu bedienen sein.

Konzept

Musikerkennungsdienste wie Shazam haben mich auf die Idee gebracht, dass man durch Geräuschproben feststellen könnte wo in der Stadt gerade Partys stattfinden. Eine App würde dann in regelmäßigen Abstanden Stichproben nehmen, diese durch einen Algorithmus bewerten und die Ergebnisse zusammen mit einem Geo-Tag in die Cloud senden. Durch diese Proben ließe sich dann, in Echtzeit, eine Karte für alle User der App zeichnen, die die aktuellen Party-Brennpunkte aufzeigt. Diese Hotspots könnten dann mithilfe des Ortungsdaten einzelnen Festivitäten oder Clubs zugeordnet und mit Informationen zu den aktuellen Veranstaltungen versehen werden.

Damit würden dann nicht nur gut besuchte Clubs deutlich, sondern auch Veranstaltungen die sonst aus dem Raster fallen, wie zum Beispiel WG-Partys oder Raves. Man könnte, wenn man abenteuerlustig ist, genau diese Unbekannten ausfindig machen und mitfeiern.

Besonders wichtig sind mir hier die Privatsphäre , deswegen werden die Proben auf dem Smartphone bereits ausgewertet und die Daten werden anonym an den Server gesendet, damit keine Bewegungsprofile erstellt werden können.

Algorithmus = Lautstärke x n x Musik(j/n)

Lautstärke der aufgenommen Proben mal der Anzahl der Proben an diesem Ort (verschiedener User). Falls nicht als Musik erkannt wird die Probe ungültig*

Zum Leben erweckte erste Skizzen

Skizze2.jpgSkizze2.jpg
Skizze1.jpgSkizze1.jpg

Innerhalb des Kurses haben wir uns mit verschiedenen Tools zum erstellen von Prototypen beschäftigt. Eine App hierzu die mir auf anhieb gut gefallen hat ist POP, im prinzip verbindet man seine Skizzen nur digital zu einem Prototypen. Das geht erstaunlich schnell und macht freude.

Hier der erste Klick-Prototyp.

Personas und Szenarien

6 copy 2LEVEL_KEYNOTE.pdf PDF 6 copy 2LEVEL_KEYNOTE.pdf
6 copyLEVEL_KEYNOTE.pdf PDF 6 copyLEVEL_KEYNOTE.pdf
6 copy 3LEVEL_KEYNOTE.pdf PDF 6 copy 3LEVEL_KEYNOTE.pdf
6 copy 4LEVEL_KEYNOTE.pdf PDF 6 copy 4LEVEL_KEYNOTE.pdf

Aufbauend auf unsere ersten Ideen und Skizzen sollten wir Personas und Nutzungs-Szenarien entwickeln. Dabei ist mir aufgefallen wie die Echtzeit-Abbildungen von Daten abhängig von der Uhrzeit der Nutzung macht. Am frühen Abend müssten man wahrscheinlich auf Daten der letzten Tage zurückgreifen und den Nutzer müsste darauf Aufmerksam gemacht werden.

Kritikpunkte:
1. Misst nur Lautstärke-Werte
2. Kann zuviel auf einmal (Wollsauschwein) 3. Benötigt großen Pool an Usern

Meine Lösungen: 1. Prüft ob es sich um Musik handelt 2. Bewertungsmechanismen gestrichen 3. Dieses Problem ließe sich nur Indirekt lösen, ich wollte es daran aber nicht scheitern lassen.

Die ersten Screens

iPhone-5S-3-colors-Mock-up.jpgiPhone-5S-3-colors-Mock-up.jpg

Am Anfang habe ich mich am längsten damit beschäftigt einen schönen Methode zur Markierung von Werten auf der Karte zu finden. In dieser Version waren es noch spitze Haken, die ich mir nett zu animieren vorgestellt hatte.

Principle-Prototyp

Level_principle_GIF_quadrat.gifLevel_principle_GIF_quadrat.gif

Übergehend zu den ersten animierten Prototypen habe ich mich für eine dunkle Oberfläche in Anthrazit und Rot entschieden, da die App hauptsächlich Nachts genutzt werden und dadurch die Augen schont. Die Markierungen auf der Map habe ich durch diese leicht flackernden Punkte ersetzt, da sie vor allem beim scrollen stimmiger aussehen und weniger kleinteilig wirken.

Das arbeiten mit Principle als Alternative zu Framer hat mir viel spaß gemacht, da Ergebnisse sehr schnell sichtbar wurden und Übergänge extrem einfach zu erstellen sind, im Vergleich zu Framer.

Framer Prototyp

Der fertige Framer-Prototyp [](http://share.framerjs.com/5m360x0nd2y8/ „Framer Prototyp“)

Im letzten Iterationsschritt, in Framer-Studio, habe ich einen zum Rest passenden animierten Introscreen entwickelt. Die Listenansicht in Coffeescript geschrieben und Übergänge hinzugefügt.

Fazit

Meine Erwartungen an den Kurs wurden nicht enttäuscht, er gab mir einen Einblick in die Welt der verschiedenen Prototyping-Tools und App-Design im allgemeinen. Die intensive Beschäftigung mit Framer Studio hat meine Liebe zum arbeiten mit Code wieder aufflammen lassen. Besonders Gefallen haben mir Pierres Einblicke in den Studio-Alltag und worauf der Fokus dort bei der Bewältigung ihrer Projekte liegt. Sehr Interessant! Vielen Dank.

Persönliche Reflexion

Ich habe mich von Anfang an gegen die Kritik gestellt, dass das Konzept nicht funktionieren wird da sie zu viele User benötigt. Ich habe stur diese Idee weiterentwickelt, da sie mir interessant erschien und ich daraus mehr als eine bloße Fingerübung machen wollte. Ich wollte etwas ganz neues schaffen.

Ich glaube auf den weg zum Finalen Prototypen sind mir noch auch noch einige gute Ideen gekommen, wie die Erkennung der Musik anstatt nur der Lautstärke aber ich müsste wohl noch mehr Überzeugungsarbeit leisten und das Konzept weiter ausarbeiten.

In dem Prototypen sind mir ein paar schönen Animationen gelungen, auch wenn er noch eindeutige Makel aufweist:

  • Keine Filteroptionen in der Listenansicht/Karte
  • Kein Tutorial oder Tooltips
  • Karte ist wenig Interaktiv
  • nicht alle Animationen sind rund

Ich hätte vermutlich ein besseres Ergebnis erhalten, wenn ich von an Anfang besser ausgearbeitete Screens erstellt und weniger darauf bedacht gewesen wäre neue Wege zu gehen.

Bei der Arbeit mit Framer habe ich mich oft in Details und den Blick für das Ganze verloren habe auch dort hätten mir besser durchdachte Screens sehr geholfen, Ich bin mit den Ergebnis nicht sonderlich zufrieden, dennoch habe ich einiges für die nächsten Apps und Prototypen gelernt und ich bin ein wenig stolz, dass ich bei der Idee geblieben bin, die mir von Anfang an am meisten Spaß gemacht hat, auch wenn ich dadurch auf einige Probleme gestoßen bin.

Ein Projekt von

Fachgruppe

Interfacedesign

Art des Projekts

Studienarbeit im ersten Studienabschnitt

Betreuung

foto: Pierre La Baume

Zugehöriger Workspace

Software Interfaces: App Prototypen Entwicklung

Entstehungszeitraum

Wintersemester 2015 / 2016

Keywords