web-dev-qa-db-de.com

Erschwinglichkeit von ContentEditable-Elementen (ohne den Hintergrund zu ändern)

Kontext

Ich möchte das Attribut ContentEditable anstelle klassischer Eingaben verwenden.

Es klingt wie ein Duplikat von Erschwinglichkeit der Edit In Place-Funktionalität , aber eigentlich möchte ich vermeiden, dass sich die Hintergrundfarbe ändert, wie es die Antwort suggeriert. Die verknüpfte Frage stammt aus dem Jahr 2011 und die UX-Praktiken entwickeln sich ständig weiter. Daher gibt es möglicherweise neue Ansätze und Lösungen für dieses Thema.

Dies ist mein aktueller Ansatz: eine andere Farbe zusätzlich zu einem unteren Rand.

enter image description here

(Entschuldigung für die Französisch auf diesem GIF)

Sie können es mit dieser Demo versuchen: http://jsfiddle.net/Lazgp/6

Ich habe den blauen und den gepunkteten Rand ohne wirklich guten Grund gewählt, einfach so.

Frage

Haben Sie Feedbacks oder Ratschläge zur Verbesserung?

4
GG.

Sieht großartig aus! Gepunktete und gestrichelte Linien eignen sich hervorragend, um sich etwas zu leisten. Aber das Beste, was Sie tun können, um den Leuten wirklich klar zu machen, dass es tatsächlich bearbeitbar ist, ist, das erste Feld automatisch zu fokussieren.

Dies gibt dem Benutzer ein sofortiges visuelles Feedback und es ist kein Erraten mehr erforderlich.

1
azumbrunnen

Es ist wirklich sehr ungewöhnlich und umstritten.

Gepunktete und gestrichelte Linien, die normalerweise zum Anzeigen von Popups mit zusätzlichen Informationen verwendet werden und nur einem Benutzer mitteilen, dass Sie auf mich klicken, mich aber nicht bearbeiten können.

Ich würde vorschlagen, Eingaben für alle bearbeitbaren Elemente anzuzeigen, nachdem Sie in den Bearbeitungsmodus gewechselt haben. Es ist günstiger und auch Eingaben motivieren Benutzer zur Eingabe von Informationen.

1
Humanoit

Die Interaktion sieht gut aus, hier einige Ideen, die wenn möglich getestet werden müssen:

  • Warum schlagen Sie nicht wie Wikipedia Ihre Schaltfläche Modifer in jedem Abschnitt vor, um den Fokus zu verbessern?

 Diese Interaktion existiert meines Wissens noch nicht auf englischer Wikipedia

  • Seien Sie vorsichtig mit gestrichelten Unterstreichungen und blauen Kombinationen, sie können als Links falsch interpretiert werden. Ihr Ansatz scheint in Ordnung zu sein, aber Sie sollten anerkennen, dass er ziemlich unkonventionell ist.

  • Als Echo zur vorherigen Bemerkung: Wenn Sie mit der Maus über eine der Eingaben fahren/klicken, sollte diese eher wie eine Eingabe mit der Hilfe eines Hintergrunds aussehen, wie dies bei Basecamp der Fall ist. Konzentrieren Sie sich auf die erste Eingabe und machen Sie ein Beispiel, um die Interaktion besser zu verstehen.

enter image description here

0
Gildas Frémont