Qu’est-ce que le learn UX ?

Qu’est-ce que le learn UX ?

Le Lean UX est une technique incroyablement utile pour travailler sur des projets où la méthode de développement Agile est utilisée. Les techniques traditionnelles d’UX ne fonctionnent souvent pas lorsque le développement est effectué en rafales rapides. Il n’y a pas assez de temps pour livrer les UX de la même manière. Fondamentalement, les UX Lean et les autres formes d’UX ont tous le même objectif en tête : offrir une expérience utilisateur exceptionnelle. C’est juste que la façon dont vous travaillez sur un projet est légèrement différente. Voyons donc comment cela pourrait fonctionner.

Lean UX – Qu’est-ce que c’est ?

Le lean ux

Le Lean UX est axé sur l’expérience en cours de conception et est moins axé sur les produits livrables que les UX traditionnels. Cela exige un niveau de collaboration plus élevé avec l’ensemble de l’équipe. L’objectif principal est de se concentrer sur l’obtention d’une rétroaction le plus tôt possible afin qu’elle puisse être utilisée pour prendre des décisions rapides. La nature du développement Agile est de travailler en cycles rapides et itératifs. Le Lean UX imite ces cycles pour s’assurer que les données générées peuvent être utilisées dans chaque itération.

Nécessité de formuler des hypothèses sur les UX Lean

Dans le cas des UX traditionnelles, le projet est fondé sur la saisie des exigences et les produits livrables. L’objectif est de s’assurer que les livrables sont aussi détaillés que possible et qu’ils répondent adéquatement aux exigences établies au début du projet.

Le Lean UX est légèrement différent. Vous n’êtes pas concentré sur les livrables détaillés. Vous cherchez à produire des changements qui améliorent le produit ici et maintenant – essentiellement pour façonner le résultat pour le mieux.

Dans la pratique, cela fonctionne en abandonnant les « exigences » et en utilisant un « énoncé du problème » qui devrait mener à un ensemble d’hypothèses qui peuvent être utilisées pour créer des hypothèses.

Qu’est-ce qu’une hypothèse ?

Une hypothèse est essentiellement un énoncé de quelque chose que nous pensons être vrai. Les hypothèses sont conçus pour générer une compréhension commune autour d’une idée qui permet à chacun de s’imaginer. Il est bien entendu que les hypothèses peuvent ne pas être correctes et qu’elles peuvent être modifiées au cours du projet au fur et à mesure qu’une meilleure compréhension se développe au sein de l’équipe.

Les hypothèses sont normalement formulées dans le cadre d’un atelier. Vous réunissez l’équipe et énoncez le problème, puis vous permettez à l’équipe de faire un brain storming pour trouver des idées afin de résoudre le problème. Au cours de ce processus, vous générez des réponses à certaines questions qui forment vos hypothèses.

Les questions typiques peuvent inclure :

  • Qui sont nos utilisateurs ?
  • A quoi sert le produit ?
  • Quand est-il utilisé ?
  • Dans quelles situations est-il utilisé ?
  • Quelle sera la fonctionnalité la plus importante ?
  • Quel est le plus grand risque pour la livraison du produit ?

Il peut y avoir plus d’une réponse à chaque question. Cela nous laisse avec un plus grand nombre d’hypothèses qu’il ne serait pratique de le faire. Si tel est le cas, l’équipe peut classer ses hypothèses par ordre de priorité rapidement après leur génération. En général, vous prioriseriez vos hypothèses en fonction du risque qu’elles représentent (quelles sont les conséquences d’une erreur grave ? Plus la conséquence est grave, plus la priorité est élevée) et le niveau de compréhension de la question à l’étude (moins vous en savez, plus la priorité est élevée).

hypothèses en lean UX

Création d’une hypothèse en Lean UX

Les hypothèses créées dans le cadre du Lean UX sont conçues pour vérifier nos hypothèses. Il existe un format simple que vous pouvez utiliser pour créer vos propres hypothèses, rapidement et facilement.

Un exemple :

Nous pensons qu’il est essentiel pour les utilisateurs de smartphones de permettre aux gens de sauvegarder leurs progrès à tout moment. Cela permettra d’atteindre un niveau plus élevé d’inscriptions complétées. Nous l’aurons démontré lorsque nous pourrons mesurer une amélioration du taux d’achèvement actuel de 20 %.

Nous énonçons la croyance et les raisons pour lesquelles elle est importante et pour qui elle l’est. Ensuite, nous suivons cela avec ce que nous nous attendons à réaliser. Enfin, nous déterminons quels éléments de preuve nous devrions recueillir pour prouver que notre croyance est vraie.

Si nous constatons qu’il n’y a aucun moyen de prouver notre hypothèse, il se peut que nous allions dans la mauvaise direction parce que nos résultats ne sont pas clairement définis.

L’un des grands avantages de travailler de la sorte est qu’il enlève une grande partie du processus de conception des UX et des luttes intestines politiques qui s’y rattachent. Chaque idée sera mise à l’essai et les critères de preuve seront clairement déterminés. Aucune preuve ? Alors il est temps de laisser tomber l’idée et d’essayer autre chose.

Si tout le monde peut comprendre une hypothèse et les attentes qui en découlent, ils ont tendance à être heureux d’attendre de voir si elle est vraie plutôt que de débattre avec passion de leur propre point de vue subjectif.

Le produit viable minimal et les UX maigres

MVP en UX

Le produit minimum viable (MVP) est un concept de base du Lean UX. L’idée est de construire la version la plus basique possible du concept, de le tester et s’il n’y a pas de résultats valables, de l’abandonner. Les MVP prometteurs peuvent ensuite être intégrés sans trop de tracas dans d’autres cycles de conception et de développement.

C’est un excellent moyen de maximiser vos ressources et l’une des raisons pour lesquelles il fonctionne si bien avec le développement Agile – il permet beaucoup d’expérimentation.

Recherche et test des utilisateurs dans le cadre du Lean UX

De par leur nature même, la recherche et les tests auprès des utilisateurs sont basés sur les mêmes principes que ceux utilisés dans les environnements UX traditionnels. Cependant, l’approche tend à être  » rapide et sale  » – les résultats doivent être livrés avant le début de la prochaine Agile Sprint ; il y a donc beaucoup moins d’accent sur les résultats lourds et méticuleusement documentés et plus sur les données brutes.

Les responsabilités en matière de recherche tendent également à être réparties plus largement dans l’ensemble de l’équipe, de sorte qu’il n’y a pas de  » goulot d’étranglement  » créé par le fait qu’une seule ressource de conception d’UX essaie de faire tout le travail dans des délais serrés. Cela permet souvent aux ressources de développement d’effectuer un travail pratique sur les UX et augmente le niveau de compréhension et de soutien du travail sur les UX au sein de l’équipe de développement également.

Résumé

Il s’agit d’un aperçu de très haut niveau de Lean UX et, bien sûr, il y a beaucoup plus à cela que ce que vous pouvez couvrir dans un court article . Cependant, ces concepts de base devraient vous permettre d’aller dans la bonne direction lorsqu’il s’agit d’implémenter Lean UX dans votre environnement Agile.

Comment passer de graphiste à UX designer ?

Comment passer de graphiste à UX designer ?

S’il y a une profession qui est entièrement liée à l’idée que le public se fait du design, c’est bien le graphisme. Des arcs dorés familiers de la marque McDonald’s à la typographie et aux couleurs des affiches de cinéma, les graphistes créent certains des designs les plus iconiques et les plus omniprésents qui nous entourent. Alors pourquoi un graphiste comme vous voudrait-il changer votre carrière pour UX design ? D’une part, il y a beaucoup à dire sur le sentiment de satisfaction et d’épanouissement que procure le fait d’être  » sous le capot  » des produits sur lesquels on travaille plutôt que de travailler à l’extérieur. D’autre part, selon PayScale, le salaire moyen d’un graphiste aux États-Unis est de 41 000 $, mais il en va de même pour un graphiste d’UX, ce qui représente un énorme 74 000 $.

salaire moyen ux designer vs designer

salaire moyen ux designer vs designer

Quelle que soit la raison du déménagement, il est clair qu’il peut être très gratifiant. Mais comment passer du design graphique au design UX ? Allons le découvrir.

Qu’est-ce que l’expérience utilisateur et la conception de l’expérience utilisateur ?

L’expérience utilisateur (UX) est ce qu’un utilisateur d’un produit particulier ressent lorsqu’il utilise ce produit. Le travail d’un concepteur d’UX est donc de créer un produit qui offre la meilleure expérience utilisateur possible. Comment est-ce faisable ?

Eh bien, ça commence avec beaucoup de recherches. Vous ne pouvez pas créer de valeur pour un utilisateur si vous ne comprenez pas quels types de problèmes ils veulent résoudre et comment vous pouvez les résoudre, afin que l’utilisateur veuille – ou mieux encore, ait besoin – de votre solution. Vous ne pouvez obtenir cette compréhension qu’en interagissant avec les utilisateurs.

Les concepteurs d’UX ont tendance à se préoccuper, comme vous pouvez le voir sur l’image ci-dessous, de 3 facteurs principaux : l’apparence d’un produit, la sensation de ce produit et la facilité d’utilisation de ce produit.

définition expérience utilisateur

L’apparence d’un produit consiste à créer un produit qui a un attrait visuel et qui, en particulier, s’harmonise avec les valeurs de l’utilisateur et reflète l’esprit de ce qu’il attend de ce produit. En d’autres termes, elle doit non seulement être belle, mais aussi conviviale. Ce faisant, il établit un lien de confiance et de crédibilité entre le produit et l’utilisateur.

Ensuite, il y a la sensation, qui consiste en fait à développer des produits qui sont « un plaisir à utiliser ». En d’autres termes, que vous interagissiez avec eux ou que vous réagissiez à eux, les produits doivent être une expérience agréable et pas seulement fonctionnelle.

Enfin, la convivialité est la pierre angulaire de l’expérience utilisateur. Si un produit n’est pas utilisable, l’expérience de son utilisation ne peut jamais être bonne. Les concepteurs d’UX veulent créer des produits qui peuvent, idéalement, être adaptés aux besoins spécifiques d’un utilisateur, mais qui offrent des fonctionnalités prévisibles.

Qu’est-ce que le design graphique et le design UX ont en commun ?

graphiste vs ux designer

Design émotionnel

Le design graphique est une communication émotionnelle à travers la typographie, la couleur et les images ; les caractères empattements et les couleurs sombres et ternes évoquent le sérieux, tandis que les caractères sans-serif et les couleurs vives ont tendance à faire ressortir une sensation de joie ou d’excitation. Les graphistes sont donc très souvent des concepteurs émotionnels qui suscitent des réactions spécifiques chez un utilisateur. La conception d’UX se préoccupe également de façonner les émotions de l’utilisateur, bien qu’elle ait tendance à avoir une vue d’ensemble plus large de l’expérience globale de l’utilisateur avec le produit. En plus de se concentrer sur la bonne typographie et les bonnes couleurs, les concepteurs d’UX se préoccupent également de la conception du mouvement, du ton du contenu et de l’architecture de l’information, entre autres.

