🧛🏾 🏫 🤣 Wie man die Navigation in mobilen Anwendungen durchdenkt 🏤 🎑 👌🏼

Es ist wichtig, die Schaltflächen nur dort zu platzieren, wo sie benötigt werden, um die Benutzeroberfläche nicht zu verstopfen und sie für Benutzer visuell nicht zu überlasten. Es ist wichtig, dem Benutzer die Informationen zur Verfügung zu stellen, die erforderlich sind, um zu entscheiden, ob auf eine vorhandene Schaltfläche geklickt werden soll oder nicht. Nun zur Navigation. Ich habe versucht zu spekulieren, warum bestimmte Elemente in Anwendungen so implementiert sind.

Hamburger

Im Dropdown-Menü vom Typ "Hamburger" ist es sinnvoll, selten angeforderte Nicht-Ziel-Menüelemente zu platzieren, da Sie auf die Schaltfläche klicken müssen, um auf diese Elemente zuzugreifen. Dies verringert die Wahrscheinlichkeit, dass der Benutzer im Prinzip das Vorhandensein der Menüelemente erkennt, die sich hinter der Schaltfläche befinden (wenn dies nicht die einzige Schaltfläche in der Benutzeroberfläche ist). Außerdem beginnen viele Dinge, je nachdem, wie auffällig diese Schaltfläche im Kontext des Bildschirms ist. In einem Hamburger werden häufig Richtlinien und Benutzervereinbarungen, Hilfe, häufig gestellte Fragen und detaillierte technische Informationen angezeigt, die vom Benutzer nur selten angefordert werden. Gleichzeitig befinden sich die Zieltasten im unteren Menü - so schnell wie möglich für den Benutzer.

Nur ein Klick - ein paar Sekunden, wenn Sie es nur einmal tun. Wenn dieser Klick jedes Mal ausgeführt werden muss, wenn Sie die Zielfunktion der Anwendung verwenden möchten, kann dies insgesamt zu mehreren Stunden Zeitverschwendung führen. Wir kümmern uns um unsere Benutzer.

Feige. 1. Beispiel eines Hamburgermenüs

Profil

Benutzer lieben Personalisierung. Daher ist das Vorhandensein eines Profils in Anwendungen, in denen ein Bruchteil einer sozialen Orientierung vorliegt, weit verbreitet. Jene. Wenn die Anwendung den Austausch von Informationen oder etwas anderes impliziert, bei dem Sie als Person vor einer anderen Person identifiziert werden, wird automatisch impliziert, dass die Anwendung auch ein Profil mit der Möglichkeit flexibler Einstellungen haben muss. Wenn der Benutzer nicht die Möglichkeit hat, den bei der Registrierung in personenbezogenen Daten wie Login oder E-Mail entstandenen Tippfehler zu korrigieren oder das Profilbild zu ändern, das anderen Benutzern angezeigt wird, führt dies zu Schmerzen und Leiden. Es ist üblich, ein Profil mit einem menschlichen Symbol oder einem vom Benutzer installierten Avatar zu kennzeichnen.

Sie sollten darauf achten, wie Instagram es macht. Um den Benutzer nicht mit einem verbundenen Konto mit einem farbigen Profilsymbol abzulenken, wird das Profil durch ein Standardsymbol in derselben Farbe wie das Hauptmenü angezeigt. Wenn mehrere Konten verbunden sind und von welchem Konto aus Sie Maßnahmen ergreifen, wird es wichtig genug, um stärker zu betonen, mit welchem Profil der Benutzer gerade arbeitet. Daher ist das „aktive“ Profilsymbol bereits im Menü sichtbar.

Feige. 2. Screenshots aus dem unteren Menü von Instagram. Links - ein Benutzerprofil, rechts - zwei mit einem Konto verbundene Profile

Ich stelle auch fest, dass ich einige Anwendungen gesehen habe, die keine Benutzeridentifikation vor anderen Personen implizieren, aber gleichzeitig dem Avatar des Benutzers zu viel Platz und Aufmerksamkeit geschenkt wird. Und natürlich bemühen sich die Leute in solchen Fällen selten, es durch etwas Personalisiertes zu ersetzen, denn außer ihnen sieht niemand diesen Avatar. Dies geschieht häufig in technisch orientierten Systemen, z. B. bei Anwendungen zur Abrechnung von Daten in einigen Lagern oder zur Verfolgung von Statistiken. In solchen Fällen lohnt es sich wirklich, die Frage zu stellen: "Wird diese Funktionalität hier benötigt oder wird sie in einem solchen Band benötigt?".

