Fermer

novembre 18, 2019

5 exemples choquants d'UX de sites Web épouvantables


L'importance de l'expérience utilisateur (UX) dans de nombreux domaines – que ce soit un site Web, une application ou même des éléments de tous les jours que vous utilisez souvent – n'est pas un nouveau concept, mais force est de constater que l'intérêt grandissant qu'il suscite aujourd'hui à la lumière de la révolution technologique .

Selon Impactbnd, 79% des consommateurs qui n’aiment pas ce qu’ils voient sur votre site Web trouveront simplement un autre site pour mener à bien leur tâche. Cela rend le site Web UX utile, en particulier pour les sites Web professionnels, car cela signifie que vous courez moins de risques de perdre vos concurrents.

Toutefois, cela n’a pas empêché quelques entreprises de concevoir des pages déplaisantes. Voici quelques exemples de sites Web susceptibles d'offrir aux clients une mauvaise expérience utilisateur.

 Awful-Website-UX1 "width =" 800 "style =" width: 800px; "srcset =" https://blog.spiralytics.com/hs-fs/hubfs/Awful-Website-UX1. jpg? width = 400 & name = Awful-Website-UX1.jpg 400w, https://blog.spiralytics.com/hs-fs/hubfs/Awful-Website-UX1.jpg?width=800&name=Awful-Website-UX1.jpg 800w, https://blog.spiralytics.com/hs-fs/hubfs/Awful-Website-UX1.jpg?width=1200&name=Awful-Website-UX1.jpg 1200w, https://blog.spiralytics.com/hs -fs / hubfs / Awful-Website-UX1.jpg? width = 1600 & name = Awful-Website-UX1.jpg 1600w, https://blog.spiralytics.com/hs-fs/hubfs/Awful-Website-UX1.jpg? width = 2000 & name = Awful-Website-UX1.jpg 2000w, https://blog.spiralytics.com/hs-fs/hubfs/Awful-Website-UX1.jpg?width=2400&name=Awful-Website-UX1.jpg 2400w " values ​​= "(max-width: 800px) 100vw, 800px

