Fermer

mai 29, 2018

Comment savezvous que votre site Web est un succès?


( Cet article est aimablement sponsorisé par Adobe .) Nous vivons dans un monde où presque toutes les entreprises ont une présence en ligne. Disons que vous voulez atteindre une entreprise – quelle serait la première chose que vous feriez? Eh bien, vous rechercheriez probablement des réponses à vos questions sur votre site Web ou tout simplement les coordonnées que vous pouvez trouver. Sans aucun doute, la première impression de n'importe quel site web est maintenant plus importante que jamais.

Il y a plus de 1,8 milliard de sites Web sur Internet en ce moment, et ce nombre augmente. L'augmentation de la concurrence apporte un grand intérêt à l'examen des facteurs de succès d'un site web. Bien que personne ne prétende qu'il est essentiel d'avoir un site Web réussi, il n'est toujours pas facile de comprendre ce que signifie exactement le succès et comment le mesurer réellement.

Trouver les réponses Des questions telles que «Quels sont nos objectifs?» et «Que voulons-nous réaliser avec ce site Web?» devraient être la première chose à faire lors du démarrage d'un nouveau projet. Sauter une étape de la définition des objectifs globaux et passer directement à la phase de conception est une erreur assez courante parmi de nombreuses équipes de produits. Sans savoir exactement ce que vous voulez réaliser, vos chances d'avoir un impact positif sur votre site web seront médiocres.

Chaque site web a besoin d'une stratégie de produit bien définie . Une stratégie donne le ton pour toutes les activités et donne un contexte qui aide à prendre des décisions de conception. Lorsque vous avez une solide compréhension de ce que vous attendez de votre site, cela vous aide à atteindre cet objectif.

 votre stratégie de produit
La stratégie de produit est une combinaison d'objectifs réalisables et de visions qui travaillent ensemble pour aligner l'équipe autour des résultats souhaitables à la fois pour l'entreprise et vos utilisateurs. (Crédit photo: Melissa Perri ) ( Grand aperçu )

