it-swarm.com.de

Wie solltest du zeigen, dass ein Akkordeon erweitert wird?

Wenn Sie ein Akkordeon haben, benötigen Sie eine Möglichkeit , um anzuzeigen, dass der aktuelle Status erweitert ist.

Es gibt verschiedene Möglichkeiten, damit umzugehen, und jede wird von einer Reihe angesehener Websites und Frameworks verwendet. Daher ist nicht klar, welche Methode in welcher Situation am besten geeignet ist.

Wann ist es am besten, welche Methode anzuwenden? Bonuspunkte für Studien dazu.


Überhaupt keine Symbole, nur Farbe, um die Erweiterung anzuzeigen

Google Mail für Android verwendet dies, aber hier sind einige klarere Beispiele:

enter image description hereenter image description here


Links und unten Chevrons rechts

Diese werden von der BBC verwendet Global Experience Language :

enter image description here


Auf und ab Chevrons auf der rechten Seite

Diese werden in Dokumentation zu Android Design Guidelines und in Silverlight verwendet:

enter image description hereenter image description here


Rechts und unten Chevrons links

enter image description here


Plus- (+) und Minuszeichen (-) rechts

Dies wird in ExtJS standardmäßig verwendet

enter image description here


Plus- (+) und Minuszeichen (-) links

enter image description here

77
JohnGB

Ich verbringe eine ganze Weile damit, verschiedene Optionen für Akkordeons zu prüfen (teilweise beim Schreiben der Frage), und obwohl dies nicht endgültig ist, denke ich derzeit wie folgt:

Linke gegen rechte Seite

Wenn Sie Kontrollkästchen in Ihrem Akkordeon haben, ist es sinnvoll, die Anzeige auf der gegenüberliegenden Seite Ihrer Kontrollkästchen zu haben. Dies dient hauptsächlich dazu, die Situation mit vielen Indikatoren zu vermeiden, die sehr nahe beieinander liegen, macht es jedoch auch weniger wahrscheinlich, dass ein Benutzer versehentlich eine Option auswählt, wenn er beabsichtigt, die andere auszuwählen.

Dies ist eine ähnliche Argumentation wie der Grund, warum sich die Sternauswahl und das Kontrollkästchen in Google Mail für Android auf gegenüberliegenden Seiten befinden.
enter image description here

Andernfalls scheint es in erster Linie eine Entwurfsentscheidung zu sein, die Kontrollkästchen links oder rechts zu haben. In Bezug auf das Design bevorzuge ich das Recht, da es die Aufmerksamkeit des Benutzers auf den Inhalt lenkt.

Erschwinglichkeit

Wenn Sie kein Symbol als Indikator haben, gibt es kaum einen Hinweis darauf, dass Sie ein Akkordeon im Gegensatz zu einer einfachen Liste betrachten. Dies mag für viele Menschen kein Problem sein, aber ich würde empfehlen, eine Art Indikator zu haben. Dies sollte die Verwendung vereinfachen, auf (wohl) Kosten eines geschäftigeren Designs.

Einfaches Scannen und Verstehen

Die Verwendung eines Auf/Ab- oder Links/Rechts-Chevrons war für mich immer problematisch. Ich bin mir nie sicher, ob der Up Chevron ein Zustand oder eine Handlung ist, und es ist für Legastheniker schwierig, den Unterschied zu erkennen. links/unten (Anzeige rechts) oder rechts/unten (Anzeige links) scheint die geringste Verwirrung zu verursachen, während es dennoch einfach zu scannen ist.

+ und - sind die klarsten in Bezug auf das, was sie tun, aber sie haben (in internen Tests) gezeigt, dass sie beim schnellen Scannen langsamer voneinander zu unterscheiden sind. Daher würde ich diese vermeiden, wenn die Scangeschwindigkeit wichtig ist.

Farbe und Farbton

