In Actualités, Blog, E-Commerce

Flow experience, material design, skeuomorphisme ou Modern UI design, ça vous parle ?

Le web est fait d’évolutions techniques et esthétiques qui viennent régulièrement étoffer le jargon du webdesign… au point que celui-ci devienne parfois incompréhensible. Ces termes intimident et compliquent souvent la tâche des e-commerçants qui se penchent sur le webdesign afin d’optimiser leur site.

Notre équipe de designers vous propose donc ce glossaire afin de comprendre et d’assimiler plus facilement le vocabulaire du webdesign. Ce glossaire est divisé en deux articles. Ce premier article se concentrera sur les thèmes de l’utilisateur et des tendances graphiques.

L’utilisateur

UX

On parle d’UX (expérience utilisateur) dès lors qu’il existe une interaction entre un individu et un produit, un service ou un objet. Dans le domaine du webdesign, l’interaction se fait entre l’Homme et la machine (ordinateur, tablette, smartphone) via une interface.

Chaque utilisateur vit sa propre expérience, qu’elle soit positive ou négative. Elle est différente pour chacun puisqu’elle fait appel au ressenti et à la perception personnelle.

Il y a néanmoins certaines caractéristiques qui jouent un rôle déterminant dans l’expérience d’un utilisateur, tel que le référencement, la facilité de navigation dans le site, les temps de chargements, le confort de lecture ou encore la rapidité d’accès au contenu.

UI

L’UI (interface utilisateur) est la partie visible d’un site. C’est la première chose que le visiteur voit et c’est elle qui fait le lien avec votre site.

L’interface utilisateur fait référence à l’apparence d’un site. Elle fait office de vitrine et de merchandising pour les visiteurs. Comme dans une boutique, elle peut rapidement faire naître une impression positive ou négative, l’envie de rester ou de partir et finalement être appréciée ou non.

UX DESIGN

L’UX design (design d’expérience utilisateur) est l’élaboration (recherches, études, analyses, conception et suivi)  d’interfaces centrées sur l’expérience de ses utilisateurs.

L’objectif de l’UX design est de proposer la meilleure expérience possible, de faciliter la navigation sur le site, mais surtout de générer des interactions entre l’e-commerçant et le visiteur. L’interaction est un facteur important qui place l’utilisateur en tant qu’acteur de sa navigation. Une bonne expérience est avant tout naturelle et spontanée.

Pour y parvenir, plusieurs éléments doivent être pris en compte à l’instar de l’arborescence, du story-telling, de la conception rédaction, de la mise en page et du design. Tout doit être pensé et construit pour vos utilisateurs afin de leur répondre à leur demande ou de leur apporter l’aide nécessaire si besoin… en leur demandant le moins d’efforts possible.

L’UX implique de connaître et de comprendre vos visiteurs, d’ajuster l’UX à leurs besoins, mais aussi de prendre en compte leurs retours pour continuer à l’optimiser.

UI DESIGN

L’UI design (design d’interface) désigne tout ce qui rapporte à la création graphique d’une interface destinée aux utilisateurs. Le but de l’UI designer est de concevoir des interfaces aux designs fonctionnels, faciles et intuitifs. La création est centrée sur les utilisateurs, pour rendre leur navigation plus agréable visuellement, et plus instinctive.

L’enjeu est double : il faut d’abord retranscrire l’identité de la marque sur le site pour que les visiteurs puissent avoir des repères de branding qui les rassurent. Mais il faut aussi que les interfaces soient épurées et très lisibles pour permettre aux visiteurs de concrétiser leurs actions.

Lors de la création d’une interface, la réflexion va notamment porter sur les choix typographiques, les menus, la navigation, l’organisation du contenu, le design des éléments interactifs et les couleurs.

User friendly / usablility

Un site « user friendly » est construit pour l’utilisateur et pensé pour répondre à ses besoins. Une interface « user friendly » est simple et facile d’utilisation : elle offre aux visiteurs une navigation agréable et un accès rapide au contenu cherché. Cette notion rejoint celle de « l’usability ».

Un site « user friendly » est plus souvent consulté qu’un site qui ne l’est pas (les algorithmes de Google y veillent), enregistre des temps de session plus élevés et davantage de conversions.

Nos conseils :

La compréhension des comportements d’achat en ligne des clients joue un rôle capital dans la mise en place d’une interface « user friendly ». Elle permet d’identifier les choses qui fonctionnent et celles qu’il faut revoir.

Les caractéristiques principales d’une interface « user friendly » sont :

  • La compatibilité mobile,
  • L’organisation optimale du contenu,
  • L’accessibilité à tous les utilisateurs,
  • Des temps de chargement optimisés,
  • La compatibilité avec tous les navigateurs,
  • L’intuitivité de la navigation,
  • Le traitement des erreurs,
  • La propreté du code,
  • Les contrastes des couleurs,
  • L’utilisation de formes pour délimiter les contenus.

Flow experience

