Si vous avez navigué sur vos sites favoris au cours des dernières années, vous aurez sûrement remarqué qu'on vous demande de plus en plus régulièrement si vous souhaitez ajouter une page à votre écran d'accueil sur votre téléphone, ou si vous souhaitez installer l'application. Avoir un site, c’est bien, mais quel plaisir de pouvoir le lancer via son téléphone, sa tablette ou sur son bureau d'ordinateur en 1 clic. On vous parle aujourd'hui de cette technologie qui peut en perdre quelques uns.

Tout d’abord, commençons par une définition scolaire 🧑‍🏫

Une PWA, acronyme de Progressive Web App est un procédé qui permet de transformer un site web sous la forme d'une application, accessible sur mobile et ordinateur et qui ajoute un paquet d'autres fonctionnalités et avantages.

Dans un monde de plus en plus connecté et où tout doit aller vite, quel plaisir de pouvoir lancer son site web favori, ou son outil de travail en 1 clic depuis son bureau ou le "launcher" de son téléphone !

Voici une liste non exhaustive des avantages d'une PWA :

Icône pour lancer directement l'application

Accès à certaines fonctionnalités natives du support (bluetooth, photos, micro, géolocalisation, etc..)

Un développement plus rapide et économique qu'une application mobile ou un logiciel

Le référencement ASO (Application Store Optimisation) est moins intéressant en cas de publication sur les stores

Son installation sous forme d'application est peu connue du grand public, malgré les messages du système qui le proposent

Accès limité aux fonctionnalités natives

Malgré cela, le cas de Twitter permet de se rendre compte de l'impact que cela peut avoir sur votre produit. Depuis la mise en place de leur PWA, Twitter a enregistré une augmentation de 65% de pages vues par session utilisateur, de 75% de tweets réalisés et une réduction du taux de rebond de 20% ! Tout ça en réduisant le poids de leur application de 97% (Source : web.dev).

Ce n'est pas toujours simple de déterminer quel type de développement est le plus adapté : est-ce qu'il vaut mieux faire un site web classique ? Une PWA ? Une application mobile ? Un bon vieux logiciel ? Comme souvent, ça va dépendre de votre produit et de son utilisation.

Vous souhaitez développer un intranet ou une application métier ? La PWA peut être très intéressante pour permettre à votre équipe d’installer l’outil sur leur ordinateur, téléphone ou tablette et de bénéficier de fonctionnalités supplémentaires, comme l'utilisation hors connexion qui peut s'avérer cruciale pour des équipes de techniciens qui travaillent sur le terrain sans connexion WiFi.

Pour un site vitrine ? C'est plus discutable. En effet, une PWA n'apporterait pas d'avantages significatifs par rapport à une développement traditionnel.

Vous l'aurez compris, cela dépend bien souvent du produit que vous souhaitez développer et de son utilisation. Les logiciels et applications mobiles natives sont eux plus lourds à développer mais seront plus puissants. Ils offriront une meilleure interaction avec le device sur lesquels ils sont installés (accès à la batterie, à la luminosité, etc...). Une PWA est-elle plus économique à développer et permet d'avoir un MVP (Minimum Viable Product) en un claquement de doigt - ou si je peux me permettre, de clavier !

Le saviez-vous ? Vous pouvez même publier votre application sur certains stores !

Et si je vous disais qu’il existe désormais les TWA (Trusted Web Activity) ? C'est un terme encore très peu connu qui consiste à publier une PWA sur un store. Google Play le permet. Dinguerie non ? 😎

Les PWA offrent beaucoup d'avantages et leur utilisation devient de plus en plus populaire. Au point que des entreprises comme Google les favorise de plus en plus dans leur algorithme de référencement (et ce n'est pas rien !).

Mais comme toutes les solutions, il faut s'assurer que c'est la bonne pour vous avant de vous lancer dans un quelconque développement. Du coup, si vous êtes en phase de réflexion sur un projet web et que vous vous posez la question de la PWA : n'hésitez pas à venir en discuter avec nous ! 👋

Installer une page web ?! Quelle sorte de magie est-ce donc ?! Attachez vos ceintures, on vous emmène dans le monde magique des PWA !

Définition et réflexions sur l'utilisation des PWA (Progressive Web App)

Pourquoi utiliser des PWA (Progressive Web App) ?

Il existe un ensemble de règles dans le web qui régissent les comportements des utilisateurs. Mais ces dernières ne sont pas toujours aussi rigides qu'on pourrait le penser... Et si certaines règles étaient fût un temps vraies, ce n'est aujourd'hui plus nécessairement le cas ! Pire, leur application peut parfois nuire à l'expérience de vos utilisateurs ! 😤

