Ramener la personnalité sur le Web

Nous sommes heureux de vous annoncer que le tout nouveau Smashing Book 6 est maintenant disponible en pré-commande . Pour vous donner un avant-goût de ce que le livre propose, voici un aperçu d'un chapitre écrit par Vitaly Friedman. Explorons un guide stratégique pour ramener la personnalité sur le web, dans des projets réels de la vie réelle.

Les mises en page Web génériques sont devenues un peu impropres dans les conversations entourant la conception de sites Web de nos jours. Nous sommes ennuyés et légèrement ennuyés par la prévisibilité et la non-inspiration de la plupart des expériences web. Pas sans raison, cependant. Chaque page d'atterrissage semble être un jumeau de presque toutes les autres pages Web.

Dans l'en-tête, une image de héros convaincante avec un titre principal court est suivie d'un sous-titre plus long. Sous eux, des blocs uniformes d'objets médiatiques sont alternés – une image et quelques paragraphes de texte. D'abord, texte à gauche, image à droite; puis image sur la gauche, texte sur la droite. Rincez et répétez. Des photos de profil arrondies et une grille carrée de vignettes complètent l'image, avec des formes parfaites parfaitement alignées le long de la grille de 12 colonnes. Les seules variations viennent des transitions de parallaxe sporadiques et des carrousels notoires, positionnés en haut ou en bas de la page – ou peut-être les deux.

Ce n'est pas quelqu'un qui impose ces règles ou limitations à notre production créative; ils proviennent généralement de bons motifs et des meilleures intentions. Après tout, l'un des principaux principes du design web a toujours été de créer une interface subtile, presque invisible et fonctionnelle – une interface qui ne fait pas penser aux utilisateurs, où moins est plus, et la forme suit la fonction, où la simplicité prévaut – une interface Là où tout se sent juste.

Pourtant, quand tout est structuré de manière prévisible, rien ne ressort vraiment. Étant donné que des noms, des logos, des icônes, des typographies, des mises en page et même des dégradés de boutons d'appel à action sont remarquablement similaires, il n'est pas surprenant que nos utilisateurs trouvent difficile de distinguer les marques, les produits, et services ces jours-ci.

Très peu de gens manquent les temps d'or de l'infâme Flash, avec ses dispositions expérimentalement frappantes et sa navigation mystérieuse et mystérieuse. Certes, dans de nombreux cas, l'objectif est passé de la création d'une expérience à la simple fourniture de contenu sous une forme structurée. Pourtant, contrairement aux beaux jours où nous parlions de sites merveilleux ou horribles, la plupart des expériences sont aujourd'hui presque invisibles ce qui rend la connexion émotionnelle avec eux extrêmement difficile.

Si je vous demandais de pensez à un site web récemment visité qui vous a laissé une impression durable et inoubliable, ou à quels sites vous aimez vraiment et admirez pour leur design unique, ou quel site a une personnalité vraiment remarquable, seriez-vous capable de répondre à ces questions immédiatement? Seriez-vous en mesure de fournir plus d'un ou deux exemples? Les chances sont que vous ne le fassiez pas.

Tous les sites Web ne doivent pas être inoubliables. Ce n'est pas que les sites web mémorables fonctionnent automatiquement mieux, ou atteignent de meilleurs indicateurs de performance. Cependant, si vous voulez que votre produit ou service se démarque dans un environnement hautement concurrentiel et stimulant, vous devez être différent d'une manière ou d'une autre. Beaucoup d'entre nous considèrent que c'est la tâche de l'équipe marketing. Après tout, ils sont censés placer le produit dans la bonne lumière, au bon endroit, pour le bon public, au bon prix. Pourtant, dans un monde où de nombreux produits numériques sont assez utilisables et riches en fonctionnalités, ce serait une entreprise décourageante qui nécessiterait souvent des mois de recherches et de tests approfondis sans la garantie d'un résultat positif. Et même alors, à moins que vous soyez extrêmement bon pour prédire et façonner la prochaine grande chose brillante, cela pourrait ne pas être assez bon.

Les clients sont habitués et attendent des expériences décentes. Ils ne sont pas toujours rapides ou simples, mais simplement en raison du nombre d'offres, il y a toujours des outils et des services décents qui seraient suffisants.

Nous avons tendance à croire que nous rationalisons nos décisions à l'extrême, en choisissant meilleurs candidats, mais ce n'est pas nécessairement vrai. Selon la théorie de la satisfaction de Herbert A. Simon nous préférons la première option qui répond à un seuil d'acceptabilité, simplement parce que nous ne savons pas si nous pouvons trouver une meilleure option ou quel effort prendrait. Nous étudions rarement le spectre complet des options en détail (et parfois c'est presque impossible), et par conséquent, nous satisfaisons avec un candidat qui répond à nos besoins ou semble répondre à la plupart des besoins.

Pour attirer l'attention du public, nous devons être meilleurs que «assez bien». Rien ne peut battre le bouche à oreille, mais pour y arriver, nous devons trouver quelque chose qui vaut la peine d'être regardé. Et si je vous disais qu'il y avait un raccourci pour y arriver?

Ce n'est pas seulement une question de prix. Ce n'est pas seulement sur les fonctionnalités. Il ne s'agit pas seulement de choisir le bon placement des boutons, ou les bonnes nuances de couleurs dans les tests A / B sans fin. Et il ne s'agit pas de choisir une mignonne illustration de mascotte qui apparaît dans les campagnes d'email. En fin de compte, il s'agit de créer une expérience dont les gens peuvent tomber amoureux, ou de se connecter profondément avec – une expérience qui, bien sûr, stimule le but du site, mais en montre aussi le côté humain , comme la personnalité des gens qui la construisent, leurs valeurs et leurs principes, leurs choix et leurs priorités.

Cela signifie concevoir la voix et le ton, copier l'interface et adopter la narration, l'authenticité, l'inclusivité et le respect; et tout cela tout en établissant un langage visuel unique soutenu par des compositions de mise en page originales et des modèles d'interaction. Associées à une messagerie claire et honnête, elles créent une signature unique qui, utilisée de manière cohérente, distingue le produit des autres. Cette tâche peut sembler aussi décourageante que des mois de recherche marketing, mais cela ne nécessite pas forcément une énorme quantité d'efforts ou de ressources.

Dans ce chapitre, nous examinerons quelques techniques et stratégies pratiques ] qui pourrait vous aider à trouver, former et affiner votre personnalité efficacement. Ce faisant, nous explorerons comment le faire de manière cohérente pourrait s'intégrer dans les processus de conception existants, avec de nombreux exemples pour vous donner un bon départ. Mais avant d'y arriver, nous devons comprendre comment les modèles de conception omniprésents et les meilleures pratiques s'inscrivent dans l'équation.

Rupture par rupture

Le processus de création n'est pas linéaire. Chaque décision de conception – des couleurs et du type à la mise en page et l'interactivité – nous oblige à considérer les options et à évaluer les combinaisons. Alors que le processus créatif est souvent perçu comme un processus simple et itératif, il est très rare que nous passions d'une maquette à l'autre en passant par une série d'améliorations et d'ajustements. Plus souvent qu'autrement, nous avons tendance à flotter et à diverger, nous dirigeant d'une impasse à l'autre, résolvant des conflits et déroutant notre direction créative en cours de route.

Ces impasses se produisent lorsque nous réalisons que nous n'allons vraiment nulle part avec résultat exposé sur notre toile numérique. Nous y sommes allés tant de fois, nous savons explorer des territoires inexplorés et manoeuvrer les flancs, et alors que nous continuons à sculpter nos idées, nous continuons à progresser, lentement mais sûrement vers un résultat tangible. Deux pas en avant, un pas en arrière, revisitant ce que nous avons fait jusqu'ici et affinant ces pixels précieux – basés sur … franchement, basés sur l'intuition et les expériences aléatoires. Finalement, le va-et-vient nous amène à un endroit calme, paisible et beau – juste où nous pensons avoir trouvé une solution – la solution .

Nous savons, bien sûr, que c'est il est peu probable que ce soit le un cependant, n'est-ce pas?

