Design Personas Injecter de la personnalité dans vos projets Web

Jetons un coup d'œil au quoi, pourquoi et comment créer des personnages de design; développer des personnalités pour vos projets. Utilisés correctement, les personnages de design peuvent transformer un bon site en un site incroyable, aidant ainsi les gens à s'en souvenir pendant tout le temps. droite les raisons.

Une des grandes questions de la conception pour le Web - concevoir en fait sur n'importe quel support - est de définir l'indéfinissable: ce qui sépare bien conception de génial conception? Bien qu'il n'y ait pas de solution miracle ou de formule magique, la réponse ne réside pas seulement dans la perfection des pixels, elle réside dans un design qui s'adresse à votre auditoire de manière à ce qu'il réponde. Il les guide dans la prise de décision de manière simple et naturelle, transcendant la convivialité et la praticité et… délices.

Prêt à en apprendre plus? Commençons.


Qu'est-ce qu'un design Persona??

Si vous n'avez jamais entendu parler de personnalités du design, vous aurez peut-être l'impression que nous sommes sur le point d'entrer dans le monde trouble et souvent mal compris du marketing, des données démographiques, des conversions et des tests utilisateur. Bien que les concepteurs puissent intégrer ces éléments, ils sont en réalité beaucoup plus pratiques, plus axés sur le design et oserais-je… m'amuser.

Dans sa forme la plus simple, une personne de design est un document créé au cours de la phase de planification d'un projet, qui définit clairement l'identité et la personnalité de la marque ou du projet..

Nous allons examiner quelques exemples et les étapes à suivre pour créer un personnage de design un peu plus loin dans ce didacticiel, mais pour l'instant, examinons les composants d'un personnage de design qu'Aarron Walters expose dans son livre de 2011, Designing For Emotion:

  • Vue d'ensemble: Quelques paragraphes qui donnent le ton à la marque, au service ou au projet. La vue d'ensemble doit indiquer comment vous souhaitez que les utilisateurs réagissent au site Web et ce qui le distingue des autres concurrents..
  • Image de la personnalité: L'image de la personnalité traduit l'identité du projet en une personne réelle et vivante qui incarne tout ce que la marque ou le produit représente. Choisissez une célébrité, une star du sport, un personnage de fiction ou même un archétype et décrivez leurs traits de personnalité, ce qu'ils font ressentir et pourquoi ils représentent la marque..
  • Traits de marque: Cinq à sept phrases courtes décrivant la marque, définissant également certaines limitations et caractéristiques que vous souhaitez éviter. Par exemple, "simple mais pas enfantin", "faisant autorité mais pas condescendant".
  • Carte de personnalité: Placez la marque sur une échelle de convivialité et de non-convivialité sur l'axe des x et le niveau de domination ou de soumission sur l'axe des y.
  • Voix: Si le site Web, le produit ou la marque pouvait parler à ses utilisateurs, comment cela sonnerait-il? Aurait-il un crédo de rue ultra-cool ou semblerait-il que votre grand-père, assis dans son fauteuil préféré, raconte une histoire d'une époque révolue? Adresse la langue vernaculaire, le ton et comment le mode de communication peut changer dans différentes situations.
  • Exemples de copie: Incluez des exemples concrets de la copie du site dans différentes situations. Par exemple, comment l'interface accueille-t-elle un nouvel utilisateur ou un utilisateur qui vient de se connecter? Qu'en est-il d'un message d'erreur ou d'un appel à l'action??
  • Lexicon visuel: Un lexique visuel est une manière sophistiquée d'indiquer les couleurs, la typographie, les modèles de conception, les mises en page, etc. qui seront utilisés sur le site. Les personnalités du design sont un partenaire idéal pour Style Tiles, une alternative aux compositions complètes que nous avons récemment abordées ici sur Webdesigntuts.+.
  • Méthodes d'engagement: De quelle manière l'interface et la marque vont-elles interagir avec les utilisateurs et communiquer avec eux? Comment exploitera-t-il les médias sociaux, le marketing par courriel et les interactions dans le monde réel??

Pourquoi s'embêter?

À première vue, développer un personnage de design semble être un travail ardu. Il est sûrement préférable de plonger directement dans des structures filaires et des motifs fictifs pour comprendre tous ces trucs de "personnalité" et d '"émotion" tout au long du parcours.?

Pas si. En fait, le développement d'un personnage de conception dès les premières étapes d'un nouveau projet présente un certain nombre d'avantages intéressants. Examinons quelques-uns de ces sites, puis examinons quelques exemples de sites Web qui le font correctement (et d'autres qui n'ont pas eu un tel succès)..

1. Définir le client idéal

Il est impossible de concevoir un site auquel tout le monde réagira positivement. Bien que le département marketing puisse commencer à parler d'exclusion d'objectifs démographiques, il peut être la meilleure décision que vous puissiez prendre..

