Le design de votre site répond-t-il au confort de vos utilisateurs ?

Que préférez-vous : manger dans un restaurant gastronomique avec des serveurs vous insultant ou dans un restaurant très accueillant, avec un service extraordinaire, mais servant des repas ignobles ?

Mieux vaut un restaurant gastronomique très accueillant n’est ce pas ?

C’est la même chose avec un site internet : un contenu sans le design peut-être une aussi mauvaise expérience qu’un beau site vide.

Voyons à travers l’analyse du site Microsoft PME France les bonnes (et moins bonnes) pratiques en matière de design de site internet.

NB : cet article est proposé par Cédric Debacq, graphiste et photographe professionnel 

Le design pour le confort de vos utilisateurs

Le développement du design d’un site internet est réalisé de manière à placer au centre les utilisateurs de celui-ci.

Tout d’abord, il doit considérer tout au long du processus leurs besoins, leurs exigences et leurs conforts. « Un utilisateur heureux est un utilisateur fidèle ».

En d’autres termes, il faut proposer un design accueillant, simple et original auprès de votre audience, ce sera un atout considérable pour la longévité de votre site internet.

La communication doit également prendre sa part dans cette étape. Même si vous avez le plus beau site du monde, une communication médiocre ne facilitera pas la lecture de vos utilisateurs.

Analysons le design du site Microsoft PME France.

Bon choix !

Au premier regard, le design du site est réalisé sur un fond épuré et cadré afin de permettre au lecteur de ne pas être distrait par des éléments superflus.

Pour favoriser cette action, Microsoft a choisi d’utiliser le Flat Design.

Qu’est-ce que le Flat Design ?

Le Flat design est un style graphique qui a pour but de ne garder que l’essentiel de l’aspect graphique, sans y ajouter des éléments comme des textures, des ombres, etc.

Cette technique se construit autour de couleur unie et associée à une typographie pour structurer le contenu.

Le Flat design correspond parfaitement aux utilisateurs et aux webdesigners qui apprécient le minimalisme.

En utilisant le Flat design associé au design responsive (voir ci-dessous), l’accessibilité web, à l’expérience utilisateur et à l’ergonomie seront adaptées à tous les écrans afin d’apporter un meilleur confort au lecteur. 

Voici quelques exemples de Flat design :

 

Analysons le Design Responsive du site Microsoft PME France.

A améliorer

Cependant le site de Microsoft PME France n’a pas pris en compte cet aspect. Comme actuellement le site n’est pas en Design Responsive, il n’est pas adapté à tous les écrans.

Alors que le blogs.microsoft.fr/pme/ lui est adapté aux Smartphones, aux tablettes et aux ordinateurs de bureau.

Qu’est-ce que le Design Responsive ?

15% du trafic internet mondial en 2013 provient des supports mobiles et cette évolution pourrait atteindre 24% en 2014. Source : du cabinet KleinerPerkinsCaufield&Byers

http://www.kpcb.com/insights/2013-internet-trends

De nos jours, il existe différentes manières de visiter un site Internet. Nous pouvons le faire avec n’importe quel type d’écran du plus petit au plus grand. (En tant que graphiste designer, j’ai hâte de voir un site web affiché sur un écran de cinéma.)

Le Design Responsive est la technique qui permet à un site d’être diffusé sur l’ensemble de ces canaux et de mettre en évidence les éléments pertinents aux utilisateurs mobiles.

Il permet également de garder l’ergonomie optimale et de préserver la qualité de l’information d’un site Internet.

Analysons l’ergonomie du site Microsoft PME France.

Bien vu !

Pour continuer cette analyse graphique, la mise en avant des visuels sur le slide permet de transmettre facilement les différents messages et de donner un accès facile à l’information pour l’utilisateur.

Suggestion

En revanche, le sous-menu cache ces informations importantes et le bouton « fier d’entreprendre ». Il serait intéressant de positionner le bouton à la suite des autres onglets, de même pour le sous-menu quand il est actif, le slide devrait descendre afin de  ne pas être caché par celui-ci.

Au sujet de l’espace vide dans la colonne de droite, elle peut distraire le regard du lecteur. C’est comme dans une conversation ou lors d’une conférence, les longs silences peuvent mettre à mal la relation que vous avez avec l’autre personne ou bien avec votre public.

