it-swarm.com.de

Erstellen / Ändern in einem modalen Fenster

Angenommen, wir befinden uns auf einer Backend-Admin-Website und auf der Seite, auf der die Liste der Produkte angezeigt wird. Jetzt wollen wir ein neues Produkt einfügen. Das Einfüge-/Aktualisierungsformular sollte erscheinen:

  • A) in einem modalen Fenster

  • B) oder ist besser, den Benutzer auf eine neue Seite umzuleiten

In der Lösung A) enthält das Fenster nur den Titel ("Produkt aktualisieren" oder "Neues Produkt erstellen") und das Formular. Wenn der Benutzer die Idee ändert und das neue Element nicht ändern/erstellen möchte, kann er einfach das modale Fenster schließen und zum ursprünglichen Fenster zurückkehren, ohne dass etwas neu geladen werden muss.

In der Lösung B) enthält die Seite in Abhängigkeit vom Formular das Website-Menü und das Breadcrumb-Menü. Alle diese Elemente beziehen sich nicht auf die Aktion "Produkt aktualisieren/erstellen".

Welche Lösung ist die bessere? Die gleiche Lösung gilt für das "Neu erstellen" und für das "Update"?

7
Marco Staffoli

Ich denke, Sie können dort einen großen Unterschied machen, wenn Sie ein Konzept implementieren, das der Benutzer bei der Verwendung Ihrer Formulare durchschauen und akzeptieren kann. Es gibt Fakten zu modalen Fenstern, die Sie berücksichtigen sollten, um dieses Konzept und diese Entscheidung zu treffen:

In Bezug auf modale Dialoge/Formulare:

  • Nicht-Javascript-Barrierefreiheit : Für Benutzer mit deaktiviertem JS muss ohnehin ein separates Formular vorhanden sein (es sei denn, Sie planen nicht, sie zu unterstützen).

  • Unterbrechen des normalen Seitenworkflows : Modales Windows bedeutet, dass der Benutzer ausschließlich mit dem Inhalt beschäftigt sein soll, den das modale Fenster bereitstellt.

In Bezug auf normale Seitendialoge/Formulare:

  • Dringlichkeit der bevorstehenden Aufgabe : Wenn das Formular zu groß, zu überladen oder schwer zu bekommen ist, schaltet sich der Benutzer möglicherweise einfach aus und besucht einen anderen Ort auf Ihrer Seite Seite? ˅.


Entwickeln Ein Muster, das der Benutzer verstehen kann oder zumindest nicht stört

Zum Beispiel habe ich selbst einige Regeln für die Verwendung von modalen Dialogen festgelegt.

  • Verwenden Sie modale Dialoge, wenn einer der Benutzer eine Entscheidung getroffen hat, bei der er klar angegeben hat, wie der nächste Schritt aussehen soll : Wenn er beispielsweise auf Anmelden geklickt hat, ein Modal Ein Dialogfeld zur Eingabe der Benutzeranmeldeinformationen kann angezeigt werden, da der Benutzer genau diesen Formulartyp erwartet.

  • Verwenden Sie modale Dialoge, wenn die bevorstehende Aufgabe zu wichtig ist, um unbemerkt zu bleiben , und es für den Benutzer von größtem Interesse ist, die Aufgabe ohne Störung abzuschließen: Beispiel: Wenn der Benutzer auf Kasse klickt und seine Kreditkartenanmeldeinformationen eingibt.

  • Verwenden Sie modale Dialoge, wenn eine bereits erledigte Aufgabe zusätzliche Aufmerksamkeit erfordert : Wenn der Benutzer beispielsweise auf delete in einem Konto klickt, bestätigen und eingeben eines Grundes könnte in einer modalen Form erscheinen.

  • Verwenden Sie modale Dialoge, wenn der Benutzer ohne Ausfüllen des modalen Formulars ohnehin nicht weiterkommen kann: Für ein Anmeldeformular sind beispielsweise bestimmte Anmeldeinformationen erforderlich, und ohne diese Anmeldung erfolgt keine Anmeldung kann gemacht werden.

  • Verwenden Sie modale Dialoge nur, wenn der Benutzer das Formular problemlos ausfüllen kann, ohne andere Ressourcen von Ihrer Seite zu benötigen : Zum Beispiel, wenn der Benutzer einen Komplex ausfüllen muss Formular (wie ein Profil bei Stackexchange) möchte er möglicherweise eine Seite öffnen, um zu sehen, wie der andere Typ, den sie kennen, sein Profil gefüllt hat. Nur um eine E-Mail und ein Passwort einzugeben, muss der Benutzer dies nicht tun.

  • Verwenden Sie in jedem anderen Fall normale Formen.

