10 éléments de webdesign à ne pas négliger

Publié le 29.03.2011 - Classé dans Blog, Boulot, Design

La différence entre un site « joli » et un site « sublime » tient souvent à quelques éléments de détails, parfois mis de côté lors du processus de design car ils ne modifient pas significativement l’allure générale du site.

Ces éléments devront être définis à un moment ou un autre : autant les prendre en compte dès le début de l’opération.

Pensés dans une optique non-seulement esthétique, mais aussi pratique et ergonomique, ces quelques détails rendront votre site plus facile à utiliser. Il est évidement préférable de confier cette réflexion au concepteur et au graphiste plutôt qu’à l’intégrateur ou au développeur, afin de conserver une cohérence avec le design global.

1.    Les liens

Définir l’apparence d’un lien dans ses différents états est une tâche basique, pourtant il est très fréquent que les détails soient négligés.

Les états suivants devraient tous être configurés :

  • Normal
    C’est l’apparence du lien par défaut, c’est-à-dire lorsqu’il n’a pas déjà été visité, qu’il n’est pas survolé par la souris ou qu’on n’est pas en train de le cliquer.
  • Visité
    C’est un lien qui n’est pas cliqué ni survolé mais qui a préalablement été visité par l’utilisateur
  • Actif
    C’est un lien sur lequel on est en train de cliquer. Quand rien n’est précisé, la plupart des développeurs utiliseront la même apparence que pour un lien survolé
  • Survolé
    C’est l’apparence du lien lorsqu’on le survole avec la souris. Celui-ci et l’état normal sont les deux seuls états auxquels la plupart des graphistes portent de l’attention

Ces quatre états doivent être prévus pour tous les liens, dans toutes les zones de votre site : les liens auront une apparence différente selon qu’ils se trouvent dans le menu de navigation, au sein du contenu ou dans le pied-de-page.

2.    Les formulaires

Les formulaires représentent souvent la seule véritable manière de convertir un visiteur en client. Sans une bonne conception, un formulaire peut facilement devenir trop complexe à utiliser, paralysant ainsi le point de conversion du site.

La préparation de ces éléments est essentielle, même si elle semble beaucoup moins pressante pour le client que les couleurs, les illustrations et l’aspect général du site.

Les deux éléments à prendre en compte principalement sont :

  • L’intitulé du formulaire
    Les formulaires recueillent généralement des données personnelles que les internautes sont réticents à divulguer. Il est sage d’informer précisément de l’utilisation qui en sera faite
  • Les champs et leurs intitulés
    Dans quel ordre les champs apparaîtront-ils ? Le formulaire devra-t-il être scindé en plusieurs parties ? Où se situent les intitulés par rapport aux champs ?

L’apparence par défaut des formulaires est généralement repoussante. Un minimum de préparation permettra une intégration impeccable au reste du site.

La conception des formulaires nous mène a des considérations plus larges.

3.    Le comportement des boutons

Les boutons peuvent être utilisés sur un site de bien des façons, mais eux aussi semblent souvent négligés dans leurs différents états.
Les quatre états d’un bouton sont :

  • Normal
    C’est l’apparence par défaut du bouton. La plupart des designers ne s’occupent que de celle-ci.
  • Survolé
    C’est l’apparence du bouton lorsqu’il est survolé par la souris. Il aide l’utilisateur à s’assurer qu’il s’agit bien d’un élément clicable.
  • Actif
    Au moment où l’utilisateur clique sur le bouton, cet état lui indique visuellement qu’il l’a bien cliqué.
  • Désactivé
    L’état désactivé d’un bouton est sans doute le moins utilisé, mais il peut être très utile aux développeurs. Il est rare que cet état soit prévu, à moins que le concepteur ait préparé un processus de validation du formulaire (voir la section suivante).

De la même manière que les liens, assurez-vous que ces quatre états soient configurés dans toutes les zones de votre site. Qu’il s’agisse d’un formulaire d’identification, de recherche, de contact ou d’inscription à une newsletter, chacun des boutons devra être pris en compte.

4.    La validation des formulaires

Rien n’est plus frustrant pour un internaute que de ne pas parvenir à valider un formulaire sans comprendre son erreur. Trois points essentiels sont donc à prendre en considération :

  • Les champs obligatoires
    Ils doivent être repérables au premier coup d’œil. Ils sont généralement signalés par une astérique, une aide visuelle supplémentaire est toujours la bienvenue (par exemple, un intitulé en gras, ou un encadré de couleur)
  • La validation en temps réel
    Certains champs peuvent être validés au fil de la saisie par l’utilisateur, de cette manière il sait immédiatement s’il a commis une erreur en insérant les données
  • La validation après soumission
    Les styles utilisés pour la validation en temps-réel sont généralement repris après soumission, il est judicieux de récapituler toutes les erreurs en un message au début du formulaire également.

