Suggestion requise pour la largeur maximale d'un formulaire
Mon équipe construit un outil de création de formulaire. Une fois publié, il peut y avoir plusieurs périphériques d'entrée qu'un utilisateur peut utiliser pour remplir un formulaire, d'un téléphone portable à un moniteur 27 ".
J'aimerais entendre vos idées sur la largeur maximale qu'un formulaire devrait prendre sur un moniteur de 27 "si la fenêtre du navigateur est entièrement ouverte - 3360 × 2100/4k.
Tout d'abord, vous devez considérer que les principes de lisibilité optimale s'appliquent à tout. A ne largeur de 45 à 75 caractères est considérée comme bonne, 66 caractères étant optimaux.
Cependant, certaines recherches ont montré que ce n'était pas toujours le cas, avec 95-100cpl (caractères par ligne) fonctionnant mieux . De plus, vos formulaires peuvent avoir un remplissage et des marges, donc je pense que tout ce qui est autour de 75-80cpl devrait être OK
Mais bien sûr, cela sera influencé par la taille de la police et des problèmes de conception supplémentaires. En outre, vous devez considérer les requêtes multimédias et les tailles réactives. J'ai fait une comparaison rapide ci-dessous en utilisant la police Arial de 12 à 16 pixels avec 70 caractères (en comptant les espaces, comme il se doit)
Comme vous pouvez le voir, la largeur de 360 pixels fonctionne très bien pour les petites polices , mais vous devez considérer que le minimum recommandé est 320px pour couvrir les petits appareils , donc en comptant les marges, vous devrez le rendre encore plus petit. Et puis vous pouvez grandir pour couvrir les tailles les plus courantes moins 30/40px. Par exemple:
290px --- 450px --- 730px (Je m'arrêterais ici, donc ce serait la largeur maximale pour un élément de formulaire )
Ressources additionnelles
Il y a un certain nombre de choses que vous devez garder à l'esprit ici. Pour mettre en évidence un couple, vous pouvez envisager la longueur de ligne et les grilles flexibles.
Selon la littérature que vous lisez, la longueur de ligne optimale pour la lecture se situe entre 15 et 20 mots - cela aura un impact sur la largeur de votre formulaire en matière de lisibilité.
Cependant, il y a une autre chose à penser (parmi bien d'autres). Je vous suggère de construire votre formulaire sous forme d'unités discrètes pouvant être réparties dans différentes grilles de colonnes en fonction de la largeur de l'appareil utilisé. Chaque unité pourrait contenir 1 ou 2 champs avec leurs légendes et et les instructions contextuelles nécessaires. Cela peut ensuite être coulé dans la page afin qu'ils s'organisent automatiquement dans l'ordre en fonction de la largeur de l'écran.
télécharger la source bmml - Wireframes créés avec Balsamiq Mockups
En fin de compte, c'est ce qui dictera la largeur de votre formulaire: taille de police, longueur de lecture optimale, unités/grilles de formulaire