Allez, aujourd'hui on debunk 3 mythes du web. Zéé bartiiii 🎈

Mythe n°1 : Les utilisateurs ne scrollent pas

On commence avec un classique. C'est quelque chose que l'on entend souvent par nos clients : "Je veux que - insérer une quantité déraisonnable de contenu - soit visible dès le premier écran, sinon ça ne sera jamais vu !". Ou encore : "Il faut à tout pris que ce bloc soit au dessus de la ligne de flottaison !".

La croyance générale est que les utilisateurs ne scrollent que très peu sur les pages des sites et que par conséquence, toute l'information importante doit se trouver en haut de page. Ce n'est pas totalement vrai. En effet, si au début du web les écrans étaient petits et les utilisateurs pas encore habitués aux mécaniques de navigation, les temps ont bien changé. Aujourd'hui, les devices que l'on utilise pour naviguer ont évolué ainsi que les usages des utilisateurs. Il n'y a qu'à regarder la manière que l'on a de parcourir nos fils d'actualité pour se rendre compte que scroller dans une page est devenu une habitude bien établie, notamment depuis la généralisation des smartphones et de leurs écrans tactiles. D'ailleurs, Google à récemment annoncé l'arrivée du scroll infini sur mobile : permettant aux utilisateurs d'avoir accès à plus d'informations sans avoir à cliquer sur un bouton "Voir plus". La preuve que les usages ont bel et bien évolué.

💬 Lors d'une étude, sur 100 000 pages analysées, le scroll a été utilisée sur 76% des pages et 22% des utilisateurs ont scroll jusqu'en bas des pages, même si ces dernières étaient longues (Source : ClickTale)

Le scroll dans une page web n'est pas un problème, loin de là. Le plus important est que la page soit bien pensée. Il faut donner à vos utilisateurs une bonne raison de descendre dans la page pour découvrir tous les contenus. Privilégiez donc toujours une bonne structure de page et une hiérarchisation intelligente des contenus quitte à rallonger un peu vos pages, plutôt que d'essayer de faire rentrer toutes les informations dans un petit espace en haut de page.

Mythe n°2 : tout doit être accessible en 3 clics ou moins

Vous avez certainement déjà entendu cette règle : si un élément est accessible en plus de 3 clics, il ne sera jamais vu et les utilisateurs perdront patience et quitteront le site avant même de l'avoir atteint ! L'application de cette règle peut devenir compliquée lorsque l'on travaille sur des sites complexes avec une arborescence vaste et du contenu en pagaille, un e-commerce par exemple.

Mais soyez rassuré, ceci est encore une fois faux ! Le plus important est de savoir ce qui est important pour vos utilisateurs et de rendre ces éléments accessible de la meilleure manière possible. Certains contenus devraient être accessible en un seul clic quand d'autres devraient l'être en quelques uns. Connaître ses utilisateurs et hiérarchiser son contenu en fonction de son besoin est plus important que de respecter une règle rigide.

Et que se passe-t-il si certains contenus ne sont accessible qu'en plus de 3 clics ? Mes utilisateurs quitteront-ils mon site, frustrés de pas pas avoir trouvé ce qu'ils cherchaient ?! 😡 Pas d'inquiétude, la grande majorité restera.

💬 Une étude a été réalisée sur 44 utilisateurs essayant d'accomplir 620 tâches différentes. Elle a permis de démontrer que certains utilisateurs pouvaient aller jusqu'à 25 pages avant de quitter et que le taux de satisfaction était sensiblement le même qu'il faille 3 clics ou 12 clics pour accomplir une tâche. (Source : Ally Reeves & UIE.com)

Vous l'avez compris, le nombre de clics pour atteindre un contenu importe finalement peu. Le plus important reste d'avoir un parcours utilisateur clair, qui donne à l'utilisateur un vrai sentiment de progression page après page. Il est également nécessaire de fournir à votre utilisateur des moyens d'accès faciles et rapides à certains contenus, notamment sur des sites complexes : barre de recherche, liens d'accès rapide...

Mythe n°3 : "mon logo doit être plus gros"

Tous les designers avec un peu d'expérience ont déjà entendu cette phrase par au moins un de leur client et rien que d'y penser, ça nous fait souvent hérisser les poils du bras. 😨

