it-swarm.com.de

So weisen Sie den Benutzer an, auf zu klicken, um Daten zu bearbeiten

Ich entwickle eine Website, die im Grunde alle Informationen über eine Reihe von Projekten enthält (einige Hundert). Jedes Projekt hat eine eigene Seite mit allen Informationen dazu (Daten, Klassifizierungen, Zeitplan, Budget, Mitarbeiter ...). Ich wollte, dass die Daten sehr einfach zu bearbeiten sind, also habe ich Inline-Bearbeitung verwendet. Sie können auf beliebige Daten klicken, um sie zu ändern, und alle anderen Werte aktualisieren sich selbst im Excel-Stil.

Ich habe die Prototypversion bei einigen zukünftigen Benutzern getestet und jeder von ihnen hat mich gefragt:

Wie bearbeite ich die Daten?

Keiner von ihnen dachte daran zu klicken.

Meine Frage ist also, wie meine Benutzer auf einen Text, ein Datum oder eine Nummer klicken können, um ihn zu bearbeiten.

4
L. Sanna

Angenommen, der von Ihnen bereitgestellte Link ähnelte dem von Ihnen getesteten Prototyp. Ich denke, das Hauptproblem besteht darin, dass beim Hover keine Einladung zum Bearbeiten vorliegt. Es muss etwas geben, das einen Hinweis darauf gibt, dass die Informationen bearbeitet werden können. Hier sind einige gute Informationen von Inline-Bearbeitungsmuster von Patternry.com sowie das referenzierte Hover-Einladungsmuster:

  • Bitten Sie den Benutzer, auf den Text zu klicken, der einen Tooltip enthält, wenn sich die Maus über dem Text befindet, den der Benutzer bearbeiten möchte. Verwenden Sie den Ausdruck "Zum Bearbeiten klicken" oder nur das Wort "Bearbeiten".
  • Ändern Sie beim Bewegen des Mauszeigers den Mauszeiger in einen Bearbeitungscursor.
  • Markieren Sie das Element, indem Sie den Hintergrund des Elements in Gelb ändern oder Ränder hinzufügen.
  • Weitere Informationen zum Bereitstellen einer Einladung finden Sie unter Hover-Einladungsmuster .
  • Eine alternative Möglichkeit, den Benutzer zum Bearbeiten einzuladen, besteht darin, neben dem Element, das der Benutzer bearbeiten muss, einen Bearbeitungslink anzuzeigen. Wenn der Bearbeitungslink immer sichtbar ist, verbessert sich die Erkennbarkeit dieser Funktion. Wenn eine gute Lesbarkeit erforderlich ist, zeigen Sie den Link nur beim Hover an.
8
Mark D

So wie ich es sehe, haben Sie zwei Baisc-Optionen (von denen ich im Allgemeinen die erste bevorzuge, da dies die Interaktion des Benutzers nicht verzögert):

  1. Sie können am Rand jedes Inhalts einen Link "Bearbeiten" (möglicherweise mit einem relevanten Symbol) bereitstellen, der automatisch den Bearbeitungsmodus auslöst, oder Sie können Fügen Sie oben auf der Seite einen Bearbeitungslink hinzu, der die gesamte Seite in den Bearbeitungsmodus versetzt. Dies kann auch dazu beitragen, zu verhindern, dass versehentlich bearbeitet wird/Probleme beim Auswählen von Inhalten auftreten.

  2. Sie können eine Einführung Tour für Personen bereitstellen, die sich zum ersten Mal anmelden oder die neue Version der Website zum ersten Mal verwenden.

3
GotDibbs

Eine Methode, die ich verwendet habe und die ich einige Male persönlich verwendet habe, besteht darin, diesen Bereich hervorzuheben, wenn sie darüber scrollen. Einer der ersten Orte, die mir in den Sinn kommen, ist Google Plus. Wenn Sie sich im Bearbeitungsprofilmodus befinden, können Sie einfach mit dem Mauszeiger über verschiedene Elemente fahren und erhalten einen schönen Blauton und in einigen Fällen einen kurzen beschreibenden Schwebetext.

Ich denke, dies ist eine ziemlich raffinierte Methode und mit dem richtigen CSS-Styling recht einfach.

1
kwelch