Navigation

Wireframes

Introduction

Chaque site internet, application ou autre projet nécessite un plan. Un peu comme un architecte réalise le plan de sa maison avant de la construire. Le wireframing consiste à définir en détails chaque zone du site. Il intervient en général après le zoning et permet de définir les composants d’une page sous forme de croquis.

Il est important de garder en tête les objectifs du site et les différents flux de navigation pour les atteindre.

Le wireframing est utilisé pour définir la structure finale des différents types de pages (header, menu, footer, corps de pages, boutons). Il permet aussi d’aider à formaliser les attentes, les besoins et objectifs, d’obtenir des feedbacks et de détecter les problèmes d’utilisabilité. C’est à partir de ce document que travaillera le designer visuel afin de concevoir l’apparence finale du site.

Méthodologie

Le but est de décrire le plus précisément tout écran en faisant abstraction des considérations graphiques (typographie, couleurs, etc.).

Ce travail doit répondre à chacune des 12 règles ergonomiques suivantes tirées du livre Ergonomie du Web d’E.Sloïm, 3e édition.

  1. Architecture : le site est bien organisé

  2. Organisation visuelle : la page est harmonieuse

  3. Cohérence : le site capitalise sur l’apprentissage interne (il faut rester cohérent dans les choix fait par rapport au site pour permettre à l’utilisateur de se façonner un modèle mental solide.)

  4. Conventions : le site capitalise sur l’apprentissage externe (l’utilisateur n’est pas novice dans la navigation et il va essayer d’appliquer ses connaissances concernant d’autres pages au vôtre.)

  5. Information : le site informe l’internaute et répond à ses besoins

  6. Compréhension : les mots et symboles sont choisi minutieusement

  7. Assistance : le site aide et dirige l’internaute

  8. Gestion des erreurs : le site prévoit que l’internaute se trompe et propose des alternatives

  9. Rapidité : l’internaute ne perd pas son temps et arrive rapidement à son but

  10. Liberté : c’est l’internaute qui commande

  11. Accessibilité : un site facile d’accès pour tous

  12. Satisfaction de l’internaute : l’utilisateur atteint son but et trouve ce qu’il cherche.

Points importants à prendre en considération

Le wireframe est un outil utile car il permet de mettre en place tous les éléments. Le tester permet de se représenter le projet avant d’aller plus loin. C’est aussi un gain de temps pour le reste de la team travaillant sur le projet (designers et développeurs). Si l’on définit les éléments à cette étape (tôt dans le projet) c’est pour avoir un gain de temps et d’argent.