Ein bisschen über UX und UI in der Ridewithme App

    Wir sind die Entwickler der Ridewithme App. Unser Ziel war es, eine Anwendung zu erstellen, mit der sich Menschen aus aller Welt zu gemeinsamen Sportarten zusammenschließen können. Wir werden unseren Blog mit der Geschichte darüber beginnen, wie man die Funktionalität der Anwendung auswählt und was letztendlich in die Benutzeroberfläche passt. Für diejenigen, die sich für das Thema der Entwicklung mobiler Anwendungen und Dienste interessieren, herzlich willkommen!

    Wie alles mit UX begann


    Wir hatten die Idee eines coolen Dienstes und begannen sofort, die Benutzeroberfläche zu zeichnen, um sie schön zu machen. Wir konnten diese Harken nicht überwinden, ich wollte den Prototypen unbedingt schnell abholen. Dies führte dazu, dass wir die Oberfläche etwa fünf Mal neu gestaltet haben. Und jedes Mal schien es uns sehr cool zu sein, aber wenn Sie es immer noch vermasseln, wird es absolut schön sein. Dann wurde beschlossen, alles von Grund auf neu zu machen, und der Prozess verlief konstruktiver. Wir haben mit der Funktionalität begonnen:
    • Liste der Ereignisse. Der Benutzer möchte auf jeden Fall eine Liste von allem sehen, was die Leute anbieten.
    • Liste der Abonnements. Eine Liste der Ereignisse, die der Benutzer bereits abonniert hat.
    • Erstellen Sie eine Veranstaltung. Fenster zum Erstellen eines Ereignisses.
    • Liste der Orte. Gute Orte anzeigen, eigene hinzufügen, dies sollte hier implementiert werden.
    • Profil. Schau dich an, füge Daten über dich hinzu.

    Nachdem wir die Hauptfunktionalität kompiliert hatten, wechselten wir zur Seite:
    • Filter
    • Einloggen
    • Liste der Städte, Länder usw.
    • Karte
    • Route zum Ort

    Das Erstellen einer solchen Liste setzt sofort alles an seinen Platz. Wir haben verstanden, auf welchen Fenstern was besser zu platzieren ist, wie im Interesse des Benutzers zu handeln ist, und sind zu einer detaillierteren Analyse zukünftiger Anwendungsfenster übergegangen.

    Gehen Sie zur Benutzeroberfläche


    Wir haben UI-Anwendungen auf Basis der Benutzerfreundlichkeit entwickelt. Es klingt kitschig, aber wir haben eine Anwendung für jeden Tag. Deshalb brauchen wir eine Oberfläche mit einem Minimum an Animation, Popups und anderen Dingen. Vielleicht ist dies eine zu harte Aussage, da sind sich viele nicht einig, aber zu diesem Zeitpunkt erschien es uns vernünftig, eine Tendenz zur Einfachheit zu machen. Mit Apple-Richtlinien bewaffnet machten wir uns an die Arbeit.

    Das erste Problem war die Wahl zwischen dem Seitenmenü und der Tapbar.
    Bilder zum Vergleich (leider wurden unsere Skizzen nicht hinterlassen):


    Wir haben die endgültige Anzahl der Hauptanwendungsfenster berechnet. Es waren fünf, und um Geld zu sparen, entschieden wir uns für die Verwendung der Tapbar (natürlich zum Speichern von Benutzerbändern). Sie können jederzeit zu einem anderen Anwendungsfenster wechseln, ohne zu viel zu streichen. Ich rate allen, wenn möglich auf das Seitenmenü in ihrer Anwendung zu verzichten.

    Nach der Auswahl der Haupthierarchie der Fenster ist die Zeit für Features gekommen. Ich werde nicht über kleine sprechen (zum Beispiel sieht das Filterfenster nirgends standardmäßiger aus), aber ich möchte noch auf einige eingehen.

    Karte


    Karte mit Ereignissen, diese Idee verfolgte mich. Dies schien mir das wichtigste Merkmal zu sein, und ich wollte es hervorheben. Ich entschied, dass wir es mit Animation wunderschön darstellen müssen, und dies kam daraus:


    Stifte mit dem Namen des Ereignisses werden auf der Karte platziert. Wenn Sie auf die Anmerkung des Stifts tippen, können Sie zu den detaillierten Informationen über das Ereignis gehen und es abonnieren. So können Sie sehen, wo eine Veranstaltung in der Nähe stattfindet. Mit der Animationslösung kann ein zusätzlicher Menüpunkt entfernt werden, und gleichzeitig kann der Benutzer die Funktion bequem platzieren.

    Orte und Karte wieder


    Beim Anzeigen detaillierter Informationen zur Veranstaltung muss der Benutzer manchmal eine Wegbeschreibung zum Veranstaltungsort abrufen. Wir haben dieses Problem mit einer Minikarte gelöst und auf getippt. Wenn der Benutzer auf die Details des Ereignisses eingeht, sieht er eine Minikarte (auf einem kleinen Bildschirm ist sie nicht sehr benutzbar), und wenn er sie aufklebt, gelangt er auf eine Karte mit einer Laufroute, die beim Verlassen des Autos oder der U-Bahn hilfreich sein sollte.


    Feed


    Für eine Liste von Ereignissen haben wir sehr lange nach unserem Chip gesucht. Ich wollte etwas Ungewöhnliches, und als ich eine Pause von einer Reihe von Bibliotheken und Ideen einlegte, entschied ich mich für die übliche TableView mit Sportikonen. Nicht jeder wird diese Entscheidung verstehen, aber ich werde versuchen zu erklären. In der Bewerbung hatte ich größte Angst vor einer Überfülle von Animationen und der Schwere der Wahrnehmung von Informationen. Wir wollten einen Antrag für jeden Tag stellen, für diejenigen, die ständig in Bewegung sind und die Pop-up-Informationen schnell satt haben. Meine Meinung ist umstritten, ich habe noch nicht entschieden, ob ich die gleiche Ansicht gefunden habe, auf jeden Fall machen wir nicht halt und arbeiten ständig an der Oberfläche.
    Hier möchte ich Änderungen im Erscheinungsbild der Ereignisliste im Laufe der Zeit anzeigen, einige Links sind verloren gegangen, aber ich werde zeigen, was ich gefunden habe:
    Erste Option:

    Zweitens:

    Endgültig:


    Wenn Sie sich die Screenshots angesehen haben, haben Sie bereits gesehen, wie wir mit dem Blauen experimentiert haben. Ich persönlich mag diesen Effekt sehr und wollte ihn nutzen. Aber am Ende haben wir es abgelehnt, weil es auf dem ganzen Bildschirm nicht aussieht.

    PS Wir werden den Artikelzyklus auf jeden Fall fortsetzen, wenn Sie sie mögen. Schreiben Sie in den Kommentaren darüber, was es interessant wäre, zu lesen.

    Jetzt auch beliebt: