Que faire lorsque le contenu d'une page ne remplit pas suffisamment une zone fixe?
Une application a une taille fixe, à savoir 800x600 px. Cependant, un problème que je rencontre souvent est que le contenu de la page n'est pas suffisant. C'est tout simplement trop peu de contenu sur une grande surface.
Considérez la maquette ci-dessous, la "boîte" est de taille fixe:
télécharger la source bmml - Wireframes créés avec Balsamiq Mockups
Cet exemple est une étape cruciale et ne devrait probablement pas être fusionné avec une autre étape. Je ne cherche pas non plus à ajouter du contenu inutile, car cela n'encombrera que l'interface utilisateur. Redimensionner la zone fixe n'est pas non plus une option viable, du moins pas suffisamment (de préférence pas du tout).
Je suis sûr que je ne peux pas être le seul à rencontrer ce problème, mais que faites-vous lorsque vous vous y trouvez? La maquette n'est, comme dit, qu'un exemple, mais n'hésitez pas à la réutiliser pour démontrer une solution.
Je peux penser à quatre grandes techniques pour résoudre ce problème.
Tout d'abord, il me semble que vous pourriez probablement vous en sortir en augmentant la taille de vos composants d'interface utilisateur et de la copie. Le texte doit vraiment être de 14 pixels ou plus pour être bien lisible de toute façon, il y a donc des avantages pratiques à faire cela au-delà de l'esthétique.
Deuxièmement, si vous pensez qu'une page semble `` orpheline '' et que le formulaire est une action relative à un autre tableau ou groupe d'éléments sur une autre page, vous pouvez vous en sortir en affichant le formulaire sous forme de lightbox. Ce n'est pas une bonne pratique de choisir des éléments d'interface utilisateur simplement parce qu'ils sont plus "agréables", mais si c'est approprié du point de vue de l'expérience utilisateur, c'est quelque chose que vous devriez regarder.
Troisièmement, vous pouvez ajouter un contenu secondaire à la page si cela aide à promouvoir l'activité ou fournit de l'aide ou des conseils. C'est ce que Twitter fait sur ses pages de connexion (ci-dessous), mais attention à ne pas voler l'attention du formulaire lui-même. Dans le cas de Twitter, les éléments d'interface utilisateur d'un blanc éclatant et la mise en évidence subtile autour d'eux gardent la forme au centre de l'attention.
Enfin, vous pouvez rendre les espaces plus intéressants. Une technique courante sur les pages de connexion et de "passerelle" consiste à afficher un arrière-plan de photo flou, comme dans l'exemple suivant:
Le public averti du Web (c'est-à-dire d'autres concepteurs) pourrait cependant trouver cela un peu cliché. Une autre technique est une simple couleur ou dégradé pour un arrière-plan. Utiliser à nouveau quelque chose de plus sombre que le corps de la page aide à attirer l'attention sur le formulaire.
télécharger la source bmml - Wireframes créés avec Balsamiq Mockups
L'espace est un élément de conception. Vous devez bien utiliser les espaces et diffuser votre contenu sur ce qui en fait le contenu le plus lisible et utilisable, plutôt que d'essayer de le regrouper. Vous pouvez également avoir un texte plus gros - la plupart des sites ont leur texte trop petit, en particulier pour les formulaires.
Globalement, s'il est utilisable pour vos clients, le reste est une décision de conception esthétique où, tant que vous ne le rendez pas moins utilisable, vous pouvez le rendre plus agréable à regarder.
Dans votre maquette, vous devriez également penser à où iront les messages d'erreur, les étiquettes et le bouton de soumission. Avec ces éléments inclus, je pense que vous trouverez qu'il y a beaucoup moins d'espace blanc.
De plus, si la maquette est à l'échelle, cela rendrait vos champs très très petits, 200px est sur le côté étroit pour les zones de texte et les champs. Je suggérerais de les faire prendre au minimum entre 300 et 400 pixels de large.