it-swarm.com.de

Alternative zum Hamburgermenü? UI-Beispiel im Inneren

Ich entwerfe eine App mit vielen sekundären Funktionen (sie muss vorhanden sein), z. B. "Video-Anleitungen", "Info", "FAQ", "Verbindungsanleitung" usw.

Zuvor hatten wir eine Registerkartenleiste mit 3 Registerkarten (Startseite, Programme und mehr), sodass sich alle diese sekundären Funktionen im Menü "Mehr" befanden. Jetzt haben wir die Registerkarte "Startseite" und "Programme" zu einer Registerkarte zusammengefasst, was die Verwendung einer Registerkartenleiste irgendwie lächerlich macht. Wir haben uns für ein Hamburger-Menü in der oberen linken Ecke entschieden, da dies alles sekundäre Navigation ist, die der Benutzer sowieso selten verwenden wird.

Allerdings bekomme ich auf diese Weise kalte Füße, da alle sagen "Ditch the Hamburger Menu" und all diesen Jazz. Und auf dem iPhone X sieht es schlecht aus. Ich bin mir jedoch nicht sicher, welche Alternativen ich habe. Ich meine, eine Tab-Leiste mit "Home and More" zu machen, macht keinen Sinn. Ich freue mich auf Ihre Ideen. Unten sehen Sie einen Screenshot der aktuellen Benutzeroberfläche:

