29/10/2013: mon output de l’atelier de la Feweb sur l’ergonomie et le wireframing

Préambule

L’ergonomie et l’expérience utilisateur sont des sujets qui m’ont toujours passionnée, bien que je ne comprenne pas vraiment la différence entre ces dénominations trendy et mon quotidien de communicante web.

Grâce à cette soirée, j’ai appris que je réalisais effectivement le travail d’un ergonome web: dans tous les projets dans lesquels je suis impliquée, je travaille dans l’objectif d’une perception utilisateur la plus agréable et la plus fluide possible. Pour ce faire, je mentionne à chaque corps de métier le cadre de communication dans lequel il doit s’inscrire:

• par des listes de points spécifiques à satisfaire, en termes de design et de fonctionnalités,
• par un mindmap détaillé des contenus des différentes pages de navigation (à la place d’un wireframe low-fidelity, cf. plus bas), des différents menus et parties du site web (ou intranet),
• par un wireframe high-fidelity (cf. plus bas), déjà complété des textes et contenus finaux (construits en atelier de travail, directement avec le client), afin de mentionner précisément la hiérarchisation des contenus rédactionnels et visuels.

Je remercie donc la Feweb et les intervenants de m’avoir permis de préciser mon métier à la lumière de leurs explications et de leurs témoignages de webdesigners spécialisés.

NB: L’expérience utilisateur des interfaces web en particulier se résument à l’abréviation Ux dans la littérature professionnelle associée.

Les points repris par Benjamin De Cock, webdesigner

Benjamin mûrit ses designs dans un objectif de fluidité maximale, et de manipulation directement compréhensible par l’utilisateur. Dans cet esprit, il a mentionné:

• Dans les champs d’un formulaire, utiliser des labels essentiels, minimaux, non invasifs, qui peuvent être renforcés par des icones signifiantes customisées.
• Réduire les champs à remplir et les efforts à fournir par l’utilisateur
• Respecter les habitudes de navigation en fonction de l’OS: croix de fermeture de fenêtre à gauche ou à droite.

Chaque clic diminue le taux de conversion

• La vérification des identités par sms est plus efficace qu’un mot de passe… Le mot de passe est toujours plus difficile à retenir et à gérer par l’utilisateur.
• Indiquer le processus étape par étape (même fictivement), permet à l’utilisateur de comprendre qu’il doit attendre que le processus soit terminé avant d’entamer l’étape suivante.
• Le sms de vérification doit être court pour apparaître entièrement sur la notification, et contenir le code de vérification en fin de message, en call-to-action.
• La géolocalisation de l’utilisateur lui permet d’encoder directement son numéro de téléphone, sans avoir à passer par l’étape de sélection du préfixe international.
• De manière générale, il est bon de préremplir automatiquement les champs avec les informations que nous pouvons récupérer automatiquement. Mais évidemment, tous les champs restent éditables.
• Chaque champ de formulaire est animé de manière autonome, afin de permettre la transformation directe du reste du formulaire, en fonction des options de remplissage.

Les points repris par Nathalie Gouzée, directrice artistique et webdesigner

De l’intervention de Nathalie, j’ai surtout retenu son explication des différents types de wireframes:

• Le wireframe sketch /moodboard, dessiné à la main, à usage interne, limité en terme de versioning.
• Le wireframe low-fidelity ou zoning (en France), renforcé de commentaires (post-it), afin de mesurer les interactions entre les pages.
• Le wireframe high-fidelity ou prototype fonctionnel (en France), qui respecte les contenus et les proportions; à faire en collaboration avec le graphiste.

Nathalie recommande de prévoir des annotations reprenant les différentes recommandations (SEO…) afin de faciliter les développements ultérieurs. Elle travaille avec invisionapp.com pour le wireframing et le versioning.

Les détails de l’événement