Category Archives: UX Design

UX design et webdesign 2018

UX design – Webdesign : 10 tendances 2018

By | UX Design, Webdesign | No Comments

Même si 2018 est déjà bien entamé, on peut encore dire qu’en UX Design comme en webdesign, les tendances pour cette année suivront celles de 2017 qui a fait la part belle aux visuels de qualité (images et vidéo) et à une expérience utilisateur toujours plus fluide et intuitive.
Dans cette article, nous avons choisi de vous parler plus particulièrement de 10 tendances qui vont marquer 2018.

1. Le cinémagraph, un atout pour le webdesign

cinemagraph ChopardApparu déjà en 2017, l’utilisation du cinemagraph va s’intensifier en 2018. Il s’agit d’un mélange entre image et vidéo tournant en boucle et qui sera incorporé sous forme de gif animé dans les sites web et landing pages. L’originalité d’un tel procédé est que seule une infime partie de l’image est animée. Nous avons déjà pu en voir notamment dans les newsletters de nos grandes marques préférées. Il a d’ailleurs été noté que cette technique permet d’augmenter le taux de clic de 25% sur un emailing par rapport à un emailing sans animation.
En effet, par son attractivité et son effet de nouveauté, le cinemagraph augmente l’intérêt de l’internaute et permet de focaliser son attention sur un point précis.
Attention toutefois à son poids : il est important, en terme d’UX design et de SEO, de veiller à ce que le poids du cinemagraph n’augmente pas de manière significative le temps de chargement de la page web.

2. L’image : contenu prioritaire

Comme nous le savons, le cerveau a tendance à retenir plus facilement les images que le texte. Les visuels sont aussi beaucoup plus parlant qu’un long discours. Pour cela, il est évident que l’utilisation d’images (photographie, vidéo, illustration) reste pertinente dans la conception de site web en 2018.

Ainsi, pour attirer l’attention de l’internaute et vous démarquer de la concurrence, il est important de lui offrir des visuels uniques et qui vous ressemblent plutôt de de faire appel à des banques d’images plus impersonnelles, qu’il s’agisse de photographie ou d’illustration. Il est donc préférable de faire appel à des professionnels tels que photographes ou illustrateurs qui ont un style propre qui pourra vous séduire et donc séduire votre clientèle.

De même, la vidéo et l’animation 3D sont encore largement utilisées et permettent de rendre plus attrayante la présentation d’une entreprise ou d’un produit qu’un long bloc de texte.

3. Les couleurs vives

Webdesign 2018 - Pantone Violet2018 voit le grand retour des couleurs vives et dynamisantes. Ce n’est pas pour rien que l’Ultra-violet est la couleur Pantone 2018 ! Ce qui n’est pas pour nous déplaire 😉

Les webdesigners osent les couleurs « flashy » pour les marques qui veulent être originales et marquer les esprits.

4. Retour du dégradé

Dégradé Apple webdesignAprès quelques années de Flat Design, parfois jugé un peu trop froid et manquant de profondeur, les dégradés, plus élégants, sont de retour. En effet, depuis 2016, certaines marques comme Apple ou Instagram ont modifié leur identité visuelle pour y intégrer de larges dégradés de couleurs. Que ces dégradés soient utilisés pour la création de logos ou en superposition sur de larges visuels, cette tendance se confirme encore cette année.

Du point de vue de l’UX Design, il est nécessaire de faire attention à la lisibilité des textes qui sont apposés sur ces dégradés et, par mesure de précaution, de ne pas y associer de contenu informatif important.

5. Typo massives

Police massive UX DesignToujours dans le but d’aller au plus simple et au plus rapide, les items de menus sont de plus en plus courts, les phrases d’accroche le sont tout autant. Ainsi, afin de faciliter la lecture de l’internaute, les typo sont de plus en plus épaisses pour ce type de textes. Elles attirent le regard, se lisent en un clin d’oeil et permettent une action plus rapide.

Ces typo massives sont utilisées pour attirer l’attention de l’internaute qui a pris l’habitude de lire les pages web en diagonale pour gagner du temps. Il est à la recherche des mots importants qui lui aideront à comprendre rapidement le contenu de ces pages.

Les typo massives sont donc à privilégier pour des titres, des textes courts, des slogans et les items de menus (quand il y en a peu).

6. Nouveau format d’image : SVG

