Utilisation de métaphores dans la conception Web

Le mot métaphore est probablement plus assimilé à un écrit, quand il est utilisé comme une figure de style littéraire pour un effet descriptif. Cependant, aujourd’hui, nous allons parler d’un type de métaphore différent: un visuel que nous pouvons utiliser dans la conception Web..

métaphore: une figure de style dans laquelle une expression est utilisée pour désigner quelque chose qu'elle ne désigne pas littéralement pour suggérer une similitude - WolframAlpha

Sur le Web, nous utilisons souvent des images et des icônes pour symboliser différentes choses. Lorsque nous visitons une page Web, nous numérisons pour essayer de trouver ce dont nous avons besoin le plus rapidement possible, et les images sont utilisées pour aider à accélérer ce processus. Nous pouvons interpréter quelque chose de beaucoup plus rapidement avec un style et des images familiers. Par exemple, nous pouvons reconnaître instantanément une erreur lorsqu'il y a quelque chose comme un point d'exclamation, une couleur jaune ou rouge. C'est tout à la familiarité.

Surtout ces derniers temps, nous avons commencé à voir apparaître des métaphores urbaines dans la conception Web, en utilisant des éléments familiers tels qu'une étagère ou un mur dans une conception. Cependant, il existe de nombreuses autres métaphores utilisées dans la conception Web pour combler le fossé entre réel et virtuel la vie.


Qu'est-ce qu'une métaphore??

La définition "officielle" de la métaphore n'a pas changé par rapport à la section précédente: une figure de style dans laquelle une expression est utilisée pour désigner quelque chose qu'elle ne désigne pas littéralement afin de suggérer une similitude. C'est très véridique quand on regarde le Web et l'utilisation de métaphores sur cette plate-forme. Ici, nous utilisons des pixels en tant que représentants d’objets du monde réel pour établir un lien de familiarité entre la vie virtuelle et la vie réelle..

Nous utilisons également différents types de métaphores sur le Web: celles à plus petite échelle qui imitent des objets de la vie réelle tels que des boutons, les métaphores emblématiques qui copient des associations de la vie réelle et les utilisent sur le Web, et celles étendues où peut tourner autour d'une métaphore.


La vraie vie sur le web

Un bouton sur le Web n'est pas réellement un bouton, n'est-ce pas? Non, c’est un groupe de pixels conçu pour ressembler à un bouton car (a) nous l’avons fait ainsi et (b) nos utilisateurs le reconnaîtront et sauront que c’est quelque chose sur lequel appuyer (ou plus correctement cliquer). Nous faisons en sorte que ce lien ressemble à un bouton, car nous avons l'habitude de reconnaître un bouton comme point d'interaction dans la vie réelle et de distinguer ce lien du reste de la page sans trop d'effort..

Imiter les conventions de la vie réelle nous aide à interagir avec le monde virtuel. Cela améliore notre expérience utilisateur car le Web ne s'avère pas être une interface étrangère qui nécessite beaucoup d'apprentissage pour interagir. Nous savons que les boutons sont des boutons car ils sont pratiquement les mêmes partout. repère visuel et les utilisateurs interagissent instinctivement avec eux.

Il en va de même pour les fenêtres, les ordinateurs de bureau et les onglets dans la conception d'interface utilisateur. Steve Krug, dans son livre sur l'utilisabilité, Don't Make Me Think, utilise de façon célèbre l'exemple des onglets de dossier, qui est un excellent moyen de créer des métaphores pour la conception d'interfaces..

Je n'ai pas encore été en mesure de le prouver, mais je soupçonne fortement que Leonardo da Vinci a inventé les diviseurs d'onglets à la fin du XVe siècle. En tant que périphériques d'interface, ils sont clairement un produit de génie. - Steve Krug

Les onglets sont l'exemple classique d'une métaphore d'interface intuitive.


Les icônes

Des icônes légèrement différentes des métaphores identiques, comme nous en avons déjà parlé. Par exemple, les points d'exclamation sont utilisés pour représenter un état d'importance ou une alerte, nous utilisons donc cette icône dans le même contexte sur le Web. En outre, nous pourrions utiliser le symbole d'un téléphone ou une lettre pour indiquer le contact.

Pour un exemple parfait, nous pouvons regarder le tableau de bord WordPress. Chacun des éléments de menu en bas à gauche présente une sorte de métaphore, telle que la punaise pour représenter les messages et la bulle de dialogue pour les commentaires..

L'encouragement à utiliser de telles métaphores est identique à celui de la section précédente: cela crée une certaine familiarité - un "lien" si vous voulez - vers le monde réel qui aide le lecteur à interpréter et à naviguer sur une page avec une relative facilité..