Pensée créative

Les concepteurs graphiques et les concepteurs d’UX sont tous deux aussi doués pour la pensée créative. Pour les graphistes, créer des visuels qui respectent les conventions (et donc qui communiquent efficacement) tout en gardant un sens de l’originalité (pour se démarquer de la concurrence) nécessite une réflexion créative et critique sérieuse. De la même manière, les concepteurs d’UX doivent créer des produits qui résolvent les problèmes des utilisateurs – et parfois, les solutions conventionnelles ne sont pas toujours les meilleures ou les plus appropriées.

Prototypage

Les concepteurs graphiques créent souvent des maquettes et des filigranes de leurs créations avant de livrer un dessin fini. Cela permet aux clients de donner leur avis sur leurs conceptions et de les améliorer sans avoir à repartir de zéro. Les designers d’UX créent aussi des maquettes et des prototypes, mais ils ont tendance à se concentrer moins sur le « look » du produit et plus sur sa « sensation ». Le prototype est-il utile ? Est-il utilisable ? Est-ce souhaitable ? Telles sont les questions auxquelles un concepteur d’UX veut des réponses.

Les différences entre la conception graphique et la conception UX

Centré sur l’utilisateur par opposition aux pixels

Les concepteurs graphiques ont tendance à rechercher la perfection des pixels dans leurs créations. S’assurer que les textes ont un crénage parfait et que les couleurs sont conformes aux directives de la marque qui occupe souvent une part importante du travail des graphistes, et pour de bonnes raisons. Les concepteurs d’UX, cependant, se concentrent principalement sur les utilisateurs. Ils étudient l’interface entre les utilisateurs et le produit, trouvant des moyens de s’assurer que le produit répond aux besoins clés de l’utilisateur. Et ils le font en menant de nombreuses recherches – en parlant aux utilisateurs et en les observants, en créant des personnages et des histoires d’utilisateurs, en faisant des tests d’utilisabilité sur les produits, et bien plus encore. Les concepteurs graphiques qui cherchent à changer de carrière devront faire beaucoup de travail pour découvrir comment mener des recherches sur les utilisateurs (plus de détails à ce sujet un peu plus loin dans l’article).

Résolution itérative des problèmes

La conception d’UX est un processus itératif de résolution de problèmes qui peut être très différent de ce que vous avez l’habitude de faire en tant que concepteur graphique. Cela commence par l’identification d’un problème ; cela se trouve souvent par la recherche des utilisateurs, et si ce n’est pas le cas, cela sera ensuite confirmé par la recherche des utilisateurs. Il ne sert à rien de résoudre des problèmes dont les utilisateurs ne se soucient pas ; ils ne paieront pas pour résoudre ces problèmes, et cela signifie que votre entreprise ne fera pas d’argent.

étapes process ux design

Dès l’étape de l’identification du problème, d’autres recherches sont menées sur la meilleure façon de résoudre le problème de manière à ce que l’utilisateur s’en réjouisse – généralement par des observations, des enquêtes, des études ethnographiques, etc.

Ces recherches servent ensuite à la conception du produit. Les conceptions sont ensuite testées avec les utilisateurs pour voir si la recherche a conduit aux bonnes solutions. Les conceptions sont constamment itérées jusqu’à ce que la recherche confirme qu’elles sont assez bonnes.

Une fois cela fait, le produit est lancé, mais le processus de conception n’est pas terminé. La conception sera continuellement mise à l’essai et les commentaires des utilisateurs seront pris en compte, ce qui permettra d’amorcer une nouvelle ronde de recherche auprès des utilisateurs. D’autres améliorations seront apportées à la conception en fonction de cette rétroaction.

Multidisciplinaire vs spécialisé

Le graphisme est une discipline spécialisée, et il y a un certain niveau d’artisanat et un ensemble de compétences spécialisées (comme la typographie et la théorie des couleurs) requises pour produire de grands visuels. La conception des UX, par contre, est beaucoup plus multidisciplinaire et fait appel à de nombreuses écoles de connaissances. Les concepteurs d’UX doivent constamment apprendre la psychologie humaine, le design d’interaction, l’architecture de l’information et les techniques de recherche des utilisateurs, pour n’en nommer que quelques-uns, afin de créer les bonnes solutions aux problèmes des utilisateurs. Don Norman, l’homme qui a inventé le terme « User Experience », explique que l’expérience de l’utilisateur couvre « tous les aspects de l’expérience de la personne avec le système, y compris les graphiques du design industriel, l’interface, l’interaction physique et le manuel ».

Le grand avantage de l’expérience de conception graphique lors du passage à UX Design

Esthétique

Le plus grand avantage pour les graphistes qui passent au design UX est qu’ils peuvent rendre les choses attrayantes. Une idée fausse très répandue au sujet de la conception des UX est que la bonne ergonomie l’emporte sur l’esthétique. Au contraire, on a constaté qu’une bonne esthétique améliore l’expérience globale de l’utilisateur du produit en le rendant plus détendu, en créant une première impression positive et, en général, en montrant simplement que vous vous souciez de lui(3).

L’esthétique aide également les concepteurs à communiquer avec les parties prenantes internes de leur entreprise. Les ex-concepteurs graphiques peuvent présenter les résultats de la recherche d’une manière qui fait en sorte que les intervenants s’assoient et en prennent vraiment bonne note. Les compétences en conception graphique sont souvent considérées comme facultatives dans la recherche sur les UX, mais il serait difficile de nier l’impact de belles découvertes bien présentées. Si vous apportez le changement, vous devrez trouver un équilibre entre votre tendance à rendre les choses magnifiques et la nécessité de faire avancer vos projets de design. Il y a des moments dans la conception d’UX où quelques gribouillis au dos d’une serviette de table sont plus que suffisants pour faire avancer les choses ; ne passez pas 3 jours à produire une affiche lorsque c’est le cas.

Conventions et tendances

Venir d’une formation en design signifie non seulement avoir une bonne maîtrise de la terminologie du design, mais aussi que vous êtes susceptible d’être familier avec les conventions et les tendances en matière de design web ou applicatif. La plupart du temps, les concepteurs d’UX utilisent des conventions standardisées (comme un interrupteur à bascule pour les états marche/arrêt, une liste déroulante pour les options multiples, etc.) parce que les utilisateurs en sont venus à attendre ces interactions sur un site Web. Les graphistes, surtout si vous avez créé des prototypes dans le passé, sont également familiers avec ces conventions. Cela signifie que vous vous adapterez plus rapidement à un rôle de concepteur UX qu’une personne qui n’a pas de formation en conception. Cela peut sembler peu, mais la communication est au cœur de tout projet de conception d’UX et le fait d’être capable de parler est un grand avantage.

Comment améliorer vos compétences pour passer de la conception graphique à la conception d’UX Design

Existe-t-il un écart entre les compétences en conception graphique et les compétences en conception UX ? Oui, mais ce n’est pas insurmontable. Les graphistes parlent déjà le langage du design ; ils n’ont qu’à rafraîchir leurs connaissances pour inclure celles qui sont uniques au design UX.

Une fois que vous avez ces compétences, vous pouvez commencer à les intégrer dans votre travail de conception graphique (parce que le design de l’expérience utilisateur peut informer le design graphique tout autant que le design de produit) et commencer à adapter votre CV pour mettre en valeur vos compétences UX ainsi que vos compétences en design graphique.

Comme nous l’avons mentionné plus haut, la vraie clé pour les graphistes est de comprendre la recherche utilisateur sous toutes ses formes. Tous les cours que nous avons soulignés ci-dessous devraient répondre à ce besoin dans une plus large mesure.

Cours en ligne

Coursera

Vous pouvez aussi essayer Coursera.org, qui est un fournisseur d’éducation de haute qualité et à bas prix qui offre des cours sur un large éventail de sujets, y compris UX. Il est géré par un consortium d’universités et les cours sont généralement très bons. Alors que tous leurs cours étaient gratuits (ce qui était une excellente valeur), ils facturent actuellement par cours pour la plupart des programmes. Il convient également de noter que leurs cours ne sont disponibles que rarement (au plus une ou deux fois par an).

Udemy

Udemy est le plus grand courtier mondial en formation. Ils ne conçoivent pas leur propre formation ; ils permettent plutôt aux créateurs de cours de vendre leurs cours sur leur plateforme. Ils offrent littéralement des milliers de cours dans presque tous les domaines imaginables. Le problème, c’est qu’Udemy n’offre aucun contrôle de qualité, et bien que vous puissiez y trouver d’excellents parcours, il y en a beaucoup d’autres qui ne le sont pas non plus.

Cours en classe

Groupe Nielsen Norman

Si vous avez les poches plus profondes et que vous préférez apprendre dans une salle de classe plutôt qu’en ligne, vous voudrez peut-être consulter les cours en classe offerts par le Nielsen Norman Group. Le groupe jouit d’une excellente réputation et est l’un des bureaux d’études UX les plus respectés au monde. Ils offrent leurs cours dans divers endroits, mais nous ne pouvons pas garantir que vous en trouverez un à votre porte et que vous devrez peut-être parcourir une certaine distance pour y participer.

Cooper

Nous pensons également que Cooper.com a une grande réputation en matière de formation en classe pour la conception d’UX. Encore une fois, ce n’est pas bon marché, mais ce sera toujours le cas pour la formation professionnelle en classe. Toutefois, ils offrent également une vaste gamme d’endroits pour donner leurs cours, ce qui est utile pour ceux qui cherchent à réduire au minimum les déplacements.

Cours universitaires

Nous ne sommes pas sûrs que l’université soit la meilleure option pour ceux qui cherchent à changer d’orientation professionnelle ; ce n’est pas seulement l’argent nécessaire, mais aussi le temps nécessaire. Vous pourriez gagner de l’argent et apprendre en utilisant une méthode différente plutôt que de passer 3 ou 4 ans dans un programme de baccalauréat ou 2 ans dans un programme de maîtrise. Cependant, si vous décidez d’aller à l’université, vous voudrez passer beaucoup de temps à chercher exactement le programme qui vous convient. Nous avons quelques exemples pour vous ici, mais il y a littéralement des centaines de programmes dans le monde et nous ne pouvions espérer les couvrir tous.

Carnegie Mellon – Programmes ICH

Université York – M.Sc. en technologies de l’ICH

Nous vous conseillons vivement de vous asseoir avec une calculatrice et de réfléchir aux coûts associés aux études universitaires avant de réserver une place. La HSBC, telle que rapportée par les meilleures universités, a constaté qu’un cours universitaire américain moyen vous coûtera 36 564 $ par an (y compris le loyer, les frais de scolarité, les livres, etc.). (4) Sur une période de quatre ans, cela signifie dépenser 146 256 $ – et ce, sans les coûts d’un prêt pour couvrir ces dépenses.

Mais ce n’est pas tout – vous devrez aussi renoncer au travail à temps plein. Selon le US Census Bureau, un non diplômé gagne en moyenne 27 351 $ par année(5), ce qui nous donne un coût d’opportunité de 109 404 $ sur quatre ans (c’est-à-dire le revenu auquel vous avez renoncé pendant vos études universitaires). Cela signifie que 4 ans à l’université vous coûtera 255 660 $ !

