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

(6. FS) Apps & Details · SoSe 2020 · Ein dezentes Redesign von Ebay-Kleinanzeigen

(6. FS) Apps & Details · SoSe 2020 · Ein dezentes Redesign von Ebay-Kleinanzeigen

In diesem Kurs ging es darum, sich mit Apples Human Interface Guidelines auseinanderzusetzen und hierdurch in der Lage zu sein, nach iOS Standards Apps zu entwerfen.


Aufgabe Abschlussprojekt

Neben vielen vorangegangenen Entwurfshausaufgaben und der kritischen Auseinandersetzung von iOS Apps und den Human Interface Guidelines, war es schließlich die Aufgabe, eine iOS-App unserer Wahl

„im Hinblick auf Usability, Plattformstandards, und Liebe zum gestalterischen Detail zu überarbeiten.
Besonderes Augenmerk soll auf der Anwendung der HIG für iOS liegen.“


Ebay-Kleinanzeigen als Redesign

Ebay-Kleinanzeigen ist eine App, in der man Gegenstände, Immobilien oder Dienstleistungen inserieren oder suchen kann. Ich habe mich für diese App entschieden, da ich sie fast jeden Tag nutze und mir dabei einige Probleme aufgefallen sind.

Abgesehen davon bot mir die App auch einige Möglichkeiten sie im Hinblick auf Übersichtlichkeit und Typografie nach iOS Standards zu verbessern. Hierbei wollte ich das Grunddesign von Ebay jedoch nicht gänzlich auf den Kopf stellen, sondern möglichst nahe am Original bleiben und wie zuvor auch empfohlen, lediglich an Details arbeiten.


Problem 1: Eine verwirrende Suche

Desktop HD Copy 9.pngDesktop HD Copy 9.png

• Eine Suche kann an verschiedenen Orten in der Tab-Bar getätigt werden

• Die wichtige und häufig genutzte Funktion „Gespeicherte Suchen“ findet man in einem üppig angelegten Segmented Control unter der Tab-Rubrik „Meins“ > „Suchen“. Was sich in der Anwendung als relativ kompliziert erweist, ist, dass man oft zwischen Anzeigen, Merkliste und den gespeicherten Suchen hin und her switchen will. Die verschachtelten Drill-Downs lassen einen dabei aber leicht die Orientierung verlieren.

• Verstärkt wird dies, da zusätzlich die Übersicht der Aktuellen Suche unter dem Tab „Suchen“ und die Übersicht der Gespeicherten Suche fast gleich aussehen. Oft ist es dann der Fall, dass man die entsprechende Suchübersicht nicht gleich wiederfindet, wenn man kurz den Tab wechselt, um eine Nachricht zu lesen oder seine Anzeigen zu betrachten. Man muss sie dann erst in dem verschachtelten System suchen…

• „Suchen“ als Bezeichnung für „meine gespeicherten Suchen“ ist missverständlich


Meine Lösung:

• Alle Suchen in einem Label auf der Tab-Bar zusammenfassen

• Die Aktuelle & Gespeicherte Suche ist mittels Segmented Control schneller und einfacher zu erkennen und zu erreichen.

Desktop HD Copy 23.pngDesktop HD Copy 23.png

• Neue Suche tätigen als Aktions-Button oben rechts. Anders als zuvor legt sich nun bei der Aktion „Suchen“ ein Fenster über den Tab.

Desktop HD Copy 27.pngDesktop HD Copy 27.png


Problem 2: Die Übersichtlichkeit

Desktop HD Copy 24.pngDesktop HD Copy 24.png

Desktop HD Copy 17.pngDesktop HD Copy 17.png

• Ich habe den Filter-Einstellungs-Button von den Filtern farblich getrennt. Dies hebt ihn hervor und sorgt für eine bessere Erkennbarkeit.

 
• Beim Scrollen der Filter-Labels reduziert sich der Filter-Einstellungs-Button zu einem Button mit Haken als Icon. Einen Haken assoziiert man nur schwer mit einer Filter-Option. Als Lösung  habe ich den hierfür oft verwendeten Trichter anstelle des Hakens als bezeichnendes Icon gewählt.

Desktop HD Copy 18.pngDesktop HD Copy 18.png

• Keine Table-View mehr, sondern Darstellung durch große Labels für Größere Bilder, Schrift & mehr Raum, sowie einheitliche Hervorhebung der wichtigsten Merkmale
• Leichte Schattierung der Schrift, damit sie auch auf hellen Flächen gut lesbar bleibt.

Desktop HD Copy 25.pngDesktop HD Copy 25.png


Problem 3: Übersichtlichkeit der Gespeicherten Suchen

Desktop HD Copy 13.pngDesktop HD Copy 13.png

Wie oben bereits beschrieben, gibt es auch hier einige Probleme im Hinblick auf die Lesbarkeit, Funktionsweise und Größenverhältnisse.


Meine Lösung:

• Auch hier habe ich der Konsistenz wegen mit größeren Labels gearbeitet. Die wichtigsten Fakten wurden eindeutiger benannt, besser platziert und visuell unterscheidbarer voneinander getrennt. 

• Vorher waren die Anzeige-Bilder viel zu klein und man konnte sie kaum erkennen. Ich habe sie daher über das ganze Label in einem Bildausschnitt vergrößert. Der Bildausschnitt soll nur einen Einblick geben, was einen dahinter erwartet. So blieb auch noch ausreichend Platz für die anderen Informationen.

• Neue Suchergebnisse werden nun in Zahlen benannt

• „Suchauftrag löschen“ wurde durch den Control-Button oben rechts (Bearbeiten) ersetzt

• Klickt man nun auf eine Gespeicherte Suche (siehe nächstes Bild), so öffnet sich diese in der Aktuellen Suche. Hätte man hier einen Drill-Down, so hätten wir wieder das gleiche Problem wie davor auch – das man nicht mehr weiß wo die eben getätigte Suche war, wenn man kurz mal auf Nachrichten klickt.

Desktop HD Copy 14.pngDesktop HD Copy 14.png


Fazit:

Es hat mir sehr viel Spaß gemacht mich mit Ebay-Kleinanzeigen auseinanderzusetzen. Es war irgendwie auch erleichternd jene Probleme, die man tagtäglich mit der App hat, „weg-designen“ zu dürfen. Gerne hätte ich mir noch die Anzeigen- und Follower-Übersicht vorgenommen, merkte dann aber, dass es einfach zu viel wird und ich auch mit der 4-minütigen Endpräsentation nicht hingekommen wäre. Im Großen und Ganzen bin ich aber sehr zufrieden mit meiner Leistung und vor allem der Lernkurve. Vielen Dank dafür.


Alles auf einen Blick

Desktop HD Copy 15.pngDesktop HD Copy 15.png

Ein Projekt von

Fachgruppe

Interfacedesign

Art des Projekts

Studienarbeit im zweiten Studienabschnitt

Betreuung

foto: Frank Rausch

Entstehungszeitraum

Sommersemester 2020

Keywords

zusätzliches Material