Métaphores Actives

Nous avons brièvement expliqué comment reproduire des objets de la vie réelle et utiliser des icônes pour créer des liens, mais il existe un autre type de métaphore important: celles qui s'étendent au-delà d'un seul élément. L'exemple le plus frappant auquel je puisse penser n'est pas un site Web, mais une application. iBooks ne ressemble pas à une application iPad normale, car il est conçu pour imiter l'apparence et la convivialité d'une vraie bibliothèque afin de donner au lecteur une impression de familiarité. Vous regardez iBooks et vous savez instantanément que cela a quelque chose à voir avec les livres. Si bien fait, ces types de sites Web peuvent s'avérer vraiment géniaux!

Les métaphores étendues sont moins courantes que les autres types utilisés sur la majorité des conceptions de sites Web sur le Web..

Bien que "métaphore étendue" puisse être une terminologie incorrecte, ce type de métaphore reste le type le plus large que vous puissiez obtenir. Ils offrent une petite fenêtre de votre navigateur sur la vie réelle et peuvent constituer une méthode instantanée pour créer une première impression de ce que le site Web représente..


Le thème WordPress de Monmarthe.

Pourquoi utiliser une métaphore?

En écriture, nous utilisons une métaphore pour exprimer, expliquer et décrire. Les métaphores peuvent être un moyen utile de relier une idée à une idée à laquelle elle n'est pas littéralement semblable (où une comparaison serait probablement utilisée à la place), mais où les deux peuvent être utilisées conjointement pour se représenter l'une l'autre..

Les métaphores dans la conception Web, comme l'écriture, sont utilisées comme mécanisme descriptif en reliant des objets et des idées de la vie réelle aux pixels d'un site Web. Cela peut sembler très petit et peut être négligé, mais les lecteurs Web ont une capacité d'attention plus courte que les lecteurs imprimés; le temps est donc essentiel pour naviguer sur un site Web. Et, dans ces circonstances, les métaphores deviennent utiles en copiant des associations réelles (comme la couleur rouge avec un danger ou une loupe avec une recherche) et en les utilisant sur le Web, ce qui accélère le processus de numérisation d'une page Web..


Attraction

En tant que concepteurs, nous pouvons utiliser des métaphores pour renforcer l'attrait de la conception et rendre nos conceptions mémorables. Nous voulons que les utilisateurs se connectent au site Web et, déjà, la plupart des sites Web utilisent une forme de métaphores pour répondre aux attentes de leur public cible. Les sites Web reflètent des concepts de la vie réelle, des sociétés, des personnes et des objets, et les styles choisis ne diffèrent pas de ceux de la vie réelle. Les métaphores créent non seulement un sentiment de familiarité entre les pixels d’une page Web et l’importance de la vie réelle, mais elles peuvent également être utilisées pour se connecter à un public spécifique..

Prenons l'exemple de la page d'accueil CBeebies de la BBC. Le site est construit autour d'un fond représentant un jardin avec des arbres et des arcs-en-ciel, une image idéaliste du monde qui est commune à beaucoup de médias orientés vers les enfants. La métaphore d'un jardin en ligne invite les enfants à utiliser le site alors que s'il était conçu comme la page d'accueil de Microsoft, il ne serait pas aussi attrayant pour les enfants..


Conclusion

Les métaphores sont utilisées dans tous les médias pour exprimer autre chose et, sur les sites Web, elles constituent un excellent moyen de communiquer la familiarité et d'attirer les lecteurs vers un design. Si l’on considère ce phénomène à l’échelle des 4,5 milliards d’années que nous vivons dans le monde, le Web est encore un média très nouveau. La création de liens entre le réel et le virtuel est donc une mesure transitoire, mais efficace..


Les métaphores en action

fleurir

Flourish est une agence de design web qui prend son nom au sérieux. Le terme «fleurir» étant défini comme «grandir ou se développer de manière saine ou vigoureuse», le concept d’arbre en croissance sur une terre stérile et une conception globale basée sur la nature sont présentés.

Modèle XHTML de design d'intérieur

Le modèle "Interior Design" est un élément ThemeForest conçu pour représenter un bureau, un exemple parfait de métaphore en jeu..

lancement

Le lancement est un autre élément de ThemeForest, mais celui-ci compare la publication d’un site Web au lancement d’une fusée, comme le font de nombreux modèles similaires..

Mutant Labs

Mutant Labs, une société de développement de logiciels, place la partie "laboratoire" de son nom dans un contexte scientifique afin de faciliter la conception de son site..