Ergonomie

Différences entre l’interface utilisateur (UI) et l’expérience utilisateur (UX) ?

Définition de l’interface utilisateur ou UI

L’interface utilisateur est le lien entre l’humain et la machine. C’est le produit fini présenté à l’internaute qui va lui permettre de surfer agréablement sur un site. L’UI peut se résumer à l’organisation des éléments graphiques et textuels pour proposer un tout agréable et attrayant. Elle se présente premièrement sous forme de maquettes graphiques à montrer au client pour qu’il les valide.
Elle se base sur des normes techniques, que l’on peut apprendre méthodiquement.

Définition de l’expérience utilisateur ou UX

L’expérience utilisateur se fait bien en amont de l’UI. Il permet de faciliter la navigation de l’internaute pour qu’il atteigne facilement son but. Il faut premièrement réaliser un audit ergonomique pour définir tous les points important qui devront être abordés pour l’ergonomie du futur site.
L’UX se base sur la sensibilité des internautes.

L’UX a pour but de rendre un site web plus :

  • utile, avec des fonctionnalités bien en place
  • utilisable, avec une facilité d’utilisation
  • désirable, car un bon attrait visuel qui est important chez l’être humain
  • navigable, pour ne pas perdre son temps à chercher l’information qui nous intéresse
  • accessible, c’est-à-dire facile à trouver sur le web, ce qui nécessite un travail de référencement
  • crédible, car une bonne UX permet de renforcer la qualité du site

Pour résumer, l »UX design consiste à penser et à concevoir un site web de manière à ce que l’expérience utilisateur soit la meilleure possible.

Jesse James Garret dans son livre « The elements of user experience » définit l’UX sous 5 plans permettant de construire un bon site web :

  • La stratégie a employée pour permettre de définir les besoins de l’utilisateur et donc les objectifs du site
  • Le contenu du site, ainsi que ses fonctionnalités définis d’après les objectifs
  • La structure ou architecture du site, c’est-à-dire l’enchaînement des pages
  • La squelette permettant de définir la clarté et la lisibilité d’une page (aussi appelé wireframe)
  • L’aspect visuel ou les maquettes qui permettront de rendre le tout plus désirable.

L’UI intervient plusieurs fois dans ce processus pour proposer une enveloppe agréable et pour créer un design fonctionnel qui insipire confiance et donne de la crédibilité à votre site.

UX is not UI but UI is UX

Vous l’aurez compris, l’UX n’est pas assimilable à l’UI.
L’expérience utilisateur ne se limite pas seulement à surfer sur une page au design agréable. L’UI n’est clairement pas suffisant pour qu’un expérience utilisateur soit agréable. C’est comme si vous emballiez d’un joli papier un carton vide… L’UI doit être le résultat d’un travail plus approfondi, celui de la prise en considération globale des besoins de l’utilisateur.

Si les deux concepts ne peuvent pas être dissociés, il ne faut pas non plus les confondre. Limiter sa vision de l’expérience utilisateur (UX) à l’interface utilisateur (UI) ne permet pas de proposer un produit final abouti : une interface fonctionnelle et intuitive, qui remplisse ses promesses, et (surtout) qui convienne à votre public. Pensez-y !

Ergonomie

Qu’est-ce qu’un audit ergonomique ?

Un audit ergonomique est l’analyse d’une interface à partir des principes et règles ergonomiques. Quel que soit le stade de réalisation de votre projet, l’audit ergonomique est une étape essentielle. Il doit pouvoir être lancé régulièrement pendant les périodes charnières de la vie d’un projet.

Il est recommandé de réaliser une évaluation ergonomique de son interface :

  • En amont, dans le cas d’une refonte d’un site.
  • Avant l’intégration technique d’une réalisation, on analyse le design graphique d’un point de vue ergonomique ou design fonctionnel.
  • Peu après le lancement de l’application (logicielle ou web), après interaction avec les utilisateurs.

Notre conseil : réalisez une évaluation ergonomique de votre interface avant la phase finale de développement. Cette prévention vous permettra d’éviter des frais excessifs de remaniement complet de l’interface et de réaliser un gain de temps considérable.

L’audit ergonomique peut évaluer un site web, une application en ligne, et également des storyboards, des maquettes conceptuelles, des propositions graphiques et surtout les interfaces finales.