Dies ist die einfachste Methode, bei der die Verwendung von Farbe (oder Farbton) zur Anzeige eines erweiterten Elements immer eine gute Idee ist. Es kann sehr subtil sein und zwischen reduzierten und erweiterten Elementen unterscheiden.

Google subtil in ihren Android Designrichtlinien, aber ich würde empfehlen, den Unterschied klarer zu machen.

enter image description here

9
JohnGB

Ich schlage vor, diese zu kombinieren:

  • chevrons auf der rechten Seite (natürlicher, besonders bei Berührung, aber keine Beleidigung, wenn Sie es auf der linken Seite lassen) - natürlich sollte die gesamte Leiste zum Erweitern/Zusammenziehen anklickbar sein - nicht nur der Chevron
  • einzug für die untere Ebene
  • hintergrundfarbe (heller für niedrigere Ebenen)
  • schatten (um zu zeigen, dass die untere Ebene hinter/unter der höheren liegt)
  • optional: Text rechts erweitern/verkleinern

Ich glaube, die Kombination kann wirklich schön sein, also macht es keinen Sinn, nur eine zu wählen, während alle das Design für den Benutzer klarer machen.

18
Dominik Oslizlo

Hier ist eine, um die Diskussion ins Rollen zu bringen. Was ich sehe, ist eine Frage nach der besten Darstellung des Systemzustands in einem Akkordeonmenü. Sichtbarkeit des Systemstatus anhand der 10 Usability-Heuristiken von Nielsen. Im Folgenden sind meine Gründe für jede Option aufgeführt:

Überhaupt keine Symbole, nur Farbe, um die Erweiterung anzuzeigen:

Zustand dargestellt durch Farbe.

Minimales Design und funktioniert gut für einen normalen Webbenutzer (jemand, der intelligent genug ist, um auf der Webseite zu navigieren). Ihr zweites Beispiel (Weblog-Tools) ist jedoch nicht dasselbe wie das von Google Mail. Google Mail verwendet 3 Farben: Auswahl = Grün, Hauptmenüelement = Dunkelgrau, Untermenüelemente = Hellgrau. Während das Weblog nur 2 Farben verwendet. Ich bin der Meinung, dass das 3-Farben-System einen besseren Aufruf zum Handeln hat als das 2-Farben-System.

Chevrons:

Zustand, dargestellt durch Chevrons/Pfeile.

Persönlich bevorzuge ich links und unten gegenüber rechts und unten und oben und unten.

Die hoch & runter brauchen die meiste Zeit, um zu verstehen. Bedeutet up, dass der Header nach oben geht, um Dinge zu enthüllen? Oder gleitet der Inhalt in der Kopfzeile nach oben?

Die rechts & unten sind einfach zu verstehen (IMO), rechts zeigt auf den Titel und unten zeigt auf den Inhalt der Titelleiste.

Die links & unten sind meine bevorzugte Wahl. Sie haben die gleiche Einfachheit von rechts und unten, sind aber nicht unbedingt aus Ihrer Sicht. Sie können den Status überprüfen, indem Sie auf den Chevron am rechten Ende blicken, oder Sie können die Titel am linken Ende weiterlesen.

Plus (+) und Minus (-):

Zustand dargestellt durch Symbole +/-

Das gleiche Argument wie die Chevrons, ich bevorzuge die Platzierung am rechten Ende der +/- Symbole, da sie vorhanden sind, aber in der Peripherie und nicht unbedingt meine Aufmerksamkeit erfordern.


Eine Alternative, die Sie verpasst haben, ist: Doppelte Durchsetzung des Staates, verwenden Sie Farbe in Kombination mit den Chevron/Plus-Minus-Symbolen.

Jetzt ist die Wahl zwischen Chevrons, +/- oder Balkenfarben für mich eher eine Designentscheidung. Aber ich würde zuerst versuchen zu sehen, ob die doppelte Durchsetzung brauchbar erscheint oder nicht. Wenn nicht, würde ich mit den Chevrons/Plus-Minus für ein minimaleres Thema gehen (wenn Sie nicht viele Farben verwenden) und mit der Farbe, wenn ich ein farbzentrierteres Minimal-Design möchte, bei dem Sie viele Farben, aber nicht viele Symbole haben/Symbole.