L'idée reçue est bien souvent qu'un logo plus gros dans le menu d'un site ou d'une application permettra aux utilisateurs de mieux identifier la marque. Ceci est faux. Nous comprenons parfaitement que vous souhaitiez que vos utilisateurs se souviennent de votre marque, mais ce n'est pas en augmentant la taille d'un logo que vous y arriverez, mais plutôt en travaillant sur votre proposition de valeur, votre discours et votre produit ou service. Par exemple : si l'on regarde des sites extrêmement populaires comme Twitter ou Amazon, on peut observer que leur logo ne sont pas spécialement gros, au contraire. Ce sont pourtant des sites de références dans leur domaine respectif.

Au contraire, augmenter la taille d'un logo peut nuire à l'expérience utilisateur. En prenant trop de place dans un menu, cela utilise de la place sur l'écran qui pourrait être utilisée pour afficher des informations et contenus plus utiles pour vos utilisateurs. Choisir la bonne taille pour un logo nécessite de prendre en compte l'équilibre de votre interface et la hiérarchie des informations. Après tout, vos utilisateurs viennent-ils sur votre site pour admirer votre joli logo ou pour trouver une information, un produit ou un service ?

Enfin, pour aller un peu plus loin, la taille est une chose : mais qu'en est-il de la position du logo ? Traditionnellement, je ne vous apprends rien si je vous dis que le logo est positionné en haut à gauche des pages. Mais est-ce que changer la position de son logo et le mettre en haut à droite pour casser les codes pourrait être une stratégie efficace ?

💬 128 utilisateurs ont participé à une étude pour déterminer dans quelle position le logo était le mieux retenu. Résultat : les utilisateurs ont 89% de chance de plus de se souvenir d'un logo s'il est positionné en haut à gauche plutôt qu'en haut à droite.(Source : Nielsen Norman Group)

En conclusion, nous vous conseillons de garder votre logo dans un emplacement traditionnel, et de ne pas abuser sur sa taille. L'expérience que vous proposez à vos utilisateurs étant bien plus importante. 😉

On s'arrête là pour aujourd'hui, à bientôt pour les prochains debunkages des mythes du web design ! ✌️

On debunk quelques idées reçues que vous pourriez avoir... 🥸

Scroll récalcitrant, nombre de clics au régime et logo en prise de masse... On debunk quelques idées reçues pour améliorer l'expérience de vos sites et applis !

Si vous n'avez pas lu la première partie, on vous encourage à le faire !

Au programme aujourd'hui : on va parler de termes utilisés dans la conception centrée utilisateur, de règles de design d'interface et de la transition designers/développeurs. Let's go! 🤘

Un Design System est un ensemble de composants associés à une documentation claire et précise permettant aux designers et aux développeurs de développer des produits digitaux plus simplement. Attention, ce n'est pas juste une galerie de composants, ou une simple palette de couleurs, mais réellement un système de design, un tout cohérent.

Le layout est l'organisation des différents éléments visuels qui composent une page web, ou une application : les textes, les images... C'est la structure d'un produit digital, qui permet de guider l'utilisateur dans sa navigation et de structurer l'information.

On dit d'un design qu'il est responsive lorsqu'il s'adapte aux différentes tailles d'écrans sur lesquels il est consulté : ordinateur, smartphone, tablette... Lorsqu'il est bien pensé, un design devrait permettre les mêmes fonctionnalités qu'on le consulte chez soi sur son ordinateur, ou dans le train sur son smartphone.

L'accessibilité dans le design produit est le fait de créer une expérience fonctionnelle pour un maximum d'utilisateurs. Cela veut dire rendre son produit utilisable aux personnes souffrant de handicaps (visuel, auditif, moteur...). Il existe un grand nombre de règles permettant de s'assurer que son produit est assez accessible : en France, le référentiel général d'amélioration de l'accessibilité (RGAA) détermine les règles pour vérifier la conformité d'une page web.

Un User Flow est une représentation visuelle du chemin que va parcourir un utilisateur sur un site ou une application pour réaliser une tâche spécifique. Cela permet à un designer de comprendre et d'anticiper le comportement des utilisateurs afin de concevoir un produit en accord avec ces comportements.

Un persona est une représentation d'un utilisateur d'un produit ou d'un service. Qui sont-ils ? Que veulent-ils ? Comment fonctionnent-ils ? Un même produit possède toujours plusieurs personas. Ces personas peuvent être basés sur des hypothèses, puis consolidés et affinés grâce à de la recherche et l'analyse de données.

Le handoff est la passation du travail de design aux développeurs qui vont développer le produit finalisé. C'est une phase capitale qui demande une bonne communication et collaboration pour s'assurer qu'un projet se passe bien !

Nous espérons que ces définitions - assez sommaires - pourront vous aider dans vos futurs projets à mieux comprendre et communiquer avec les designers et développeurs.

