Webdesign et ergonomie d'un site internet

L'étape du maquettage graphique

La réalisation des maquettes graphiques en phase avant-vente est toujours un exercice délicat et souvent peu pertinent car l'appréciation d'une charte graphique contient toujours une part de subjectivité difficile à cerner et se doit d'être le résultat d'une réflexion stratégique et de maquettes fonctionnelles réflechies, et pas uniquement un "jet de graphiste". C'est pourquoi, nous préférons généralement mettre en œuvre une méthodologie dite « itérative », permettant d'aboutir étape par étape à la charte graphique définitive.

Le brief créatif webdesign

C'est le point de départ. Il s'agit de prendre en compte l'identité visuelle, la charte existante, les valeurs ou le positionnement marketing, les publics cibles... dans le cas d'un travail en collaboration avec une agence de communication, ces aspetcs sont souvent pris en compte par l'agence.

Le maquettage fonctionnel

Sur la base d'une arborescence des contenus définissant les principales rubriques du site, le chef de projet conçoit avec le client, l'agencement de ceux-ci sur la page d'accueil et les pages types internes (gabarits de pages), en vue de valider les principales entrées du site, le parcours de l'utilisateur et de disposer de maquettes fonctionnelles réfléchies avant d'entreprendre le maquettage graphique.

Les intentions graphiques

L'interprétation du brief graphique peut revêtir plusieurs rendus graphiques, aussi nous proposons souvent plusieurs pistes d'intention graphique. Après échanges et prise en compte des retours client, une maquette plus élaborée est proposée. C'est sur la base de cette maquette qu'un travail d'optimisation avec itérations successives est réalisé pour la page d'accueil et les pages types.

Sans être mise en oeuvre stricto sensu, l'approche créative s'inspire de la tendance "Atomic Design" pour assurer le maximum de cohérence entre les différents objets graphiques et les interactions qu'ils proposent aux uitilisateurs. En partant des éléments les plus petits d'une page ou d'un écran, on créé une bibliothèque d' "atomes" l'élément le plus petit. Celui peut être composé, il devient alors une "molécule" et ainsi de suite pour composer des "organismes" -plusieurs molécules- et des "templates" ou gabarits de pages internet qui vont répondre au parcours utilisateurs. Cette approche conceptuelle garantie le maximum d'homogénéité et la meilleure adaptation possible aux différents supports de navigation : ordinateur, tablettes, mobiles et selon leur résolution d'affichage (RWD / PWA).

Une fois la maquette validée, c'est l'heure du développement du site internet ou du site intranet, effectué dans le respect des normes W3C des feuilles de style.

Une ergonomie de navigation web au service des utilisateurs

Les utilisateurs finaux sont au centre de nos préoccupations. Du niveau de confort en terme de navigation -fluidité, capacité à comprendre et à utiliser le site- dépendra la sensation d'un site réussi dont les objectifs d'audience et de réponse aux attentes seront atteints.

Les processus de navigation doivent être intuitifs, en s'appuyant à la fois sur des repères, des habitudes ou des standards de navigation connus de tous, cela n'empêche par pour autant l'imagination, l'innovation, et la créativité. Les choix graphiques effectués ne doivent pas non plus transformer l'exploitation des sites au quotidien en un calvaire pour les webmasters en charge des mises à jour.

Pour Versio, la navigation et le graphisme doivent être au service des contenus, des services ou fonctionnalités proposés, c'est pourquoi de leur organisation dépend aussi pour beaucoup cette fluidité intuitive, qui est recherchée par nos équipes.

Les étapes de la création graphique

• Rubriquage et arborescence générale
• Parcours utilisateur et maquettage fonctionnel des pages
• Brief créatif et graphique
• Intentions graphiques et optimisations itératives
• Design et maquettage Html des pages gabarits (page d'accueil et pages internes)
• Validation des maquettes Html en ligne
• Tests de compatibilité des navigateurs
• Intégration des contenus types

Les facteurs clés de la réussite

• navigation intuitive (fluidité et points de repères)
• ergonomie des fonctions (logique de fonctionnement, nombre de clics)
• rapidité d'affichage (poids des pages, traitement des process simple)
• stabilité (compatibilité logiciels et matériels)
• homogénéité et lisibilité des pages (ligne éditoriale, organisation des pages)
• privilégier l'accès par le contenu : format des textes -écrire pour son lecteur- et utilisation à bon escient des illustrations et des contenus multimédia -optimisation du poids-.
• respect des recommandations du Web Accessibility Initiative (W3C/WAI)

Faire simple et pratique

L'intuition doit être au centre des modalités de navigation en exploitant les moyens de déplacement et d'orientation :

• la barre de navigation (menus rubriques et sous-rubriques)
• les liens et boutons (identification)
• les codes couleurs (logique de la structure visuelle)
• les polices des titres (règles typographiques strictes)
• la barre de progression et chemin de navigation (pour se repérer en permanence)
• les blocs de liens du type « sur le même sujet » pour une navigation contextuelle