Mise en réseau

Une fois que vous aurez rafraîchi vos compétences et que vous vous sentirez prêt pour ce premier rôle d’UX, vous trouverez peut-être utile de faire un peu de réseautage. Les meilleures opportunités sont presque toujours trouvées quand quelqu’un qui est déjà sur le terrain vous recommande pour un poste. L’un des meilleurs endroits pour commencer avec votre réseautage est LinkedIn. Rejoignez des groupes UX, commencez à contribuer, et construisez ce réseau important avec vos pairs. Mais allez-y doucement ; ne vous présentez pas et ne commencez pas simplement à demander un emploi. Vous avez besoin de relations avec les gens avant qu’ils ne vous aident.

Une autre façon utile de commencer à travailler en réseau est de suivre les membres célèbres de la communauté de conception UX sur Twitter. Non seulement vous apprendrez beaucoup d’eux, mais vous pourrez aussi interagir avec leurs adeptes (qui sont susceptibles d’être des designers comme vous aussi).

Mentorat et rétroaction

Une autre excellente façon de développer votre carrière est de travailler avec un mentor dans le domaine des UX qui « a été là, l’a fait et a acheté le t-shirt », du moins pour ainsi dire. Vous pouvez trouver un mentor par l’intermédiaire de votre propre réseau et c’est une excellente façon de communiquer avec un mentor.

Le Take Away

Si vous voulez passer de la conception graphique à la conception UX en tant que carrière, c’est génial. Ce ne sera pas aussi difficile que vous le pensez. Il vous suffit d’avoir un peu d’entraînement sous la ceinture pour vous familiariser avec ce que fait un concepteur d’UX, et vous pourrez ensuite mettre certaines de ces techniques en pratique dans votre rôle actuel. Ensuite, lorsque vous pensez que le moment est venu, vous pouvez commencer à faire du réseautage et à préparer des entrevues pour votre nouvel emploi !

 

Avantages et inconvénients du mobile first en design

Avantages et inconvénients du mobile first en design

Historiquement, la plupart des concepteurs Web et leurs clients ont d’abord abordé le côté bureau de n’importe quel projet, tout en laissant la partie mobile comme un objectif secondaire qui se réalise plus tard. Même avec la montée en puissance du design réactif, beaucoup d’entre nous commencent par le site « grandeur nature » et s’orientent vers le bas.

Il y a une tendance croissante dans l’industrie à renverser ce flux de travail et à commencer par des considérations mobiles pour ensuite passer à une version de bureau plus grande.

Pourquoi aborder un projet de cette façon ? Quels sont les avantages et les inconvénients de cette stratégie ? Lisez la suite pour le savoir !

La conception Web mobile n’est pas une niche

nombre utilisateur mobile monde

Si vous avez encore en tête que la conception et le développement d’applications web mobiles est une industrie de niche, vous devez changer votre façon de penser. Le mobile n’est pas une tendance, ni même l’avenir, c’est le présent. Vous ne me croyez pas ? Voici quelques statistiques folles à prendre en compte de la part de Mobithinking :

  • Il y a plus de 1,2 milliard d’internautes mobiles dans le monde.
  • Aux États-Unis, 25 % des utilisateurs du Web mobile sont exclusivement mobiles (ils utilisent rarement un ordinateur de bureau pour accéder au Web).
  • Les applications mobiles ont été téléchargées 10,9 milliards de fois
  • Les ventes d’appareils mobiles augmentent de façon générale, plus de 85 % des nouveaux appareils pouvant accéder au Web mobile.

L’un des faits les plus puissants ici est le deuxième élément, qui met en lumière que de nombreux utilisateurs ne verront probablement jamais que la version mobile de votre site. C’est une révélation stupéfiante, n’est-ce pas ?

Plus que jamais, le Web est quelque chose que nous avons dans nos poches, et non quelque chose qui traîne près de notre bureau ou même dans nos maisons. Il s’agit d’une tendance mondiale qui ne fera que croître dans les années à venir. Tu es prêt pour ça ? Vos compétences professionnelles comprennent-elles le développement Web pour toutes les plates-formes importantes ou seulement pour l’arène du bureau ?

Pourquoi Mobile First ?

pourquoi mobile first

Il y a fort à parier qu’aucun des lecteurs n’a rien appris de nouveau jusqu’à présent. Les téléphones à plus de 500 $ dans les poches de toutes les personnes que vous connaissez sont tous les indices dont vous avez besoin pour savoir que la toile est sortie de sa boîte en forme d’ordinateur.

Cependant, le fait que l’accès au Web mobile soit populaire ne me convainc presque rien pour me convaincre que je dois poursuivre une stratégie qui place le mobile en premier. Le revers de la médaille, c’est que 25% des utilisateurs mobiles ne sont que mobiles, 75% d’entre eux ne le sont pas ! Le bureau reste un support important, à ne pas oublier et à ne pas mettre en veilleuse pour l’instant. Alors pourquoi est-ce qu’on envisage de prendre la route du mobile d’abord ?

L’un des principaux catalyseurs de la montée en puissance du design web mobile a été l’annonce par Eric Schmidt en 2010 que Google allait désormais adopter cette approche, allant jusqu’à dire « Je pense que c’est maintenant le projet commun de nous tous de faire du mobile la réponse à presque tout » (source). Pourquoi ce changement radical d’approche ?

Dégradation gracieuse par rapport à l’amélioration progressive

Ce sont quelques mots à la mode importants d’il y a quelques années qui peuvent encore donner un bon aperçu de la notion de design web mobile d’abord et pourquoi c’est un concept important à considérer.

mobile first responsive

Une dégradation gracieuse est née de la nécessité d’avoir une fonction de conception sur autant de navigateurs et de plates-formes que possible. Les concepteurs et les développeurs voulaient profiter des nouvelles technologies sans exclure les utilisateurs dont les installations n’étaient pas prises en charge. La conclusion générale était de créer et de servir la meilleure expérience possible, puis de tenir compte de chaque dégradation possible et de s’assurer qu’en dépit de toute lacune, le site resterait fonctionnel.

En termes de conception de sites Web mobiles, cela signifiait qu’un site Web standard complet réduirait et supprimerait progressivement le contenu et les fonctionnalités à mesure que la fenêtre d’affichage rapetissait et que le système devenait plus simple (aucun support Flash, etc.).

mobile first progressive element De cette tendance est née une nouvelle idée puissante : l’amélioration progressive. Dans cette version de l’histoire, vous mettez votre meilleur pied en avant sur la plate-forme mobile, fournissant aux utilisateurs un minimum de surface d’écran, de puissance de traitement et de plugins tiers une expérience étonnante qui à la fois est superbe et fonctionne parfaitement. Au fur et à mesure des besoins, le site peut être progressivement  » enrichi  » et même complètement repensé pour de plus grandes plateformes avec moins de contraintes.

Pourquoi l’amélioration progressive l’emporte ?

À première vue, ces deux méthodes semblent à peu près équivalentes. Qui se soucie où vous commencez le processus de conception tant qu’il est fait, n’est-ce pas ?

La réalité de la situation est cependant un peu plus complexe. Lorsque vous commencez avec la plate-forme de bureau, vous avez tendance à vouloir profiter de tout ce que la plate-forme a à offrir. Vous construisez un produit étonnant qui tire parti d’une foule de technologies de pointe, mais vous vous rendez compte qu’aucune d’entre elles ne s’adapte bien à la mobilité. Cela peut conduire et mène effectivement à des produits mobiles sévèrement édulcorés qui ressemblent plus à une réflexion après coup qu’à un produit fini et poli. Est-ce que cela se produit pour chaque projet ? Peut-être pas, mais l’histoire est probablement beaucoup plus commune que vous ne voudriez le croire.

Si nous examinons le déroulement progressif du travail d’amélioration, le résultat a tendance à être une autre histoire. Nous commençons ici avec un projet qui est à la fois très maigre et très impressionnant. Vous avez pris toute cette énergie de départ et l’avez mise dans la création d’un produit qui a l’air et fonctionne bien malgré les nombreuses contraintes auxquelles vous avez dû faire face.

Plus important encore, vous êtes déjà passé par le problème de la réduction du contenu à ses éléments les plus vitaux. Maintenant, lorsqu’il est temps de mettre ce design sur le bureau, au lieu d’avoir à décider quoi couper et comment diluer votre produit, c’est à vous de décider comment le rendre encore plus robuste !

Contenu Web : Mieux servis sélectivement

L’argument ci-dessus s’adresse à vous d’un point de vue purement philosophique, la conclusion finale étant que le résultat tend à être meilleur si l’on adopte une approche mobile d’abord. Si vous voulez un argument avec un peu plus de substance observable derrière lui, ne cherchez pas plus loin que la façon dont vous servez votre contenu.

Si nous prenons le point de vue de la dégradation gracieuse, tout le contenu (texte, images, vidéo, audio, etc.) est servi en même temps à ce qui est supposé être la plus grande plate-forme. D’ici, les versions mobiles sont prises en compte qui ignorent ou suppriment simplement une grande partie de ce contenu de la page. Le problème cependant est qu’il était déjà chargé dans le fait de savoir si la plate-forme donnée en avait besoin ou non. Nous nous retrouvons à offrir plus de contenu qu’il n’est nécessaire sur la plate-forme qui est souvent associée aux vitesses de téléchargement les plus lentes. Tu vois quelque chose de mal à ça ?

Avec un premier point de vue mobile, nous commençons par charger l’essentiel absolu sur les plates-formes plus petites. Il en résulte une expérience plus vivante qui permet d’éviter les retards inutiles. Les ressources supplémentaires sont chargées strictement en fonction des besoins sur des plates-formes qui peuvent bien les gérer.

Qu’en est-il de la conception réactive ?

Comment tout cela s’intègre-t-il dans le design réactif, l’autre tendance qui prend le dessus sur le web ? La bonne nouvelle, c’est que ces deux stratégies ne sont pas concurrentielles. On pourrait dire qu’ils sont faits l’un pour l’autre.

La conception réactive s’articule autour du concept de requêtes média qui ciblent des périphériques et des tailles de fenêtres spécifiques. Dans cette optique, vous pouvez coder votre CSS initial dans une perspective mobile, puis utiliser les requêtes multimédias pour servir sélectivement des styles supplémentaires au fur et à mesure que la taille de la fenêtre d’affichage augmente.

C’est probablement le contraire de la méthode que vous utilisez habituellement avec un design réactif : commencez en grand et réduisez ensuite. Compte tenu des arguments ci-dessus, il y a beaucoup de logique derrière la structuration de vos requêtes médias, des plus petites aux plus grandes.

Le gros inconvénient du surplus

Hourra pour le premier web design mobile. C’est la meilleure chose sur le web depuis The Oatmeal. Alors pourquoi ne suis-je pas excité à ce sujet ? Pourquoi, même si j’adore le design réactif, ai-je souvent carrément évité le sujet du design web mobile d’abord ?

