it-swarm.com.de

Positionieren einer sekundären Schaltfläche innerhalb einer Formulargruppe mit Feldern unterschiedlicher Breite

Ich habe eine einfache Form wie folgt:

mockup

bmml source herunterladen - Wireframes erstellt mit Balsamiq Mockups

Die SMTP-Einstellungen enthalten eine Reihe von Feldern, sodass die Feldgruppe ziemlich lang ist. Einige Felder haben ziemlich lange Beschreibungen. Felder haben auch unterschiedliche Breiten, um dem Benutzer die erwartete Feldlänge anzuzeigen.

Ich hätte gerne eine Schaltfläche, mit der der Benutzer seine SMTP-Einstellungen testen und sofort eine Art Feedback zurückgeben kann. Ich habe es derzeit unten rechts, aber aufgrund der Probleme mit ungleichmäßiger Feldlänge und Beschreibungen fühlt sich die Schaltfläche sehr fehl am Platz an.

Gibt es eine bessere Möglichkeit, das Test SMTP Settings Taste? Ich möchte vermeiden, dass es auch für den Submit-Button verwirrt wird.

3
F21

Geben Sie es entweder als sekundäre Aktion als nächstes an, um Änderungen zu speichern, oder verschieben Sie es einfach in eine eigene Zeile, anstatt die Zeile mit einem Eingabefeld zu teilen (insbesondere mit dem letzten, was ich als 'Port' bezeichnen würde ').

Wenn Sie nur einen begrenzten vertikalen Speicherplatz haben, setzen Sie ihn neben den Hostnamen. Der Hostname definiert einen SMTP-Server. Alles andere ist "optional". . Wenn Sie erwarten, dass sich Benutzer hauptsächlich authentifizieren, geben Sie dies in das Kennwortfeld (in einer eigenen Zeile) ein.

Allgemein:

  • wenn eine sekundäre Schaltfläche für ein einzelnes Feld gilt, setzen Sie sie neben ein Feld
  • falls eine sekundäre Schaltfläche auf eine Teilmenge von Feldern angewendet wird, setzen Sie sie unter die Felder (gruppiert) in ihrer eigene Zeile
  • wenn eine sekundäre Schaltfläche für das gesamte Formular gilt, verwenden Sie das sekundäre Aktionsmuster.

Normalerweise erklärte ich die Nähe des C.R.A.P. Regeln als:

"Wenn zwei Dinge in ihrem Thema nahe beieinander liegen, sollten sie auch räumlich nahe beieinander liegen. Wenn zwei Dinge völlig getrennt sind, sollten sie auch räumlich getrennt sein."

Die reale Welt ist viel komplexer, aber ein Liner ist leichter zu unterrichten.

3
Aadaam

Ich frage mich, ob Sie diesen Knopf überhaupt wirklich brauchen.

Auch wenn es in Ihrer Frage nicht erwähnt wird, gehe ich davon aus, dass Sie später eine Validierung haben, um sicherzustellen, dass die eingegebenen E-Mail-Anmeldeinformationen korrekt sind. Sie verlassen sich nicht nur darauf, dass ein Benutzer prüft, ob die E-Mail korrekt ist, und riskieren in diesem Fall, dass Benutzer nicht funktionierende E-Mails in Ihrem Dienst speichern?

In beiden Fällen würde ich einen anderen Ansatz vorschlagen, nämlich das Entfernen der separaten Validierungsprüfung und das Integrieren der Validierung und das Speichern in einem:

mockup

bmml source herunterladen - Wireframes erstellt mit Balsamiq Mockups

Jetzt wird die E-Mail nach der Eingabe routinemäßig überprüft, und ein Benutzer muss sich nicht mehr darum kümmern, ob er überprüfen soll, ob seine E-Mail korrekt ist oder nicht. Die Anwendung behandelt alle Eingaben gleich. Auf diese Weise werden Tippfehler oder andere Probleme frühzeitig für Benutzer behandelt, die selbst keine Validierung initiiert hätten.

Dieser Ansatz würde unter das Prinzip des Fehlerverhütungsdesigns fallen und ist eine etablierte Strategie zur Verbesserung der Benutzeroberfläche der von Ihnen erstellten Anwendungen.

1
AndroidHustle

Nur als Test habe ich Ihr einspaltiges Formular (Beschriftungen über den Eingaben) als zweispaltiges Formular (Beschriftungen vor den Eingaben) neu angeordnet, da ich dachte, dass die Testschaltfläche möglicherweise falsch platziert erscheint, weil alle Daten so links gestapelt waren der Container, und es gab ein riesiges Leerzeichen, das die rechte Hälfte überspannte.
Die Form wurde "kürzer", weniger entmutigend. Vielleicht muss es jetzt nicht gescrollt werden.
Es sieht so aus:

mockup

bmml source herunterladen - Wireframes erstellt mit Balsamiq Mockups

Außerdem habe ich der Schaltfläche "Test ..." einen sekundären Aktionsblick durch eine kleinere Schriftart gegeben. In der eigentlichen Benutzeroberfläche kann es auch eine hellere Farbe und einen helleren Rand usw. haben.
Eine nette Geste wäre, die Schaltfläche "Test ..." deaktiviert anzuzeigen und sie nur zu aktivieren, wenn der Benutzer genügend Parameter eingegeben hat, um den Verbindungstest zu ermöglichen.

Wer hat gesagt, dass Etiketten Einzeiler sein müssen? Nicht ich.

0
Juan Lanus