it-swarm-eu.dev

UI-Design zum Bestellen von Artikeln in der Liste

Welches Komponenten-/UI-Design würden Sie zum Bestellen von Elementen in einer Liste verwenden (eine Tabelle mit Schaltflächen zum Verschieben nach oben/unten)?

6
padis

Drag & Drop von Elementen ist wahrscheinlich das Beste für die meisten Benutzeroberflächen. Leider ist es schwierig, diese Funktion erkennbar zu machen. Ein "Grabber" -Bereich in der Nähe jedes Gegenstands hilft. Visuelles Feedback beim Ziehen sowie automatisches Scrollen beim Ziehen eines Elements an eine Kante sind in einer guten Drag & Drop-Sortieroberfläche erforderlich.

Es ist gut, move up und move down Schaltflächen zusätzlich zu Drag & Drop. Es gibt kein allgemein anerkanntes "Grabber" -Ikon/-Stil. Bei selten verwendeten Benutzeroberflächen kann die Zeit, die mit den etwas ungeschickten Schaltflächen verbracht wird, geringer sein als die Zeit, die der Benutzer benötigt, um die effizientere Drag & Drop-Funktion zu entdecken.

Darüber hinaus gibt es beim Ziehen und Ablegen viele subtile Details, die für den Benutzer frustrierend sind, wenn sie nicht korrekt ausgeführt werden (z. B. Autoscroll). Schaltflächen sind bei häufigem Gebrauch ineffizient, aber offensichtlich, unkompliziert zu verwenden und viel einfacher zu codieren.

5
dbkk

Drag & Drop kann als "direkte Manipulation" betrachtet werden, bei der Klicks direkt auf die Liste einen Effekt haben, im Gegensatz zu "indirekter Manipulation", bei der Sie eine separate Schaltfläche oder eine andere Aktion haben, die auf die Liste wirkt.

Je nachdem, was in Ihrer Liste enthalten ist, sind möglicherweise beide angemessen.

Was auch immer Sie tun, beachten Sie bitte den weisen Rat von Jakob Nielsens Top 10 Fehler beim Anwendungsdesign :

Drag-and-Drop-Designs sind häufig die schlimmsten Straftäter, wenn nicht ersichtlich ist, dass etwas gezogen oder fallen gelassen werden kann. (Oder was passiert, wenn Sie ziehen oder ablegen.) Im Gegensatz dazu machen einfache Kontrollkästchen und Befehlsschaltflächen normalerweise schmerzlich deutlich, auf was Sie klicken können.

Wenn Sie also eine direkte Manipulationsfunktion für eine Liste bereitstellen, geben Sie visuelle Hinweise wie:

  1. visueller 'Grabber'-Bereich (Reihe von Punkten oder Linien), der auf' Greifbarkeit 'hindeutet
  2. zeigerwechsel
  3. feedback, während Sie sich bewegen. Siehe diese Demo obwohl beachten Sie, dass mein Punkt (1) nicht unterstützt wird und es daher nicht offensichtlich ist, dass diese Listen sortierbar sind.
4
Julian H

Ich würde zustimmen, dass die direkte Manipulation von Elementen jetzt wahrscheinlich bevorzugt wird.

Ungeachtet der Anschuldigungen, dass 37 Signale etwas arrogant sind, ist ihr Basislager eine hervorragend verwendbare Anwendung. Fast jede Liste in dieser App ermöglicht die Neuordnung von Elementen per Drag & Drop.

Zuerst müssen Sie klicken, um über einen Textlink in der oberen Ecke in den Nachbestellungsmodus zu gelangen. Dann gibt es ein kleines Bild, das deutlich auf "Greifbarkeit" hinweist, das Sie anklicken und halten und dann manipulieren, um das Objekt zu bewegen. Siehe Anhang.

alt text

2
jameswanless

Die Auf-/Ab-Schaltflächen sind in Ordnung, aber der Trend geht dahin, die Daten direkt zu bearbeiten, d. H. Auf das Element zu klicken (oder darauf zu tippen) und es dann zu verschieben. Ein prominentes Beispiel ist die Netflix-Warteschlange. Dies kann auch funktionieren, wenn mehrere Elemente in der Liste ausgewählt werden.

0
Hisham

Ich bevorzuge Drag & Drop mit klaren Drag-Selektoren, die beim Mouseover angezeigt werden. In unserer Anwendung verwenden wir einen doppelten Aufwärts-/Abwärtspfeil, der nach oben zeigt, um anzuzeigen, dass der Artikel nachbestellt werden kann.

Das einfache Ändern des Cursors ist gut genug für ein technisch versiertes Publikum, aber für Allzweck-Apps möchten Sie etwas Offensichtlicheres.

0
Sam