:::: MENU ::::

Stratégies Digitales

Cas d’école design CEDUS [épisode 4] : responsive design

Ergonomie et usages, Tout l'univers des stratégies digitales

Cas d’école design CEDUS [épisode 4] : responsive design

Au travers de quelques posts, nous vous proposons d’aborder des problématiques créatives particulières.
En se basant sur l’exemple du CEDUS qui a lancé une consultation pour la refonte de son site à destination des professionnels,
nous traiterons un élément spécifique du couple « besoin affiché/réponse créative », et ce, dans chaque post.

 

logo CEDUS

Un site pensé « mobile » : des choix techniques et ergonomiques à la clé !

La multiplicité des modes de navigation sur le web et des « micro-moments » (plus de 150 fois par jour) où les internautes sont en contact avec des écrans de toutes les tailles, font qu’on pense dorénavant le web de manière « mobile ».
Sites, de tout type, interfaces utilisateurs, outils (métiers), application,… sont aujourd’hui mobile et de plus en plus « mobile first », c’est à dire que c’est le rendu et l’utilisation sur un écran réduit qui sont travaillés en premier, en priorité.
C’est sur une taille d’écran plus réduite que le desktop que les efforts de présentation et lisibilité sont les plus poussés car c’est ainsi que naviguent et navigueront les utilisateurs, cibles, clients, etc.

En disant cela, on comprend donc qu’un premier choix est fait : partir du mobile pour ensuite envisager et travailler des versions adaptées aux écrans plus grands (tablettes, desktop).

Un site pensé « mobile » est une demande formulée souvent dans les projets de création et refonte de sites et d’interfaces utilisateurs. Ce fut le cas pour le site www.sucre-info.com.

 

Le cas du CEDUS

Le site du Cedus destiné aux professionnels du sucre, a fait l’objet d’une proposition de webdesign et d’intégration responsive.
Ce procédé tient à une utilisation d’un design unique qui vient s’adapter en fonction de la taille de l’écran sur lequel il  s’affiche.
Plus précisément, il est conçu sur la base d’un écran mobile et vient se compléter (dans le fond et la forme) lorsqu’il est consulté sur tablette ou écran desktop.
Ainsi, le premier choix technique est fait : une version mobile seule du site n’a pas été retenue. (Pour en savoir plus sur les différences entre site responsive et site mobile, lisez notre post précédent sur le sujet)

Exit donc les « m.sucre-info.com » et autre « www.sucre-info.com/mobile » : un seul design et une seule url affiche le même site (s’adaptant) sur tous les écrans.

mobile Cedus 1mobile Cedus 2mobile Cedus 3mobile Cedus 4footer mobile Cedus

Les autres arbitrages d’une telle conception graphique, portent sur l’ergonomie et par extension, sur l’expérience utilisateur sur le site.
Ces arbitrages consistent à définir ce qui va composer le site affiché sur mobile et comment cela va s’afficher.
En d’autres termes, il s’agit de proposer une version plus ou moins complète de l’arborescence et des fonctionnalités du projet (dans sa vision globale) lorsqu’il est utilisé sur un écran de smartphone.
Il s’agit également de proposer un affichage des textes, visuels, boutons, liens de téléchargement, éléments de navigation (pagination, onglets, menus,…) qui permettent une navigation tactile afin de répondre aux standards de la téléphonie mobile actuelle.

Sur mobile :

  • On propose alors de réduire par exemple le nombre d’items affichés d’une rubrique pour limiter l’encombrement et le scroll.
  • On remplace les liens ou boutons « En voir + » par un « + »
  • On n’affiche que les titres des items et non les textes d’introduction
  • On affiche des boutons plus gros et plus incitatif au clic avec les doigts,
  • On présente certains contenus de manière « pliée » : un bouton incite à en voir plus, au clic, et donc à déplier certains volets,
  • On préfère un menu « hamburger » pour optimiser la place dédiée à la navigation.

Autant d’éléments qui favoriseront la consommation de l’information du site sur tous les écrans et simplifieront la gestion des contenus avec un seul back office à gérer.

 

 

Le bilan de cette série d’épisode dédiée aux réponses graphiques (mais pas que) apportées à quelques grandes problématiques et besoins, dans notre prochain post !

Sur le même thème :