Refonte d’un site internet

Je vous avais présenté son nouveau site il y a quelques semaines. Voici, plus en détails, le lifting réalisé sur le site de l’ostéopathe Thomas Mathieux. Au programme, un site plus responsive, plus adapté aux besoins de ses patients et plus moderne.

D’un point de vue général, voici deux captures avant / après de la page d’accueil.

Refonte de site - Avant Site responsive version desktop
Avant / Après

UN SITERESPONSIVE

Adaptation à tous les supports

Aujourd’hui, plus de la moitié des consultations de sites internet est effectuée depuis des smartphones. Il est donc indispensable qu’un site internet soit lisible et adapté aux différents supports. Ainsi, le site se présente de manière optimale pour la lecture quel que soit l’appareil utilisé pour la consultation, du smartphone à l’ordinateur de bureau en passant par la tablette.

Menu malin

Comme on peut le voir sur la capture « avant », le header (le haut de page avec les coordonnées) et le menu occupent un espace d’affichage très important. Trop. De plus, au sein de la navigation, un sous menu était problématique car il rendait la navigation au sein d’un espace réduit difficile (depuis un smartphone par exemple). Un vrai menu mobile (aussi appelé « hamburger ») a été intégré. Lors de la consultation sur téléphone, il s’insère à droite de l’écran en poussant le reste de la page. Un effet moderne et dynamique.

Enfin, l’accès à la réservation d’une séance était parfois difficile à trouver au sein des pages. Ici, un call-to-action (un bouton d’action avec un affichage prédominant) a été intégré dans ce menu mobile ainsi qu’à la barre de navigation lors d’un affichage sur ordinateur de bureau.

Avant - Menu mobile
Avant
Refonte site internet - vue tablette et mobile
Après

Flex

Avant toute chose, il est important de comprendre le fonctionnement classique des sites internet responsive. Comme on peut le voir sur le schéma, plus la surface d’affichage d’un site internet se réduit, plus de nombre de colonnes diminue. C’est assez logique et l’exemple le plus évident est le passage d’un écran large d’ordinateur de bureau à celui tout en hauteur d’un mobile.

Responsive Classique

C’est le cas ici du bloc #3, repoussé à la ligne suivante dans le cas d’une largeur d’affichage plus réduite. En effet, par défaut, ce sont les blocs les plus à droite qui se retrouve basculés plus bas. Cette logique respecte notre sens de lecture.

Parfois, ce fonctionnement est problématique. Et il faut reprogrammer manuellement l’ordre d’affichage des blocs lors d’un affichage sur un device plus étroit. Au delà de la technique, l’objectif est de favoriser l’expérience de navigation des utilisateurs. Voyons un exemple concret lors de cette refonte de site internet. Le but étant de favoriser l’affichage en priorité des coordonnées de Thomas.

Après - Flex - Desktop
1
2
3
4
Version desktop
Après - Flex - Mobile
1
2
3
4
Version mobile

Les blocs #1 et #2 sont sur une même ligne. Sur la suivante, les blocs #3 et #4. On peut le constater avec le changement du background (image de fond) entre ces deux lignes.
Par défaut, le bloc #3 aurait dû être présenté avant le bloc #4. Les informations relatives aux coordonnées auraient alors été séparées. Problématique pour une lecture logique. Et même incohérent graphiquement, les blocs #2 et #4 ayant un fond commun. Par conséquent, l’ordre d’affichage des blocs a ici été modifié lors d’un affichage sur tablette et mobile. Le bloc #4 vient se placer avant le bloc #3.

UN SITEADAPTÉ

Intégration du plan

