Tout le monde veut recevoir des commentaires positifs pour un travail bien fait. C'est une des raisons pour lesquelles tant d'entreprises incluent des témoignages sur leur site Web.
Au-delà des sentiments chaleureux et déroutants, les témoignages peuvent également aider à recruter de nouveaux clients. Savoir que d'autres ont eu une bonne expérience inspire confiance. Dans l'ensemble, c'est un petit cycle heureux qui aide à garder l'entreprise en plein essor.
En termes d'implémentation d'une interface utilisateur de témoignage, la simplicité est souvent meilleure. Cependant, cela ne signifie pas qu'ils doivent être ennuyeux. L'utilisation intelligente de la couleur, du design et des effets spéciaux peut faire ressortir vos témoignages.
Jetons un coup d'œil à quelques exemples qui donneront à vos témoignages un endroit où briller.
Tous à bord du carrousel
Les témoignages sont souvent combinés avec des curseurs et des carrousels pour l'interactivité et l'efficacité. Un certain nombre d'exemples de notre collection les utilisent. Cependant, cet exemple est unique dans sa conception. Bien qu'il y ait des flèches de navigation standard au bas de la fonctionnalité, cliquer sur les photos des clients de chaque côté vous permettra également de faire défiler d'avant en arrière.
Voir le carrousel de témoignages réceptifs de Md Nahidul Islam's Pen (@thenahid)
Formes et arcs-en-ciel
Si vous cherchez à ajouter une section de témoignage à votre page qui se démarque, il serait difficile de battre cela. Tout d'abord, il y a le dégradé animé qui change de couleur en arrière-plan. Deuxièmement, l'utilisation du chemin de clip CSS crée un look magnifique sur les images. Même avec tout cela, l'interface utilisateur est toujours simple et élégante.
Voir le curseur réactif du stylo de témoignage de hellokatili (@hellokatili)
JavaScript n'est pas requis
Pour tous les puristes CSS, voici une solution qui ne nécessite pas une seule ligne de JavaScript. Bien que ce ne soit rien d'impressionnant en termes d'apparence, c'est en fait une bonne chose. Il vous laisse beaucoup d'espace pour que vous puissiez le concevoir en fonction de vos besoins. En outre, cela s'intégrerait bien dans un espace relativement petit.
Voir le stylo de témoignage MAHESH AMBURE Slider Pure CSS (@ maheshambure21)
C'est dans les cartes
L'interface utilisateur de cette carte est simple et belle. Chaque carte a sa propre photo d'arrière-plan, vraisemblablement pour utiliser la photo ou le logo d'un client. L'opacité CSS est utilisée pour permettre un contraste suffisant pour placer du texte blanc sur le dessus. Il encourage également l'utilisation de petites quantités de contenu, qui sont beaucoup plus faciles à digérer qu'un témoignage plus long.
Voir Pen # 1574 – LittleSnippets.net Testimonial Card (@littlesnippets)
Un nouvel angle
Le design est ce sur quoi nous nous concentrons dans cette démo qui ne fonctionne pas. Cela montre que la simplicité peut être vraiment efficace. Le léger angle dans la photo d'arrière-plan attire vos yeux, tandis que le rembourrage généreux autour de la date donne une sensation d'espace.
Voir le widget de témoignage Pen Stripe sur Tailwind CSS par Adam Wathan (@adamwathan)
Citations de voyage
Voici une version différente d'une interface utilisateur de témoignage. Il est en plein écran, et vous devez survoler les images pour voir le prix respectif de chaque personne. Le look est incroyablement net et les transitions sont fluides. Cela pourrait être une bonne option pour les sites Web plus artistiques.
Voir Hover Reveal Testimonial Pen par Dave Knispel (@daveknispel)
Une prise différente
Il y a beaucoup à aimer dans cet exemple. La conception du carrousel côte à côte crée un effet visuel intéressant. Les images se déplacent vers la gauche lorsque les guillemets changent vers la droite. En parlant de la zone de devis, il offre beaucoup d'espace blanc et est facile à lire. C'est un package qui est tout sauf typique.
Voir le curseur du stylo de témoignage, le curseur du swiper de md aqil (@ md-aqil)
Charte de couleurs
Autre excellent exemple de simplicité, cette conception de carte utilise quelques effets CSS pour se différencier. Il y a d'abord la citation légèrement tournée en bas. La transformation CSS est utilisée pour rompre l'uniformité, dans le bon sens. En outre, le dégradé coloré dans le pied de page rend la carte entière, osons-nous dire, "pop".
Voir le Pen mdJWryR par bradley (@bradleyham)
Belle louange
L'idée derrière la collecte de témoignages est de montrer que vous savez comment rendre les clients heureux. Pour plusieurs entreprises et organisations différentes, elles constituent un outil de vente clé.
Lorsqu'il s'agit d'afficher des témoignages sur un site Web, il existe un certain nombre d'options convaincantes. Les exemples ci-dessus montrent comment l'utilisation de la couleur, du mouvement, de la typographie et du design peut jouer un rôle important dans la création d'une interface utilisateur accrocheuse. C'est à vous de décider quelle approche convient le mieux à votre marque.
Vous voulez voir encore plus d'interfaces de témoignage? Jetez un œil à notre collection CodePen et découvrez ce que font les autres designers.