Voici quelques astuces qui vous aideront à vous fixer un objectif:

  • Faire le lien avec les objectifs d'affaires. [19659009] Le but du site Web devrait servir à soutenir la mission de l'entreprise et rendre l'entreprise plus efficace dans la réalisation de cette mission.
  • Au lieu de dire quelque chose comme «Je veux avoir une forte présence en ligne», considérez ceci à la place: «Notre site Web devrait être un endroit où les utilisateurs soumettent des demandes pour nos services. Notre objectif est d'avoir 50% de nos commandes soumises en ligne, pas par téléphone. "
  • Effectuer des recherches sur les concurrents.
    Dressez la liste des sites de vos concurrents que vous trouvez réussis et essayez d'identifier leur succès. ] Efforcez-vous de créer une expérience axée sur l'utilisateur

    Parce que les visiteurs déterminent en fin de compte le succès d'un site Web, ils devraient être à l'honneur lors du développement du site. Comme Dieter Rams dit:

    "Vous ne pouvez pas comprendre le bon design si vous ne comprenez pas les gens; »

    Ainsi, commencez par rassembler cette compréhension:

    • Portrait vos utilisateurs idéaux
      Essayez de comprendre quel contenu ils peuvent avoir besoin / vouloir, leurs habitudes de navigation (comment ils préfèrent interagir avec un site web) et le niveau de leurs compétences techniques. Cette connaissance vous aidera à mieux les attirer.
    • Pensez au but de vos visiteurs.
      Mettez-vous à la place de votre visiteur. Que voulez-vous qu'ils soient faits? Commander? Vous contacter pour un devis? Devenir membre? Générez la conception à partir des objectifs et des tâches de l'utilisateur. * * Idéalement, chaque page que vous concevez doit avoir un objectif pour vos utilisateurs.
    • Créer une carte de trajet utilisateur
      Si vous avez un site existant, vous pouvez les gens l'utilisent en créant des cartes de voyage de l'utilisateur.

     Carte de trajet de l'utilisateur
    Carte du trajet de l'utilisateur. (Crédit d'image: Groupe Temkin)

    8 Caractéristiques essentielles de la conception d'un site Web influant sur son succès

    Dans cette section, nous n'allons pas discuter des détails d'implémentation de conception (par exemple, où un logo doit être placé). Nous allons nous concentrer sur les principaux principes et approches pour une conception web efficace. Ces principes seront revus sous l'angle de la première impression. Il est essentiel de se concentrer sur une expérience utilisateur exceptionnelle lors de la première visite. En règle générale, meilleure est la première impression, meilleure est la probabilité que les utilisateurs restent plus longtemps. Mais si la première impression est négative, les utilisateurs voudront peut-être éviter d'interagir avec votre produit pendant des années .

    Et comment pouvons-nous laisser une bonne première impression? Bon dessin . Les premières impressions sont 94% liées au design . Bien qu'il soit impossible de définir des décisions de conception uniques qui garantiront la réussite d'un site, il est toujours possible de se concentrer sur les facteurs susceptibles de créer une bonne première impression: la qualité du contenu, la convivialité et l'esthétique visuelle. ]1. Contenu de haute qualité

    La copie utilisée sur votre site Web est tout aussi importante que la conception du site Web; C'est la raison pour laquelle les gens visitent votre site Web. Plus de 95% des informations sur le web se présentent sous la forme d'une langue écrite. Même si votre site est magnifiquement conçu, ce n'est rien de plus qu'un cadre vide sans bon contenu. Un bon site Web a à la fois un excellent design et un excellent contenu.

    "Le contenu précède le design. Concevoir en l'absence de contenu n'est pas du design, c'est de la décoration. »

    Jeffrey Zeldman

    Correspond aux attentes des utilisateurs

    Fournissez les informations que vos utilisateurs s'attendent à voir. Par exemple, si vous concevez un site Web pour une chaîne de restaurants, la plupart des visiteurs s'attendent à trouver les menus des restaurants ainsi que les cartes indiquant l'emplacement de chaque restaurant.

    Le contenu qui crée la confiance

    un pouvoir persuasif; confiance fait croire à l'utilisateur dans vos produits ou services . C'est pourquoi il est si important de créer un sentiment de confiance sur votre site Web. Par exemple, si vous concevez un site Web qui offrira des services, vous devez inclure du contenu qui renforcera la confiance du visiteur dans ces offres. Un moyen simple d'y parvenir est de fournir des preuves sociales – mettez des témoignages sur votre site.

    Un bon exemple est Basecamp. La société recense les commentaires de ses clients ainsi qu'une statistique de données qui renforce la puissance de la preuve sociale.


     Basecamp associe des témoignages à des résultats de recherche pour créer un effet persuasif ultime.
    Basecamp associe des témoignages à des résultats de recherche effet persuasif.

    Focus sur la microcopie

    Microcopie est le petit mot que nous utilisons dans les interfaces utilisateur. Il peut s'agir d'étiquettes de champ ou de bouton ou de description de formulaires et d'autres objets d'interface utilisateur. La microscopie à droite peut influencer les bénéfices des entreprises. Mais pour écrire une bonne microcopie, il est essentiel de comprendre les intentions et les émotions de l'utilisateur.

    Lors de la Google I / O 2017, Maggie Stanphill a expliqué la valeur commerciale possible d'une bonne microcopie. Une fois que l'équipe Google a modifié l'option "Réserver une chambre" dans "Vérifier la disponibilité" dans la recherche sur Google, le taux d'engagement a augmenté de 17%. Cela est arrivé parce que la première version de microcopy («Book a room») était trop engageante pour cette étape du parcours de l'utilisateur. Les utilisateurs ne voulaient pas réserver une chambre; ils voulaient explorer toutes les options disponibles (plage de dates ainsi que les prix).


     La bonne microcopie est orientée vers l'humain. Dans cet exemple, 'Vérifier la disponibilité' répond à l'utilisateur où il est dans son état d'esprit.
    Une bonne microcopie est orientée vers l'humain. Dans cet exemple, 'Vérifier la disponibilité' répond à l'utilisateur où il est dans son état d'esprit.

    Le texte est optimisé pour la numérisation

    Il est nécessaire d'ajuster le contenu aux habitudes de navigation des utilisateurs. C'est un fait bien connu que les utilisateurs ne lisent pas en ligne ils scannent . Quand un nouveau visiteur se rapproche d'une page Web, la première chose qu'il essaie de faire est de scanner la page et de diviser le contenu en informations digestes. En analysant les parties clés de la page, ils essaient de déterminer si le contenu est adapté à leurs besoins.

    Voici quelques astuces pour formater votre contenu afin qu'il soit facile à numériser:

    • Évitez les longs blocs de texte sans images.
      Avec une énorme probabilité, un tel contenu sera ignoré. Utilisez des en-têtes, des paragraphes ou des puces pour découper un texte.
    • Optimisez les dispositions pour les motifs d'analyse naturels
      Des études de suivi oculaire ont identifié les personnes qui numérisent des pages dans un modèle «F» . Nous lisons les premières lignes, mais ensuite ils commencent à sauter la page, ne mettant en cache que des parties du message. Pour cette raison, il est important de garder votre texte préchargé – mettez les concepts les plus importants en premier, de façon à ce que nos yeux captent ces mots importants lorsque nous les traquons.

     Les utilisateurs ne lisent pas, ils scannent. Cette carte de chaleur montre où les points focaux des gens atterrissent. Les sites Web conçus efficacement fonctionnent avec le comportement naturel d'un lecteur.
    Les utilisateurs ne lisent pas, ils scannent. Cette carte de chaleur montre où les points focaux des gens atterrissent. Les sites Web bien conçus fonctionnent avec le comportement naturel d'un lecteur. (Crédit d'image: Useit)

    Astuce de conception: Vous pouvez mesurer votre score de lisibilité en utilisant un outil appelé Webpagefx

    Éviter la distraction

    L'œil humain peut reconnaître instantanément les objets en mouvement. Les objets en mouvement tels que les bannières animées ou la publicité vidéo peuvent capter l'attention des utilisateurs. Une abondance de ce contenu peut conduire à une expérience agaçante et distrayante . Ainsi, mettre l'accent sur un site avec des distractions minimes.


     Heatmaps des études de suivi de l'oeil: Les zones où les utilisateurs regardaient le plus sont colorées en rouge; les zones jaunes indiquent moins de vues. Les boîtes vertes sont utilisées pour mettre en évidence les publicités
    Heatmaps d'après les études de suivi de l'oeil: Les zones où les utilisateurs ont le plus regardé sont colorées en rouge; les zones jaunes indiquent moins de vues. Les boîtes vertes sont utilisées pour mettre en évidence les publicités. (Crédit d'image: NNGroup )

    Coordonnées

    Facilitez l'accès des personnes. Cette exigence semble assez évidente; encore, c'est une situation assez typique pour les nouveaux visiteurs d'avoir à chercher des informations de contact. Ne laissez pas cela se produire. Faire un numéro de téléphone, email, adresse et un formulaire de contact facilement accessible.

    Astuce de conception rapide: Lors de la conception de votre site, ne faites pas d'email ou numéro de téléphone une partie d'une image. Le numéro de téléphone / courriel devrait être en texte clair afin que les utilisateurs puissent copier cette information.

    Des images et des vidéos pertinentes de haute qualité

    Des études ont prouvé que les gens sont majorly apprenants visuels . La plupart des gens sont capables de comprendre et de mieux comprendre les concepts lorsqu'ils sont livrés de manière visuelle.

    Rappelez-vous le vieil adage: «Une image vaut mille mots»? C'est pertinent pour la conception web. Un moyen simple d'augmenter l'attrait visuel est de fournir des images de haute qualité ou du contenu vidéo.

    Un bon exemple est Tesla qui ne dit pas les avantages de sa voiture mais montre plutôt une vidéo rapide qui fait il est clair ce que c'est que de conduire une Tesla:


     Tesla utilise un principe 'montrer, ne pas dire' en démontrant les avantages de l'utilisation des voitures.
    Tesla utilise un principe 'show, do not tell' quand démontrer les avantages de l'utilisation des voitures.

    2. Interactions simples

    Selon l'enquête Hubspot, 76% des répondants ont mentionné la facilité d'utilisation comme la caractéristique la plus importante d'un site Web. C'est pourquoi le principe "Keep It Simple" (KIS) devrait jouer un rôle primordial dans le processus de conception de sites web.

    Cut Out The Noise

    L'interface utilisateur surcharge votre utilisateur avec trop d'informations – chaque bouton ajouté, image, et la ligne de texte rend l'écran plus compliqué. Couper le fouillis sur un site Web rendra le message principal plus facilement compris par les visiteurs. N'incluez que les éléments les plus importants pour la communication et utilisez suffisamment d'espaces. Cela aidera à réduire la charge cognitive pour les visiteurs et facilitera la perception de l'information présentée à l'écran.

    Astuce de conception rapide: Mettez plus de poids visuel sur les éléments importants. Élaborez des éléments importants, tels que des boutons d'appel à l'action ou des points de connexion pour que les visiteurs les voient immédiatement. Vous pouvez mettre en valeur des éléments utilisant différentes tailles ou couleurs.


     Lyft met en évidence les informations les plus importantes sur une page (le bouton d'incitation à l'action).
    Lyft fournit les informations les plus importantes sur une page. bouton d'action) se démarquer.

    Strong Visual Hierarchy

    Plus la hiérarchie visuelle est bonne, plus votre contenu sera facilement perçu par les utilisateurs (loi de Simon). Une grille vous permet d'organiser les informations de manière à faciliter la lecture et la compréhension des informations présentées sur la page. L'utilisation de grilles facilite grandement la création d'une mise en page qui semble équilibrée.


     Utilisez une disposition en grille lors de la conception d'expériences Web. Utilisation de grilles dans Adobe XD.
    Utilisez une disposition en grille lors de la conception d'expériences Web. Utilisation de grilles dans Adobe XD .

    Good Navigation

    Une bonne navigation est l'un des aspects les plus importants de la convivialité d'un site Web. Même le site Web le plus beau sera inutile si les utilisateurs ne peuvent pas s'y retrouver.

    Lorsque vous développez la navigation pour votre site Web, réfléchissez aux pages les plus susceptibles d'intéresser les visiteurs et à la manière dont ils vont migrer. une page à l'autre. Suivez les attentes des utilisateurs – créez une structure de navigation prévisible et placez-la là où les utilisateurs s'attendent à la voir

    Astuce de conception rapide: Réduisez le nombre total d'actions requises pour que les utilisateurs atteignent la destination. Essayez de suivre la règle à trois clics ce qui signifie créer une structure qui permettra aux utilisateurs de trouver l'information qu'ils recherchent en trois clics

    Patterns reconnaissables

    . Lors de la conception de votre site, il ne faut pas oublier que les utilisateurs de passent la plupart de leur temps sur d'autres sites . Chaque fois que l'utilisateur doit apprendre comment quelque chose de nouveau fonctionne, il crée des frictions. En utilisant des conventions reconnaissables, vous pouvez réduire la courbe d'apprentissage. Les modèles d'interface utilisateur reconnaissables finissent par aider les utilisateurs à analyser facilement les tâches complexes. Ainsi, lorsque vous suivez les attentes des utilisateurs et créez une expérience familière (par exemple, placez les éléments de l'interface utilisateur là où les utilisateurs s'attendent à les trouver), les visiteurs du site peuvent utiliser leurs connaissances antérieures et agir par intuition. Cela aide à réduire la courbe d'apprentissage et la nécessité de comprendre comment les choses fonctionnent.

    3. Temps de chargement rapide

    Comme la technologie permet des expériences plus rapides, la volonté des utilisateurs d'attendre a diminué. Le temps de chargement lent est l'une des principales raisons pour lesquelles les visiteurs quittent les sites Web. Un utilisateur typique attendra seulement quelques secondes pour que votre page se charge . Si rien ne se produit durant cette période, ils considéreront le site comme trop lent et se dirigeront probablement vers le site d'un concurrent.

    Le chargement lent crée non seulement une impression minable sur les utilisateurs, mais affecte également le classement des moteurs de recherche du site, car les pages à chargement lent sont réduites dans le classement dans le moteur de recherche de Google

    Test Your Website

    Il existe des outils disponibles pour tester les performances du site. L'un d'entre eux est Test My Site de Google qui vous donne un rapport exploitable sur la façon d'accélérer et d'améliorer votre site. WebPage Test est un autre outil utile qui vous permet d'exécuter un test de vitesse de site Web gratuit à partir de plusieurs endroits du globe, en utilisant de véritables navigateurs (Internet Explorer et Chrome) à des vitesses de connexion réelles. site Web est, plus votre taux de rebond sera élevé. « />

    Plus votre site Web est lent, plus votre taux de rebond sera élevé. (Crédit d'image: Luke W. )

    Trouver ce qui cause le temps de chargement lent, et résoudre le problème

    Si le chargement lent est une situation typique pour votre site Web, essayez de trouver les causes du problème et de le résoudre. Généralement, les temps de chargement des pages sont affectés par:

    • Les éléments visuels (images et animations).
      Les images HD et l'animation fluide ne peuvent créer une bonne UX que lorsqu'elles n'affectent pas le temps de chargement. Pensez à lire l'article Image Optimization pour obtenir des conseils sur l'optimisation de l'image
    • Custom fonts
      Comme tout autre élément, il faut un certain temps pour télécharger une police personnalisée. est situé sur un service de tiers).
    • Logique métier.
      Que la solution que vous avez développée soit optimisée pour un temps de chargement rapide. Il y a beaucoup de choses que les développeurs peuvent faire pour minimiser le temps de chargement. Par exemple, il est possible d'utiliser la compression et la décompression de fichiers pour améliorer les performances d'un site Web
    • Infrastructure technique
      Une infrastructure est un lieu où vous hébergez vos sites Web. Il comprend les composants matériels et logiciels ainsi que la bande passante Internet.

    Créer une perception de la vitesse

    Si vous ne pouvez pas améliorer les performances réelles de votre site Web, vous pouvez essayer de créer une perception de vitesse. estime que est souvent plus important que sa rapidité. Employer une technique d'écrans de squelette peut vous aider avec cela. Une mise en page squelette est une version de votre page qui s'affiche pendant le chargement du contenu. Les squelettes donnent l'impression de vitesse – que quelque chose se passe plus vite qu'il ne l'est réellement et améliorent le temps de chargement perçu.

     Ce site immobilier réutilise certaines des données de la page de résultats de recherche (l'image du bâtiment et description de base) les informations détaillées sont en cours de chargement. Cela crée un sentiment de réponse immédiate même quand un certain temps est nécessaire pour charger les données.
    Ce site immobilier réutilise certaines des données de la page de résultats de recherche (l'image du bâtiment et description de base) pendant le chargement des informations détaillées. Cela crée un sentiment de réponse immédiate même si un certain temps est nécessaire pour charger les données. (Crédit photo: Owen Campbell-Moore ) ( Grand aperçu )

    Voir ce Exemple Codepen d'effet squelette en CSS pur. Il utilise un effet de pulsation pour donner aux utilisateurs le sentiment que le site est vivant et le contenu est en cours de chargement:

    Voir le Pen Skeleton Screen avec CSS par Razvan Caliman ( @oslego ) CodePen .

    4. Sentir un sentiment de contrôle

    Un sentiment de contrôle demeure l'une des heuristiques d'utilisation de base pour la conception de l'interface utilisateur . Les interfaces efficaces donnent aux utilisateurs un sentiment de contrôle

    Good Error Handling

    L'erreur est humaine. Des erreurs se produisent lorsque les utilisateurs interagissent avec des interfaces utilisateur. Parfois, ils se produisent parce que les utilisateurs font des erreurs. Parfois, ils se produisent parce qu'un site Web échoue. Quelle que soit la cause, ces erreurs et la manière dont elles sont gérées ont un impact significatif sur l'expérience de l'utilisateur. Une mauvaise gestion des erreurs jumelée à des messages d'erreur inutiles peut frustrer les utilisateurs et les amener à abandonner votre site Web. Lorsque des erreurs surviennent, il est essentiel de créer des messages d'erreur efficaces .


     Faites en sorte que votre site Web sonne humain même. Chaque message d'erreur affiché sur votre site Web doit être clair, propre et utile.
    Faites en sorte que votre site Web soit toujours aussi humain. Chaque message d'erreur affiché sur votre site Web doit être clair, propre et utile.

    Les concepteurs peuvent utiliser une tactique appelée design for failure dans laquelle vous essayez d'anticiper les endroits où les utilisateurs pourraient avoir des problèmes et de planifier de tels cas. Alors que la réalisation du parcours idéal est le but ultime, les complexités de l'expérience d'un utilisateur individuel sont rarement aussi simples. Reconnaître les points douloureux potentiels et s'y préparer à l'aide d'outils comme le mappage des échecs pour la récupération des erreurs vous permet de proposer la meilleure expérience possible à la majorité de vos utilisateurs.

    Pas de pousseurs agressifs

    sentiment. Vous visitez un nouveau site Web, le contenu de la page semble être intéressant. Vous commencez à le lire et juste quand vous êtes à mi-chemin du texte, vous êtes soudainement interrompu par une superposition vous demandant soit de vous abonner à une newsletter ou de profiter d'une offre. Dans la plupart des cas, votre réaction immédiate sera soit de fermer la superposition ou de fermer la page entière, la superposition avec elle.

    Les pousseurs agressifs tels que les pop-ups avec un contenu promotionnel mettront la plupart des gens sur la défensive. Selon le groupe NN, les pop-ups sont l'expérience web la plus détestée jamais

     Les pousseurs agressifs créent une mauvaise expérience utilisateur.
    Les pousseurs agressifs créent une mauvaise expérience utilisateur. (Crédit photo: Vitaly Dulenko ) ( Grand aperçu )

    Ne pas lire la vidéo avec le son

    Lorsque les utilisateurs arrivent sur une page, ils ne s'y attendent pas jouera n'importe quel son. La plupart des utilisateurs n'utilisent pas d'écouteurs et seront stressés car ils devront trouver comment désactiver le son. Dans la plupart des cas, les utilisateurs quitteront le site Web dès qu'il sera diffusé. Ainsi, si vous utilisez le contenu vidéo de lecture automatique sur votre site, désactivez l'audio par défaut, avec l'option de l'activer.

    5. Bonne apparence visuelle

    Un design attrayant mène-t-il à plus de conversions? Bien qu'il n'y ait pas de lien direct entre un design attrayant et une conversion, l'apparence visuelle peut augmenter les chances de conversion. Comme le dit Steven Bradley :

    «Les êtres humains ont un biais d'attractivité; nous percevons les belles choses comme étant meilleures, qu'elles soient réellement meilleures ou non. Toutes choses étant égales par ailleurs, nous préférons les belles choses et nous croyons que les belles choses fonctionnent mieux. Comme dans la nature, la fonction peut suivre la forme. "

    Tout comme avec tout autre domaine du design, le design web est en constante évolution. Les tendances du design vont et viennent, et il est nécessaire de s'assurer que votre design n'a pas l'air dépassé. Familiarisez-vous avec les dernières tendances et essayez de garder votre design à jour en ajustant votre design.

    Awwwards et Behance sont d'excellents endroits pour vous aider à vous familiariser avec les dernières tendances

    Évitez les photos génériques

    Beaucoup de sites Web d'entreprise sont connus pour utiliser des photos génériques pour créer un sentiment de confiance. De telles photos contiennent rarement des informations utiles. Les tests d'utilisabilité montrent que les photos génériques et autres éléments graphiques décoratifs n'ajoutent aucune valeur à la conception et affectent plus souvent qu'autrement l'expérience de l'utilisateur. Les études de suivi des yeux montrent que les utilisateurs oublient généralement les images de stock


     Un exemple de photo de stock
    Un exemple de photo de stock

    6. Le design est accessible à tous les groupes d'utilisateurs

    Vous ne pouvez pas appeler votre conception réussie si votre public a du mal à l'utiliser. Il y a un lien direct entre un mauvais UX et l'inaccessibilité. Un exemple typique de décisions de conception qui créent souvent un UX terrible pour la beauté utilise un texte gris clair sur les arrière-plans clairs. L'exemple ci-dessous provient de l'une des plateformes les plus populaires pour créer des sites Web. Même une personne ayant une vision normale aura du mal à lire un texte sur cette page, et il y a une forte possibilité qu'une personne malvoyante ne puisse pas le lire du tout.


     Un contraste de couleurs insuffisant associé à une petite taille de police crée de la lisibilité
    Un contraste de couleur insuffisant jumelé à une petite taille de police crée des problèmes de lisibilité.

    Le site Web que vous concevez devrait être accessible à tous les groupes d'utilisateurs, y compris les personnes aveugles, handicapées ou âgées. Assurez-vous de vérifier les documents WCAG et Liste de vérification de WUHCAG .

    7. Conception mémorable

    Compte tenu du fait que presque toutes les entreprises ont une présence en ligne aujourd'hui – peu importe quel produit ou service vous offrez en ligne – il existe de nombreux autres sites offrant exactement ce que vous faites (peut-être même avec les mêmes avantages). Il est essentiel de mettre votre site Web à l'écart de la concurrence en créant un design vraiment mémorable.

    Barbara Fredrickson et Daniel Kahneman ont proposé une heuristique psychologique appelée «règle de pointe» qui dicte la façon dont notre cerveau fonctionne avec l'information. La règle de pointe stipule que les gens jugent une expérience basée principalement sur ce qu'ils ressentaient à son apogée (c'est-à-dire son point le plus intense) et à sa fin plutôt que sur la somme totale ou moyenne de chaque moment de l'expérience. L'effet se produit indépendamment du fait que l'expérience soit agréable ou désagréable. En d'autres termes, lorsque nous nous souvenons d'expériences, nous avons tendance à nous souvenir non pas de l'expérience entière, mais seulement des événements clés qui se sont produits. C'est pourquoi il est essentiel de créer une étincelle qui restera longtemps dans la mémoire d'un utilisateur.

    Color

    La ​​couleur influence énormément ce que les gens se rappellent, et avec quelle vivacité ils s'en souviennent. L'utilisation sélective de la couleur peut déclencher la mémoire et être un élément supplémentaire qui assure que votre marque reste mémorable et reconnaissable.

    Par exemple, quand nous pensons à Spotify, nous pensons généralement aux couleurs vibrantes. Le service utilise la couleur comme différenciateur de marque et d'expérience:


     Spotify joue avec les couleurs pour créer une expérience mémorable.
    Spotify joue avec les couleurs pour créer une expérience mémorable.

    Illustrations

    Les illustrations sont un outil polyvalent utile pour créer un design unique. De petites icônes à de grands croquis de héros dessinés à la main, les illustrations apportent un sens de l'artisanat dans l'expérience numérique.

    Une façon simple d'utiliser les illustrations dans le design web est de les adapter à votre message. supplément de la copie de texte. « />

    Les illustrations peuvent être un excellent complément de la copie de texte. (Crédit d'image: Evernote)

    L'utilisation de mascottes de marque dans la conception Web est un autre excellent exemple lorsque les illustrations peuvent créer une expérience mémorable. Les mascottes deviennent les éléments d'identité et d'inter-connecteur entre l'utilisateur et le produit.


     En associant des illustrations à des blagues, Smashing Magazine a développé un style de design distinct qui les rend mémorables pour tous ceux qui connaissent la marque. En associant des illustrations avec des blagues, Smashing Magazine a développé un style de design distinct qui les rend mémorables pour tous ceux qui connaissent la marque.
</figcaption></figure>
<h3 id= Cohérence de la marque

    La ​​cohérence est sans doute la règle clé d'une marque qui réussit. L'incohérence apporte un énorme problème – les utilisateurs ne se représenteront pas une chose spécifique quand ils pensent à une marque, et, par conséquent, elle peut rapidement devenir oubliable. C'est pourquoi la conception du site Web doit être cohérente avec votre marque. Assurez-vous que les attributs de base de la marque tels que les couleurs de la marque, les polices, les logos et les slogans sont régulièrement utilisés sur le site Web.

    Astuce de conception rapide: Un excellent moyen de maintenir une marque cohérente est à travers un guide de style. Préparez-le une fois et utilisez-le pour chaque produit que vous concevez.


     La conception du site Web de McDonald's est conforme à sa marque.
    La conception du site Web de McDonald's est conforme à sa marque.

    Humour

    Amuse tes expériences, alors les gens s'en souviennent. Un bon exemple est Mailchimp un service utilisé pour planifier et déployer des campagnes d'email. La société remplit un créneau assez technique, mais en utilisant l'humour, elle transforme cette tâche sèche en une expérience invitante. Mailchimp utilise une mascotte appelée Freddie von Chimpenheimer. Freddie fait souvent des blagues, et l'humour est un moyen efficace de se connecter avec les gens. Cette attitude positive conduit souvent les gens à partager et même à défendre le produit avec leurs amis.


     Freddie, la mascotte du dessin animé de MailChimp, est un grand support émotionnel pour l'humour.
    Freddie, la mascotte du dessin animé de MailChimp, est un grand porteur émotionnel pour l'humour.
     Mailchimp ajoute de petites et charmantes surprises tout au long du parcours de l'utilisateur et rend l'envoi de courriels beaucoup plus amusant.
    Mailchimp ajoute de petites surprises tout au long du parcours utilisateur et rend l'envoi de courriels beaucoup plus amusant. ( Grand aperçu )

    8. Le design est optimisé pour le mobile

    Il y a une dizaine d'années, la conception pour le Web signifiait concevoir pour un ordinateur de bureau, maintenant cela signifie la conception pour le mobile et le bureau. Les téléphones mobiles et les tablettes génèrent une quantité croissante de trafic Web, et les chiffres vont seulement augmenter. En 2018, plus de 50% de l'ensemble du trafic mondial a été généré par les téléphones mobiles.

    Priorité au contenu et aux fonctionnalités

    Optimiser la conception Web pour mobile, c'est beaucoup plus que rendre votre design réactif. Il s'agit de la hiérarchisation du contenu et des fonctionnalités. En tenant compte des limitations moyennes, l'objectif est de montrer seulement ce dont vos utilisateurs ont besoin sur ce support.

    Concentrez-vous sur l'amélioration de l'expérience autour de vos objectifs principaux. Sachez quel est le but principal de votre application: analysez les fonctionnalités de votre application les plus utilisées et concentrez-vous sur l'optimisation de cette expérience.

    Mesure du succès

    Après avoir défini ce qui fait la réussite d'un site, il est temps de comprendre comment mesurer le succès. La mesure du succès d'un site nécessite un examen approfondi de l'analyse et des données. Comme première étape du processus de mesure des données d'utilisation, il est essentiel de définir les bonnes mesures. Les métriques indiqueront clairement si votre décision de conception fonctionne ou non. Il existe deux groupes de mesures: les statistiques marketing et les statistiques UX. Les deux groupes de mesures sont essentiels à la réussite d'un site.

    Marketing Metrics

    Acquisition

    L'acquisition comprend des informations sur les visiteurs du site – combien de personnes visitent votre site et comment le trouvent-elles? Les statistiques d'acquisition comprennent:

    • Nombre de visites brutes
      Il s'agit de la mesure d'acquisition la plus élémentaire que vous pouvez suivre. Il vous donne une bonne base de référence sur la façon dont votre site fonctionne, mais il ne vous dira pas grand chose sans d'autres mesures. For example, an increasing number of visitors does not necessarily mean success, because those visitors might not be relevant to your business goals.
    • Channels.
      As well as knowing your top-level traffic numbers (number of gross visits), you should also know where your traffic is coming from. If you use Google Analyticsit organizes acquired website traffic into a few broad categories such as Direct, Organic Search, Referral, Social. These groupings allow you to immediately segment your traffic source and identify specific patterns of behavior for each source.
    • Points of entrance.
      An entrance shows you what page people started their session on. You might think this would be the home page, when in fact that’s rarely the case, especially with referral and social traffic. If you go to the Behavior section of Google Analytics, you’ll be able to see your best-performing pages regarding traffic volume. Knowing what pages bring the most traffic is hugely important because it gives you reliable information on what content attracts people.

    Engagement

    Engagement measures the amount of time visitors stay on your website, as well as how many pages they visit. Engagement metrics help UX teams understand how much attention visitors give to a website.

    Engagement metrics include:

    • Time spent on your site.
      Time visitors spend on site is often equated with engagement. Generally, the more time users spend on the site, the more valuable it’s for them. However, there might be an exception to this rule. For example, users might spend more time on a site because it’s hard to complete a specific task (e.g., find the information they need).
    • Total number of pages visited during user session.
      Generally, the more pages people visited, the better. However, it can also be an indicator of dissatisfaction – if people have to visit dozens of pages to find what they’re looking for, that often leads to unhappiness.
    • Bounce rate.
      The bounce rate (reported as a %) enables you to track how many people visit only one page before leaving your site. Naturally, you want this percentage to be as low as possible. There are some factors which could contribute to a high bounce rate. Generally, a high percentage could point to the lack of relevant content or usability issues. But of course, this rule has exceptions. For example, a visitor may have come to your site just to find contact information about your company. Once they had your phone number or address, there was no need to visit another page.

    Quick tips:

    • Create a list of top 10 pages visitors are most engaged with. The pages that users are spending most time may help you determine if your goals are in-line with the goals of users.
    • Track exit pages. It’s essential not only to track how a user gets to your site but also how they leave it. This metric is different than a bounce rate in that it tracks visitors who visited multiple pages (bounce rate is a single page metric). If a particular page has a high exit rate, it might be an indication of a problem.

    Retention

    There are two types of website visitors: first-time visitors and returning visitors. Retention is the percentage of return visitors — people who continue visiting your website within a specific time frame. When a team measures retention, it becomes much easier to distinguish new users from returning users, and, as a result, see how quickly user base is growing or stabilizing.

    Retention can be distilled from the percentage of new sessions. By comparing the percentage of new sessions vs. returning visitors, you can determine if your website is attracting new visitors and whether it offers enough value so people return to it.

    Conversion

    The majority of websites have a goal of getting visitors to convert (take action), whether it is to purchase an item or sign up for a newsletter. That’s why conversion is the metric that everyone cares about the most. Aim to maximize the number of people who convert (e.g., buy something after they come to your site). Obviously, the higher the conversion rate, the better your website is doing.

    A conversion rate can tell you a lot about the quality of your traffic. For example, having a low conversion rate while having a lot of unique visits can be an indication that you are attracting the wrong traffic.

    Here are a few tips for measuring conversion:

    • It’s always better to select easy-to-measure activities. For example, it might be something as simple as contact form submissions. Contact form submissions can be a great indicator of your site’s success — if users prompt an inquiry this is a great indication that your site has engaged them.
    • For larger sites, it’s good to have many different conversion goals on one site. For example, an eCommerce store might have three conversion goals — a product purchase, a subscriber to an email list, a social share.

    Pirate Metrics (AARRR Framework)

    As you can see, there are a lot of metrics that can be used. But how do you figure out which metrics to implement and track?

    In the attempt to simplify the task of selecting right metrics, Dave McClure created a framework called AARRR. This framework uses a customer lifecycle as a foundation (the idea that visitors go from being a first-time visitor to a returning visitor), and tracks users through a conversion funnel over time. The life cycle consists of 5 steps:

    1. Acquisition
      Users come to the site from various channels.
    2. Activation
      Users enjoy their first visit (happy user experience).
    3. Retention
      Users come back and visit the site multiple times
    4. Referral
      Users like the product enough to refer it to others.
    5. Revenue
      Users conduct some type of monetization behavior.

    The AARRR framework: Acquisition, Activation, Retention, Referral, Revenue.

    Pirate metrics can help you determine where you should focus on optimizing your marketing funnel.

    User Experience Metrics

    While marketing metrics define the success of a product based on the conversion, user experience metrics focus on the quality of interaction with a product. Focusing on business goals does not necessarily lead to a better user experience. UX metrics can complement marketing metrics by concentrating on the critical aspects of user experience.

    The Quality Of User Experience (HEART Framework)

    When it comes to measuring user experience, it’s always hard to define specific metrics. Of course, there are high-level UX metrics that correlate with the success of user experiences such as usability, engagement, and conversion. But it might be hard to define metrics that will be relevant to a particular product. In the attempt to simplify this task, the Google team created a framework called HEART. This framework is intended to help designers focus on the product they create, and the user experience it provides. HEART uses some metrics that we already mentioned in the marketing section, but from a different angle.

    • Happiness
      Measures of user attitudes: satisfaction, perceived ease of use, net-promoter score. This metric can be collected via survey.
    • Engagement
      Level of user involvement. Engagement is typically measured as depth of interaction over some time period. For example, the number of visits per user per month.
    • Adoption
      Gaining new users of a product or feature. For example, the number of users who tried new product features in the last week.
    • Retention
      The rate at which existing users are returning. For example, for a web service this might be the number of active users remaining present over time. For e-commerce website, this might be the number of repeat purchases.
    • Task Success
      This category is most applicable to areas of your product that are task-focused. It includes behavior metrics such as efficiency (e.g. time to complete a task), effectiveness (e.g. percent of tasks completed), and error rate. For example, for e-commerce website this might be the number of search result success.

    The HEART framework is very flexible — it can be applied to a specific feature or a whole product. It’s important to mention that you don’t need to collect metrics in all of HEART categories — you should choose only the most important for your particular project. It’s possible to choose metrics by following a process of Goals-Signals-Metrics.

    The Goals-Signals-Metrics Process

    The Goals-Signals-Metrics process helps you to identify meaningful metrics you’ll actually use.


    Google HEART framework and Goals-Signals-Metrics process
    Google HEART framework and Goals-Signals-Metrics process

    The process of selecting metrics you can implement and track starts with goals. To define a goal, you need to focus on knowing what determines success. This is where the HEART categories will be particularly useful. For example, if you create a news site you might set a goal in the engagement category; the aim would be to have users enjoy the articles they read, and to keep them browsing to discover more articles from different categories.

    Here are two tips that will help you define better goal:

    • *Don’t define your goals in terms of your existing metrics. *It’s a common pitfall when a team defines goals based on information it has. As a result, a goal might sound as something like ‘We need to increase traffic to our site.’ Yes, everyone wants to have more visitors, but does more visitors will move you towards your goal? Not necessary.
    • Work with team and stakeholders to identify the goals. You may not realize that different members of your team have different ideas about the goals of your project. Identifying goals early on in design process provides an opportunity to build consensus about where you are headed. Make sure that everyone on the team understands the proposed solution in sufficient detail.

    After identifying your goals, you need to think about what user actions will result in progress toward these goals. These actions are your signals. There are usually a large number of potentially useful signals for a particular goal. Once you have identified some potential signals, you may need to do research or analysis to choose the ones that are most relevant. If we circle back to our example with a news site, an engagement signal for it might be the number of articles users read on the site.

    Here are a few tips:

    • Consider how easy or difficult is to track each signal. It’s preferable to focus on signals that can be monitored automatically (e.g. your product can log the relevant information so you can use it for further analysis).
    • Try to choose signals that are sensitive to changes in your design. This way you will be able to analyze the data you have to understand whether the design changes benefit your users or not.
    • Don’t ignore negative signals. Identifying signals for possible missteps (e.g. number of errors during particular interaction) can help you reveal pain points in your product.

    Once you’ve chosen signals, you can refine them into metrics you’ll track over time. In our news site engagement example, we might implement “how long users spend reading news” as “the average number of minutes spent reading news per user per day.”

    • Prioritize your metrics.
      Focus on tracking the metrics related to your top goals.
    • Don’t add metrics for sake of adding metrics.
      Avoid the temptation to add “interesting stats” to the list of metrics. Always ask yourself whether you will actually use these numbers to help you make a decision.
    • The metrics you track should be tied back to design decisions.
      When you see a change, you should be absolutely clear on what has caused that change.

    What Can Influence Success

    Follow TETO Principle

    How to make sure that website meets user’s expectations? You can’t just assume that it does — you need to test your design to see how users engage with it. Testing can reveal much more than how usable a site is — it can also demonstrate the users’ emotional response to the design. That’s why TETO-principle (test early, test often) should be applied to every web design project.

    • Don’t expect to build a perfect product right from the first attempt.
      Product design is an ongoing journey for both you and your users. That means that you design something, test it, rework it and then test it again.
    • Use comparative testing to find the best solution for your users.
      If you have multiple solutions to a particular problem and not sure what solution works best for your product, you can use A/B testing to validate it. Compare what users do in one scenario vs. another, and see which design is the most effective.
    • Collect qualitative feedback.
      All measurable data that we’ve talked about in previous sections can tell you a lot of answers on “*how many*” questions. But this data won’t tell you why people interact in a way they do. Facing readability issues, hesitation when filling out a payment form, using search because site’s navigation is really hard to deal with — all of these types of details are critical to understanding the user experience. They might be a reason why people abandon a process and leave the site. It’s possible to find answers to why questions by observing and interviewing your users.

    User interview illustration
    User interview (Illustration by Igor Kopelnitsky)

    Data-Informed, Not Data-Driven Design

    When product teams collect data, they usually follow either data-driven or data-informed design process. The latter is more preferable. Design shouldn’t be driven by data, it should be informed by data.

    Don’t Be Obsessed Over Numbers

    A lot of metrics get reported simply because they are flowing in from analytics tool. While it’s tempting to report a lot of different things and hope that this will make your report more valuable, in reality, this usually leads to more complex reports that are hard to read.

    Don’t Fall Into The Trap Of Complete Redesign

    All too often design teams try to introduce a complete rework for a solution which they believe will result in more successful web experience. Jared Spool calls major product redesign a Flip-the-Switch strategy — “the most ineffective way to get major changes into a design.” In the article, “ The Quiet Death of the Major Re-Launch,” he shares a story on the eBay redesign — and it’s a great reminder of why users don’t like dramatic changes. A complete redesign that brings new visual and interaction design might be too much change and have an adverse effect.

    If you have an existing website, instead of investing in a large scale redesign focus on subtle evolution, make small and incremental changes that can (over time) improve conversions without visitors even noticing that changes have been made.

    Conclusion

    So, how do you know that your website is a success? As a product creator, you must first define what success means to you. For that, it’s always important to have a big picture in mind of what it is that you want to achieve.

    The next step would be to focus on metrics. Metrics will show you how a site changes over time. They will help you fill in the blanks between what has happened and why.

    This article is part of the UX design series sponsored by Adobe. Adobe XD tool is made for a fast and fluid UX design processas it lets you go from idea to prototype faster. Design, prototype and share — all in one app. You can check out more inspiring projects created with Adobe XD on Behanceand also sign up for the Adobe experience design newsletter to stay updated and informed on the latest trends and insights for UX/UI design.

    Smashing Editorial(ra, il)




Source link