Lignes directrices et règles de conception des grands formulaires
Je travaille sur une interface graphique Web du système CRM d'entreprise interne qui a beaucoup de pages avec de grands formulaires, qui contiennent 10 à 60 types de champs différents: principalement des entrées, des sélections, des radios et des cases à cocher. Et bien sûr, beaucoup d'étiquettes, de petits morceaux de texte et de boutons - maintenant tout cela ressemble à un gâchis complet ..
En premier lieu, je veux formuler une liste de règles, comme le brand-book - ce qui peut être fait et ce qui ne peut pas - dans les nouveaux formulaires et comment les existants doivent être repensés. Mon objectif est maintenant un ensemble ou des règles propres et transparents pour les concepteurs et les codeurs CSS/HTML.
Si quelqu'un pouvait me donner des conseils sur la manière de procéder? Toutes les approches - colonnes, schémas de couleurs, styles, etc. sont applicables.
Je pense que vous devriez casser votre forme en petits morceaux. Je veux dire différents blocs ou catégories comme 1) Informations personnelles 2) Informations de contact ou informations sur le produit (poids, taille, matériau ... etc.)
& plus. Remplissez chaque bloc avec une couleur de fond alternative (pas plus de deux couleurs de fond).
Gardez les étiquettes en haut de tous les champs de saisie, zone de texte et autres champs de formulaire.
Voici un excellent article sur la convivialité du formulaire: http://uxdesign.smashingmagazine.com/2011/11/08/extensive-guide-web-form-usability/
La flexibilité du système rend les besoins écrasants. Nous pourrions proposer des règles de conception, mais ce serait trop général et trop long.
Le système que vous décrivez consiste généralement à organiser un grand nombre de données sous différentes formes et relations, dans un utilisable , modifiable , et visuellement attrayant . Pour l'inspiration, il y a des tonnes de systèmes en ligne qui font cela, de agile à facebook.
Je m'asseyais avec interaction ou graphistes et je commençais à dessiner des maquettes avec stylo et papier. Et puis peut-être poster une question sur certaines énigmes pointues sur votre chemin, au lieu de la conception globale.
C'est exactement ce que nous faisons actuellement au ministère du Travail avec notre X Framework . Notre équipe UX dicte les directives de style utilisées par plus de 20 équipes de développement d'applications travaillant à la fois sur des applications internes et externes.
En utilisant notre framework frontal, nous fournissons aux développeurs un système de grille par défaut ( 960.gs ), des schémas/styles de couleurs de base, des bibliothèques de démarrage JavaScript de base (jQuery par exemple) avec la possibilité de charger paresseusement une bibliothèque prise en charge en plus ( DataTables , Sugar , jQuery UI , etc ...). Comme les équipes de développement ont besoin de fonctionnalités supplémentaires, nous ajoutons de nouvelles fonctionnalités et de nouveaux styles à leur demande. Les équipes de développement commencent également maintenant le processus de cadrage de fil qu'elles partagent avec l'équipe UX avant de commencer à coder.
Les équipes de développement utilisant notre framework bénéficient d'une accessibilité de base, la convivialité étant intégrée directement dans notre modèle et nos composants, une apparence cohérente, et bien plus encore. Nous avons également donné des conseils concernant le contenu et publierons bientôt des informations sur les principes et procédures des modèles de conception Web.
N'hésitez pas à parcourir nos documents et à extraire les informations que vous trouvez utiles.
Pour répondre à votre question sur les styles, j'utilise un guide de style qui aide les nouveaux développeurs/analystes à s'assurer qu'ils respectent la convention standard. Le guide de style contiendrait des conseils sur:
- Taille de police
- Style de menu
- Format date/heure
- Hyperliens
- Normes de formulaire: taille/orientation de l'étiquette, champs obligatoires, ordre de tabulation,
- Dispositions de tableau standard: style de titre, style de cellule, justification de cellule pour le type de valeur, coloration des lignes (bande de pastèque?),
- Widgets communs à utiliser dans toute l'application
- Texte alternatif
- Boutons/guides d'image: police à utiliser, couleur, dégradés, etc.
- Icônes à utiliser
- Style de survol/délai
- Utilisation de la chapelure
- Style d'arbre
- Utilisation de fenêtres contextuelles
- Styles de message d'erreur (erreur, informationnel, avertissement, personnalisé)
J'utilise le terme "guide", car c'est juste cela: un guide. Ce n'est pas une exigence, car différentes situations justifient des solutions différentes. Cependant, tout écart doit être discuté avec l'équipe, pour s'assurer que c'est la bonne approche. Peut-être qu'un nouveau style doit être ajouté au guide.
Quant aux candidatures ... J'ai une situation similaire. L'une des applications sur lesquelles je travaille a été conçue pour TOUT LE MONDE, et maintenant elle ne plaît à PERSONNE. Rendre le système joli peut ne pas le rendre plus fonctionnel. Et je ne peux pas apporter de modifications ayant un impact négatif sur mes utilisateurs avancés qui savent où se trouve chaque domaine qu'ils doivent utiliser.
Je suis sûr que si vous analysiez les données, vous ne verriez que 20% des champs utilisés en permanence et les 80% restants uniquement dans certains cas.