La réponse est simple : ce n’est ni amusant ni facile. Certes, la conception réactive est délicate, mais elle me permet de faire jouer mes muscles de mise en page et d’exploiter de nombreuses fonctionnalités intégrées du navigateur pour réaliser des exploits intéressants. Le design réactif rend ma boîte à jouets plus grande, pas plus petite.

Mais avec le design mobile d’abord, je suis frappé au dessus de la tête avec des contraintes à la première étape. Ce n’est pas drôle du tout ! Tout de suite, je me retrouve avec un écran plus petit, moins de ressources et beaucoup plus de maux de tête. De plus, ce n’est pas le territoire confortable. J’ai passé la majeure partie de ma carrière de webdesigner dans l’espace de bureau, en construisant des expériences autour des survols et des clics de souris, pas du bout des doigts. J’ai fait beaucoup de travail mobile, mais je n’appellerais pas ça mon point fort.

Plus important encore, du point de vue du design, il m’est très difficile de me plonger dans un design si je commence avec un mobile et que je m’oriente vers le haut. J’ai mentionné cela dans un article récent à de nombreux « huzzahs » dans les commentaires et j’ai même entendu des professionnels de l’industrie de premier plan chanter un air similaire.

Relever le défi

Examinons une seconde mes arguments pour et contre une approche de conception axée sur le mobile d’abord. Dans la catégorie « pour », nous avons des arguments simples et logiques qu’il est difficile de minimiser. Dans la catégorie « contre », j’ai beaucoup de plaintes et d’hésitations personnelles. Quel camp pensez-vous gagner cette bataille ?

Je dois renoncer à un peu de confort au nom d’être un meilleur designer.
Vous avez peut-être de meilleurs arguments anti-mobile first que moi, mais si je regarde cela d’un point de vue objectif, il est évident que l’approche mobile first  est le plus fort concurrent.

Cela signifie que j’ai probablement besoin de me dépasser et de relever le défi de commencer des projets avec un point de vue mobile. Si je ne suis pas à l’aise pour concevoir d’abord pour le mobile, tant mieux, cela signifie que j’ai de l’espace pour grandir et des techniques pour apprendre.

En fin de compte, si mes raisons d’adopter une approche mobile first sont centrées sur l’utilisateur et mes raisons contre sont personnelles, alors je dois abandonner un peu de confort au nom d’être un meilleur designer.

Qu’est-ce qui vous retient ?

Vous savez maintenant à quel point la conception de sites Web mobile first est formidable pour vos utilisateurs. Vous savez que de grandes entreprises comme Google adoptent cette approche et vous pouvez voir les avantages d’un premier flux de travail mobile. Alors, qu’est-ce qui te retient ?

Partagez-vous mon point de vue selon lequel le mobile first est une stratégie difficile à mettre en œuvre et convenez-vous que vous n’avez qu’à faire le saut ? Ou y a-t-il quelque chose de plus substantiel qui vous retient ?

Le guide ultime de l’animation en UX design

Le guide ultime de l’animation en UX design

De nos jours, il est difficile d’impressionner ou même de surprendre avec une animation d’interface. Cette animation montre les interactions entre les écrans, explique comment utiliser l’application ou attire simplement l’attention de l’utilisateur. En explorant les articles sur l’animation, j’ai découvert que presque tous ne décrivent que des cas d’utilisation spécifiques ou des faits généraux sur l’animation, mais je n’ai trouvé aucun article où toutes les règles concernant l’animation des interfaces seraient clairement et pratiquement décrites. Eh bien, dans cet article, je n’écrirai rien de nouveau, je veux juste rassembler tous les grands principes et règles en un seul endroit, pour que les autres concepteurs qui veulent commencer à animer des interfaces n’aient pas à chercher des informations supplémentaires.

Durée et vitesse de l’animation

Lorsque des éléments changent d’état ou de position, la durée de l’animation doit être suffisamment lente pour permettre aux utilisateurs de remarquer le changement, mais en même temps suffisamment rapide pour ne pas faire attendre.

 

durée de l'animation en UX

 

De nombreuses recherches ont découvert que la vitesse optimale pour l’animation d’interface se situe entre 200 et 500 ms. Ces chiffres sont basés sur les qualités particulières du cerveau humain. Toute animation inférieure à 100 ms est instantanée et ne sera pas reconnue du tout. Alors que l’animation d’une durée supérieure à 1 seconde donnerait une impression de retard et serait donc ennuyeuse pour l’utilisateur.

vitesse de chargement

Sur les appareils mobiles, les directives de conception du material design suggèrent également de limiter la durée de l’animation à 200-300 ms. Comme pour les comprimer, la durée devrait être plus longue de 30% – environ 400-450 ms. La raison en est simple : la taille de l’écran est plus grande, de sorte que les objets prennent le chemin le plus long lorsqu’ils changent de position. Sur les habillement mobile, la durée devrait être 30% plus courte – environ 150-200 ms, car sur un écran plus petit, la distance à parcourir est plus courte.

durée animation appareils

L’animation Web est traitée différemment. Comme nous sommes habitués à une ouverture quasi instantanée des pages Web dans un navigateur, nous nous attendons à passer rapidement d’un état à l’autre. Ainsi, la durée des transitions web devrait durer environ 2 fois moins longtemps que sur les appareils mobiles – entre 150 et 200 ms. Dans d’autres cas, l’utilisateur pensera inévitablement que l’ordinateur se bloque ou a des problèmes avec la connexion Internet.

Cependant, oubliez ces règles si vous créez une animation décorative sur votre site Web ou si vous essayez d’attirer l’attention de l’utilisateur sur certains éléments. Dans ces cas, l’animation peut être plus longue.

durée animation fonctionnalités

 

Il ne faut pas oublier que quelle que soit la plate-forme, la durée de l’animation doit dépendre non seulement de la distance parcourue, mais aussi de la taille de l’objet. Les éléments plus petits ou l’animation avec de petits changements devraient se déplacer plus rapidement.

Par conséquent, l’animation avec des éléments grands et complexes semble meilleure.
Parmi les objets en mouvement de même taille, le premier à s’arrêter est l’objet qui a parcouru la distance la plus courte.

Les petits objets par rapport aux grands objets se déplacent plus lentement puisqu’ils font de plus grands décalages.

 

durée animation par taille objet

Lorsque des objets entrent en collision, l’énergie de collision doit être répartie uniformément entre eux selon les lois physiques. Il est donc préférable d’exclure l’effet de rebond. Ne l’utilisez que dans des cas exceptionnels où cela a du sens.

mouvement animation

Le mouvement des objets doit être clair et net, alors n’utilisez pas de flou de mouvement (oui, utilisateurs After Effects, pas cette fois-ci). Il est difficile de reproduire l’effet même sur les appareils mobiles modernes et il n’est pas du tout utilisé dans l’animation d’interface.

comparaison flou de mouvement

Les éléments de la liste (cartes de nouvelles, listes de courriels, etc.) devraient avoir un délai très court entre leur apparition. Chaque occurrence du nouvel élément doit durer de 20 à 25 ms. L’émergence plus lente d’éléments peut gêner l’utilisateur.

animations liste items

Assouplissement

The illusion of life from cento lodigiani on Vimeo.

L’assouplissement aide à rendre le mouvement de l’objet plus naturel. C’est l’un des principes essentiels de l’animation, qui est décrit en détail dans le livre The Illusion of Life : Disney Animation, écrit par deux animateurs clés de Disney – Ollie Johnston et Frank Thomas.

Pour que l’animation n’ait pas l’air mécanique et artificielle, l’objet doit bouger avec une certaine accélération ou décélération – comme tous les objets vivants dans le monde physique.

comparaison mouvement artificiel naturel

Mouvement linéaire

Les objets qui ne sont affectés par aucune force physique se déplacent linéairement, c’est-à-dire à vitesse constante. Et juste à cause de ce fait, ils ont l’air très artificiel et faux pour l’œil humain.

Toutes les applications d’animation utilisent les courbes d’animation. Je vais essayer d’expliquer comment les lire et ce qu’elles signifient. La courbe montre comment la position de l’objet (axe y) change pendant les mêmes intervalles de temps (axe x). Dans le cas présent, le mouvement est linéaire, de sorte que l’objet parcourt la même distance en même temps.

courbe animation

Le mouvement linéaire, par exemple, ne peut être utilisé que lorsque l’objet change de couleur ou de transparence. En général, on peut l’utiliser pour les états quand un objet ne change pas de position.

Facilité d’accès ou courbe d’accélération lent sur le début et accélère de plus en plus vers la fin

On peut voir sur la courbe qu’au début la position de l’objet change lentement et que la vitesse augmente progressivement. Cela signifie que l’objet se déplace avec une certaine accélération.

courbe accélération

Cette courbe doit être utilisée lorsque les objets sortent de l’écran à pleine vitesse. Il peut s’agir de notifications système ou simplement de cartes de l’interface. Mais gardez à l’esprit que ce type de courbe ne devrait être utilisé que lorsque les objets quittent l’écran pour toujours et que nous ne pouvons pas les rappeler ou les retourner.

courbe accélération sorti écran

La courbe d’animation permet d’exprimer la bonne humeur. Dans l’exemple ci-dessous, nous pouvons voir que la durée du mouvement et la distance pour tous les objets est la même, mais même de petits changements dans la courbe vous donnent la possibilité d’influencer l’ambiance de l’animation.
Et bien sûr, en changeant les courbes, vous pouvez déplacer l’objet aussi proche que possible du monde réel.

travailler sur les variations de courbe

Courbe de sortie ou de décélération rapide sur le début et décélère sur la fin

C’est l’inverse de la courbe d’entrée facile, de sorte que l’objet couvre rapidement de longues distances puis réduit lentement la vitesse jusqu’à ce qu’il s’arrête finalement.

courbe de décélération animation UX

Ce type de courbe doit être utilisé lorsque l’élément émerge de l’écran – il s’élève sur l’écran à pleine vitesse, ralentit progressivement jusqu’à ce qu’il s’arrête complètement. Ceci peut également s’appliquer à différentes cartes ou objets qui apparaissent de l’extérieur de l’écran.

Courbe facile d’accès ou courbe standard

Cette courbe permet aux objets de prendre de la vitesse au début, puis de la ramener lentement à zéro. Ce type de mouvement est le plus fréquemment utilisé dans l’animation d’interface. Chaque fois que vous doutez du type de mouvement à utiliser dans votre animation, utilisez une courbe standard.

courbe standard animation UX

Selon les directives de conception des matériaux, il est préférable d’utiliser une courbe asymétrique pour rendre le mouvement plus naturel et réaliste. La fin de la courbe doit être plus accentuée que son début, de sorte que la durée de l’accélération soit plus courte que celle du ralentissement. Dans ce cas, l’utilisateur sera plus attentif au mouvement final de l’élément et donc à son nouvel état.

 

différence courbe standard asymétrique symétrique

Différence entre courbe standard asymétrique et symétrique

Le « Ease-in-out » est utilisé lorsque les objets se déplacent d’une partie de l’écran à l’autre. Dans ce cas, l’animation évite l’effet accrocheur et dramatique.

