it-swarm.com.de

In welche Richtung sollten Pfeile in einem zusammenklappbaren Akkordeon zeigen? Links / unten ... unten / oben?

Was ist der beste Weg, um anzuzeigen, dass es möglich ist, ein Element im Akkordeonstil zu öffnen und zu schließen?

Pfeil nach links/Pfeil nach unten
Pfeil nach unten/Pfeil nach oben
Pluszeichen/Minuszeichen
… oder etwas anderes?

40
kuakeli

Ich würde sagen, die Konvention sieht vor, dass der Pfeil beim Reduzieren nach rechts und beim Erweitern nach unten zeigt.

Sehen Sie sich dieses Beispiel an, in dem das dritte geöffnet ist:

example collapsing arrows

22
Petrus Theron

Ich bin mir nicht sicher, ob es noch eine endgültige Antwort gibt. So sehe ich die Optionen.

Pfeilkonventionen

Bäume haben nach rechts zeigende Pfeile für geschlossene und nach unten zeigende Pfeile für geöffnete verwendet, was, wie FreshCode in seiner Antwort erwähnt, auf Expander verallgemeinert wurde. Es ist eine ziemlich gut etablierte Konvention, die auf Vista für Windows und Mitte der 1990er Jahre für Mac zurückgeht (wo sie als "kleine Pfeile" bekannt waren).

Ich habe mir Sorgen gemacht, dass dies zu Verwirrung führen könnte. Bei anderen Verwendungen von Pfeilen wie Kaskadenmenüs, geteilten Menüs, Menüschaltflächen und Dropdown-Listen schlägt der Pfeil nur eine vorübergehende Anzeige einiger Optionen vor, nicht die feste Öffnung eines gesamten Bereichs, der explizit geschlossen werden muss. Auch bei diesen anderen Verwendungszwecken von Pfeilen gibt die Pfeilrichtung unweigerlich die Bewegung an, die der Benutzer bekommt bei Aktivierung. Im Gegensatz dazu verursachen bei Bäumen oder Expandern die nach rechts zeigenden Pfeile eine Abwärtsbewegung und der nach unten zeigende Pfeil eine Aufwärtsbewegung. Ich habe nicht gesehen, dass dies ein Problem ist (z. B. Benutzer denken, dass der Abwärtspfeil "noch mehr erweitern" bedeutet), aber ich habe nicht viel Expander-Nutzung gesehen.

Fenstersteuerungskonventionen

Vielleicht ist es besser, einen Abwärtspfeil als geschlossen zu verwenden, damit zumindest die Richtung des Pfeils mit der Bewegung übereinstimmt, die er erzeugt, und mit seiner Verwendung in anderen Steuerelementen. Ein geöffneter Expander würde ein X-Symbol zum Schließen haben, das seine Verwendung für Fenster nutzt. Vielleicht denken Benutzer jedoch, dass das „X“ Löschen bedeutet, wie in „Alle Eingaben löschen, die ich gerade in den Expander eingegeben habe“, und daher befürchten Benutzer, jemals einen Expander zu schließen.

Eine geeignetere Möglichkeit zur Verwendung von Fenstersteuerelementen ist möglicherweise die Verwendung der Minimierungs- und Maximierungssymbole für geöffnete bzw. geschlossene Expander. Die Verwendung von Fenstersteuerungskonventionen ist jedoch wahrscheinlich am effektivsten, wenn sich die Steuerelemente rechts befinden, wie dies auch für Windows der Fall ist. Dies kann zu einem zusätzlichen Schwenken der Maus führen, da Eingabesteuerungen in der Regel linksbündig sind. Außerdem mache ich mir Sorgen, dass Benutzer Expander-Steuerelemente mit Fenstersteuerelementen verwechseln, wenn der Expander zum oberen Rand des Fensters gescrollt wird.

Andere Baumkonventionen

Die Verwendung von "+" für geschlossen und "-" für offen ist eine Alternative, die in Baumsteuerelementen vor Vista verwendet wird, um den Widerspruch in Richtung der Pfeilrichtung zu vermeiden. Es scheint in Ordnung zu funktionieren, aber wie die meisten Optionen, die ich bisher behandelt habe, habe ich mich immer gefragt, ob einige Benutzer verwirrt sind, ob die Symbole die Aktion darstellen sollen, die der Benutzer erhält bei Aktivierung oder dem aktuellen Zustand des Expanders (sie nehmen an, dass "-" bedeutet, dass der Expander geschlossen oder zumindest nicht vollständig geöffnet ist).

