L'UX en 2017


Préambule

On assiste depuis quelques années à une véritable explosion des écrans, une transformation profonde du web, avec le développement de la mobilité et des objets connectés.

Objets connectés - Agoravita

Toutefois, nous observons que s’adapter aux terminaux ne suffit plus. Pour conquérir de nouveaux clients, il faut offrir aux utilisateurs une expérience attractive :

on parle aujourd’hui d’UX design

L’atout des entreprises réside dans leurs produits mais aussi dans l’expérience globale qu’elles sauront faire vivre à leur client.


Définition

L’UX design (UX pour User eXpérience - en français Expérience utilisateur) désigne la qualité de l’expérience vécue par l’utilisateur dans toute situation d’interaction. L’UX qualifie l’expérience globale ressentie par l’utilisateur lors de l’utilisation d’une interface, d’un appareil digital ou plus largement en interaction avec tout dispositif ou service :

Utilité, efficacité, facilité, ergonomie, accessibilité, crédibilité, architecture, référencement...

sont les maîtres mots de l’UX. En effet, l’UX a pour objectif de guider et d’amener l’internaute à concrétiser son action : achat, recherche d’informations… sans effort de sa part et dans un environnement agréable, fluide et rassurant. Un grand nombre de paramètres entrent en ligne de compte tout au long de la conception du site, mais également après, avec les retours des utilisateurs. L’UX est soumis à la sensibilité des internautes.


Roue Magnus Revang - Agoravita