mouvement de la carte à l'écran et la courbe asymétrique

Mouvement de la carte à l’écran et la courbe asymétrique

Le même code mouvement doit être utilisé lorsque l’élément disparaît de l’écran, mais l’utilisateur peut le ramener à l’endroit précédent à tout moment. Il concerne entre autres le tiroir de navigation.

animation ux design et menu

De ces exemples découle une règle fondamentale que beaucoup de débutants négligent – l’animation initiale n’est pas égale à l’animation finale. Comme dans le cas du tiroir de navigation – il apparaît avec la courbe de décélération et disparaît avec la courbe standard. De plus, selon Google Material Design, le temps d’émergence de l’objet devrait être plus long pour attirer plus d’attention.

menu animation ux design

L’apparition et la disparition du menu s’effectuent par décélération et courbe standard correspondante.

Une fonction cubic-bezier() est utilisée pour décrire les courbes. On l’appelle cubique parce qu’il est basé sur quatre points. Le premier point avec les coordonnées 0;0 (en bas à gauche), et le dernier avec les coordonnées 1;1 (en haut à droite) sont déjà définis sur le graphique.

Sur cette base, nous n’avons pas besoin de décrire que deux points sur le graphique, qui sont donnés par quatre arguments de la fonction cubic-bezier() : les deux premiers sont les coordonnées x et y du premier point, les deux seconds sont les coordonnées x et y du second point.

Pour simplifier votre travail avec les courbes, je vous suggère d’utiliser les sites easings.net et cubic-bezier.com. La première contient la liste des courbes les plus fréquemment utilisées, dont vous pouvez copier les paramètres dans votre outil de prototypage. La seconde source vous donne la possibilité de jouer avec différents paramètres de la courbe et de voir immédiatement comment les objets vont bouger.

Courbes animation ux design

Différents types de courbes et leurs paramètres pour la fonction cubic-bezier ()

Chorégraphie en animation d’interfaces

Tout comme dans la chorégraphie de ballet, l’idée principale est de guider l’attention de l’utilisateur dans une direction fluide pendant la transition d’un état à un autre. Il existe deux types de chorégraphies :

  • l’interaction égale
  • l’interaction subordonnée.

Interaction égale

L’interaction égale signifie que l’apparence de tous les objets obéit à une règle particulière.
Dans ce cas, l’apparence de toutes les cartes est perçue comme un flux qui guide l’attention de l’utilisateur dans une direction, à savoir du haut en bas. Si nous ne suivons pas la commande, l’attention de l’utilisateur sera dispersée. L’apparence de tous les éléments à la fois serait également mauvaise.

attention utilisateur et animation ux design

L’attention de l’utilisateur doit être guidée dans une seule direction de fluide.

Quant à la vue tabulaire, c’est un peu plus compliqué. Dans ce cas, la focalisation de l’utilisateur doit être orientée en diagonale, de sorte que montrer les éléments un par un est une mauvaise idée. Révéler chaque élément un par un rendra l’animation excessivement longue, et l’attention de l’utilisateur sera en zigzag, ce qui est faux.

animation ux design

Diagonale pour la vue tabulaire des cartes

Interaction subordonnée

L’interaction subordonnée signifie que nous avons un objet central qui attire toute l’attention de l’utilisateur, et tous les autres éléments lui sont subordonnés. Ce type d’animation donne le sens de l’ordre et attire davantage l’attention sur le contenu principal.
Dans d’autres cas, il serait très difficile pour l’utilisateur de savoir quel objet suivre pour que son attention soit dispersée. Par conséquent, si vous avez plusieurs éléments que vous voulez animer, vous devez définir clairement la séquence de leur mouvement et animer le moins d’objets possible en même temps.

nombre animation ux design

Il vaut la peine d’animer un seul objet central et tout le reste qui lui est soumis. Sinon, un utilisateur ne saurait pas quel objet suivre

Selon Material.io, lorsque les objets en mouvement transforment leur taille de façon disproportionnée, ils doivent se déplacer le long de l’arc plutôt que dans une ligne droite. Cela aide à rendre le mouvement plus naturel. Par « disproportionnellement », j’entends que le changement de hauteur et de largeur de l’objet par augmentation/diminution s’effectue de manière asymétrique, c’est-à-dire avec une vitesse différente (par exemple, une carte carrée devient un rectangle).

Le mouvement le long de la ligne est utilisé lorsque l’objet change de taille proportionnellement. Puisque la mise en œuvre d’un tel mouvement est beaucoup plus facile, la règle de l’arc disproportionné est souvent négligée. En regardant les exemples réels d’applications, vous verrez la domination du mouvement linéaire.

animation tirc à l'arc ux design

Le mouvement d’un objet qui change de taille de façon disproportionnée doit être arrangé le long d’un arc.

Le mouvement sur la courbe peut être réalisé de deux façons : la première appelée Vertical out – l’objet commence à se déplacer horizontalement et se termine par un mouvement vertical ; la seconde – Horizontal out – l’objet commence à se déplacer verticalement et se termine par un mouvement horizontal.

La trajectoire du déplacement de l’objet le long de la courbe doit coïncider avec l’axe principal de l’interface de défilement. Par exemple, sur l’image suivante, nous pouvons faire défiler l’interface vers le haut et vers le bas et, en conséquence, la carte se déploie verticalement vers l’extérieur – d’abord vers la droite, puis vers le bas. Le mouvement inverse se fait de la manière inverse, c’est-à-dire que la carte monte d’abord verticalement et finit par se déplacer horizontalement.

design ux animation

Si les trajectoires des objets en mouvement se croisent, ils ne peuvent pas se croiser. Les objets doivent laisser suffisamment d’espace pour le mouvement d’un autre objet en ralentissant ou en accélérant leur propre vitesse. Une autre option – ils repoussent simplement d’autres objets. Pourquoi cela ? Puisque nous supposons que tous les objets de l’interface se trouvent dans un plan.

 

animation ux design app

Pendant le mouvement, les objets ne doivent pas se croiser, mais laisser de l’espace pour le mouvement d’un autre objet.

Dans un autre cas, l’objet en mouvement peut s’élever au-dessus d’autres objets. Mais encore une fois pas de dissolution ou de mouvement à travers d’autres objets. Pourquoi ? Puisque nous croyons que les éléments de l’interface se comportent selon les lois de la physique, et qu’aucun objet solide dans le monde réel n’est capable de le faire. Pendant le mouvement, les objets ne doivent pas se croiser, mais laisser de l’espace pour le mouvement d’un autre objet.

animation ux design application

Les objets peuvent s’élever au-dessus d’autres objets et ensuite se déplacer

Conclusions

Ainsi, si l’on résume l’ensemble des règles et principes mentionnés ci-dessus, l’animation de l’interface doit refléter les mouvements que nous connaissons du monde physique – friction, accélération, etc. En imitant le comportement des objets du monde réel, nous pouvons créer une séquence qui permet aux utilisateurs de comprendre à quoi s’attendre de l’interface.
Si l’animation est construite correctement, elle est discrète et ne distrait pas les utilisateurs de leurs objectifs. Si c’est le cas, vous devez soit l’assouplir, soit même l’enlever. Cela signifie que l’animation ne doit pas ralentir l’utilisateur ou l’empêcher d’exécuter la tâche.
Mais n’oubliez pas que l’animation est plus un art que la science, il est donc préférable d’expérimenter et de tester vos décisions sur les utilisateurs.

5 principes clés pour un site convivial

5 principes clés pour un site convivial

Savez-vous qu’il faut environ 50 millisecondes à une personne pour décider si elle doit rester sur votre site Web ou partir ?

Alors, qu’en est-il de votre site Web – est-ce qu’il permet aux visiteurs de rester ? Et comment leur faire passer plus de temps sur votre site ? Un beau design ou un contenu intéressant, c’est bien, mais ce n’est pas toujours suffisant pour engage les utilisateurs. Votre site Web doit satisfaire les besoins initiaux des utilisateurs, tout en offrant l’expérience correspondante avec des fonctionnalités pratiques et simples.

Dans cet article, nous fournissons 5 principes essentiels de convivialité de site Web qui aideront à rendre votre site Web convivial, à augmenter le temps moyen sur place et à améliorer le taux de rebond.

Qu’est-ce que la convivialité d’un site Web ?

La convivialité est une question de commodité et de simplicité dans l’utilisation d’un site Web.

La convivialité décrit l’efficacité avec laquelle les utilisateurs peuvent interagir avec un site Web. Cela couvre tout ce qu’un utilisateur rencontrerait typiquement sur un site Web : les blocs de navigation, les listes, le contenu, les illustrations, les vidéos, les boutons, les formulaires de demande, etc.

Jacob Nielsen, Web Usability Pioneer and Consultant, Co-fondateur @Nielsen Norman Group, PhD en interaction homme-machine, le décrit ainsi :

La convivialité est un attribut de qualité qui évalue la facilité d’utilisation des interfaces utilisateur. Le mot « utilisabilité » désigne également les méthodes permettant d’améliorer la facilité d’utilisation au cours du processus de conception.

Afin d’être convivial, votre site Web doit être adapté à votre public cible. Gardez toujours à l’esprit qui sont vos clients et quels sont leurs objectifs. Ont-ils tout ce dont ils ont besoin après avoir visité votre site Web ? Il est important d’être à l’écoute de votre auditoire et de connaître ses habitudes de comportement.

Pourquoi la convivialité est-elle importante ?

Si votre site Web n’est pas convivial, les visiteurs peuvent se mettre dans le pétrin dans la navigation, ne pas trouver le bouton requis, et même être dans l’impossibilité de faire un achat. Tout cela peut entraîner une mauvaise expérience utilisateur pour votre site Web, et les utilisateurs le quitteront immédiatement.

C’est pourquoi l’objectif principal est de rendre le site aussi facile à utiliser et pratique que possible.

Steve Krug, un professionnel de l’expérience utilisateur basé aux Etats-Unis, dans son livre « Don’t Make Me Think » (Ne me faites pas réfléchir) énonce l’objectif principal de convivialité : vous rendez un utilisateur malheureux si vous le forcez à réfléchir beaucoup. Tout ce qui se trouve sur votre site Web doit être aussi simple et transparent que possible.

Comment rendre un site Web convivial ?

Navigation facile

La navigation est la pierre angulaire de la convivialité. Il n’est pas important de savoir à quel point votre site Web est excitant mais plutôt si les utilisateurs éprouvent des difficultés à le parcourir. Une navigation facile permet à l’utilisateur de comprendre la structure du site Web. De cette façon, les clients comprennent comment visiter rapidement une page particulière sans aucune difficulté.

Au cas où vos utilisateurs ne comprendraient pas comment se déplacer à travers votre site Web ou application, il est fort probable qu’ils ne s’impliqueront pas, et quitteront le site. Pour éviter de telles situations, vous devez rendre les options du menu de navigation principal clairement visibles. Ne les cachez pas dans les menus déroulants, laissez-les prendre la place d’honneur. Vous devez également analyser les pages les plus vues et les mettre en évidence dans le panneau de navigation.

