it-swarm.com.de

Wie vermeide ich "Hover and Cover" auf Schaltflächen am Ende eines Formulars?

Ich arbeite an einer scheinbar einfachen Oberfläche: 2 Eingabefelder direkt über einer Reihe von Aktionsschaltflächen. Jede Schaltfläche stellt eine andere Möglichkeit dar, dieselbe Aufgabe auszuführen (z. B. Assistent, Hochladen eines Dokuments usw.). Wenn die Seite geladen wird, haben alle Optionen das gleiche visuelle Design, aber je nach Benutzereingabe wird eine davon "vorgeschlagen" (möglicherweise hervorgehoben oder die anderen ausgegraut).

Mein Problem ist: Beide Felder haben einen Typ vor sich. Wenn Sie also mit der Eingabe im zweiten Feld beginnen, werden die Aktionsschaltflächen durch die Ergebnisse für den Typ vor Ihnen abgedeckt, und wenn Sie eines dieser Ergebnisse auswählen, wird nicht einmal die Statusänderung von angezeigt die Knöpfe. Ich kann die Schaltflächen nicht löschen und nur die vorgeschlagene nach Benutzereingabe anzeigen, da selbst wenn eine Option vorgeschlagen wird, jede Option immer vom ersten Moment an verfügbar sein sollte.

Wie würden Sie dieses Problem mit dem Schwebeflug vermeiden? Ich werde die Schaltflächen nicht zu weit von den anderen Feldern entfernen. Es scheint mir, dass zu viel Abstand dazu führt, dass Sie die Beziehungen zwischen den Elementen verlieren

Ich habe ein kleines Drahtmodell vorbereitet, um Ihnen meinen Fall zu zeigen:

enter image description here

13
mvicidomini

Können Sie das Dropdown-Menü "Typ voraus" haben? Drücken Sie die Tasten darunter, während es aktiv ist, und schieben Sie sie beim Einfahren wieder nach oben? Dies könnte Ihnen die Möglichkeit geben, dem Formular mit der Animation eine nette, subtile Persönlichkeit zu verleihen.

2
Jonah

Sie betrachten dieses Problem aus dem falschen Blickwinkel. Im Moment fragen Sie: "Wie kann ich dafür sorgen, dass es sich so verhält, wie [~ # ~] ich [~ # ~] es mir vorgestellt habe?" . Sie sollten jedoch fragen: "Verhält es sich so, wie meine Benutzer denken und arbeiten?".

Hier ist eine User Story, die auf dem Inhalt Ihres Drahtgitters basiert:

Paolo aus Rom will sein altes Motorrad verkaufen. Er kommt zu Ihrer Site und wird mit diesem 2-Feld-Formular begrüßt. Er beantwortet die erste Frage: "Motorrad". Dann beantwortet er die zweite Frage: "Rom, Italien". Als er den Standort bestätigt, bemerkt er, dass sich die Schaltflächen geändert haben und eine davon größer als andere ist.

Frage: Was ist momentan das Wichtigste in Paolos Kopf? Es ist nicht so, dass er nicht gesehen hat, wie sich Tasten während des Tippens geändert haben. Es ist nicht so, dass er sich fragt, wie sich die Schaltflächen ändern, wenn er etwas anderes in das Standortfeld eingibt (er lebt in Rom und es ist schließlich eine gültige Wahl). Er befasst sich mit , warum die Schaltflächen geändert wurden und ob er auf eine Weise vorgehen kann, die nicht empfohlen wird.

Die schnellste Lösung für das Problem besteht daher darin, das Highlight zu erläutern und dem Benutzer mitzuteilen, dass er auch eine andere Option auswählen kann.

Ich denke jedoch, dass Sie Ihren gesamten Prozessablauf (nicht einmal die Drahtgitter) überprüfen und feststellen müssen, welche Beziehungen (, falls vorhanden ) zwischen den Eingaben bestehen und die vorgeschlagenen Maßnahmen. Möglicherweise ordnen Sie die Schritte nur neu an.

Wenn Ihre Wireframes nicht hypothetisch sind, sondern eine echte Interaktion aus Ihrer Anwendung, haben Sie den Prozess definitiv falsch gestaltet, da der zu verkaufende Artikel und der Standort nichts damit zu tun haben, wie die Auflistung veröffentlicht wird. Tatsächlich sollten die beiden Fragen, die Sie im Formular stellen, Teil des Prozesses sein, sobald der Benutzer ausgewählt hat, wie mit der Veröffentlichung fortgefahren werden soll. Daher sollten Sie den Benutzern zuerst die 4 Optionen vorstellen und sie dann nach Details fragen.

8
dnbrv