Ce voyage de rien à quelque chose n'est pas seulement plein de micro conflit -les décisions; il est bourré d'inconnues, de pièges, de frictions et de contraintes difficiles, qu'elles soient techniques ou temporelles. Et à chaque instant du processus, les créatures belles et inoffensives de notre imagination peuvent être impitoyablement écrasées contre la dure réalité des interviews des utilisateurs et des révisions des clients. Nous nous déplaçons donc d'une direction à l'autre dans un lieu fertile mais remarquablement hostile. En conséquence, nous ne pouvons généralement pas nous permettre le luxe de perdre du temps, car nous savons que le chemin vers cette échéance, flottant sans danger dans le futur lointain, sera plein de surprises et de retournements inattendus. Pour éviter de perdre du temps, nous nous appuyons sur des éléments qui ont bien fonctionné dans nos projets précédents: la navigation hors toile, le motif accordéon, les images de profil arrondies et la mise en page de la grille de 12 colonnes. Ce n'est pas par manque de connaissances, de compétences ou d'enthousiasme que nous retombons dans toutes ces pratiques établies – il est simplement infiniment plus difficile et long de trouver quelque chose de différent à chaque fois. Et parce que nous manquons de temps, nous utilisons tous ces modèles de conception merveilleux et éprouvés, qui sont tous des solutions tangibles et viables pour un type de problème particulier. Évidemment, ce processus peut être légèrement différent pour différentes personnes, mais décomposé en son essence, c'est ce qui se passe dans les coulisses pendant que nous progressons dans nos conceptions.

Quand nous avons commencé à travailler sur la refonte de Smashing Magazine il y a quelques années , l'une des premières mesures que nous avons prises était de répertorier et d'explorer les composants et les micro-interactions. Nous avons construit la mise en page de l'article et un guide de style, des tableaux et des formulaires réactifs, et utilisé de nombreuses meilleures pratiques établies pour les garder accessibles, rapides et réactives. Pourtant, en rassemblant toutes ces composantes parfaites, nous avons réalisé que même si elles fonctionnaient bien en tant que solutions autonomes, elles ne fonctionnaient tout simplement pas ensemble. Les éléments constitutifs du système n'étaient pas suffisants pour entretenir et soutenir le système. Nous avons dû redessiner ce que nous avions construit jusqu'à présent, et nous avons dû introduire des connexions globales entre ces composantes qui seraient définies par la personnalité, la voix et le ton de la nouvelle identité.

concevoir des modèles à nos interfaces, nous réunissons essentiellement un groupe de modules lâches ou d'interactions qui n'ont aucun lien avec tout le reste. Plutôt que de se demander comment un modèle particulier contribue à l'objectif de l'expérience, nous explorons souvent un micro-problème isolé, en mettant ensemble des micro-solutions. Avec les modèles de conception, nous courons le risque d'ajouter un composant juste parce qu'il est à la mode ces derniers temps – comme un effet de parallaxe, des transitions lentes et percutantes, et des fondus de fondu. Ce faisant, nous risquons parfois de perdre de vue le rôle que ce composant jouerait à plus grande échelle et comment il pourrait être relié à tout le reste. En conséquence, nous produisons des dessins sans âme, terne, gonflés avec des compositions génériques et des traitements visuels génériques. C'est ainsi que nous créons quelque chose qui ressemble à tout le reste.

Ce n'est pas que les modèles de conception et les meilleures pratiques sont nécessairement mauvais, cependant. Ils sont simplement une épée à double tranchant aidant et troublant la sortie visuelle., En les appliquant, nous devons le faire avec soin et réflexion. Chaque fois que vous considérez résoudre un problème avec un motif de conception, c'est une bonne idée de vous poser quelques questions:

1. Quel problème résolvons-nous exactement?
2. Le modèle est-il vraiment la meilleure solution au problème? Est-ce que les gens vivent cette interaction, et quels points de douleur rencontrent-ils en faisant cela?
3. Comment ce composant nous aide-t-il à atteindre l'objectif global du système?
4. Comment connecter ce composant au reste du système? en termes d'esthétique et de design d'interaction?
5. La ​​solution est-elle vraiment universellement comprise, ou devons-nous apporter plus de clarté à la conception (étiquettes, meilleure copie, affordance, remplacement des icônes par des mots)? bonne idée de garder le motif tel quel en tout temps? Ou est-il préférable de le charger ou de l'ajuster conditionnellement, peut-être en fonction de la fenêtre, ou combien de fois un client a visité la page?

Essentiellement, nous essayons de décomposer un motif de conception et comment c'est utile ou dommageable, et comment cela nous aide à atteindre nos objectifs. Nous rompons avec les modèles prévisibles en rompant avec leur nature et en comprenant pourquoi nous les utilisons réellement. D'abord, nous examinons le composant dans sa forme nue et abstraite, sans le contexte de l'endroit où il est généralement utilisé et comment il est généralement conçu; par exemple, plutôt que de penser à une navigation hors-toile de gauche à droite ou de droite à gauche, nous examinons le modèle d'interaction en lui-même – essentiellement une divulgation progressive dans laquelle le contenu est masqué par défaut et affiché robinet. Ensuite, pour chaque modèle, nous explorons ses problèmes d'ergonomie et ses problèmes, les résolvons, puis stylisons et concevons le module de manière à ce qu'il se sente connecté à tout le reste. Cette dernière étape pourrait être quelque chose d'aussi simple qu'une transition uniformément utilisée, ou un motif géométrique, ou une position non conventionnelle dans la mise en page. Enfin, une fois que tout est en place, nous reconditionnons le motif de conception et l'ajoutons à la bibliothèque, prêt à être servi pour le reste du système.

Bien sûr, les bonnes pratiques et les schémas de conception sont des raccourcis fantastiques. suivre plus vite. Ils nous permettent d'exploiter les interactions prévisibles et les connaissances séquentielles que la plupart de nos utilisateurs auront. En fait, ils sont aussi pertinents aujourd'hui qu'ils l'ont toujours été. La clé est de trouver un moyen de les appliquer de manière significative dans le contexte du langage visuel utilisé dans tout le site, et de savoir quand les rompre délibérément pour déclencher un lien émotionnel. ] Les humains se connectent aux humains

Vous souvenez-vous du bon vieux temps où nous avons utilisé un «nous» omniprésent pour faire paraître nos petites boutiques en ligne plus grandes qu'elles ne l'étaient en réalité? Vous avez peut-être été la seule personne à travailler chez vous avec des pantoufles et un peignoir, ou l'une des rares personnes dans une petite agence de design, mais ce profond "nous" a rendu l'entreprise plus sérieuse et donc plus fiable. il? Nous avons prétendu être quelqu'un d'autre pour obtenir des projets qui ne nous seraient pas confiés autrement – et je serai le premier à admettre que je suis aussi coupable que tout le monde.

De nos jours, quand tant de choses autour de nous sont exagérées et trompeuses, l'authenticité reste l'une des rares qualités auxquelles les gens se connectent réellement. Trop souvent, cependant, il n'est pas exposé du tout par un site Web, créant malheureusement une image vague d'encore une autre entité obscure couverte de photos d'entreprise et de jargon vide de sens. Lorsque chaque marque promet de perturber ou d'être différente, rien ne se sent vraiment perturbateur ou différent, et cela provoque l'aliénation et le scepticisme.

Les humains peuvent vraiment se connecter à des marques de confiance, mais les marques doivent d'abord gagner cette confiance. Évidemment, cela vient de recommandations fiables et d'expériences positives. Mais en tant que concepteurs communiquant pour le compte des entreprises, comment pouvons-nous efficacement susciter la confiance des personnes qui ne sont pas encore au courant de la marque? En fait, la confiance peut également provenir de l'apparence de la marque, qui peut être influencée par ses valeurs, ses croyances, ses principes et ses activités. Il n'est pas facile de tomber amoureux d'une entreprise ou d'une organisation sans connaître quelqu'un qui l'admire presque contagieusement. Il est beaucoup plus facile de se connecter avec personnes dont vous soutenez les valeurs et avec personnes qui soutiennent leurs croyances et principes.

Si les humains se connectent le mieux aux humains, peut-être les valeurs des personnes qui les créent, nous pourrions être un pas de plus vers le déclenchement de cette connexion émotionnelle souhaitée. Nous y sommes déjà allés, bien sûr, et c'est pourquoi nous montrons les personnes qui travaillent dans l'entreprise sur une page «Team» ou dans le bas de la page d'accueil, n'est-ce pas? Eh bien, regardons-le d'un point de vue légèrement différent.

