UX/UI design
08/11/2016

Les bonnes pratiques de design web en 2016

Copyright pdjohnson - DrupalCon Dublin
Petite mise au point de notre équipe UX et web design sur les tendances graphiques, artistiques et sur l'expérience utilisateur. Cette mise au point reflète nos derniers travaux en cours...

1. Votre site "one-page" optimisé pour les utilisateurs, c'est mieux

Cliquer sur un objet précis sur mobile est aujourd’hui plus difficile que ça ne l’a jamais été à cause de la multiplication des éléments présents sur une page. Par conséquent, nous observons que de nombreux sites internet travaillent sur l’effet de défilement en priorité sans penser à rendre les éléments importants cliquables facilement.

Bien entendu, vous pouvez utiliser la roulette de votre souris ou votre pavé tactile sur votre ordinateur, vous conservez en précision. Par contre, avez-vous pensé aux internautes qui utilisent votre site sur smartphone ?

Il est intéressant de savoir qu'avec l’effervescence des sites « one page », le défilement des pages est devenu une tâche pénible pour l’utilisateur. Cette problématique, si elle est traitée de manière intelligente va rendre la navigation sur votre site agréable, ce qui aura pour effet de vous permettre de conserver vos utilisateurs plus longtemps.

Prenons un exemple : 9gag a réussi à intégrer un scrolling infini combiné avec une facilité de clic sur les éléments principaux, ce qui rend l'expérience utilisateur simple et très efficace. Nous pouvons noter que cette performance en matière de design d'expérience utilisateur est surtout constatée par les utilisateurs sur mobile.

2. Découvrez les textes graduellement pendant le scrolling de la page web

Les jours pendant lesquels l’affichage des pages du temps à cause d’une grande quantité de données sont révolus. Auparavant, les pages étaient affichées seulement après que le contenu soit complètement chargé. Maintenant les utilisateurs n’ont pas à attendre très longtemps car ils peuvent consulter la page, même avec un contenu partiellement chargé.

Un bel exemple : Medium est un exemple typique dans lequel les utilisateurs vont lire des articles de blog, seulement avec des titres pendant que les autres titres de blogs chargent lentement au fur et à mesure que l’utilisateur scroll(e) dans la page. Cette méthode se montre efficace dans la mesure où l’utilisateur n'a pas à attendre avant de commencer à voir le contenu.

PlumeWifi est un autre exemple de site internet combinant du scrolling, des effets d’animation et de texte se découvrant graduellement pendant le défilement de la page. L’unique chose à noter ici, c’est que le site a réussi à maintenir le facteur « simplicité » même en combinant les trois effets sur chaque page.

3. Sites internet simplifiés et allégés

Les sites web deviennent beaucoup plus rapides qu’il y a quelques années. Aujourd’hui, les sites "lents" ont le même impact que ceux qui "ne chargent pas du tout" aux yeux de l’utilisateur. Il n’y retournera jamais.

Le design simple est un choix idéal car il n’est pas seulement facile à lire, mais il permet également aux utilisateurs de profiter d’un temps de chargement très court.

Les applications sont également capables d’obtenir une très belle interface lorsque celle-ci est super-minimaliste, contrairement aux sites internet qui peinent à adopter un style simple. Les applications offrent une interface qui ne fait pas qu’être performante, elle a aussi un rendu magnifique. Voici deux ingrédients de l’optimisation de l’expérience utilisateur.

Le rendu en flat design fera la différence grâce à son approche tendance, simpliste et immédiate.

StinkDigital est l’un des meilleur cas de figure prouvant à quel point un design minimaliste peut être plaisant à voir. Lorsque vous visitez la page d’accueil, vous avez seulement deux objets à remarquer, l’onglet menu et la page fondée sur le même style que Pinterest permettant de montrer les posts des blogs. Il est tellement aisé de naviguer sur le site que même un utilisateur novice pourra le faire, sans le moindre souci.

4. Préférez le vectoriel au matriciel

Juste une poignée de personnes sait ce que sont des pixels et comment ils constituent une image. Cependant, il y a toujours un seul type de composant qui demande encore du travail pour être bien géré sur un site internet: les images bitmap (aussi appellée images matricielles).

La grande majorité des sites internet créés à travers le monde n’ont jusqu’ici pas la résolution correspondante à tous nos écrans actuels. Pour remédier à ce problème, il est temps d’utiliser les images vectorielles. C’est votre arme secrète pour faire briller votre site web.

Le material design proposé par Google a boosté la tendance du simpliste, minimaliste et l’adaptabilité à l’ensemble des résolutions. Vous n’avez pas seulement un site responsive qui se charge rapidement, mais vous avez aussi des images qui s'adaptent à chaque écran sans perdre en qualité. C’est le top du top pour les designers qui travaillent en gérant les navigateurs web principaux.

Bien que la technologie soit présente aujourd’hui, les professionnels ont besoin de temps pour changer leurs habitudes et proposer un affichage d’une qualité optimale.