Wie gesagt, diese Regeln sind meine und nicht zu berücksichtigende allgemeine Regeln. Ich bin auch gespannt darauf, mehr zu erfahren und wie andere modale Formen verwenden. Es soll Ihnen nur zeigen, wie Sie Ihre Entscheidung auf das stützen können, was Sie tatsächlich vom Benutzer wollen.

3
Beat Richartz

Ich bevorzuge es auch, den Benutzer im Kontext zu halten.

Ein anderer Ansatz, den ich weniger störend finde, besteht darin, eine Entität (in Ihrem Fall ein Produkt) direkt auf der Listenseite ändern zu können. Möglicherweise ein Symbol in der oberen rechten Ecke, das beim Klicken beispielsweise Beschriftungen in Textfelder verwandelt.

Dies funktioniert natürlich nur, wenn alle zu bearbeitenden Informationen bereits im Produktelement angezeigt werden.

Um ein neues Produkt zu erstellen, würde ich am Ende der Liste (oder am Anfang, wenn Sie die Vorherrschaft angeben möchten) ein Element hinzufügen, das ungefähr die gleiche Größe wie ein Produktelement mit einem Pluszeichen hat und im Bearbeitungsmodus zu einem Produktelement wird wenn geklickt. Etwas wie das:

enter image description here

6
jpsstavares

Persönlich bevorzuge ich immer (wenn möglich) den Modal-Weg, weil er weniger zwischen den Seiten springt und der Benutzer sich auf das konzentrieren kann, was er tut ...

Aber Wenn Sie die Seite zum Speichern ändern (z. B. ist Ihre Formularaktion eine andere Seite und wird jedes Mal neu geladen, wenn sie aus dem Formular gespeichert wird), geht der Punkt verloren, an dem Sie in der Stimmung bleiben. Sie sollten sich für AJAX Formulare) entscheiden, wenn Sie mit modalen ...

Wenn Sie nicht möchten, dass AJAX in Ihrem Formular) oder Ihre Daten zu vertraulich sind, sind Sie besser mit verschiedenen Seiten und übergeben sie mit POST als AJAX = Javascript, Ihr gesamter Server-Sendecode ist für Benutzer zugänglich.

Für eine kurze Antwort würde ich sagen AJAX => Modal, sonst ist der Modalteil völlig nutzlos.

2

Bei Massenbearbeitungen, bei denen Benutzer Änderungen an mehreren Produkten vornehmen müssen, kann die Ganzseitenbearbeitung effizienter sein, wenn Sie die Produktinformationen in einem Tabellenformat mit allen Eingabefeldern anzeigen können. Auf diese Weise können die Benutzer schnell Änderungen an mehreren Produkten vornehmen, und es ist in der Regel effizienter, alle Änderungen gleichzeitig zu übermitteln. (im Vergleich zu jeweils einem Produktwechsel)

Es gibt auch keinen Grund, warum Sie nicht beide Methoden bereitstellen können. Modal Edit für schnelle Änderungen. Und Ganzseitenbearbeitung für Massenbearbeitungen.

1
Jung Lee

Ich bin im Allgemeinen kein großer Fan von Modals, ich habe das Gefühl, dass sie nerven und den Fluss unterbrechen. Dies kann ein sehr effektives Attribut für Warnungen und Meldungen sein, aber ich versuche, sie im allgemeinen Ablauf eines Systems zu vermeiden.

Abgesehen davon, wenn es beim Erstellen eines neuen Produkts viele Felder gibt, würde ich sie auf eine neue Seite bringen. Wenn es nur eine minimale Anzahl von Feldern gibt (5 oder weniger? Sie müssen dort nach bestem Wissen und Gewissen vorgehen), würde ich ihnen nur erlauben, sie inline zu bearbeiten oder hinzuzufügen.

1
Ben