Et si on vous demandait de décrire la personnalité de votre marque? Quels adjectifs utiliseriez-vous? Pensez-y une minute et écrivez-les.

Prêt? Les chances sont grandes que vous avez trouvé des réponses communes et prévisibles. Peut-être que des mots tels que «simple», «propre», «fort», «dynamique», «flexible» ou «bien structuré» sont venus à l'esprit. Ou peut-être «attentif aux détails», «concentré», «axé sur l'utilisateur» et «axé sur la qualité».

Pouvez-vous voir un problème avec ces réponses? Ces mots décrivent notre intention plutôt que notre personnalité . Alors que le premier est généralement très spécifique et stable, le second est généralement très flou et en constante évolution. Les qualités décrites ci-dessus ne fournissent pas une bonne réponse à la question, car elles décrivent comment nous voulons être perçus mais pas nécessairement comment nous sommes réellement . En fait, nous ne savons généralement pas qui nous sommes ni comment nous sommes perçus en dehors de la bulle confortable dans laquelle nous nous trouvons.

Au lieu de cela, que se passerait-il si vous demandiez à vos collègues et clients une question légèrement différente? à propos de la plupart de leur travail, et ce qu'ils apprécient le plus sur l'entreprise ou le produit. Peut-être se soucient-ils de la diversité des collaborateurs talentueux et motivés qui sont compétents et expérimentés, mais aussi accessibles et humbles? C'est peut-être le fait que la société contribue activement à des projets pro bono pour des organisations à but non lucratif qui font une réelle différence dans le monde. Peut-être parce qu'il soutient les écoles et les nouveaux arrivants dans l'industrie en offrant une bourse annuelle. Ou parce que les bénéfices sont liés à une juste rémunération pour tous les employés. Ou simplement parce que cela vous permet de jouer avec les dernières technologies de pointe et des expériences folles, et de contribuer à l'open-source dans cinq pour cent de votre temps de travail. L'entreprise n'a pas besoin de grandes ambitions, de buts idéalistes ou d'un environnement de travail sophistiqué pour se démarquer

Sidenote : Concevoir des expériences humaines signifie être gentil et humble, et mettre l'accent sur les qualités qui comptent l'entreprise et aux utilisateurs. Cela signifie mettre en évidence la vie privée, le respect, l'éthique et la transparence, mais aussi refléter la personnalité des personnes qui travaillent sur le produit .

Voici un exemple. Votre entreprise peut se soucier de la diversité, de la confidentialité des données, de l'accessibilité et de la transparence des prix. Cela signifierait que votre interface est accessible et honnête, que vous vous opposiez publiquement à la divulgation de données client à des tiers et que vous incluez des fonctionnalités permettant de comparer les prix sans pour autant mettre votre agenda à l'épreuve. Vous pouvez mettre en évidence ces valeurs en même temps que les niveaux de prix compétitifs, et mesurer le résultat.

Maintenant, pouvez-vous trouver un fil similaire parmi toutes les déclarations ci-dessus? Parce qu'ils proviennent d'expériences personnelles, ils semblent beaucoup plus humains et relatables que des termes plus généraux et abstraits que vous pourriez trouver initialement.

C'est pourquoi des entreprises comme Slack ou MailChimp se sentent tellement plus tangibles que des marques comme Uber ou General Electric. Ils utilisent des microcopies originales et informelles et des illustrations qui reflètent leur côté humain. Ils ne brillent pas à travers une déclaration de mission ou des communiqués de presse, mais à travers les bizarreries dans l'interface et comment ils communiquent publiquement, par e-mail, ou dans les réseaux sociaux. C'est la base sous-jacente d'un personnage profondément intégré dans l'expérience utilisateur.

Pour éviter une apparence générique, vous devez définir votre personnalité Premièrement Cela signifie poser les bonnes questions et trouver des réponses précises.Lorsque nous avons mené des entrevues auprès de nos lecteurs, nous avons rapidement réalisé qu'ils avaient une vision assez différente de la marque Smashing que nous. tous les suspects habituels, les qualités que vous avez probablement trouvées au départ.La vérité était déconcertante, cependant: nous ne pouvions pas être plus loin de la façon dont la marque a été réellement perçue.

Nous avons toujours voulu le magazine est une publication professionnelle et respectable avec une voix forte dans l'industrie, soulignant le travail important effectué par les membres de la communauté. Les entrevues avec les utilisateurs ont fait ressortir des qualités qui ne décrivaient pas vraiment cet objectif de la façon dont nous nous sommes toujours efforcés de le faire. Nous avons plutôt entendu des mots comme «informel», «excentrique», «amical», «accessible», «favorable», «communautaire» et, plus important encore, «félins».

Maintenant, nous n'avons jamais voulu notre héritage d'être des chats, mais ce n'était pas vraiment à nous de jouer. En 2012, notre cher illustrateur Ricardo Gimenes a choisi de donner vie à un chat Smashing en tant que mascotte pour notre toute première conférence Smashing. Il n'y avait pas de décision consciente pour ou contre. Nous n'en avons même pas discuté correctement, car nous ne savions pas si nous allions accueillir plus de conférences dans le futur de toute façon. Cette petite décision a mis quelque chose en mouvement que nous ne pourrions pas rejeter des années plus tard. Parce que les conférences sont devenues l'un de nos produits centraux, nous les avons fortement promues dans nos publipostages, nos annonces, nos publications et nos messages sur les réseaux sociaux.

Au fil du temps, chaque conférence a dû accepter une illustration de chat. le sien, et tous ces chats ont été confrontés à nos clients encore et encore pendant des années. Les illustrations de chats ont fortement influencé la perception de la marque sans que nous la favorisions ou la guidions activement. Nous avons donc dû prendre une décision: soit laisser les chats disparaître lentement, soit les intégrer fortement dans le nouveau design. Vous avez probablement déjà découvert ce que nous avons réglé avec. À ce stade, plus de 70 chats excentriques et amicaux se promènent librement sur le nouveau site Web de Smashing Magazine

Cependant, autant qu'une mascotte peut aider à rendre la marque plus accessible , c'est rarement suffisant pour transmettre l'histoire complète. Les entrevues nous ont aussi aidés à comprendre à quel point l'aspect de la communauté de Smashing Magazine était important. Les mots «communauté» et «personnes» sont souvent apparus dans les interviews des utilisateurs, et ce n'est pas sans raison – le magazine n'existerait pas sans les humbles et généreuses contributions de source ouverte des personnes derrière la scène. Cependant, notre conception ne le reflétait pas vraiment. Nous avons donc choisi de mettre un peu l'accent sur la mise en évidence des personnes derrière la scène – les auteurs, les éditeurs et les membres de la communauté. Montrer les personnes en évidence est devenu un autre attribut définissant notre signature de conception – et cela explique pourquoi les miniatures d'auteurs occupent une place aussi importante dans la conception, et pourquoi nous soulignons les auteurs publiant sur leurs propres blogs ou autres plateformes sur notre page d'accueil

tout cela signifie-t-il pour vous? Posez des questions à la surface des qualités humaines qui se trouvent dans le cœur même de l'entreprise en premier. Cela vous donnera une base pour construire un langage visuel sur – un langage qui traduirait vos qualités à la conception de l'interface. Chaque entreprise a une signature unique d'une certaine manière, et cela se reflète souvent à travers les gens qui y travaillent. En fin de compte, il s'agit juste de trouver le temps et le courage de l'explorer – et d'embrasser le fait que nos défauts et bizarreries en font partie autant que nos grandes ambitions et nos bonnes intentions.

La ​​personnalité n'est jamais parfaite

En tant que designers, nous sommes souvent fiers d'être perfectionnistes. Chaque pixel doit être poli, chaque angle doit être juste, et tous les composants doivent être alignés sur la grille. Rappelez-vous cette discussion sans fin sur le parfait border-radius sur les boutons d'appel à l'action? Après un débat éloquent et long, l'équipe de conception s'installe finalement sur 11px, juste pour passer à 13px quelques mois plus tard, juste pour revenir à 12px d'ici la fin de l'année. Dans de nombreuses entreprises, ces changements sont provoqués par de nombreux tests A / B en cours, dans lesquels rien n'est laissé au hasard, et tout – des hypothèses aux décisions de conception – doit être testé et prouvé en premier.

plus efficace, la solution la plus performante – une solution juste. Cependant, n'essayons-nous pas de tuer nos chevaux en essayant d'améliorer encore et encore la même minuscule partie, juste pour en trouver une variante légèrement meilleure, avec tous ces changements microscopiques minimes?