Vous l'attendiez ? Deuxième partie de notre glossaire des termes du Design Produit !

Hop ! Déjà la suite de notre glossaire des termes plus ou moins techniques utilisés dans le design produit. Que vous ayez déjà travaillé avec une agence, un freelance ou avec votre petit cousin qui commence tout juste ses études dans le digital, ces explications pourraient bien vous être utiles...

Glossaire des termes techniques du monde du design produit, partie 2

Le choix des technologies pour réaliser un projet est une étape essentielle à réaliser avant le lancement de ce dernier. Pour cela nous avons besoin de connaître plusieurs paramètres, d'un brainstorming avec la cheffe de projet et les designers et d'un café ou deux. (la pénurie de dosettes n’est pas permise ☕).

$parameters = Les paramètres à prendre en compte

Le triangle d’or est une méthode de gestion de projet web, qui s’applique à la perfection dans la réflexion du choix des technologiques à utiliser. On va prendre en compte trois éléments pour nous aider à faire notre choix :

En fonction du type de projet, (e-commerce, site vitrine, application web...), les contraintes ne seront pas les mêmes. Le client peut aussi ajouter des spécificités, comme l’accès à un back-office ou un site traduit en plusieurs langues. Il est capital d'anticiper tous ces éléments afin de choisir les technologies qui supporteront au mieux le projet, sa maintenabilité et ses évolutions futures.

Eh oui ! Il existe beaucoup de langages de développement et de technologies différentes, notre panel est large mais pas infini ! 😎 Si nous essayons toujours de choisir les technologies les plus adaptées à chaque type de projet, nous faisons aussi en fonction de nos compétences internes respectives. Et ça évolue vite, très vite même ! Nous nous tenons donc régulièrement à jour pour pouvoir travailler sur de nouvelles technos si nécessaire !

$launchAlgorythme = On mélange les paramètres et on choisit

⚠️ Attention, on commence à parler technique.

Les sites vitrines ont beaucoup de contraintes : ils sont souvent traduits en plusieurs langues, avec le besoin d’un back-office et une optimisation SEO poussée.

Nous avons donc le choix entre un site Wordpress, qui nous permettra d’intégrer directement le back-office, WPML pour la traduction et Yoast ou Rank Math pour le SEO, tout cela sur la base d’un thème sur mesure. L'autre option : un site utilisant un headless CMS comme Strapi pour l’API et le back-office ainsi qu’un front-end en Next ou Nuxt.

La complexité des applications web vient surtout du fait qu'elles sont réalisées sur-mesure pour chacun de nos clients et de leurs projets.

Nous partons systématiquement sur une API REST et un front basé sur un framework JS :

Pour l’API : API plateforme, Laravel, Slim ou Express JS

L’avantage d’une telle configuration ? Imaginons que vous ayez une application web et vous souhaiteriez une application mobile. Nous n'avons pas à tout refaire ! Nous avons déjà toute l’API (les données de l'application) et il ne nous reste plus qu’à développer l’interface mobile de l’application et le tour est joué ! Cela représente un gain de temps et une maintenance simplifiée.

C'est le type de projet le plus délicat. Chaque site e-commerce est différent de par ses spécificités. On parle d'une boutique de quelques produits à une boutique de milliers de références, de boutiques internationales traduites dans plusieurs langues, de contenus à optimiser fortement en SEO, et bien d'autres complexités !

C'est pour cela qu'en fonction du périmètre de chaque projet, les technologies utilisées pour le développement de chaque e-commerce peuvent varier, allant d'un site sur-mesure à une base CMS comme Wordpress.

La base du travail de notre agence repose sur l'expérience utilisateur. Chez nous, pas de thème réutilisable sur lequel on change simplement les couleurs et le logo. Tout est fait sur-mesure pour chacun de nos client, à partir d'un travail de réflexion et de conception en amont du développement.

A partir des maquettes réalisées pour un projet, nous utilisons systématiquement pour leur intégration le préprocesseur SCSS, compilé avec du Gulp ou Webpack. Une grosse phase de recettage est également réalisée conjointement par les équipes créatives et techniques en fin de projet pour s'assurer que le rendu final soit bien conforme à ce qui était défini.

Les technologies que nous utilisons nous permettent de répondre aux besoins d’un grand nombre de projets. Si nous n'avons pas de grille fixe classant automatiquement les projets dans des technologies pré-définies, nous nous basons sur notre expérience et nos acquis pour choisir au cas par cas les meilleures technologies pour chaque projet !

L'objectif final est toujours le même : développer un site de manière efficace, qu'il soit performant, sécurisé, facile à maintenir et à gérer au quotidien. Et surtout, qu'il propose une chouette expérience aux utilisateurs. 😊

