BlendWebMixconférencesconseilsmobileresponsive designux designwebdesign

BlendWebMix 2015 : l’expérience utilisateur à l’honneur (1)

Marie s’est rendue au BlendWebMix l’évènement qui réunit les professionnels du web chaque année à Lyon.

Depuis 2011, BlendWebMix est un évènement important qui réunit les professionnels du web chaque année à Lyon.

Colossal, l’évènement s’adresse autant aux techniciens, aux designers, aux chercheurs qu’aux investisseurs et aux start-ups. Pendant deux jours, 1800 visiteurs, 89 conférenciers et 120 bénévoles s’agitent et cogitent sur l’avenir du web, formant un ensemble hétéroclite des plus inspirants.

J’ai eu la chance d’y représenter Résidence Mixte.

Si la diversité des conférences du Blend et l’étendue des locaux ont pu me faire tourner la tête, je me suis finalement concocté un programme mêlant web design, mobilité et expérience utilisateur (UX).

Je vous propose un compte-rendu de six conférences-clés, divisé en deux parties.

Badge BlendWebMix

« Stratégies d’adaptation mobile : ergonomie, UX et performance en milieu périlleux », de Stéphanie Walter et Jean-Pierre Vincent

Stéphanie Walter et Jean-Pierre Vincent ont partagé avec nous une vision de la mobilité pragmatique et orientée utilisateurs.

Le mobile first consiste à partir du plus petit dénominateur commun – le mobile – pour enrichir l’UX et les contenu de façon progressive, au fur et à mesure que la taille de l’écran augmente. C’est la solution la plus pérenne, mais c’est aussi la plus coûteuse, car elle requiert une refonte globale et une certaine complexité technique.

Une stratégie mobile réussie passe par la spécification en amont d’objectifs de performance web et de compatibilité. Il est indispensable de vérifier ces deux points lors de la phase de recette fonctionnelle, et pas uniquement la conformité des pages web par rapport à des maquettes graphiques. Se fixer des objectifs de performances et s’y tenir.

Par ailleurs, les principaux points bloquants doivent être prévus et évacués en amont du projet. Or, on se rend compte que le web design responsive se heurte souvent au manque de communication au sein d’une même équipe.

Découvrir que l’expérience utilisateur est mauvaise en fin de projet est signe d’échec en matière de gestion de projet.

Enfin, quelques points d’attention en matière de responsive :

  1. Prévoir des boutons et des liens efficaces : ils doivent être suffisamment grands pour que l’utilisateur ne clique pas sur le bouton d’à côté par erreur, et suffisamment visibles pour que l’utilisateur distingue facilement ce qui est cliquable et ce qui ne l’est pas.
  2. Donner du feedback à l’utilisateur lors des phases de chargement. Entre un clic et sa réponse, il y a forcément 300 ms qui s’écoulent : il est donc important de donner du feedback visuel à l’utilisateur pour lui indiquer qu’il va se passer quelque chose (par exemple, :active en CSS).
  3. Soigner les performances et accélérer la sensation de rapidité du chargement du site. Cela passe notamment par un nombre raisonnable de polices @font-face, mais aussi par la définition d’un ordre de priorité de chargement des ressources, en particulier sur les sites à but lucratif. N’est-on pas en train de perdre de l’argent parce que la publicité ralentit tout le reste ?
  4. Soigner les détails. Il peut s’agir par exemple de prévoir des favicons spécifiques au mobile, ou bien de changer la couleur de la barre de statut sur Android. Les utilisateurs de votre site se souviendront de tous ces petits efforts que vous aurez fait pour améliorer leur expérience de navigation.

Pour poursuivre la réflexion, ne manquez pas les slides de cette conférence.

2. « Conception produit : éviter le #FAIL en 5 leçons », de Virginie Cleve

Cette conférence a regorgé de conseils et de bon sens pour concevoir des sites web e-commerce qui convertissent.

Le secret ? S’appuyer sur les besoins des utilisateurs cibles du site. Pour cela, créer des fiches de « personas » est non seulement facile, mais aussi très efficace.