Espen Brunborg, un chef créatif pour une agence de graphisme en Norvège, suggère à de ne jamais effectuer de tests A / B seuls. ¹ Selon Espen, les tests A / B nous aident à atteindre un maximum de local expérience utilisateur, mais souvent ils ne sont pas assez vastes pour englober la vue d'ensemble dans son ensemble, nous empêchant effectivement d'atteindre un maximum global ²

¹ Jakob Nielsen a écrit un article intitulé " Mettre le test A / B à sa place " en 2005. L'article met en évidence certaines des limites et des inconvénients des tests A / B; Plus particulièrement, il ne devrait jamais être la seule méthode utilisée sur un projet – l'observation du comportement des utilisateurs génère souvent des idées plus profondes.

² Bill Buxton était probablement le premier à discuter de ce problème dans son livre Sketching User Experiences. 2007. Selon Bill Buxton, les concepteurs se retrouvent souvent avec un problème local d'escalade lorsque le design est plafonné à un maximum local

C'est pourquoi en plus des tests A / B (dans lesquels microcopie et couleurs et positions dans le mise en page sont testés), ils exécutent des tests A / Z testant une conception "de référence" existante par rapport à des conceptions complètement différentes. Leurs différences ne se trouvent pas seulement à l'ombre d'un bouton ou d'une copie, mais dans des dispositions et des traitements visuels absolument différents. L'image de marque et les principes de base restent les mêmes, mais à peu près tout le reste continue d'évoluer. Cela permet à Espen et son équipe d'atteindre de nouveaux maxima absolus en termes de conversion et de KPI tous les quelques mois.

Dans une de nos conversations il y a quelques années, Elliot Jay Stocks, impliqué dans la refonte 2012 de Smashing détail de son processus de conception qui est resté avec moi pendant un certain temps. Il a dit qu'un bon design possède l'une des deux qualités: soit absolument parfait dans tous les sens, avec un alignement, un dimensionnement et une hiérarchie parfaits (ce qui est habituellement difficile à réaliser), soit délibérément imparfait de quelques façons cohérentes (ce qui est beaucoup plus facile à réaliser). Selon Elliot, dans un bon design, il ne devrait rien y avoir entre les deux. En d'autres termes, les boutons doivent être parfaitement alignés sur la grille, ou ne pas être alignés – décalés de 20-30 pixels et plus. Etre éteint juste de quelques pixels serait mal, alors qu'être de 20-30px semble délibéré, et donc moins cassé.

Alors, si au lieu de chercher la solution parfaite pour chaque composant, nous avons couru et testé différentes expressions de nos personnalités? Dans la conception de l'interface, cela signifierait des directions créatives entièrement différentes. Peut-être une mise en page multicolonne avec une typographie audacieuse, contre une mise en page géométrique avec une seule couleur d'accent? Et si, plutôt que de rechercher la rondeur parfaite d'un bouton, vous introduisiez délibérément de légères incohérences? Une animation personnalisée sur l'un des boutons d'appel à l'action, ou un placement dynamique d'une image en dehors de la boîte dans laquelle il est généralement censé être placé? Ou peut-être en tournant une sous-position de 90 degrés? La personnalité peut être exprimée de différentes manières, de sorte que la tâche consiste à découvrir des variations qui sont suffisamment prometteuses pour être testées.

Une personnalité n'est jamais parfaite, et peut-être que nos sites Web ne devraient pas non plus être parfaits. Et si vous créiez un tableau d'art visible publiquement dans votre entreprise, avec des aimants représentant les qualités d'un côté, et des aimants représentant des composants ou des traitements visuels de l'autre côté, puis s'affrontant au hasard pour produire une direction visuelle pour le prochain test A / Z? Appliquez le perfectionnisme au niveau de détail requis pour produire des conceptions délibérément imparfaites.

Cette approche ne sera pas toujours gagnante, mais complétée par des tests A / B, elle pourrait vous amener à de nouveaux sommets que vous ne pourriez pas atteindre autrement. En fin de compte, nous voulons que les clients tombent amoureux de leur expérience et, par conséquent, de la marque, pour former un lien durable. Une interface délibérément imparfaite mais humaine peut nous aider à y parvenir. Il faut que vous trouviez une seule qualité distincte que personne d'autre ne possède, et que vous l'augmentiez.

Choisissez une chose et augmentez-la

Dans nos interfaces, la personnalité peut être exprimée par une signature – un traitement visuel récurrent, la voix et le ton de la copie, ou un schéma d'interaction utilisé de manière cohérente d'une page à l'autre. Il pourrait être tentant d'explorer un mélange varié de traitements sophistiqués, non conventionnels, qui seraient visibles à des distances de l'interface du curseur de la souris. Cependant, c'est une recette pour une expérience désastreuse qui priorise l'expression d'un concepteur sur les intentions des utilisateurs. Si audacieuse que soit la personnalité, sa signature de design doit rester subtile.

Lorsque Dan travaille à la refonte de Smashing, un détail intéressant que Dan a évoqué au tout début du projet est le rôle de la signature dans le résultat final. Selon Dan, le choix de quelques expressions distinctes et concurrentes de la personnalité est souvent trop: il suffit de choisir un petit détail et de l'amplifier jusqu'au bout. In more practical terms, that means picking one pattern and using it consistently, everywhere: on every page, and in every user interaction. How do you find that sacred detail? You go back to the roots of the company.

In the very early days of Smashing Magazine, we didn’t have any branding at all. We chose a pretty random WordPress theme, placed the name in Arial, and that was it. Eventually, in early 2007 Ryan Denzel from South Africa designed Smashing Magazine’s logo, which included a letter S tilted by 11.6 degrees. Despite minor alterations in the shade and colors of the logo, we stayed true to the design for over a decade, and with the recent redesign, we weren’t considering changing it. However, when seeking a design signature that would be deeply connected with the brand, we actually took the tilting of the logo very close to our heart — from the very start.

Early design explorations with Andy Clarke used the tilting consistently for every single visual element on the site. This signature carried over to the final design as well. Today, all icons, author images, conference flags, job board logos, illustrations on product panels, and book covers on product pages are all consistently tilted. That tiny detail doesn’t break the experience, yet it lends a unique visual treatment to the design that’s clearly distinguishable from everything else as a result.

Admittedly, we did redesign the tilting through the process, moving away from 11.6 degrees to 11 degrees, and adding 11px roundness to all components. It was months later that the bold colors and typography and layout came into play, supporting the quirkiness and informal style of the tilted elements — all slowly crawling up into the design mock-ups eventually.

At this point you might be slightly worried that you don’t really have any distinctive element that could be promoted to become your signature. You might not have the tilting or a particular color palette that stands out. As it turns out, anything can become a design signature. In the next sections, we’ll explore some examples and ideas you could use for you own particular situation.

Why Custom Illustrations Work Better Than Stock Photos

Once the qualities of the personality have been identified, the next step is to translate these qualities into a distinct visual language. Initially it happens via color and typography, so when defining the visual style, look out for these qualities in color combinations and type families.

Probably the easiest way to come up with your own design signature is by using custom illustrations designed specifically for the brand. Every artist has their own unique style, and unlike stock images or stock photos that often almost enforce generic appearance into layouts, custom illustrations give a brand a unique voice and tone. You don’t need to go overboard and create dozens of illustrations; just a few would probably do. Think about replacing all the stock photos you’ve purchased with custom illustrations — this should give you a good enough baseline to start with.

Atlassian is a wonderful example of an illustrative style applied thoroughly and beautifully at every touchpoint of the experience. The illustrations are more approachable than stock photos. Notice, however, that they rarely appear on a plain background — they are supported by the color palette and typographic choices that complement the illustration style.

Why are custom illustrations not enough to stand out? Because just like many other attributes on the web, illustrative style also follows trends. Compare Atlassian’s style to Slack’s visual language. Yes, the fine details are different, but the pastel color combinations are similar. The illustrations from these different projects could happily coexist within one single website, and many customers wouldn’t notice a difference.

A distinct visual style requires further attention to other elements on the page, primarily backgrounds, typography, shapes, and layout. Notice how all of these elements play together on Bond. Illustrations aren’t just added to a blank white canvas — they interplay with the background, text colors, and the layout.