Unteres Menü

Die derzeit gängigste Form des Menüs. Und diese Popularität hat eine Grundlage.

Es ist bequem, leicht zu lesen, beschrieben in den Anleitungen für das Design von Android und Ayos. Es hat sich etabliert und bei längerem Gebrauch als bequem und verständlich bestätigt.

Im Allgemeinen möchte ich auf mehrere Stufen dieses Menüs hinweisen. Für vollständig innovative Anwendungen, die immer noch von ungewöhnlichen Benutzern des Symbols zur Anzeige von Menüelementen verwendet werden, besteht das erste Mal, wenn das Publikum der Anwendung aggressives Marketing betreiben soll, darin, die Signatur für die Menüelemente zu verwenden, wie dies beispielsweise bei Ticktok der Fall ist. Signaturen für Menüelemente sollten auch Anwendungen mit komplexer Navigation oder einem breiten Funktionsumfang überlassen werden, bei denen es schwierig ist, dieses oder jenes Symbol eindeutig zu interpretieren.

Wenn sich ein großer Teil des Publikums für Anwendungen mit einem engen Fokus gebildet hat und es dann um Mundpropaganda und weniger aggressives Marketing geht, können Sie die Beschriftungen von Menüelementen entfernen und dem Hauptinhalt der Anwendung mehr Platz widmen. Reduzieren Sie den zuvor im Menü zugewiesenen Speicherplatz, z. B. Instagram. Für Standard-Standardanwendungen oder Anwendungen, die bereits eine konstante aktive Zielgruppe haben, können Sie das Menü ohne Signaturen verwenden.

Abb. 3. Screenshot der Ticktock-Anwendung

In einigen Fällen ist es üblich, die grundlegendste Zielaktion visuell hervorzuheben. Da wir uns in jedem Abschnitt des Menüs befinden, können wir mit dem Erstellen von Inhalten fortfahren, da jedes der Menüelemente in irgendeiner Weise mit dem Inhalt zusammenhängt und das gesamte Wesen der Anwendung genau das Erstellen und Austauschen von Inhalten ist. Ein Beispiel ist ein Screenshot von Ticktock.

Ich stelle ein Menü fest, das ungewöhnlich aussieht und auf Design-Websites eine gewisse Beliebtheit genießt, aber gleichzeitig wird es in realen Anwendungen, die auf ein großes Publikum zählen, höchstwahrscheinlich nicht an Popularität gewinnen. Weil es nicht bequem ist, Menüpunkte zu lesen.

Abb. 4. Vertikales Menü

Registerkarten im Abschnitt

Wenn die Daten zu einem Abschnitt gehören, aber gleichzeitig einige Unterschiede aufweisen.

In der Dribble-App für Designer gibt es beispielsweise einen Wechsel im Feed zwischen den Personen, denen Sie folgen, populären und aktuellen Veröffentlichungen. Jene. Die Informationen sind gleich, aber sortiert bzw. gefiltert und werden unterschiedlich bereitgestellt. Ein ähnliches Beispiel ist das Wechseln zwischen Abonnements und vorgestellten Videos in Ticktock.

Tabs werden auf Instagram etwas anders verwendet. Mithilfe von Registerkarten können Sie zwischen Unterabschnitten im Profil wechseln. Im Allgemeinen ist dies auch logisch, da wir zum Profil gehen, um mit einem bestimmten Objekt zu interagieren - sei es mein Beitrag, die Erwähnung des Menüs in den Veröffentlichungen anderer Personen oder etwas anderes.

Am Beispiel von instagram lässt sich auch leicht demonstrieren, dass einige Abschnitte nicht allen Benutzern angezeigt werden müssen. Speziell am Beispiel des Maskenabschnitts. Bis ich von ihrer Existenz wusste und wusste, dass Sie sie selbst erstellen können, hatte ich keinen solchen Abschnitt. Sobald ich meine erste Maske in dieses soziale Netzwerk hochgeladen hatte, erschien dieser Abschnitt in mir. Es ist nutzlos für Leute, die nichts über Masken wissen, aber Instagram für andere Zwecke nutzen. Diese Benutzer müssen den Bildschirm nicht mit unnötigen Informationen überladen. Und für diejenigen, die von einer solchen Gelegenheit erfahren haben, wird dieser Abschnitt entsprechend benötigt.

