Atterrir le concept: théorie du concept de film et conception UX
Publié: 2022-03-10Steven Spielberg a dit un jour: "Si une personne peut me dire l'idée en 25 mots ou moins, cela fera un très bon film." Il faisait référence à l'idée que les meilleurs films "à succès" à succès de masse sont capables d'énoncer succinctement leur concept ou prémisse en une seule courte phrase, comme Jaws ("Il s'agit d'un requin terrorisant une petite ville") et Toy Story ( "Il s'agit de jouets qui prennent vie quand personne ne regarde").
Et s'il en était de même pour les sites Web ? Les sites qui expliquent leur « concept » de manière simple ont-ils de meilleures chances d'attirer les utilisateurs ? Si nous regardons la mise en page super simple de la page d'accueil de Google, par exemple, elle donne aux utilisateurs un seul message clair sur son concept, ainsi que sur l'affiche du film Jaws :

Être conscient de l'importance du « high-concept » nous permet, en tant que designers, de vraiment nous concentrer sur les premières impressions de l'utilisateur. Prendre le temps de définir réellement ce que vous voulez que votre « concept supérieur » simple soit avant même de commencer à concevoir peut vraiment vous aider à vous orienter vers la bonne expérience utilisateur.
Que signifie la théorie du concept élevé pour la conception UX ?
Prenons donc cela au sérieux et examinons-le d'un point de vue UX Design. Il va de soi que si vous pouvez expliquer le « concept » ou le but de votre site de manière simple, vous réduisez la charge cognitive des nouveaux utilisateurs lorsqu'ils essaient de le comprendre et, ce faisant, vous augmentez considérablement vos chances de les engageant.
Les parallèles entre la théorie du "High-Concept" et les meilleures pratiques de conception UX sont clairs. Le public des superproductions préfère les concepts simples et faciles à relier présentés de manière simple. Les utilisateurs Web préfèrent souvent une conception d'interface utilisateur (interface utilisateur) plus simple et facile à digérer, des mises en page propres et sans encombrement.
Quel que soit votre message, le présenter de manière simple est essentiel au succès de l'expérience utilisateur de votre site. Mais qu'en est-il du message lui-même ? Comprendre si votre message est suffisamment "haut de gamme" peut également être essentiel au succès du site.
Quel est le concept de « High-Concept » dans le monde en ligne ?
Que voulons-nous dire lorsque nous disons « high-concept » ? Pour les films, c'est simple - c'est le sujet du film, le scénario de base qui peut être facile à résumer en une seule phrase, par exemple Jurassic Park parle "d'un parc à thème où les dinosaures sont ramenés à la vie".
Cependant, lorsque nous examinons le « haut concept » sur un site Web, il peut vraiment s'appliquer à n'importe quoi : un énoncé de mission, une offre de services ou même une nouvelle gamme de produits. C'est simplement le message principal que vous souhaitez partager via votre site. Si nous appliquons la théorie du « high-concept », elle nous dit que nous devons nous assurer que nous transmettons ce message dans un style simple et succinct.
Que se passe-t-il si vous réussissez ?
Pourquoi le « high-concept » est-il si important ? Quels sont les avantages de présenter un UX Design « high-concept » ? L'une des erreurs que nous commettons souvent dans UX Design est de se concentrer sur les spécificités des tâches de l'utilisateur et d'oublier l'importance critique des opinions initiales. En d'autres termes, nous nous concentrons sur la façon dont les utilisateurs interagiront avec un site une fois qu'ils auront choisi de s'y engager et de manquer le processus de prise de décision qui précède tout. Considérer le « high-concept » nous permet de nous concentrer sur cette première étape.
La prémisse de base à considérer est que nous nous engageons mieux avec des choses que nous comprenons et avec lesquelles nous nous sentons à l'aise. S'assurer que votre site présente son message d'une manière simple et « conceptuelle » facilitera l'engagement initial de l'utilisateur. Cet engagement initial est le précurseur essentiel de toutes les bonnes choses qui suivent : les ventes, l'interaction et un meilleur taux de conversion.
À quel point le concept est-il trop de concept ?
La véritable astuce consiste à déterminer la complexité que vos utilisateurs peuvent gérer confortablement lorsqu'il s'agit de positionner votre message. Vous devez d'abord vous concentrer sur la présentation d'informations de haut niveau plutôt que de bombarder les utilisateurs avec tout à l'avance. Donnez aux utilisateurs uniquement le niveau de compréhension dont ils ont besoin pour s'engager initialement avec votre site et conduisez-les plus profondément dans le voyage en divulguant plus de détails au fur et à mesure.
Netflix fait un excellent travail à ce sujet. La vue initiale avec laquelle les nouveaux utilisateurs sont présentés sur l'écran de la page d'accueil est franche avec son concept très élevé - "nous faisons du contenu vidéo" une fois que les utilisateurs se sont engagés avec cette prémisse, ils sont amenés plus loin dans la proposition - plus d'informations sont divulguées, prix, processus , etc.

Quand décrocher votre High-Concept ?
Lorsque vous décidez de la façon de mettre en page le site, un autre facteur critique à prendre en compte est le moment où vous choisissez de présenter votre « haut concept » initial à vos utilisateurs. Il est essentiel de se rappeler à quel point il est rare que les utilisateurs suivent un parcours linéaire simple et agréable sur votre site à partir de la page d'accueil. La réalité est que les parcours utilisateur organiques commencent parfois par des résultats de recherche. Par conséquent, l'interaction réelle avec votre site commence sur la page la plus pertinente par rapport à la requête de l'utilisateur. Dans cet esprit, il est essentiel d'examiner comment les prémisses de votre site apparaissent aux utilisateurs sur les pages d'entrée clés de votre site, où qu'elles apparaissent dans la hiérarchie globale.
Un autre point clé à prendre en compte lors de l'introduction du message de votre site est que, dans de nombreux scénarios, les utilisateurs jugeront s'ils doivent s'engager avec vous bien avant même d'atteindre votre site. Si la première fois que vous présentez votre concept aux utilisateurs se fait via une publicité Facebook ou une campagne par e-mail, la mise en œuvre est radicalement différente. Cependant, la théorie devrait être la même, c'est-à-dire s'assurer que vous présentez votre message dans cette seule phrase de style « high-concept » avec les utilisateurs potentiels.
Comment communiquer votre High-Concept
Jusqu'à présent, nous avons parlé de la façon dont viser des messages « de haut niveau » peut augmenter l'engagement - mais comment faisons-nous cela ? Tout d'abord, concentrons-nous sur les méthodes évidentes telles que la formulation que vous utilisez (ou n'utilisez pas).
Avant même de commencer à concevoir, asseyez-vous et concentrez-vous sur ce que vous voulez que soit la prémisse de votre site. À partir de là, dessinez vos slogans ou titres pour refléter cette prémisse. Assurez-vous cependant de vous fier à la hiérarchie du contenu, utilisez vos en-têtes pour définir le concept et n'enterrez pas les messages essentiels à la compréhension dans votre corps de texte.
Voici un bel exemple de Spotify. Ils parviennent à positionner leur service de manière « conceptuelle » grâce à une combinaison simple et épurée d'images et de mots :


Formulation d'une seule phrase
Il est essentiel d'être aussi succinct que possible : plus votre message est court, plus il devient lisible. Le véritable exercice d'équilibre consiste à décider où tracer la ligne entre trop peu pour donner suffisamment de compréhension et trop pour le rendre facilement lisible.
Si l'on prend l'exemple de Google Drive — c'est un service relativement complexe, mais il est présenté d'une manière très basique et conceptuelle — au départ une seule phrase qui suggère sécurité et simplicité :

Ensuite, le niveau suivant du site atterrit un peu plus sur le concept du service mais en gardant toujours une simple phrase de moins de 25 mots (Spielberg serait ravi):

Vidéos explicatives
Cela ne s'arrête pas à votre formulation, car il existe une myriade d'autres éléments sur la page que vous pouvez exploiter pour développer votre concept. La vidéo explicative est utilisée à bon escient par Amazon pour présenter aux utilisateurs le concept d'Amazon Go. En réalité, il s'agit d'un essai technique très complexe d'apprentissage automatique, de reconnaissance visuelle par ordinateur et d'IA (intelligence artificielle) pour réinventer l'expérience d'achat. Comme il est simplement encadré sur le site, il peut être expliqué de manière «conceptuelle».
Amazon donne aux utilisateurs une seule phrase et, surtout, fait de toute la section d'en-tête une simple vidéo explicative sur le service.

Imagerie
Les images que vous utilisez peuvent être utilisées pour transmettre rapidement et simplement des messages puissants sur votre concept sans qu'il soit nécessaire de compliquer votre interface utilisateur avec d'autres éléments. Save the Children utilise l'imagerie à bon escient pour montrer rapidement aux utilisateurs l'importance cruciale de leur travail sans doute mieux qu'ils ne le pourraient jamais avec un libellé.

Police et couleur
Il est essentiel de considérer chaque élément de votre site comme un mécanisme potentiel pour vous aider à communiquer votre objectif à vos utilisateurs, par le biais de la police ou des choix de couleurs. Par exemple, plutôt que d'avoir à dire explicitement aux utilisateurs que votre site est destiné aux universitaires ou aux enfants, vous pouvez créer votre interface utilisateur pour aider à le montrer.
Les utilisateurs ont des modèles mentaux existants auxquels vous pouvez faire appel. Par exemple, des couleurs vives et des polices enfantines suggèrent que le site est destiné aux enfants, des polices serif et une utilisation limitée des couleurs suggèrent souvent un sujet beaucoup plus sérieux ou académique. Par conséquent, lorsqu'il s'agit d'aborder le concept de votre site, considérez-les comme des alliés importants pour communiquer avec vos utilisateurs sans avoir à compliquer votre message.

Affordance de conception
Jusqu'à présent, nous nous sommes principalement concentrés sur l'utilisation de la messagerie pour communiquer le concept aux utilisateurs. Pourtant, que se passe-t-il si l'objectif principal de votre page est simplement d'amener les utilisateurs à interagir avec un élément spécifique ? Par exemple, si vous proposez une sorte d'outil ? Si tel est le cas, alors montrer l'interface de cet outil lui-même est souvent le meilleur moyen de communiquer son objectif aux utilisateurs.
Cela rejoint le concept de "Design Affordance" - l'idée que la forme d'un design doit communiquer son objectif. Il va de soi que parfois la meilleure façon d'informer les utilisateurs de votre outil simple avec une interface facile à utiliser est de leur montrer cette interface.
Si nous regardons Airbnb, une grande partie du concept Airbnb est l'outil en ligne qui permet la recherche et la visualisation des résultats ; ils l'utilisent à bon escient sur cette conception de page de destination en affichant la vue de saisie de données pour cette recherche. Montrer aux utilisateurs à quel point il est facile de rechercher tout en leur présentant des messages simples sur le concept Airbnb.

Comment tester que vous l'avez atterri
Maintenant que vous avez conçu votre site et que vous êtes heureux qu'il présente son concept presque aussi bien qu'un blockbuster des années 80, mais comment pouvez-vous valider cela ? Ce serait bien de vérifier les choses avec quelques séries de recherches approfondies sur les utilisateurs en laboratoire, mais en réalité, vous en aurez rarement l'occasion et vous vous retrouverez à compter sur des méthodes plus "guérilla".
L'une des méthodologies les plus simples et les plus efficaces pour vérifier à quel point votre site est "haut de gamme" est le test des "5 secondes" ou du "coup d'œil". Le test simple consiste à montrer le site à quelqu'un pendant 5 secondes, puis à le cacher. Ensuite, les utilisateurs peuvent alors être interrogés sur ce dont ils se souviennent du site. L'idée étant qu'en 5 secondes ils n'ont la possibilité de voir que ce qui est immédiatement évident.
Voici quelques exemples de questions à poser pour avoir une idée de la qualité du concept de votre site :
- Vous souvenez-vous du nom du site que vous venez de voir ?
- Selon vous, quel est le but de la page que vous venez de voir ?
- Était-ce évident ce que le site que vous venez de voir offre ?
- Pensez-vous que vous utiliseriez le site que vous venez de voir ?
L'utilisation de ce test avec un nombre décent de personnes qui correspondent à vos utilisateurs cibles devrait donner des informations vraiment précieuses sur la façon dont votre conception transmet l'objectif de votre site et si vous avez effectivement réussi à atteindre un "concept élevé".
Tout mettre en pratique
Essayons de mettre en œuvre toutes ces connaissances dans le monde réel ? Pour ce qui est de prendre cela et de le transformer en une approche pratique, j'essaie de suivre ces étapes simples pour chaque projet :
- Viser le concept élevé
Lorsque vous établissez l'objectif d'un nouveau site (ou d'une page ou d'une publicité), essayez de le résumer à un seul "High-Concept" simple et global. - Écris le
Documentez ce que vous voulez que ce concept clé soit en 25 mots ou moins. - Renvoyer
Référez-vous constamment à ce concept tout au long du processus de conception. De la sélection de vos polices et couleurs à la création de votre contenu de titre, assurez-vous que tout prend en charge le High-Concept que vous avez écrit. - Essaye-le
Une fois terminé, utilisez le test de 5 secondes sur votre conception avec un certain nombre d'utilisateurs et comparez leurs réflexions initiales à votre High-Concept initial. S'ils sont corrélés, tant mieux, sinon retournez à l'étape 3 et réessayez.
Dans cet article, nous avons discuté de la règle simple de faire des films à succès, et nous avons appliqué cette sagesse à la conception Web. Pas de "choc de l'intrigue" - juste un peu de bon sens. La première fois que quelqu'un entre en contact avec votre site Web, il est essentiel de réfléchir à ce que vous voulez que le message initial soit. Si vous voulez attirer le grand public, transformez-le en un message « de haut niveau » dont Spielberg lui-même serait fier !