Web Design
> > Web Design

Design Web et ergonomie d'un site web

Notre conception du Design Web

Au-delà de la qualité des développements informatiques et des fonctionnalités d'une application orientée Web (Internet / Extranet / Intranet), le rendu de cette application au travers du navigateur est fondamental. Outre l'attrait graphique du site, les principes de navigation influent sur la relation créée entre l'interface écran et les utilisateurs. C'est pourquoi nous intégrons très en amont la réflexion autour du design, de l'ergonomie, et du processus de création graphique.

L'étape du maquettage graphique

La réalisation de 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

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 pris en compte par l'agence.

Story-board et 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 (story-board et gabarits de pages), en vue de valider les principales entrées du site, 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 sera réalisé pour la page d'accueil et les pages types.

Une fois la maquette validée, le déploiement Html de la page d'accueil et des gabarits des pages intérieures, pourra être effectué dans le respect des normes W3C des feuilles de style.

Une ergonomie 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ées, 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
  • Story-board 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 :

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