À première vue, vous ne pourrez pas dire de quoi parle Arngren (pas parce que c'est en norvégien, mais parce que vous voulez fermez votre navigateur instantanément). Nous ne pouvons pas vous en vouloir non plus si vous ne savez pas qu’il s’agit d’un site de annonces classées, car cette information n’est pas évidente.

Le fouillis non organisé est dû au fait que la page n'utilise pas de grilles pour séparer les graphiques, le contenu, les liens et les autres éléments qu'elle contient. En dehors de cela, il a également une structure de navigation médiocre, le texte est de tailles et de couleurs différentes (ce qui le rend illisible) et le ton général n'a pas de thème particulier.

La première chose à corriger ici est la grille car elle aidera à créer une interface cohérente et bien conçue, où les éléments ne sont pas trop proches les uns des autres. La refonte du site devrait commencer par le rendre plus intelligible et moins gênant.

 Awful-Website-UX2 "width =" 800 "style =" width: 800px; "srcset =" https://blog.spiralytics.com/hs-fs/hubfs/Awful-Website -UX2.jpg? Width = 400 & name = Awful-Website-UX2.jpg 400w, https://blog.spiralytics.com/hs-fs/hubfs/Awful-Website-UX2.jpg?width=800&name=Awful-Website- UX2.jpg 800w, https://blog.spiralytics.com/hs-fs/hubfs/Awful-Website-UX2.jpg?width=1200&name=Awful-Website-UX2.jpg 1200w, https: //blog.spiralytics. com / hs-fs / hubfs / Awful-Website-UX2.jpg? width = 1600 & name = Awful-Website-UX2.jpg 1600w, https://blog.spiralytics.com/hs-fs/hubfs/Awful-Website-UX2 .jpg? width = 2000 & name = Awful-Website-UX2.jpg 2000w, https://blog.spiralytics.com/hs-fs/hubfs/Awful-Website-UX2.jpg?width=2400&name=Awful-Website-UX2. jpg 2400w "tailles =" (largeur maximale: 800px) 100vw, 1945

Tout comme Arngren, vous ne saurez pas instantanément ce que fait Pacific Northwest; mais pas parce qu’ils ne l’ont pas expliqué. Vous avez probablement simplement décidé de ne pas lire (ou peut-être de ne pas remarquer) le paragraphe d'introduction en rouge, toutes couleurs confondues.

Le site Web de ce détaillant de pièces et de fournitures pour rayons X présente une palette de couleurs déroutante et désagréable: l'arrière-plan se heurte aux couleurs du texte et du lien utilisées. Des accessoires pour l’ajout de listes de catégories aux produits, mais il serait préférable d’utiliser une couleur contrastant avec l’arrière-plan pour que le texte ne soit pas flou.

En outre, pour un site qui vend des produits, il existe un grave manque de CTA. Il n’existe pas non plus de bouton d’achat à partir des pages de produit, et on ne sait pas comment on peut le faire.

Dans ce cas, un bon point de départ est de choisir la palette de couleurs appropriée: l’atmosphère ne devrait pas gêner votre les yeux des visiteurs et devrait leur permettre de naviguer sur le site sans douleur.

 Awful-Website-UX3 "width =" 800 "style =" width: 800px; "srcset =" https://blog.spiralytics.com/hs-fs/hubfs/Awful-Website-UX3. jpg? width = 400 & name = Awful-Website-UX3.jpg 400w, https://blog.spiralytics.com/hs-fs/hubfs/Awful-Website-UX3.jpg?width=800&name=Awful-Website-UX3.jpg 800w, https://blog.spiralytics.com/hs-fs/hubfs/Awful-Website-UX3.jpg?width=1200&name=Awful-Website-UX3.jpg 1200w, https://blog.spiralytics.com/hs -fs / hubfs / Awful-Website-UX3.jpg? width = 1600 & name = Awful-Website-UX3.jpg 1600w, https://blog.spiralytics.com/hs-fs/hubfs/Awful-Website-UX3.jpg? width = 2000 & name = Awful-Website-UX3.jpg 2000w, https://blog.spiralytics.com/hs-fs/hubfs/Awful-Website-UX3.jpg?width=2400&name=Awful-Website-UX3.jpg 2400w " tailles = "(largeur maximale: 800px) 100vw, 800px

Penny Juice est un autre contrevenant aux couleurs. Le fait que vous vendiez des produits colorés ne signifie pas que votre site doit adopter son apparence éclatante.

Si Pacific Northwest conserve la couleur d'arrière-plan mais modifie les textes, Penny Juice vient de tout mettre en œuvre. Vous ne pourrez pas dire que le site est en fait une boutique en ligne grâce au mélange de couleurs vives et à un manque d'espace négatif.

En outre, la lisibilité du texte en souffre énormément, la navigation n’est pas claire et les enfants pauvres figurant sur l’image de la bannière sont cachés derrière des lignes de texte et un fond solide. Il est à noter que le design actuel est en fait une mise à niveau par rapport à 2015.

Vous n'avez pas besoin d'un mélange de couleurs pour faire une déclaration: une bonne conception Web peut être simple, propre et beaucoup d'espaces blancs .

 Awful-Website-UX4 "width =" 800 "style =" width: 800px; "srcset =" https://blog.spiralytics.com/hs-fs/hubfs/Awful-Website -UX4.jpg? Width = 400 & name = Awful-Website-UX4.jpg 400w, https://blog.spiralytics.com/hs-fs/hubfs/Awful-Website-UX4.jpg?width=800&name=Awful-Website- UX4.jpg 800w, https://blog.spiralytics.com/hs-fs/hubfs/Awful-Website-UX4.jpg?width=1200&name=Awful-Website-UX4.jpg 1200w, https: //blog.spiralytics. com / hs-fs / hubfs / Awful-Website-UX4.jpg? width = 1600 & name = Awful-Website-UX4.jpg 1600w, https://blog.spiralytics.com/hs-fs/hubfs/Awful-Website-UX4 .jpg? width = 2000 & name = Awful-Website-UX4.jpg 2000w, https://blog.spiralytics.com/hs-fs/hubfs/Awful-Website-UX4.jpg?width=2400&name=Awful-Website-UX4. jpg 2400w "tailles =" (largeur maximale: 800px) 100vw,

Étant donné que Suzanne Collins est le cerveau derrière l’une des séries de livres et de films les plus réussies de tous les temps, c’est une surprise de voir qu’elle court un site très humble. Si humble, en fait, qu'elle n'a pas pris la peine de le faire de manière professionnelle (et si elle le faisait, elle n'en aurait pas pour son argent.)

La première chose étrange à ce sujet, c'est que le site est conçu pour 200 personnes. % zoom – cela ne signifie pas que vous devez être aussi zoomé avant pour pouvoir y naviguer, cela semble tout simplement mieux vu de cette façon. La page d'accueil montre une photo de l'auteur. Faites défiler la liste et vous verrez quelques-unes de ses œuvres célèbres. Curieusement, les images des couvertures du livre ne sont pas alignées, la plupart à gauche et quelques-unes au centre.

La photo des livres est accompagnée de quelques critiques à ce sujet ci-dessous… mais vous ne verrez que les critiques de The Hunger Games: Mockingjay . Si vous souhaitez lire le reste, cliquez sur le lien Works ou mettez en surbrillance toute la page d'accueil. Il semble que le concepteur ait décidé d'utiliser la même couleur d'arrière-plan pour la police. Il suffit de dire que le site Web de Collins est une combinaison d’erreurs amateurs mais facilement évitables.

 Awful-Website-UX5 "width =" 800 "style =" width: 800px; "srcset =" https://blog.spiralytics.com/hs-fs/hubfs/Awful-Website -UX5.jpg? Width = 400 & name = Awful-Website-UX5.jpg 400w, https://blog.spiralytics.com/hs-fs/hubfs/Awful-Website-UX5.jpg?width=800&name=Awful-Website- UX5.jpg 800w, https://blog.spiralytics.com/hs-fs/hubfs/Awful-Website-UX5.jpg?width=1200&name=Awful-Website-UX5.jpg 1200w, https: //blog.spiralytics. com / hs-fs / hubfs / Awful-Website-UX5.jpg? width = 1600 & name = Awful-Website-UX5.jpg 1600w, https://blog.spiralytics.com/hs-fs/hubfs/Awful-Website-UX5 .jpg? width = 2000 & name = Awful-Website-UX5.jpg 2000w, https://blog.spiralytics.com/hs-fs/hubfs/Awful-Website-UX5.jpg?width=2400&name=Awful-Website-UX5. jpg 2400w "tailles =" (largeur maximale: 800px) 100vw, 1945px

Maintenant, par où commencerons-nous avec celui-ci?

Soyons clairs, les voitures de Ling semblent être un grand nom le secteur de la location de voitures dans la région de Gateshead au Royaume-Uni. Le site a une bonne navigation et les liens fonctionnent. Mais ce n’est certainement pas parfait.

L'arrière-plan collant et psychédélique est inutile. Les images GIF (avec le propriétaire, rien de moins) et d’autres images qui bougent lorsque vous survolez, ainsi que la description amusante des voitures les plus vendues, peuvent être accrocheuses, mais elles donnent toutes un aspect peu professionnel au site.

Il existe de nombreuses fonctionnalités qui n'ont rien à voir avec le leasing automobile, comme le karaoké, les jeux et même un flux en direct d'employés de Ling's Cars… quoi?

Nous comprenons qu'il s'agit là de gadgets et ils ont éventuellement voulu rendre le site plus propre à un moment donné. Cependant, il est également probable qu’ils aient été si loin dans le terrier qu’ils se soient contentés de plaisanter. Cela ne change rien au fait que cela pose problème. Chaque élément appelle l'attention des visiteurs, ils ne savent donc pas où chercher et ont probablement abandonné tout à fait.

En outre, quelques détails cruciaux sur l'entreprise se trouvent au bas de la (très longue) page d'accueil. le visiteur doit continuer à faire défiler la liste pour les lire – un non-non en UX.

L’unité du style des éléments de page le rendra plus lisse et plus concis, et est essentiel à la simplicité de la navigation dans l’interface.

Vos clients méritent mieux

Aujourd'hui, les sites Web sont en place non seulement pour présenter les offres de votre entreprise. Avec l'avènement du commerce électronique, ils sont désormais également essentiels pour la conclusion d'accords et la conversion des visiteurs en clients. C’est pourquoi une mauvaise conception de l’interface et de l’expérience utilisateur peut nuire à vos chances de vente.

Une compréhension des principes fondamentaux de UX tels que la conception, la vitesse de chargement, la clarté, la facilité de navigation, entre autres, est la première étape vers la conception et l’interface optimales du site Web.

Avez-vous d'autres exemples de sites Web avec un design UX épouvantable? Assurez-vous de les partager dans les commentaires!

 Téléchargez le livre électronique: 25 Site Web Must Haves




Source link