Ein weiteres erwägenswertes Symbol sind die von Java Swing) verwendeten "Taps" -Symbole.

Handle pivots from horizontal to vertical for opened. Image from Java Look and Feel Guidelines.

Aus irgendeinem Grund habe ich das Gefühl, dass sie das Aktions-/Zustandsproblem weniger zweideutig behandeln.

Umschalttaste

Die übliche Art und Weise, wie ich das Problem mit der Aktion/dem Status behandeln möchte, ist die Verwendung von Schaltflächen zum Umschalten, wie in Antwort beschrieben. Sollte ein Symbol den aktuellen oder nächsten Status anzeigen? In dieser Anwendung bedeutet dies, dass Sie verwenden das same Symbol, das "open this" bedeutet (ich denke, das Pluszeichen ist am wenigsten mehrdeutig) für beide geschlossene und geöffnete Expander, aber die Schaltfläche für das Symbol hat ein erhöhtes Erscheinungsbild für geschlossene Expander und ein depressives Erscheinungsbild für geöffnete Expander.

Habe ich keine endgültige Antwort erwähnt?

Bei so vielen Problemen glaube ich nicht, dass wir wirklich wissen, welches ohne einige Benutzertests am besten ist. Es ist durchaus möglich, dass es keinen großen Unterschied macht. Wenn Sie am Ende testen, veröffentlichen Sie Ihre Ergebnisse bitte hier zurück.

14

Lance Gutin von Vidget hat diesbezüglich einige Benutzerrecherchen durchgeführt . Mein einziger Nachteil ist, dass es eine schlechte Idee ist, kein Symbol zu verwenden, und wenn Sie das Symbol rechts platzieren, verlängert sich die Arbeitszeit. Ich denke, das Problem ist, dass dies ein Problem ist, das keine guten Lösungen hat.

Bei der Analyse der Ergebnisse waren die überzeugendsten Daten die Position der Symbole. Viele Teilnehmer, denen ein Symbol rechts neben dem Menüpunkt angezeigt wurde, zogen es vor, auf das Symbol anstatt auf die Textbezeichnung zu klicken (Abbildung 2). Außerdem führten Designs mit Symbolen auf der rechten Seite in jedem Fall zu langsameren Aufgabenzeiten (Abbildung 3).

9
Holli Smith

Was ich am häufigsten sehe, ist ein Abwärtspfeil oder kein Pfeil. (Glamour ist eine Ausnahme mit einem Rechtspfeil, aber ich muss zugeben, dass ich erwartet habe, dass er zu einer separaten Seite mit Kommentaren navigiert und nicht als Akkordeon fungiert.)

Facebook
facebook accordion link

NYTimes
nytimes accordion link

Washington Post
washpost accordion link

Glamour
glamour accordion link

Stackexchange
stackexchange accordion link

3
Taj Moore

Ich mag es sehr, Pfeile zu verwenden, wenn ich eine Baum-/Dateistruktur erkunde. Aber ich denke, der Inhalt eines Akkordeons ähnelt einem Dialog, insbesondere erwarte ich keinen Baum.

Akkordeons haben für mich ihre Erweiterungs-/Reduzierungsschalter auf der rechten Seite (wo ich denke, dass Sie Ihr Links-/Abwärtssymbol platzieren) und Bäume auf der linken Seite. Sie verwenden +/- bzw. Pfeilsymbole.

Ich denke an einen Ordnerbereich gegen ein Feature-Panel, wie Windows Explorer gegen Visual Studio.

Aber als Antwort auf Ihre Frage, wenn ich Pfeile in einem Akkordeon verwenden würde, würde Up nicht geschlossen kommunizieren, sondern gebrochen. MEINER BESCHEIDENEN MEINUNG NACH.

2
saybeano

Meiner Meinung nach macht das Windows-Baummuster (links/unten) keinen Sinn, aber es scheint, dass viele Benutzer gelernt haben, es zu verwenden.

(runter/rauf) Macht für mich mehr Sinn, aber ich denke, ich bin nicht dein Benutzer.

(Plus/Minus) Ist weniger verwirrend, wie Michael Zuschlag erwähnte

Vielleicht A/B-Tests durchführen?

0
Iuzzef