De plus, un autre problème critique est de s’assurer que l’utilisateur est au courant de la page sur laquelle il se trouve. Ils doivent le comprendre avec précision à tout moment. Les miettes de pain (aussi appelé fil d’Ariane) sont très utiles ici, car elles aident à la navigation sur le site Web.

Navigation facile - site web conviviable

Étude de cas

iExpedition est une plateforme web pour la réservation de voyages avec un public cible âgé de 45 ans et plus. Ainsi, lorsque nous avons commencé à développer le site Web, nous avons accordé beaucoup d’attention au panneau de navigation et à ses éléments, en tenant compte de leur public cible. L’objectif principal était de rendre le parcours du visiteur le plus clair et le plus simple possible : en commençant par le choix d’un circuit et en terminant par sa réservation.

Pour ce faire, nous avons augmenté la taille des options du menu de navigation principal par rapport aux autres éléments. Le menu lui-même se trouve au centre de la page, de plus, il y a des miettes de pain sur les pages. De cette façon, les options de menu sont toujours à la disposition de l’utilisateur et sont faciles à trouver.

Les options du menu secondaire sont plus petites. En fait, les utilisateurs visitent ces pages pour chercher des informations supplémentaires après avoir vérifié les options principales.

 

Un style unifié pour site web ou application

Il est impossible de faire en sorte que les utilisateurs tiennent compte de la structure de votre site Web, alors il est fortement recommandé de tout organiser pour maximiser la commodité de l’utilisateur. À ces fins, vous pouvez créer une ligne directrice pour assurer la cohérence de votre site Web ou de la structure de votre application. Les couleurs et le style doivent être reconnaissables, et le flux du site Web doit être facile à utiliser.

De plus, toutes les pages devraient avoir un modèle commun : de la taille de la police de l’en-tête à l’emplacement identique du formulaire d’inscription. Tout cela permet aux utilisateurs de naviguer rapidement sur un site Web.

Étude de cas

Digital Village est un espace de collaboration en ligne qui aide les entreprises à trouver des programmeurs et des designers et à travailler sur leurs projets en ligne.

Pour ce projet, il a été créé une ligne directrice dans laquelle il a été spécifié la police, les couleurs, la taille des boutons et l’état de survol utilisables. Ainsi, suivre les recommandations décrites dans le guide aide à améliorer la commodité de votre site Web ou application.

 

style unifié - site web conviviable

 Respect des normes de conception de l’industrie

Au cours du processus de développement du site Web, il est de la plus haute importance de respecter les normes pour une industrie particulière. Un modèle utile pour un site Web d’agence de voyages ne conviendra pas à une application médicale. Le soutien des normes aidera à améliorer le processus de communication avec les utilisateurs.

Jusqu’à présent, la plupart des gens ont une expérience suffisante de l’interaction avec les sites. Ils ont déjà certaines attentes quant à l’emplacement de chaque élément sur un site Web. Si vous essayez de réinventer la roue et de changer l’emplacement des éléments, cela peut avoir une incidence négative sur l’expérience du client. Des concepts et des normes communes ont été découverts il y a longtemps, et il est fortement recommandé de les suivre.

Étude de cas

Galith est une bijouterie en ligne. Comme pour tout projet de commerce électronique, il y a plusieurs règles à respecter.

L’option de recherche devrait être disponible sur chaque page afin que les utilisateurs puissent trouver tout ce dont ils ont besoin à tout moment.

Le bouton du panier d’achat doit être situé dans le coin supérieur droit (comme indiqué ci-dessous). La raison en est évidente : la communauté s’y est tellement habituée que si vous changez la position du bouton, cela risque de semer la confusion chez les utilisateurs. Par conséquent, vous perdrez des clients potentiels, car ils pourraient tout simplement ne pas être en mesure de compléter leurs achats.

Cependant, si vous voulez toujours contourner les normes communes, vous devez être conscient des risques possibles et vous assurer que vos changements sont effectués consciemment et raisonnablement dans le cadre de votre projet.

Utilisation d’images et d’illustrations

Il est plus facile pour notre cerveau de traiter l’information visuelle. Pour cette raison, l’utilisation d’images et d’illustrations vous aidera à attirer l’attention des utilisateurs. Quand ils voient d’autres personnes, cela fait bonne impression.

Il est important d’utiliser les images qui correspondent au thème de votre site Web ou de votre application. Dans le cas où vous choisissez le mauvais contenu, cela peut semer la confusion chez les utilisateurs. Et bien sûr, les photos doivent être de bonne qualité.

De plus, une des méthodes utiles pour attirer l’attention des utilisateurs est l’illustration. Il permet d’afficher le thème et le sujet du site.

Étude de cas

Lorsque nous travaillions sur les illustrations du site Web de Codica, notre objectif principal était de nous assurer qu’elles démontrent clairement nos valeurs, nos services et notre potentiel technologique. Tout cela s’ajoute à la fraîcheur du site Web, le rendant plus intéressant et convivial.

 

utiliser images illustration - site web conviviable

Version mobile

Une grande partie des utilisateurs visitent des sites Web via des appareils mobiles. D’année en année, ce montant ne fera qu’augmenter, et il oblige à créer d’abord une version mobile pour votre site ou application. Il permet ainsi de couvrir le plus grand nombre d’utilisateurs dans le monde entier.

Selon Statista, le nombre d’utilisateurs mobiles dans le monde entre 2010 et 2020 a presque doublé. Le nombre total d’utilisateurs mobiles devrait s’élever à 9 038 millions en 2020.
Concernant la version mobile de votre site web, il existe également des recommandations spécifiques.

site mobile - site web conviviable

Pour commencer, essayez d’éviter d’utiliser une grande quantité de texte sur une page. Il est préférable de diviser le texte en petites parties avec des sections « Lire la suite… » supplémentaires. Robert Gunning dans son livre « How to Take the Fog Out of Business Writing » dit que la plupart des phrases devraient être de 20 mots ou moins pour une lecture confortable.

Il est également important de respecter la taille de police optimale – environ 16px, et elle devrait être plus grande pour les titres. Ajoutez plus d’interlignes pour rendre le texte plus lisible.

De plus, il est recommandé de rendre les formulaires web du site web mobiles adaptables. Cela améliorera l’expérience de l’utilisateur lors de la saisie des données sur votre site.

Étude de cas

Africar est une place de marché multisite en ligne pour l’achat et la vente de voitures en Afrique. La majorité du public cible dans la zone géographique préfère utiliser des smartphones et des tablettes pour naviguer sur les sites Web. Par conséquent, la création d’une version de site Web mobile était essentielle pour couvrir un plus grand nombre d’utilisateurs.

version mobile - site web conviviable

 

Le test, c’est tout

Si vos collègues et amis utilisent votre site Web sans problème, cela ne signifie pas que les utilisateurs potentiels comprendront clairement comment il fonctionne. Il est préférable de mener des entrevues et de sonder vos vrais clients afin de suivre leur comportement.

ux design - site web conviviable

Nous créons des sites Web et des applications pour des utilisateurs potentiels, et non pour nous-mêmes. Vous devez définir les objectifs initiaux de votre public cible lors de la visite de votre site Web et les informations qu’il souhaite y trouver.

Voici une vidéo passionnante avec Jakob Nielsen. Il aborde le sujet des tests à haute voix et analyse les avantages et les inconvénients de cette technique.

Conclusion

Nous avons décrit 5 principes fondamentaux pour améliorer l’ergonomie de votre site web qui vous aideront à le rendre plus convivial. Vous pouvez les prendre en considération lors du développement, du test ou de l’analyse de votre site Web.

En résumant tout ce qui précède, nous pouvons souligner les principaux points importants pour l’amélioration de la convivialité du site Web :

  • Connaissez vos clients et essayez de résoudre leurs problèmes dans votre solution web.
  •  Fournir aux utilisateurs un panneau de navigation clair.
  • Fournir un style facile à utiliser pour l’expérience de l’utilisateur.
  • Essayez de suivre les standards communs du web.
  • Ajoutez des images et des illustrations qui simplifient la perception des utilisateurs.
  • Créez une version mobile pour toucher un plus grand nombre d’utilisateurs.
  • Testez votre site Web en réalisant des interviews et en sondant vos vrais clients.
  • Enfin, l’orientation client est toujours la clé du succès, quel que soit l’effort investi dans l’amélioration.
Le footer d’un site web

Le footer d’un site web

Le footer est un élément incontournable des sites, il est présent sur la plupart des sites. Pourtant, c’est un élément souvent négliger par les équipes marketing ou les webmasters. Découvrez dans ce guide, tous ce qu’il faut savoir sur le footer.

Définition de footer

Le footer ou le pied de page désigne la dernière partie ou la partie base d’une page web qu’on trouve en général sue toutes les pages web d’un site internet. En général, les footers sont inclus dans le gabarit des pages. L’un des avantages est qu’en utilisant une version PHP, on peut créer un modèle qui se répétera sur toutes les autres pages.

 

L’identité de marque et le contact

Le footer est souvent la dernière rubrique de votre que voient les internautes. Il est donc impératif pour vous de valoriser clairement votre identité e marque et la fonçons dont vos utilisateurs peuvent vous contacter.

En général, un simple lien vers votre page contact, peut être suffisant, mais vous pouvez toujours améliorer l’expérience utilisateur en indiquant clairement le numéro de téléphone et l’adresse mail.

Le call-to-action

call to action footer

En général, le footer n’est pas optimisé. Mais c’est un erreur. Le footer est un espace qui peut être optimisé pour la conversion et générer du clic.

Il est recommandé de mettre en place un emplacement pour l’inscription à une newsletter ou un téléchargement d’e-books, mais aussi des boutons pour les réseaux sociaux.

C’est la dernière chance pour vous de rattraper l’internaute, c’est l’occasion pour vous de convertir la personne de faon plus subtile.

Le sub-footer

Il permet de hiérarchiser et de clarifier les éléments du footer.

Le design

Le footer fait partie intégrante de votre site internet, il doit donc refléter votre univers graphique et le design général du site

Utiliser l’espace

Concernant le desing, vous devez utiliser jusqu’à 4 colonnes max, afin de donner l’impression d’un footer organisé et aéré.

Utiliser des éléments graphiques

N’hésitez pas à utiliser des éléments à utiliser des éléments graphiques à la place de certaines mots ou certaines phrases. Après tout, image vaut mille mots !

Contraste et lisibilité

Il est impératif de mettre en place un bon contraste, afin que le contenu du footer soit suffisamment lisible.

Le choix de la taille de la police, ainsi que la police en elle-même doivent être en cohérence avec le reste du site.

Le copyright

S’il y a une seule que le footer doit avoir c’est bien un copyright. Le mieux est de mettre l’année de création du site suivi de l’année en cours avec le symbole du copyright. Cet élément pourra vous prévenir de tout plagiat.

 

La politique de confidentialité

La politique de confidentialité est une page qui doit être facilement accessible sur toutes les pages du site, afin de de rassurer les utilisateurs surtout si vous avez un e-commerce. La page de politique de confidentialité est obligatoire.

Les conditions générales d’utilisation

