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

Trello für iOS – Redesign

Das Redesign der Trello iOS-App ist als dreiwöchiges Abschlussprojekt im Kurs „Apps & Details“ entstanden. Ziel des Projekts war es, eine iOS-App „im Hinblick auf Usability, Plattformstandards, und Liebe zum gestalterischen Detail zu überarbeiten.“ Im Kurs haben wir uns ausschließlich mit der Gestaltung von iOS-Apps beschäftigt und dabei besonders die Human Interface Guidelines kritisch unter die Lupe genommen.


Header_Inline.png
Header_Inline.pngHeader_Inline.png


Hauptnavigation

01.png01.png

Die Hauptnavigation der Trello iOS-App besteht aus einer Tab Bar mit fünf Schaltflächen: Boards, Home, Search, Notifications und Account. In meinem Redesign habe ich die Tab Bar auf drei Schaltflächen reduziert. Dabei habe ich den Home- und Notifications-Tab zusammengeführt, weil beide Ansichten die Aufgabe haben, den Nutzer über Neuigkeiten innerhalb des Trello-Kosmos zu informieren – von Änderungen an Boards über Trello-Updates bis hin zu neuen Kommentaren. Die Account-Ansicht erachtete ich als nicht wichtig genug um sie als ständige Option in der Tab Bar zu führen und habe den zugehörigen Button daher in die Navigation Bar des intialen Screens, der Boards-Ansicht, verschoben.

Neben den Veränderungen an der Tab Bar und der Rückführung zu Standardkomponenten habe ich auch die Suche nach Boards aus dem Screen entfernt. Ich denke, dass der Durchschnittsnutzer der App nicht Mitglied in einer unüberschaubaren Anzahl an Boards ist und es so vertretbar ist, ihn für die Suche nach einem Board in den Search-Tab zu leiten. Bisher ist eine Suche von Boards in der Trello App an mehreren Stellen möglich.


Suche

02.png02.png

Der Search-Tab zeigt im Original vor der Eingabe eines Suchbegriffs eine Liste mit Recent Searches. Was mir hierbei nicht gefallen hat, ist, dass es keine Möglichkeit für den Nutzer gibt, einzelne, oder auch alle Elemente aus der Liste zu löschen. In meinem Redesign habe ich deshalb, neben der allgemeinen Verbesserung der visuellen Struktur, einen Clear all-Button hinzugefügt.

Die Search Bar enthält nun den Platzhalter Search Trello – ein kleiner Hinweis darauf, dass Nutzer an dieser Stelle ihr gesamtes Trello-Netzwerk durchsuchen können.

03.png03.png

Das Design der Suchresultate wurde ebenfalls von mir überarbeitet. Ich habe versucht, die einzelnen Suchergebnisse visuell strukturierter zu gestalten und alle unrelevanten Metainformationen herauszufiltern. Um die Zuordnung der Elemente zum Suchbegriff zu verdeutlichen, habe ich mich dazu entschieden, das für die Suche relevante Datenfragment mit einem fetteren Schriftschnitt hervorzuheben.


Board

04.png04.png

Für mein Redesign der Board-Ansicht habe ich mich zunächst mit den Funktionen beschäftigt, die tatsächlich das Board selbst betreffen und nicht die im Board angelegten Listen. Diese Funktionen sind hinter den ominösen drei Punkten in einer Sidebar versteckt. Ich habe lange versucht, eine andere Lösung zu finden, bin aber letztendlich zu dem Entschluss gekommen, es bei dieser Struktur zu belassen und lediglich das Icon des Buttons anzupassen. Die Sidebar ist in meinem Entwurf einem Modal gewichen, in dem die Vielzahl an Informationen und Einstellungsmöglichkeiten in einer Table View anhand ihrer Oberkategorien strukturiert sind.

05.png05.png

Das Design der Listen und Karten habe ich auch angepasst (→ Bild 1 in diesem Abschnitt). Ich habe mich unter anderem dazu entschieden, die Karten-Labels, welche man in Trello vergeben kann, auch auf diesem Screen anzuzeigen. Diese Funktion war sonst nur der Trello Web-App vorbehalten. Des Weiteren habe ich die Karten visuell anders strukturiert und mich so zum Beispiel auch dafür entschieden, dass alle Karten die gleiche Größe haben.

06.png06.png

Der Nutzer kann auch ein Kontextmenü für jede Liste aufrufen. Dieses ist im Original vom iOS Action Sheet abgewandelt. In meinem Redesign kehre ich zur klassischen Variante zurück. Alle Optionen, die sich um die Reihenfolge der Karten in der Liste drehen, habe ich in einem neuen Screen zusammengefasst: Über die Schaltfläche Edit Card Order öffnet sich ein Modal, in dem der Nutzer die Karten individuell sortieren kann. Ein weiterer Grund, warum ich mich für diese Lösung entschieden habe, ist das versehentliche Verschieben von Karten beim Scrollen einer Liste. Durch die Auslagerung des Kartenverschiebens in einen separaten Screen wird die Long Press-Option bei allen Karten frei, welche vorher zum Draggen innerhalb der Liste genutzt wurde. Wie aus anderen guten iOS-Apps gewohnt, zeige ich im Redesign ein iOS-Kontextmenü mit verschiedenen Aktionen zur jeweiligen Karte an.

07.png07.png
08.png08.png


Fazit

Der Kurs „Apps & Details“ hat mir über das Abschlussprojekt und die hervorragend zusammengestellten Übungen viel über gutes iOS-Design beigebracht und gleichzeitig meinen Blick für Details geschärft. Durch das konstruktive Feedback und den durchgängig hochwertigen Input von Frank konnte man jede Woche etwas neues lernen, sei es über iOS-Details, Screen-Design oder Typografie. Ich kann den Kurs, in dieser oder ähnlicher Form, jedem empfehlen, der mehr über das Gestalten von Apps für iOS erfahren möchte.

Ein Projekt von

Fachgruppe

Interfacedesign

Art des Projekts

Studienarbeit im zweiten Studienabschnitt

Betreuung

foto: Frank Rausch

Zugehöriger Workspace

Apps & Details · SoSe 2020

Entstehungszeitraum

Sommersemester 2020