Chaque projet dispose de ses challenges et contraintes : comment fait-on pour pour choisir les technologies les plus adaptées ?

Comment choisit-on les meilleures technologies web pour votre projet ?

Under the hood: quelles technologies pour votre projet ?

Under the hood: quelles technos pour votre projet ?

Si vous avez déjà travaillé avec nous, ou avec n'importe quelle autre agence, freelance ou même millenial (✌️), vous avez surement déjà entendu des termes qui ne vous étaient pas familiers. Et dans le domaine du web peut être plus qu'ailleurs, anglicismes et technicalités sont plutôt très courants.

Voici donc quelques uns des termes que l'on utilise beaucoup dans nos projets pour vous aider à vous y retrouver.

Allez, on commence simple. L'interface est ce qui permet à vos utilisateurs d'interagir avec le produit. Elle peut être matériel comme logiciel : l'écran d'un smartphone est l'interface qui permet d'interagir avec les applications.

Correspond à l'expérience qu'un utilisateur va avoir avec un produit, de A à Z. Un UX Designer va donc effectuer des recherches, organiser des ateliers de conception et travailler sur la structure du produit et les parcours utilisateurs. Son travail est ensuite utilisé durant toute la vie d'un projet. On vous conseille les articles de notre UX Designer Romain pour aller plus loin.

L'UI ou "User Interface" est la spécialisation du design qui va s'intéresser à la conception et à la création de l'interface. De la structure générale au choix des couleurs et typographies jusqu'au design des composants (boutons, formulaires, tableaux...), l'UI Designer est responsable de l'expérience visuelle que va avoir l'utilisateur avec le produit. La manière dont un produit a été conçu va déterminer la manière dont les utilisateurs vont interagir avec.

Capacité d'un composant d'interface de suggérer à l'utilisateur sa fonction. Par exemple : un bouton doit être conçu de manière à ce que l'utilisateur sache l'action qui va être effectuée avant même d'avoir cliqué dessus.

Ensemble d'inspirations visuelles permettant de créer une ambiance, une piste visuelle. Le moodboard est souvent représenté sous la forme d'une planche sur laquelle on peut retrouver des images, des couleurs, des exemples de sites ou de typographie, de composants d'interface... Ceci afin d'avoir une image globale de la direction vers laquelle on souhaite se diriger afin de définir une direction artistique.

La direction artistique est le fil conducteur qu'un designer va suivre dans la création d'un produit. Elle peut être définie par une charte graphique, ou par un ensemble de règles et une ambiance générale déterminée grâce à un moodboard. Le but est d'avoir une cohérence visuelle sur l'ensemble du produit. Couleurs, typographie, imagerie... On parle ici de tous les éléments qui rentrent en compte dans la création de l'interface.

Lorsque l'on construit une maison, on commence par le plan. C'est la même chose avec un site internet ou une application ! Les wireframes sont des maquettes pouvant être digitales ou sur papier, figurant un niveau de détails plus ou moins élevé et se concentrant sur la structure générale des pages, la hiérarchie des informations et les interactions entre les différentes vues.

Version démo d'un produit conçue pour le tester. Un prototype peut être créé tout au long de la vie d'un produit, dès l'étape de wireframes ! Il permet de tester la structure générale, la navigation et les interactions et bien d'autres aspects. Il peut même être confronté à des utilisateurs réels pour identifier rapidement les forces et faiblesses du produit afin d'itérer et de rester agile. Envie d'en savoir plus ? Ça tombe bien, on a écrit un article sur comment on prototypes nos produits chez Uxer.

Version d'un produit avec les fonctionnalités essentielles et développé avec un minimum de ressources. Développer un MVP permet de faire tester le produit et d'obtenir des retours utilisateurs permettant aux designers et aux développeurs de l'améliorer.

Période courte durant laquelle designers et développeurs travaillent sur des livrables précis. Chez Uxer, nous travaillons sur des sprints de 2 semaines, ce qui nous permet de livrer régulièrement des lots d'un produit et de rester agile. Notre directrice d'agence Claire a d'ailleurs écrit un article détaillant comment ça fonctionne en détails, et il paraît qu'il est vraiment pas mal 👌.

On va s'arrêter là pour aujourd'hui, mais il y a encore un paquet de termes à expliquer et le monde du digital évolue tout les jours. On vous retrouvera donc dans une partie 2 ! 👋

On utilise souvent des termes techniques, et c'est pas toujours clair pour tout le monde. On corrige ça !

Glossaire des termes techniques du monde du design produit

Design, code & vied’une agence bordelaise