it-swarm.com.de

Benötigen Sie eine Möglichkeit, eine Schaltfläche "Ändern" und "Löschen" zu positionieren

Ich arbeite derzeit an einer Schnittstelle für Administratoren zum Bearbeiten von Benutzerprofilen. Aus Platzgründen bin ich mir nicht sicher, wie die Schaltflächen "Bild ändern" und "Bild löschen" am besten positioniert werden können. Derzeit habe ich aus Platzgründen die Schaltfläche zum Löschen wie folgt in ein "x" -Symbol geändert:

mockup

bmml source herunterladen - Wireframes erstellt mit Balsamiq Mockups

Ich kann einige Probleme mit diesem Ansatz sehen:

  • Es ist leicht, versehentlich auf die Schaltfläche x zu klicken, um das Bild zu löschen. Während es ein Modal gibt, um die Aktion zu bestätigen, ist das versehentliche Auslösen immer noch ärgerlich.
  • Das "x" gibt nicht explizit an, was es tut. Wir könnten einen Tooltip zum Mouseover haben, aber das ist nicht sehr auffindbar.

Ich habe auch in Betracht gezogen, die Schaltfläche "Löschen" als Textschaltfläche zu verwenden und sie unter der Schaltfläche "Bild ändern" zu platzieren:

mockup

bmml Quelle herunterladen

Die Probleme sind jedoch:

  • Es besteht immer noch die Möglichkeit versehentlicher Klicks.
  • Löschen wird nicht häufig ausgeführt, daher sollte es nicht auf der gleichen Ebene wie die primäre Aktion liegen.

Kann jemand Wege vorschlagen, um mit diesem Problem umzugehen?

2
F21

Machen Sie die Schaltfläche "Löschen" zu einer Aktion im Stil eines Textlinks (möglicherweise beim Schweben unterstreichen und nicht immer) und behalten Sie die primäre Aktion als Schaltfläche bei.

mockup

bmml source herunterladen - Wireframes erstellt mit Balsamiq Mockups

Twitter tut dies genau, verwendet jedoch auch einige zusätzliche Informationen, um den Löschlink physisch von der primären Aktion zu entfernen. enter image description here

Dies ist ein anerkanntes UI-Muster für primäre und sekundäre Aktionen - für weitere Informationen:

Luke Wroblewski - Primäre und sekundäre Aktionen in Webformularen

Muster - Primäre und sekundäre Tasten

3
Roger Attrill

Sie können auch die Schaltfläche X auf das Bild verschieben, das eine ziemlich standardmäßige Schnittstelle zum Löschen von Elementen bietet, insbesondere wenn eine modale Bestätigung vorliegt. Es wäre jedoch Vorsicht geboten, um es zugänglich zu machen.

mockup

bmml source herunterladen - Wireframes erstellt mit Balsamiq Mockups

2
Andrew Leach

Sie möchten, dass die Bearbeitungsaktion groß und leicht zu finden ist, während die Schaltfläche zum Löschen etwas entfernt, aber dennoch leicht zu finden ist. Ich empfehle, das gesamte Bild auf die Schaltfläche "Bearbeiten" zu setzen.

Ändern Sie beim Bewegen des Mauszeigers den Cursor auf einen Pinsel, ein Zuschneidewerkzeug oder etwas, das für Ihre häufigste Bearbeitungsaufgabe repräsentativ ist. Platzieren Sie eine Überlagerung mit den Worten "Zum Bearbeiten klicken" auf dem Bild. Behalten Sie die Löschtaste unten bei. Wenn Sie Mac-Benutzer ansprechen, sollte ein X ausreichen. das ist die Standard-Benutzeroberfläche für sie. Wenn nicht, ist Löschen wahrscheinlich besser geeignet.

Ich bin damit einverstanden, dass diese Lösung jedoch möglicherweise nicht auffindbar ist. Ich persönlich denke, dass es höchst unwahrscheinlich ist, dass ein Benutzer die Aktion nicht findet, wenn er mit der Maus über den Bildschirm fährt, aber Benutzertests sind erforderlich um zu bestätigen, dass jeder die Bearbeitungsaktion schnell findet und versteht. Sobald sie es entdeckt haben, glaube ich, dass die Kombination aus Cursorwechsel, Hervorhebung und der Größe des Klickziels es zu einem sehr verständlichen und nutzbaren Übergang macht.

1
Myrddin Emrys