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

UNIMAP

Eine Touch-App zum Auskundschaften von Deutschlands Design-Hochschulen.

titelbild_2.jpgtitelbild_2.jpg

AUSGANGSLAGE

Hochschularten, Studiengänge, Studienabschlüsse sowie Zulassungsbedingungen machen in ihrer Vielfalt die Entscheidung für das richtige Studium oft schwer. Am Anfang stellen sich dann meistens schwierige Fragen wie:

„Was möchte ich werden?“ „Wo kann ich überall Design studieren?“ „Welche Designrichtung steht im Schwerpunkt der Hochschule?“ „Wo muss ich Studiengebühren zahlen und wo nicht?“ „Welche Verbindungen gibt es zu Hochschulen im Ausland?“ „Welcher Studienort befriedigt all meine Vorlieben und Bedürfnisse?“ kurz: „Welche Möglichkeiten habe ich?“

Unsere Motivation besteht darin für den Bereich der Design- und Kunsthochschulen Deutschlands den Studierenden und potentiellen Neuzugängen unter den vielen unübersichtlichen und überladenen Studiengangs- und Hochschulverzeichnissen eine einfach verständliche, zugängliche und übersichtliche Oberfläche zu bieten, auf welcher jeder Interessierte ganz individuell seine Hochschule und zusätzlich die jeweiligen Partnerhochschulen finden kann.

LÖSUNGSANSATZ

EINFÜHRUNG Ziel der Arbeit sollte es sein, eine Applikation zu schaffen, welche es einer breiten Menge an Menschen ermöglichen soll, sich durch die Landschaft von Deutschlands Design-Hochschulen zu bewegen. Jede einzelne Hochschule sollte mit Detailinformationen versehen sein, man sollte über verschiedene Filter die Möglichkeit haben einen Fokus zu setzen und die jeweiligen Partnerhochschulen sollten über eine Visualisierung sichtbar gemacht werden. Ausserdem sollte die Möglichkeit bestehen, sich einzelne Hochschulen zu „merken“ um sie zu einem späteren Zeitpunkt miteinander vergleichen zu können.

ANSICHT Wir entschieden uns für eine zweidimensionale, in Bundesländer aufgeteilte Kartenansicht von Deutschland. Auf diese Weise sollten alle Hochschulen und dessen geografische Verteilung auf einen Blick erkennbar sein. Auf einer zweiten Kartenansicht, zuoberst angeordnet, sollte eine Weltkarte für die Anzeige der Partnerhochschulen abgebildet sein.

