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

Pointer - gebaut mit SwiftUI

Seit 2019 löst Apple UIKit mit SwiftUI ab. Mit diesem Framework zur Interfaceprogrammierung werden die letzten Reste aus der Objective-C Zeit abgeschüttelt, vollendet ist die Transformation aber noch nicht.

Da ich in der Vergangenheit schon mit Swift und UIKit gearbeitet habe, war dieser Kurs ideal um die Zukunft der iOS/iPadOS/TVOS/MacOS-Entwicklung kennenzulernen und mich wieder dafür zu begeistern.

Beta-Download

Die App ist jetzt als offene Beta verfügbar und kann allen getestet werden, die Interesse haben:
https://testflight.apple.com/join/4BmEe66B

Auswahl eines Projekts

Screenshot 2021-10-10 at 23.22.53.pngScreenshot 2021-10-10 at 23.22.53.png

Um ein geeignetes Projekt zur Umsetzung zu finden und den Design-Aspekt des Prozesses zu minimieren, ging ich alte Entwürfe und angefangene Ideen durch. 

Am Ende entschied ich mich für das Projekt mit der einfachsten Umsetzung. Aus der Vergangenheit weiß ich, dass der Programmieraufwand oft um das 10-fache unterschätzt wird. Und ich wollte sichergehen, die App noch 2021 in den App Store zu bringen zu können.

Finales Design und Konzept

Artboard.pngArtboard.png
Artboard.pngArtboard.png

Das Konzept ist schnell erklärt: Eine Art Kompass-App, die statt Norden zu einem beliebigen Ort zeigt. Zusätzlich wird die Distanz angezeigt.

Effiziente Navigation kann Google Maps natürlich besser. Der Zweck der Pointer App ist eher entspannte, ungefähre Navigation. Zum Beispiel bei einem Besuch in einer fremden Stadt: Man will am Ende des Nachmittags an einem Ort landen, sich bei der Route aber die Optionen offen halten.

Das Design ist entsprechend simpel.

In der Hauptansicht werden Distanz und Richtung des Ziels angezeigt, in der Kartenansicht das entsprechende Ziel gewählt.

Die gesamte Interaktion ist „thumb-friendly“. Nicht interaktive Elemente nutzen des Platz im oberen Teil des Bildschirms.

Falls der Wechsel zur Kartenansicht nicht sofort ersichtlich ist, erscheint beim Öffnen oder Tippen ein Tooltip.

Designiterationen

Screenshot 2021-10-10 at 23.46.57.pngScreenshot 2021-10-10 at 23.46.57.png
Screenshot 2021-10-10 at 23.59.54.pngScreenshot 2021-10-10 at 23.59.54.png
Screenshot 2021-10-10 at 23.58.57.pngScreenshot 2021-10-10 at 23.58.57.png
Screenshot 2021-10-11 at 00.00.35.pngScreenshot 2021-10-11 at 00.00.35.png
Screenshot 2021-10-11 at 00.01.21.pngScreenshot 2021-10-11 at 00.01.21.png
Screenshot 2021-10-11 at 00.02.07.pngScreenshot 2021-10-11 at 00.02.07.png
Screenshot 2021-10-11 at 00.07.02.pngScreenshot 2021-10-11 at 00.07.02.png
Screenshot 2021-10-11 at 00.04.03.pngScreenshot 2021-10-11 at 00.04.03.png

Die Details

Koordinaten ≠ Orte

Interfaces übersetzen Informationen zwischen Menschen und Maschinen. Abgesehen von der Oberflächengestaltung dieser App passiert das auch „unter der Haube“. 

Wer zum Reichtagsgebäude navigieren will, wird wohl kaum die Koordinaten auswendig wissen. Diese braucht die App aber. Es wird also das MKLocalSearch Framework verwendet, um den Nutzenden Orte mit Worten suchen zu lassen. Wenn das Ziel manuell auf der Karte gefunden wird, muss dasselbe umgekehrt geschehen. CLGeocoder.reverseGeocodeLocation fragt auf einem Apple-Server Straßennamen etc ab, die dann dem Nutzenden angezeigt werden.

