it-swarm.com.de

Platzierung des Bearbeitungslinks neben dem langen Titel?

Ich arbeite an einer Webanwendung, die einem Flussdiagramm ähnelt. Jede Seite hat einen Stern zum "Lesezeichen" der Seite, einen Titel und darunter das eigentliche Flussdiagramm/die tatsächlichen Formen. Der Strömungsbereich nimmt den verbleibenden vertikalen/horizontalen Raum ein. In der Anwendung gibt es zwei Modi: Anzeigen und Bearbeiten der Flows. Im Ansichtsmodus müssen Benutzer mit Berechtigung in der Lage sein, den Kontext zu wechseln und den Ablauf zu bearbeiten.

Es fällt mir jedoch schwer, eine gute Platzierung für die Bearbeitungsschaltfläche zu finden, die für den Benutzer intuitiv ist. Im Moment befindet sich die Schaltfläche Bearbeiten neben dem Titel. Ich sehe ein paar Probleme damit:

  1. Wenn der Titel wirklich lang ist, wird die Schaltfläche zum Bearbeiten verschoben. Daher ist es nicht in einer konsistenten Position.
  2. Es neben dem Titel zu haben, scheint , als würde es bedeuten, den Titel zu bearbeiten und nicht der tatsächliche Fluss.

mockup

bmml source herunterladen - Wireframes erstellt mit Balsamiq Mockups

Die zweite Idee, die ich hatte, war, die Schaltfläche zum Bearbeiten ganz rechts zu platzieren. Dies kann jedoch bei größeren Monitoren zu langen Mausentfernungen führen (das Layout ist flüssig):

mockup

bmml Quelle herunterladen

Schließlich dachte ich daran, die Schaltfläche zum Bearbeiten innerhalb des Rechtecks ​​des Flussbereichs zu haben ... vielleicht in der oberen rechten Ecke? Vielleicht ein Zahnradsymbol oben rechts, das ein Dropdown anzeigt?

Die meisten Blog-Systeme haben normalerweise die Schaltfläche zum Bearbeiten unter dem Titel. Und dies ist sinnvoll, da sich normalerweise andere Elemente unter dem Titel befinden, z. B. Anzahl der Kommentare, Datum der Veröffentlichung usw.

Alle diese Modelle fühlen sich für mich immer noch falsch an , daher würde ich mich sehr über einen Experten-Input freuen, damit sich dies richtig anfühlt.

3
TheCloudlessSky

Sie sind hier definitiv auf dem richtigen Weg und es fühlt sich falsch an, da Ihnen der Kontext fehlt. Wenn Sie edit neben dem Titel platzieren, denken Sie, Sie bearbeiten nur den Titel. Wenn Sie den Bearbeitungslink rechts platzieren, fragen Sie sich, was Sie bearbeiten können. Wenn Sie den Bearbeitungslink in den Workflow einfügen, denken Sie, Sie bearbeiten den Workflow (und nicht den Titel). In Ihrem Design fehlt also etwas, etwas sehr Wichtiges. . Kontext.

Ihr Bearbeitungslink hat keinen Kontext. Sie müssen dem gesamten Workflow eine Art Wrapper hinzufügen, z. B. eine Hintergrundfarbe oder eine Linie. Alles, was Ihren Workflow vom Rest der Anwendung unterscheidet. Wenn dieser Kontext erstellt wird, sollten Sie klarstellen, dass Sie sich in dem Kontext befinden, den Sie tatsächlich bearbeiten.

Ein Beispiel hierfür könnte das folgende Modell sein:

mockup

bmml source herunterladen - Wireframes erstellt mit Balsamiq Mockups

Der Link edit - befindet sich in der oberen rechten Ecke des Wrappers und teilt dem Benutzer mit, dass Sie beide Titel bearbeiten können, wenn Sie in diesem Kontext auf Bearbeiten klicken und Workflow, da der Link edit - weder mit dem Titel noch mit dem Workflow selbst übereinstimmt.


Bearbeitetes Modell (um auf Kommentare zu antworten) :

mockup

bmml Quelle herunterladen

6
Benny Skogberg

Ich würde versuchen, den Bearbeitungslink in die visuelle Hierarchie der Benutzeroberfläche einzufügen, auf die er sich auswirken würde, z. unten (obwohl Sie wahrscheinlich besser kommen können)

mockup

bmml source herunterladen - Wireframes erstellt mit Balsamiq Mockups

1
Riche Design

Ich würde "Flussdiagramm bearbeiten" anstelle von "Bearbeiten" einfügen und es neben den Titel setzen.

Das neue Link-Label ist weniger mehrdeutig, und wenn es neben dem visuell auffälligsten Element (dh dem Titel) platziert wird, wird sichergestellt, dass der Link angezeigt wird.

0
Tim Huynh