it-swarm.com.de

Dies bedeutet für den Benutzer, dass dieses Feld bearbeitet werden kann

Ich habe ein Raster mit einer Reihe von Daten. Einige der Felder können bearbeitet werden und führen zu einem Postback, bei dem die Daten aktualisiert werden. Was sind die besten Möglichkeiten, dies dem Benutzer zu zeigen? d.h. gibt es eine bewährte Methode, um aus Sicht der Benutzeroberfläche zwischen bearbeitbar und nicht bearbeitbar zu unterscheiden?

16
Dan

Normalerweise halte ich meine bearbeitbaren Felder weiß und nicht bearbeitbare Felder grau (oder monochromatische Farben, wenn nicht weiße Felder, helle Farbe: bearbeitbar und dunkle Farbe: nicht bearbeitbar).

19
wnathanlee

Ja, es gibt eine bewährte Methode: Bearbeiten Sie bearbeitbare Felder wie Textfelder und nicht bearbeitbare Felder wie Text. Es gibt einen Grund, warum diese beiden Elemente der Benutzeroberfläche unterschiedlich aussehen.

14
Charles Boyung

Ich entschied mich für das Hinzufügen eines textstummgeschalteten fa - Bleistiftsymbols , das rechts vom Feld schwebte.

Quelle: https://webapphuddle.com/inline-edit-design/

4
Geoffrey Hale

Textfelder eignen sich hervorragend für einfachere Layouts, bei denen das Element hauptsächlich zum Bearbeiten verwendet wird. In einem Raster, in dem das Steuerelement auf unbestimmte Zeit wiederholt wird, erhöhen sie (wie Schaltflächen oder andere Steuerelemente) die visuelle Unordnung. Dies ist ein Problem, da einer der Gründe, warum wir Gitter verwenden, darin besteht, uns einen Überblick zu verschaffen.

Ich mag Designs, bei denen bearbeitbare Felder sehr neutral aussehen, wie jeder Schnittstellentext, aber beim Schweben wechseln sie in einen Zustand, der zeigt, dass sie bearbeitet werden können. Dies kann durch eine Farbe oder ein Symbol erreicht werden, das nur beim Schweben sichtbar ist. Mit einem Klick gelangen Sie in den eigentlichen Bearbeitungsmodus. Jiras Web-App ist ein hervorragendes Beispiel für diesen Ansatz.

2
John Liungman

Die beste Vorgehensweise besteht im Allgemeinen darin, Eingaben für bearbeitbaren Inhalt und einfachen Text für nicht bearbeitbaren Inhalt zu verwenden. Sie können die Eingaben subtil gestalten, damit sie selbst in einem etwas dicht besiedelten Raster nicht so viel Unordnung verursachen.

Wenn die durch die belichteten Eingaben verursachte Unordnung zu groß ist, können Sie die beim Schweben angezeigten Steuerelemente verwenden (Aktionssymbol bearbeiten) oder den Klartext beim Schweben in ein Eingabefeld umwandeln (funktioniert für einzeiligen Inhalt, auch bei mehrzeiligem Inhalt mit Vorsicht ).

Wenn Sie jedoch nur beim Hover einen bearbeitbaren Hinweis geben möchten, sollten Sie sich fragen, was der primäre Verwendungskontext ist. Wenn es sich um mobile Touch-Geräte handelt, können Sie sich nicht auf den Schwebeflug verlassen und müssen die Essbarkeit sofort verfügbar machen (entweder mithilfe des Symbols für die Bearbeitungsaktion oder durch Anzeigen des Eingabefelds).

1
Pavel Macek

Normalerweise habe ich einen grauen Hintergrund und ein weißes bearbeitbares Feld. Wenn das Feld nicht bearbeitet werden kann, setze ich den Hintergrund auf das gleiche Grau (was technisch das gleiche wie transparent ist, aber der Benutzer kümmert sich nicht darum. Sie sehen nur, dass es das gleiche ist).

1
Bryan Field

Textfeld für das Web. Benutzer können unterscheiden, dass das Feld für die Texteingabe vorgesehen ist. Wenn möglich, wird die Konzentration auf das erste Textfeld bevorzugt. Dieses Feld kann mit einem Cursor im Feld mit einem dünnen Blau begrenzt oder einfach mit einem Rand hervorgehoben werden.

Für Handys eine Tastatur aufrufen. Wenn Sie das erste Element mit einem blinkenden Cursor auswählen können, tun Sie dies. Das Ausgrauen der verbleibenden Felder ist in Ordnung.

0
Jonathan Bowman

Dies mag eine persönliche Tendenz aufzeigen, aber ich bevorzuge auch eine Art "Fokusvisual", das einem Benutzer anzeigt, auf welchem ​​Feld er sich befindet. Ein weicher Hintergrund oder Rand sind Möglichkeiten, dies zu erreichen.

0
David in Dakota