Un des premiers points soulevé par Thomas a été la difficulté pour ses patients de le trouver une fois qu’ils avaient rendez-vous. En effet, comme on peut le voir sur la capture (#1), le plan était peu lisible, trop étroit. Celui-ci a donc été intégré dans un cadre plus grand et au sein duquel, l’utilisateur peut naviguer, zoomer, …

Toujours côté plan, et dans cette démarche centrée sur les besoins des utilisateurs, l’adresse est devenue cliquable (#2). Ainsi, lors d’une visite depuis son smartphone, c’est l’application GPS qui s’ouvre directement. Un « click-to-map » intuitif et efficace lors de son trajet.

avant-contact-plan Après - Plan
Avant / Après

Coordonnées interactives

Toujours dans cet objectif de favoriser l’échange et le contact avec ses patients, le téléphone est devenu « touchable » (#1). Ainsi, lors d’une utilisation sur smartphone, les visiteurs peuvent directement appuyer sur le numéro et ainsi déclencher l’appel via l’application dédiée de leur téléphone. Il est particulièrement pénible sur un smartphone de faire un copier-coller. Bien sûr, cette fonction « click-to-call » est désactivée lors d’une navigation sur un ordinateur de bureau classique.
L’adresse (#2), elle aussi, comporte un lien vers l’application de plan / GPS par défaut du téléphone.

Deux autres éléments à noter. En #3, la barre de navigation qui reste fixe en haut de l’espace d’affichage lors du scroll (la navigation verticale). Le menu est toujours à portée de doigts !
Dernier point, en #4, un bouton de retour en haut de page, lui aussi, fixe en bas de page, à droite.

après - smartphone - contact
1
Click-to-call
2
Click-to-map
3
Header fixe
4
Scroll to top fixe

Témoignages améliorés

Pour un ostéopathe, les témoignages de ses patients sont particulièrement précieux. Ils garantissent la qualité des soins apportés. Pour de nouveaux patients, ces avis sont un bon moyen d’être rassurés. Dans le cadre de cette refonte, il a bien sûr fallut récupérer les témoignages et les intégrer au nouveau site.

De plus, Thomas souhaitait étendre le formulaire de dépôt d’avis. Avant, celui-ci ne comportait qu’une seule notation et un seul espace de rédaction. Ensemble, nous avons donc créé différents critères de notation et plusieurs espaces de commentaires. Ainsi, chaque patient peut indiquer avec précision son retour sur la prestation. Bien sûr, aucun champ n’est obligatoire. Un patient ne souhaitant donner qu’une notation générale et un commentaire court peut s’en contenter.

Après - témoignages

UN SITEMODERNE

Material design

Le site de Thomas n’était pourtant pas très vieux, mais il comportait pourtant quelques choix formels qui rendait l’interface un peu « vieillotte ». Un des objectifs de cette refonte était de rendre le site plus attrayant et dynamique. Ainsi, désormais, au fil de la navigation, les visiteurs peuvent profiter d’effets de parallax sur les images de fond, d’un retour en haut de page fluide, d’ancres au sein de la page « pour qui ? », d’une barre de navigation fixe en haut de page, d’un bouton retour en bas de page fixe lui aussi, et d’effets de transitions entre les pages.

Le site comportait aussi quelques bugs et choix graphiques dégradants la lecture ou la navigation. Comme ce footer (pied de page) prédominant. Les légendes en textes noirs sur les images ne sont ni harmonieuses ni lisibles.
On peut aussi constater un défaut d’affichage en haut de page avec la fin du menu qui se décale sur une seconde ligne.

avant-footer footer-apres
Avant / Après

Au rayon des bugs, voici le sous-menu (en typo de couleur noire) qui vient s’incruster sur le menu principal. A noter, l’incohérence d’une taille de typo supérieure pour le sous-menu que pour le menu principal.

Dans le pied de page en lui même, l’ajout d’une image de fond derrière les blocs d’image rend l’ensemble particulièrement peu lisible.

Enfin, graphiquement, le mélange des arrondis (« Localisez mon cabinet à Dreux » par exemple) et des marges de couleur (autour des blocs) n’est pas très harmonieux

avant-bug

Réseaux sociaux

Après - réseaux sociaux

Thomas Mathieux est un ostéopathe particulièrement moderne et tourné vers les nouvelles technologies. Bien avant cette refonte, il avait conscience qu’animer ses réseaux sociaux était une priorité. Ce sont aussi des espaces d’échanges et de partages. Par conséquent, nous avons choisi de mettre ceux-ci plus en avant sur le nouveau site. Aujourd’hui, les visiteurs peuvent donc trouver en haut et en bas des différentes pages les liens vers Facebook ou encore Linkedin.
Dans sa version mobile, les liens vers les réseaux sociaux sont aussi présents dans le menu latéral.

Améliorations générales

  • Intégration de pictogrammes suggestifs (affordance)
  • Navigation plus dynamique et réactive
  • Refonte du menu
  • Renouvellement des photos
  • Simplification du wording
  • Nouveaux picto pour les réseaux sociaux
  • Typographie plus moderne et lisible
  • Effets parallax
  • Smooth scroll
  • Header fixe
  • Transitions entre les pages
  • Loading image

Vidéo démo