Une structure filaire d'interface utilisateur est une représentation visuelle d'une conception d'interface utilisateur (UI) qui décrit la structure et la disposition de base d'une application Web ou mobile. Il s'agit d'une maquette basse fidélité ou d'un squelette de la conception finale qui montre le placement de divers éléments de conception, tels que des boutons, des menus, des formulaires et des images, sur l'écran.
Les wireframes d'interface utilisateur sont importants pour plusieurs raisons :
Les wireframes de l'interface utilisateur sont mieux utilisés dans les premières étapes du processus de conception. Les concepteurs commencent généralement par créer plusieurs wireframes basse fidélité pour explorer différentes options de mise en page et itérer sur la conception en fonction des commentaires des parties prenantes. Une fois qu'une conception finale est sélectionnée, des wireframes ou des maquettes plus fidèles sont créés pour fournir plus de détails et une meilleure idée du produit final. Ces wireframes servent ensuite de référence à l'équipe de développement lors de la phase d'implémentation.
Un wireframe d'interface utilisateur comprend généralement les éléments suivants :
Lors de la conception de la mise en page d'une nouvelle page ou de la refonte d'une page existante, il est important de s'en tenir au système de grille. Divisez votre wireframe en une grille et assurez-vous que vos images, votre texte et vos appels à l'action s'intègrent parfaitement dans la grille. Cela ne signifie pas que tous les actifs ont la même taille, cela signifie qu'ils doivent être proportionnels les uns aux autres.
Jetez un œil à tout l'espacement que vous avez entre les sections de texte ou les boutons. Maintenant, doublez-le. Il est toujours préférable d'avoir plus d'espace entre les paragraphes ou les images que de les voir à l'étroit. Les utilisateurs ne seront pas rebutés par beaucoup d'espace vide (dans des limites raisonnables), mais se sentiront rapidement submergés et confus par les images empilées les unes sur les autres.
Testez votre page avec de vrais utilisateurs. N'oubliez pas que votre équipe de conception, de technologie et de développement de produits ne peut vous mener que jusqu'à présent. Vous devez écouter les commentaires des utilisateurs réels et surveiller leurs actions avec votre nouveau schéma d'interface utilisateur. Est-il difficile pour les utilisateurs de trouver un certain bouton ? Agrandissez-le. Une image est-elle trop grande pour les utilisateurs d'ordinateurs portables ? Rendez votre page plus réactive. Testez votre page et itérez en conséquence.
Oui, n'importe qui peut créer une structure filaire d'interface utilisateur. Cependant, il est important de garder à l'esprit que les wireframes sont une partie essentielle du processus de conception et nécessitent une compréhension de base des principes de conception de l'interface utilisateur et des meilleures pratiques.
Non, les wireframes de l'interface utilisateur sont généralement de faible fidélité et n'incluent pas les éléments de conception visuelle finaux tels que la typographie détaillée, les schémas de couleurs ou les éléments de marque. Cependant, ils peuvent inclure des repères visuels de base pour donner une idée générale de l'orientation finale de la conception.
Le nombre d'itérations des wireframes de l'interface utilisateur dépend de la complexité du projet et du niveau de détail requis. En règle générale, les concepteurs créent plusieurs wireframes basse fidélité avant de se fixer sur une conception finale, puis créent des wireframes ou des maquettes plus fidèles pour fournir plus de détails. Il n'est pas rare que les concepteurs itèrent également sur la conception tout au long du processus de développement.