Roue de Magnus Revang
(Source : http://userexperienceproject.blogspot.fr/2007/04/user-experience-wheel.html)


Selon l’infographie de Magnus Revang, on peut résumer l’UX en six étapes pour l’utilisateur, et en une multitude de paramètres à considérer lors de la conception :

  • Le site doit être facile à trouver : ce qui nécessite un travail de référencement en amont

  • Le site doit être accessible : il faut désormais concevoir des sites supportés par les différents terminaux et technologies

  • Le design doit donner envie et confiance : il faut donc être cohérent dans le choix des graphismes et penser ergonomie

  • Le site doit être facile à prendre en main : il doit être suffisamment intuitif pour qu’on s’y repère facilement

  • Le site doit être crédible et conforme à l’image de la marque : les utilisateurs doivent être rassurés et convaincus

  • Le site doit être efficace : l’internaute doit facilement trouver les réponses à ses questions, et le site doit être exempt d’erreurs


Contenu

Contenu éditorial

Page de texte pleine largeur : le texte peut être centré et superposé sur une photo pleine largeur, il peut être placé à droite ou à gauche avec des liens ou des images.




Formulaires

Formulaire de contact

Accessible depuis le menu de navigation ou le footer, la saisie se fait parfois par étape (avec l'affichage des champs les uns après les autres une fois renseignés) et de manière ludique sous forme de questions.



Formulaire de newsletter

Il est aussi accessible sous forme de notification depuis un article par exemple.


Lien Formulaire Newsletter-Departures
Formulaire Newsletter-Departures https://departures-international.com

Image fullscreen ou vidéo

Plus d’espace sur la page d’accueil

L’ avantage du menu de navigation caché, c’est qu’il crée également plus d’espace sur la page d’accueil. On constate l’abandon du slider pour une communication du moment. La tendance est à l’image fullscreen ou vidéo.





Si une vidéo est affichée, le déploiement du menu peut générer un arrêt sur la vidéo de manière à concentrer l’attention de l’utilisateur sur le menu. Un contraste prononcé au niveau des couleurs ou une image d’arrière-plan permettra également de concentrer l’attention.




Vidéo

La vidéo est partout

TV, plateformes de vidéo, réseaux sociaux, newsletters, points de vente, intranet... : d’ici 2019, la vidéo internet représentera environ 80% du trafic internet global, contre 57% en 2012 (hors usage P2P). (Markentive, 2015).

Des études montrent qu’un internaute est plus enclin à acheter un produit, à contracter un service ou à entrer en relation avec la marque après avoir visionné une vidéo.

La vidéo permet de créer une véritable expérience avec l'utilisateur, elle l’immerge dans l’univers de la marque - Exemple de Vandal New York et le retient pour lui laisser le temps de voir l’ensemble des actions possibles. Exemple de 2am Media

Il faut savoir qu’environ 80% des internautes se souviennent de la vidéo qu’ils ont regardé sur un site web au cours des 30 derniers jours.(TchilTchak 2016)

Il existe plusieurs types de vidéos :



Vers des comportements d'applications natives

Aujourd’hui, on contaste que

  • L’audience mobile dépasse celle du PC (Source : Statcounter).

  • Le téléchargement des applications augmentent toujours (+15% en 2016 à l’échelle mondiale, selon App Annie).

Site web mobile et applications natives

Le top 1000 des applications natives* enregistre 4 milliards de visiteurs/mois alors que le top 1000 des sites web mobile enregistre 11.4 milliards de visiteurs/mois.

En parallèle

Le top 1000 des applications natives* enregistre une moyenne de 188 minutes/mois de consultation alors que le top 1000 des sites web mobile enregistre une moyenne de 9 minutes/mois de consultation.

En conclusion :

3 fois plus de visites sur les sites web mais 20 fois moins de temps de consultation.


* Applications natives: il s’agit d’une application mobile développée pour un système d’exploitation spécifique (iOs, Androïd, …). On la télécharge via des plateformes dédiées, come Apple Store ou Play Store.

La conception d’un site web doit donc s’appuyer sur des comportements d’applications natives pour inciter l’utilisateur à rester sur le site plus longtemps.

En réponse à ce constat, Google a développé « Les Progressive Web Apps » (PWA) :

Les PWA utilisent le meilleur des technologies du Web (HTML5) associées aux fonctionnalités des applications pour offrir une expérience utilisateur inégalée. Ainsi, elles ressemblent beaucoup aux applications natives et hybrides* à ceci près qu’elles sont accessibles depuis un navigateur et non un store. Elles se situent aussi à mi-chemin entre la Webapp** et le site Web mobile.

La PWA est, en fait, un site internet développé spécifiquement pour les mobiles. Des scripts fonctionnement en parallèle de la page web, ce qui rend possible son utilisation en mode hors ligne, permet l’envoi de notifications ou la mise à jour des contenus en arrière-plan.

Elles ne fonctionnent que sur Androïd et sous Chrome pour le moment.

*Applications hybrides: il s’agit d’une version hybride d’une application web et d’une application native. Elle s’exécute via un store et s’adapte à tous les systèmes d’exploitation.

** Webapp (une application web) est un site Internet développé pour les mobiles. Par extension, elle désigne aussi une web application mobile. Source: https://www.powertrafic.fr/progressive-web-apps-web-mobile/

PWA Notifications

  • Un temps de chargement considérablement réduit

  • Une utilisation sans connexion Internet

  • Elles sont Responsive, donc compatibles avec n’importe quel système d’exploitation et n’importe quel support (pc, tablette, mobile)

  • Pas d’installation requise

  • Les PWA sont accessibles depuis une URL ou directement depuis une icône sur l’écran d’accueil du mobile

  • Elles ne prennent pas de place dans la mémoire du mobile

  • Elles sont sécurisées (protocole HTTPS)

  • Une expérience immersive grand écran, semblable aux applications natives.

Notifications PWA - Agoravita

Les notifications de type Push

Les notifications Push remplacent la pop-in par un encart de type notification plus minimaliste et qui donne ainsi l’impression d’une application sur le site.



La pop-in Newsletter

Affichage de la pop-in d’inscription « Newsletter » plus minimaliste (calée à gauche).


Popin inscription Newsletter-Huffpost http://www.huffingtonpost.fr/

Les boutons de déploiement

Inspiré de la boîte mail, on voit apparaître en version mobile les 3 petits points.
Leur but ? permettre d’accéder à d’autres actions ou contenu. Le clic déploie verticalement le panneau.



Le swipe (type e-mail)

Le swipe c’est quoi ?
C’est l’exécution d’un glissé sur écran à l’aide du doigt de l’utilisateur. Le swipe est généralement utilisé pour faire défiler en latéral des contenus, sur un carrousel ou pour fermer une application.