Feige. 5. Instagram, als ich die Maske hochgeladen habe und bevor ich die erste Maske hochgeladen habe

Zurück Pfeil / Kreuz

Wenn wir zum Beispiel im Rahmen eines Abschnitts detaillierte Informationen veröffentlichen, wäre es großartig, mit Animation zu zeigen, dass dieser Abschnitt geöffnet wurde. Ein Kreuz oder ein Zurückpfeil dienen dazu, detaillierte Informationen zu reduzieren und zum vorherigen Bildschirm zurückzukehren.

Dies ist häufig beim Wechsel von Listen oder Produktkarten sinnvoll, damit der Benutzer versteht, dass er an denselben Ort zurückkehrt, von dem er von der Liste verschoben wurde. Außerdem kann der Benutzer das Sortiment weiter durchsuchen, ohne zur gewünschten Ebene des Katalogs scrollen zu müssen, von dem aus er zum detaillierten Abschnitt gegangen ist. Beispiele können leicht in den Anwendungen Wildbeeren, Ozon, Lamoda usw. angezeigt werden.

Feige. 6. Animation zum Öffnen detaillierter Informationen der Karte und durch den Pfeil zurück zur Liste

Das Panel kommt von unten heraus

Es funktioniert ähnlich wie der Übergang zu detaillierten Informationen, wird jedoch in Fällen verwendet, in denen Sie visuellen Zugriff auf den Abschnitt lassen müssen, von dem aus der Übergang erfolgt. Daher wird es häufig in Karten verwendet, in denen Sie bisher entscheiden, wohin Sie gehen möchten, und anhand der Entfernung, die Sie überwinden müssen, sowie anhand einiger detaillierterer Informationen, die in der Beschreibung des Ortes angegeben sind. Diese Technik wird auch in Lebensmittelanwendungen verwendet. Wenn Sie den Zugriff auf die veröffentlichten Informationen verlassen, bevor Sie das Formular aufrufen, in dem Sie die Menge der bestellten Lebensmittel eingeben müssen. Ein gutes Beispiel ist auch das Kommentarfeld für Reisen in Ticktock. Wir lassen die Möglichkeit, uns zu „merken“, welche Veröffentlichungskommentare gemacht werden, und lassen buchstäblich einen Teil dieses Videos sichtbar, wenn wir das Panel mit Kommentaren erweitern.

Feige. 7. Screenshots von Google Maps links, Yandex Food in der Mitte und Ticktok rechts

Es wird viel darüber diskutiert, welchen Einfluss sie haben und wie viel von ihnen abhängt. Während die Leute nach sozialer Anerkennung suchen und keine andere Form finden, bleiben die Schaltflächen für die soziale Anerkennung in den Anträgen.

Einige der Schaltflächen führen die Aktion selbst aus, andere scrollen zu dem Punkt, an dem diese Aktion ausgeführt werden kann. In diesem Fall bewegt sich der Fokus direkt zu dem Raum, in dem die Aktion ausgeführt wird. Im ersten Fall ist dies beispielsweise so. Wir klickten und sahen sofort, dass ihre Anzahl zunahm und das Herz gefärbt war. Als Beispiel für die zweite Option sind dies Kommentare. Wenn Sie auf einen Kommentar klicken, erweitern wir entweder die Kommentare für die Veröffentlichung oder konzentrieren uns sofort auf das Eingabefeld, um einen Kommentar zu hinterlassen. Jene. Eine kleine aber Umleitung erfolgt.

Fazit

Das Erstellen einer Navigation in der Anwendung erfordert Aufmerksamkeit, Ausdauer und das Vorhandensein von Logik.

Schreiben Sie mit dem, was Sie zustimmen, mit dem, was Sie nicht zustimmen, und es kann sich lohnen, dem Artikel etwas hinzuzufügen.

Wie man die Navigation in mobilen Anwendungen durchdenkt