it-swarm.com.de

Sollten wir das 3x3 9-Punkte-Symbol als Apps-Menü verwenden?

Während sich das Web weiterentwickelt und komplexere Anwendungen entstehen, muss der Benutzer schnell zwischen Anwendungen navigieren können. Diese Aktion unterscheidet sich von dem Navigationsmenü, das wir in Apps sehen, dem umstrittenen Hamburger-Menüsymbol, das zu einer Konvention für die globale Navigation auf kleineren Bildschirmen geworden ist. Hier betrachten wir die Navigation zwischen Anwendungen.

(enter image description here

Google verwendet diese Option, um Nutzern das Navigieren zwischen den Anwendungen Google Maps, Google Play, Google Drive und vielen anderen Google-Anwendungen zu ermöglichen.

(enter image description here

Microsoft verwendet diese Option auch, damit Benutzer zwischen den Anwendungen OneDrive, Word Online, Sway und anderen Microsoft Apps navigieren können.

(enter image description here

Es gibt aber auch andere Möglichkeiten, dieselbe Botschaft zu vermitteln. Einige verwenden ein 4x4-Symbol mit 16 Punkten, andere ein 4-Punkte-Symbol, das wie eine Erweiterung des Menüs mit 3 Punkten mehr aussieht. Die Frage ist, ob das 3x3 9-Punkte-Apps-Menüsymbol verwendet werden soll, da die größeren Spieler dieses Symbol anscheinend als Metapher für den Wechsel zwischen Anwendungen verwenden.

(enter image description here

Hinweis: Bei dieser Frage geht es nicht um das Hamburger-Menü. Es geht um die Verwendung eines Apps-Menüs.

42
Benny Skogberg

BURGER VS GRID - gleicher oder unterschiedlicher Kontext?

Ich denke, der Burger und das Raster haben im Allgemeinen unterschiedliche Bedeutungen, obwohl sie noch nirgendwo formalisiert sind (zumindest ist es nicht allgemein bekannt wie ISO- oder W3-Standards).

Im Burger-Menü geht es normalerweise mehr um das Navigieren in Inhalten innerhalb eines Kontexts. Sie befinden sich auf einer Website und navigieren zu verschiedenen Unterabschnitten der Seite. Gleiche Seite, unterschiedliche Texte/Bilder. Oder Sie befinden sich in einer App und möchten eine Datei laden/speichern. Es ist immer noch dieselbe App, mit der Sie arbeiten.

Im Rastermenü geht es jedoch darum, Ihren Kontext zu ändern. Sie ändern nicht nur den Inhalt, sondern öffnen eine völlig neue App, Benutzeroberfläche und Art der Interaktion. In den von Ihnen bereitgestellten Bildern wird eine Verknüpfung zu anderen Apps in derselben Suite hergestellt, und im Menü Android) wird von Betriebssystem zu App gewechselt.

Die Aufteilung von Listen gegen Raster ist noch nicht annähernd universell ( zB Android share ), aber ich habe ein gewisses Ungleichgewicht festgestellt, bei dem das Layout wo verwendet wird. und ich denke, die Symbole sollten das unterstützen. Natürlich ist in Android share das <Symbol repräsentativer für die Aktion tan entweder = oder #, aber Sie haben die Idee.


3X3 vs 4X4 Symbole

Sowohl die 3x3- als auch die 4x4-Symbole werden von den Benutzern ungefähr gleich interpretiert, aber das blaue Symbol unterscheidet sich erheblich und liest sich wie ein auf ios basierender "Startbildschirm".

Ein 3x3-Raster hat gegenüber 4x4 einige Vorteile. Es ist einfacher, kann kleiner gemacht werden und passt besser zu den Grafik-/Symbolgrößen (8x8px gegenüber mindestens 18x18): 3x3 grid vs 4x4 gridund es behält die "Dreiheit" des Hamburgers bei, so dass es ein bisschen konsistenter mit allen Schnittstellen der Welt ist. Standardmäßig würde ich also 3x3 verwenden.

Wenn Ihr Menü jedoch 4 Elementspalten oder -zeilen (4x5, 6x4 usw.) wie die Standard-App-Schublade Android App-Schublade) verwendet, haben Sie einen guten Grund, ein 4x4-Raster zu verwenden ähnelt stark dem tatsächlichen Menü.

Aber persönlich ist das so weit wie ich gehen würde (also keine 5x5,6x6 usw.)

18
PixelSnader

Bearbeiten

Die Leute sollten diesen Artikel über das Hamburger-Menü lesen. Das Hamburger-Menü funktioniert, obwohl es oft bessere Lösungen gibt. Große Unternehmen wie Facebook und NBC haben festgestellt, dass dies der Fall ist, und sie haben von Burger Navicon zu einer TAB-Leiste gewechselt, einer Registerkartenleiste mit Symbolen + Wörtern scheint die besten Conversion-Raten zu geben. Komplexe Navigationen können verschachtelt werden.

Lange Version:

Lassen Sie uns das 3x3 9-Punkte-Symbol und das Hamburger-Symbol (Navicons) gleichzeitig diskutieren, da beide derzeit die umstrittensten Techniken im Web sind. Die Symbole sind Implementierungen aus dem mobilen Design und daher leicht skalierbar. Sie sparen uns eine Menge Bildschirmfläche und implizieren Einheitlichkeit. Sie werden von der Mehrheit der Webnutzer erkannt. (Das Symbol ist über 30 Jahre alt!). So weit, ist es gut.

(Burger icon 1981

ABER

  • Usability-Tests haben sich als nicht schlüssig erwiesen

    Designer argumentieren, dass die Symbole von einer jüngeren Bevölkerungsgruppe leicht erkannt werden, andere schlagen vor, dass eine ältere Bevölkerungsgruppe sie erkennt, jedoch nur, wenn sie über Webkenntnisse verfügt. Parallele Tests liefern häufig widersprüchliche Ergebnisse.

  • Weitere Klicks. Ew. Es wird akzeptiert, dass Benutzer die Symbole nicht als einzelnen Link erkennen - wahrscheinlich, weil sie wie eine Gruppe von Links aussehen sollen. Das Hamburger-Symbol fügt Ihrer Navigation eine zusätzliche Aktion hinzu. Wenn ein Klick erforderlich ist, um eine bestimmte Seite zu erreichen, sind jetzt zwei erforderlich. * Tipp: Wenn Sie die Symbole mit einem Rahmen umgeben oder ihm einen Hintergrund geben, sodass er eher wie eine Schaltfläche (skeuomorph) aussieht, werden mehr Klicks ausgeführt.

Am besten Word 'Menü' einschließen.

(Burger menu variation conversion rates

Morten Rand-Hendriksen sagt, wir sollten den Burger durch Text ersetzen . Dies führt zwar zu mehr Klicks, löst das Problem jedoch nicht. Verwenden Sie auch keine anderen Symbole (wie eine Büroklammer , ew).

  • Inhalt verbergen . Aus UX-Sicht sollten Benutzer keine Aktion ausführen müssen, um herauszufinden, welche Aktionen sie ausführen können. Benutzer werden einfach nicht nach einem Link suchen, von dem sie nicht wissen, dass er existiert.

TL; DR.

NEIN.

"Sie möchten eine" normale "Website, die jedoch auf das Telefon Ihrer Enkelin gedrückt wird."

Die Symbole sind ein Symptom für unser kollektives Versagen, alle Aspekte des Mobile-First-Ansatzes von ganzem Herzen zu berücksichtigen.

Eine Lösung

OP bezieht sich auf "größere Spieler". Schauen wir uns an, wie Facebook dieses Problem gelöst hat.

  • Die Facebook-App hat bekanntermaßen ihr Hamburger-Symbol gegen eine Registerkartenleiste ausgetauscht und infolgedessen verbesserte Conversions erzielt.
  • Die Messenger-App. Ja. Damit? Das große Problem dabei ist, dass sie bereits eine perfekt funktionierende und beliebte App hatten, in die sie das Messaging hätten integrieren können. Facebook hat seine Funktionen unterteilt , indem es die Rolle jeder App auf zwei einfache Apps anstatt auf eine komplexe konzentriert.

Die Unterteilung in Funktionen führt zu einer Reduzierung der Menüoptionen und einer geringeren Notwendigkeit für ein Navicon-Menü.

Grundsätzlich sollten Sie also vereinfachen und unterteilen.

Hinweis: Die Realität ist die beste Lösung, die von den geschäftlichen Anforderungen abhängt.

14
RobSeg

Die Bilder selbst geben an, welches Format das Menü haben wird. In diesen Fällen ist das Rasterlayout, das heutzutage bei Webanwendungen üblich ist, im Fall von drei Zeilen normalerweise ein Menü mit einem Listenstil. Ich denke, 4 Punkte sind definitiv übertrieben, man kann den Punkt mit 3 vermitteln.

Es hat wenig mit dem Inhalt zu tun und mehr mit dem Layout.

4
insidesin

Ich denke, dieses spezielle Symbol ist als "App Drawer Icon" bekannt. Wenn ich mich nicht irre, begann der Trend mit dem App-Schubladen-Symbol als Starter für Apps auf Android und Blackberry, insbesondere auf Nexus- und Samsung-Handys (in den frühen Tagen)) Seitdem wurde es als Starter-Symbol für eine Liste von verwendet Apps.

Bearbeiten (basierend auf meinen Kommentaren und anderen Vorschlägen) - Ich denke, eine der Grundlagen der Benutzerfreundlichkeit von Symbolen besteht darin, dass das Verständnis eines Benutzers für ein Symbol auf dem vorherigen basiert Erfahrung. Im Laufe der Jahre wurde das App Drawer-Symbol als App Launcher besser erkennbar. Ich würde jedoch immer noch einen Erkennbarkeitstest durchführen. Fügen Sie nach Möglichkeit ein Textetikett hinzu.

3
Adit Gupta

Ich würde es vermeiden ... für jetzt

Weil...

  • Das Rastersymbol ist so unkommunikativ wie das Hamburger-Symbol. Der Hamburger kommuniziert vage eine Menüliste, genauso wie das Raster vage eine Matrix von Symbolen kommuniziert. In Bezug auf das kommunikative Design sind beide problematisch, da davon ausgegangen wird, dass der Benutzer das UI-Layout des zugrunde liegenden Menüs kennt und dies korrekt mit dem Design des Symbols in Beziehung setzen kann.

  • Aufgrund dieser Kommunikationsprobleme verlassen Sie sich jetzt auf Konvention und Universalität/Allgegenwart als primäres Mittel zur Vermittlung des Zwecks des Symbols. Da das Symbol heutzutage nicht annähernd universell genug ist, ist die Konvention noch kein zuverlässiges Mittel, um sicherzustellen, dass Benutzer verstehen, was das Symbol bedeutet.

Dies kann sich im Laufe der Zeit ändern, wenn die Verwendung des Rastersymbols erweitert wird, aber nur die Zeit kann dies erkennen. Im Moment sehe ich keinen wesentlichen Unterschied zwischen den Vor- und Nachteilen des Rasters und den gut dokumentierten Vor- und Nachteilen des Hamburger-Symbols.

2
tohster