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

«Human-Computer Interaction Design» EASY JAM

«Human-Computer Interaction Design» EASY JAM

Ergebnisse des Kurses «Human-Computer Interaction Design» von Prof. Dr. Frank Heidmann.

Der Grundkurs zum Thema Human-Computer Interaction Design führte uns in die theoretischen, methodischen und praktischen Grundlagen der Mensch-Computer Interaktion und der verwandten Themen Human-Centered Design, Usability Engineering & User Experience Design ein.

In dem Kurs setzten wir uns als Ziel, sich genauer mit dem Vorgang eines Prototyps zur spontanen Gründung von Jam Sessions im urbanen Lebensraum zu entwerfen.

Einleitung

Nach vermittelter Theorie ging es an die Bestandsaufnahme. Mein Projektpartner Daniele Maselli und ich entschieden uns für eine Woche nicht mit einander über etwaige mögliche Projekte zu sprechen und stellten uns unsere Projektideen in der kommenden Woche vor.

Erstaunlicherweise empfanden wir beide, dass der Applikation Markt hinsichtlich Musik-Apps die zu Organisation dienen und Menschen zusammen bringen, noch nicht gesättigt ist und es uns beiden am Herzen lag dieses Problem aus der welt zu schaffen.

Eine kurze Bestandsaufnahme von Apps oder In-App-Websiten brachte uns zu folgendem Ergebnis:

Viele Umsetzungen sind kompliziert und unübersichtlich, zu dem kommt hinzu, dass einige Organisatoren die Applikation im Zeitalter von IoT und Industrie 4.0 äußerst restriktiv gestalten und auf bestimmte Betriebssystem oder gar Browser beschränken, z.B. Windows gepaart mit dem Internet Explorer.

All dies spiegelt jedoch nicht die momentane Nachfrage wider. Eine kurze Vorstellung unserer Gedankengänge bei den Kursteilnehmern und Prof. Dr. Frank Heidmann fand Anklang.

Bildschirmfoto 2017-09-21 um 09.04.04.pngBildschirmfoto 2017-09-21 um 09.04.04.png
Bildschirmfoto 2017-09-21 um 09.04.47.pngBildschirmfoto 2017-09-21 um 09.04.47.png
Bildschirmfoto 2017-09-21 um 09.04.35.pngBildschirmfoto 2017-09-21 um 09.04.35.png
Bildschirmfoto 2017-09-21 um 09.04.42.pngBildschirmfoto 2017-09-21 um 09.04.42.png
Bildschirmfoto 2017-09-21 um 09.05.10.pngBildschirmfoto 2017-09-21 um 09.05.10.png
Bildschirmfoto 2017-09-21 um 09.04.55.pngBildschirmfoto 2017-09-21 um 09.04.55.png
Bildschirmfoto 2017-09-21 um 09.04.19.pngBildschirmfoto 2017-09-21 um 09.04.19.png

Persona-Erstellung

Nach der ersten Präsentation ging es in erster Linie um die Erstellung von Persona. Im Kurs selbst unterschieden sich die Persona Erstellung hinsichtlich des Schwerpunkts auf quantitative oder qualitative Forschung. Wir entschieden uns für letztere und erstellten 3 aussagekräftige Persona unter der Prämisse, dass alle drei Personen real sind und somit sogar ein Interview zu Stande kam.

Bildschirmfoto 2017-09-21 um 09.28.30.pngBildschirmfoto 2017-09-21 um 09.28.30.png
Bildschirmfoto 2017-09-21 um 09.28.36.pngBildschirmfoto 2017-09-21 um 09.28.36.png
Bildschirmfoto 2017-09-21 um 09.28.23.pngBildschirmfoto 2017-09-21 um 09.28.23.png

Bildschirmfoto 2017-09-21 um 09.28.53.pngBildschirmfoto 2017-09-21 um 09.28.53.png
Bildschirmfoto 2017-09-21 um 09.28.48.pngBildschirmfoto 2017-09-21 um 09.28.48.png
Bildschirmfoto 2017-09-21 um 09.28.42.pngBildschirmfoto 2017-09-21 um 09.28.42.png

Bildschirmfoto 2017-09-21 um 09.29.06.pngBildschirmfoto 2017-09-21 um 09.29.06.png
Bildschirmfoto 2017-09-21 um 09.29.13.pngBildschirmfoto 2017-09-21 um 09.29.13.png
Bildschirmfoto 2017-09-21 um 09.29.01.pngBildschirmfoto 2017-09-21 um 09.29.01.png

Erste Wireframes und Konsultation

Diese Nutzerszenarien waren die Rahmenbedingungen für unser Testdesign:

Wie in der Theorie vermittelt wurde, gab es viele Punkte auf die wir beim Testing geachtet haben. Richtige Vorstellung, konstante und korrekte Führung durch den Test, Protokollierung, Dokumentierung und Auswertung. Außerdem ist es dabei wichtig, nur so wenig Hilfestellung wie möglich zu geben bzw. keine Begriffe zu verwenden, die im Interface vorkommen, um die Lösung der Aufgabe nicht vorwegzunehmen.

Die Wirframes bezogen sich auf die Nutzerszenarien:

Account-Erstellung

Erster Umgang mit der Map

Genre-Auswahl

iPhone 7 Copy 2.pngiPhone 7 Copy 2.png
iPhone 7 Copy 3.pngiPhone 7 Copy 3.png
iPhone 7 Copy.pngiPhone 7 Copy.png
Mapping_2.pngMapping_2.png
iPhone 7.pngiPhone 7.png
iPhone 7 Copy 4.pngiPhone 7 Copy 4.png
Mapping_1.pngMapping_1.png

Weiterentwicklung

Nach mehreren Gruppen-Konsultationen innerhalb des Kurses und Rücksprache mit Daniele verabschiedeten wir uns von einigen Grundfunktionen und beschränkten uns auf das Hauptaugenmerk der Applikation, welches wir uns am Anfang des Kurses gesetzt hatte:

Musiker finden einfach zu einander Publikum findet einfach zu Musikern

Icon Set

Das die Authentizität einer App mit den Details steht und fällt haben wir im Kurs gut aufgenommen - so entschieden wir uns ein eigenes Icon-Set zu entwerfen, welches später dazu dienen sollte einen erleichterten Umgang mit der Genre und Instrumenten Auswahl zu ermöglichen.

Element 2.pngElement 2.png
Element 5.pngElement 5.png
Element 6.pngElement 6.png
Element 7.pngElement 7.png
Element 3.pngElement 3.png
Element 4.pngElement 4.png
Element 8.pngElement 8.png
Element 9.pngElement 9.png

Logo Entwicklung

Mit zunehmender Ausarbeitung und Konsultationen und Gesprächen im Kurs empfanden wir es als richtig der ganzen fiktiven Applikation einen Namen und ein Logo-Konzept zu entwickeln.

So entschieden wir uns für EASY JAM.

logo2.pnglogo2.png

Harmony - Nearby - Add New Spot Copy.pngHarmony - Nearby - Add New Spot Copy.png
Home.pngHome.png
Harmony - Discover - Main Copy 3.pngHarmony - Discover - Main Copy 3.png
Maps.pngMaps.png
Harmony - Nearby - Add New Spot.pngHarmony - Nearby - Add New Spot.png
Harmony - Discover - Main.pngHarmony - Discover - Main.png
Harmony - Discover - Main Copy 2.pngHarmony - Discover - Main Copy 2.png
Maps Copy.pngMaps Copy.png
Profile.pngProfile.png
Harmony - Login.pngHarmony - Login.png

Abschlusspräsentation und Ausstellungsmaterial für die Werkschau

Die Abschlusspräsentation erfolgt durch ein Poster für die Jährliche Werkschau an der FH Postdam.

Das Info Poster beschreibt ein visuelles Szenario, in dem sich die dort beschriebenen Personas ein gemeinsames Ziel teilen und sich für die kommende Veranstaltung zusammenfinden. Die Veröffentlichung der Jamsession basiert auf die musikalische Präferenz des Veranstalter. In diesen Fall sucht die jeweilige Person einen Rocksänger/in. Das Publikum erreicht die Veranstaltung mit Hilfe von Musikalischen Filtern und ein dashboard, wo alle Jamsession im umkreis angezeigt werden basierend auf die eigene Einstellungen der App.

final2.pngfinal2.png

Fazit

Der Kurs HCI hat mit seinen Vorlesungen für sehr verschiedene Ausblicke gegeben in welche Richtung UI und UX führen kann.

Im verlauf des Kurses hat sich das Konzept der App immer weiter entwickelt und entspricht der musikalischen Realität, die in Berlin geschieht.

Das Problem der Jamsession kann gelöst werden mit einer intimeren und Private Kommunikation zwischen Musikern und mit dem Ergebnis eines Publikums der eine bestimmte Art von Musik folgt. Die Gestaltung der App muss verbessert werden mit Hilfe von icons die denn Musikalischen Kategorien entsprechend. Das visuelle Verständnis ist im diesen fall sehr wichtig da die Auswahl sehr breit ist.

Fachgruppe

Interfacedesign

Art des Projekts

Studienarbeit im ersten Studienabschnitt

Betreuung

foto: Prof. Dr. Frank Heidmann

Entstehungszeitraum

Sommersemester 2017