6
rk.

Diejenigen, die mir persönlich am besten gefallen, sind diese, aber nicht aus einem der genannten Gründe

enter image description hereenter image description here

Im ersten Fall ist es neben der Hintergrundfarbe offensichtlich, dass die Elemente von dem darüber liegenden Element entfernt werden, weil die Unterelemente sind alle eingerückt.

Im zweiten Fall ist es offensichtlich, dass das Element und der Text darunter zusammengehören, da im Gegensatz zu allen anderen Beispielen es gibt keine Trennlinie zwischen ihnen. Auch hier ist die unterschiedliche Hintergrundfarbe wichtig zeigen an, dass es ausgewählt ist.

Ich habe ehrlich gesagt nicht einmal bemerkt, bei welchen Beispielen Pfeile nach oben oder unten oder aus dem Bildschirm zeigen oder gar keine Pfeile. Was wirklich wichtig ist, ist, auf einen Blick erkennen zu können, welche Elemente als Untermenü des darüber liegenden Elements zusammengefasst sind. Also zum Beispiel dieser:

enter image description here

ist schrecklich; Die Unterelemente haben denselben Hintergrund, dieselbe Schriftart, denselben Einzug usw.

+1 Chevrons rechts und unten links

Dies ist ein häufig verwendetes UI-Symbol, das die meisten Menschen aufgrund ihrer Erfahrung erkennen würden.

3
Sohan

Ich denke, Pfeile, die nach links zeigen, funktionieren am besten. Die + s und -s sind nervig und verwirren Ihr Gehirn. Ich mag Dinge auf der linken Seite, aber ich bin Rechtshänder, also könnte das einen Einfluss haben. Und die Pfeile, die nach unten oder quer zeigen, sind nett. Normalerweise können Sie leicht verstehen, was sie bedeuten. Es sollte auch einen Einzug geben, die Farben sollten einen mittleren Kontrast haben, wie offen = weiß und geschlossen = hellgrau.

2
pythonlover

Aus dem Artikel: Platzieren von Symbolen Ihre Akkordeonmenüsymbole

"Es gibt zwei gebräuchliche Symbole zum Reduzieren: das Minus- und das X-Symbol. Benutzer können das Minus-Symbol falsch interpretieren, da es häufig das Entfernen oder Löschen darstellt. Benutzer sollten nicht das Gefühl haben, Menüoptionen zu verlieren, wenn sie das Menü reduzieren.".

Das X-Symbol stellt das Reduzieren besser dar, da es häufig zum Schließen von modalen Fenstern verwendet wird. Wenn Benutzer das Menü reduzieren, schließen sie es und verlieren es nicht. Dies entspricht eher dem, was Benutzer tun und was sie erwarten. "

2
Trebles57

Verwenden Sie die seit fast zwanzig Jahren erlernten Gewohnheiten mit Windows und insbesondere Windows Explorer und in vielen Bäumen im gesamten Web: [+] und [-] links.

Sie werden sicher sein, dass alle Benutzer diese ergonomischen Symbole erkennen.

Und seien Sie vorsichtig mit dem Pfeil links. Es ist neu in der mobilen Benutzeroberfläche, um zu erklären, dass es eine Seite danach gibt. Behalten Sie also den Pfeil für dieses Verhalten bei. Ich stimme einigen Schriften zu, Pfeil nach unten und links oder unten und oben sind verwirrt. ..so wenn Sie jeweils ein wenig nachdenken müssen, verwenden Sie eine Schnittstelle. ... die Wahl ist nicht gut.

1
pierre lebailly

Schauen Sie sich einfach diesen UX-Artikel über Akkordeon-Menüs und die Position des Symbols an. Hier erfahren Sie, dass die nächste Option die beste ist:

(enter image description here

0
Userflow