Le développement du rôle de l’UX Design dans la création des sites web ainsi que de la qualité des écrans disponibles sur le marché (avec l’arrivée des écrans Retina) a augmenté notre exigence en terme de qualité d’images. Les images JPG, PNG et GIF correspondant à des formats compressés, elles subissent des pertes de qualité non négligeables. Nous avons donc de plus en plus tendance à utiliser des formats nous permettant de conserver les propriétés et la qualité des images sans impacter le temps de chargement des pages web. Dans cette optique, le format SVG (Scalable Vector Graphic) sera probablement le format le plus utilisé lors de la conception de sites web en 2018, notamment pour les icônes.

En effet, quelle que soit la taille ou la résolution d’écran, les logos, icônes et autres graphiques conservent une qualité irréprochable. De plus, ce format gère parfaitement les effets de transparence, de filtre et d’animation.

De plus, trois types d’objets graphiques sont permis avec ce format : images, textes et formes vectorielles.

7. UX design : les interactions

UX Design Interactions Avec l’avancée des technologie et de l’importance de l’UX Design, les sites internet proposent de réelles expériences utilisateur qui permettent un engagement de l’internaute dans sa navigation. L’animation par l’interaction est le meilleur moyen de faire participer les visiteurs.

Ainsi, plus l’expérience utilisateur est originale et agréable, plus le temps passé sur chaque page du site est long et meilleur sera l’engagement des internautes.

Par exemple, les animations déclenchées par le scroll de la page invitent les visiteurs à faire défiler les pages du site et ont pour but d’augmenter le taux de conversion, à l’image du LookBook Winter de Wed’ze.

Il existe également des micro-interactions qui correspondent à de subtils mouvements déclenchés par l’action de l’internaute, comme, par exemple, le « saut » du caddie déclenché par l’ajout d’un produit dans le panier virtuel de l’utilisateur.

Très appréciées en UX design, ces micro-interactions permettent également d’améliorer l’expérience utilisateur de l’internaute en lui donnant un feedback immédiat sur l’action qu’il vient de réaliser et ainsi le rassurer. Ces micro interactions doivent être subtiles car elles doivent être à la fois visibles, discrètes et explicites.

8. Design asymétrique

UX desgin asymétriqueSur une page web, le design asymétrique consiste à mettre en place de manière non symétrique mais équilibrée différents blocs d’éléments (images, texte…), donnant ainsi plus de liberté à la créativité.

Le contenu est segmenté permettant ainsi à l’internaute de se concentrer plus longtemps sur le contenu de la page et améliorant l’expérience utilisateur…si et seulement si un équilibre est respecté dans la page afin d’éviter toute confusion.

En effet, les blocs de texte et les espaces doivent s’équilibrer avec les images afin d’obtenir une page fluide et esthétique.

9. Ecran partagé ou split screen

UX design et Ecran partagéL’écran partagé est comme son nom l’indique un écran « coupé » en deux afin de créer deux espaces différents permettant de véhiculer deux messages simultanément.

Très apprécié en UX Design, l’écran partagé offre une bonne expérience utilisateur d’un point de vue visuel quelque soit le support utilisé car l’interaction y est fluide et intuitive. Il est ainsi possible d’utiliser un bloc pour le titre et le visuel tandis que le contenu textuel  sera dans le bloc adjacent.

10. UX design : Chatbot

Autrefois limité aux messageries, les chatbots se démocratisent pour apparaître sur toujours plus de site internet, voire même devenir des sites internet à part entière. Ces robots conversationnels interactifs offrent à l’internaute une expérience utilisateur simple et intuitive d’autant que l’interface est généralement réduite au strict minimum, se concentrant au maximum sur la qualité des réponses à apporter aux utilisateurs.

Ce système ressemble donc à une messagerie instantanée et permet à l’internaute d’obtenir des réponses à ses interrogations dans les plus brefs délais ; en revanche, il faut savoir qu’il est très difficilement indexable et cela est donc à prendre en compte dans sa stratégie SEO.

UX design

UX Design : quelques outils incontournables

By | UX Design, Webdesign | No Comments

UX design et méthode de maquettage de site web

Dans un projet web ou de refonte de site, avant la réalisation du webdesign, il est nécessaire de réfléchir à l’expérience utilisateur (UX) et donc de dessiner la structure du futur site internet. Ces pré-maquettes nous permettent de savoir où placer chaque élément, de penser les différents scénarii de parcours des internautes et de tester différentes versions. Donc avant de penser webdesign, aujourd’hui, on pense UX Design ou design d’Expérience Utilisateur. L’utilisateur est au centre du projet.

Vous pouvez voir ci-dessous, un exemple de wireframe réalisé avant la création du webdesign du site Emprint (projet personnel).

