design

Quand on parle d’UX, on parle d’« expérience utilisateur ». Qu’est-ce que c’est ? Il s’agit de la manière dont votre site guide l’internaute à naviguer sur votre site internet. Selon vos objectifs, l’UX de votre site est censé accompagner l’internaute à aller sur certaines pages et cliquer sur certains liens. Pour guider correctement l’internaute, il faut imaginer, penser, puis créer un parcours. C’est à partir de ce parcours, que l’on décline le « front » d’un site (ce qui s’affiche à l’écran), ainsi que les conditions du « back » (les règles qui font fonctionner les interactions entre le site et l’internaute).

Souvent considéré comme une contrainte de développement supplémentaire, en vérité, l’UX c’est avant tout :

• Faciliter la navigation et l’accessibilité
• Définir des interfaces « design », au sens « utiles » et « cohérentes »
• Créer des parcours efficaces, qui répondent à des objectifs précis

#1 – Qu’est-ce que l’UX et l’UI ?

        L’UX est l’abréviation « User Experience », dit en français « expérience utilisateur ». Il s’agit du parcours réalisé par l’internaute sur un site internet. L’UX Design consiste alors à concevoir des interfaces, afin que cette expérience soit satisfaisante pour vous et pour l’internaute :

• Pour un site institutionnel, il s’agit de concevoir des pages claires, concises et performantes ;
• Pour un site marchand, il s’agit de concevoir un parcours d’achat fluide, agréable et facile à comprendre
• Pour un site type intranet, il s’agit aussi de clarté, de fluidité, notamment pour accéder à la bonne information, au bon moment

Pour cela, il faut être en mesure de répondre aux besoins et habitudes de l’utilisateur.

Le travail côté UI, c’est l’interface visible par l’utilisateur, qui vient après le travail de l’UX. Il s’agit de positionner des éléments comme les boutons, le menu, les images etc. Il s’agit aussi d’associer ces éléments à une charte graphique.

C’est la complémentarité de l’UX, l’UI et du développement informatique, qui permet à un site d’obtenir une optimisation maximale de la navigation.

Avant de vous lancer tête la première dans le développement de votre site, il y a donc des étapes de conception à respecter, basées sur les habitudes de l’internaute, ainsi que vos objectifs (convaincre, vendre, rassembler etc.)

Pour concrétiser cela, il est essentiel de réfléchir à la structure de votre site et au parcours que vous allez proposer aux visiteurs. On parle de wireframe.

#2 – Quelques bases pour une meilleure expérience utilisateur

Faciliter la lecture des textes

Selon la lecture et son sens, il est nécessaire que les zones de textes soient à des endroits stratégiques. La lecture la plus commune est la lecture en Z. Certains sites peuvent aussi utiliser la lecture en T. De plus, pour que la lecture soit agréable, il faut qu’il y ait un équilibre texte / image. Auparavant, la règle disait : 40% image, 60% texte. Maintenant, les choses évoluent et c’est au goût de chacun. Cependant, attention au trop plein de texte condensé, qui peut rapidement noyer l’information.

Adapter la navigation à tous les supports

En un mot : responsivité ! C’est un élément primordial et essentiel pour que tous les navigateurs puissent avoir accès à votre interface, c’est ce qu’on appelle le mobile first. Un site construit sur un écran doit être adapté aux surfaces plus minimes comme celles des smartphones.

Aujourd’hui tout le monde peut se connecter à internet sur son mobile. En fonction de produit que vous vendez, la règle s’impose plus ou moins. Cependant, il n’est plus possible de ne pas le rendre accessible aux mobiles.

Attention au poids des pages

Le poids des pages est important pour qu’elles ne « tournent » pas trop longtemps. Pour cela, il faut veiller à ne pas intégrer trop d’animations, limiter le poids des images et des vidéos. Le choix des éléments visuels de votre site internet doit aussi répondre à des objectifs précis. Si un visuel n’est pas utile à la navigation, qu’il est juste là pour faire « joli », il peut l’alourdir.

Miser sur les CTA

Les CTA, « Call To Action” sont indispensables dans la construction de vos pages. Une page = un objectif = un CTA. De cette façon l’internaute est guidé sur les actions qu’il doit réaliser pour satisfaire ce qui l’a poussé à venir sur votre site. Comme pour les visuels, la place des CTA doit être bien équilibrée, pour ne pas perdre l’utilisateur.

#3 – Quels outils de conception choisir ?

Ces logiciels sont à utiliser en amont si vous, ou une personne tierce, doit se charger de créer des wireframes :

• Balsamiq 
  • Tarifs accessibles
  • Plusieurs possibilités d’utilisation (en ligne, sur son ordinateur, à synchroniser avec d’autres logiciels de gestion de projet)
  • Possibilité de collaborer à plusieurs
  • Simple d’utilisation
• Sketch :
  • Tarifs accessibles
  • Utilisation en ligne
  • Très complet et intuitif
  • Possibilités d’y ajouter des plugins complémentaires
  • Demande des connaissances en design

Pour compléter cet article, voici d’autres plateformes qui vous permettront de créer des maquettes et des prototypes :

• Mockinbird :
  • Outil très facile à prendre en main
  • Possibilité d’animer les wireframes et les maquettes
  • Version gratuite limitée
  • À partir de 12$/mois
• Axure :
  • Plateforme moins évidente à prendre en main mais plus de liberté d’utilisation
  • Gratuit pour les enseignants et étudiants
  • 29$/mois pour les professionnels
• Justinmind :
  • Outil de prototypage web et mobile
  • Facile à prendre en main, possibilité d’importer ses propres visuels
  • Possibilité de le télécharger gratuitement ou de choisir un forfait à partir de 9$/mois

Pour créer un site internet, il ne suffit pas de mettre toutes les informations que l’on souhaite. Tenir compte de l’UX, et y réfléchir en amont, facilitent le travail de design et de développement.

De plus, en fonction de vos objectifs, toutes les pages ne se construisent pas de la même manière : il y a des spécificités à prendre en compte, selon si vous voulez informer ou vendre, par exemple.

Enfin, il faut veiller à la fluidité de votre navigation, l’adapter à tous les supports, ne pas surcharger votre site d’images lourdes ou inutiles, et bien positionner les Call-to-action.

Il existe différents outils, en fonction de vos moyens et de vos compétences, pour mieux réfléchir votre site internet, et créer des wireframes.

Psss, un petit secret : les prestations de développement de site internet coûtent moins cher et durent moins longtemps, quand vous avez déjà défini un parcours de navigation et/ou des wireframes en amont 😉