La page de condition générales d’utilisation est obligatoire, elle est une sorte de règlement de votre site.  Comme la page de politique de confidentialité, elle doit être facilement accessible pour rassurer les internautes et/ou vos futurs acheteurs.

La navigation

navigation et footer

Une partie de votre footer doit être consacré à une liste de navigation. La liste de navigation doit reprendre les principales pages de mots clés. L’avantage est que vous allez mettre en avant à nouveau votre menu pour pousser l’internaute à visiter d’autres pages de votre site. Cela va vous permettre :

  1. Réduire le taux de rebond de votre site
  2. Mettre en avant des autres pages qui ne sont pas forcément sur votre menu.

 

Un espace presse

Très peu de visiteurs de votre site seront des journalistes. Il serait donc inutile de sacrifier une place de votre header pour si peu de personnes. Le footer est donc l’endroit idéal. Cela vous permettre de communiquer les bons messages et votre identité graphique à qui le veut.

Des mots clés pour le SEO

Si vous n’avez pas grand-chose à communiquer sur votre footer, il peut être intéressant de mettre en place des un « nuage de mots », afin de remplir et d’améliorer votre SEO. Mais, attention à trop vouloir optimiser votre site, vous pouvez vous faire pénaliser par Google.

 

Les récompenses et les certifications

Les récompenses et certifications augmentent la confiances des internautes et votre position d’expert. Cet élément peut vous différencier de la concurrence.

 

Témoignages

L’intégration de témoignages dans les pieds de page est un moyen approprié de renforcer la confiance auprès de votre audience.

 

Les derniers articles publiés

Si vous publiez des contenus à intervalles réguliers, la publication du dernier article dans le footer donne une impulsion positive à vos articles. Certains widgets permettent d’avoir la main sur les articles publiés dans le footer.

Les événement à venir

Une bonne façon d’avancer dans votre tunnel d’achat avec les internautes de votre sites est de propose des événements à venir qui pourrait l’intéresser.

Comment créer un footer en HTML

Voici comment mettre en place facilement un footer en HTML :

footer en HTML

Des exemples de footer

Footer Fnac

footer dior

 

Rapprochez-vous d’une agence Web

Si vous avez tendance à suivre tous les tutoriels sur Internet, vous pourriez rapidement commettre l’irréparable. En effet, certaines actions peuvent avoir des conséquences sur votre site Internet même si vous vous focalisez uniquement sur le footer. Vous devez alors vous rapprocher du site https://www.ae2agence.com, il s’agit d’une agence Web à Nantes qui vous proposera toutes les étapes incontournables.

  • Elle pourra alors étudier votre site Internet de A à Z afin de vous partager les avantages ainsi que les faiblesses.
  • Vous pourriez alors travailler sur votre design puisqu’il doit être important, le footer n’est pas souvent regardé contrairement au corps du site et au header.
  • Les conseillers seront en mesure de vous épauler pour le référencement et votre visibilité par rapport aux réseaux sociaux.

Il suffit parfois de quelques améliorations pour réussir à améliorer votre site et cela vous évite de commettre des erreurs qui peuvent être préjudiciables sur le long terme. En effet, il peut mal se positionner sur les moteurs et votre stratégie ne sera pas payante. Vous pourriez même avoir une contre-productivité sans forcément savoir d’où vient le problème. De ce fait, confiez votre site ou la création de ce dernier à une véritable agence.

UX Design : La méthode agile de Google

UX Design : La méthode agile de Google

À notre époque où les ressources sont bridées et les finances limitées, les entreprises sont plus réticentes que jamais à s’engager dans de grands projets de conception sans avoir une compréhension approfondie de leurs chances de succès. Google a développé une méthodologie pour rendre le processus de conception rapide tout en offrant des informations précieuses. Oubliez le MVP (minimum de produits viables) et concentrez-vous sur les prototypes et construisez et testez en une semaine !

Aperçu du processus Google Design Sprint

Le sprint de conception Google fonctionne en 5 phases. Chaque phase dure environ 1 jour (8 heures) et les 5 phases durent environ 40 heures.

Google design sprint

Comme tout bon processus de conception, il y a de la place pour l’itération. En fait, nous vous encourageons fortement à faire des révisions basées sur votre premier sprint, puis à répéter les deux dernières phases (au minimum). Cependant, si vous trouvez que votre idée n’a pas l’effet escompté, vous pouvez aussi reculer plus loin et réitérer à partir de là.

Les 5 phases du Design Sprint de Google :

  • Déballer
  • Croquis
  • Décider
  • Prototype
  • Test

Jetons un coup d’oeil à chaque étape :

Déballer

Le processus Sprint de Google est conçu pour être géré par des équipes plutôt que par des individus. Cela signifie qu’il faut réunir tout le monde et s’assurer qu’ils visent tous la même direction.

L’équipe idéale comprendra des représentants de toutes les fonctions pertinentes et à tous les niveaux de l’organisation, comme les commanditaires, les cadres supérieurs, les spécialistes du marketing, les concepteurs, les développeurs, le service à la clientèle, les ventes, le soutien aux utilisateurs, etc.

Dans la phase de déballage, vous rassemblez tout le monde et « déballez » toutes les connaissances du problème au sein de l’équipe. Il peut être utile de faire appel à un animateur externe pour ces réunions – il peut alors poser les questions nécessaires pour aider les gens à se concentrer et s’assurer que la compréhension est complète sans que personne dans l’équipe n’ait à perdre la face.

Vous pouvez inclure les éléments suivants dans votre événement de déballage :

  • Une présentation par le représentant de la haute direction expliquant pourquoi l’occasion présentée est importante pour l’entreprise.
  • Examens concurrentiels
  • Démonstrations du problème et de toute partie de la solution qui pourrait déjà être disponible.
  • Une description détaillée de la solution proposée
  • Personnages utilisateurs
  • Données analytiques disponibles
  • Les indicateurs de succès (il devrait s’agir d’indicateurs commerciaux utiles et non pas d’indicateurs qui sortent de l’air)

Il est important d’impliquer toute l’équipe dans le déballage. Ne laissez pas un individu ou un groupe dominer la procédure. L’idée est de s’assurer que tous soient sur la même longueur d’onde et vous ne pouvez le faire que si tout le monde est d’accord.

Croquis

Une fois que tout le monde est sur la même longueur d’onde, il est temps de diviser l’équipe et de l’amener à commencer à travailler sur des solutions. La journée de croquis est un effort individuel. Tout le monde (même le PDG) est chargé de trouver une solution détaillée au problème.

utilisation de croquis en ux design

 

Il est préférable de le faire sur papier pour deux raisons :

  • C’est rapide et si les choses ont besoin d’être changées, cela ne prend pas de temps à faire.
  • Tout le monde ne maîtrisera pas les outils d’infographie que vous utiliserez.

Pour la résolution de problèmes particulièrement complexes ou à grande échelle, vous pouvez diviser le problème en « morceaux gérables » et assigner aux gens un morceau plutôt que la totalité du problème.

Le but d’une journée d’esquisse est de faire descendre autant d’idées que possible. Si votre équipe est énorme et que vous allez générer une tonne d’idées. Vous voudrez peut-être allouer une heure à la fin de la journée pour réduire rapidement le nombre d’idées à un nombre plus gérable avant de passer à la troisième journée du sprint.

Décider

Comme vous pouvez vous y attendre, le Decide Day consiste à prendre une décision quant à l’idée (ou aux idées) que vous allez passer à la phase du prototype. Cependant, il y a plus qu’une simple décision à prendre – il s’agit en fait de déterminer comment vos solutions peuvent entrer en conflit avec vos objectifs, vos capacités, vos ressources, vos utilisateurs, etc.

Vous pouvez commencer la journée en énumérant rapidement toutes les hypothèses que vous faites, par exemple :

  • Budget
  • Utilisateurs
  • Capacité technologique
  • Moteurs d’affaires

Ensuite, il est temps de passer en revue chaque idées et d’examiner les conflits qu’elles génèrent (et de choisir les idées pour surmonter les conflits).

Vous devriez avoir un objectif à l’esprit pendant votre examen. Chercherez-vous à mettre en avant une seule grande idée pour le prototypage ou allez-vous choisir, disons, un Top 5 et les faire tous avancer et découvrir quelles idées les utilisateurs préfèrent ? Vous devriez chercher constamment à affiner votre liste et à supprimer les idées qui ne sont tout simplement pas réalisables au début du processus.

Une fois que vous avez l’idée ou les idées, vous réaliserez un prototype – la dernière partie de Decide Day consiste à créer des story-boards pour vos idées. Celles-ci doivent définir chaque interaction avec un utilisateur dans un processus étape par étape. Ceci sera votre spécification pour votre prototype. Vous pouvez également définir une ou deux histoires d’utilisateurs (à la manière Agile Scrums) pour aider à renforcer la spécification.

L’équipe des UX voudra aussi recruter des participants pour le dernier jour de l’examen, le jour de la décision.

Prototype

C’est là que le travail devient sérieux. Vous disposez d’une seule journée pour créer un prototype que vos utilisateurs pourront tester le dernier jour.

Google vous recommande d’utiliser Keynote et les modèles disponibles sur Keynotopia pour construire rapidement des prototypes interactifs. Mais vous pouvez utiliser n’importe quel outil de votre choix. Il vous suffit d’en choisir un que vous maîtrisez suffisamment pour le prototypage rapide.

En tandem, l’équipe de recherche devra finaliser le calendrier des tests et élaborer le scénario d’entrevue pour ce calendrier.

Test

Comme nous le savons tous, l’expérience utilisateur exige la participation de l’utilisateur. Le cinquième jour de votre sprint, vous allez réunir jusqu’à 20 utilisateurs (et pas moins de 6) et travailler en tête-à-tête pendant qu’ils jouent avec le prototype.

Toutes les personnes qui participent à un test devront prendre des notes et exprimer ce qu’elles estiment avoir appris. Vous voulez prendre ces notes et les résumer à la fin de la journée. Cela devrait vous aider à décider ce qui doit être itéré et amélioré.

Bien qu’il s’agisse d’une méthodologie éprouvée par Google, c’est aussi un tout nouveau concept adapté de méthodologies agiles. Cela peut prendre quelques essais au sein de votre organisation pour garder les sprints à 5 jours. C’est pas grave. Vous pouvez travailler à livrer des sprints plus rapides au fur et à mesure que vous vous entraînerez.

Les sprints de conception Google devraient vous aider à prendre un processus qui prend actuellement des mois et à le rendre simple et efficace. Ce n’est pas un substitut à tous les processus de conception, mais un qui vous permet d’idéaliser et de tester des idées incroyablement rapidement. Une équipe de conception très productive travaillant au sprint est plus susceptible d’ajouter de la valeur à l’entreprise et donc d’être reconnue pour son travail au sein de l’organisation dans son ensemble.

 

Design thinking : Le protytpage

Design thinking : Le protytpage

Les prototypes sont le nerf de la guerre pour tout webdesigners qui se respectent, notamment pour trouver le bon ratio entre un travail de qualité et le temps passé surtout s’il faut réaliser plusieurs maquettes. Nous allons voir dans cet article, 2 types de maquette pour votre design thinking.