UX design site web

Etapes de l’UX Design d’un site web

1 – Maquettage papier ou wireframing

La première étape de création d’un site Internet consiste à dessiner l’arborescence du futur site comprenant toutes les pages avec leurs différents niveaux d’interactions. Nous sommes déjà entrés dans l’UX Design.
Lorsque l’arborescence est réalisée, l’étape suivante est le dessin de la structure des pages principales : on l’appelle structure filaire ou wireframe.

A cette étape, les différentes parties du site sont représentées par des blocs et chaque image est représentée par un rectangle. Ce type de maquette n’est pas très détaillée mais nous permet d’avoir une vision d’ensemble des différentes pages et de penser les moindres détails de la navigation et des interactions à mettre en place entre les différentes pages du futur site web.

Afin de nous faciliter cette étape, il existe différents outils que j’apprécie particulièrement :

  • Une feuille de papier et un crayon : il est vrai qu’à l’ère du digital, on a tendance à les oublier mais ils sont pourtant très utiles pour la première phase de réflexion.
  • Wireframe CC : il s’agit d’un outil en ligne. Dans sa version gratuite, on peut déjà réaliser des maquettes intéressantes.
  • Balsamiq Mockup : c’est un logiciel payant très bien fait et intuitif. Il permet de réaliser rapidement des maquettes claires et de qualité.
  • Photoshop ou Fireworks de la suite Adobe : ce sont des logiciels payants mais permettant d’être plus précis et d’ajouter de la couleur.

2 – Réalisation de l’UX design / webdesign

A partir du wireframe, la réalisation du webdesign est possible. Il correspond à la version illustrée de la maquette dessinée en filaire. Elle est très détaillée et comprend généralement les photographies, les logos et les typologies qui seront utilisés pour l’intégration du site web. En général, on en présente deux versions à notre client. La version choisie par ce-dernier pourra encore faire l’objet de quelques modifications mineures avant la réalisation du site Internet, comme cela a été le cas pour le site Emprint.

Là encore, il existe différents outils et leur choix dépend du webdesigner et de son affinité avec eux. Voici ceux que’j’utilise le plus souvent :

  • Photoshop : qui est un logiciel de retouches photo très connu des photographes et des graphistes,
  • Illustrator : qui est plus utilisé dans la création de logos, d’illustration, d’images vectorielles et fait aussi partie de la suite Adobe,
  • Fireworks : qui peut être vu comme un mix entre Photoshop et Indesign, est très pratique pour réaliser des webdesigns. Le seul bémol est que la qualité des images que l’on exporte à partir de notre travail réalisé sur Fireworks est de moins bonne qualité que celles issues de photoshop ou Illustrator. D’ailleurs, Adobe ne semble pas vouloir continuer à développer ce logiciel puisqu’il est resté dans sa version CS6 même dans la suite Creative Cloud.
  • 960 grid system : qui est un site proposant à la fois un framework CSS et des templates de grilles à utiliser dans différents logiciels tels que Photoshop, Fireworks ou même Gimp. Ces templates de grilles sont très utilisés en webdesign pour aligner des images, du texte et respecter les proportions dans la réalisation des sites web.

3 – UX design : Prototypage du site

Une fois le webdesign réalisé sur chaque page du futur site web et avant l’étape d’intégration web, il peut être utile de réaliser un prototype du site, notamment pour une présentation à un client. En effet, un prototype permettra de visualiser les différents parcours utilisateurs, les différentes interactions entre les pages ou simplement les effets que l’on souhaite faire apparaître sur le site.

Pour cette étape, il existe aussi des outils performants. Voici ceux que j’affectionne le plus :

Outils UX Design

  • InVision : qui est un outil en ligne permettant de réaliser des prototypes de sites web et d’applications mobiles à partir des maquettes des différentes pages préalablement uploadées sur le site InVision. Cet outil est très utile et vraiment bluffant. C’est celui que j’utilise le plus.
  • Flinto : là encore, c’est un outil en ligne qui a les mêmes fonctions qu’InVision. Ces deux outils ont l’avantage d’être collaboratifs et intuitifs.
  • Fuid UI : qui est un outil en ligne très complet permettant directement le maquette et prototypage d’applications mobiles. Tout comme les deux précédents, il est très efficace.
  • GifYoutube : cet outil en ligne est très utile pour convertir des portions de vidéos en gifs animés utilisables ensuite sur les maquettes. Effet whaou garanti !

A vous de jouer maintenant et bonne création !