it-swarm.com.de

Richtlinien und Regeln für das Design großer Formulare

Ich arbeite an einer Web-GUI des inneren Unternehmens-CRM-Systems, die viele Seiten mit großen Formularen enthält, die 10-60 verschiedene Arten von Feldern enthalten: hauptsächlich Eingaben, auch Auswahlmöglichkeiten, Radios und Kontrollkästchen. Und natürlich viele Etiketten, kleine Textstücke und Schaltflächen - jetzt sieht alles wie ein komplettes Durcheinander aus.

Zunächst möchte ich eine Liste von Regeln formulieren, wie zum Beispiel das Markenbuch - was getan werden kann und was nicht - in den neuen Formularen und wie die vorhandenen neu gestaltet werden müssen. Mein Ziel ist jetzt ein sauberes transparentes und eindeutiges Set oder Regeln für Designer und CSS/HTML-Codierer.

Wenn mir jemand einen Rat geben könnte, wie das gemacht werden kann? Alle Ansätze - Spalten, Farbschemata, Stile usw. - sind anwendbar.

2
shershen

Ich denke, Sie sollten Ihre Form in kleinen Stücken brechen. Ich möchte verschiedene Blöcke oder Kategorien wie 1) Persönliche Informationen 2) Kontaktinformationen oder Produktinformationen (Gewicht, Größe, Material usw.) sagen.

& Mehr. Füllen Sie jeden Block mit einer alternativen Hintergrundfarbe (nicht mehr als zwei Hintergrundfarben).

Halten Sie Beschriftungen oben in allen Eingabefeldern, Textbereichen und anderen Formularfeldern.

Hier ist ein großartiger Artikel über die Benutzerfreundlichkeit von Formularen: http://uxdesign.smashingmagazine.com/2011/11/08/extensive-guide-web-form-usability/

Die Flexibilität des Systems macht die Anforderungen überwältigend. Wir könnten uns einige Designregeln einfallen lassen, aber diese wären zu allgemein und zu lang.

Bei dem von Ihnen beschriebenen System geht es im Allgemeinen darum, viele Daten in verschiedenen Formen und Beziehungen in einer verwendbaren , bearbeitbaren Form anzuordnen und visuell attraktiver Weg. Zur Inspiration gibt es unzählige Systeme online, die dies tun, von flink bis Facebook.

Ich würde mich mit Interaktions- oder Grafikdesignern zusammensetzen und anfangen, Modelle mit zu zeichnen Stift und Papier. Und dann stellen Sie vielleicht eine Frage zu bestimmten Problemen auf Ihrem Weg, anstatt zum Gesamtdesign.

3
JOG

Genau das tun wir derzeit im Arbeitsministerium mit unserem X Framework . Unser UX-Team schreibt Stilrichtlinien vor, die von über 20 Anwendungsentwicklungsteams verwendet werden, die sowohl an internen als auch an externen Anwendungen arbeiten.

Durch die Verwendung unseres Frontend-Frameworks bieten wir Entwicklern ein Standard-Rastersystem ( 960.gs ), grundlegende Farbschemata/-stile und grundlegende JavaScript-Startbibliotheken (z. B. jQuery) mit der Möglichkeit, zusätzlich unterstützte Bibliotheken verzögert zu laden ( DataTables , Sugar , jQuery UI , etc ...). Da Entwicklerteams zusätzliche Funktionen benötigen, fügen wir nach Bedarf neue Funktionen und Stile hinzu. Entwicklerteams starten jetzt auch den Wire-Framing-Prozess, den sie mit dem UX-Team teilen, bevor sie mit dem Codieren beginnen.

Entwicklungsteams, die unser Framework verwenden, profitieren von der grundlegenden Zugänglichkeit, der direkten Integration der Benutzerfreundlichkeit in unsere Vorlagen und Komponenten, dem einheitlichen Erscheinungsbild und vielem mehr. Wir geben auch Hinweise zum Inhalt und veröffentlichen in Kürze Informationen zu den Prinzipien und Verfahren für Webdesignmuster.

Schauen Sie sich unsere Materialien an und rufen Sie Informationen ab, die Sie hilfreich finden.

1
JeffH

Um Ihre Frage zu Stilen zu beantworten, verwende ich einen Styleguide, mit dem neue Entwickler/Analysten sicherstellen können, dass sie der Standardkonvention entsprechen. Der Styleguide enthält Anleitungen zu:

  • Schriftgröße
  • Menüstil
  • Datums-/Uhrzeitformat
  • Hyperlinks
  • Formularstandards: Etikettengröße/-ausrichtung, Erforderliche Felder, Tabulatorreihenfolge,
  • Standardtabellenlayouts: Überschriftenstil, Zellstil, Zellausrichtung für Werttyp, Färbung der Zeilen (Wassermelonenstreifen?),
  • Allgemeine Widgets, die in der gesamten Anwendung verwendet werden sollen
  • Alt-Text
  • Schaltflächen-/Bildhandbücher: Zu verwendende Schriftart, Farbe, Farbverläufe usw.
  • Zu verwendende Symbole
  • Schwebestil/Verzögerung
  • Verwendung von Semmelbröseln
  • Baumstil
  • Verwendung von Popups
  • Stile für Fehlermeldungen (Fehler, Information, Warnung, Benutzerdefiniert)

Ich benutze den Begriff "Leitfaden", weil es nur das ist: ein Leitfaden. Dies ist keine Voraussetzung, da unterschiedliche Situationen unterschiedliche Lösungen erfordern. Abweichungen sollten jedoch mit dem Team besprochen werden, um sicherzustellen, dass dies der richtige Ansatz ist. Möglicherweise muss dem Leitfaden ein neuer Stil hinzugefügt werden.

Was die Anwendungen betrifft ... Ich habe eine ähnliche Situation. Eine der Anwendungen, an denen ich arbeite, wurde für ALLE entwickelt, und jetzt gefällt es niemandem. Wenn Sie das System hübsch machen, wird es möglicherweise nicht funktionsfähiger. Und ich kann keine Änderungen vornehmen, die sich nachteilig auf meine fortgeschrittenen Benutzer auswirken, die wissen, wo sich jedes Feld befindet, das sie verwenden müssen.

Ich bin sicher, wenn Sie die Daten analysieren, sehen Sie nur 20% der Felder, die ständig verwendet werden, und die anderen 80% der Felder, die nur in bestimmten Fällen verwendet werden.

0
Nick P