Cela permet d’offrir une idée générale et tout de même assez précise d’un projet. Un seul document pour expliquer un bonne partie de la fondation. Simple et efficace

Voir le moodboard en format original sur Flickr

Qu’est-ce qu’un moodboard? Wikipédia l’explique très bien:

A mood board is a type of poster design that may consist of images, text, and samples of objects in a composition of the choice of the mood board creator. Designers and others use mood boards to develop their design concepts and to communicate to other members of the design team. The mood board may be used as a frame of reference during the design process in a variety of abstract disciplines, for example:

Source: http://en.wikipedia.org/wiki/Mood_board

La prochaine fois que vous me présenté un petit projet, voici surement l’un des documents sur lequel nous baserons beaucoup de nos discussions!

Faire des affaires, c’est bien. Parler Facebook, Linkedin et réseau sociaux, ben cool. Où sont les débats qui m’intéressent moi comme ceux sur l’expérience usager, sur les raisons pour lesquelles les pages d’accueils ne sont pas belles, sur les façons de créer un formulaire qui fonctionne? Au South By South West, j’y trouverai quelques réponses. Mais le Texas, c’est loin.

l faut pouvoir mettre les concepteurs web ensemble, autour d’un caffé latte des les bistros de notre province dès demain, c’est critique! La culture des québécois est souvent bien différente sur plusieurs aspects non?. L’exemple des micro-sites de bière où les femmes sont beaucoup moins «poupounes» par rapport aux états-unis et la france démontre bien que notre culture diffère. Nous avons le Publi-Sac et en Ontario, ils ne démordent pas de leurs circulaires dans les journaux. Mais est-ce que le design web diffère aussi?

Je côtoie un groupe qui gère environ 30 produits web locaux purement québécois et qui possède dans ses rangs aucun designer certifié web, qui mange web et transpire web. Euhhh… ah bon. Vous avez naviguer sur des sites de commerce électronique québécois? J’imagine que notre génétique de coureurs des bois se traduit sur le web par une incroyable force brute qui nous empêche de souffrir lorsqu’on fait face à une page d’accueil dense et compliquée, remplie de fioritures où on cherche le panier d’achat. Nous sommes tellement fait fort que même le gouvernement nous offre des sites dédiés au aînés avec des caractères de 9 pixels. Le budget normal alloué au design (utilisabilité, scénarios de navigation, focus group, pertinence visuelle, …) aux développement des sites web dans les grands portails québécois est d’environ 15%.

Parlons-en!

En effet, un titre souligné c’est visuellement, c’est plutôt désagréable. Est-ce que l’ajout d’un lien «Lire la suite/Lire l’article complet/Continuer» au bas du sommaire de l’article est une solution éprouvée? Est-ce que dans la plupart des grands portails d’informations, le titre est souligné? Qu’elle est le lien le plus intuitif et naturelle qu’a développer l’usager sur internet?

Entendons-nous: si le titre est bien conçu pour le web, il devient franchement efficace. Sachant que l’internaute moyen lit la page en quelques secondes, le titre doit bien évidement être le plus pertinent possible en explique le contenu de l’article rapidement et clairement. Attaché quelques mots-clés à une verbe pour créer un titre est un art. Lorsque c’est réussi, avouez qu’il n’y a pas mieux comme lien-texte.

Sur les moteurs de recherche, les clics se font habituellement sur le titre et non sur un lien-texte du genre «Aller au site web». N’est-ce pas là encore une habitude naturelle qui faut prendre en compte?

De plus, pour les moteurs de recherches, rien de pire que d’avoir 32 liens «Lire la suite de l’article». Au moins, rajoutons le titre dans le lien et cachons le, ex.: «Lire la suite de l’article «span style=display:none»Titre de l’article«/span»». Question d’accessibilité, les moteurs et les personnes aveugles pourront mettre le lien en contexte. Mais n’est-ce pas un lien de trop, qui pollue encore l’ergonomie quand le titre est disposé de façon claire et que sont contenu est ce qu’il y a de plus pertinent?

Il faut bien l’accepter, un titre en lien souligné sera toujours gagnant face à tout les autres liens qui permettent de se rendre à l’article complet.

P.S.: Oui, je sais… je vais appliqué ce que je prône sur mon propre site web. Merci de me le faire remarquer.