La dure vérité est que si vous construisez un site Web pour tout le monde, il ne fera appel à personne. -Paul Boag

Jetons un coup d'œil à l'exemple d'une agence de design qui a pris à cœur le principe d'exclusion du public cible.

Sur la page de couverture de la page d'accueil de FortySeven Media, une grande illustration dessinée à la main indique explicitement que vous ne devrait pas embauchez-les pour votre prochain projet. Qu'est-ce qui pourrait forcer une agence de design à dire de manière flagrante aux gens de ne pas les engager? La réponse est trouvée en cliquant sur le lien "Découvrez pourquoi" (comme si quelqu'un pouvait résister!)

La copie de la page suivante montre clairement que lorsque vous faites affaire avec FortySeven Media, vous faites affaire avec une agence de design de premier plan. En bref, ils indiquent clairement qu'ils ne font pas de sites Web budgétaires et ne travaillent qu'avec des clients qui savent qu'un bon design n'est pas bon marché..

Ceci, bien sûr, détournera beaucoup de petits clients potentiels de l'agence. Après tout, les entreprises qui peuvent se permettre de dépenser 10 000 dollars (minimum) pour le réaménagement d'un nouveau site Web ne poussent pas vraiment dans les arbres. En définissant une conception claire, l’équipe de FortySeven Media a indiqué son client idéal et a créé un site qui leur parle sans compromis - et eux seuls..

Si vous êtes à la recherche d'une moyenne, vous cherchez au mauvais endroit. Nous ne faisons pas la moyenne. Et nous ne sommes même pas désolés pour ça. -FortySeven Media

2. Marques de séparation

Dans notre prochain exemple, nous allons examiner un fournisseur de stratèges de marque et d'entreprise qui fait un excellent travail pour se démarquer de ses concurrents grâce à l'utilisation d'un personnage fort en design..

Le monde de la stratégie d'entreprise regorge de conceptions conservatrices et rigoureuses, de jargon commercial complexe et de marketing mumbo-jumbo..

Bobadilium est une entreprise qui adopte une approche très différente pour définir sa marque de ses concurrents:

Avec un style grincheux et un ton de voix anarchiste, Bobadilium est tout sauf banal. Avec des déclarations audacieuses telles que "Choisis une nouvelle expérience professionnelle. Sois humain" et "Méfiez-vous: le désastre est peut-être au coin de la rue" (avec de jolis effets de défilement optimisés par jQuery), Bobadilium donne le ton de l'urgence et parle directement aux clients potentiels qui comprend l'importance d'être différent.

Ce site attirera-t-il tous les clients potentiels? Presque certainement pas. Mais ce qu’il fait très bien, c’est de définir le Bobadilium comme une alternative claire à ses concurrents..

3. Futures décisions en matière de conception et de contenu

L'une des marques les plus appréciées sur Internet aujourd'hui est sans conteste le service de messagerie populaire Mailchimp..

En fait, il est également présenté comme l'un des meilleurs exemples de sites développés avec un personnage de design clair - ce qui est approprié puisque Aarron Walters (l'évangéliste en chef pour l'utilisation de personnages de design moderne) dirige également l'équipe de design de Mailchimp..

Bien que nous puissions parler toute la journée de Mailchimp et de son utilisation de sa personnalité et de son design émotionnel pour créer surprise et enchanter sa base d'utilisateurs fidèle, la conception claire de la marque permet également d'établir un cadre cohérent pour les futurs ajouts de contenu et de conception au site..

Avec un grand site comme Mailchimp qui ajoute constamment de nouveaux contenus et de nouveaux produits, la personnalité globale de la marque pourrait facilement s’affaiblir avec le temps. Où Mailchimp excelle est sa capacité à garder chaque page du site parlant à l'utilisateur sur un ton de voix cohérent.

Par exemple, leur base de connaissances et la section de support du site évitent les simples listes de sujets. En fait, chaque nouvelle section est présentée comme une couverture de livre attrayante, qui ressemble davantage à l'application iPhone iBooks d'Apple qu'à un centre d'aide:

L'utilisation d'images originales et de titres attrayants est directement liée aux caractéristiques de la marque Mail Chimp, notamment:

  • "Hanche mais pas aliénant",
  • "Informel, mais pas bâclé"
  • "Puissant mais pas compliqué"

C’est la capacité de parler de ces traits de marque qui aide à transformer l’une des parties les plus banales du site en une des plus excitantes..

En fait, chaque page de l'interface de Mail Chimp a un ton de voix constant, surprenant constamment l'utilisateur avec des blagues, des plaisanteries et la personnalité qui a rendu la marque célèbre..

Dans quelle mesure Mailchimp prend-il le ton de la voix du site? Assez sérieusement pour créer un site dédié uniquement à aider les nouveaux employés à la création de contenu à comprendre comment écrire du contenu à la manière de Mailchimp. Vous pouvez voir le site vous-même sur www.voiceandtone.com.

4. Résoudre des problèmes épineux

Parfois, la nature même d'un projet peut poser des problèmes très difficiles à résoudre aux concepteurs et aux stratèges de contenu. Un exemple poignant de ceci est slaveryfootprint.org, un site qui dit aux gens combien de travail forcé ils utilisent indirectement à cause des produits qu'ils achètent..

Il va sans dire que l'esclavage est un sujet brûlant et que le site comporte le risque inhérent d'aliéner les utilisateurs, d'engendrer un sentiment de culpabilité et d'instiller généralement un ton très sombre: ce qu'un site qui s'appuie sur les médias sociaux pour diffuser le message voudrait éviter à tout prix.

Au lieu de cela, le site a un personnage de conception clairement défini qui inscrit un message très sérieux dans une enveloppe attrayante et engageante sans banaliser le problème - ce qui est très clairement démontré à la fois dans le message de service public et dans les parties du site consacrées au sondage..

Lorsque l'utilisateur fait défiler l'écran, le texte "place" les mains aux couleurs vives sur la page. Cela ajoute non seulement un intérêt visuel, mais aussi un contenu sérieux en pépites d’informations faciles à digérer..

Dans la section sondage du site, les images aux couleurs vives cartoony créent un engagement instantané avec l'utilisateur et évitent de créer des émotions négatives en adoptant une approche non littérale. En fait, il n'y a pas une seule image - de dessin animé ou autre - d'un esclave sur tout le site.

4. Augmenter la rentabilité

Lorsqu'on examine les avantages des personnalités de la conception et de la conception émotionnelle en général, il ne s'agit pas uniquement de concepts moins concrets: il existe des preuves bien réelles qui suggèrent que l'utilisation de personnalités de la conception pour développer la personnalité d'une marque peut augmenter les résultats.

Prenons l'exemple de PhotoJoJo, un magasin en ligne lié à la photographie populaire. Après avoir ajouté un article à leur panier, les visiteurs aux yeux d'aigle remarqueront un petit levier gris avec les mots "Ne tirez pas". Si vous osez en tirer le levier, une main orange vif descend vers le bas de l'écran et place la page à la hauteur de la description de l'article..

Bien que cela puisse sembler plus un gadget qu'un outil de vente, la société a remarqué que les visiteurs qui appuyaient sur le levier avaient un taux d'abandon de panier plus bas et que les taux de conversion avaient en réalité augmenté..

Il convient toutefois de noter que cette fonctionnalité ne fonctionne que parce qu'elle est compatible avec la marque globale PhotoJoJo. Lorsque vous naviguez sur le site, une petite surprise, un élément bizarre ou un sourire vous attend sur chaque page..


Un mot d'avertissement…

Comme je l'ai mentionné dans l'exemple de PhotoJoJo ci-dessus, la magie Javascript, les œufs de Pâques et d'autres caractéristiques uniques peuvent rapidement se transformer en astuces peu coûteuses si elles ne sont pas utilisées de manière cohérente avec le design et la personnalité de la marque..

Ne pas être un fanfaron du parti, mais voici l'exemple d'un site qui se trompe.

Daskeyboard (photo ci-dessous) est un vendeur de claviers haut de gamme. Il comporte, vous en conviendrez sûrement, une page de produits assez standard:

Si vous allez sur le site et que vous cliquez sur le lien situé dans le coin tout à fait à droite "Kick A @%", il se passe quelque chose de très inhabituel. Sautez sur le site et essayez-le maintenant.

Bien que ce soit plutôt cool et qu’il vaille la peine d’écrire un tweet (comme je l’ai fait), l’effet est malheureusement relégué à un gadget, car il n’est en aucun cas compatible avec la conception globale du site..

Cette petite fonctionnalité va-t-elle générer du trafic sur le site? Presque certainement oui - il contient toutes les composantes d’une bonne campagne virale - mais si cela mènera à des conversions réelles, seul le temps nous le dira (mon argent sera allumé ou non).


Créer un design

Maintenant que nous avons examiné quelques-uns des principaux avantages des personnalités du design et examiné quelques exemples inspirants de personnalités du design bien faites, passons à un exemple de création d'un Design Persona pour un client fictif..

Le Design Persona est un document simple, que vous pouvez facilement créer vous-même dans le traitement de texte de votre choix. Vous pouvez également télécharger un modèle sur le site de Aarron Walter ici

Notre client aujourd'hui est Quarante cordes d'amour, fabricant et détaillant de cordes pour raquettes de tennis de qualité compétition. Le site Web suivant a été créé à la suite de discussions avec la société: il s’agit d’un site Web complet et d’une refonte complète de la marque:

Aperçu de la personnalité de la marque

Rafael Nadal incarne tout ce que représente Forty Love Strings en tant que marque. Il est agressif et sans compromis sur le terrain, mais chaleureux, accessible et un véritable sportif après le match..

Rafael se porte avec confiance mais sans arrogance et quand il joue, il est concentré sur une chose et une seule chose: gagner ce point.

Rafael est également une icône de la mode et repousse sans cesse les limites de son style personnel - à la fois sur le court et sur le terrain..

Forty Love Strings partage les caractéristiques de Nadal et parle avec autorité à ses utilisateurs, partageant avec eux la passion du sport qu'ils aiment. Nous inspirons nos clients à aller au-delà des limites du potentiel.

Nous vendons nos produits aux personnes qui veulent gagner.

Traits de marque

Forty Love Strings c'est:

  • Dominant mais pas d'intimidation
  • Confiant mais pas arrogant
  • Objectif ciblé mais flexible aux besoins individuels
  • À la mode mais pas avant-gardiste
  • Agressif mais c'est aussi sportif

Carte de personnalité

Voix

La voix de Forty Love String est confiante, affirmée et ne mâche pas ses mots. La voix de Forty Love Strings parle avec autorité, mais ne fait jamais de brimades, ne discute ni ne condescende. Au lieu de cela, nous inspirons nos visiteurs à se dépasser et à atteindre de nouveaux sommets.

Quarante Love Strings va droit au but. Nous n'utilisons jamais de contractions et disons toujours ce que nous voulons dire avec le moins de mots possible sans diluer le message.

Forty Love Strings pose des questions rhétoriques à nos utilisateurs pour les engager et les inspirer. Nous mettons au défi nos utilisateurs en leur posant parfois des questions difficiles afin de les pousser encore plus loin..

Exemples de copie

  • "Quand tu es deux sets, qu'est-ce que tu fais ensuite?"
  • "Seulement le meilleur pour seulement le meilleur"
  • "Votre service n'est pas la seule chose qui vous définit en tant que joueur"

Lexicon visuel

Palette de couleurs: Le site contient de nombreuses images de tennis noires et blanches sombres et nuancées. Le contraste s’ajoute à l’utilisation des verts, des jaunes et des bleus du circuit du Grand Chelem. En cas de doute, utilisez des textures sombres, des dégradés de charbon subtils et de petites quantités de blanc éclatant pour créer un impact et un contraste..

Typographie: Forty Love Strings est audacieux et fait autorité, et le choix de la typographie en témoigne. Les titres sont en fortes polices d'affichage sans empattement et le contenu du corps est simple et sans fioritures.

Méthodes d'engagement

Forty Love Strings utilise Twitter pour inspirer et motiver ses abonnés avec de courts messages d'encouragement. Nous démontrons également notre passion pour le jeu en tenant nos suiveurs informés des principales actualités du monde du tennis (sans éditorialisation)..

Nous suivons nos clients et leur proposons des messages personnalisés de soutien et d'encouragement lorsque nous apprenons qu'ils sont sur le point de faire concurrence, etc..


Et c’est tous les détails dont vous aurez besoin pour créer un personnage de base. Évidemment, vous pourriez aller beaucoup plus loin et inclure un tableau d'ambiance ou une tuile de style, mais ce simple document décrit clairement l'orientation du site, non seulement en termes de conception, mais également pour le contenu écrit..

Conclusion

Si vous souhaitez développer pour votre prochain client un site Web qui se démarque d'un océan de similitudes et de médiocrité, le développement d'un personnage de design est une première étape essentielle pour votre nouveau projet..

Les personnalités de la conception contribuent non seulement à créer une personnalité unique pour la marque, mais elles constituent également un outil précieux pour identifier votre clientèle cible idéale, orienter les décisions de conception et de contenu futures et peuvent rendre les sites plus efficaces (et peut-être même plus rentables) en créant de véritables relations avec les visiteurs du site.

En guise de dernier conseil, ne commettez pas l'erreur d'investir dans le développement d'un personnage de design uniquement pour lui permettre de ramasser la poussière au fond d'un tiroir. Pour que les personnalités du design soient efficaces, chaque décision de design et de contenu doit être prise en référence avec les traits de marque, la personnalité et le ton de la voix que vous avez définis en collaboration avec votre client..

Avant tout, la cohérence dans l'application de votre personnalité de conception dans chaque élément du projet est la clé!

Quelles sont vos pensées sur les personnages du design? Allez-vous en développer un pour votre prochain projet? Quels sont vos exemples préférés de sites qui ont efficacement utilisé la conception émotionnelle et les personnalités du design dans leur exécution? Nous aimerions entendre vos pensées!


Ressources supplémentaires

  • Concevoir pour l'émotion, Aarron Walter 2011
  • Voix et ton
  • Conception de modèle Persona (téléchargement)