it-swarm.com.de

Erschwinglichkeit der Edit In Place-Funktionalität

Ich möchte contenteditable als Mechanismus zum Bearbeiten an Ort und Stelle verwenden. Ich habe jedoch Probleme mit der Benutzerfreundlichkeit. Das Problem ist, dass ein Benutzer, sobald er auf den Bereich klickt, nicht offensichtlich ist, dass er ihn bearbeiten kann.

Was ist der richtige Weg, um dies deutlicher zu machen? Ich habe darüber nachgedacht, ihm einen Rand zu geben oder die Hintergrundfarbe zu ändern. Leider befindet sich die Box auf einem weißen Hintergrund, sodass eine andere Hintergrundfarbe etwas seltsam aussehen kann.

6
CambridgeMike

Flickr scheint das gut zu machen. Alles, was bearbeitet werden kann, wird beim Rollover buttergelb und wird zu einem bearbeitbaren Feld, sobald Sie darauf klicken.

Hier ist ein Feld für sich. enter image description here

Hier ist ein Feld für den Rollover (Schwebezustand). enter image description here

Und hier ist das Feld nach dem Klicken. enter image description here

9
Taj Moore

Wenn der Benutzer nicht häufig wäre, würde ich eine stärkere visuelle Warteschlange bereitstellen, um ihn wissen zu lassen, dass dieses Feld bearbeitet werden kann (Bleistiftsymbol ist die klassische Wahl). Wenn dies für den häufigen Gebrauch geplant ist, können Sie sich etwas Feineres leisten, beispielsweise einen getönten Hintergrund.

Ich würde gerne ein paar schnelle Guerilla-Tests durchführen, um herauszufinden, welcher Ansatz am besten funktioniert.

1
Wander

Also, bis es einen Screenshot gibt, hier ist meine allgemeine Antwort. Wie Sie angegeben haben, ist hier normalerweise ein visueller Unterschied der Indikator. Eine wichtige Sache, die man ausspielen sollte, ist das mentale Modell des Benutzers, dass eine Eingabe auf einer Seite bedeutet, dass ich dort Daten eingeben kann.

Die einfache Antwort lautet also, dass es im Inline-Bearbeitungsmodus wie eine Standardeingabe aussieht (oder verwendet wird).

Ein Schlüssel hier ist für meine eigene Präferenz, sicherzustellen, dass Sie den Bereich so dimensionieren, dass er den Rand, das Auffüllen usw. für den Eingabestil unterstützt, damit sich die Informationen und das Layout nicht verschieben, wenn Sie zwischen bearbeitbaren Feldern wechseln.

Die andere Sache, die Sie berücksichtigen sollten, wenn Sie nicht möchten, dass sie auf Bearbeiten klicken, um alles in den Bearbeitungsmodus zu versetzen, ist, woher ich weiß, welche Objekte bearbeitet werden können. Mein Lieblingsmuster hierfür ist es, das Mouseover bereitzustellen, das den eingabeähnlichen Stil auf verblasste Weise verfügbar macht. Auf diese Weise werde ich zum Klicken eingeladen (um daraus eine Eingabe zu machen, die ich bearbeiten kann). Wenn Sie eine Schaltfläche zum Bearbeiten haben und alles bearbeitet werden kann, ist dies ein strittiger Punkt.

In diesem Beispiel ist die Oberseite schwebend, die Unterseite klickt hinein und bearbeitet.

Example of Hover and Edit (for inline editing)

Stellen Sie sicher, dass Sie den Rahmen verwenden, um den Eingabeeffekt zu erstellen. Hier können Sie Farbe hinzufügen, um anzuzeigen, dass er aktiv ist. Unterschätzen Sie auch nicht die Fähigkeit, den Hintergrund in Weiß zu ändern (entweder mit oder ohne Farbtupfer), was für das Gehirn ausreicht, aber nicht dazu führt, dass die Eingabe seltsam aussieht. Sie können auch einen winzigen Schlagschatten hinzufügen, um hervorzuheben, dass es sich um eine bearbeitbare Eingabe handelt. Geh einfach nicht mit dem Schlagschatten über Bord :-)

0
Chris Janssen