Prenons exemple de youtube.com :

La zone sélectionnable étant déjà très petite avec à peine 8px de largeur, il faut en plus pouvoir cliquer et glisser le curseur à la fois. Chez Microsoft et plusieurs autres, le bouton de défilement du volume peut être aussi petite que 4 X 2 pixels. Ouf. Bref, pour le plupart des usager, c’est presque simple. Alors pourquoi très peu de personnes l’utilisent? En effet, lorsqu’il existe un bouton physique sur le clavier ou ailleurs, les utilisateurs semblent l’utiliser d’avantage que celui fait en pixels.

Il y en a des pires qui, comme le lecteur Quicktime d’Apple, oblige l’utilisateur à tenir le curseur enfoncé pour afficher la barre défilante du volume qui, toujours enfoncer, doit bouger de haut en bas. Un geste physiquement plus difficile que gauche/droite. Pour certains qui ont plus de misère à contrôler leur souris, comme les personnes âgés ou ceux à mobilité réduite, c’est quand le son de la vidéo est est à son maximum, lorsqu’un clic fait peur aux les tympans, que la tension s’installe et que l’utilisateur est maintenant anxieux à cliquer sur un autre lien du site.

Au minimum, assurez-vous d’activer la zone au simple passage de souris comme le fait virb.

Plusieurs possibilités s’offrent à vous, mais il y a une qui reste la plus intuitif (petite wireframe conçu très rapidement):

Est-ce que quelqu’un pourrait se tromper de cette façon? Est-ce qu’il n’est pas plus facile de cliquer et tenir comme geste physique? Est-ce que cela n’est pas ancré dans les habitudes de la plupart d’entre-nous?

Lorsqu’on commence la conception d’une interface, on doit se convaincre que tout est possible. J’irais même à dire que tout est magique. C’est une technique que j’utilise depuis longtemps qui me permet de ressortir l’objectif ultime du projet. Si par exemple je désire concevoir un outil en ligne offrant la mettre à jour la liste des prix de mes produits sur un site de ventes au enchères, j’imagine que tout cela se fait par magie: je n’aurais qu’à cliquer sur un bouton et le système irait lui-même chercher le fichier excel sur mon ordinateur, le mettrais à jour et réparait les erreurs automatiquement au besoin… le tout terminant avec un jolie voix féminine qui me dirais: votre catalogue en ligne est synchronisé. Puis-je faire autre chose pour vous?

De ce voyage astral, j’en ressort l’essentiel: l’usager veut un formulaire simple en une seule étape. Il veut aussi qu’on l’accompagne sans le laisser seul s’il y a un problème.

• on retrouvera qu’un seul bouton d’action (submit) qui s’appellera: mettre à jour votre catalogue. Le formulaire n’aura qu’une seule étape ;
• l’interface demandera très peu d’informations à l’usager. Par exemple, s’il y a un champ parcourir (browse), il n’y aura pas de bouton envoyer (send) pour ce champs. C’est avec l’envoi du formulaire que le fichier se téléchargera ;
• l’interface intégrera des messages d’erreurs amicaux avec des trucs et astuces aidant l’usager à corriger la situation, ex.: «Il semble que vous n’avez pas inscrit la date. La date demandée est celle que vous retrouvez près du logo de votre…».

À tout les ergonomes et designers, quand vous commencez une interface, mettez vos lunettes rondes et prenez votre baguette magique.

Pour un outil de travail, il faut minimiser l’apprentissage par l’usager. Dans un monde aussi compétitif que le notre, on se rend bien compte que l’expérience usager prend toute son importance. Demander au client de prendre le temps d’apprendre comment fonctionne nos produits crée inévitablement de la friction et de l’anxiété.

Les liens sont l’un des premiers éléments de base qui sont évalué par tout les ergonomes, designers et autre architecte web. Comme pour le bras de lave-vitre qui se trouve 99% au même endroit, la plupart des liens sur le web, et ce depuis la création d’Internet, ont le même comportement: ils sont soulignés.