Sachez que Drupal peut gérer les images vectorielles redimentionables au format SVG , il vous suffit d'installer un module proposé gratuitement par Fabean sur GitHub.

Même si le SVG est un format de fichier moins connu que le JPEG ou le PNG, il se montre plus efficace et plus léger pour un rendu d'une qualité parfaite.

5. Animez votre site internet et rendez-le user-friendly

Le design d'interactions joue un rôle important permettant d’améliorer le storytelling que vous mettez en place. Il va également permettre de rendre l’expérience utilisateur captivante et interactive.

Cependant, vous devez les afficher avec parcimonie. Pour obtenir un rendu cohérent, prenez le temps de bien réfléchir à leur emplacement sur votre page. Prenez bien soin de la personnalité de l’animation et d’autres éléments qui la composent pour que le rendu final soit cohérent avec l’identité visuelle de votre site internet.

Pour un rendu optimal, nous vous conseillons de laisser les grandes animations agir en tant qu’outil d’interaction primaire comme les notifications pop-up. Les effets d'animation de petite taille permettront d’apporter un support, comme les barres de chargement, les effets de hover…

Pour la création des effets d'animation, nous les réalisons, chez bluedrop.fr, en HTML5, CSS3, JS via le framework connu et reconnu dans la communauté Drupal pour sa rapidité, son agilité et sa fluidité : Foundation.

WhiteClaw est un parfait exemple pour comprendre ce style graphique. Ce site prend vie grâce à la combinaison des animations avec le défilement de la page, ce qui lui donne un effet très sympathique en raccord avec l’identité visuelle du site.

6. Le design d’éléments peut être créatif, mais pas révolutionnaire

Avoir une apparence similaire avec d’autres sites n’est pas nécessairement mauvais. Cependant, les motifs de design ont mûri et collent avec les attentes des utilisateurs. Vous ne pouvez pas faire beaucoup d’innovation sur les motifs présents sur votre site.

Un écran de connexion ressemblera à un écran de connexion, un bouton fermer devra ressembler à un bouton « fermer » etc… Ne réinventez pas la roue sur chaque élément de votre site. Assurez-vous juste que les motifs donnent lieu à une expérience utilisateur fluide et plaisante.

Quelques tendances actuelles

  • Le menu hamburger - Lorsqu’il est cliqué, il s’étend et montre les sous-menus. Il ressemble à un hamburger composé de quelques courts sous-titres. Ce menu est présent en haut de presque tous les sites. Chez bluedrop.fr, nous appliquons ce système aux versions mobiles des sites de nos clients pour contribuer à rendre l'expérence utilisateur agréable.
  • Thème mosaïque - Ce thème est devenu très populaire avec la venue de Pinterest et l’implémentation sur plusieurs autres sites influents. Chaque image représente un gros morceau d’information, qui mène à un concept unifié. Leurs formes rectangulaires rendent leur organisation plus simple.
    Pour illustrer cet exemple, nous vous proposons de visiter le site d'un de nos clients : SmartAndGeek. C'est simple, beau et efficace.
  • Image centrale - La vision est le sens le plus abouti de l’humain. Les images en haute définition captent directement l’attention de l’utilisateur. Avec le développement de la compression de données et le développement des bandes passantes, il est plus simple d’accélérer le temps de chargement, même avec de grandes images. Une image centrale, placée au-dessus de la ligne de flottaison à un impact positif important au premier regard et permet de capter l’attention de l’utilisateur.
    Custom Solutions est un nouvel exemple de l'intégration de cette image centrale qui vous accueil dès votre arrivée.

Pour synthétiser cet article sur les tendances qui rythment les sites internet desktop et mobiles

Bien que l'utilisation du mobile ai dépassé celle du desktop depuis 2014, les entreprises continuent de travailler en priorité sur leur site internet desktop avant de créer la déclinaison mobile et une application. En 2015, nous avons pu apercevoir une touche de professionnalisme avec la minimalisation du style des sites internet sur mobile et ordinateurs de bureau.

En 2016, les tendances qui ont animé 2015 se sont développées de manière exponentielles. Ces tendances sont le flat design, le responsive design, le défilement, le défilement infini etc… Ces tendances vont continuer d’animer l’année avec un développement de la démarche créative, l’accentuation de la simplicité et de l’interactivité. De plus, l’incorporation des images, des animations, des mouvements et des articles de blogs va s’avérer être un phénomène commun, en adaptant l’UI et l’UX aux goûts des utilisateurs.

Fin 2016, le bilan est que les mots clés du design se révèlent être « Les sites les plus simples captent le mieux l’attention des utilisateurs. »

En tant qu'agence web spécialisée Drupal, nous souhaitons partager ce savoir que nous mettons au service de nos clients pour garantir la qualité de nos prestations et assurer leur satisfaction.

Vous aimez ce que nous faisons ? Contactez-nous et travaillons ensemble sur votre projet.

Source originale

 

- Douichen Sofiane