Chaque type d’interface nécessite un audit ergonomique qui lui est propre. Par exemple l’audit de maquette graphique se focalise sur l’accessibilité visuelle et la lisibilité.
Bien différent de l’audit d’un site complètement fonctionnel qui se concentre sur l’analyse d’éléments invisibles : mouvements de l’interface, temps de chargement, pertinence des réponses du système (par exemple dans un moteur de recherche)…

Le périmètre de l’audit ergonomique sera déterminé par les préoccupations marketing ou stratégiques du propriétaire.

Le Guide de l’audit ergonomique :

Un bon audit ergonomique est un judicieux compromis entre la prise en compte des 12 règles ergonomiques et une liste détaillée de critères d’évaluation d’une solution interface. Quoi qu’il en soit, une norme ergonomique vous donne une règle pour concevoir votre interface en obtenant un effet sur l’internaute.

L’audit ergonomique démarre sur une liste de règles génériques ADAPTABLES en fonction des caractéristiques précises de l’interface et de ses utilisateurs ! Le fil d’Ariane de la démarche ergonomique est celui de vos utilisateurs.

En étroite collaboration avec l’ergonome vous établissez des objectifs de départ selon vos impératifs commerciaux, notre expert procède alors à l’audit de manière rigoureuse.

La méthode de l’évaluation ergonomique est un plan qui va du général au particulier.

On recense trois étapes de travail incontournables :

  • 1. Analyse de l’utilité: L’interface traduit-elle bien son utilité? L’information est-elle compréhensible rapidement ?
  • 2. Analyse de l’utilisation : La navigation est-elle fluide, l’architecture du site est-elle utilisable ?
  • 3. Approfondissement des deux étapes précédentes.
Ergonomie

Concevoir une expérience utilisateur sur mobile

Au cours des 3 dernières années l’utilisation de l’Internet depuis les ordinateur de bureaux est passée de 90% à 60%, tandis que l’utilisation depuis les mobiles a augmenté de 40%. Cette tendance nous montre que les appareils mobiles vont bientôt prendre la tête en matière de connexion sur internet.

L’approche par défaut utilisée par les designers lors de la conception d’un site web pour un appareil mobile est de réduire les modules présents sur la page du site version ordinateur de bureaux pour les rendre réactifs. Aujourd’hui, cette stratégie n’est plus suffisante et devient même mauvaise. Plutôt que de réduire globalement la taille des éléments, il est plus intéressant d’examiner les besoins du client, de comprendre l’objectif de chaque projet et d’évaluer le comportement de l’internaute sur les plateformes mobiles.

Pour avoir une meilleure expérience utilisateur, intuitive et conviviale nous allons passer en revue quelques pratiques à garder à l’esprit lors d’une conception pour mobile.

Un contenu clair et ciblé

Beaucoup de personnes utilisent leur appareil mobile dans la rue, lors d’une pause café, au restaurant, dans le métro… dans l’urgence de chercher une information importante, pour avoir un accès le plus rapidement possible. La petite taille d’écran des appareils mobiles ne facilite pas les tâches courantes de navigation et de recherche.

La conception d’une expérience utilisateur mobile doit être basée sur des règles minimalistes pour encombrer les pages, le moins possible . Chaque page, y compris la page d’accueil doit avoir un seul point central. Cela augmentera la durée du séjour de l’utilisateur sur votre site web et simplifiera son utilisation.

Un système de guidage doit orienter les utilisateurs en leur montrant comment effectuer chaque action à travers de messages visuels ou rédactionnels clairs. Ce système rend leur expérience plus agréable et leur facilite la recherche et l’accès à l’information.

Les utilisateurs mobiles remarquent et apprécient, les gestes et astuces qui rendent leur expérience plus lisse. Au final, ce qui impacte positivement les utilisateurs, impacte aussi le projet en lui même.

Un menu de navigation ergonomique

Un des éléments les plus important est le menu de navigation principal, sur un écran d’ordinateur, il est constitué le plus souvent d’une barre en haut de la page avec des sous rubriques qui s’affichent lors du passage de la souris sur l’élément parent. L’ emplacement en lui même est précieux, sur un mobile, nous n’avons pas beaucoup de place, de plus il est quasi impossible de reproduire la même construction du menu tout en gardant la lisibilité et l’interactivité.

Sur un écran mobile, un bon moyen de gagner de la place tout en donnant accès à un système de navigation fiable sera de signaler sa présence avec une icône en haut de l’écran, à droite ou à gauche. Le menu apparaîtra lors d’un clic sur l’icône généralement représentant 3 petits traits.

