<?xml version="1.0" encoding="utf-8"?>
<page xmlns="http://projectmallard.org/1.0/" xmlns:uix="http://projectmallard.org/experimental/ui/" type="topic" id="drop-down-lists" xml:lang="de">

  <info>
    <credit type="author">
      <name>Allan Day</name>
      <email>aday@gnome.org</email>
    </credit>

    <link type="guide" xref="ui-elements"/>
    <uix:thumb mime="image/svg" src="figures/ui-elements/drop-down-list.svg"/>

    <include xmlns="http://www.w3.org/2001/XInclude" href="legal.xml"/>
  
    <mal:credit xmlns:mal="http://projectmallard.org/1.0/" type="translator copyright">
      <mal:name>Christian Kirbach</mal:name>
      <mal:email>christian.kirbach@gmail.com</mal:email>
      <mal:years>2014</mal:years>
    </mal:credit>
  
    <mal:credit xmlns:mal="http://projectmallard.org/1.0/" type="translator copyright">
      <mal:name>Mario Blättermann</mal:name>
      <mal:email>mario.blaettermann@gmail.com</mal:email>
      <mal:years>2016</mal:years>
    </mal:credit>
  </info>

<title>Auswahllisten</title>

<p>Eine Auswahlliste ist ein Element der Benutzeroberfläche, das dem Benutzer die Auswahl aus einer Liste sich gegenseitig ausschließender Optionen anzeigt. Im Ausgangszustand erscheint eine Auswahlliste als Knopf und klappt beim Anklicken eine Liste aus.</p>

<media type="image" mime="image/svg" src="figures/ui-elements/drop-down-list.svg"/>

<p>Auswahlknöpfe oder eine Liste sind häufig einer Auswahlliste vorzuziehen, da diese sämtliche verfügbaren Optionen gleichzeitig ohne weiteren Benutzereingriff anzeigen. Andererseits kann eine Auswahlliste vorteilhafter sein, wenn:</p>

<list>
<item><p>die Anzahl der Optionen groß ist.</p></item>
<item><p>wenig Platz verfügbar ist.</p></item>
<item><p>die Liste der Optionen zeitlich veränderlich ist.</p></item>
<item><p>The contents of the hidden part of the menu are obvious from its label and the one selected item. For example, if you have an option menu labelled “Month:” with the item “January” selected, the user might reasonably infer that the menu contains the 12 months of the year without having to look.</p></item>
</list>

<section id="general-guidelines">
<title>Allgemeine Richtlinien</title>

<list>
<item><p>While GTK+ does provide a specific combobox widget, it is recommended that drop-down lists are constructed using a combination of a button and a popover. This allows more comfortable scrolling for long lists, and allows search to be integrated into the list. Using this approach also allows the current selected item to always be displayed.</p></item>
<item><p>If the number of items is very large, provide a search function that filters the list.</p></item>
<item><p>Label the drop-down list button with a text label above it or to its left, using <link xref="writing-style#capitalization">sentence capitalization</link>. Provide an access key in the label that allows the user to give focus directly to the drop-down list.</p></item>
<item><p>Use <link xref="writing-style#capitalization">sentence capitalization</link> for drop-down list items, for example <gui>Switched movement</gui>.</p></item>
</list>

</section>

<section id="custom-values">
<title>Benutzerdefinierte Werte</title>

<media type="image" mime="image/svg" src="figures/ui-elements/drop-down-list-custom-values.svg"/>

<p>A drop-down list can allow custom values to be added to a number of presets, or can be used to enter and select from custom values alone.</p>

<list>
<item><p>Ensure that custom values are ordered in a way that is most useful to users. Alphabetical or recency ordering is common.</p></item>
<item><p>When a drop-down list includes both preset and custom values, separate them into separate groups within the list.</p></item>
<item><p>Allow custom values to be removed from the list.</p></item>
<item><p>Validate custom values as they are entered, in order to prevent errors.</p></item>
<item><p>If the drop-down only accepts custom values, and no values have been entered previously, present the custom value entry when the drop-down is opened, instead of showing an empty list.</p></item>
</list>

</section>

</page>