Pour améliorer le design du site de Microsoft PME, les éléments « produits, téléchargements et versions d’évaluation » pourraient être placés à cet endroit enfin d’occuper cet espace vide.

Qu’est-ce que l’ergonomie d’un site internet ?

L’ergonomie d’un site internet doit répondre en premier aux besoins de  l’utilisateur lambda. C’est-à-dire être le plus simple du monde dans son utilisation et sa navigation.

Même un enfant de 5 ans ou une personne du 3^e âge doit arriver à naviguer très facilement sur votre site Internet ou votre blog.

On considère l’ergonomie d’un site internet comme une discipline. Elle doit prendre en compte le contexte du site, sa stratégie et les utilisateurs qui le visitent.

Analysons les couleurs du site Microsoft PME France.

Bon choix

Microsoft PME France a choisi le bleu comme couleur dominante pour son design, cela permet d’apporter de la confiance aux lecteurs et engage Microsoft à apporter du contenu de qualité.

L’importance du choix des couleurs pour un site Internet.

Lorsqu’on se lance dans la conception d’un site Internet ou d’un blog, le design, le choix des couleurs doit résonner auprès de vos utilisateurs.

Ce choix est à prendre en compte avant même sa mise en ligne, car les couleurs vont susciter différentes émotions auprès de votre audience.

Choisir de bonnes couleurs est un atout qui aura de l’influence sur un acte d’achat comme cela va permettre à vos utilisateurs de mémoriser votre site Internet.

Les couleurs émotions et sensations :

La couleur bleue apporte le calme et la sérénité. Elle est considérée comme la couleur favorite des hommes.

Le blanc apporte sa pureté et son innocence et permet de mettre l’accent sur la couleur dominante, c’est-à-dire la couleur bleue pour le site Microsoft.

La couleur rose s’associe à la jeunesse, à l’amour, au bien être.

Analysons le côté humain « social » du site Microsoft PME France.

Bon choix

Pour terminer cette analyse, le site apporte un accès simplifié aux différents articles de son blog « Le blog des entrepreneurs ».

Une présence humaine est mise à disposition grâce au bouton pour chatter avec un conseiller. On peut observer également la présence des différents boutons des réseaux sociaux de la marque avec le nombre d’abonnés visible en bas du site (le chiffre des abonnés pour twitter n’est pas visible au moment où je rédige cette chronique).

Ce qu’on peut retenir ?

Les bonnes pratiques :

• Le design de votre site internet doit être pris en compte lors de l’élaboration du cahier des charges du site.
• Obtenez des retours auprès de vos contacts, de vos lecteurs pour leur apporter un design qui correspond à leurs attentes.
• Adaptez le design de votre site internet aux nouvelles technologies (responsive design).
• Utilisez les couleurs en adéquation avec les émotions de votre audience.

Les erreurs à éviter :

• Ne proposez pas un design qui ne correspond pas aux attentes de votre audience,
• N’utilisez pas des couleurs trop agressives (flashy) ou qu’ils s’associent pas correctement,
• Ne surchargez pas votre design avec en utilisant trop de couleurs, trop d’éléments graphiques.
• Ne négligez pas l’ergonomie de votre site internet,

Mon avis général sur le site :

Le site de Microsoft PME répond au confort des utilisateurs, en proposant un design épuré et structuré en utilisant les couleurs comme le blanc, le bleu, le rose et le noir, l’aspect graphique ne distrait pas la lecture du contenu du site internet.

Il serait intéressant que l’ensemble du site adopte le responsive design comme le blog, cela permettrait aux lecteurs (mobinautes) de naviguer entre le blog et le site depuis leurs Smartphones et leurs tablettes.

Pour développer l’aspect social et humain du site Microsoft PME, l’onglet « fier d’entreprendre » pourrait être mis en évidence, ce qui inviterait les lecteurs à cliquer sur celui-ci.

Pour finir, la mise en avant des messages transmis à l’aide des visuels du silde permet un meilleur ciblage de l’information pour le lecteur tout en respectant le design du site et le confort de ses utilisateurs.