Garder une présentation fluide

Penser pour le mobile c’est concevoir des pages qui fonctionnent sur toutes les petites résolutions et non pas uniquement sur les résolutions les plus fréquentes ou les mobiles les plus connus.

Dès le départ, il faut penser à la simplification, ne pas attribuer de tailles fixes aux éléments, garder une grande souplesse et fluidité sur les pages, vérifier l’affichage sur les différentes résolutions d’écran sans avoir la contrainte de travailler pour chaque taille spécifique d’appareil.

Concevoir pour le tactile

Le principale mode d’interaction sur un écran mobile reste le toucher ou le “tactile”, la navigation par le toucher nécessite un soin bien particulier des éléments ainsi qu’un niveau de précision plus élevé que sur les écrans des ordinateurs qui possèdent “une souris”, un dispositif de pointage ultra précis.

En remplaçant la souris par le doigt, il faut compenser ce manque de précision par l’augmentation de la taille des différents éléments avec lesquels l’utilisateur doit interagir. Vous devez vous assurer que les formes, les boutons et autres éléments qui nécessitent un geste tactile soient assez grands pour éviter un chevauchement avec des éléments ou une mauvaise interprétation des événements tactiles adjacents.

Simplifier les formulaires

Un formulaire implique directement la saisie d’information, or, sur un mobile le clavier virtuel avec ses toutes petites touches ne simplifie pas la tâche pour l’utilisateur, une fois de plus.

Dans le cas où vous ne pouvez pas éviter les formulaires sur les vues mobiles, il faut en proposer des alternatifs moins longs et qui contiennent uniquement les champs les plus important, ceux dont vous avez réellement besoin.

Proposer à vos utilisateur des formulaires adaptés à l’utilisation mobile, avec des champs plus larges, une saisie automatique ou un auto remplissage des champs, un calendrier visuel, un indicateur d’avancement sur les formulaires multi-pages, des noms de champs au dessus et non pas à coté des champs…

Les formulaires bien pensés augmentent considérablement la satisfaction de l’utilisateur dans l’accomplissement d’une action, surtout qu’en général, un formulaire représente la dernière étape d’une stratégie, mission ou “Call To Action”.

Priorité à la vitesse

Le poids et la vitesse sont les deux mesures de performance les plus importants pour un site mobile. En effet, sur un mobile, l’utilisateur apprécie énormément les sites qui se chargent rapidement.

Éviter l’utilisation des nombreux effets basés sur les images comme les dégradés pour l’arrière plan ou un grand carrousel d’images ou encore les ombres portées sur les images.

Intégrer le CSS dans votre conception pour avoir le rendu attendu ainsi qu’un design fonctionnel même si le CSS3 n’est pas supporté par tous les navigateurs des anciens mobiles, ce qui est normal. Le site ne doit pas ou ne pourra être “100% pixel parfait” sur tous les appareils mais au moins le site passera les épreuves nécessaires pour les contraintes mobiles et sera rapide et léger.

Miser sur le texte

Remplacer le manque d’images par des titres clairs et de grande taille, ainsi que de courts paragraphes de description spécialement rédigés pour l’utilisateur avec si nécessaire, un appel au clic à travers un grand bouton qui mentionne l’action.

Les articles doivent avoir une ergonomie de lecture spécifique. Des titres clairs avec une typographie de grande taille, les paragraphes également héritent de la même logique avec une typo de grande taille (14 ou 16 pixels).

Animer vos titres et vos descriptions avec des icônes telles que celles proposées par la célèbre librairie “Font Awesome” qui offre une riche collection de formes graphiques spécialement conçues pour le web, facilement opérationnelle et entièrement contrôlable par CSS.

Profiter des caractéristiques spécifiques

Les appareils mobiles possèdent de nombreuses caractéristiques comme le GPS, gyromètre, un « slide pour déverrouiller », la capacité de passer un appel… Certaines fonctionnalités sont profitables et peuvent être utilisées directement depuis le site web. Elles participent à améliorer l’expérience de l’utilisateur.

Vous pouvez par exemple ajouter la possibilité de passer un appel simplement en cliquant sur le numéro de téléphone de la page contact ou activer le partage sur les réseaux sociaux ou encore utiliser le GPS pour géolocaliser une information ou un service spécifique…