(enter image description here

Nur um einige Dinge zu klären:

  1. Ich kann den Akku und das Hilfesymbol nicht entfernen. Da es sich um eine App für Hörgeräte handelt, zeigt das Batteriesymbol den Batteriestand der Hörgeräte an (und ob beide HAs tatsächlich angeschlossen sind). Sie können auf das Symbol tippen, um weitere Informationen anzuzeigen. Durch Tippen auf das Fragezeichen wird eine Hilfeüberlagerung aktiviert. Unsere Benutzer sind ~ 65 Jahre alt, also brauchen sie das - vertrauen Sie mir.

  2. Und ja, ich suche kein besseres Symbol. Ich mache mir Sorgen, dass das "Verstecken" dieser Navigation schaden könnte, aber da es sich nur um sekundäre Funktionen handelt, die die Benutzer selten verwenden (und ich bin mir zu 100% sicher), kann ich mit Sicherheit sagen, dass es in Ordnung ist, sie zu verbergen, da dies der Fall ist wird dann keine Störung für das verursachen, was eigentlich wichtig ist. Ich war eher auf der Suche nach einem Muster, das sowohl für iOS als auch für Android geeignet ist, da iOS im Allgemeinen "Verwenden Sie keine verschiebbare Navigationsschublade" sagt, was dieses Hamburger-Menü höchstwahrscheinlich sein wird.

21
Rasmus

Heutzutage gibt es viele Möglichkeiten, versteckte Navigation anzuzeigen.

Alles läuft darauf hinaus, was Ihr Lieblingsessen ist!:

(enter image description here

Scherz beiseite, idealerweise möchten Sie eine offensichtliche Möglichkeit zu zeigen, wo Ihre Navigation lebt . Ich wage jedoch zu sagen, dass Hamburgermenüs so alltäglich geworden sind, dass die Leute sie jetzt erwarten und die Funktionalität dahinter verstehen.

Je nachdem, wer Ihre Benutzer sind, müssen möglicherweise einige Dinge beachtet werden.

Kennen sie sich mit Technologie aus? Werden sie schon einmal auf ein Hamburgermenü gestoßen sein?

Wenn nicht, oder wenn Sie Benutzer von beiden Seiten des Lagers haben, ist ein Menüsymbol mit dem Wort "Menü" möglicherweise besser für Sie geeignet.

Wie immer einige Tests durchführen. Sehen Sie, wie Ihre Benutzer mit der App interagieren. Guerilla-Benutzertests und A/B-Tests sind perfekt für diese Art von Problemen.

Lassen Sie sich am Ende nicht durch das definieren, was Ihre Kollegen Ihnen sagen. Je nach Fall können sie falsch oder richtig sein. Gehen Sie daran, wie Ihre Benutzer mit Ihrer Benutzeroberfläche interagieren.

PS: Wenn Sie sich für ein Hamburger-Symbol entscheiden, wählen Sie ein tatsächliches Hamburger-Symbol. Der Text, den Sie derzeit haben, sieht aus wie linksbündiger Text.

36
Socrates Kolios

Das beste Symbol ist immer Text

Nachdem dies gesagt ist, lassen Sie uns Ihr Problem ein wenig untersuchen: Erstens sieht das überhaupt nicht wie ein Hamburgermenü aus, und der Kreis macht es noch verwirrender.

Darüber hinaus ist die gesamte Ikonographie etwas verwirrend. Zum Beispiel ... warum haben Sie ein Akkusymbol in der App und dann ein Akkusymbol vom Gerät? Dient es einem wirklichen Zweck? Wenn ja ... gehört es nicht zu den Einstellungen (daher in einem anderen Symbol oder vielleicht sogar im Hamburger-Menü)?

Ganz ehrlich, ohne zu wissen, was Ihre Tasten tun, würde ich sagen, dass Sie möglicherweise alles auf dem Hamburger hinzufügen und nur ein einziges Symbol haben sollten. Und wenn Sie einen Hamburger wollen ... muss er wie ein Hamburger-Symbol aussehen, damit Benutzer die Erschwinglichkeit auf den ersten Blick verstehen. Diese Kreise machen es laut, überladen und verwirrend.

Denken Sie daran, dass die Ikonographie eine Disziplin mit sehr strengen Vorschriften ist. Sie können nicht einfach ein zufälliges Symbol hinzufügen (in diesem Fall ist dies das Symbol für linksbündiger Text in fast jeder Anwendung) und oben Fügen Sie dazu einen Kreis mit denselben Linien wie das Symbol hinzu, da Sie etwas völlig anderes erstellen. Und wenn Sie nicht viel über Ikonographie wissen, werden Sie wahrscheinlich die Marke verfehlen (ich weiß, dass ich das wahrscheinlich tun würde und ich habe viel Erfahrung in diesem Thema).

Zusamenfassend

Beseitigen Sie dieses Rauschen, verwenden Sie ein einfaches Hamburger-Symbol und eine Textbeschriftung, und Sie können alle App-Symbole wie Universal , Music anzeigen usw. in derselben Ansicht ohne zusätzliche kognitive Belastung für Benutzer. Sie können so einfach vorgehen:

(enter image description here

15
Devin

Was ist, wenn Sie einige der Menüoptionen anzeigen, die Ihnen am meisten kalte Füße geben, und dann eine Schaltfläche "Mehr ..." bereitstellen? Sie können die Schaltflächen nach Ihren Wünschen gestalten und so viele oder so wenige haben, wie Sie möchten.

(Mockup of surfacing some menu options and providing a "More..." button

4
54an3

Alle Dinge, die Sie für das Hamburger-Menü sagen, klingen so, als wären sie im Allgemeinen hilfebasierte Inhalte. Könnten sie dann nicht mit Ihrem vorhandenen Fragezeichen/Ihrer vorhandenen Hilfeschaltfläche zusammengeführt werden? Ich weiß nicht, was die Schaltfläche bereits für Sie bedeutet, aber wenn es sich nicht um einen Link aus der App handelt (der eigentlich sowieso nicht nur eine Schaltfläche enthalten sollte, sollten Benutzer beim Verlassen der App immer klar benachrichtigt werden), können Sie dies nicht tun Optionen für den Zugriff auf diese Elemente unter dieser Seite, entweder als Links/Schaltflächen oder als dedizierte Registerkartenleiste für diese erweiterten Hilfeelemente?

2
Flatlyn

Verwenden Sie immer ein Symbol + Text.

Das Symbol zeigt an, dass der Artikel freundlich und interaktiv ist.

Der Text bedeutet, dass es sich um ein Menü handelt und nicht um ein dekoratives.

Wenn es kein Symbol gibt, handelt es sich um einen Link auf einer Website. Jeder andere Ort muss ein Symbol in UX sein.

Wenn für einen Menüpunkt kein Text vorhanden ist, besteht die einzige logische Erklärung darin, dass die Bildschirmbreite des Benutzers nur 40 Pixel betragen darf. Das oder der Entwickler versteht Benutzer nicht. Dies kann vergeben werden, da hervorragende Beispiele für GUI/UX-Praktiken verstummt sind. Es ist genau wie bei professionellen JavaScript-Entwicklern: Wir verwenden niemals bereitwillig Frameworks oder Bibliotheken. Diese haben sich nur etabliert, weil Amateure das Konzept des wiederverwendbaren Codes nicht verstehen . Negative Trends, die die Benutzerproduktivität beeinträchtigen und vollständig zerstören, können jedoch negiert werden.

Microsoft gibt bei vielen Gelegenheiten an, Benutzerfallstudien durchgeführt zu haben. Mit wem? Ihre Manager?! Je weniger technisch versiert der Benutzer ist (der immer noch einen relevanten Bedarf an dem hat, was getestet wird), desto besser ist eine tatsächliche Benutzerfallstudie. Gleiches gilt für die erfahrensten Power-User. Sie möchten maximieren Sie Ihr Verständnis nicht nur, wer Ihr Produkt/Ihre Dienstleistung nutzt, sondern auch wie .

Schauen Sie sich jedes einzelne Menü auf dem Handy an und wenn Sie kein Spiel spielen, das mit Dingen überladen ist, um Zeit zu verschwenden, werden Sie es überwältigend (wenn nicht wörtlich) tun in absoluten) immer Leerzeichen neben dem Nur-Symbol-Menü sehen.

... und wenn Sie es aus irgendeinem Grund nicht tun, sollte das Layout in Frage kommen.

(Real/classic) Das Installationsprogramm von Opera ist ein (und das * einzige) perfekte Beispiel für ein Anwendungsinstallationsprogramm. Nach dem Öffnen wird das Programm mit einem einzigen Klick für Personen installiert, die nie etwas auf dem Bildschirm gelesen haben , obwohl es Optionen und erweiterte Optionen mit einer minimalen Anzahl von Schritten gibt, um dies zu erreichen Tore.

Neueren weniger oder völlig unerfahrenen Benutzern wird vergeben, dass sie nicht die Erfahrung haben, zu verstehen, wie sich das, woran sie arbeiten, erweitern wird. In solchen Fällen: Überbeanspruchen Sie nicht, bis Sie bewiesen haben, dass das, woran Sie arbeiten, in ein oder zwei Jahren nicht aus der Tür geworfen wird. Bleiben Sie flink, bis Sie herausfinden, was kleben bleibt. Sobald Sie wissen, welche Sticks ordnungsgemäß Ihre UX im Laufe der Zeit anpassen, tun Sie nicht entfremden Sie Ihre Early Adopters!

Aus der Sicht eines erfahrenen UX-Designers haben wir ein sehr gutes Verständnis der UX-Hierarchie. Je mehr Teile einer Anwendung verwendet werden, desto weniger Schritte sollten erforderlich sein, um auf etwas zuzugreifen.

UX-Master sind nicht nur Power-User, sondern auch einfühlsame Power-User. Vollständige Anpassung der Symbolleiste (Positionierung der Symbolleiste auf anderen Symbolleisten auf einer bestimmten Seite und auch auf den Seiten) sowie Positionierung der Elemente auf Symbolleisten. Wenn Sie über einen rechtmäßig umfangreichen Satz von Optionen der ersten Ebene verfügen, sollte Ihre GUI es Benutzern ermöglichen, Befehlssymbole + Textschaltflächen hinzuzufügen/zu entfernen und sogar einzelne Symbolleistenschaltflächenanzeigen zu ändern (nur Symbole, nur Text und Symbol + Text). Ein echter UX-Master-Power-User, der seine eigene Anwendung ausgiebig nutzt , kann nicht nur seine eigenen Anforderungen mit einer grafischen Benutzeroberfläche erfüllen, sondern auch vollständig befriedigen ein weiterer echter UX-Master-Power-User, der die erste UX-Master-Anwendung ausführlich behandelt .

Da Sie mobil sind und viele verschiedene Optionen haben, empfehle ich Ihnen, den Android Nova Launcher) zu testen. Er ist ein gutes Beispiel für die Anpassung der Benutzeroberfläche und die Emulation ist eine großartige Idee.

Darüber hinaus sollten Sie den Zielbereich Finger/Daumen berücksichtigen. Einige Leute haben dicke Finger/Daumen, einige haben dünne Finger/Daumen und einige Leute haben Nägel, die lang genug sind, um Godzilla in einem einzigen Schlag aufzuspießen und zu töten.

Schließlich unterschätzen Sie niemals die Person, die die GUI so anpasst, dass Sie sie schlagen möchten. Vorausgesetzt, sie haben von sich aus einen gesunden Willen gewählt, ist es wichtig, sich daran zu erinnern: Sie verwenden Ihre Anwendung, nicht die einer anderen. Verwenden Sie diese Endfälle, um sicherzustellen, dass Sie bei größeren Updates nicht alles kaputt machen! Irgendwo im Web gibt es einen Artikel, der Benutzeranpassungen zeigt, die bei jedem Upgrade von Windows ab Version 1.0 vollständig unterbrochen werden.

Also zusammenfassend:

  1. Neue UX-Designer sollten nicht zu viel Commit ausführen, bis sie die langfristige UI-Hierarchie verstanden haben.
  2. Erfahrene UX-Designer minimieren UX-Störungen mit neuen Versionen.
  3. Master-UX-Designer beseitigen UX-Störungen mit neuen Versionen.
  4. Symbol + Text für Ihre Menüs standardmäßig .
  5. Das Symbol oben oder das Symbol links ist subjektiv für das Seitenverhältnis des Bildschirms.
1
John