La barre d’onglets inférieure, le tiroir latéral et le bouton d’action flottant (FAB) sont les modèles les plus fréquemment utilisés pour la navigation mobile de haut niveau. Si vous souhaitez concevoir des chemins de navigation clairs et simples, utilisez l’un de ces modèles dans votre application.
Apport de la copie réelle
Après avoir été satisfait de votre hiérarchie visuelle, commencez à remplacer les espaces réservés et le texte factice par du contenu réel (copie réelle ou celle qui est pertinente pour l’utilisateur). Il y a une raison importante pour laquelle nous devrions éviter le texte factice à ce stade – Lorem Ipsum ne communique pas comment la page aide les utilisateurs à atteindre leurs objectifs. En outre, de nombreux éléments visuels que nous créons sont basés sur le contenu de nos produits. Lorsque vous commencerez à ajouter du contenu réel, vous réaliserez que certains éléments d’interface utilisateur (ou même des sections d’interface utilisateur) ne sont pas nécessaires pour votre produit.
Parfois, lorsque vous remplissez vos wireframes avec des détails réels, vous pouvez remarquer que la mise en page que vous avez ne fonctionne pas bien. Dans ce cas, il est important d’itérer et de trouver une meilleure façon de représenter l’information que vous essayez de communiquer.
Après avoir rempli la page avec du texte réel, testez si la page est fluide pour l’utilisateur. Une partie du contenu de votre page pourrait être en désordre. C’est le moment idéal pour réorganiser le contenu de la page et améliorer la composition.
Vous trouverez ci-dessous un exemple de notre fil conducteur pour notre écran d’accueil qui comporte des données réelles. Différentes tailles de police sont utilisées pour hiérarchiser certains blocs de l’interface utilisateur (comme les catégories d’aliments).
Assurez-vous que votre contenu est bien mis à l’échelle
Si votre conception semble excellente sur un écran de téléphone de taille moyenne comme l’iPhone XS, cela ne signifie pas que les utilisateurs de l’iPhone 5 et de l’iPhone XS Max auront la même expérience formidable. S’il est tout à fait correct de commencer par un écran de taille moyenne lors du wireframing, il est également essentiel de vérifier comment le contenu se présente sur différentes tailles d’écran (écrans plus petits et plus grands) et de l’ajuster si nécessaire.
Connecter les pages ensemble pour créer un flux
Bien qu’il soit possible d’expédier votre design comme une collection d’écrans individuels, il est préférable de créer un flux à partir d’eux. Les flux UX permettent à l’équipe de comprendre facilement les détails des scénarios d’interaction – ils communiquent la façon dont les gens sont censés interagir avec un produit.
Les flux UX vous feront également réfléchir à la fonctionnalité de l’app dans son ensemble. Par exemple, après avoir visualisé le flux UX, vous pourriez remarquer que vous devez introduire un état supplémentaire entre l’écran d’accueil et une page contenant des résultats de recherche (parce que le backend de votre système prendra quelques secondes pour retourner les résultats).
C’est aussi une bonne idée de donner à chaque écran un numéro de référence. Les numéros de référence vous faciliteront grandement la vie lorsque vous discuterez du projet avec les autres membres de l’équipe ou les parties prenantes.
Tester vos décisions de conception
Le test est la dernière étape (et l’une des plus importantes) du wireframing. Le test implique des interactions avec les utilisateurs, c’est pourquoi ce terme est souvent utilisé dans le contexte des prototypes. Mais il est possible d’effectuer des tests simples pour un flux créé à partir d’un wireframe. En utilisant Balsamiq, il est possible de créer des prototypes simples et cliquables en reliant les wireframes entre eux. L’objectif de ces tests est de voir si les écrans fonctionnent ensemble.
Conclusion
Le but ultime du wireframing est d’identifier les grandes lignes du contenu et de créer une base solide pour les étapes futures du processus de conception. Des wireframes bien conçus rendent la conception visuelle et d’interaction beaucoup plus facile.
Comme pour toutes les activités de conception, passez suffisamment de temps à expérimenter différents outils et processus et vous trouverez votre propre style pour le wireframing. C’est en forgeant qu’on devient forgeron.
Mots de Nick Babich
Parution originale sur le site d’éducation UI de Balsamiq
.