Simulator Screen Recording - iPhone 11 - 2021-10-11 at 22.24.35.gifSimulator Screen Recording - iPhone 11 - 2021-10-11 at 22.24.35.gif

Ein bisschen Mathe muss sein

Den Winkel zwischen zwei Orten auf der Erde auszurechnen ist zwar simpel, involviert aber Mathematik. Zum Glück konnte ich die entsprechende Formel bei Stackoverflow klauen.

Screenshot 2021-10-11 at 19.34.26.pngScreenshot 2021-10-11 at 19.34.26.png

Animieren, wo es nur geht

Da ich beim Übergang zwischen den beiden Screens nicht auf Standard iOS-Optik zurückgreifen wollte, werden die beiden ineinander überblendet. Der Button mit dem Ziel wird (matchedGeometryEffekt sei Dank) derselbe Button im nächsten Screen.

Simulator Screen Recording - iPhone 11 - 2021-10-11 at 23.17.20.gifSimulator Screen Recording - iPhone 11 - 2021-10-11 at 23.17.20.gif

So simpel wie es geht, aber nicht simpler

Zu Anfang hatte ich noch den idealistischen Plan, das Ziel nur durch manuelles Scrollen mit der Karte zuzulassen. Ganz simpel eben. 

Nach ein paar Selbsttest wurde mir schnell klar, dass die App dadurch kaum benutzbar wäre und man wesentlich länger für die Eingabe eines Ziels bräuchte. Daher wurde eine Suche mit Suchvorschlägen hinzugefügt.

Simulator Screen Recording - iPhone 11 - 2021-10-11 at 23.40.53.gifSimulator Screen Recording - iPhone 11 - 2021-10-11 at 23.40.53.gif

To-Do

Nach diesem Semester wird diese App mein persönliches Projekt bleiben. Eine lange Liste mit To-Dos und Fixes steht an. Keine neuen Features per se, aber kleine Verbesserungen.

  • Verbesserte Handhabung von Orten, die sich auf eine große Fläche ausdehnen. Im Gegensatz zum Mittelpunkt von z.B. einem Park, sollte die Distanz zum Beginn dieses gezeigt werden. 

  • Ein Button zur Zentrierung des Nutzendenstandorts hat es auch nicht mehr rechtzeitig in die App geschafft.

  • Eine Tweaken der Animationen. Hier steht mir noch ein unvollständiges Verständnis von SwiftUI im Weg. 

  • Ein intelligenterer „schwaches GPS“-Hinweis, der nicht nur basierend auf der Genauigkeit des Nutzendenstandortes erscheint, sondern die dessen folgende Varianz der Richtungsanzeige in Betracht zieht. Wenn ein Ort 1000km enfernt liegt, ist eine Ungenauigkeit von 1km nicht wirklich relevant. Ist der Ort 500m entfernt, sieht es anders aus.

  • Kompatibilität mit iOS 14 war mein ursprüngliches Ziel. Die Verbesserungen mit SwiftUI 3, die mit iOS 15 kamen sparten aber zu viel Zeit. Ich werde hoffentlich in zukünftigen Releases eine Version für iOS 14 anbieten können.

Fazit

Ich bin sehr froh, iOS-Entwicklung noch einmal eine Chance gegeben zu haben. Die Verbesserung der letzten 5 Jahre sind enorm und Swift und SwiftUI machen Entwicklung sehr viel zugänglicher. 

Viel Copy-Paste von Stackoverflow, Konzepte die ich nicht verstehe und unschöne Bodges sind natürlich auch Teil des Projekts gewesen. Aber das Gefühl, eine „echte“ App zum Teilen zu haben, lässt sich durch keine Figma-Vorschau ersetzen.

Ein Projekt von

Fachgruppe

Interfacedesign

Art des Projekts

Studienarbeit im zweiten Studienabschnitt

Betreuung

foto: Martin Lexow

Entstehungszeitraum

Wintersemester 2021 / 2022

zusätzliches Material