Medium uses a collage-like style for all its illustrations on landing pages and help pages. The key is that illustrations are used consistently across pages. They might not make sense to every visitor, but they contribute to the unique visual appearance of the brand.

Health insurance is a very competitive and not particularly friendly nor transparent environment for citizens and business. With custom illustrations, subtle animated GIFs, and straightforward copywriting, Oscara newcomer to the industry, appears more approachable and relatable.

WebConf.Asia is a conference website with vivid color combinations and background, and boxy components designed as if they were three-dimensional. This is enough to set the design apart. The visual treatment produces depth, which is used for speakers, talks, and main navigation.

Bandenjager uses slanted shapes and compositions consistently on call-to-action buttons, in the navigation, and even in the quantity selector on the product page. That’s their design signature. Notice how even micro-components such as product labels use the same pattern.

Maru Mori Project uses a tree shape… everywhere, accompanying custom illustrations that highlight the ongoing activities of the foundation.

Storytrail lets its visitors explore cities with an interactive guide, complemented with videos and photos. Every single city has its own signature which is a wavy horizontal line, outlining that city’s most important landmark. The cities differ in the curves of the lines, and the design uses lines as a signature for animations, transitions, and arrangement of items in the layout.

Haufe uses overlapping backgrounds to add more dynamics to the design. The main structure of the grid is derived from the letter H, which is the main character of the company’s identity. All components are laid out on the grid to support that personality trait. A nice play of photos, original compositions, and a variety of geometric backgrounds at once. Haufe’s design system beautifully describes the underlying principle of Haufe’s dynamic grid.

Another way of drawing attention is by adding randomness to your compositions. Rich Cahill’s portfolio contains illustrations split into three vertical parts, randomly offset horizontally and colored with a set of predefined colors. It’s really not that difficult to add a little bit of personality to stand out. It’s a nice example of introducing some chaos in the design language by combining predictable parts of the system in seemingly random, unpredictable ways.

Lynn Fisher also adds some randomness to her portfolio. The layout changes completely between different breakpoints, creating a totally different experience on mobile and desktop devices. Even the favicon changes dynamically as well.

When considering the visual direction of a site, it’s a good idea to consider custom illustration style, backgrounds, typography, and shapes. Establish strong connections between all of these attributes by reusing design decisions, such as the choice of colors and spacing. While doing so, of course, it wouldn’t hurt avoiding predictable options used widely everywhere else. One of the effective ways to achieve this is by keeping tabs on ongoing design trends, then pick the most prevalent one and… smash it to pieces.

Pick A Trend And Smash It To Pieces

When talking about great design, Yves Saint-Laurent, a well-known French fashion designer, once noted that “Fashions fade; style is eternal.” According to Saint-Laurent, to create timeless designs it’s important to take note of trends, yet serve an interpretation of trends through the lens of your own personal style. That’s not what we usually see on the web.

It’s almost ironic that it has become trendy to dislike trends these days, and for good reason: usually their primary purpose is visual embellishment, rather than driving a designer’s intent, and often they don’t add much to the experience beyond friction, confusion, and fancy whistles and bells. No wonder then that designers have started to fight back with “brutalist designs” — websites that aim to exhibit the essence of a website in its unstructured form, exposing the website’s functions to extremes.³

³ It’s worth noting that brutalism in architecture is characterized by unconcerned aesthetics, not intentionally broken aesthetics. When applied to web design, this style often goes along with deliberately broken design conventions and guiding principles.

While doing so, designers often deliberately break design patterns, usability practices, and design trends. At first glance they might appear as designs created with the sole purpose of being different, but because they have a striking personality, they draw attention to themselves. Admittedly, sometimes they seem to be too far-fetched in how they deliberately turn their back on well-established design principles. Not everybody can afford it, and not everybody would feel comfortable connecting such non-conventional aesthetics to their brand.



A slightly more pragmatic strategy, of course, lives somewhere between generic designs and brutalist designs. To get there, you could pick a trend, find a unique perspective and apply your personality to it. For example, if you see many websites using smooth and silky animations, think about how they would fit into your story, and find the twist that would enrich it, and make it more personal. Break down the trend into pieces to understand its mechanics and what’s happening behind the scenes, then twist some parts of it, repackage, and integrate into your design.

Instead of using bouncy animations, you could introduce an artificial delayeffectively slowing down the appearance of items on the page. If most profile images you see have a perfect circular shape, try to come up with another shape that would work well for you to display avatars. If most photos are rectangular, think of another shape that might do the job well.

Instead of using off-canvas transitions, think about a particular kind of transition or animation that would best reflect your brand. For more corporate entities, a fast-paced transition might work best; for creative projects, a slightly more playful and slow transition might be a better fit. Waaark is a wonderful example of the latter. If all transitions were removed, the portfolio website would look pretty much like every other portfolio out there.

Implement Consulting Group uses a short and subtle geometric animation to highlight the featured article on the site. Foreground and background images are a bit offset and animated, with a geometric shape in the background and a story preview in the foreground. That’s enough to give the experience some personality.

Imagine for a second that you have to redesign your ongoing project, but can’t use any basic shapes such as circles, rectangles, or triangles. What would you choose? We all know there is an infinite amount of options, but why is it then that so often we are constrained by highly predictable and heavily used choices? What is neither a circle nor a rectangle nor a triangle? Well, slanted or tilted elements aren’t. Neither are letters and large typography. Nor are custom responsive illustrations or iconography. Nor whitespace, audio, and video. Nor transitions and animations. Nor pretty much any other shape created via a polygon, with content embedded via SVG masks.

District0x is a network of decentralized markets and communities. The site uses custom shapes, smooth transitions, and animations to provide a distinct experience. No rectangles or circles. And notice how well the colors, background images, and typography work together on the site.

It’s not that all basic shapes should be ignored and dismissed from now on, of course. Avoiding basic shapes deliberately is one of the very first exercises we do when we try to come up with a slightly more original art direction. Once you’ve come up with a decent idea without basic shapes, you can start bringing them back sparingly when necessary. Chances are high, however, that you might be able to get away without them altogether.

Do Make People Think

Why is it that when we are puzzling our way around a foreign city and a souvenir shop owner is desperately trying to catch our attention on the street and push a sale, we pass by in haste; yet we slowly walk into a beautifully designed souvenir store that is silent and humble just around the corner? Perhaps it’s because we seek authentic, honest, and respectful experiences, and tend to ignore everything that doesn’t fit the bill. In his fantastic book Blink, Malcolm Gladwell outlined an interesting phenomenon related to how humans value their experiences.

According to Gladwell, we tend to be more satisfied with our experiences when we feel valued, listened to, and understood. Doctors who take a disproportionate amount of time listening, asking questions, and taking notes with their patients tend to get significantly better reviews and higher ratings despite the fact that other doctors might be as proficient and knowledgeable. They might jump to correct conclusions faster, yet their efficiency doesn’t elicit trust and connection in their patients. Of course, primarily we want the problem to be solved, but we also love falling in love with a charming personality, wisdom, expertise, and human kindness.

We know by now that we can enable human connections by embedding compassion into our interfaces. However, these connections don’t just happen overnight — they take time. But where does it leave us in the age of instant gratification and invisible interfaces, when it has become the essence of our job to avoid interruptions and distractions, and create a clear path for customers to follow seamlessly? If we aren’t supposed to make people think, how do we even get a chance to establish an emotional connection in the first place?

We do so by slowing down. Deliberately. By making people think. Not much. Just a little bit. Just enough to make them feel valued, or smile, or get curious. We do so by adding friction. A few bumps here and there, enough to offer a chance of being directly confronted with the personality infused in our interfaces. It might even mean confusing the customer every now and again just to enable a speedy recovery from that confusion with a dash of positive emotion in their eyes. That’s how memorable experiences emerge.

Everything is a little bit off on BAO London — the spacing, the color combinations, the form layout, the hierarchy, the buttons, the cursor, the lightboxes, the illustrations. This consistent breaking of predictable patterns makes the website appear interesting and appealing. Breaking things slowly and deliberately, one component at a time. That’s not a regular restaurant website.

Everything is way off on the Hans Brinker Budget Hostel websiteand it’s done deliberately as well. The hostel was struggling to sell rooms as the competition was quite tough in Amsterdam. Rather than improving the design, they made it worse to fit well within their story. If you can’t make it better, make it worse. Even if you don’t have a wonderful product to sell, it’s always possible to wrap a story around it and make it more interesting. Pretty much every element on the page actively makes people confused — from color combination to typography to interactions. It worked though — they are expanding to Lisbon now.

