it-swarm.com.de

Was ist die optimale Höhe für eine Dropdown- / Combobox?

Ich habe diese Frage gefunden, und während Listenfelder Cousins ​​des Dropdown-Felds sind, gibt es meiner Meinung nach einzigartige Eigenschaften von Kombinationsfeldern, für die eine separate Frage erforderlich ist.

Ich arbeite mit einem Javascript-Ersatz für ein Kombinationsfeld, um eine bessere Skinnbarkeit zu ermöglichen. Da dies im Wesentlichen ein benutzerdefiniertes Steuerelement ist, dachte ich, ich würde die Höhe des Dropdowns ebenfalls auf etwas Optimales einstellen.

Diese Frage on stackoverflow spricht über die verschiedenen Regeln für verschiedene Browser:

(a) the height needed to show all entries, or 
(b) the height needed to show (x) entries (with scrollbars to see remaining) 
     (20 in Firefox & Chrome, 30 in IE6,7,8, 16 for Opera 10, 14 for Opera 11, 
      22 for Safari 4, 18 for Safari 5, 11 in IE5.0,5.5) 
(c) In IE, if there are no options, a stupidly high list 
   of 11 blanks entries. 

Und das sehen Sie in den folgenden Screenshots: enter image description here

Eine andere Möglichkeit besteht darin, die Höhe des Dropdowns so festzulegen, dass es sich über das gesamte Ansichtsfenster erstreckt (und bei Bedarf Bildlaufleisten hinzuzufügen):

mockup

bmml source herunterladen - Wireframes erstellt mit Balsamiq Mockups

Kann jemand Forschung/Beweise/Erfahrung in Bezug auf optimale Höhen von Comboboxen liefern? Es scheint einen ziemlich großen Unterschied zu geben, wenn wir uns die Regeln ansehen, die von Browser-Anbietern bereitgestellt werden.

5
F21

Dropdown ist bekanntermaßen schwer neu zu erstellen. Es gibt viele gute Gründe, das Dropdown-Menü des Browsers unverändert zu verwenden. Die folgenden Screenshots zeigen eines davon: Abhängig von der Position des Dropdown-, Größen- und Positionsbrowserfensters kann der Browser das Dropdown-Menü außerhalb seines chrome anzeigen Maximieren Sie die Benutzerfreundlichkeit. Mit einem Javascript-Dropdown können Sie dies niemals tun.

Es gibt auch andere Fallstricke ... wie die Entwicklungszeit, die zum Erstellen der Tastaturunterstützung benötigt wird usw. Dies allein ist nicht trivial.

Ich war schon einmal auf diesem Weg, also wollte ich nur, dass die Leute die nicht so offensichtlichen Vorteile des Browser-Dropdowns kennen.

Um Ihre Frage zu beantworten, ist 16-18 eine gute Zahl, wenn Sie ein Javascript-Dropdown in normaler Größe erstellen. Wenn Sie mehr als das tun, besteht die Gefahr, dass Sie in eine Situation mit doppeltem Bildlauf oder zugeschnittenem Menü geraten, für die Javascript-Dropdowns häufig nicht geeignet sind.

enter image description here

enter image description here

2
Jung Lee

Unter den Browsern gibt es keinen Standard für die Standardgröße eines Kombinationsfelds, da es überhaupt keinen Standard gibt.

Ich weiß, dass Ihre Frage keine Alternative ist, aber wir sollten das Zitat von Jackob Nilsen berücksichtigen:

(...) Regelmäßige Dropdown-Menüs verbergen normalerweise die meisten Optionen des Benutzers. Ja, Sie können scrollen, aber (a) es ist ein Schmerz und (b) das Scrollen nach unten verbirgt die anfänglichen Optionen. Infolgedessen können Sie nicht alle Ihre Auswahlmöglichkeiten visuell vergleichen. Sie müssen sich auf das Kurzzeitgedächtnis verlassen. Die Leute haben genug im Kopf, und das Durcheinander mit dem Kurzzeitgedächtnis verringert ihre Fähigkeit, ihre Aufgaben auf Ihrer Website zu erledigen. Mega-Dropdowns zeigen alles auf einen Blick, sodass Benutzer sehen können, anstatt sich zu erinnern. ( Quelle )

Der obige Link spricht über die Verwendung eines Mega-Dropdown-Menüs, eher eine Kombination, eine interessante Lektüre darüber, wie man bessere Möglichkeiten bietet, da normale Kombinationsfelder nerven Benutzer .

Die ideale Größe hängt davon ab, wie einfach Benutzer alles auf einen Blick erfassen können. Aus persönlicher Sicht sollte die Größe als Absatzgröße von 5 bis 15 Zeilen verwendet werden können, da wir diese Menge an vertikalem Scannen verwenden.

1
Dorival

Ich denke, es ist eine gute Idee, eine durchsuchbare Dropdown-Liste zu verwenden, um dem Benutzer Flexibilität zu geben, wo er einfach mit der Eingabe beginnen kann, um seine Auswahl in die engere Wahl zu ziehen, oder einfach das reguläre Dropdown-Menü verwenden kann.

Eine einfache jQuery-Funktion für ComboBox sollte Ihnen dabei helfen, dies zu aktivieren.

Das Dropdown sollte jedoch nicht mehr als 1/3 Platz über der Falte einnehmen.

0
Vaibhav Kanwal

Warum nicht mit Standardhöhe belassen?

  1. Jeder einzelne Benutzer wird verwendet, um mit Combo zu arbeiten, wie es normalerweise auf jeder einzelnen Site angezeigt wird. Wenn Sie dieses Verhalten ändern, werden einige Benutzer es nicht bemerken, während andere dies möglicherweise als unangenehm empfinden. Übrigens ist es für die Anzeige auf Mobiltelefonen geeignet?

  2. Platzieren Sie nicht zu viele Elemente in der Kombination (ich persönlich platziere nie mehr als 100), damit die Kombination bequem gescrollt und durchsucht werden kann. Wenn Sie viele Elemente in der Kombination anzeigen müssen, stimmt höchstwahrscheinlich etwas mit diesem Steuerelement nicht. In Ihrem Fall: Wenn die Kombination viele Elemente enthält, handelt es sich nicht um ein Steuerelement, sondern um ein Entwicklerproblem.

In meiner App habe ich eine Kombination, um die Straße einer Stadt auszuwählen (während Sie die Adresse eingeben). Wenn weniger als 100 Elemente vorhanden sind, werden sie als Kombination angezeigt, andernfalls als Textfeld mit automatischer Vervollständigung.

0
ADOConnection

Ich bevorzuge eine bearbeitbare Dropbox, wenn ich verstehe, dass der Benutzer die Liste kennt, aus der er auswählt. Wie im Beispiel der Länder beginne ich lieber mit der Eingabe, und die nächstgelegene Übereinstimmung wird in der Dropdown-Liste angezeigt.

Ich bevorzuge 10-15 Elemente in der Liste, und mehr als das erschwert das Scannen und Konzentrieren.

0
ajayashish

In diesem Fall schlage ich vor, eine eigene Kombination mit Unterstützung für Abschnitte zu codieren und Länder in Kontinente oder ähnliches aufzuteilen. Verwenden Sie die Kombination nicht für eine große Anzahl von Elementen, da es dafür keine optimale Höhe gibt.

0
kbec

Dafür gibt es jedoch keine Formel:

0
Daniel