Web & Smartphones : conception d’une WebApp

Catégories : "Design", "Astuces", "Conception" par Marc Andrieux Marc Andrieux le 27 Avril 2012

Web & Smartphones : conception d’une WebApp

A l'heure de la démocratisation des smartphones, la création d'une WebApp (version sur-mesure d'un site adapté au mobile)  n'est désormais plus à négliger.  Cependant,  la conception et notamment l'approche d'accès au contenu est très différente si l'on surfe depuis un mobile ou un ordinateur.

Ces versions mobiles sont assez nouvelles et en évolution permanente, il est donc difficile de créer un listing exhaustif de bonnes pratiques. Cependant, nous pouvons tout de même tracer quelques grandes lignes pour assurer une expérience utilisateur optimale.

Alors comment bien aborder la conception d’une WebApp, profiter des fonctionalités offertes par les smartphones et optimiser la communication sur mobile? Voici ci-dessous quelques éléments de réponses.


Optimisation du contenu

Tout d’abord, l’arborescence doit être repensée dans le but de ne garder que le strict minimum.

Le menu principal doit être revu et dans l’idéal ne pas dépasser 6 éléments. Le fil d'ariane étant rarement utilisé car peu pratique, un travail de synthétisation doit être fait pour obtenir une profondeur de navigation réduite. Autant dans un site web classique, il est bon pour le référencement d’avoir un maximum de pages de contenu indexées, autant la WebApp doit aller à l’essentiel et ne doit pas utiliser de sections à faible valeur ajoutée ou superflues.


Interactivité mobile

Durant la phase d’optimisation de l’information, il est bon de garder en tête que les smartphones possèdent des atouts technologiques attrayants, tels que la géolocalisation, l’appel direct et permettent d’enrichir considérablement l’experience utilisateur.


Zoning et design

Dans l’ensemble,  il est essentiel d’avoir une approche minimaliste pour rendre le parcours utilisateur évident.

Forme

  • Regrouper les différentes parties des pages du site web en une seule et même colonne.
  • Privilégier le scroll vertical
  • Réduire au maximum le nombre d’images et ne pas utiliser de background lourd (permet de réduire le temps de chargement)

Navigation

  • Rester clairs et concis en donnant un maximum d’affordance aux éléments de navigation

  • Bien mettre en avant les accès aux contenus clés

Organisation

  • Sur les pages intérieures,  prévoir de retrouver le menu principal en bas de page
  • Ajouter un lien permettant de switcher de version (desktop/Mobile) en bas de chaque page

Polices

  • Préférer l’utilisation de polices système
  • Les polices doivent être légèrement augmentées de façon à rendre la lecture facile et agréable.

Multimédia

  • Ne pas prévoir d’animation flash.
  • Eviter l’utilisation de technologies Java / JavaScript/ Cookies / Pop up / Auto refresh, n’étant pas 100% compatibles, au risque de créer des problèmes d’affichage sur certains smartphones.

Intégration & développement

  • Remplacer les boutons d’image par du CSS, lorsque c’est possible.
  • Prévoir une zone (padding) autour des zones cliquables (minimum 30px).
  • Supprimer les effets de souris.
  • Si utilisation de polices non système (pas recommandé) mettre tous les formats de polices (SVG, otf, tif...).
  • Optimiser les pages en supprimant tout ce qui n’est pas nécessaire (code, commentaires, tag).
  • Adapter toutes les images à la bonne taille et à la bonne résolution.
  • Détecter le type d'environnement du visiteur et l’orienter directement vers la version appropriée.
  • Utiliser des titres courts et descriptifs pour permettre de bookmarquer facilement les pages.
  • Bien renseigner les “Alt” si utilisation d’image.
  • Validation W3C mobileOK Checker.


Pour résumer une WebApp efficace doit être une version allégée, interactive et minimaliste. La navigation doit être évidente et l'information clé se doit d'être la plus courte et explicite possible.

Paradoxalement, toute la complexité réside dans le fait de faire simple.

Web & Smartphones : conception d’une WebApp

A propos

Bienvenue sur le Workshop de l'agence interactive Maecia : notre espace d'actualités, de veille et de publications sur les nouvelles tendances d'Internet. Vous y trouverez aussi le fruit de certains de nos développements techniques que nous mettons à disposition de la communauté. Découvrez notre vision du web et surtout n'hésitez pas à prendre la parole !