Les chartes graphiques sont la clé de la réussite des sites web (1/2).

La charte graphique est l’un des éléments essentiels pour la réussite des projets informatique de construction de site web. Elle doit être agréable à voir, ergonomique, avec des couleurs, des polices de caractère lisibles et un côté moderne à la sauce web 2.0.

Les utilisateurs finaux sont devenus friands de nouvelles expériences ergonomiques, de petits artefacts, de gadgets et de raccourcis proches de leurs préoccupations de tous les jours. Un utilisateur souhaite pouvoir effectuer des opérations simples sans avoir à traverser de nombreux écrans, à cliquer sur de nombreux boutons. Le souci de l’ergonomie, de la convivialité et de l’intuitivité est né sur le PC,  et se retrouve de plus en plus sur les smartphones, et sur les tablettes.

Avant toutes choses, le site web doit répondre aux besoins des utilisateurs, et être convivial.

L’utilisateur souhaite un coté je modifie ce que je vois (What you see is what you get). Le wysiwyg est une interface utilisateur qui permet de composer visuellement le résultat voulu. Dans cette interface « intuitive », l’utilisateur voit directement à l’écran à quoi ressemblera le résultat final. La charte graphique, c’est le coté visuel du site web.

Le web 2.0

Le web 2.0 a popularisé les interactions intelligentes et intuitives entre l’humain et la machine. C’est l’émergence de l’animation, du web dynamique sur les pages HTML. Les sites web sont devenus moins statiques, plus interactifs. Cette magie est liée à l’utilisation de petits programmes écrits en langage Javascript et à l’utilisation des chartes graphiques, des signalétiques visuelles. Le web 2.0 apporte des nouveaux mécanismes de communication entre l’utilisateur et la machine. Le plus populaire est nommé Ajax. Il permet à l’utilisateur de rester sur sa page web et de recevoir et d’émettre des flux de données. C’est une petite révolution dans le monde des sites web.

L’expérience web 2.0 est quelque chose de difficile à construire, qui demande une bonne alchimie entre le visuel (la charte graphique), l’animation coté client (les programmes JavaScript) et les interactions avec le serveur (les traitements lourds informatiques).

Le futur ?

Au delà du web 2.0, on commence à voir grandir le web social, les web auteurs et un ensemble de nouveaux outils de consommation et de production de l’information. Il y a 10 ans, les utilisateurs produisaient  des fichiers word,  des fichiers excel. De nos jours, le document devient une page web modifiable, on peut ajouter des notes, des commentaires et publier le résultat final. L’information n’est plus au fin fond d’un répertoire, elle est devenue consultable. L’interactivité, le partage de l’information est l’élément central dans la création et la production de contenu. Cet ensemble d’échanges est la source de la valeur ajoutée de demain pour l’entreprise. Les utilisateurs font partie d’une ou plusieurs communautés, ils échangent des informations utiles au sein d’une communauté.

C’est quoi une charte graphique ?

Les chartes graphiques sont composées de feuille de style CSS (Cascading Style Sheets). Dans  les feuilles de style, on défini l’aspect futur du site web, comme par exemple la couleur du fond de la page ou le type de police. On défini également l’ergonomie générale du site, le positionnement des éléments graphiques, par exemple un « menu », les onglets, les bandeaux, les messages d’alertes.

L’utilisation de chartes graphique permet de garantir l’homogénéité de tout le site web. Tous les tableaux sont identiques visuellement, tous les bandeaux ont la même taille, les boutons ont la même couleur, etc. La qualité du site web, est liée à la perception de l’utilisateur, à la lisibilité des écrans, et aux cotés professionnels et finis des écrans. C’est un vrai savoir faire. Un écran simple, peut cacher des traitements complexes du coté du serveur.

La conception d’un site web

La conception d’une maquette, ne présume pas de la complexité des traitements nécessaires pour le bon fonctionnement d’un site web. Par exemple, un site de commerce électronique, une boutique en ligne, présente une liste de produits. Le ressenti de l’utilisateur, c’est une simple liste de produits, c’est la partie visible. Du coté serveur, la partie cachée, le programme informatique va interroger diverses bases de données, la base des produits, la base de données des prix, l’état du stock, etc. Le traitement va collecter des informations sur le client, sur ses goûts, sur son profil, il va peut être communiquer avec la gestion des approvisionnements, avec une base de connaissance, etc. Un site web est un iceberg.

Le travail d’un concepteur de site web,  du designer, d’un graphiste est de concevoir une charte graphique, une identité visuelle pour l’entreprise, une expérience utilisateur. Il doit réfléchir aux usages (Pc, Smartphone, tablette), coller au plus près des besoins des utilisateurs, et penser évolutivité.

Pour le faire, il dispose de 2 solutions:

  • créer une charte graphique depuis zéro, à partir de morceaux réutilisables.
  • utiliser des chartes graphiques présentes sur internet.

Les deux solutions présentent des avantages et des inconvénients, des notions de coûts.
La charte graphique est un maillon important dans la chaîne de création de valeur d’un site web. Nous avons évoqué les petits programmes en langage javascript, invisibles à l’œil nu, c’est eux qui animent, qui donnent vie à vos pages web. Lors de la conception ou du choix d’une charte graphique, il est important de penser en terme d’usage, en terme d’intégration et d’assemblage.

Derrière le choix d’une charte graphique, se cache la complexité des traitements et des interactions avec l’utilisateur. En fonction de la cible, simple site web, site de publication, site web 2.0, ou site web social ou communautaire se cache des enjeux forts. Le choix d’une charte graphique n’est pas anodin.

Dans la prochaine partie, je vais présenter le résultat de recherche sur les chartes graphiques.

A propos Duarte TERENCIO

Chef de projet et Architecte J2EE - Portail d'entreprise - Cloud computing Vous trouverez plus d'information sur la page "Me contacter"
Cet article, publié dans Programmation, Tutoriel, est tagué , , , , . Ajoutez ce permalien à vos favoris.

2 commentaires pour Les chartes graphiques sont la clé de la réussite des sites web (1/2).

  1. Ping : Les chartes graphiques sont la clé de la réussite des sites web (2/2). | Un regard sur le cloud

  2. Pour moi le web 2.0 est devenu un concept marketing, on met du 2.0 partout … Le web c’est le web ! Aujourd’hui, il a un idéal de collaborativité et d’échanges et demain ce sera certainement autre chose …

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s