it-swarm.com.de

Wie wähle ich zwischen deaktivierten Eingabefeldern und einfachem Text für eine schreibgeschützte Ansicht?

Gibt es eine allgemeine Regel für die Anzeige schreibgeschützter Detailansichten eines bestimmten Elements auf einer Website, um zwischen deaktivierten Eingabefeldern oder Beschriftungen/Klartext zu wählen?

In dieser Situation wird zunächst eine Übersicht der Bestellungen angezeigt, und Benutzer können auf eine einzelne Bestellung klicken, um die Details dieser Bestellung anzuzeigen. Mit einer Schaltfläche zum Bearbeiten gelangen sie zu einem weiteren Bildschirm, auf dem sie die Reihenfolge bearbeiten können.

Irgendwelche Ratschläge, wie man sich zwischen diesen entscheidet? Vielen Dank!

Extra info : Die Detailansicht ist eine Zusammenfassung aller bearbeitbaren Daten. Über eine Bearbeitungsschaltfläche pro "bearbeitbarem Abschnitt" kann der Benutzer zu einer Seite navigieren, auf der dieser Abschnitt mit anderen Eingabesteuerelementen wie Autovervollständigern, Baumansichten, Dropdown-Listen usw. bearbeitet werden kann.

11
koenmetsu

Denken Sie zunächst daran, dass ein Label nicht dasselbe ist wie Klartext. A label "repräsentiert eine Beschriftung für ein Element in einer Benutzeroberfläche", wobei das Element normalerweise eine Formulareingabe ist.

Wenn Sie deaktivierte Eingaben oder einfachen Text verwenden, hängt dies vom Workflow zum Bearbeiten der Informationen ab :

  • Wenn das Bearbeitungsformular eine Seite entfernt ist, lassen Sie die Informationen auf einer eigenen Seite als "Klartext" anzeigen.

  • Wenn sich das Bearbeitungsformular auf derselben Seite befindet, sind deaktivierte Eingabefelder besser. Die Eingabefelder würden durch Umschalten einer "Bearbeiten" -Option aktiviert.

In beiden Fällen vermittelt die Art der Anzeige der Informationen dem Benutzer die richtige Nachricht: Zum einen, dass "Informationen auf dieser Seite nicht bearbeitet werden können", zum anderen, dass "die Informationen bearbeitet werden können, aber Sie müssen Editionsmodus aktivieren ".

1
Naoise Golden

Verwenden Sie ein Textfeld, das wie eine Beschriftung aussieht, wenn es nicht bearbeitet werden kann, aber wie ein typisches Textfeld, wenn es bearbeitet werden kann. Auf diese Weise können Sie ein Steuerelement verwenden, sehen jedoch nicht unangenehm aus, wenn es nicht bearbeitet werden kann.

enter image description here

4
Matt Rockwell

Ich würde sagen, es hängt von der Situation und der Schnittstelle ab. Im Allgemeinen können ausgegraute Felder Benutzer verwirren, die nicht mit Computern vertraut sind. Wer ist die Benutzergruppe? Wenn ein Feld ausgegraut, aber bearbeitbar ist, sollte sich außerdem ein eindeutiger Hyperlink "Bearbeiten" in der Nähe dieses Felds in der Zeile der Site befinden, damit eine direkte Beziehung und ein direktes Verständnis für das Bearbeiten eines ausgegrauten Felds bestehen. Je nachdem, was gerade bearbeitet wird, muss für ein Profil, z. B. ein Zahlungsprofil, ein eindeutiger CTA (Call to Action) vorhanden sein, um diese Feldgruppen oben rechts in der Gruppe zu bearbeiten. Auch hier können das Layout, die Position der Elemente und der zu bearbeitende Inhalt sowie der Kontext Einfluss darauf haben, wie der tatsächliche IA-Aufruf aussehen würde. Wenn Sie einen Link zum Layout oder zur Verkabelung bereitstellen könnten, würde dies möglicherweise helfen.

Alles Gute, Arondale

2
Arondale

Allgemeine Regel - Wenn es sich um einen Textbereich handelt, der manchmal bearbeitet werden kann, machen Sie ihn zu einem deaktivierten Eingabefeld. Sie müssen beispielsweise ein Land auswählen, bevor Sie Ihre Postleitzahl eingeben können. Deaktivieren Sie das Eingabefeld, bevor das Land ausgewählt wird. Dies gibt dem Benutzer einen Hinweis darauf, dass "ich mit diesem Feld interagieren kann, aber momentan nicht". Sie können die deaktivierten Eingabefelder in Kombination mit QuickInfos verwenden, um zu erklären, warum sie deaktiviert sind.

