L’UX design (design de l’expérience utilisateur) est depuis quelques années dans toutes les bouches, le terme est à la mode. En contrepartie, nombre de sites ont encore beaucoup de progrès à faire. Tout site tire profit d’une bonne UX, cependant il y a quelques règles qui sont spécifiques au e-commerce.

Quand on connait l’impact spectaculaire qu’elles peuvent engendrer sur le taux de conversion et donc le chiffre d’affaire, mieux vaut ne pas passer à côté ! Voyons donc les quelques règles à absolument avoir en tête lors du design et du développement d’un site e-commerce. Il s’agit de conseils concrets, cet article est donc aussi bien destiné aux designers qu’aux développeurs, let’s go!

La “technologie” Retina, si on peut l’appeler ainsi, consiste en une densité de pixels assez élevée pour que l’œil (d’où le nom de retina) ne puisse discerner les pixels sur l’écran. Cependant, avec une telle densité, pour ne pas que tout paraisse minuscule, la valeur en pixel de chaque élément est démultipliée. Concrètement, cela signifie que dans votre feuille CSS, tout élément que vous définissez, par exemple, avec une width: 100px; fera en réalité 200px. Tout est multiplié par deux.

À de telles résolutions, autant dire que vos images peuvent vite paraître pour le moins pixelisées. Il faut donc penser aux différentes tailles d’écrans, mais aussi aux différentes densités d’écans. Un 22” HD (1920x1080) n’aura pas besoin de la même qualité d’image qu’un 22” en 4k (4096x2016). Voyons comment penser nos images pour qu’elles soient éclatantes en toute situation.

Pour ceux d’entre nous qui ne sont pas designer (ou designer sans expérience dans le web), le webdesign peut paraître à la fois extrêmement facile ou complexe. Certains se diront : “facile, j’aligne un bloc par ci, un menu par là, et c’est bon”, d’autres se diront : “sans formation, impossible”. Le design d’un site web ne s’improvise pas, mais avec un peu de méthode, que l’on soit débutant ou confirmé, tout devient possible. Nous allons d’abord démystifier ce terme de webdesign, avant d’en apprendre la méthode.

Je lis régulièrement sur le web des articles louant la puissance du croquis. Bien qu’ils nous disent que le croquis ne nécessite pas d’être bon dessinateur, je me trouve souvent frustré face à mes esquisses d’interfaces qui ne ressemblent à rien. Malheureusement, aucun de ces articles ne nous apprends à croquer.

C’est à la lecture du livre Design d’expérience utilisateur de Sylvie Daumal que j’ai enfin mis la main sur une initiation rapide et d’une pédagogie rare. L’article qui suit est donc directement extrait du livre.

On a toujours besoin, à un moment ou à un autre, de faire une présentation : un exposé, un brief, une conférence, bref à tous les niveaux et a tous les âges. Pour cela, on pense immédiatement à PowerPoint, les adeptes de la firme à la pomme utiliserons parfois Keynote et certains d’entre vous connaissent peut être Prezi.

Il existe cependant bien d’autres solutions, disponibles gratuitement, en open source et full HTML5. Alors pourquoi se priver et continuer à payer des licences pour des logiciels qui, au final, brident quelque peu notre créativité ?

Dans une certaine mesure, il est possible de totalement éviter les images pour vos icônes ! Certaines icônes sont tout simplement disponible en Unicode et HTML. C’est à dire que c’est du “texte-icône”. Certains caractères “spéciaux” tels que “ç, €, à, é, è, ê…” possèdent bien en html des codes ressemblant à ça : “&ccedil”. Il ne vous viendrait pas à l’esprit de mettre une image à la place du texte… Pourquoi ferions-nous différemment pour les icônes ?

Mon post précédent parlait d’e-mailing. La logique veut que je poursuivre avec les landing pages. Une fois que votre superbe newsletter à convaincu son destinataire de cliquer pour se rendre sur votre site, ce serait cool qu’il y soit bien reçu! Alors qu’est-ce qu’une landing page ? Comment la réalise-t-on ?

Le web et les polices, ou fontes, c’est une histoire passionnelle. Avant le CSS3 et son @font-face, il n’était pas possible d’embarquer une police sur le web. On devait donc se contenter des polices sytème… Autant dire que le choix était limité, d’autant plus que tous les systèmes n’embarquent pas les mêmes jeux de polices.

Bref, ça, c’était avant. Aujourd’hui, deux questions se posent : quelle(s) police(s) choisir pour une expérience cohérente ? et comment garantir une expérience performante sur tous les devices ?