Le « flow » correspond à un moment de lâcher prise au cours duquel l’utilisateur vit pleinement l’action, sans être distrait ou parasité : c’est le moment où l’expérience est optimale.

Par exemple, lorsqu’on apprend à faire du vélo, on a peur de tomber. On fait attention à la technique, à la coordination des jambes, ce qui nous empêche de nous concentrer totalement sur nos émotions. Une fois libéré de l’apprentissage, on profite des sensations ressenties et du parcours.

C’est à cette étape de l’expérience que le flow apparaît.

Si on applique ce principe au webdesign et plus particulièrement à la navigation, un site doit être pensé pour que l’internaute ne se pose aucune question pendant sa visite. S’il rencontre un problème, alors l’interface doit être conçue pour lui apporter l’aide nécessaire, le plus rapidement et simplement possible, sans le faire dévier de son objectif. Il faut donc anticiper les besoins de l’utilisateur en amont de la création de l’interface.

Le flow design fait partie intégrante de la démarche « user friendly »

Nos conseils :

  • Réfléchir aux besoins et envies de vos utilisateurs. Comment les satisfaire ?
  • Ne pas changer trop souvent votre interface pour que vos internautes n’aient pas à revenir à l’étape d’apprentissage et de découverte.
  • Identifier les étapes compliquées et anticiper en proposant des solutions.
  • Concevoir une navigation facile et accessible.

Mobile first

Le « mobile first » est une façon de concevoir l’ergonomie d’un site web en priorisant les problématiques d’affichage et de navigation sur mobile.

Les mobiles sont aujourd’hui plus utilisés que les ordinateurs pour se connecter à Internet. Il s’agit donc d’une information importante à prendre en compte lors de la création d’un site ou d’une application. Réfléchir d’abord pour le mobile, c’est en compte les contraintes de ce device pour proposer aux mobinautes l’interface la mieux adaptée à la navigation mobile.

En effet, le temps de consultation sur mobile est plus court pour différentes raisons (connexion instable, volatilité des mobinautes…). Un site mobile doit donc permettre d’accéder rapidement au contenu. Il faut aussi faire attention à la lisibilité des typos (taille, couleurs), et à la compréhension des icônes de navigation.

La prise en compte de ces différents critères participe au confort de lecture, à la facilité de navigation et à la réduction du taux d’abandon d’un site mobile.

WAI

Le WAI (Web Accessibility Initiative) est un mouvement qui vise à améliorer l’accès à Internet pour toutes les personnes qui en ont un accès difficile. Il s’adresse aux personnes handicapées, aux séniors, mais aussi à tous les utilisateurs qui ont un type de connexion ou une vitesse trop faible.

Un ensemble de règles et d’outils ont été créés pour accompagner les sociétés ou développeurs qui souhaiteraient appliquer la charte WCAG 2.0 lors de la création d’un site web. Elle est composée de 12 directives regroupées en 4 thématiques. Cette charte encourage notamment les sites à proposer des contenus perceptibles, utilisables, compréhensibles et robustes.

Pour que les contenus de votre site soient accessibles au plus grand nombre, il est recommandé de suivre ces normes dès la construction de votre site.

Affordance

Dans le domaine du webdesign et plus particulièrement pour le design d’interface, l’affordance est la capacité d’un élément à suggérer sa propre utilisation, tout en guidant intuitivement l’utilisateur vers l’action. C’est par exemple des CTA (boutons d’appel à l’action).

Glossaire webdesign affordanceEn un coup d’oeil, l’utilisateur doit identifier les éléments avec lesquels il peut interagir.

Tendances graphiques

GAFAM

Cet acronyme reprend les initiales des 5 géants du web, Google, Apple, Facebook, Amazon et Microsoft.

GAFAM design

Le GAFAM design qualifie les tendances de webdesign impulsées par Google, Apple, Facebook, Amazon et Microsoft.

Ces entreprises sont celles qui lancent depuis quelques années les tendances du webdesign. On leur doit notamment, le flat design (Microsoft), le material design (Google), mais aussi le skeuomorphisme (Apple).

SKEUOMORPHISME

Il s’agit d’un effet visuel d’interface qui imite l’apparence d’objets réels (par exemple l’horloge des iPhones qui ressemble à une montre). Cela facilite la lecture et la rend intuitive.

Au-delà de cet aspect pratique, sa fonction est également émotionnelle dans la mesure où le skeuomorphisme fait appel à la mémoire et aux souvenirs des utilisateurs.

Skeuomorphisme Flat design webdesign

Flat design

Le flat design est un style graphique utilisé dans le webdesign qui est rapidement devenu une tendance incontournable. Il se veut minimaliste, épuré, et privilégie la lisibilité en supprimant tout ce qui est superflu.

Le Flat design utilise des formes simples, des couleurs vives qui mettent en valeur les éléments importants pour hiérarchiser et dynamiser le contenu. Les typographies utilisées sont très souvent sans serif, dans un souci de simplicité et sa lisibilité.