Now, of course, not everybody will like it, and some people will find it annoying, confusing, misleading, childish, or just over the top. Very much like we find it difficult to connect to some people, we might experience the same issue with an interface that attempts to show its human side. But isn’t it worth it? Perhaps in times when everything is remarkably similar and doesn’t really stand for anything, it’s worth striving for our product to be genuinely loved by many people for the price of being genuinely disliked by some people, rather than eliciting no feelings at all.

In his “How I Built This” interview on NPRMike Krieger, the co-founder and creative mind behind Instagram, mentioned that rather than spending a significant amount of time trying to understand why people abandoned the service, one of the fundamental principles that drives growth is focusing on customers who deeply love your product and stay around for years. By prioritizing existing customers and what they truly love about your product, you might not only attach them to your product, but also boost the word-of-mouth marketing that’s infinitely more effective than traditional landing pages.

It doesn’t mean, though, that we shouldn’t take good care of experiences customers have when abandoning the product, or — even worse — that we should make it harder for them to leave. The humane qualities of the interface should shine consistently through all the touchpoints of the experience — and it holds true for onboarding as much as offboarding. In fact, the latter is often neglected as it isn’t deemed as being that important — after all, at the point when the customer will face it, they have almost abandoned the product.

Offboarding Matters

Just like human relationships sometimes end abruptly and badly, leaving a lasting negative aftermath, so can our relationships with digital products. It’s highly unlikely that a person abandoning a product with a mysteriously long-winded journey through cancellation redirects would praise the product to friends and colleagues. People leave for very different reasons, and sometimes it has literally nothing to do with the service or the experience. They might have moved on, or just want to save money for something more important, or perhaps they just found an alternative that better fits their needs.

What if at the moment of departure we make them feel deeply valued and understood? Admittedly, with Smashing Magazine’s redesign, we didn’t spend too much time designing the offboarding UX, but it was important for us that the experience fitted well within the overall personality of the interface. When our customers cancel their membership subscription, we greet them with a respectful and even encouraging notice, providing a little gift for sticking around with us for so long, and explaining what happens to their personal data.

The result was surprising: we discovered that customers who cancel the subscription and go through the offboarding UX, sometimes tend to be even more eager to recommend us to their friends and total strangers than some loyal members who stick around for a long time. They just admire how respectfully and thoughtfully we deal with their decision, and that we don’t pull all the shady tricks from the trenches to make it difficult for them to leave.

Make Boring Interesting

It’s difficult to introduce playful elements into an experience which is otherwise very much corporate and formal. However, whenever you are designing a particular interaction, be it as simple as hovering a button, or moving from one section to another, or filling in a form, there is always some room to make the experience slightly more interesting.

For example, out of all the wonderful form elements on a given page, what could be less exciting than a “Title” input? Sometimes appearing alongside radio button counterparts or a dropdown, rigorously asking customers for very personal information about their marital status, without any obvious reason whatsoever. And that’s exactly the moment when we can make it shine beautifully. A great way of creating memorable experiences is adding a bit of surprise at the point where it’s most unexpected. Pick the most boring, unnoticeable part of the experience and try to make it interesting. Now, is there a way to make this interaction more interesting?

When creating a new account on Bodencustomers are dazzled with a quite unusual selection of options, ranging from Admiral to Squadron Leader and Baroness. Who hasn’t wanted to be a Squadron Leader at some point in their life? This little design decision elicits smiles, and prompts customers to share this gem with their friends and colleagues. By the way, the list of options is quite lengthy.

Austin Beerworks is just one of many local breweries in the US. When customers enter the site, as always they are prompted with an age check that’s supposed to ensure they are over a certain age limit. Most people — honestly or dishonestly — would click on “Yes” and move on, but if the customer chooses to click on “No,” they embark on a “choose-your-own-adventure” trip to be guided to a video that best describes their personality.

Who doesn’t love disliking a pop-up? However, pop-ups can be made interesting too. Volkshotel uses the most annoyingly delightful pop-up out there, beautifully illustrated as a person holding a sign in front of the website. As the visitors hover over it to close it, the pop-up sneakily moves away a little bit, making it just a tad more difficult to close it. Personally, I wish every single website had a pop-up like that.

Tympanus 3D Room Exhibition doesn’t look particularly exceptional until the visitor chooses to interact with it. When moving from one exhibition detail page to another, rather than just loading another page, the user is moved from one room to another within a 3D space. Unexpected and memorable.

What’s a slightly more common interaction on the web? Forms, in all their different flavors and appearances. In fact, chances are high that you have some sort of a login and password input on your site, and, of course, that’s a pretty boring interaction. Adding a character responding to a user’s input might spice things up a little. As a result, people might spend more time interacting with the form before signing in. That’s better engagement at hand. Darin Senneff’s Yeti character does just that.

The strategy is simple: choose one predictable, boring pattern, study user expectations and… break them mercilessly by adding something unexpected and uplifting to it. Please note that it doesn’t mean breaking usability just for the sake of breaking it; rather, it’s about making a handful of boring elements more interesting by adding some unconventional treatments to their design.

Find A Pain Point And Solve It Well

Can you hear restless voices of skepticism whispering from the corner of the room? Not every corporate setting will sustain a funky custom illustration, a quirky animation, or an unconventional interaction. A striking visual identity might not really fit into your digital presence, custom illustrations might not be within the budget, and you might not want to break customer’s expectations anyway. In these cases, you might want to explore a slightly different route. If you can’t convey your personality through unconventional aesthetics or interaction, an alternative is to convey it through superior problem solving. It means you need to uncover painful moments of interaction — when customers are annoyed or disappointed or confused — on similar sites, and sweep through experimental and seemingly far-fetched solutions to try to trump the experience that your competitors provide. Take on a problem, and tackle it meticulously, head on.

Surprisingly, most of the time these pain points aren’t particular features; it’s the perceived complexity of the interaction and the lack of transparency. Too many form fields; too much time investment; too slow an interaction; too many repeated questions; too many unnecessary requirements. The angle is to find a way to make seemingly complex interactions deceptively easy, hence surpassing expectations.

Sidenote: It goes without saying that solving a particular pain point won’t help much if basics aren’t covered properly. Accessibility, performance, proper visual hierarchy, and responsive behavior are the founding pillars of every experience, and have to be considered first.

SBB Mobile is a Swiss trip planner app that allows customers to check the schedule of trains and purchase train tickets. On its own, it’s a trip planner like every single similar app out there, except for one thing. The app provides a “touch timetable”; customers can define their common destinations and arrange them on a grid. To purchase a ticket from Zurich to Lausanne, for example, it’s enough to draw a line on the grid connecting Zurich and Lausanne and then confirm the selection. Booking tickets has never been that fast and easy. That’s a great example of making a conventionally complex interaction straightforward, especially for people who commute frequently. Also, it’s a unique design signature that nobody else has (yet).

What would it take to provide a remarkable video-playing experience? It might sound as simple as designing a track and a thumb with a few ticks on the track for quick jumps. However, if you study common problems users experience frequently, you’ll find one particular issue that stands out. People tend to pause videos and then continue watching later, yet restoring the state of where things were left off is unnecessarily complex in many video player UIs. In fact, you might encounter people writing down the exact time stamp when they paused the video, just to return to it later on another device — but then again, in most UIs it’s impossible to jump precisely to a particular second, and most of the time you have to guess and tap the position of a thumb on the track correctly. In the same way, jumping back and forward by 30 seconds or even by a few minutes can be remarkably challenging, especially on mobile, as most interfaces aren’t designed around that particular case.

Not only does YouTube provide fully accessible controls for navigation, it also contains a keyframes preview with thumbnails appearing on hover, and navigation via keyboard — and it stores the current state of the video, allowing customers to save a particular time stamp with a unique URL to continue watching later. YouTube also contains many lengthy videos, like documentaries or tutorials, so users can slide up the thumb vertically to adjust the scale of the track and hence jump to the point of interest more precisely. Unfortunately, only a few users know of the feature, and the interaction isn’t particularly self-explanatory, but those who do know of it, use it frequently. One pain point, solved well.