Wenn es nie bearbeitet werden kann - machen Sie es einfach!

Dies folgt der gleichen Konvention wie bei anderen interaktiven Webobjekten wie Schaltflächen. Wenn eine Schaltfläche normalerweise aktiviert ist, aber deaktiviert wird, teilt sie dem Benutzer mit, dass "in diesem Zustand der Umgebung ich die Schaltfläche nicht drücken kann, weil die Variablen nicht richtig eingestellt sind" - zum Beispiel ist eines von vielen erforderlichen Textfeldern nicht vorhanden. t richtig gefüllt.

1
Henrik Ekblom

Eine Möglichkeit wäre, den gesamten nicht bearbeiteten Text als Beschriftungen zu verwenden. Wenn der Benutzer dann auf die Schaltfläche Bearbeiten klickt, werden alle zu bearbeitbaren Textfeldern. Ich habe nicht viel Erfahrung mit der Webentwicklung, aber meine Lösung würde zwei separate Webseiten und viel Arbeit erfordern.

Nur eine Idee, hoffe es hilft.

1
fr00ty_l00ps

Semantisch glaube ich, dass die ursprüngliche Absicht von deaktivierten Formularfeldern genau dies war. Sie können Label/Input-Paarungen im schreibgeschützten Modus beibehalten.

Leider waren Browser in der Vergangenheit nicht so gut darin, schreibgeschützte Formularelemente zu rendern, und CSS war (und ist bis zu einem gewissen Grad immer noch nicht in der Lage), Formularelemente vollständig zu formatieren, sodass ich denke, dass dies ein weniger häufig verwendetes Modell von war Markup.

Heutzutage ist es jedoch wahrscheinlich die bessere Standardoption, wenn Ihr Browser das entsprechende Styling erfolgreich handhaben kann.

0
DA01

Ich denke, die Antwort für Sie liegt in der Frage:

Mit einer Schaltfläche zum Bearbeiten gelangen sie zu einem weiteren Bildschirm, auf dem sie die Reihenfolge bearbeiten können.

Die Verwendung eines deaktivierten Eingabeelements legt nahe, dass dieses Element irgendwie bearbeitbar gemacht werden kann. In Ihrem Fall kann es nicht. Im Wesentlichen schlagen Sie vor, dass es ein Formular im schreibgeschützten Modus gibt. Und Modi sind für Benutzer sehr problematisch, da dieselbe Benutzeroberfläche je nach Modus, in dem sich die Anwendung befindet, unterschiedliche Aktionen zulassen kann oder nicht.

Das große Problem besteht darin, dem Benutzer mitzuteilen, in welchem ​​Modus er sich befindet, und ihm mitzuteilen, wie er ihn ändern kann. Weil sie werden nach einer Möglichkeit suchen, diese deaktivierten Formularelemente in einen bearbeitbaren Zustand zu versetzen.

Ich könnte mir vorstellen, dass Ihr Szenario gut funktioniert, wenn:

  • Standardmäßig wird die Liste als schreibgeschütztes Formularelement angezeigt
  • es gibt eine große Schaltfläche "Bearbeiten"
  • durch Klicken auf die Schaltfläche werden alle Formularelemente aktiviert und die Schaltfläche zum Bearbeiten durch die Schaltfläche "Speichern" und "Abbrechen" ersetzt

Oder noch besser:

  • die Liste wird sofort als bearbeitbare Formularelemente angezeigt

Warum hat der Benutzer den Bearbeitungsmodus überhaupt aktiv aufgerufen? Es ist nicht so, dass der Bearbeitungsmodus mit einer Übersicht in Konflikt steht.

Noch ein Szenario:

  • Zeigen Sie wie bei flickr alle Elemente als einfachen Text an. Wenn Sie auf ein Element klicken, verwandeln Sie es in ein bearbeitbares Formularfeld. ESC bricht ab, Eingabe bestätigt.

Dies wird als Quasimode bezeichnet - er ist nur so lange aktiv, wie der Benutzer ihn explizit aufruft (hier, indem er sich auf das Formularelement konzentriert). Dies erleichtert dem Benutzer das Verständnis, ob und warum er sich im Bearbeitungsmodus befindet. Ein praktisches Beispiel: Niemand hält versehentlich Shift (= Quasimode) gedrückt, aber CapsLock (= Mode) ist eine ständige Quelle von Ärger.

Es scheint mir jedoch, dass Ihr Szenario an die eigentliche Bearbeitung auf einer anderen Seite gebunden ist, sodass Formularelemente nur verwirrend sind. Ein sauberer, schön gestalteter Tisch ist besser geeignet.

0
Christian