- \n
- par des listes de points sp\u00e9cifiques \u00e0 satisfaire<\/strong>, en termes de design et de fonctionnalit\u00e9s,<\/li>\n
- par un mindmap d\u00e9taill\u00e9 des contenus<\/strong> des diff\u00e9rentes pages de navigation (\u00e0 la place d’un wireframe low-fidelity, cf. plus bas), des diff\u00e9rents menus et parties du site web (ou intranet),<\/li>\n
- par un wireframe high-fidelity<\/strong> (cf. plus bas), d\u00e9j\u00e0 compl\u00e9t\u00e9 des textes et contenus finaux (construits en atelier de travail, directement avec le client), afin de mentionner pr\u00e9cis\u00e9ment la hi\u00e9rarchisation des contenus r\u00e9dactionnels et visuels.<\/li>\n<\/ul>\n
Je remercie donc la Feweb et les intervenants de m’avoir permis de pr\u00e9ciser mon m\u00e9tier \u00e0 la lumi\u00e8re de leurs explications et de leurs t\u00e9moignages de webdesigners sp\u00e9cialis\u00e9s.<\/p>\n
NB: L’exp\u00e9rience utilisateur des interfaces web en particulier se r\u00e9sument \u00e0 l’abr\u00e9viation Ux dans la litt\u00e9rature professionnelle associ\u00e9e.<\/p>\n
![\"\"](\"http:\/\/orchestraaa.com\/wp-content\/blogs.dir\/8\/files\/2013\/10\/IMG_2017.jpg\")
<\/a>L’\u00e9v\u00e9nement \u00e9tait co-organis\u00e9 par la RueDuWeb, un collectif d’entreprises num\u00e9riques dont Orchestraaa fait partie.<\/figcaption><\/figure>\n Les points repris par\u00a0Benjamin De Cock, webdesigner<\/h2>\n
Benjamin m\u00fbrit ses designs dans un objectif de fluidit\u00e9 maximale, et de manipulation directement compr\u00e9hensible par l’utilisateur. Dans cet esprit, il a mentionn\u00e9:<\/p>\n
- \n
- Dans les champs d’un formulaire, utiliser des labels essentiels, minimaux, non invasifs, qui peuvent \u00eatre renforc\u00e9s par des icones signifiantes customis\u00e9es.<\/li>\n
- R\u00e9duire les champs \u00e0 remplir et les efforts \u00e0 fournir par l’utilisateur<\/li>\n
- Respecter les habitudes de navigation\u00a0en fonction de l’OS<\/strong>: croix de fermeture de fen\u00eatre \u00e0 gauche ou \u00e0 droite.<\/li>\n<\/ul>\n
Chaque clic diminue le taux de conversion<\/p><\/blockquote>\n
- \n
- La v\u00e9rification des identit\u00e9s par sms<\/strong> est plus efficace qu’un mot de passe… Le mot de passe est toujours plus difficile \u00e0 retenir et \u00e0 g\u00e9rer par l’utilisateur.<\/li>\n
- Indiquer le processus \u00e9tape par \u00e9tape (m\u00eame fictivement), permet \u00e0 l’utilisateur de comprendre qu’il doit attendre que le processus soit termin\u00e9 avant d’entamer l’\u00e9tape suivante.<\/li>\n
- Le sms de v\u00e9rification doit \u00eatre court pour appara\u00eetre enti\u00e8rement sur la notification, et contenir le code de v\u00e9rification en fin de message, en call-to-action.<\/li>\n
- La g\u00e9olocalisation<\/strong> de l’utilisateur lui permet d’encoder directement son num\u00e9ro de t\u00e9l\u00e9phone, sans avoir \u00e0 passer par l’\u00e9tape de s\u00e9lection du pr\u00e9fixe international.<\/li>\n
- De mani\u00e8re g\u00e9n\u00e9rale, il est bon de pr\u00e9remplir automatiquement les champs avec les informations que nous pouvons r\u00e9cup\u00e9rer automatiquement. Mais \u00e9videmment, tous les champs restent \u00e9ditables.<\/li>\n
- Chaque champ de formulaire est anim\u00e9 de mani\u00e8re autonome, afin de permettre la transformation directe du reste du formulaire, en fonction des options de remplissage.<\/li>\n<\/ul>\n
Les points repris par Nathalie Gouz\u00e9e, directrice artistique et webdesigner<\/h2>\n
De l’intervention de Nathalie, j’ai surtout retenu son explication des diff\u00e9rents types de wireframes:<\/p>\n
- \n
- Le wireframe sketch \/moodboard, dessin\u00e9 \u00e0 la main, \u00e0 usage interne, limit\u00e9 en terme de versioning.<\/li>\n
- Le wireframe low-fidelity ou zoning (en France), renforc\u00e9 de commentaires (post-it), afin de mesurer les interactions entre les pages.<\/li>\n
- Le wireframe high-fidelity ou prototype fonctionnel (en France), qui respecte les contenus et les proportions; \u00e0 faire en collaboration avec le graphiste.<\/li>\n<\/ul>\n
Nathalie recommande de pr\u00e9voir des annotations reprenant les diff\u00e9rentes recommandations (SEO…) afin de faciliter les d\u00e9veloppements ult\u00e9rieurs.\u00a0Elle travaille avec invisionapp.com<\/a> pour le wireframing et le versioning.<\/p>\n
<\/p>\n
- La v\u00e9rification des identit\u00e9s par sms<\/strong> est plus efficace qu’un mot de passe… Le mot de passe est toujours plus difficile \u00e0 retenir et \u00e0 g\u00e9rer par l’utilisateur.<\/li>\n
- par un mindmap d\u00e9taill\u00e9 des contenus<\/strong> des diff\u00e9rentes pages de navigation (\u00e0 la place d’un wireframe low-fidelity, cf. plus bas), des diff\u00e9rents menus et parties du site web (ou intranet),<\/li>\n