Das Massenerlebnis

3 Beispiele für Mehrfachauswahl- und Massenaktionen

Das Entwerfen für Unternehmen erfordert häufig die Entwicklung von Lösungen für datenintensive Inhalte. In einer Branche, in der Zweckmäßigkeit und Benutzerfreundlichkeit eine treibende Kraft für den Erfolg sind, sind unsere Benutzer häufig darauf bedacht, auf mehrere Elemente gleichzeitig zuzugreifen, diese zu bearbeiten und Maßnahmen zu ergreifen oder Massenaktion.

Während eines kürzlichen Design-Sprints für einen Beratungskunden führten uns unsere Designerkundungen zu drei unterschiedlichen Ansätzen für Multi-Select- und Bulk-Aktionen. Im Folgenden werden einige der wichtigsten Unterschiede kurz dargestellt und die einzelnen Beispiele erläutert.

1. Kontrollkästchen mit Sticky Toolbar (Google Mail)

Das Google Mail-Modell verfügt über sichtbare Kontrollkästchen und eine klebrige Aktionsleiste.

Die direkteste und zugänglichste Option von allen. Das Google Mail-Modell verwendet unterschiedliche Kontrollkästchen und Aktionsschaltflächen, die dem Benutzer sofort zur Verfügung stehen.

Vorteile:

  • Sehr offensichtlich und leicht zugänglich
  • Funktioniert gut auf Desktops und Mobilgeräten, wenn der Schwebeflug nicht verfügbar ist
  • Beinhaltet "Alles auswählen" und andere Optionen im Voraus (obwohl dies am besten funktioniert und am offensichtlichsten ist, wenn der Inhalt im Listenformat angezeigt wird)

Nachteile:

  • Aus visueller Sicht können die sich wiederholenden Symbole etwas überladen wirken
  • Wenn Platz ein Problem ist (und dies häufig der Fall ist), können die zusätzlichen Symbole wertvollen Platz auf dem Bildschirm einnehmen

2. Umschalt / Alt + Klick; Rechtsklick (G Drive)

Das Modell G Drive: Sowohl Auswahl- als auch Aktionsfunktionen sind immer ausgeblendet.

Google Drive geht im Vergleich zu seinem E-Mail-Begleiter auf die andere Seite. Die wohl am wenigsten zugängliche der drei Aktionen in G Drive basiert in hohem Maße auf Interaktionskonventionen (auch wenn sie gut übernommen wurden), da der Benutzer zum Auswählen mit gedrückter Umschalttaste und dann mit der rechten Maustaste auf die ausgewählten Elemente klicken muss.

In diesem Modell sind sowohl die Auswahlfunktion als auch die Aktionsfunktionen vollständig ausgeblendet. Der Benutzer muss wissen, dass diese Funktionen vorhanden sind und wie er auf diese Funktionen zugreifen kann. Viele Softwareschnittstellen hängen auch stark von diesem Muster ab (z. B. Ebenen in Sketch- oder Adobe-Software). Während dieses Modell sauberer aussieht und unvermeidlich Platz spart, fehlen ihm klare Preisvorteile. Ein Hauptnachteil dieses Modells besteht darin, dass die Umschalt- / Rechtsklick-Aktion ohne deaktivierte Kontrollkästchen auf Mobilgeräten oder Tablets nur ausgeführt werden kann, wenn eine andere Geste verwendet wird (z. B. Doppeltippen oder 3D-Touch in iOS).

Vorteile:

  • Minimales Design
  • Platzsparend
  • Verwendet gut übernommene Interaktionskonventionen
  • Funktioniert gut für Listen- oder Rasterelemente

Nachteile:

  • Auswahl- und Aktionsfunktionen sind immer ausgeblendet
  • Erfordert inhärentes Wissen über Handlungsschritte
  • Funktioniert nicht auf Mobilgeräten, es sei denn, sie werden mit einer anderen Geste wie Doppeltippen oder 3D Touch unter iOS ausgeführt

3. Hover: Die 2-Stufen-Lösung (Invision)

Das Invision-Modell zeigt mit der Maus an, dass ein Element ausgewählt werden kann (links), und zeigt einen Auswahlmodus mit Kontrollkästchen und Aktionsleiste an, sobald ein Element ausgewählt wurde (rechts).

Um das Beste aus beiden Welten zu machen, verwendet das InVision-Beispiel eine Schwebefunktion, um Platz zu sparen und die Auswahl zu kennzeichnen, sowie einen separaten Auswahlmodus, sobald ein Element ausgewählt wurde. Sowohl Auswahl- als auch Aktionsfunktionen sind anfangs verborgen, was Platz spart und ein minimales Design schafft. Sie werden jedoch sofort verfügbar, sobald der Benutzer in den Auswahlmodus wechselt, wodurch klare Vorteile und Zugänglichkeit geschaffen werden. Der Nachteil einer Funktion, die auf dem Schwebeflug basiert, besteht jedoch in den Einschränkungen für Mobil- oder Tablet-Geräte.

Vorteile:

  • Eine 2-Stufen-Lösung bietet klares Design und intuitive Funktionalität.
  • Nachteile:

  • "Alles auswählen" und andere Auswahloptionen sind nur verfügbar, wenn der Benutzer mindestens ein Element auswählt.
    • Beschränkt auf Geräte, bei denen der Schwebeflug eine Option ist.
    • Was verwenden Sie wann

      Es gibt keinen richtigen Weg. Wir können nicht pauschale Regeln für das gesamte Design anwenden, aber wir können so viel wie möglich darüber lernen, was in der Vergangenheit getan wurde und welche Konventionen bereits existieren.

      Als Designer ist es unsere Pflicht, jede Instanz zu untersuchen, die geschäftlichen Einschränkungen zu verstehen, unsere Benutzer, ihre Workflows und die Umgebungen, in denen sie arbeiten, zu verstehen und intuitive Erfahrungen zu erstellen, die für jedes einzelne Szenario geeignet sind.