Boostez l’efficacité de votre site avec les règles de Web Design !

 

Word cloud - web design

Le saviez-vous ?

  • En moyenne, on met 25% de temps supplémentaire pour lire sur un écran que sur papier. Ce fait peut s’expliquer par la taille de l’écran, la qualité, la résolution…
  • LA LECTURE DES LETTRES EN CAPITALES SE FAIT A UNE VITESSE INFERIEURE DE 10%
  • 8 secondes est le temps moyen nécessaire pour qu’un internaute décide de rester sur votre site
  • Seul 22 % des internautes scrollent instinctivement jusqu’en bas de la page internet. Il est donc primordial de respecter la ligne de flottaison
  • Sur papier, nos yeux suivent un schéma en forme de Z, alors que sur un ordinateur, nos yeux auront tendance à effectuer un F

F

  1. Première barre horizontale
  2. Deuxième barre horizontale
  3. Barre verticale

Toutes ces informations permettent de définir des zones de priorité dans le but de capter l’attention de l’internaute d’un simple coup d’œil. Voici un schéma identifiants ces zones, celles où les informations les plus importantes doivent se trouver :

Priorité

Il est ainsi possible de déterminer quelques règles simples pour augmenter l’efficacité de votre site internet.

S’adapter au support

Il est important de penser à un site responsive. C’est-à-dire que le contenu du site internet va automatiquement s’adapter au support (PC, Smartphones, tablettes…). Il est possible de vérifier cette convergence Web vers Mobile via certains outils : http://responsivetest.net. Une autre alternative est aussi possible, en passant directement par une application mobile ou un site web développé pour les mobiles.

L’adaptation doit se faire à deux niveaux :

  • Au niveau technique, comprenant les contraintes de poids lié au débit, de taille d’écran, de navigation…
  • Au niveau des fonctionnalités, le mobile est par définition mobile. Il faut ainsi intégrer le fait de la géolocalisation.

Respecter les lois de Gestalt

Les lois de Gestalt désignent « la forme » en Allemand, et définissent les principes de la perception. « Le cerveau va chercher à mettre en forme, à donner une structure signifiante à ce qu’il perçoit, afin de le simplifier et de l’organiser ».

  • Loi de proximité : on regroupe les points les plus proches les uns des autres
  • Loi de similitude : on s’attache à repérer les plus similaire entre eux pour percevoir une forme (ex : des zones ayant des fonctions ou une importance similaire devront avoir un aspect graphique similaire)
  • Loi de clôture : une forme fermée est plus facilement identifiée comme une figure (ou comme une forme) qu’une forme
  • Loi de symétrie : les éléments disposés symétriquement sont perçus comme appartenant à une même figure

Lois2Lois1


Respecter l’affordance des objets

L’affordance est la capacité d’un système ou d’un produit à susciter sa propre utilisation. En web design, elle se porte sur la taille, la localisation, la forme, les libellés et la convention.

Seriez-vous tentées de cliquer sur un bouton énorme en forme de triangle en haut à gauche de votre écran pour fermer une page internet ? Certainement pas, tout simplement car on ne comprendrait pas à quoi il sert. Généralement, pour fermer une page internet, on se dirige directement vers la croix en haut à droite de son écran. C’est exactement la même chose pour tous les boutons qui se trouvent sur votre site internet. L’internaute doit instinctivement comprendre à quoi correspond ce bouton et surtout si c’en est un.

Pour aller encore plus loin, consultez notre article sur l’importance des contenus : Mieux vendre avec un bon contenu

Sources :
http://blog.clicktale.com/2006/12/23/unfolding-the-fold/
MarketingSherpa, Landing Page Handbook 2005

Publicités

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