Les prototypes réalisés dans les grandes lignes

Avantages

 

Le gain de temps et d’argent

 

L’un des principaux avantages de réaliser une maquette dans les grandes lignes est de vous permettre de réaliser cette maquette dans un minimum de temps et donc de réduire les coûts. En effet, en économie, les 3 facteurs du calcul des coûts sont : le temps, l’argent et le coût de production. Or, avec cette méthode vous permettez de réduire le temps et l’argent, ce qui vous permet de gagner de l’argent ou d’en faire gagner à vos clients /entreprises.

Possible de faire des changements immédiats et de tester de nouvelles idées

 

Avec des prototypes réalises dans un concept généraliste, ils pourront vous permettre de faire des changement assez facilement. Par exemple, prenons cette comparaison entre une maquette réalisée dans les grandes lignes et une autre réalisée avec des détails :

 

Encourage & favorise le design thinking

 

Nous avons déjà défini le design thinking, nous allons juste vous expliquer comment les maquettes réalisées dans les grandes lignes vont vous aider dans votre design thinking. Sur l’exemple ci-dessous, on peut voir que les modifications seront plus simples sur la version plus simplifiée, que sur la version détaillée.

 

Inconvénients

 

Peut-être trop abstrait

 

Cette méthodologie a pour principale inconvénient d’être abstraite. Les utilisateurs les plus novices tel que les employés de TPE/PME peuvent être grandement déstabilisés par une maquette créée dans les versions simplifiées puisqu’ils n’auront pas la capacité de se projeter.

 

Un certain manque de contrôle peut être ressenti

 

Certaines personnes ont un besoin irrationnel de pouvoir exercer un contrôle absolu avec leurs créations. Avec une maquette réalisée dans les grandes lignes, le ressenti risque d’être dur à atteindre, car la perception d’un utilisateur à un autre peut changer en fonction de son imagination.

 

Ne peut pas convenir à certains utilisateurs

 

Cette façon de travailler peut déstabiliser, les acteurs n’ayant pas eu une forte culture agile. Cette déstabilisation se transforme le plus souvent en frustration, il est donc primordial pour savoir à qui vous vous adressez.

Les prototypes réalisés avec de nombreux détails

 

Avantages

Fait participer les parties prenantes

 

En posant une maquette détaillée, vous allez pouvoir permettre à n’importe quelle personne de pouvoir se projeter sur votre maquette. Par exemple, un directeur commercial ou marketing sera plus intéressé par le discours et les fonctionnalités mises en avant, alors que le Product Manager sera plus intéressé par une retransmission fidèle de la qualité du produit.

Correspondra mieux aux attentes de votre public

 

Souvent, les PME et TPE n’ont pas eu grande culture digitale (même si elle aime prétendre le contraire). On peut légitiment penser qu’elles en ont encore moins en design, conversion et design thinking.

Permettre une validité et une applicabilité plus importante

 

Une maquette avec beaucoup de détails permet d’aller plus vite en termes de validation. Vous n’aurez pas besoin de passer par de multiples étapes de réunion pour savoir si oui ou non il faut valider cette idée. Dès la première étape vous pourrez valider une version définitive une partie de votre maquette. Cette méthodologie de travail peut être intéressante quand le client met énormément de temps à valider.

 

Inconvénients

 

 Les utilisateurs peuvent être enclin à commenter toutes les caractéristiques inutiles ou superficielles

 

Un utilisateur qui n’est pas au courant de l’état d’avancement et voulant tout contrôler peut-être un frein énorme. Alors que vous être censé être l’expert, cet utilisateur va avoir tendance à tout juger, de la fonctionnalité globale au moindre carré de couleurs.

 

La production sera beaucoup plus longue

 

Faire toutes les caractéristiques d’une page de maquette prend forcément plus de temps de création qu’une maquette faite sans les grandes lignes. Lors de la création d’une maquette dans les grandes lignes, vous aurez juste à vous soucier de votre temps de réflexion. Pour la création d’une maquette faites dans les détails, vous devrez combiner temps de réflexion + temps de réalisation.

 

Faire des changements prendra plus de temps

 

Avez-vous une maquette complète ? Même en rangeant correctement vos calques par dossiers, vous allez forcément passer beaucoup de temps à trouver le bon calque et à le modifier. En plus, avec les différents logiciels, il est possible de mettre en place des componnents qui peuvent vous faire décaler toute une maquette pour un objet qui change de place.

 

 

Les 2 types de prototypages possèdent leurs avantages comme leurs inconvénients. Il est difficile de tirer une utilisation par défaut par rapport à une autre. Pour avancer au mieux dans la réalisation de votre mission, il est nécessaire de faire preuve de pédagogie, de psychologie et de faire comprendre ce qui conviendra le mieux pour la réalisation de votre mission.

10 questions / réponses pour comprendre le Material design

10 questions / réponses pour comprendre le Material design

Les années se succèdent, et les différents designs du web aussi. Skeuomorphisme, Flat Design ou matérial design sont des exemples de l’évolution des designs et des nouveaux styles. Depuis quelque temps, c’est le material design qui se démarque énormément.

Qu’est-ce que le material design ?

Le concept du material design est une innovation apportée par Google en termes de conception graphique et design. Google a apporté différentes marches à suivre ou règles afin de permettre une meilleure interface graphique sur des blog, des sites, des applications mobiles, framework etc… La firme américaine a officialisé son implémentation lors de sa conférence Google I / O de 2014. Le but principal était d’unifier l’expérience utilisateur sur Android, mais en vue d’une large diffusion, ce design s’est étendu à tous les services Google. Quelles sont les lignes directrices du material design ? Si nous devions résumer dans un but de facilité la compréhension, nous pouvons vous présenter plusieurs tâches fondamentales  à respecter :

  • Navigation
  • Densité
  • Couleur
  • Typographie
  • Son
  • Iconographie
  • Forme
  • Mouvement
  • Interaction

L’objectif est clair, c’est un design qui sert à faciliter au maximum la compréhension de l’utilisateur en utilisant les meilleures pratiques de l’expérience utilisateur ainsi que les habitudes de navigation

Comment fonctionne le material design ?

Le matérial design fonctionne grâce au regroupement des meilleures techniques et bonnes pratiques des designers afin de permettre de créer un design centré sur l’utilisateur, agréable et simple d’utilisation.

Exemple d'une composition avec du material design

Frandroid

Il faut prendre en compte de nombreux paramètres pour qu’il puisse fonctionner correctement. Google développeur propose de nombreux points de vigilances pour avoir une cohérence globale du graphisme :

Surface et ombrages

Pour réussir son material design, il faut commencer par la base, la surface (ou le fond). Le but est de faire ressortir certaines couches grâces aux effets d’ombres afin d’ancrer dans l’esprit de l’internaute une certaine hiérarchie de la structure.

Images

Les photos, pictogrammes ou images que vous choisirez doivent impérativement représenter votre produit ou service. Il doit être le plus clair et représentatif dans l’esprit de l’internaute. Inconsciemment, il doit comprendre le site, la page, l’image et l’importance accordé aux éléments notamment grâce à ces effets visuelles. Lorsque c’est possible, réduisez les marges des photos dans l’écran afin que l’utilisateur se sente en immersion totale.

Couleurs

Les couleurs que vous choisirez vont être très cruciales. Elles définiront aussi la hiérarchisation de la page. En effet, s’il ne faut pas hésiter à utiliser des couleurs (3 maximum) elles doivent être placé à des endroits stratégiques pour séparer un fond de couleur d’un bouton d’action par exemple.

Lignes de repères

Google préconise de respecter une grille de référence de 8 DP (Design pressure ou pression de référence) afin de faciliter la compréhension des visuels. Cependant, pour le texte, vous pouvez être bien plus précis en allant jusqu’à l’utilisation d’une grille de 4 DP. Vous l’aurez compris, ces lignes de repères vont être utiles afin d’aligner vos éléments et garder une harmonisation.

Mouvements de transition

Que serait le material design sans ses transitions exceptionnelles. La pertinence de vos choix en termes de transitions d’une page à une autre doit être logique et agréable pour l’utilisateur. Les transitions doivent être compréhensibles en gardant une totale logique avec les habitudes d’utilisation pour permettre un confort de navigation.

Interactions réactives

Les interactions sont différentes des mouvements de transition. Pour le coup, elles sont utilisées pour focaliser le regard sur une action à réaliser. L’interaction peut se modéliser par un bouton d’action pour ouvrir un contenu, pour mettre en avant les relations entre les contenus ( slider / carousel), ou encore un effet pour mettre en avant l’action de l’utilisateur (bouton qui réalise une animation après le clic). La navigation se trouve être bien plus agréable, logique et possède un certain effet d’accompagnement de l’utilisateur dans son expérience.

Quand peut-on utiliser le material design ?

Si ce design si particulier était d’abord et avant tout utilisé pour la création d’applications, certains sites réalisent des prouesses graphiques étonnantes. Si vous avez pour but premier de créer une application en material design, alors vous avez tout compris ! Les applications réalisées avec ce style graphique sont extrêmement appréciées des internautes car, l’expérience utilisateur est au centre de la démarche de création. Si vous pensez donc qu’il ne doit être utilisé uniquement pour des applications.. Et bien vous allez être surpris. En effet, Google utilise aussi bien le material design sur ses applications que sur ses différents sites.

exemple du material design sur 3 types d'écrans différents

ergophile.com

N’hésitez pas à créer des sites avec ce design, mais n’oubliez pas qu’ils doivent quand même être représentatifs de votre cible et de votre marque. En effet, si vous avez un site en material design, il faut que tous vos contenus s’y prêtent. Utiliser un design particulier uniquement pour faire « jolie » ou donner un effet « waouh » s’avère être une grave erreur. Le site web de Waaark par exemple est une réussite totale de la maîtrise du material design. Je vous invite à le découvrir pour comprendre toutes les possibilités sur un site web et faire une comparaison face aux nombreuses applications qui utilisent déjà ce design. Waaark à une connaissance complète du sujet et nous le remarquons dans les animations, les transitions, les couleurs, etc.. Mais tout le monde n’est pas encore bien habitué aux sites créés comme cela. Concrètement, vous pouvez appliquer les principes du material design sur tous vos projets web, mais il faut réaliser un lourd travail d’étude des cibles et de recherche design afin de satisfaire les besoins de sa cible pour permettre une navigation optimale.

Comment utiliser le material design de façon optimale ?

Google est très fier de son travail : « Nous nous sommes surpassés pour créer un langage visuel pour nos utilisateurs qui allie les principes reconnu d’un bon design avec l’innovation et le potentiel de la technologie et de la science. Voici le Material Design » Pour utiliser ce design de façon optimale, il est nécessaire de prêter attention à 2 grands axes :

L’apprentissage du material design et sa compréhension

Dans un premier temps, si vous débutez, vous avez besoin d’approfondir vos connaissances du sujet avec de nombreuses ressources et notamment grâce à l’application de Google « material.io » qui permet d’apprendre, de tester et de créer. Via l’application material.io, vous aurez accès à