5.    Les messages d’état : erreurs, avertissements, confirmations, etc.

Les utilisateurs attendent généralement un feed-back après avoir effectué une action sur un site. Le cas le plus fréquent est la soumission d’un formulaire mais il existe bien d’autres situations.

Réfléchissez bien à toutes les actions qu’un internaute peut effectuer sur votre site, et prévoyez les messages que vous devrez afficher en retour.

6.    Penser à toutes les tailles d’écrans

Le design d’un site est généralement inscrit dans une largeur de 960 pixels. Cela permet un affichage correct sur les écrans les plus petits. Cela facilite également la lecture des textes, dans l’idéal votre zone principale de contenus ne devrait pas excéder 600 pixels de large.

Les possesseurs de grands écrans s’en trouvent parfois pénalisés : si l’arrière-plan de votre site comporte des éléments complexes (dégradés, motifs, illustrations…), il faudra prévoir son affichage sur les écrans les plus larges.

Les smartphones, notebooks et autres tablettes tactiles sont à prendre en compte également.

7.    Les éléments HTML de base

Pour les sites riches en contenus, l’apparence des éléments HTML de base est fondamentale et ne devrait jamais être négligée. Sur les sites se distinguant plus par leur look que par leur contenu en revanche, ces éléments de base sont souvent oubliés, à tort.

Il est indispensable de prévoir l’apparence de tous les éléments suivants : les paragraphes, les titres de niveaux 1 à 6, les listes à puces et listes numérotées, les tableaux de données, les champs de formulaire, les images, le texte en gras et le texte en italique.

8.    Les e–mails envoyés par le site

Un élément aussi basique est facilement oublié car il ne fait pas partie du cœur du site. L’e-mail est pourtant un outil extrêmement puissant lorsqu’il s’agit de promouvoir ou d’étendre un service.

Commencez par identifier tous les e-mails qui seront générés par votre site. Les plus courants sont :

  • La confirmation d’inscription à une mailing-list ou une newsletter
  • La confirmation d’inscription en tant que membre
  • La confirmation de soumission de formulaire (de contact, par exemple)
  • La confirmation de commande après un achat

Si vous voulez époustoufler votre client et vos développeurs, préparez aussi un template d’e-mail marketing. Vous donnerez aux utilisateurs une transition parfaite entre votre site et leur boite de réception, et vous garderez le contrôle de l’image de marque dans ses déclinaisons.

9.    L’étirement des pages

Prévoir le comportement du design des pages en fonction de la nature du contenu est une étape souvent oubliée. Que se passera-t-il si le contenu est très long ? Si on y ajoute des images ?

Préparez des déclinaisons de vos pages dans différents scénarios, afin de ne rien laisser au hasard.

10.    Les animations : pop-ups, infobulles, transitions, etc.

Sur un site HTML et CSS standard (par exemple sans Flash), les transitions et animations sont facilement mises de côté. Et lorsqu’elles le sont, elles ne sont généralement pas appropriées.

Ainsi, si les animations sont essentielles, il vaut mieux fournir à votre développeur un échantillon de leur fonctionnement.

Les éléments à ne pas négliger sont :

  • Les infobulles
    Ces petits encadrés apparaissent au survol de certains éléments par la souris
  • Les diaporamas
    Il en existe une infinité avec un très large choix d’apparences et de transitions
  • Les lightbox
    C’est lorsque l’image est affichée en grand format par-dessus la page sur un fond généralement noir translucide. Il est possible de styler non seulement le fond et l’encadré mais aussi l’animation qui fait apparaître et disparaître cet affichage.

Chacun de ces éléments a une apparence distincte qu’il convient de personnaliser entièrement.

Pourquoi porter de l’attention à ces détails ?

Beaucoup des éléments ici présentés semblent plus utiles aux développeurs qu’aux internautes.

C’est partiellement vrai : si vous préparez tous ces éléments à l’avance, vos développeurs seront ravis. Ils sont généralement fatigués de devoir demander en cours d’intégration ou bien de devoir improviser.

En anticipant sur ces points de détails, vous ne laissez pas vos développeurs dans le brouillard et vous contrôlez le design du site dans son intégralité. Vous avez ainsi de plus grandes chances de pouvoir ajouter la petite touche qui transforme un site ordinaire en un site remarquable.

Et si ces raisons ne sont pas suffisamment motivantes, considérez aussi l’aspect financier. Un designer qui prévoit tous ces éléments à l’avance est fondamentalement plus rentable. Non seulement il livre un travail de qualité supérieure, mais en plus il diminue le coût du développement. Cela laisse plus de place aux profits, ce qui bien sûr satisfera tout le monde.

Traduction et adaptation de l’article « 10 web design elements that you shouldn’t overlook » par Patrick McNeil sur www.webdesignerdepot.com

 
 
 
 

Commentez ce billet