Comment gâcher la fin améliore UX
Le récit raconte que l'inconnu devient connu. Mais les concepteurs ne sont pas des conteurs et les destinations qu'ils conçoivent doivent toujours être claires pour l'utilisateur. En insérant de petits spoilers dans nos conceptions d'interface utilisateur et en gâchant la surprise, nous concevons des expériences utilisateur nettement améliorées.
Il a souvent été affirmé par les fans de pop-sagesse qu'il existe seulement deux parcelles distinctes dans toute la culture occidentale: une personne part en voyage et un étranger vient en ville.
Un bref survol de votre bibliothèque ira à l'encontre de la règle, à moins que vous n'autorisiez les voyages métaphoriques, dans lesquels tout se déroule, mais la fréquence avec laquelle l'idée se répète et le sens qu'elle semble donner en dit long sur la centralité de l'inconnu occidental idées de narration.
Dans les deux cas, une personne est initiée à quelque chose de nouveau et d'inattendu, la seule variation est le point de vue dont parle le récit; dans les deux cas, l'arc de l'histoire est l'inconnu qui devient le connu . Lorsque Clint Eastwood se lance dans une ville en pleine crise dans l’Idaho des années 1800, notre curiosité à propos de son identité est ce qui motive notre engagement. Lorsque nous lisons la trilogie du Seigneur des Anneaux de Tolkien , nous ne doutons jamais que Frodon atteindra finalement Mt Doom, l'intérêt est de savoir ce qui se passe en chemin.
La clé de la narration est qu'il y a une inconnue et que l'inconnu sera connu.
Les designers ne sont pas des conteurs d'histoires
De nombreux concepteurs se sont présentés comme des conteurs d’histoires, mais il s’agit simplement d’une façon kitsch de faire référence à la communication. Pour raconter une histoire, nous devons encourager l'inconnu en prévision d'une grande révélation, et le principal obstacle à cette approche est que les expériences Web - et je dirais que la plupart des rencontres avec le design - sont non linéaires et ouvertes.
Le design est en effet beaucoup plus proche de la poésie. La poésie existe généralement en gros morceaux et les thèmes explorés sont ouverts à l'interprétation.
Loin de construire une histoire, le travail d'un designer consiste à clarifier le moins possible.
Utilisation des spoilers dans les microinteractions
Quel est l'élément le plus intéressant dans Jaws ? Est-ce que Brody se dispute avec le maire? Est-ce que Quint raconte l'histoire d'Indianapolis? Est-ce que l'affaire Hooper avec Ellen Brody (oui vraiment, lisez le livre!)? Non c'est la musique. Dès que ce requin commence à jouer du violoncelle, nous savons qu'il arrive, son arrivée est littéralement annoncée. [Incidemment, Jaws est un exemple intéressant d'un film dans lequel un étranger (le requin) vient en ville, puis un homme part en voyage vers la mer.]
Nous pouvons créer un engagement dans le design en lâchant continuellement des spoilers, en faisant allusion à ce qui arrive, avec notre propre musique pour violoncelle. Pour ce faire, nous utilisons des composants d'interface-microinteractions simples, comportant un déclencheur et un retour. La partie de rétroaction de la microinteraction est l'endroit où insérer votre spoiler.
Cela fonctionne en prévisualisant des données qui, dans une expérience linéaire, seraient introduites ultérieurement. La clé est de faire avancer les données.
Des vignettes
Commençons par quelque chose de familier: l'exemple classique de la transmission d'informations est la vignette. Une vignette est un aperçu d'un élément plus grand, un guide visuel à quoi s'attendre à l'autre bout d'un lien.
Jacky Winter est une agence de talents pour artistes, illustrateurs et animateurs. Avec un large éventail de talents, la meilleure façon de parcourir le travail est d'utiliser les vignettes traditionnelles.
Les vignettes ne doivent pas nécessairement être traditionnelles. Alexandre Nacache est un directeur artistique et concepteur interactif dont le site utilise des aperçus d'éléments de projet, plutôt que des reproductions d'un dessin en miniature.
Bao est un restaurant taïwanais avec trois lieux à Londres. Leurs illustrations d'emplacement agissent comme des vignettes, suggérant non seulement un regard sur le restaurant, mais une expérience possible.
Un jour de congé est un studio de design basé à Glasgow. Les vignettes sur leur site constituent une composante majeure de la direction artistique et établissent leur propre esthétique de marque.
La lecture de 5 minutes
À cette époque, le seul moyen de savoir combien de temps un article comme celui-ci allait prendre était de vérifier l'heure, de lire l'article et de vérifier l'heure à nouveau.
Compte tenu de son adoption, l’un des éléments d’interface utilisateur les plus réussis de ces dernières années est le petit indicateur utile qui nous indique combien de temps un article prendra pour lire. Popularisé par des sites comme Medium, il n'y a pas de suivi oculaire, ou la vitesse de lecture est calculée. devrait être lu dans 30 secondes ou à peu près. Mais même ces données grossièrement généralisées sont suffisantes pour permettre aux utilisateurs de prendre des décisions éclairées concernant leur engagement sur un site, un article ou un produit.
Le monotone de Australian Design Radio est cassé que par le rouge contrastant utilisé pour les états de vol stationnaire. Le seul élément qui utilise le rouge sans interaction? La tête de lecture contenant la position et la longueur totale.
Séquoia est une société de capital-risque basée en Californie. Les profils des entreprises technologiques occupent leur page de destination. Chaque profil comporte une position numérotée, et le minuteur animé du curseur attire votre attention sur l’endroit où vous vous trouvez.
Vimeo propose certaines des meilleures vidéos sur le web. Ils auraient pu afficher toutes les informations qu'ils souhaitaient - producteur, sujet, titre - en survolant leurs vignettes. Ils ont choisi la durée.
Cinelli est la marque de vélo la plus cool d'Italie. Leur curseur de produit comporte des boutons «suivant» et «précédent» numérotés. Les flèches seules suffiraient à transmettre un sens, mais les concepteurs ont avancé les données avec un simple ajout aux boutons.
Données qualifiantes
L'une des manières les plus simples d'améliorer une interface consiste à qualifier les données avec un contexte significatif. La clé de ceci n'est pas de fournir trop d'informations, juste un simple résumé qui peut être lu en un coup d'œil.
Aide Scout est un service client SaaS. Leur tableau de bord affiche des indicateurs clés tels que le nombre total de conversations, ce qui n'aurait aucun sens sans l'ajout d'une flèche et un pourcentage indiquant s'il s'agit d'une amélioration ou d'un échec.
Réserver un billet de Lyon à Bordeaux est simplifié lorsque Ligne ferroviare affiche une barre sous la durée du trajet, pour donner une indication visuelle de la durée et du nombre de modifications.
Cartes et réassurance
Lorsque nous anticipons des voyages, en particulier un voyage dans l'inconnu, nous démystifions souvent l'expérience avec une carte. Dans le monde réel, une carte ressemble beaucoup à une vignette d'une destination. Dans la conception de l'interface utilisateur, les cartes que nous utilisons clarifient l'architecture de l'information.
Les étiquettes constituent l’un des domaines les plus complexes de l’architecture de l’information, car elles tendent vers le jargon, souvent un jargon exclusif à l’entreprise. L'ajout de microcopies sans jargon prévisualise la destination pour les utilisateurs et les aide à trouver la bonne information.
Treillis est un SaaS de gestion des performances, mais leurs produits sont très centrés sur l’entreprise. Ils résolvent ce problème en signalant la caractéristique clé de chaque produit dans leur menu.
Thriva vous aide à suivre votre santé avec des tests sanguins que vous pouvez prendre chez vous. Ils ont trois niveaux de produit qui sont clairement expliqués dans leur menu.
Les transactions financières sont techniquement complexes. Plaid offre une variété de produits API pour les développeurs. Leur menu explique non seulement la principale caractéristique de chaque produit, mais il propose également deux solutions potentielles basées sur des combinaisons de produits.
La clé de la conception d'interface utilisateur efficace est Spoilers
Raconter des histoires est l'antithèse d'un design efficace, car les histoires, de par leur nature, se tournent vers les éléments inconnus d'une expérience. Le design, en revanche, cherche à éliminer l'inconnu en clarifiant.
Lorsque nous présentons des données dans un design, nous le faisons généralement de manière simple. Un seul morceau de données bien sélectionnées peut clarifier un processus entier. Les microinteractions sont le moyen idéal pour insérer ces «spoilers», qui permettent aux utilisateurs de créer leur propre expérience, tout en sachant toujours précisément où ils se situent dans un contexte plus large.
En révélant plus qu'une histoire linéaire, nous engageons les utilisateurs beaucoup plus efficacement et nous concevons des expériences robustes et agréables à utiliser.