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

Tricount – Ein konservatives Redesign

Ziel war es, einige Ansichten der Tricount iOS App auf Apples Plattformstandards, die Human Interface Guidelines anzupassen. Dabei habe ich die Funktionalität gleich gelassen, aber sie in bessere UI Elemente gegossen. Da diese App zur Aufteilung von Kosten unter Freunden also nicht vollständig hinterfragt wurde, habe ich es ein „konservatives Redesign“ genannt.

Bildschirm­foto 2023-01-13 um 15.42.23.pngBildschirm­foto 2023-01-13 um 15.42.23.png

Hier die Startseite mit der Liste aller „Tricounts“, also den Gruppen in denen Kosten unter den Mitgliedern aufgeteilt werden. Links immer die alte Ansicht, rechts die neue. Der iOS Standard ist hier ein reines Schwarz als Hintergrund. Der Header-Hintergrund ist nur beim Scrollen sichtbar. Der orange Punkt in der alten Ansicht bedeutet, dass man hier noch Geld zahlen muss. Erhält man Geld, wurde ein grüner Punkt angezeigt. Dies ist durch das grüne und rote Feld mit Plus und Minus besser ersichtlich. Durch das Symbol der Glocke ist zu erkennen, dass sich die 20 auf Mitteilungen bezieht, die auch später durch die Glocke zugänglich sind.

Bildschirm­foto 2023-01-13 um 15.42.28.pngBildschirm­foto 2023-01-13 um 15.42.28.png

Hier habe ich einige Verbesserungen am Wording vorgenommen, und wichtigere Funktionen direkt zugänglich gemacht.

Bildschirm­foto 2023-01-13 um 15.42.30.pngBildschirm­foto 2023-01-13 um 15.42.30.png

Die kleinen Menüs entsprechen dem Standard. Durch Icons wird die Eckennung bzw. Unterscheidung erleichtert.

Bildschirm­foto 2023-01-13 um 15.42.33.pngBildschirm­foto 2023-01-13 um 15.42.33.png

Der Button zur Bearbeitung (Stift) habe ich aus dem Ellipsen/Mehr-Menü herausgenommen, der er deutlich wichtiger als alle anderen Optionen dort ist. Die Segmented Control entspricht dem Standard. Der Zurück-Button hat nun eine Beschriftung. Der große Plus-Button, hat ebenfalls eine Beschriftung, damit er nicht mit dem Button auf der Startseite verwechselt werden kann. Sein Design entspricht Apples Erinnerungen-App.

Bildschirm­foto 2023-01-13 um 15.42.39.pngBildschirm­foto 2023-01-13 um 15.42.39.png

Hier ist ein Sheet nach den Standards die angemessene Darstellung. Dadurch, dass alle Eingabebereiche einen Hintergrund haben, ist sehr gut erkennbar, welche Beschriftung wozu gehört, und was antippbar ist. Das Design entspricht Apples Apps. Der Betrag ist rechtsbündig, da dies eine Konvention ist, und so das Währungs-Symbol rechts fix ist, und größere Beträge sich nach links hin ausbreiten.

Bildschirm­foto 2023-01-13 um 15.42.42.pngBildschirm­foto 2023-01-13 um 15.42.42.png

Dass das neue Menü aus dem Header kommt, bricht die Standards, macht aber den alten zusätzlichen Button überflüssig.

Bildschirm­foto 2023-01-13 um 15.42.45.pngBildschirm­foto 2023-01-13 um 15.42.45.png

Die neue Datum- und Zeit-Eingabe entspricht gänzlich Apples Standards und Designs.

Bildschirm­foto 2023-01-13 um 15.42.46.pngBildschirm­foto 2023-01-13 um 15.42.46.png

Jedes Vorkommen des eigenen Namens habe ich durch „Ich“ oder „Mir“ ersetzt, da dies der natürlichen Kommunikation entspricht. Apples verwendet für so ein Menü Checkboxen, wie in der hier gezeigten Version. Damit ist schon beim Öffnen des Menüs der alte ausgewählte Zustand besser sichtbar.

Bildschirm­foto 2023-01-13 um 15.42.49.pngBildschirm­foto 2023-01-13 um 15.42.49.png

Bildschirm­foto 2023-01-13 um 15.42.51.pngBildschirm­foto 2023-01-13 um 15.42.51.png

Der zu zahlende Betrag einer einzelnen Person konnte zuvor nur angepasst werden, wenn man auf „Erweitert“ getippt hat. Nun lässt sich jeder Betrag einer Person direkt antippen und ändern. Der Betrag von 0€ einer nicht ausgewählten Person hat keinen Hintergrund und lässt sich demnach nicht antippen. Durch standardmäßige Plus/Minus-Button kann der Anteil vervielfältigt werden. Zuvor war dies nur über einen Tastaturinput möglich.

Bildschirm­foto 2023-01-13 um 15.42.52.pngBildschirm­foto 2023-01-13 um 15.42.52.png

Wurde der Betrag einer Person angepasst, wird dies nun eindeutig angezeigt, und kann durch den Pfeil-Button rückgängig gemacht werden.

Bildschirm­foto 2023-01-13 um 15.42.54.pngBildschirm­foto 2023-01-13 um 15.42.54.png

Die vorherige Ansicht der Salden war sehr verwirrend. Denn unten steht hier, dass Clemens Hannes 26€ zahlen muss. Wenn Hannes aber 26€ im Plus ist, würde sich sein Betrag ja verdoppeln? Bei der alten Ansicht weiß man nicht beim ersten Blick, ob die Personen die Beträge schulden, oder ob sie sie erhalten sollen. Dies ist rechts durch die Angabe von „erhält“ und „schuldet“ gelöst. Sie ist vom größten zum kleinsten (positiven zu negativen) Betrag sortiert.

Der wichtige Button zum Bezahlung entspricht nun dem Standard und springt so ins Auge. Die Karten für die Rückzahlungen sind kompakter, sodass man einen besseren Überblick hat.

Bildschirm­foto 2023-01-13 um 15.42.57.pngBildschirm­foto 2023-01-13 um 15.42.57.png

Hier ein Vergleich davon, was in der neuen Version passiert, wenn schon Rückzahlungen zum Teil erfolgt sind. Denn diese werden hier als bezahlt angezeigt. Die Beträge des Saldos oben ändern sich entsprechend.

Ein Projekt von

Fachgruppe

Interfacedesign

Art des Projekts

Studienarbeit im zweiten Studienabschnitt

Betreuung

foto: Frank Rausch

Zugehöriger Workspace

Apps & Details · WiSe 2022/23

Entstehungszeitraum

Wintersemester 2022 / 2023

Keywords