Jusqu'à présent, nous avons parlé des trois piliers de la conception Web : la théorie des couleurs, la typographie, la conception de
l'interface utilisateur et maintenant je veux parler du dernier pilier, la conception de l'expérience utilisateur.
Maintenant, beaucoup de gens sont souvent confus quant à ce qu'est exactement l'UX ou l'expérience utilisateur ?
Et l'une des meilleures façons dont j'ai entendu parler de cela, c'est à travers l'histoire de la rénovation d'un collège.
Voici donc une photo de Reed College aux États-Unis et utilisons-la simplement comme toile de fond imaginaire.
Ce collège a donc décidé qu'il devait subir une sérieuse rénovation. Démolir les bâtiments, en construire
de nouveaux et réformer complètement le campus.
Ils ont donc invité cet architecte bien connu et très respecté dans son domaine.
Il est venu et il a fait un excellent travail avec tous les bâtiments et le prévôt était vraiment très content.
Il était comme "Ça a l'air génial. "
Mais il avait une question.
" Hé M. Architecte. Il semblait que vous veniez de quitter la pelouse sur tout le campus. Où sont tous les chemins que les
gens vont emprunter pour se rendre entre les bâtiments ? " A ce stade, l'architecte dit "
Ne vous inquiétez pas. Je reviendrai dans un an et tout sera révélé. " Ainsi, en un
an, les chemins où les gens ont besoin de marcher naturellement se trottent et l'herbe s'use, révélant
ces chemins dont les gens ont besoin.
Et c'est à ce moment-là que l'architecte pose réellement toutes les tuiles et ouvre ces chemins.
C'est donc un peu la différence entre l'expérience utilisateur et le design. Le design, nous pensons
souvent avoir une esthétique, ce que nous pensons être beau et l'imposer à l'utilisateur.
Désormais, l'expérience utilisateur est censée être invisible.
Si vous avez une bonne expérience avec un site Web, il se veut discret et vous permet
simplement de faire votre travail et vous avez l'impression que tout est facile et sans effort.
C'est donc ce que nous visons.
Et pour ce faire, nous devons repenser à cinq choses.
Le premier est la simplicité. Garder les choses simples est toujours mieux que de les rendre plus complexes ou plus encombrées.
Il s'agit donc d'un site Web appelé Sina et c'est l'un des plus grands sites d'information en Chine.
Maintenant, chaque fois que je le regarde, j'ai mal à la tête parce qu'il est tellement dense.
Il y a tellement de liens et mon cerveau est submergé et je dis "Non, je ne peux pas le faire. " Alors jetez un œil
à cette alternative.
Il s'agit de Monocle, qui est aussi un site d'actualités.
Mais regardez comment ils ont réussi à découper le contenu, offre un certain intérêt pour les yeux.
Il y a un peu de dialogue, des images, des vidéos, un peu de texte.
Ce n'est jamais écrasant.
Et avec cette palette de couleurs et cette typographie cohérentes, il est vraiment agréable de lire plutôt
que cette expérience de vous faire mal aux yeux avec le design.
C'est une expérience utilisateur beaucoup plus agréable parce que c'est simple.
Donc, chaque fois que vous devez choisir, dois-je le rendre plus complexe ou dois-je le rendre
plus simple, essayez toujours de le réduire au minimum.
Le deuxième point est la cohérence.
Gardez vos conceptions cohérentes, mais gardez également la fonctionnalité de votre produit cohérente.
Voici donc un exemple.
Ceci est la page Web de Xfinity. Xfinity est une très grande entreprise de communication aux États-Unis et elle
est responsable de diverses choses comme la fourniture de la télévision et la fourniture d'Internet.
Voici trois captures d'écran de différentes parties de leur site Web.
L'un est leur page
d'accueil, le second est leur offre de télévision et le dernier est leur site d'actualités.
Et si vous jetez un œil à la barre de navigation supérieure, non seulement vous voyez qu'ils ont modifié la conception
de la barre de navigation entre les différentes parties de leur site Web, mais
ils l'ont également fait fonctionner un peu différemment.
Les boutons ne sont pas tous au même endroit, la barre de recherche se déplace.
Et cette incohérence signifie qu'un utilisateur va être confus lorsqu'il passe d'une partie du site Web à
une autre, devant réapprendre à utiliser votre site Web.
Si vous pensez au public cible de cette société Xfinity, beaucoup d'entre eux seront un peu plus
âgés, n'est-ce pas ?
Et avoir cette fonctionnalité incohérente et cette conception incohérente feront vraiment que ces utilisateurs auront
une mauvaise expérience avec ce site Web.
La prochaine chose à laquelle vous devez penser lorsque vous concevez votre site Web est de prendre en compte les
habitudes de lecture des gens.
Maintenant, ils ont examiné comment les yeux humains suivent une page Web et quelles parties ils regardent lorsqu'ils naviguent.
Et l'un des modèles de lecture les plus courants est ce qu'on appelle le modèle F où l'œil commence en
haut à gauche du coin, puis il suit la droite, puis il revient en arrière
en parcourant la gouttière gauche.
Donc, vous avez souvent des choses comme des puces ou des images ou des icônes, des boutons, ils sont tous sur la gauche.
Vous pouvez donc concevoir pour cela en utilisant la mise en page F.
Placez donc les parties les plus importantes de votre contenu sur la gouttière de gauche, placez le logo en haut et faites
en sorte que tout suive ce modèle.
Par exemple, comme ce site Web pour Bigcommerce.
Voyez comment l'œil est naturellement logé de gauche à droite.
Maintenant, un autre motif très courant pour la lecture est le motif en Z où nos yeux vont de gauche à droite,
puis zigzaguent tout au long du site Web.
Maintenant, cela dépend bien sûr du type de site Web.
Donc, vous avez quelque chose de plus clairsemé avec plus de contenu vidéo ou si quelqu'un essaie
de parcourir un site Web un
peu plus rapidement, vous le voyez utiliser cette mise en page. Et cette mise en page est utilisée de manière assez célèbre sur le
site Web de Facebook en utilisant ce motif en Z pour s'adapter au motif de lecture naturel des gens.
Alors réfléchissez à cela. Réfléchissez à la façon dont les gens regardent naturellement
la page et placez votre contenu dans ce modèle pour le rendre plus facile pour les personnes qui utilisent votre site Web.
De nos jours, il est vraiment important de penser à All Platform Design.
Il ne suffit plus de concevoir un site Web destiné à être intégré à un ordinateur de bureau.
Au lieu de cela, vous devez également penser au mobile.
Il est donc très important d'avoir un site Web qui s'adapte bien au mobile, ce que nous appelons mobile responsive.
Vous ne voulez pas qu'un grand site Web conçu pour occuper un écran de type paysage soit entassé dans un téléphone
qui ressemble
en fait plus à une forme de portrait.
Cela a l'air vraiment mauvais.
Il est très difficile de lire les liens individuels et, le plus souvent, mes doigts sont en fait trop gros pour taper sur la
longueur que je veux.
C'est donc une très mauvaise expérience utilisateur.
Maintenant, cela peut aussi se produire dans le sens inverse.
Donc, un design qui a l'air bien meilleur sur mobile, mais quand il est rendu sur un bureau avec un grand écran,
il n'utilise pas assez l'espace de l'écran. Par exemple, il s'agit de
la dernière refonte de Facebook pour leur site Web.
Et vous avez tout cet espace vide qui n'est pas du tout utilisé et tout est entassé
au milieu.
Ce n'est pas très efficace. Réfléchissez donc à la façon dont vous utilisez l'espace disponible et assurez-vous que votre
site Web se réorganise lorsqu'il est rendu sur un écran portrait plus petit que sur un écran plus petit. un écran de bureau
plus grand. Et essayez d'éviter l'une de mes bêtes noires en termes de conception
qui a tellement de bannières sur votre site Web qui apparaissent sur la version mobile que votre contenu devient incroyablement petit.
Et même lorsque vous faites défiler, c'est comme si vous le faisiez sur une Apple Watch ou quelque chose.
Alors que tout ce contenu supplémentaire est repris par des avertissements, des bannières et des cookies et que ce n'est tout
simplement pas une très bonne expérience utilisateur.
Mais d'un autre côté, ne devenez pas fou non plus.
Ne faites pas tout votre site Web en une seule partie comme une image ou un morceau de texte, l'agrandir massivement comme cela est
également très très gênant, car je dois alors continuer à faire défiler jusqu'à une éternité avant de pouvoir
réellement lire et prendre en compte tous les teneur.
Alors trouvez un juste milieu.
Et surtout tester, tester, tester.
Donnez-le à d'autres utilisateurs.
Vous pouvez faire appel à des testeurs professionnels pour tester votre site Web et vous faire part de leurs commentaires.
Maintenant, si vous ne pouvez pas vous le permettre, utilisez simplement votre famille et vos amis. Et préparez des cookies pour eux, demandez-leur
de tester votre site Web et commencez à obtenir des commentaires sur la façon dont vous pouvez améliorer la conception.
Enfin, nous avons beaucoup parlé de l'expérience utilisateur et de la façon d'amener les gens à passer un bon moment.
Maintenant, certains concepteurs utilisent les connaissances qu'ils ont sur la psychologie humaine
et la conception de l'interface utilisateur et de l'expérience utilisateur pour faire de mauvaises choses.
Et dans le monde du design, nous appelons ces motifs sombres. Donc des modèles qui amènent un utilisateur à effectuer une action ou
un comportement qui est bénéfique pour l'entreprise ou le concepteur, mais ce
n'est pas nécessairement ce que l'utilisateur veut.
Et je dirais que c'est une autre forme de mauvaise expérience utilisateur.
Alors laissez-moi vous donner quelques exemples.
Ceci est un exemple de la vie réelle. Disons que vous êtes entré dans Waitrose qui est un
grand supermarché au Royaume-Uni et que vous vous êtes acheté un sandwich.
Maintenant, quand vous le regardez au moment où vous l'achetez, il semble que ce sandwich va être sur
toute la longueur d'un bord à l'autre,
n'est-ce pas ?
Mais ensuite, lorsque vous déchirez l'emballage, vous êtes déçu de constater qu'en réalité, tout ce qui se trouve
au milieu n'est que de l'air et que votre sandwich s'avère beaucoup plus petit que vous ne le pensiez au départ.
C'est le pire sentiment au monde.
C'est un sentiment que je ne supporte pas lorsque ma nourriture est soudainement réduite en taille.
C'est comme si quelqu'un venait et prenait de la nourriture dans votre assiette. Dans le monde numérique,
les gens font la même chose. Le même genre de supercherie qui est censée vous amener à effectuer une action
que vous ne voulez pas nécessairement et vous finissez par vous sentir vraiment déçu et vraiment contrarié. Avec Amazon à chaque fois, je dois re-cliquer
sur
le bouton de livraison gratuite que j'ai gagné en leur achetant autant de produits.
Mais ils essaient toujours de vous tromper en utilisant les choses que nous
avons apprises sur la hiérarchie par exemple. Ici, le bouton qui rapporte le plus d'argent "Livraison express" est surligné en orange.
Il ressort beaucoup plus.
Il est beaucoup plus probable que vous vouliez cliquer dessus.
Mais selon toute vraisemblance, vous êtes probablement satisfait d'une livraison normale et vous êtes maintenant amené à payer
plus cher pour cette livraison.
Maintenant, voici un autre
exemple qui est en fait vrai le mal.
Ceci est une publicité Snapchat pour certaines chaussures.
Mais ce que le concepteur a intelligemment fait sur la publicité, c'est qu'il a placé une ligne incurvée d'un pixel sur cette publicité, ce qui la
fait ressembler un peu à un cheveu sur votre écran. Mais quand vous entrez dans cet écran et que vous essayez de
vous débarrasser de ce morceau de cheveux, eh bien, vous avez tapé sur une avenue.
Ainsi, l'annonce vous amène sur le site Web et les annonceurs gagnent de l'argent à chaque clic.
Et c'est vraiment un modèle de chien parce qu'il vous incite simplement à faire quelque chose que vous ne vouliez pas.
Alors qu'un bon design consiste à aider les gens à faire ce qu'ils veulent faire et à leur offrir une bonne
expérience pendant qu'ils y sont.
Maintenant, le roi des modèles de chiens est RyanAir et c'est une compagnie aérienne à bas prix en Europe qui est vraiment connue pour
vous facturer en quelque sorte pour chaque petite chose.
Je ne serais pas surpris si demain, ils vous facturent soudainement pour avoir utilisé les toilettes dans l'avion.
Mais voici à quoi ressemble le site Web lorsque vous avez essayé d'acheter un billet d'avion. Afin d'acheter votre billet d'avion, vous devez passer
par toutes ces options supplémentaires, notamment en disant « Non, je ne
veux pas acheter d'assurance voyage. " Mais regardez comment ils l'ont caché dans cette grande liste déroulante et ce n'est même
pas au début de la liste.
Il est en fait classé par ordre alphabétique en dessous du Danemark pour une raison quelconque.
Et cela rend tellement plus difficile pour vous de trouver cette option
et pour vous de finir accidentellement par acheter une assurance voyage.
Maintenant, le dernier exemple et probablement l'un des modèles de chien que je n'aime pas le plus sont ces cases à cocher. Vous savez, juste en dessous, vous avez rempli un
formulaire, vous obtenez ces cases
à cocher et parfois le libellé est si confus que je ne sais vraiment pas pourquoi
je m'inscris.
Comme celui-ci : Si vous souhaitez que nous ne continuions plus à arrêter de vous envoyer des offres spéciales et des
offres chaque semaine, veuillez indiquer que vous êtes enclin à oui
en ne cochant pas la case. Je n'ai aucune idée de ce que fait un clic sur cette case.
J'ai vraiment juste... Je ne sais pas.
Je pourrais cliquer dessus, peut-être pas.
Je ne sais pas ce que ça fait. Mais c'est horriblement déroutant et ce n'est pas du tout une bonne expérience utilisateur.
Je vous parie qu'après m'être inscrit, je ne reviendrai plus jamais sur ce site Web,
n'est-ce pas ?
Es-tu avec moi? Maintenant, nous
avons vu à quoi ressemblent les bons sites Web.
Nous avons vu à quoi ressemblent les mauvais sites Web.
Nous avons même vu à quoi ressemblent les sites Web malveillants.
Mais il est temps de mettre nos connaissances à l'épreuve en concevant notre propre site Web à partir de zéro et
en appliquant ces quatre piliers de la conception Web à ce projet.
Alors réfléchissez à ce que vous avez appris jusqu'à présent et passez à la prochaine leçon où nous
allons concevoir un site Web d'hôtel à partir de zéro.