it-swarm.com.de

Skalieren eines Adressformulars beim Ändern der Größe

Meine Bewerbung enthält ein Formular zum Ausfüllen der Namen und Adressen eines Spenders. Jeder Spender erhält einen verschließbaren Tab und jeder Tab hat ein Adressformular.

Das Problem ist, dass die Anwendung in einem regulären Anwendungsfenster ausgeführt wird und daher auf alle unterschiedlichen Größen skaliert wird. Wenn ich die Breite und Höhe der Textfelder statisch mache, bleiben sie alle oben links im Fenster auf einem großen Bildschirm. Wenn ich sie dynamisch mache, sieht das Formular aufgrund massiver Kästchen für relativ kleine Textmengen (d. H. Vorname) schlecht aus. Wenn ich sie dynamisch platziere, habe ich große Lücken zwischen den Kisten.

Wie kann ich dieses Problem am besten lösen? Gibt es ein UI-Konstrukt, das normalerweise dafür verwendet wird? Bisher habe ich nur gesehen, dass das Formular in einen nicht skalierbaren modalen Dialog eingefügt wurde, was ich deshalb nicht tun kann der tab-basierten Benutzeroberfläche.

Hier ist ein Screenshot, der das Problem zeigt:

(Too much white space

5
krispy

Die Verwendung eines reaktionsschnellen Layouts, das Tabs in Fenster verwandelte, war die am besten aussehende Lösung für dieses. Wenn das Fenster groß genug wird, um es zu unterstützen, wird die wichtigste Registerkarte zu einem Bereich.

Screenshot mit kleiner Auflösung: Small resolution screenshot of app

Screenshot in großer Auflösung: Large resolution screenshot of app

1
krispy

Gute Frage.

Ich sehe ein paar Möglichkeiten, dies zu erreichen.

  1. Ziehen Sie in Betracht, den Inhalt dieser Registerkarte mit einer der anderen Registerkarten zu vereinen und sie vollständig zu entfernen.
  2. In ähnlicher Weise sollten Sie Ihre Inhalte unterschiedlich auf die Registerkarten verteilen. Vielleicht gibt es eine alternative effektive Gruppierung, mit der Sie die Registerkarten ausgewogener gestalten können?
  3. Machen Sie das, was Websites tun, wenn Sie größere Auflösungen unterstützen als die, für die die Website optimiert ist. Und ich spreche nicht von Responsive Design, das Sie bereits erwähnt haben. Ich spreche von altmodischen Rändern. Bevor Responsive Design das nächste große Thema war, hatten Websites Ränder, die auf eine angemessene Breite skaliert werden konnten und trotzdem gut aussahen. Der Unterschied zwischen diesen und den von Ihnen in Betracht gezogenen Optionen besteht darin, dass Sie vorschlagen, den Bereich Inhalt zu skalieren. Der weiße Teil der Registerkarte ist der Inhalt. Die Ränder sind der graue Hintergrund. Sehen Sie, wie viel besser das schon aussieht, und ich habe den weißen Bereich nicht viel reduziert:

enter image description here

Finden Sie heraus, was Ihre größte Registerkarte ist, und stellen Sie die feste Größe des Registersteuerelements ein. Füllen Sie den Rest mit Hintergrund und Sie werden abgedeckt.

2

Angesichts der kognitiven Belastung des Benutzers durch das Formular über den Registerkarten würde ich vorschlagen, dass die Positionierung des Formulars innerhalb der Registerkarte die geringste Sorge ist.

Bevor der Benutzer zur Registerkarte gelangt, musste er seinen Fokus mehrmals über die gesamte Seitenbreite hin und her verschieben.

Ästhetisch bevorzuge ich eine Ausrichtung oben links, aber ich stimme ChrisF zu, dass es nicht viel ausmacht. Andererseits wäre ich vorsichtig, ein Hintergrundbild hinzuzufügen, um "den Raum zu füllen". Dies kann nur eine weitere Ablenkung hinzufügen und die Aufmerksamkeit des Benutzers vom kritischen Arbeitsbereich ablenken.

Viel wichtiger als die Formularausrichtung auf der Seite ist das Design der Beschriftungs-/Feldbeziehungen. Daher würde ich Ihnen empfehlen, die Gelegenheit zu nutzen, um mit der Implementierung einiger bewährter Methoden für das Formulardesign zu beginnen.

Ein angesehener Experte auf diesem Gebiet ist Luke Worblewski, der dies empfiehlt

Wenn die Zeit zum Ausfüllen eines Formulars minimiert werden muss und die gesammelten Daten den Benutzern meistens bekannt sind (z. B. Eingabe eines Namens, einer Adresse und Zahlungsinformationen in einen Check-out-Ablauf), erfolgt eine vertikale Ausrichtung von Beschriftungen und Eingabefeldern wird wahrscheinlich am besten funktionieren.

Dies scheint in diesem Fall zuzutreffen. Ein Beispiel für die vertikale Ausrichtung von Beschriftungen finden Sie in Lukes Beitrag: http://www.lukew.com/ff/entry.asp?1502

Ich möchte hinzufügen, dass bei sich wiederholenden Dateneingabeaufgaben die Reihenfolge der Felder/Registerkarten einen großen Unterschied hinsichtlich der Abschlussrate und der Genauigkeit bewirken kann. Sie sollten es den Benutzern ermöglichen, das Umschalten zwischen Maus und Tastatur zu vermeiden und nach Möglichkeit die am häufigsten ausgefüllten Felder zu gruppieren, um die Anzahl der Felder zu minimieren, die in den häufigsten Fällen übersprungen werden müssen.

Ich vermute, dass die Konzentration auf diese Art von Themen einen größeren Einfluss haben wird als die Ausrichtung des Formulars als Ganzes.

1
Justin

Ich glaube nicht, dass es einen "besten" Weg gibt.

Persönlich würde ich sie auf eine bestimmte Größe skalieren lassen und (wie Sie es getan haben) sie oben im Fenster verankern. Ich wäre versucht, sie zu zentrieren - aber oben links ist OK. Ich glaube nicht, dass die Leute von dem leeren Raum gestört werden - besonders wenn die Registerkarte tatsächlich ein vorübergehendes Fenster ist.

Wenn Sie die große Fläche des leeren Raums wirklich nicht möchten, können Sie ein Hintergrundbild haben, das nur angezeigt wird, wenn das Fenster eine bestimmte Größe überschreitet. Das Anzeigen von anderen Elementen würde vom Zweck der Registerkarte ablenken.

Nachdem ich Ihren Screenshot gesehen habe, verstehe ich, warum Sie besorgt sind, aber es kann sein, dass es wirklich kein Problem gibt. Wenn Sie die Felder horizontal zentrieren, sie aber oben auf dem Bildschirm belassen, würde dies für die Benutzer meiner Meinung nach in Ordnung sein.

1
ChrisF

Ich denke, es läuft darauf hinaus, dass du hier dein Freund bist, weil:

  1. Ein kleinerer Bereich erleichtert das Scannen und Verstehen des Formulars
  2. Benutzer, die zum Navigieren die Maus anstelle der Tastatur verwenden, müssen den Zeiger nicht über den gesamten Bildschirm bewegen, um zum nächsten Feld zu gelangen

Angesichts dieser Vorteile in Bezug auf die Nähe denke ich nicht wirklich, dass leerer Raum ein Problem ist, und ich würde definitiv eine kompakte, linksbündige Form mit fester Größe wie diese wählen:

(fixed size compact left aligned form

Außerdem wurde die Ausrichtung geändert und die Feldgrößen konsistent gemacht, um die Lesbarkeit zu verbessern.

0
fdmsaraiva