Si le choix de mettre des liens non soulignés reposent uniquement sur l’aspect visuel, il est difficile de croire qu’un prospect basera son choix au départ selon l’aspect esthétique. Il basera sont choix d’abord sur la facilité d’utilisation, ensuite sur un discours qui l’engage lui, ensuite la marque… ensuite peut-être l’esthétique en tant que tout. Les exemples sont nombreux, passant du iPod aux camionettes familliales. La marque et la facilité d’utilisation ont fait leur tout d’abord leur renommé.

En fin de compte, on peut vraiment dire que des liens soulignés est l’une des bonnes pratiques de base à mettre en place afin d’améliorer l’appréciation de nos produits et donc, de les rendre encore plus profitable.

Pour mettre de l’essence dans votre véhicule, il faut appuyer sur mise en marche pour activer la pompe:

Êtes-vous sûr de savoir où appuyer? Vraiment?

Parlant de la compagnie Shell, avez-vous remarqué que c’est l’une des rares identité corporative qui ne contient aucun texte dans son logo? Fort, très fort.

Doit-on offrir le tout en trois clics seulement? La réponse est non, bien sûr. Dans la plupart des cas, le nombre de clics à très peu d’importance. Ce qui est le plus important sera toujours pour l’usager de se retrouver facilement, de savoir où il a été et sait où il doit aller. Si tout est offert naturellement, 10 clics peut être très bien perçu par votre client.

Basons-nous sur cet exemple:

À son formulaire, sa zone.

Je remarque très souvent que le formulaire n’interpelle pas l’usager de façon directe. Trop souvent, je retrouve des champs en flottement sur fond blanc. Il est très intéressant de voir que lorsqu’on encadre le formulaire, l’usager comprends mieux ce qu’on lui demande. Cette zone indique qu’il aura à entrer du contenu. Prenez exemple sur GovernmentBids: tout les formulaires intègrent cette méthode et selon les derniers chiffres, avec succès.

Tout formulaire à son titre

À quoi sert ce formulaire? Une recherche? Inscrivons «recherche». À entrer les coordonnées? Inscrivons «coordonnées».

Alignement droite-gauche

Je ne vous expliquerai pas ici toutes les bienfaits de ce positionnement et cet alignement, mais si vous désirez un maximum de résultats, positionnez l’étiquette sur la même ligne que son champs, alignez le texte à droite et le champs à gauche. Vous permettez donc à l’usager de les lier intuitivement.

Champs obligatoires?

À bas les «*». Qu’est-ce que veux dire «*» d’ailleurs? Pour vous peut-être, mais pas pour votre père ou votre tante débutante! Lorsque vous avec un élément obligatoire, rien n’est plus efficace que d’écrire tout simplement «obligatoire».

Zone d’action

Créer une zone où se retrouveras l’action principale à mener (ici soumettre) est une excellente pratique. Cette zone facilement repérable sécurisera l’usager et lui informeras spécifiquement ce que l’on attends de lui. On y retrouveras un seul bouton d’action qui sera d’ailleurs toujours au même endroit. Il devras contenir un contenu court, dans un verbe d’action (rechercher, passer à la prochaine étape, soumettre, etc.).

Dans cette zone, à droite du bouton, informer l’usager sur la prochaine étape qui suivra. Si cela est possible, dites-lui comment il lui reste d’étapes. Ceci est encore une bonne pratique plein de bon sens.

• La navigation par clic sur les liens est à peine descendu de 45.7% à 43.5% dans les 11 dernières années ;
• Ouvrir de nouvelle fenêtre est passé de 0.2% à 10.5% ;
• L’envoie d’informations par formulaire fait un bon considérable ;
• Avec l’ajout de toutes ses nouvelles fenêtres (pop-up), des soumissions de formulaires et de l’utilisation de la technologie flash, l’utilisation du bouton «précédent» est passé de 35.7% à 14.3% en une année ;
• 76.5% de tout les liens était cliqués dans la partie visible du navigateur.

Selon la communauté, une autre étude plus à jour sera bientôt disponible et déjà quelques données semblent indiquer que:

• L’expertise s’améliorant, le respects des normes et standards se fesant, on annonce une forte remontée de l’utilisation du bouton «précédent» ;
• Les formulaires sont l’un des éléments les plus utilisés ;
• La partie visible du navigateur reste encore et toujours l’endroit où l’usager les liens à cliquer ;
• Les usagers ne maximise pas leur fenêtre de navigateur «bouffant» environ 170 à 200 pixels de largeur.