Prévoir les conflits de développement dans la conception du projet

Face à une deadline trop serrés, la collaboration entre développeur et UX designer peut devenir catastrophique.

Garder les concepteurs et les développeurs sur la même longueur d’onde est assez compliqué. Donnez leur un site web qui doit être fonctionnel rapidement et les bureaux brulerons.

Nous devons donc concevoir rapidement, de façon transparente pour fournir un site de classe mondiale à la fin ?

Dans cet article, je vous propose quelques conseils du quotidien pour réduire vos maux de tête au travail. Les conseils tirent de mes expériences vécues au cours des dernières années en tant qu’UX Designer.

1 – La conception réactive : système de grille

Vous ne travaillez peut-être pas avec des grilles lors de vos wireframe, voici un problème auquel les développeurs sont confronté.

Définir une largeur à votre grille

Il est utile de commencer son wireframe avec une largeur spécifique à votre grille et de connaître la taille des gouttière exacte pour chaque partie de la grille. Avec cette information, vous pouvez déjà uniformiser votre conception, ce qui vous empêchera de faire des ajustements tout au long de la conception du wireframe.

Si vous définissez un bloc de 50 pixels, il doit être exactement à 50 pixels. Si votre grille a une largeur de 1200px dans son intégralité, elle doit être de 1200px de large. Si vous définissez une base solide à votre projet web et notamment pendant votre wireframe, cela devrais fonctionner sur tout type d’appareil et tout type de système, il est important d’avoir un point de départ en béton.

Ne laissez pas le hasard réaliser vos vues mobiles

Tout semple beau sur desktop, mais attendez… et la vue mobile ?

Dans beaucoup de projets, le développeur doit prendre des décisions sur la composition de la vue mobile…

Pour mieux collaborer sur un projet web, les UX designer doivent impliquer sur le design desktop l’ordre d’empilement mobile. Si le temps le permet, il est extrêmement utile de fournir une maquette fidèle de la vue mobile. Fournir une vue mobile vous permettra d’obtenir une interprétation mobile au pixel près !

wierframe valentino puleo 700x332 - Prévoir les conflits de développement dans la conception du projet

Utiliser un système de grille desktop pour la conception d’un site mobile n’a pas de sens. C’est souvent le cas avec les éléments d’interface utilisateur étendus, qui ne se compriment généralement pas bien lorsqu’ils sont placés sur des périphériques mobiles.

En tant qu’UX designer, vous devez résoudre ces problèmes afin que les développeurs du projet ne viennent pas avec des idées en conflit avec vos intentions.

2 – Utilisez des outils modernes pour une représentation précise

Polices de caractères

Dans un premier temps, la cohérence entre les polices de caractères entre Photoshop et le Web n’existe pas.

Souvent, les polices avec lesquelles je travaille sur Photoshop sont complètement éteintes. Même les polices open-source peuvent sembler différentes lorsqu’elles sont comparé sur Photoshop et le Web.

En tant qu’UX designer, nous aurions besoin d’ajuster la conception en fonction du poids des polices. Lorsqu’ils ne sont pas correctement représentes,

En tant que concepteur, vous aurez besoin d’ajuster la conception en fonction du poids des polices. Lorsqu’ils ne sont pas correctement représentés, vous prenez des décisions basées sur des données ou une représentation visuelle de la police qui va être incohérente.

Problèmes de performance

L’un des aspects de la représentation du pixel parfait se rapporte à la façon dont les designers créés la plupart des documents Photoshop.

Utilisons les ombres portées comme exemple.

Photoshop comme vous le savez surement, contient une option d’ombre portée. Les designers ont beaucoup de souplesse lorsqu’ils créent des ombres, ainsi que des masques et autres éléments de conception. Mais quand un développeur recrée ces mêmes ombres sur le web, les options sont beaucoup plus limitées.

Quand un développeur entame la création du front-end d’un site web, il ou elle est très préoccupé par les performances de celui-ci. Chaque fois qu’ils ont besoin d’utiliser une image en PNG transparent ou translucide de 32 bits pour un élément UI, le site prendra plus de temps à charger. Multipliez l’exemple par des centaines de composants et votre site va être très lent.

La solution idéale est de recréer les ombres portées avec CSS.

Vous pouvez créer de nombreux effets avec le CSS, y compris les ombres portées. Si un développeur peut utiliser CSS pour faire des ombres au lieu d’intégrer un PNG. Le coté positif du CSS, c’est qu’il est plus léger, il vous permettra donc d’obtenir un poids de page réduit. En revanche pour la typographie et les ombres portées, ils ne seront pas 

Sur le côté positif, CSS est plus léger, vous permettant d’obtenir des actifs à une taille beaucoup plus petite. En revanche, la typographie et les ombres portées ne seront pas identiques à celles créées en CSS.

png et svg 700x332 - Prévoir les conflits de développement dans la conception du projet

Une des images ci-dessus est un PNG, l‘autre est un SVG.

Bien que les deux images soient visuellement identiques, le PNG à un poids de XX ko tandis que le SVG obtient le poids de XX ko seulement. De plus, l’ombre sur le SVG peut être articulée.

3. Prototypes collaboratifs : communication claire et concise.

Lorsqu’on travaille sur des projets sans prototype, la communication autour du projet devient difficile, entre les appels téléphoniques et les notes gribouillées à la vas vite.

Voici un processus de travail pour améliorer la clarté en réduisant la documentation autour du projet et de vos attentes :

  • Au début d’un projet de site web, dite vous que la documentation doit agir comme noyau de connaissances plutôt que d’une encyclopédie. Par exemple, définissez la conception des bases et les principes techniques, puis reportez-vous à d’autres outils pour présenter votre vision du projet. Découvrez une liste d’outils de prototypage ou notre boite à outils pour les projets web.
  • Une fois le projet démarré, créez des flux utilisateurs pour planifier les interactions pour l’ensemble du système. InVision vous permet par exemple d’ajouter des commentaires pour que les développeurs puissent poser des questions et comprendre le système.

Si vous avez trouvé ces conseils utiles, continuez à consulter mon blog. N’hésitez pas à me donner votre avis et à noter les articles.

Je recherche actuellement un passionné du métier d’UX designer pour rédiger des articles sur Blog UX designer.fr. Contactez-moi ici !

 

Mauvaise harmonisation, négatif pour l’expérience utilisateur ?

Aujourd’hui, dans cet article, j’ai souhaité vous parler de l’importance de l’harmonisation ainsi que de la cohérence dans le message d’une entreprise.

Je travaille en ce moment dans une entreprise de jardinerie en ligne, c’est une entreprise qui réalise son chiffre d’affaires que 6 mois dans l’année et qui perçoivent des problèmes de conversion.

Il est donc important pour eux, d’améliorer le taux de conversion des utilisateurs ainsi que l’expérience utilisateur. Après une exploration de leurs différents moyens de communication, il est ressorti un problème d’harmonisation du site, alors que l’entreprise à une charte UX, la majeure partie des interfaces ne correspondent pas à cette charte. Première incohérence, mais qui concerne le design.

Dans cet article, je vais plutôt me concentrer sur les services de l’entreprise, tout d’abord, il est important de garder en tête qu’une entreprise doit avoir le même message tout au long du processus d’achat de l’utilisateur, surtout en ce qui concerne les services.

L’un des risques majeurs, est l’incompréhension de l’utilisateur devant les différentes interprétations, messages de la même entreprise au cours d’un même processus d’achat.

Exemple d’incohérence :

Maintenant, décortiquons le parcours client de l’entreprise, dans un premier temps, je reçois un e-mail de prospection, l’e-mail me propose les dernières offres du moment, je tombe sur les services suivant :

picto_emailling
Très bien, nous avons donc des pictos plus ou moins clair, couleur gris foncé et texte de même couleur, d’un corps plutôt petit.

Ensuite, je clique sur l’une des offres, j’arrive sur le site internet et je me retrouve avec les services suivant :

picto_sitewebNous avons une couleur différente de l’email, et le message n’est pas identique, nous avons un texte gris clair et vert bolder.

Ensuite, je souhaite réaliser une commande, je navigue sur le site, j’ajoute un article dans mon panier et… Je tombe sur de nouveaux pictos service

picto
Donc, nous avons 5 nouveaux pictos, qui ne ressemble pas du tout à la charte de base, ni aux messages engendrai depuis le début du parcours client.

Je valide ma commande et je reçois un e-mail de confirmation de commande, ce qui reste classique. Puis rebelote, nouveaux pictos.
picto_emailling_03
Des pictos en couleurs, qui ne ressemblent à aucun autre pictogramme du parcours client.

Conclusion :

L’harmonisation d’un parcours client est pour moi, un facteur essentiel pour l’augmentation du taux de conversion, car une incohérence dans le message que l’entreprise souhaite dégager peut-être incompris et donc discrédité la maque.

Il est donc important d’uniformiser les différents messages envoyés aux utilisateurs, nous avons pris pour exemple les services de cette entreprise, mais nous pouvons très bien retrouver ces mêmes cas dans différentes entreprises.

Wireframe – Comment communiquer sur la hiérarchie visuelle

L’utilisation de la couleur est l’une des meilleures façons de communiquer sur la hiérarchie visuelle, mais sur un wireframe, il est l’un des pires. La plupart des concepteurs pensent qu’ils ont besoin d’utiliser de la couleur sur un wireframe. Si vous utilisez de la couleur pour afficher le poids visuel, la conception finale pourrait perdre sa clarté.

Noir et blanc : meilleure visibilité pour le wireframe

Il est facile de différencier l’importance d’un élément de couleur sur un wireframe car tout le reste est en noir et blanc. Mais il n’y a aucun moyen de savoir si cet élément aura la même clarté lorsque vous traduisez le wireframe en une maquette.

En effet, une maquette aura beaucoup d’autres couleurs qui entrent en compétition entre elles. Tout élément de couleur sur votre wireframe doit apparaît plus claire. Le poids visuel que vous lui avez donné diminue lorsque d’autres éléments de la page ont aussi la même couleur.

Un autre danger de l’utilisation de la couleur est que beaucoup de designers finissent par compter sur elle comme le principal moyen de montrer la hiérarchie visuelle du projet. Il est facile de faire des éléments qui se distinguent par la couleur.

Autres caractéristiques de la hiérarchie visuelle

En ajoutant de la couleur à votre wireframe, il est difficile d’évaluer l’importance des éléments visuelle. Car la couleur éclipse d’autres attributs hiérarchiques. Lorsque vous évitez la couleur, vous permettez aux éléments du wireframe de se démarquer. Le poids visuel des éléments de couleurs se perd sur une maquette, mais ces attributs restent intacts.

Taille

L’élément le plus gros est celui qui attire le plus notre attention. Pour travailler la taille, un élément a besoin d’être plus grand par rapport aux autres éléments autour d’elle.

Forme

Vous pouvez afficher du contenu sur vos pages, pour mettre en évidence une zone de contenu. Vous n’êtes pas limité à seulement la couleur et la taille. Utilisez également la forme, placer une boîte autour du contenu, cela donne de l’importance à la zone.

Wireframe d'un site internet

Placement

Il y a des zones qui recevront plus d’attention que d’autres. Placer le contenu important dans ces domaines d’attention élevé. Le meilleur endroit pour placer vos éléments importants se trouve, au-dessus du fold, là où les yeux de l’utilisateur se rivent le plus.

Coloriage inverse

La colorisation inversée peut ajouter de la clarté dans la hiérarchie des informations. La plupart des wireframes utilisent des couleurs sombres sur un fond clair. En effet, la plupart des sites utilisent souvent une couleur d’arrière-plan neutre.

Lorsque vous inversez les couleurs, vous appliquez une couleur claire sur un fond sombre. Ceci est un moyen efficace pour communiquer un fond de couleur sans suggérer de couleur spécifique.

En suggérant une couleur sur votre wierframe, l’utilisateur comprend que la couleur aura une incidence sur le reste de la conception.

La colorisation inversé, est souvent utilisée pour les éléments d’interface qui ont besoin d’un remplissage de couleur fort. Boutons, menus et notifications, qui ont souvent besoin de cette clarté visuelle, car les utilisateurs interagissent avec eux.

Une hiérarchie visuelle sans couleur

Si votre hiérarchie visuelle n’est pas claire sans couleur, c’est que votre conception n’utilise pas assez d’attributs. Le wireframe sans couleur vous permet d’évaluer la clarté de votre structure et la mise en page. Un wireframe qui n’est pas clair, est un wireframe qui manque d’une hiérarchie forte. Ajouter de la couleur ne permettra pas une meilleure compréhension.

Outils pour la réalisation de vos wireframe

Il existe des outils qui peuvent vous aider à communiquer sur la hiérarchie visuelle. Ils permettent d’avoir une visualisation du wireframe dans son ensemble. Découvrez la liste des différents logiciels de prototypage.

E-commerce améliorer l’expérience utilisateur #4 – Checkout

Pour cette 4ème partie de « Booster, l’expérience utilisateur de son e-commerce » nous allons nous pencher sur le checkout.

Un mauvais tunnel de commande (checkout) est le problème majeur des sites e-commerce. C’est à ce moment précis que l’utilisateur atteint son seuil de stress maximal. Pour améliorer l’expérience utilisateur de votre e-commerce, il est nécessaire d’organiser votre tunnel de commande, pour permettre à l’utilisateur d’avoir les bonnes informations au bon moment et surtout sans le faire fuir.

1 – Le design et informations

Le design est avant tout une stratégie, je m’explique, le tunnel de commande est l’un des moments les plus compliqués pour l’utilisateur, son stress augmente significativement, il est donc important d’avoir une réflexion en amont.

Avec mes petites années d’expérience dans le domaine du e-commerce, je vous suggère d’adopter un design sobre, clair et précis pour votre tunnel de commande. L’utilisateur à besoin d’avoir les bonnes informations, pour cela, je vous conseille d’ajouter des blancs entre les différentes zones de votre interface.

Cela permet une lecture simple pour l’utilisateur. La compréhension de l’utilisateur passe aussi par une bonne hiérarchie des titrages.

Pour optimiser au mieux, le tunnel de commande, certains éléments sont à améliorer ou à mettre en place si cela n’est pas encore fait. Cela passe par un zoning devant mettre en place les éléments suivant :

  • Page panier
    • Call to action (Valider mon panier, Continuer, Valider ma commande etc..)
    • La transparence sur les frais de port
    • Zone d’ajout pour les codes promos
    • La réassurance
  • Choix de la livraison
    • Bien indiquer les frais de port
    • Le nom du transporteur
    • La date de livraison approximative
  • Choix du paiement
    • Réassurance : Paiement 100% sécurisé
  • Page de remerciement
    • Récapitulatif de la commande
    • Récapitulatif de la livraison
    • Message de remerciement personnalisé (Merci Frédéric de nous faire confiance…)

Il est nécessaire d’indiquer les frais de port, c’est un des principaux motifs d’abandon du panier sur un site e-commerce et doit être placé sur une place de choix afin de limiter l’effet de surprise.

2 – Augmenter la réassurance de votre checkout

Pour garder un taux de conversion convenable, il est nécessaire d’ajouter de la réassurance pour le client, c’est aussi un bon moyen de réduire le taux d’abandon du panier.

N’hésitez pas à mettre en avant les services de votre site internet :

  • Livraison gratuite
  • Retours gratuits
  • Paiement 1 clic
  • Paiement 3 fois sans frais
  • Les différents transporteurs (Colissimo, Mondial Relay, Relais-Colis etc… )
  • Et les modes de paiement accepté (Paypal, CB, Chèque, etc. )

La réassurance du tunnel de commande passe aussi par la certification SSL, la certification permet à l’utilisateur savoir que son paiement sera sécurisé, vous pouvez aussi ajouter un picto et ou une phrase d’accroche pour indiquer que le paiement sera 100% sécurisé.

Une réassurance réussie passe aussi par l’ajout du numéro de votre service client, dans certains cas, les internautes aiment avoir le numéro de votre service client au cas où un problème survient, mais aussi en cas d’une question.

E-commerce : améliorer l’expérience utilisateur #3 – Navigation

Pour cette troisième partie de “Booster, l’expérience utilisateur de son e-commerce” nous allons nous pencher sur la navigation.

Quand un prospect arrive sur un site, il peut avoir une idée précise de ce qu’il recherche, il choisira doit d’utiliser le menu principal ou d’utiliser le champ de recherche si vous en avais mis un a disposition.

Pour améliorer l’expérience utilisateur de notre e-commerce, il est nécessaire d’organiser la navigation interne, pour permettre à l’utilisateur de trouver le produit qui lui correspond.

La navigation principale (header)

La plus grande partie du trafic que vous aller générer sur votre page d’accueil va s’orienter instinctivement par la navigation du header (en-tête du site), optimiser la navigation deviens donc essentiels.

“L’optimisation de la navigation peut rapporter jusqu’à 83 % de retour sur investissement.”

Dans un premier temps, pour l’organisation de votre menu, il est essentiel de trier vos produits dans différentes catégories, exemple :

  • Homme
    • Vêtements
    • Chaussures
    • Accessoires
  • Femme
    • Vêtements
      • Robes
      • Pantalons
      • T-shirt
    • Chaussures
    • Accessoires
  • Enfant
    • Vêtements
    • Chaussures
    • Accessoires

L’organisation de vos catégories peut se réaliser sous plusieurs niveaux.

Niveau 1

  • Homme
  • Femme
  • Enfants

Le niveau 1, permet de renvoyer directement sur une page dédiée aux produits de la catégorie “homme”, vous pouvez alors mettre en avant différentes promotions, services pour cette catégorie.

Niveau 2

  • Homme
    • Vêtements
    • Chaussures
    • Accessoires

Au niveau 2, nous pouvons envoyer nos utilisateurs directement vers la page liste de la catégorie “Pantalons”, les pages listes peuvent aussi être optimiser.

Niveau 3

  • Robe
    • Robe courte
    • Robe longue
    • Robe soirée

Le niveau 3, la navigation d’un e-commerce, oriente précisément l’utilisateur vers ça recherche, elle permet aussi de mettre en avant les opérations commerciales du moment, les derniers articles de votre blog, les tendances…

Différents niveaux de navigation pour un header e-commerceLorsque vous utilisez trois niveaux, faite très attention au design. Il faut que l’utilisateur comprennent bien la hiérarchie des informations.