Les personas sont des personnes fictives dont on va formuler par écrit les besoins par rapport au site à concevoir. Le but ensuite sera de concevoir des contenus et des fonctionnalités qui répondent aux différents besoins identifiés.

Par ailleurs, pour garantir à l’utilisateur une expérience agréable qui le mène jusqu’au paiement de sa commande, il faut concevoir un merchandising intelligent. Cela passe par plusieurs étapes :

  • La mise en place de rebonds intelligents : si j’arrive sur une page qui ne correspond pas exactement à ma demande, ou si je tombe sur la fiche d’un produit épuisé, le site va me proposer autre chose qui peut m’intéresser. Attention tout de même à ce que l’utilisateur ne quitte jamais la page panier.
  • Une meilleure gestion des erreurs. Si une erreur survient pendant le paiement de la commande, le site envoie un email à l’utilisateur pour lui proposer d’expliquer ce qu’il cherchait à faire et le problème qu’il a rencontré en échange d’un bon d’achat sur un prochain achat.
  • Proposer des produits en relation avec un achat précédent ou avec ce qui se trouve dans le panier. Le nec plus ultra, c’est d’associer manuellement des produits complémentaires lors de la création de la fiche produit. On évitera de mettre en avant de vieux stocks sans rapport avec l’article acheté.
  • Ne pas sacrifier l’expérience utilisateur sur l’autel du merchandising et de la monétisation. À long terme, cela coûtera cher au produit et fera fuir le client. C’est terrible d’agresser l’utilisateur dès sa première visite en recouvrant immédiatement votre site avec une popin de publicité. Il vaut mieux limiter le nombre de publicités et de promos affichées sur votre site, les sélectionner avec soin en fonction du parcours utilisateur, et les faire varier en fonction du moment et du périphérique utilisé.

Le grand amphi de Blend

« UX Design : et si la clé du succès se trouvait dans les théories sur l’UX ? », de Carine Lallemand

Chapeau à Carine Lallemand, qui nous a présenté de façon simple et ludique des concepts UX a priori complexes !

Une bonne expérience utilisateur est la conséquence de l’épanouissement des besoins fondamentaux de l’utilisateur. On peut utiliser ces besoins fondamentaux pour concevoir des expériences positives et engageantes.

Générer des expériences positives avec un produit est important, car elles suscitent des émotions positives qui génèrent intentions d’achat, attachement au produit, confort d’usage et utilisabilité perçue.

La théorie UX des besoins permet ainsi de générer des idées de conception innovantes et de rendre les objets du quotidiens plus « expérientiels ». C’est le cas de cette poussette qui se transforme en trottinette, par exemple : elle est à la fois efficace pour transporter un enfant, mais elle est aussi amusante pour l’adulte qui l’utilise.

En design UX, pour concevoir des émotions positives, il faut veiller à la granularité émotionnelle : c’est la capacité de caractériser un état émotionnel avec précision en utilisant un vocabulaire d’émotions distinctes plutôt que de se référer aux états émotionnels primaires.

Chaque type d’émotion va apporter des réactions différentes de la part des utilisateurs. Par exemple, si notre produit provoque de la fascination, on va générer une attitude focalisée. En tant que concepteurs web, il est donc important que nous sachions précisément quelles émotions nous voulons susciter chez les personnes qui utilisent nos produits.

Certes, les émotions positives sont à privilégier. Toutefois, les états émotionnels mixtes sont également intéressants : par exemple, l’appli « Zombie Run » joue sur la peur de l’utilisateur pour l’aider à dépasser ses objectifs en matière de running.

Par ailleurs, à chaque phase de l’expérience utilisateur, ce sont diverses qualités du produit qui sont estimées. Il faut donc concevoir un produit utile et utilisable sur le long terme pour créer de l’engagement.

En effet, l’UX ne concerne pas seulement l’expérience immédiate : l’anticipation et le souvenir de cette expérience sont également très importants. Le « modèle de Karapanos » permet justement de mesurer la temporalité de l’UX.

À suivre !

Ne manquez pas la seconde partie de ce compte-rendu, qui parle de typographie web, de design produit et d’ergonomie mobile.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *