All Posts in UX design

avril 27, 2018 - No Comments!

La page 2 de Google n’existe plus!

L’avez-vous remarqué? La pagination des résultats de recherche du moteur de recherche Google n’existe plus, du moins sur les téléphones et tablettes intelligents.

Google effectue actuellement des tests d’optimisation et de présentation des résultats de recherche de sa plateforme mobile. Le changement sera bientôt déployé à l'ensemble de la communauté. Fini la pagination des résultats de recherche. C’est la navigation par défilement vertical qui est mise à profit sur mobile avec l’ajout d’un bouton « Plus de résultats » situé tout en bas des résultats de recherche.

Le nouveau bouton «Plus de résultats» remplace le système de pagination du moteur de recherche de Google sur plateforme mobile.

Le nouveau bouton «Plus de résultats» remplace le système de pagination du moteur de recherche de Google sur plateforme mobile.

Une décision sensée qui priorise le contenu de qualité

Ce changement reflète une approche axée sur les besoins et les habitudes des utilisateurs de plateformes de recherche mobile.

D’abord, puisque l’utilisateur ne dépasse rarement la première page des résultats de recherche, il n’a aucunement besoin de savoir que Google lui en offre plus d’une dizaine. Ce qu’il recherche, c’est du contenu de qualité correspondant aux mots clés qu’il a insérés dans le moteur de recherche.

Si l’utilisateur ne trouve pas de réponse dans les premiers résultats de sa requête, il peut utiliser le nouveau bouton « Plus de résultats ». Celui-ci présente à l’utilisateur du contenu de meilleure qualité que celui présenté par l’ancien système de pagination. En effet, chaque fois que ce bouton « Plus de résultats » est appuyé, 10 résultats de recherche naturels supplémentaires sont chargés, puis 3 nouvelles publicités Adwords de Google s’affichent également, mais tout au bas de ces nouveaux résultats de recherche. Ce sont donc les sites web au référencement naturel qui s’affichent en premier, et les publicités des annonceurs en second, contrairement à ce qui se faisait avant!

À vos téléphones!

Avez-vous pris connaissance de cette nouvelle fonctionnalité? Si oui, que pensez-vous de ce changement?

mars 14, 2018 - No Comments!

Page d’erreur 404:
Frustration… ou opportunité UX?

Temps de lecture: 5 minutes

Quoi de plus frustrant que d’atterrir sur une page d’erreur 404? Cette page cul-de-sac du web interrompt la navigation et nuit à l’expérience utilisateur.

Cependant, lorsque son design est axé sur l’expérience utilisateur, la page d’erreur 404 peut transformer le désagrément de navigation en véritable opportunité de conversion!

Le présent article contient quelques conseils et bonnes pratiques en matière de design des pages d’erreur 404.

D’où viennent les erreurs 404?

Ce code d’erreur est certainement le plus répandu et le plus connu du web. Renvoyé par les serveurs d’hébergement web, il indique que les ressources ou pages web demandées par l’usager sont introuvables dans la base de données.

Les erreurs 404 peuvent être causées par l’utilisateur lui-même s’il effectue des fautes de frappe lors de la saisie de l’URL. Dans la majorité des cas toutefois, l’erreur provient des administrateurs web.

Causes fréquentes des erreurs 404

La migration d’un site web vers un nouveau serveur d’hébergement

En cas de changement d’hébergement ou de nom de domaine, il peut être difficile d’effectuer la redirection de toutes les pages et tous les liens internes du site web. Certaines pages peuvent être oubliées ou supprimées lors du processus de transfert. Les liens qui mènent à ces pages inexistantes deviennent ce qu’on appelle des « liens morts », puisqu’ils ne mènent nulle part.

La gestion d’un site web

En effectuant la gestion quotidienne ou hebdomadaire d’un site web, certains administrateurs web décident de supprimer un produit par exemple, ou de renommer une catégorie d’article. Certains modules de gestion de site web gèrent mal les changements d’URL occasionnés par de telles modifications, ce qui résulte en l’accumulation de liens morts.

Page d'erreur 404 par défaut

Par défaut, la page d’erreur 404 d’un fureteur présente très peu d’information. Pour les utilisateurs, ces pages sont particulièrement frustrantes parce qu’elles interrompent la navigation.
Source de la capture d'écran: http://www.designbypearl.com/404

Personnalisation de la page d’erreur 404: bonnes pratiques

La meilleure utilisation qu’on puisse faire d’une page d’erreur 404 en termes d’efficacité UX, c’est de s’en servir pour réorienter l’utilisateur et lui permettre de reprendre la navigation. En personnalisant la page d’erreur 404 d’un site web, on évite de perdre le visiteur! Une bonne page d’erreur 404 doit:

1. Informer l’utilisateur de la nature de l’erreur

Elle doit rassurer l’utilisateur en détaillant la nature de l’inconvénient.

Page d'erreur 404 d'Adobe

La page d’erreur 404 du site web d’Adobe, par exemple, indique clairement que la page recherchée est introuvable.
Source de la capture d’écran: https://www.adobe.com/ca_fr/windows

2. Permettre à l’utilisateur de reprendre la navigation

Afin de ne pas perdre le visiteur, la page d’erreur 404 d’un site web doit le rediriger efficacement vers une autre section ou page du même site web. L’ajout d’un moteur de recherche permet à l’usager d’effectuer rapidement une recherche à même le contenu du site. Il est également recommandé d’ajouter des informations de contact.

Page d'erreur 404 de Apple

La page 404 de Apple inclut un moteur de recherche ainsi que plusieurs liens vers les différentes sections du site web.
Source de la capture d'écran: https://www.apple.com/fr/404

3. Être traitée avec humour!

La personnalisation des pages d’erreur 404 est vite devenue partie intégrante de la culture du web. Bien traitée, elle est un gage de qualité au niveau du design et du développement du site web. Plusieurs agences, compagnies et sites web de vente s’en servent pour faire de l’humour!

Page d'erreur 404 de l'agence Featuring

La page d’erreur 404 de l’agence Featuring invite les internautes à participer à un karaoké!
Source de la capture d'écran: https://featuringagency.com/fr/404

Page d'erreur 404 de l'agence Featuring

Sur la page d’erreur 404 de Pixar figure le personnage de Sadness du film Inside out avec la mention ‘Awww… Don’t cry.’ (« Awww… Ne pleure pas. »)
Source de la capture d'écran: https://www.pixar.com/404

Je termine avec la page d’erreur 404 du site web des Jeux olympiques de Pyeongchang. Le comité olympique s’est moqué de l’erreur technique du spectacle d’ouverture des Jeux olympiques de Sochi, en 2014. Les anneaux olympiques présentés au spectacle d’ouverture se formaient à partir de flocons de neige lumineux. Une erreur technique, cependant, a empêché le cinquième anneau de se déployer! ...D’où le visuel humoristique de la page d’erreur 404 des JO de Pyeongchang ainsi que la mention ‘Sometimes, things don’t go as planned…’ (« Parfois, les choses ne se passent pas comme prévu…»)!

Erreur technique du spectacle d'ouverture des Jeux olympiques de Sochi, en 2014

Les anneaux lumineux du spectacle d’ouverture des Jeux olympiques de Sochi, en 2014. Le cinquième anneau ne s’est jamais déployé.
Source de l’image: https://www.webnoviny.sk/fotogaleria/otvaraci-ceremonial-zimnych-olympijskych-hier-v-soci/otvaracim-ceremonialom-odstartovali-zimne-olympijske-hry-v-soci-jpeg-5/

Page d'erreur 404 du site des Jeux olympiquesde Pyeongchang

La page d’erreur 404 du site web des Jeux olympiques de Pyeongchang, en 2018.
Source de l’image: http://olympics.org/404

novembre 16, 2017 - No Comments!

Les principales étapes de conception, de création et de développement d’un site web

Afin de faciliter la compréhension de mon processus de création de sites web, j’ai créé ce visuel informatif. J’y détaille les différentes étapes de conception, de création et de développement d’un site web.

 

Un travail d’équipe!

Le design d’un site web n’est pas une tâche qui s’effectue en solo! Je travaille en équipe avec vous tout au long du processus. Au courant des étapes préparatoires du projet, vous êtes appelés à réfléchir sur les objectifs de votre site web. Je vous demande également d’identifier votre public cible. Après cette analyse préliminaire, nous sommes en mesure de dresser la liste des contenus à produire et des fonctionnalités à inclure dans votre site web. Nous définissons également un échéancier de production qui nous aidera à maintenir le cap tout au long du processus.

La rédaction du contenu et l’architecture de l’information

C’est au cours de l’étape de rédaction du contenu et d’architecture de l’information que j’organise le contenu en différentes pages et sections. J’utilise un organigramme pour présenter la structure du site web. À cette étape, je commence déjà à penser aux différentes façons de permettre aux usagers d’interagir avec votre site web et de naviguer à travers vos contenus. Au courant du cycle d’approbation, nous finalisons la création des contenus et je peaufine la structure du site web.

La création et le design du site web

Ensuite vient l’étape de la création et du design web. Je commence toujours par assembler des wireframes. Les wireframes consistent en des schémas simples qui permettent de mieux définir les différentes zones et les composantes de chaque page de votre site web. C’est, en quelque sorte, le squelette de votre site web. Une fois les wireframes finalisés, il devient beaucoup plus facile de monter les prototypes du site web. Je crée les prototypes de façon responsive, c’est-à-dire de façon à ce que le site web s’adapte au support où il est visionné, que ce soit sur un écran d’ordinateur, une tablette ou un téléphone intelligent.

Le développement web et l’intégration des contenus

Une fois les prototypes finalisés et approuvés, j’entame le développement web et l’intégration des contenus. Près de 80% des sites web que je produis sont développés à l’aide de la plateforme de gestion de contenus WordPress. Avec WordPress, il vous sera facile de modifier et d’ajouter vos propres contenus, sans toujours avoir à faire appel à mes services! J’offre une formation WordPress pour vous permettre de vous familiariser avec la plateforme. Avant de mettre votre site web en ligne, je fais évidemment plusieurs tests afin de repérer des irrégularités au niveau de la programmation. Une fois que tout est en place et que tout fonctionne parfaitement, j’effectue la mise en ligne!

Prêt à vous lancer?

Comme vous pouvez le constater, le processus de conception, de création et de développement d’un site web est demandant! Ne vous inquiétez pas, votre temps et votre argent seront rapidement rentabilisés. Il n’y a rien de mieux qu’une bonne présence web pour faire connaître votre entreprise et vos services. Maintenant que vous connaissez mieux le processus, êtes-vous prêts à entamer votre projet de site web? Contactez-moi!

À propos de l’auteur

Laurence Pilon est diplômée du programme de design de l’information (design UX et design e-commerce) de l’Université Reading, en Angleterre. Elle travaille présentement à la Fondation du CHU Sainte-Justine. Elle enseigne également le design graphique au Collège Ahuntsic.