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

Komoot als native macOs App

Komoot gibt es als IOS und Android App, sowie als Website. Die App ist primär dafür da Touren zu planen z.B. für das Rennrad, Gravelbike, Wanderungen etc. Eigentlich hat Komoot noch einen Communitybereich, der dafür da ist geplante Routen zu veröffentlichen oder Bilder von sehenswürdigen Orten zu teilen. Für dieses Projekt habe ich den Communitybereich außer Acht gelassen und mich nur auf die Routenplanung konzentriert.

Es macht durchaus Sinn Komoot am Rechner zu benutzen, da Touren oft über mehrere Tage gehen können, wo eine intensivere Planung nötig ist, die auf dem kleinen Screen zu fummelig werden kann.

Der aktuelle Stand

komoot_uebersicht.pngkomoot_uebersicht.png
komoot_dom.pngkomoot_dom.png

Auf der Webseite von Komoot ist jetzt als Beispiel eine Route von Potsdam Hbf nach Berlin Hbf ausgewählt. Komischerweise wird in der Ansicht links, statt meiner ausgewählten Orte, die ich über die Suche hinzugefügt habe, einfach Wegpunkt A und B angezeigt.

Die Webseite unterscheidet sich vom Design nicht von der IOS oder der Android App.

Die roten Kreise mit dem Fahrradicon sind Fahrrad-Hihlights, die besondere Orte hervorheben sollen, die als Ziel oder Zwischenstopp dienen können. Die Highlights ändern sich je nach Sportart.

Im zweiten Screen ist so ein Highlight ausgewählt.

macOs Entwurf

Startscreen.jpgStartscreen.jpg
Sportwahl.jpgSportwahl.jpg

Ein Entwurf im macOs Stil. Die typischen wiedererkennbaren Elemente des Betriebssystems ergeben den Eindruck einer nativen Mac App. Für die Karte wird auch einfach die Basis von Apple Maps benutzt, aktuell benutzt Komoot Maplibre.

Zusätzlich sind in der ersten Sidebar jetzt die geplanten und gemachten Touren zu sehen, zuvor waren diese bei Auswahl des Namens in einem Popup versteckt. In der Sidebar gäbe es noch die Möglichkeit gespeicherte und empfohlene Highlights einzuarbeiten.

Die Sidebar kann eingeklappt werden um mehr Platz bei der Planung zu haben.

Routenansicht

Route_A_B.jpgRoute_A_B.jpg
Wegen folgen Popover.pngWegen folgen Popover.png

Hier ist eine Beispielroute von Potsdam Hbf nach Berlin Hbf zu sehen. Gekennzeichnet werden die Orte durch Buchstaben, die in der Sidebar wieder auftauchen und den gewählten Ort anzeigen.

Jetzt tauchen auch die Funktionen auf, um die Tour zu speichern oder sie zu versenden.

Auf der rechten Seite wird die neue Inspectorview von macOs Sonoma verwendet, um die Details der Route zu zeigen. Dauer und Strecke werden jetzt prägnanter dargestellt, um Änderungen schneller aufnehmen zu können. Außerdem wirken die Daten dadurch Visuell spannender, davor wurden sie einfach nebeneinander geschrieben.

Das Popover erklärt die Funktion „Wegen folgen“.

Ziel oder Wegpunkt hinzufügen

Wegpunkt.jpgWegpunkt.jpg

Wenn ein Wegpunkt oder ein Ziel hinzugefügt werden soll, kann entweder irgendwo auf der Map geklickt werden oder auf ein Fahrradhighlight. In diesem Beispiel ist ein Highlight ausgewählt was den Berliner Dom zeigt. 

Als zusätzliches Feature, habe ich die Vorschau hinzugefügt, welchen Einfluss ein zusätzlicher Wegpunkt auf die Route hätte => +3km und 10min.

Speichern und bearbeiten – FINAALEEE

Route_fertig.jpgRoute_fertig.jpg
Route_Uebersicht.jpgRoute_Uebersicht.jpg

Der erste Screen zeigt die fertig geplante Route. Vier Wegpunkte, die alle auch auf der linken Seite aufgeführt werden.

Jetzt kann oben gespeichert werden.

Der zweite Screen zeigt die finale Route nach dem speichern an, links in der Sidebar wurde diese nun zu allen geplanten Routen hinzugefügt.
Die Route kann oben bearbeitet werden, dann würde man zum vorherigen Screen zurückkehren.

Vergleich alte und neue Schaltflächen

Vergleich1.jpgVergleich1.jpg
Vergleich2.jpgVergleich2.jpg

 
 

 

 

Der Kurs war wieder schön nerdig! Liebe sowas, da hab ich immer mehr Spaß beim lernen! 🤓🤓

Ein Projekt von

Fachgruppe

Interfacedesign

Art des Projekts

Studienarbeit im zweiten Studienabschnitt

Betreuung

foto: Frank Rausch

Zugehöriger Workspace

Die Maus im Fenster

Entstehungszeitraum

Sommersemester 2023

Keywords