image

Bonnes pratiques en web design

image
IKOMOBI
21 avril 2016

Chez ikomobi, nous consacrons notre quotidien à tous les dispositifs mobiles de nos clients. Cela inclut leurs applications mobiles mais aussi leurs sites web. Notre équipe de développeurs web est en veille permanente sur les best practices dont nous partageons quelques unes avec vous.

Pour avoir un site web optimisé pour l’utilisateur, il faut se concentrer sur deux parties cruciales : la partie design et la partie technique. Abordons aujourd’hui les best practices design de notre équipe.

Mobile First et Responsive

Responsive c’est bien, Mobile First c’est mieux.

Tout abord il est important de préciser que Mobile First et Responsive Design ne sont pas deux stratégies compétitives. Au contraire, elles se complètent.

Le Responsive Design est une manière de concevoir un site web pour que son contenu s’adapte automatiquement à la résolution écran du terminal qui est utilisé pour le visionner. Le Responsive Design répond au besoin d’avoir un design qui fonctionne sur un maximum de navigateurs et de devices, en créant la meilleure expérience utilisateur possible tout en conservant un site fonctionnel.

Les sites internet “standards” se réduisent sur des devices plus petits et enlèvent au fur et à mesure du contenu et des fonctionnalités sur des résolutions réduites.

Responsive

En pensant Mobile First, on s’assure d’avoir la même valeur ajoutée fonctionnelle même sur l’écran le plus contraint. Au lieu de partir du format desktop et de réduire le contenu et les fonctionnalités, on offre la meilleure version possible à l’utilisateur dès le mobile.

Mobile First

GAFAM Design (Google, Apple, Facebook, Amazon, Microsoft)

Lorsqu’on parle des dernières tendances en web design, on parle de GAFAM Design: Ce sont les pratiques de design mises en avant par Google, Apple, Facebook, Amazon et Microsoft.

  • Un rendu peaufiné sur tous les écrans
  • Des interfaces créées pour une utilisation optimisée en mobilité
  • Une cohérence graphique et fonctionnelle sur chaque device
  • Des sites web reflétant les préférences du plus grand nombre
  • Un design centré sur le produit et l’utilisateur
  • Des grilles dynamiques et responsive optimisées en desktop et en mobile

Les guidelines de Material Design (le design de Google) se sont imposées comme une référence avec des couleurs pétillantes, des icônes réfléchies et du contenu proprement structuré. 

6-web-design-trends-awwwards-image11

D’un autre côté, Apple s’impose avec son design minimaliste. L’accent est mis sur de beaux visuels et sur un contenu extensif et explicatif. L’utilisateur et ses besoins sont mis au centre.

Le flat design est aussi un concept qui revient encore et toujours. Pour rappel, le flat design est une tendance de design des applications mobiles qui utilise un style graphique épuré pour privilégier la clarté et la visibilité de l’interface. En réalité, le material design et le style d’Apple sont une continuité du flat design.

Notre savoir faire chez ikomobi c’est de comprendre votre univers de marque, concept commercial et clientèle cible afin de et vous proposer le meilleur design pour votre site responsive.

Gestion des erreurs sur le plan ergonomique

Même les pages d’erreurs comme la page 404 (page n’existe pas) ou la page 500 (internal server error) doivent faire l’objet d’une reflexion ergonomique: elles sont souvent la cause d’un arrêt dans le parcours d’achat et donc de perte de conversion. Pour ne pas perdre le client lorsqu’il arrive sur ce type de page, il est nécessaire d’ajouter des éléments de e-commerce tels que barre de recherche, listings de produits, tendance,…

Il ne faut pas non plus négliger les notifications d’erreurs: L’utilisateur doit comprendre la cause d’une erreur sur un formulaire d’inscription pour ne s’arrêter dans sa démarche de remplissage du formulaire.

360° / UX First

Mais le responsive design n’est pas suffisant – en effet, l’augmentation continue du nombre de supports rend plus difficile l’optimisation dans chaque résolution et diminue la première valeur ajoutée du responsive design. Ces nouveaux supports incluent les nombreuses smartwatchs, écrans télé, voitures, etc. Un exemple flagrant des contraintes que créent tous ces supports est celui de la tablet pc hybride – doit-elle être traitée comme une tablette ou comme un PC en terme d’utilisation ? Comment varier entre les deux ?

  • 360°

Ces nombreux supports entraînent une multitude d’appareils, de formats et d’interfaces. Le web doit désormais se construire autour d’un environnement à 360°, en prenant en compte chaque support comme faisant partie d’un écosystème global. Tout le design, les fonctionnalités, la relation client doivent être représentés en cohérence avec le support utilisé, qu’il soit numérique ou print, desktop ou mobile, etc.

  • UX First

Il est primordial de prioriser l’expérience utilisateur. Elle implique de se concentrer sur :

  • l’ergonomie du site avec un accent sur les interactions utilisateur
  • la capacité du contenu à apporter une réassurance au client
  • la performance du site
  • la facilité d’utilisation
  • le référencement du site

Dans ce contexte, chaque élément de design doit avoir du sens, le wording doit être bref et efficace et apporter une valeur ajoutée à l’expérience utilisateur.

Conclusion

Nous espérons que ce premier article sur les meilleures pratiques du web vous aura plu. Si vous avez des questions additionnelles, n’hésitez pas à nous contacter. Nous nous ferons un plaisir de vous répondre !