Sa flexibilité et son adaptation parfaite (responsive) à tous les supports (ordinateurs, tablettes et smartphones), ont participé à son succès ; même s’il est aujourd’hui remplacé par des tendances plus récentes.

Modern UI design

Le Modern UI design (précédemment appelé Metro Design) est un principe graphique d’interface.

Il est créé en 2012 par Microsoft pour Windows 8 dans l’optique de se différencier des interfaces d’Apple et de Google.

Le modern UI design se caractérise par sa simplicité, la clarté et l’homogénéité de ses interfaces qui les rendent impactantes.

Ses principes de base sont : des jeux de couleurs, des typographies très présentes, et des icônes organisées sur une grille flexible qui s’animent au fil de la navigation.

Il s’est imposé comme un modèle d’ergonomie d’interfaces. Il est notamment repris dans de nombreux templates de sites préconçus.

Modern UI design webdesign

Material design

Le material design est un principe graphique codifié.

Élaboré par Google en 2014 pour harmoniser l’expérience sur l’ensemble de leurs interfaces, il est basé sur 3 éléments : la lumière, les ombres et l’espace 3D. Il s’inspire du flat design, des systèmes d’interaction du mobile et de la réalité tactile.

Les éléments se déplacent, se divisent, s’unissent, disparaissent et changent d’échelles. Les informations sont hiérarchisées, les interfaces sont minimales, les déplacements y sont intuitifs et invitent à l’interaction.

L’objectif est d’offrir la possibilité à l’utilisateur de déplacer des éléments de l’interface comme il pourrait le faire avec des objets dans le réel. Afin d’imiter au mieux la réalité, des ombres portées ont été ajoutées. Elles constituent un repère visuel qui reproduit l’incidence de la lumière sur les éléments. Pour arriver à cette impression, Google s’est inspiré d’une feuille de papier en imitant les ombres produites lors de ses déplacements.

Ces règles de webdesign simples et claires permettent d’assembler ces éléments dans une grille définie et adaptable au responsive design. Quel que soit le support, l’internaute retrouvera cette expérience fluide où les éléments se meuvent en fonction de la taille du support.

Glossaire Material Design webdesign

GRIDS / GRILLE

Une grille est un ensemble de colonnes, de gouttières et de marges qui forment des repères de mise en page. En d’autres termes la grille est la structure, le squelette de vos pages et vous sert à composer, organiser et hiérarchiser les différents éléments qui constituent vos interfaces (titrage, texte, images…).

Initialement utilisée pour les supports print, la grille s’avère être d’une grande aide pour les supports digitaux. Elle joue un rôle majeur dans le confort de lecture, et participe entre autres à l’interaction avec les visiteurs. L’utilisation de la grille permet d’obtenir des interfaces cohérentes et plus lisibles puisque le contenu y est mieux organisé. Elle est particulièrement recommandée pour les sites qui ont beaucoup d’informations.

Les marges et les gouttières représentent les espaces vides de votre grille, elles sont très importantes puisqu’elles contribuent aux « respirations visuelles » et aèrent votre site.

Les colonnes sont des conteneurs dans lesquels vous pouvez placer facilement et rapidement votre contenu. Elles peuvent être gérées dans le sens horizontal et vertical et peuvent prendre différentes tailles.

 Grilles webdesignLes cartes

Les cartes sont des outils de mise en page utilisés dans le webdesign. Ce sont des petits conteneurs, abritant chacun des informations différentes (images, textes, liens…).

Les cartes sont très populaires notamment parce qu’elles créent une mise en abyme de l’information, l’isolant du reste du contenu du site. Cela facilite la concentration, rend la lecture plus confortable et retient l’attention de la plupart des utilisateurs. Parce que les cartes s’adaptent parfaitement au responsive design et au format mobile, elles se déclinent sur toutes les tailles d’écran. Elles améliorent les temps de chargement d’un site, ont un fort pouvoir organisationnel et sont très flexibles. Très utilisées dans le material design, elles permettent une navigation intuitive.

«Le cards design» s’est d’abord fait connaître sur Pinterest, Facebook, Twitter et Microsoft. Il est aujourd’hui répandu sur de nombreuses interfaces et fait partie des tendances fortes actuelles du webdesign.

Cartes webdesign

Ce vocabulaire centré sur l’expérience de l’utilisateur et les principes graphiques des interfaces montre qu’avant de penser à la conception ou à la refonte d’un site, il faut réfléchir à la cible et à ses habitudes de navigation. De ces éléments doivent découler l’arborescence et l’ergonomie du site. Les tendances graphiques actuelles également témoignent de cette mouvance user-centric.

Après cet article sur des définitions sur l’expérience utilisateur et les courants esthétiques du web, nous vous proposerons un deuxième article avec un vocabulaire autour des outils pour construire votre site.

Recommended Posts

Leave a Comment

Contactez-nous

Contactez-nous pour découvrir comment nous pouvons vous aider à améliorer les performances de votre site internet.

Not readable? Change text.

Start typing and press Enter to search