Most academic publications contain dozens of endnotes, footnotes, and references, listed in the order of appearance. If a reader is interested in a particular footnote, they have to jump to the end of the article to read it, and then jump back to continue reading the article. This experience might be a bit too tedious for frequent use, yet it’s the default experience we all are accustomed to.

The Harvard Law Review solves this problem in a different way. References are always located right next to the point where they are mentioned. Every side note and footnote either appears on the sides on larger screens, or displayed inline via an accordion. Once a user has tapped on the footnote, it expands in its entirety, while the footnote turns into a “close” button. A simple problem solved well.

Imagine you want to book a wonderful vacation with your family, but you haven’t picked your dates yet. You have an idea of when you’d like to go, and you have some flexibility regarding the dates for your next vacation. DoHop allows its users to choose a flexible date for traveling; for example, particular months of the year, or a particular season, (winter or fall, perhaps). It then suggests dates and a time span with the best price. And if you have a public holiday weekend coming up in a few weeks, and you’d love to make a plan, RoutePerfect suggests a route based on your preferences. That’s a real problem case solved well. Most traveling websites ask for specific dates for inbound and outbound flights.

Good solutions require time and focus. They require us to really understand what pain points users experience first. Users might not be very good at articulating those paint points, so we developed a simple technique that helps us get to the root of the problem.

We ask testers to complete a particular task on a competitor’s website, and record their session on video, along with a webcam, using the device that they are used to. It could be as easy as finding an item in a catalog, or checking out on a retail store, or finding a particular section in the navigation. Of course, we observe their behavior and ask questions if something appears to be unusual, but too often many things that happen during the sessions go unnoticed — they are just too difficult to spot right away. That’s why we rewatch recorded user sessions in slow motionoften slowing down the playback five or six times.

We look for repeated movements and imprecise hits, as well as negative facial expressions and gestures. More specifically, we search for little moments of despair — fleeting moments of confusion when movements or gestures don’t make any sense: circling around a button or a link over and over again; focusing on a particular interactive element for far too long; selecting the same text a few times in a row and then continuing to navigate without acting on it. The playback sessions usually happen right after the test, so we still have an opportunity to ask questions and validate our assumptions with the tester. Even a few recordings usually provide actionable insights — and it doesn’t require many resources or much investment. It’s also a good idea to examine customer support logs, and ask the support team about common complaints.

Once we’ve identified some issues, we explore solutions that would provide more clarity and ease the interaction, sometimes by designing without any particular visual language in mind. The point is to find an interaction pattern that would be way more superior to the experience customers had on the competitor’s sites. We then produce a digital mock-up and invite the same customers to try to solve the same tasks, along with a new group of testers who haven’t seen both interfaces yet. We measure the time needed to complete an interaction and ask them to choose which interaction they find more straightforward and useful, and why. Surprisingly, faster interactions aren’t necessarily perceived as being faster, and slower interactions aren’t necessarily perceived as being slower. Based on that, we iterate and evolve those prototypes. In many ways, those pain points become the heart of our experience that we tackle first and radiate the entire experience out from. That’s why sometimes, instead of running a test on a competitor’s website, we test our own solutions in the same way.

Good solutions trigger an emotional attachment with or without non-conventional aesthetics or interaction. The more pain points you can address well within your interface, the more likely the difference in experience is to be noticed. Only a few websites make it to customers’ browser toolbars, so think about that one pain point and the one solution that would make them do just that.

Exceeding Expectations By Default

Here’s another question for you: of all the hotel experiences you ever had, which ones are the most memorable? Think about it for a moment. Think about what made them so special and why they are so memorable. It might have been an extraordinary natural backdrop, or remarkably attentive personnel, or a lavish breakfast buffet. Or something entirely different. In fact, for many of us it could have been a pretty average dormitory as much as an exquisite 5-star chalet in the Swiss alps. The environment matters, but it’s not the environment alone that matters.

The reason why these experiences are memorable is because they aren’t average.⁴ In fact, they are the very opposite of average in *some* way, as *something* was exceptional about them. It’s not necessarily the hotel itself — it’s the timing and the people we happen to spend these experiences with. A good hotel provides a setting that enables wonderful experiences, and so does a good website interface. A *memorable* hotel adds a fine detail to the experience that exceeds our expectations, and it does so without telling us up front. And so do memorable websites.

⁴ According to Daniel Kahneman’s peak-end rule, we tend to judge experiences largely based on how we felt at its peak (that is, its most intense point) and at its end, rather than on the total sum or average of every moment of the experience. The effect occurs whether the experience is pleasant or unpleasant. Other information aside from the peak and end of the experience is not lost, but it is not used. That means we can tap into very negative and very positive parts of the experience, and tweak them to create an emotional connection.

As Brené Brown, a research professor at the University of Houston, so beautifully expressed in her books on empathy“good design is a function of empathy, while non-empathic design is self-indulgent and self-centered.” The key, then, is to empathize with customers both in their negative and positive experiences, rather than pushing your own agenda. To our customers, that extra fine attention to a few little details can make all the difference in the world. So we could sprinkle a little bit of human kindness here and there, adding extra value silently, without even mentioning it. That fine detail could be as simple as a custom-designed profile illustration, based on the photo the customer has uploaded. It could be a handwritten thank-you note, signed by the entire team and sent via good ol’ snail mail. It could also be an unexpectedly straightforward resolution of a problem after a mistake has been made.

In an eCommerce setting, it could mean the ability to modify or cancel a finished order within five mins after the successful checkout. On the one side, it could help a customer avoid a time-consuming interaction with the support team; and on the other side, just imagine the look on the customer’s face when they realize that the date of the booking was wrong, yet it’s possible to cancel the booking with a click of a button — without any charges applied.

In the same way, an interface could suggest to a signed-in customer to use a saved coupon code, or inform them about a similar — and hence potentially duplicate — booking made a while back. The personality of the brand shines best in those little moments when it helps customers prevent mistakes. By acting on behalf of the experience rather than business every now and again, the interface makes the customer feel genuinely valued, respected, and helped, and that works much better than any ingenious interface copy ever would.

One way of preventing mistakes is by writing adaptive and helpful error messages. That’s one of the most obvious points of frustration for customers, and it’s remarkable how little effort is put into recovery experience, often falling back to generic and abstract messages. Perhaps they don’t cost a sale but they can damage the long-term perception of the brand. People who experience unrecoverable issues during one of the key interactions on a site tend to not use it in the future at all as they expect the issue to creep out in other interactions too.

Overall, error messages deserve slightly more credit than they are usually given. By nature, they appear at the point where the customer’s progress is blocked. That’s also the point where the customers have to slow down and pay full attention to resolve the problem. That’s quite unusual for the entire spectrum of experiences on a site, and we can use the situation to our advantage to infuse a bit of personality into the experience. Every single time our interfaces fail to meet expectations, we should see it as an opportunity to create a memorable impact in the process of speedy recovery. If we manage to turn an annoyance into the feeling of being valued or understood along the way, we might be heading off on the right track.

One of the very first things I started working on when we embarked on the redesign was filling elaborate spreadsheets with alternate wordings for our checkout error messages. It wasn’t done with the intention to A/B test the “best performing” error message, though; it was done primarily to discover better expressions of the personality through the interface. On their own, error messages don’t really make sense, but they fit well within the story being told throughout the site. Obviously, we try to make it as difficult as possible to make mistakes in the first place, but once an error has occurred, we try to use both adaptive and playful copywriting to address the issue while also raise the occasional smile.

Seek critical pain points that customers often experience on the site by looking into customer support logs and user interviews, and design these experiences with extra care and attention. It goes without saying that a quirky personality won’t help much if the customer isn’t able to solve a problem, so take care of the basics first. Ultimately, it doesn’t take that much effort to turn negative experiences into positive ones — it’s just a matter of having it on your to-do list when designing an interface.

The Two Sides Of Personality

As much as we love sharing our experiences and showing our better side to people around us, we can’t stand that one person spending the entire evening talking about themselves. In our interfaces, every time we add yet another parallax transition or a slow bouncy animation to people who have seen it a dozen times already, we are essentially letting the interface highlight its fanciness without helping the user along the way. Eventually, after a few visits, all those whistles and bells that achieve a strong first impact become annoying as they add too much friction.

Nobody loves self-centered characters, and so a website shouldn’t be self-centered either. The design signature should never take the leading role in the user experience as it’s never the main reason why people access the website. It should be humble and remain in the shadows, noticeable but not obstructing the smooth flow frequent visitors have got used to.