NAVIGATION Ein Cursor ermöglicht das Anwählen von einzelnen Hochschulen. Durch das Bewegen des Cursors über eine oder mehrere Hochschulen werden diese in einem ersten Schritt rund um den Cursor angeordnet, um in der Kartenansicht übereinanderliegende Hochschulen besser darzustellen. Nach dem Berühren einer „herangezoomten“ Hochschule wird diese in einer fokussierten Ansicht wiedergegeben: durch eine Farbkodierung werden die angebotenen Studiengänge sichtbar und die zugehörige Infokarte wird angezeigt. ![NAVIGATION](http://www.hyaho.ch/stuff/cursor.jpg „NAVIGATION“)

RADIALMENUS Durch zwei Radialmenus lassen sich zum einen einzelne Hochschulen und zum anderen einzelne Studiengänge filtrieren. Durch das Ziehen/Drehen des Kreises bewegt man sich durch die Einträge und durch eine Berührung auf eine Schaltfläche werden Einträge dem Filter hinzugefügt. Die Radialmenus sollen eine verbesserte Möglichkeit bieten, sich mit Gestensteuerung durch eine hohe Anzahl von Einträgen hindurchzubewegen. ![RADIALMENUS](http://www.hyaho.ch/stuff/radialmenu.jpg „RADIALMENUS“)

SLIDER Rechts sind mehrere Slider positioniert, mit welchen weitere Filter zur Verfügung stehen. Die Filter beziehen sich auf eher persönliche Vorlieben: so stehen beispielsweise Filter für „Klima“, Wasser- und Meeresnähe„, “Population„ aber auch “Studiengebühren„ zur Verfügung. Diese kann man ein- und ausschalten und über den entsprechenden Slider in ihrem Wert anpassen. ![SLIDER](http://www.hyaho.ch/stuff/slider.jpg “SLIDER„)

PARTNERHOCHSCHULEN Sobald eine Hochschule ausgewählt ist erscheinen dessen Partnerhochschulen in Form von Linien, ausgehend von der Hochschule in Deutschland bis hin zur geografischen Lage der Partnerhochschule auf der Weltkarte. Diese Funktionalität soll dem Benutzer einen Eindruck von den jeweiligen weltweiten Austauschmöglichkeiten bieten. ![PARTNERHOCHSCHULEN](http://www.hyaho.ch/stuff/lines.jpg “PARTNERHOCHSCHULEN„)

INFOKARTEN Jeder Hochschule ist eine eigene Infokarte zugeordnet. Diese beinhaltet allgemeine Informationen zur Hochschule, sowie aber auch Informationen zu den angebotenen Studiengängen. Die Infokarten können in einen Ablagebereich abgelegt bzw. gespeichert werden um sie zu einem späteren Zeitpunkt wieder hervorzuholen und miteinander zu vergleichen. ![INFOKARTEN](http://www.hyaho.ch/stuff/infokarten.jpg “INFOKARTEN„)

SZENARIO

Anwendungsmöglichkeiten und -Orte von unimap wären beispielsweise Studienberatungssstellen, International Offices und aber auch öffentliche Berufsinformationszentren. Grundsätzlich steht die Applikation nicht nur Interessierten mit Absicht eine Designhochschule zu besuchen offen. Unimap soll eine prinzipiell interessante Plattform sein, welche auf hochwertige Art und Weise einen Eindruck der existierenden Design-Hochschulen deutschlands vermitteln soll.

PROZESS

prozess1.pngprozess1.png
process_sketch.jpgprocess_sketch.jpg
gesten-02.pnggesten-02.png
farben2.pngfarben2.png

Zu Beginn wurden skizzenweise Annäherungen an ein optisches Erscheinungsbild erarbeitet. Gleichzeitig wurde die Interaktivität konzipiert - welche Arten von Bedienelementen eignen sich für unsere bestimmten Zwecke am besten? Die Gestensteuerung eröffnet zahlreiche neue Bedienmöglichkeiten, jedoch gilt es trotzdem zuerst geschickte Einsatzmöglichkeiten zu finden, fertigzudenken und dann auszugestalten.

Anfänglich enstand die Idee für den Cursor ein physisches Objekt (Würfel) zu wählen, welches ebenfalls auf der Tischoberfläche liegen würde und durch Kippen, drehen und bewegen Interaktion mit dem Tisch ermöglichen würde. Unter Anderem durch die Entscheidung, den Tisch dann aber hochkant zu legen, erübrigte sich dieser Ansatz. Ausserdem erforderte das erarbeitete Steuerungsmodell die Interaktionsmöglichkeiten eines solchen Interfaces nicht.

Durch wichtige Entscheidungsprozesse kam oftmals die Tragweite von nur kleinen Detailanpassungen an die Oberfläche. Die Benutzerführung zum Beispiel erforderte mehrmaliges Umdenken in der Positionierung, Farbgebung und Skalierung von Interfaceelementen.

Der Prototyp wurde in der letzten Kursphase parallel zur Ausarbeitung des Konzeptes entwickelt.

IMPLEMENTIERUNG

Screen Shot 2011-12-05 at 10.36.02 PM.pngScreen Shot 2011-12-05 at 10.36.02 PM.png

TECHNISCHES Der Endprototyp wurde mit Processing ( http://www.processing.org ) entwickelt. Als Touch-Schnittstelle diente TUIO ( http://www.tuio.org ) und für Animationen/Tweens wurde die Ani Library verwendet ( http://www.looksgood.de/libraries/Ani ). Der verwendete multitouch table ist ein „Cell“ von multitouch.fi ( http://multitouch.fi/products/cell ).

DATENSAMMLUNG Das Sammeln und Aufbereiten der benötigten Daten stellte sich als ein grösseres als zuvor angenommenes Unterfangen heraus. Es galt Daten zu den deutschen Design-Hochschulen zu finden, welche im besten Falle alle von uns benötigten Informationen enthalten. Da wir keine korrekt formatierten, 'ready to use' Tabellen oder ähnliches finden konnten, waren wir gezwungen die Daten selbst zu suchen, zu speichern und richtig auszulegen. Dies nahm ziemlich viel Zeit in Anspruch.

![DATEN](http://www.hyaho.ch/stuff/data.png „DATEN“)

INTERPRETATION Wir einigten uns auf ein Tabellensystem, welches ein systematisches Auslesen der Daten gut ermöglicht. Für jede Hochschule mussten neben Name, angebotenen Studiengängen etc. auch die Koordinaten angegeben sein. Diese Tabelle wurde dann in Processing ausgelesen und entsprechend eingesetzt.

ENDPROTOTYP Das schlussendliche Resultat war ein funktionierender Prototyp, mit welchem wir die gewünschten Interaktionen und Funktionalitäten verständlich und repräsentativ für ein vollendetes Produkt aufzeigen und erklären konnten.

FAZIT

Mit unimap wird auf eine haptische, natürliche und visuell ansprechende Art ermöglicht, sich einen Überblick über die deutschen Design-Hochschulen zu verschaffen. Unsere Aufgabenstellung wurde gelöst und wir halten das Endprodukt für eine gut erarbeitete „Vorschau“ dessen, was bei einer vollständigen Durcharbeitung entstehen könnte.

Die Zusammenarbeit in der Gruppe, bestehend aus zwei Kommunikationsdesign- und zwei Interfacedesignstudenten, ermöglichte ein sinnvoll aufgeteiltes Arbeiten.

Nicht zuletzt geht unser Dank an den Dozenten dieses Kurses (Graspable Maps), Till Nagel, welcher uns tatkräftig jederzeit zur Seite stand und uns auch bei der Konzeptionsphase kreativ unterstützen konnte.

Ein Projekt von

Fachgruppe

Interfacedesign

Art des Projekts

Studienarbeit im zweiten Studienabschnitt

Betreuung

foto: Dr. Till Nagel

Entstehungszeitraum

Sommersemester 2011