De l'importance de la planification d'un site web aux tendances de l'ergonomie web; l'objectif de cet article est de rassembler les idées à prendre en compte pour améliorer l'expérience utilisateur sur votre site web.
Pourquoi la conception d’un site est importante ?
La conception inclut la création d’un plan de l’architecture d’un site. L’architecture d’un site web, c’est-à-dire la manière dont les pages sont organisées et hiérarchisées, influe sur l’expérience utilisateur ainsi que sur le référencement naturel du site. Voici trois éléments de la conception d’un site.
Le type de site dont vous avez besoin
L’architecture d’un site web peut légèrement varier suivant le type de site que vous souhaitez mettre en place : un site d’informations, un site vitrine d’entreprise, un site de services, un site à vocation humanitaire, à but non lucratif ou associatif, un site e-commerce, …
En fonction de la typologie de votre site, sa conception prendra des orientations différentes.
La conception de la navigation
Planifiez les pages d'un site et développez une structure de navigation à partir de là. Structurez et hiérarchisez les éléments, puis répartissez les informations par champ sémantique.
Le contenu du site
Les informations contenues sur un site, c’est à la fois du texte, des images, des vidéos, microcopies et plus encore. Avant de commencer à construire des pages, vous devriez avoir clairement défini le contenu de ces pages. Par exemple, pour une page produit, la description du produit peut inclure des titres, des commentaires, des avantages, des FAQ.
Un des exemples de page produit trouvés sur le blog Hubspot. Nous pouvons trouver des informations sur les ingrédients, les bénéfices et le score global
Les tendances en matière d’architecture de l’information
Qu’est-ce que l’architecture de l’information ?
L’architecture de l’information traite de la conception structurelle des sites Web, mais aussi des applications et des bases de données. Les architectes de l’information classent l’information d’un site Web en unités sémantiques qui sont aussi intuitives que possible.
Les 4 tendances de l’architecture de l’information
La découverte optimisée de contenus
Les utilisateurs aiment découvrir des contenus faciles à comprendre et prévisibles.
En utilisant le Big Data pour analyser les flux d’utilisateurs et leur parcours de navigation pour découvrir de nouveaux contenus, vous pouvez prendre des décisions prédictives sur la façon dont les internautes trouvent et utilisent les contenus. Voici quelques exemples d’actions:
- Optimiser l’autocomplétion afin de proposer des suggestions de requêtes au fur et mesure de la saisie de l’internaute.
Auto-complétion sur le site e-commerce
- Offrir des options plus pertinentes pour choisir entre la recherche (avec un search box) et la navigation.
Un exemple de différent types de navigation en relation avec l'intention de e l'utilisateur (source: Crazy Egg)
Les commandes vocales
Avec le développement des assistants personnels intelligents tels que Siri ou Alexa, l’architecture de l’information sera de plus en plus axée sur une interface non visuelle. Ce type d’architecture repose sur la sémantique conversationnelle plutôt que sur de simples recherches par mots-clés, ou encore sur une navigation de type « pointez et cliquez ». Ainsi, de nouveaux besoins liés aux commandes vocales vont très certainement orienter l’architecture des sites et des web apps :
-
Recherches de données
-
Découverte musicale
-
Aide d’orientation
-
Utilisation dans un véhicule
La réalité augmentée
L’information que nous consommons ne se limite plus aux seuls écrans dont nous disposons. Avec la réalité augmentée, c’est tout notre environnement qui peut être pris en compte dans le contenu qui nous est proposé. Sur les appareils mobiles, la réalité augmentée est particulièrement attractive car elle facilite la navigation vers des informations locales pertinentes (ex : pour rechercher un restaurant local). Les concepteurs de sites ont donc tout intérêt à tenir compte de ces attentes pour prédire l’intention des utilisateurs et effectuer facilement des sondages.
Application MeilleursAgents en réalité virtuelle (source : solutions-numeriques.com)
L’augmentation du nombre de visiteurs connectés ou « piégeage de visiteurs »
Le web regorge de contenus et de visiteurs qui les cherchent. Ces éléments ont malheureusement encouragé une pratique visant à « piéger » l’utilisateur pour le maintenir plus longtemps que prévu sur un site. Il va sans dire qu’avec ce type de pratique, l’expérience utilisateur n’est guère améliorée, en revanche, ces visites peuvent aider les sites à mieux se classer sur Google. Parmi les méthodes de piégeage, on peut citer :
-
Rendre l’emplacement du contenu désiré moins évident à trouver (comme, par exemple, la clôture d'un compte)
-
Utiliser des chemins non linéaires vers le contenu visé
-
Morceler le contenu visé à l’aide de boutons « suivants »
Les tendances en matière de navigation sur un site web
Les méga-menus
Les méga-menus sont de plus en plus populaires sur les sites Web ; ils sont différents des menus déroulants qui sont plus répandus mais aussi bien souvent ennuyeux. Ainsi, au lieu de descendre le long d'une ligne verticale, les méga-menus s'élargissent et contiennent plusieurs colonnes de contenu. Ce type de menu est particulièrement utile si votre site contient beaucoup de contenus reliés entre eux.
Mega menu sur le site sephora.com
La navigation réactive
Les sous-menus de navigation réactifs sont également essentiels pour les sites comportant de nombreuses pages. Les concepteurs masquent souvent certains liens de navigation sur les plateformes mobiles, afin de mieux adapter le menu sur les petits écrans.
La navigation sur une seule page
De nombreux sites, et plus particulièrement ceux qui ont peu de contenus à présenter, s’affichent sur une seule page avec des points d’ancrage. Il suffit de cliquer sur un élément du menu pour voir la page défiler automatiquement vers la section correspondante.
Ces sites « one-page » contiennent souvent des barres de navigation collantes mais aussi une navigation par points (à l’aide d’icône circulaires situées à gauche ou à droite de l’écran), ce qui contribue à améliorer leur aspect naturel.
Les tendances en matière de webdesign
Mobile first et PWA
Avec l’arrivée de l’indexation « Mobile-first » en 2018, Google a créé un terrain favorable pour le développement des applications Web progressives.
Ces dernières combinent les meilleures fonctionnalités des sites web et des applications mobiles.
Les applications Web progressives permettent aux développeurs et aux concepteurs de créer des applications basées sur des technologies web typiques d'applications natives avec la barre de navigation plein écran et personnalisée, les mises à jour automatiques, les transitions entre les sections sans charger d'autres URL, l'icône d'accès sur l'écran d'accueil ainsi que la possibilité de travailler hors ligne et recevoir des notifications.
Animations : Microinteractions et mini-jeux
Les animations permettent de communiquer de manière plus ludique. Cela peut se traduire par des microinteractions animées ou des mini-jeux qui rendent le temps d’attente plus agréable.
Vois trouverez ici, quelques exemples d’animations et de microinteractions.
Grands paragraphes décorés et augmentés, Écriture UX, Microcopie & Personnalité de marque
Fini les paragraphes sous formes de colonnes ou de formes géométriques statiques, désormais les grands paragraphes ont la part belle et comportent de nombreux survols, images, emojis, changements de style et des microinteractions. Les contenus sont plus grands et les polices et styles décoratifs se combinent pour une présentation originale qui signe véritablement l’identité de marque de l’entreprise.
Les microcopies qui étaient auparavant invisibles, sont à présent dotées d’une voix et d’un ton spécialement conçus pour la marque en vue de maintenir une cohérence de style tout au long de l’expérience utilisateur.
Microcopie : "Add to Chrome, it's free" (source: econsultancy.com)
Interfaces de commande vocale
Les interfaces voix-commande ou les dispositifs conversationnels sont pertinents parce qu'ils réduisent le temps et l'effort de l'interaction. Grâce à la commande vocale, l’internaute peut se connecter à une plateforme, ce qui lui évite d'avoir à mémoriser et à taper des mots de passe, à naviguer dans l'application, à comprendre son interface, sa structure de contenu, etc, il pourra bientôt configurer des centaines d'actions et utiliser un simple mot comme déclencheur.
Recherche visuelle
Désormais, la caméra est la nouvelle boîte de recherche. Le premier à avoir utilisé la recherche visuelle est Amazon qui avait introduit en 2014 la fonction Flow à son site, utilisant la reconnaissance d’images pour rechercher des produits. Cette fonction n’est plus actives mais de nombreuses autres applications ont pris le relais en intégrant un système de recherche visuelle : Snapchat, Pinterest Lens, AliExpress, Google Lens.
Conclusion
La création d’un site internet ne peut se faire sans tenir compte des évolutions en termes d’architecture de l’information, de web navigation ou encore de web design. Ces tendances montrent combien les avancées technologiques combinées aux exigences de Google en termes d’UX encouragent la création de sites à la fois bien organisés, esthétiques et comportant de multiples interactions.
Toutes ces tendances sont très attirantes car elles font la part belle à l’interactivité et à une meilleure navigabilité. Cependant, soyez attentifs à ne pas trop en faire et à vérifier que tout fonctionne parfaitement d’un point de vue technique. Les bugs à répétition sont particulièrement rédhibitoires pour les internautes.