In her brilliant talk on designing animationsVal Head, a designer from Pittsburgh, US, suggested using prominent animations very sparingly, as they should be reserved for very special occasions, while subtle micro-animations could accompany the user all along the way. Val suggests using animation only for key compositions of your story, like sending a marketing campaign, or favoriting an item, or seeing a successful purchasing page, while everything else should remain calm and as normal. With this idea in mind we could think of designing our interfaces with two kinds of interactions: the prominent “showroom” ones, used rarely; and subtle “workhorse” ones, used frequently.

Reserve special visual treatments and interactions for special occasions, but also embed subtle treatments used consistently across the entire site. Twitter, for example, uses an elaborate animation when a user “hearts” a tweet. Facebook displays a confetti animation when you congratulate a friend on their birthday or a wedding. In Smashing’s case, we use vibrant colors and cat illustrations as our showroom signature, while tilting, hover-animations, and shadows beneath them make up our workhorse signature.

We are used to the idea of our designs adjusting to the viewport or network conditions, but it might be worth looking into adjusting the design based on the frequency of usage too. The technique is often called progressive reductionessentially a dynamic simplification of an interface as users become familiar with it. The idea is simple: identify the major features in your interface, and assign levels to these features. Then, track your user’s usage by monitoring the frequency of use within a certain time period and create proficiency profiles for the user. Based on the current level, you could then adjust components of the interface to reduce hand-holding.

As Allan Grinshtein noticed, it’s worth noting at this point that a user’s proficiency in a given product decays over time without usage (also known as experience decay), so if a user’s frequency of use and usage volume have gone down, then their interface should regress a level or two, depending on how far down their numbers have dropped. This automatic regression is necessary to balance progression; without it, you lose the ability to fully respond to dynamic changes in user behavior, adds Dan Birman in his article.

The more often customers visit the site, the less likely they want to be confronted with anything that would slow them down. Therefore, it might be a good idea to slowly fade out showroom signatures with growing frequency of use, perhaps removing parallax-effects or speeding up transitions for returning users. In the end, it’s all about the choreography: don’t be that person at a dinner party filling the room with an extensive story of their life.

The Signature at the Heart of the Design
The design process is a mythical creature. Everybody somehow manages to come up with their own workflow, tooling, and processes, yet it’s very rare that anybody is really satisfied with it. When it comes to infusing personality into the design, when and where would be the right point to include it in the design process?

In one of her talks from 2014Patty Toland, a senior UX designer from Filament Group in Boston mentioned the hierarchy of priorities the team uses when designing and building responsive experiences. The main goal of the process is to create the “leanest, fastest-loading, most optimized page.” The main foundation is and has always been a fully accessible experience, in which text, images, data, charts, audio, video, forms and so on are all broadly accessible and function fully in their default form. Applied to the context of the design process, it means meaningful markup and properly defined relationships between components.

With accessible components ready to be served, the next step is taking care of the scale of the design. That’s where the decisions about grid, content size, order, and arrangement, as well as breakpoints, come into play. Often the proportions will be defined using content wireframes: low-fidelity mock-ups with gray boxes; the height of each box in proportion to others defines its weight in the layout. Sometimes we add notes about the personality across the content blocks, and then reflect them when it comes to visual design.

With low-fidelity prototypes in place, the next step for the design is to gain style, with logo, brand colors, custom fonts, transitions, and animations added to the mix. Sometimes this hierarchy will be perfectly mapped in the order we write React components and CSS properties with Sass. Even seemingly unrelated tasks, like BEM naming for classes, will happen in that order as well. The prototypes will gain abstract utility classes first, and more elaborate relationships will be reflected through more specific class names throughout the process. The process establishes a clear separation of responsibilities for modules.

This process seems plausible at first, but it raises a very critical question: what pages to design and prototype first? When we start designing, we design the heart of the experience first: the most critical and impactful part of the experience. More specifically, we try to capture the very essence of the experience by exploring key interactions, then break it down into reusable components, and then radiate outwards from that essence. For an online magazine, it would be reading experience and typography first. For a landing page, it would be the pricing plans and a feature comparison first.

For an ecommerce site it means looking into the components that would make up an extraordinary relevant and useful product page first. That means large image thumbnails, concise copywriting, transparent pricing, exposed ratings and testimonials, psychological anchors, and call-to-action buttons. The visual design decisions made there are then translated to other parts of the interface, specifically forms and labels and error messages in the checkout. Only then, eventually, we reach the category pages and the FAQ pages living on the far outer edges of the experience spectrum. Somewhere in between we explore the front page, but usually we design it late rather than early in the process — at the point when we’ve established a strong identity already, so we use the front page to amplify and explore it prominently, potentially with a bold design that would exhibit the main qualities of the personality.

Remember overarching connections mentioned earlier in the chapter? A critical part of the design process is to connect modules, so they don’t appear as standalone solutions when put together in the interface. When we have enough modules to build the first prototype, we jump into the browser and build mobile-first. It’s in this process that we finally decide on the grid and the layout and the structure, and implement the connections between modules. In fact, for us, the signature is that magical bond that ties things together.

That’s why we start thinking about the signature of the design when we start designing the heart of the experience, and sometimes even before that. Spreadsheets exploring error messages, visual experiments around shapes and colors and type, as well as user interviews help us get there. Eventually, decisions made for the first prototype can be reused for other pages, yet sometimes we need to run the process from the start again — as some pages clearly will be one-offs, such as the landing page or a front page. They will still exhibit relationships to everything else because they are designed and built using the personality traits that have been solidified by this point.

It’s these relationships that would then lay the main foundation of a design system, along with components and examples of the interface in use. Too often style guides show a component in isolation, along with Sass class names and a code snippet, without including how that component should appear and behave in relation to other modules on the page. Examples matter both for designers and developers, and they give a good reason to both visit and keep the design system up to date in the long-term.

We often create user journey maps to understand the flow users go through to accomplish their tasks, and with personality traits in mind, we could even complement them with storyboards, adding some personality highlights at different points of user experience. Besides, in the context of design systems, we could explore not only components in isolation, but also how the design language can use components to slow down or speed up the experience, or provide greater or lesser impact, as well as dynamic and static layout compositions — very much like we do with showroom and workhorse interactions.

You could even print them out and put them as magnets on a storyboard, so designers can freely move them around and thus explore ways of combining predictable components in unpredictable ways. That’s what Andrew Clarke does when embedding art direction and storytelling in his designs — very much like comic strip designers arrange the frames according to narrative dynamics and impact when laying out a comic story.

The design signature lies at the very heart of the design. It’s an strand that connects the components in the interface, and it’s what helps designers stay on track when maintaining or evolving a design language. Deciding on the personality traits first helps drive the direction of the design, and can be just a good enough constraint to dissolve initial intentions and goals into tangible, distinguishable attributes that could eventually become the heart of the experience.

Wrapping Up

As much as we could get seduced by the charm of a website, in the end, the main purpose of it shouldn’t be self-indulgence. Expressions of the personality of the site enable emotional connections with customers and visitors, and because they are human by their nature, they outline a path to authentic, honest, and respectful interfaces. It’s up to us to figure out how to shape that path and the outcome ahead of us.

Now, it might not be for everybody, and perhaps not every site needs a personality in the first place, or perhaps it should be subtle and express itself in little nuances here and there. I hope that in either of these cases, once flipping over the last page of this book, you’ll have a good enough tool belt of ideas and techniques to create unique and humane experiences — experiences people could fall in love with.

I’d like to express sincere gratitude to Jen Simmons, Rachel Andrew, Andrew Clarke, Dan Mall, Espen Brunborg, and Elliot Jay Stocks for inspiring work, contributions, and help in discussing the idea of art direction on the web, and making the web more diverse and experimental. I’d also like to thank Marko Dugonjić, Alberta Soranzo, Sashka Maximova, Lilia Zinchenko, Stefan Bucher, Benoit Henry, Nils Mielke, Thord D. Hedengren, and Bertrand Lirette for reviewing the chapter, as well as our fantastic community, which has shared techniques and lessons learned from its work for everybody to use. You are truly smashing!

The brand new Smashing Book 6 is now available for pre-order. It contains everything you need to know on how to tackle the new adventures web design and development are bringing along. No theory — just things that worked in practice.

(ra, og, yk, il)