Design d'UX adaptatif et intelligent : astuces, conseils et techniques ingénieux

1. Introduction: Alors, bonjour là. J'espère que vous avez pris un café aujourd'hui parce que ça va être un voyage. Donc, j'aimerais vous emmener dans un voyage pour des modèles de design réactif et intelligent et ça va être assez amusant. m'appelle Vitaly et je suis rédacteur en chef et Smashing Magazine sur le magazine pour les concepteurs et les développeurs, et au cours des dernières années, j'ai fait beaucoup de travail pour design responsive était petit et grand appareil. Je cherche toujours des modèles de conception spécifiques de problème de poursuite, nous pouvons réellement les résoudre d'une manière, qu'ils peuvent appliquer plus tard à mon travail. En tant que rédacteur en chef, je gère évidemment cette mesure elle-même, c'est juste un site Web, ce n'est pas beaucoup. Plus pseudo silhouette de cette façon de simplement voir un site Web. Mais nous, scientifiques et développeurs, voyons peut-être cela différemment, et nous voyons beaucoup de boîtes partout, et notre travail est essentiellement de simplement déplacer ces boîtes pour nous assurer que nous avons créé un site Web, qu'il évolue comme nous le voulons. Maintenant, ce n'est pas facile bien sûr, mais c'est encore plus difficile site Web, est plus difficile. C' est comme une myriade de boîtes de petites à grandes tablettes à écran donc, évidemment les entrepreneurs. Il ne s'agit pas seulement d'écrans, s'agit aussi de la façon dont les gens interagissent réellement avec nos interfaces. Donc, c'est une grosse affaire. Maintenant, cet atelier n'est pas à ce sujet, cette eau n'était pas à propos de boîtes. Je ne m'en fiche pas vraiment, mais pensez à un design réactif ayant une vue d'ensemble boxy, nous sommes juste en forme. Cette classe n'est pas non plus sur les tendances de la boîte, parce que vraiment les tendances viennent et vont, mais elles ne restent pas vraiment. Donc, pour moi, c'est en fait vous donner quelques idées pour les réflexions de résultat sur ce que vous pouvez appliquer à votre travail au-delà de cela sur le dessus. Il ne s'agit pas non plus de cadres comme dépouiller les choses et s'assurer qu'elles fonctionnent, mais plutôt d'idées et de techniques réelles. Droit. Depuis que je montre travailler ou échouer dans de vrais projets et pourquoi ? Il est aussi sur les modèles de conception droite. Quelles sont les choses que nous pouvons réellement aller de l'avant et appliquer à notre travail alors que nous produisons réellement des résidus de cultures ? La plupart des choses que je vais montrer sont un peu dingues, vous pourriez ne pas aimer la plupart d'entre elles. Ils peuvent sembler ou avoir l'air qu'ils sont bizarres et hors de leur place parfois. Ils aussi parfois assez complexes et inhabituels. Vous ne rencontrez peut-être pas ce problème tout le temps, mais vous risquez de rencontrer des problèmes similaires et une fois que vous le faites, vous saurez exactement quoi faire et comment faire face. Cela va être beaucoup de plaisir, nous allons d' abord examiner le disciple réactif, non réactif, grande perspective et ensuite nous plongerons dans ces petites composantes moléculaires et nous allons penser à quelques façons intéressantes comment faire les choses correctement. Attachez votre ceinture de sécurité, ça va être un voyage. 2. PROJET: D' accord. Alors que la conception de quelques composants est une chose, mais en fait les assembler dans l'interface est une histoire entièrement différente. Maintenant, en fait, vous ne pouvez pas juste aller de l'avant et prendre, concevoir une table ici et peut-être choisir la typographie ici, et peut-être quelques boîtes lumineuses là-bas, et descendre ici, puis la mettre complètement et l'appeler un design. Maintenant, ce n'est pas vraiment du design. C' est plutôt comme assembler les choses. Le design a besoin d'une grande image. Vous devez savoir où vous allez visuellement et aussi en termes de mise en page, n'est-ce pas ? Donc, cela nécessite un peu plus de travail. Maintenant, nous pouvons examiner tous ces composants dont nous avons parlé individuellement, mais vous devez savoir, nous devons savoir exactement comment les rassembler dans un contexte donné, non ? Alors, et si nous regardons de plus près l'interface plus complexe, non ? Ou peut-être juste un exemple d'interface complexe vraiment. Et si on pense vraiment à une interface comme celle-ci, non ? Une mise en page d'article, une mise en page de type magazine. Donc, ce que nous avons ici est une belle mise en page que j'ai choisie, et cet article que j'ai choisi, qui est l'art dirigé. Donc, il y a beaucoup de choses qui se passent, non ? Mais si vous y pensez de près, eh bien, il y a peu de composants, non ? Mais plus spécifiquement, eh bien, ils sont répétés encore et encore. En outre, il y a des sections plus ou moins complexes bien sûr, mais vous trouverez beaucoup d'illustrations. Vous trouverez beaucoup de citations complètes, vous trouverez beaucoup de tous les différents petits composants qui composent réellement l'interface. Alors, et si on les regarde ? En fait, si vous les regardez et de ce côté sur cette page, ce que vous découvrirez, eh bien, il y en a 26, non ? Donc, simplement en recréant cette page, nous pouvons apprendre beaucoup de quoi, comment mettre tous ces composants, ou explorer tous les modèles de conception dont nous allons parler au cours des prochaines sections. Tirez-les ensemble en une seule pièce. Nous avons navigation, topographie, images dirigées par l'art, illustrations, graphiques, graphiques, graphiques, citations, notes de bas de page, éléments médiatiques, biographie, articles connexes, boîte à newsletter, unités publicitaires, boîtes promotionnelles, boîtes promotionnelles, Je manque d'air, d'accord ? Donc, c'est beaucoup. Alors, que se passe-t-il si nous prenons cela et examinons les différents composants qui le composent, et essayons de les concevoir, les coiffer et de les assembler. Peut-être les réorganiser, les regarder spécifiquement à tous les différents détails qui les composent, puis les assembler dans une seule interface. Peut-être que cela va sembler similaire et peut-être que ça va sembler très différent, mais le fait est que ce sera notre expérience et notre exercice pour mettre toutes ces choses que nous allons explorer et trouver un moyen de les faire fonctionner. Alors, faisons ça. 3. Que sont les modèles de conception ?: Modèles de conception. Maintenant, quand on parle de modèles de design , ils n'ont pas vraiment une bonne réputation dans la communauté. Lorsque nous pensons à des modèles de conception, nous avons tendance à penser à des solutions paresseuses, ou à des composants hors plateau si vous le souhaitez. Vous le prenez juste de l'étagère, vous l'appliquez à votre projet. Parfois, nous pensons au contexte que nous avons, et vous appelez le jour. C' est à peu près tout, pas vrai. Eh bien, ce n'est pas tout à fait ce dont j'ai parlé lorsque nous parlons de modèles de design dans cette session. Nous appelons aussi la chose célèbre humble type de parallaxe et le design d'une seule page est un motif. Mais pour moi, ils ne le sont pas. Ils ressemblent plus à des tendances, et les tendances n'ont pas vraiment d'importance, mais les techniques le font. Donc, quand nous parlons de modèles ici, nous parlons de techniques de conception intelligentes et utiles qui ont fait leurs preuves dans des projets réels. Donc, ces techniques ne sont pas vraiment un point final sûr à l'épreuve des balles d'un design. Voyez-les plus comme une conversation de conception ou comme un démarreur, un démarreur de conversation de conception. C' est quelque chose que vous commencerez avec pour vous appuyer. Donc, vous prendriez effectivement l'une de ces solutions , puis vous penserez sur les façons de l'appliquer. Construisez dessus et appliquez-le à votre projet. Donc, ils ne sont jamais une sorte de solutions de finition, mais plus comme une idée sans forme que vous devez cultiver, que vous devez façonner, que vous devez former, et les donner à la vie. Maintenant, Mark Boulton a dit une fois que le processus de conception est bizarre et compliqué parce qu'il implique des gens et des organisations, qui sont souvent bizarres et compliqués. Eh bien, pour être honnête, dans beaucoup de projets sur lesquels je travaillais, c'est exactement le problème parce que les gestionnaires, les gens avec qui je travaille sur les projets ont en fait une vision très standard ou classique de la réactivité fonctionne, et pour être honnête comment un processus créatif fonctionne en général. On dirait bien ça. Où vous avez un début quelque part, et vous avez une fin quelque part, puis suivez simplement vos itérations, et vous suivez juste, à droite. C' est très linéaire. C' est très prévisible. Mais ce n'est pas du tout comme ça dans la réalité, n'est-ce pas. Parce que la réalité semble très, très différente. Pour moi, c'est plus comme une série méticuleuse de sprints où vous commencez quelque part et où vous commencez à explorer, et vous divergez, et vous comprenez peut-être que je devrais le faire, ou peut-être que je devrais le faire. Peut-être que ma table devrait ressembler à ça. Je fais ma mise en page ressemblera à ceci, et ainsi de suite, et ainsi de suite, à droite. Donc, vous allez vraiment de l'avant et explorer, et vous trouvez ce qui fonctionne le mieux en fonction de vos besoins. Puis, à un moment donné, vous finirez avec des points morts, des impasses. Eh bien, il n'y a aucun moyen à partir de là. Peut-être que quelqu'un a tué votre idée, peut-être qu'elle est morte silencieusement dans une salle de réunion ou autre. Mais tu dois repenser. Vous devez penser à différentes façons d'aborder le même problème, et c'est là que je sens que vous perdez plus de temps, et parce que je veux être efficace, je ne peux pas me permettre de perdre du temps. Donc, c'est exactement le point où ces modèles de conception peuvent être extrêmement utiles parce que vous pouvez savoir, ok, dans cette situation, ce modèle spécifique, cette solution spécifique pourrait bien fonctionner. Je ne vais pas l'appliquer un à un. Mais étant donné le contexte que j'ai, je pourrais essayer de trouver un moyen de l'implémenter d'une manière appropriée afin que cette phase d'exploration n'ait pas à prendre autant de temps, n'est-ce pas. Donc, vous pouvez vous déplacer d'ici vers quelque chose, un meilleur endroit où vous pouvez réellement facilement venir, puis converger vers l'idée finale. C' est pourquoi, quand nous commençons à concevoir très souvent. Nous allons en fait dans vos magasins comme Styleguide Boilerplate modèle tableur qui énumère réellement tous ces différents composants un côté et tous les différents cadres de l'autre côté. Donc c'est génial pour le prototypage parce que vous pouvez juste aller de l'avant et regarder, d'accord, peut-être que j'ai besoin de sélecteur d'occurrences et vous n'avez pas besoin d'écrire à partir de zéro. Droit. Vous pouvez simplement le prendre et l'apporter dans votre projet, dans votre conception, dans votre code, et vous l'avez, juste. L' évidence n'est probablement pas ce que vous allez utiliser lorsque vous commencez à concevoir ou à construire. Mais c'est vraiment génial pour le prototypage d'être rapide. Donc, c'est une sorte de modèles de conception dont je parle. Quelque chose de nu, quelque chose pour avoir besoin de former et façonner et que vous construisez quand vous commencez. Maintenant, au cours des prochaines sections, nous allons couvrir beaucoup de segments différents de différentes zones, et nous allons commencer par la navigation, et nous allons passer par différents types de navigation, iconographie, accordéons, tableaux et calendriers, formulaires, éléments d'entrée. Eh bien, formez des éléments en général, des calendriers , des graphiques et des graphiques, des cartes , des notes de bas de page, etc. Plus nous allons, plus certains de ces composants seront difficiles ou complexes. Mais en fin de compte, tout cela aura du sens parce qu'ils ne sont pas vraiment si difficiles. Alors, passons à autre chose, et continuons avec la navigation. 4. La navigation: Étonnamment, rendre le contenu accessible et disponible sur tous les écrans est vraiment, vraiment difficile, et ce n'est pas seulement le problème de mise en page. C' est aussi une question de ce que vous mettez, où et comment vous présentez la navigation. Parce que vous pourriez avoir six, sept, huit méga listes déroulantes en vue large, mais qu'est-ce que vous allez en faire dans une vue plus petite ? Maintenant, c'est toujours un problème. Maintenant, il y a des bureaux établi paradigme de contenu de la parité de contenu, qui régit la conception réactive de toute façon, ce qui dit, eh bien, vos utilisateurs vont faire ce qu'ils veulent faire fondamentalement. Chaque fois que quelqu'un vient à vous et dit que vos utilisateurs ne vont pas faire X, ou utiliser cette fonctionnalité, ou lire cet article, ou besoin de cette partie spécifique de la conception, eh bien, toujours demander les motifs parce que vous ne savez jamais. Les gens peuvent faire ce qu'ils veulent et ils le feront. Donc, c'est pourquoi cette parité de contenu est réellement répandue. Cela ne veut pas dire que l'expérience sera identique et qu'elle sera la même partout. Vous ne pouvez pas avoir autant de contenu, autant de navigation à la fois sur le bureau et sur un petit écran, mais vous pouvez, et vous devez vous assurer que tout le contenu, et toutes les fonctionnalités sont accessibles sur les deux. Donc, peut-être que vous pouvez réellement montrer la grande vue de navigation complète, mais peut-être que nous pouvons également utiliser la divulgation progressive, ou des accordéons, ou simplement cacher les choses derrière le lien dans une vue plus petite aussi. Maintenant, une mauvaise façon de le faire serait aller de l'avant et de prendre la navigation que vous avez sur le bureau, et de le traduire presque un à un pour s'assurer qu'il ressemble plus ou moins le même sur mobile et cela fonctionne exactement de la même façon sur mobile. Maintenant, nous avons un site Web Middlesex-London Health Unit et c'est en fait ce qu'ils font, où ils ont la navigation principale en haut, la navigation globale, et vous avez des sous-listes déroulantes, et vous avez aussi des recherches, et vous avez également évidemment un contenu de navigation régulière éléments liés, et ainsi de suite et ainsi de suite. Donc, ce qu'ils font dans la vue plus petite est en fait montrer à peu près tout. Vous avez toujours cette navigation globale en haut, vous avez un gros logo, et ensuite vous avez vos listes déroulantes parce qu'avec quelques listes déroulantes muettes, bizarres ou mystérieuses ici. Mais, alors ils ont aussi une sous-navigation en haut ou en bas, désolé, et si vous cliquez dessus, il est en fait étendu, et ensuite vous avez une barre de recherche aussi. Maintenant, c'est juste beaucoup trop de navigation, vous n'avez pas besoin de beaucoup de navigation du tout parce que évidemment la façon dont les gens interagissent avec l'appareil est différente sur le bureau et sur mobile. Sur le bureau, eh bien, vous avez beaucoup de cliquer, sur l'appareil mobile alors que vous pourriez vous retrouver avec beaucoup de balayage et de défilement vers le bas. Donc, ce que vous pouvez toujours faire est évidemment de prioriser. C' est ce que fait le WWF. Eh bien, évidemment, ils ont beaucoup de contenu à montrer comme des projets connexes, des nouvelles, et tous les différents projets sur lesquels ils travaillent. Mais, plus précisément, ils ont beaucoup d'archives de toutes les années. Donc, chaque chose qu'ils ont dans la navigation est une liste déroulante : Espèces, Lieux, Menaces, Notre Travail, etc. Mais, au lieu de les montrer tous dans un énorme accordéon, ils donnent la priorité. Bien qu'ils le font à la place est en fait avoir deux liens, boutons d'appel à l'action qui mènent effectivement à un don, un don, et l'adoption. Ensuite, ils ont aussi l'infâme icône de hamburger dans le coin supérieur droit, qui glisse simplement dans les sections de navigation primaires, pas tout, mais seulement le primaire. Donc, quand vous y arrivez, vous pouvez réellement naviguer plus loin. Si la réduction de la complexité qu'ils avaient était huit listes déroulantes dans quelque chose de beaucoup plus gérable. Maintenant, le off-canvas lui-même, ce n'est pas toujours une bonne idée avoir cela parce que quand vous finissez avec la navigation hors toile, vous vous retrouvez toujours avec beaucoup d'éléments secondaires cachés dans ce tiroir et ils ne sont pas nécessairement utilisé. Alors, réfléchissez deux fois à ce que vous mettez vraiment là. En fait, ce que nous essayons de faire ces dernières années, c'est en fait essayer de déterminer ce que nous pouvons faire pour donner la priorité à ces questions. Donc, nous fournissons une recherche elle-même en premier, et la rendons aussi bonne que possible, et nous avons essayé d'exécuter des tests pour comprendre si les utilisateurs en ont réellement besoin ? Est-ce qu'ils l'utilisent ? Sont-ils bien avec la recherche seule sans navigation complètement ? Habituellement, bien sûr, ils ne le sont pas, donc nous ajoutons une couche de navigation, puis si c'est toujours le même, nous ajoutons la deuxième couche de navigation. Donc, nous pensons toujours à la navigation comme des couches d'oignon et vous ajoutez plus que si vous avez besoin, alors nous n'avons jamais eu à avoir plus de deux couches. Donc, cette icône de hamburger est évidemment partout, mais ce que nous avons aussi découvert c'est que les gens utilisent l'icône de hamburger dans des scénarios très différents. Maintenant, comme les options de navigation ne sont pas disponibles lorsque vous accédez au site, ce que nous remarquons maintenant est le test de capacité est que les gens vont réellement utiliser cette icône afin d'obtenir des informations sur le sujet du site Web. Mais, au lieu d'entrer dans une section dans le tiroir, ce qu'ils font à la place est en fait simplement l'ouvrir et la fermer à nouveau. J' ai juste l'idée de ce que c'est. Donc, ce modèle que Star Wars utilise en fait, quand vous avez réellement l'icône de hamburger et hors-toile, puis la navigation glissant de gauche à droite, eh bien, c'est très pratique. Mais, nous pouvons le faire un peu mieux si nous nous assurons juste que chaque fois que vous cliquez sur cette icône, vous avez toujours le bouton X ou l'icône X, ou autre, pour le fermer immédiatement. Juste un peu mieux. Maintenant, l'icône du hamburger lui-même, il y a eu beaucoup de discussions à ce sujet, mais surtout, il est vraiment important de garder à l'esprit que tout le monde ne le comprend pas. En outre, chaque fois que vous mettez une icône dans votre interface et que vous masquez certaines actions importantes derrière elle, vous risquez de vous retrouver avec un faible taux d'engagement. C' est probablement arrivé dans presque tous les projets sur lesquels nous travaillons, donc vous devez être très prudent là-bas. Time.com est le meilleur exemple pour cela où ils ont réellement ajouté l'icône et ils ont remarqué que la conversion réelle a diminué et les clics ont diminué, donc ils ont ajouté le menu de texte pour expliquer ce que c'est parce qu'ils sentaient peut-être les gens je ne comprends pas ce que c'est et ça n'a pas vraiment changé. Ensuite, ils ont ajouté une superposition expliquant ce que signifie cette icône et cela n'a toujours pas beaucoup changé. Parce que lorsque vous cachez quelque chose derrière une icône, vous ne devriez pas vous demander pourquoi les gens arrêtent de cliquer. Donc, à la place, ce que nous pouvons faire est comme le suggère Luke Rublevka, icône du hamburger n'est pas enfin reconnue, alors peut-être juste utiliser Menu à la place pour vous assurer que c'est clair. Gardez les actions importantes visibles, non derrière une icône avec un menu d'étiquette clair et une forme de bouton de danse claire. Si vous avez besoin d'utiliser l'icône de hamburger, vous pouvez réellement l'utiliser de cette façon où il peut réellement flotter sur la droite, gauche lorsque vous faites défiler le site Web. Donc, il est toujours disponible, mais ce n'est pas vraiment gênant. Donc, c'est plutôt cool. Mais, aussi le plus important, le modèle le plus utile que nous continuons à utiliser tout le temps est celui que nous appelons menu plus modèle de recherche. Peu importe le niveau de navigation primaire que vous avez, et peu importe la complexité de votre interface au sein de votre site Web. Peut-être que vous avez des onglets et de l'accordéon, peut-être tout mélangé. Ce que vous pouvez toujours faire est de le ramener à ce menu simple et vue de recherche, où vous avez le menu et peut être hors toile si vous avez beaucoup d'éléments, ou il pourrait simplement glisser entre le logo et le contenu si c'est juste cinq ou six. Ensuite, vous avez la recherche, puis vous autorisez les gens à rechercher. Quoi que vous ayez à l'intérieur de votre interface, eh bien, vous pouvez simplement changer d'orientation parfois, si c'est des onglets, cela pourrait encore être des onglets. Ensuite, l'accordéon horizontal, il va être transformé en accordéon vertical. En fait, l'accordéon est en fait la balle d'or dans de nombreux scénarios. Si vous ne savez pas quoi faire, essayez l'accordéon. Pour une raison étrange, il fonctionne toujours presque partout. Une autre chose courante à garder à l'esprit est que chaque fois que vous avez ce hors-toile, vous finissez toujours avec cette gamme inconfortable parce que vous pouvez montrer certains articles, peu près tous les articles en grande vue, mais vous ne pouvez pas montrer beaucoup d'éléments dans la vue plus petite, alors que se passe-t-il entre les deux ? Entre les deux très souvent, vous finissez par ne rien montrer, même si vous le pouviez. Alors, et si vous utilisez réellement cet espace disponible de manière significative, et c'est ce que fait le Guardian. Maintenant, The Guardian a 13, 14 éléments qui sont affichés en grande vue et puis ils ont eu cet ancien bouton. Vous pouvez également cliquer, puis obtenir des informations sur toutes les autres options de navigation que vous avez. Mais, ils donnent la priorité à ce qui est important, ce qui génère plus de trafic vers eux et ces éléments sont répertoriés de gauche à droite en fonction de ces priorités de trafic. Donc, les plus importants sont les sections fortement utilisées sont toujours disponibles, et ils peuvent montrer autant qu'ils peuvent, quand ils le peuvent et si vous avez besoin de montrer pour voir tout le reste, vous pouvez réellement voir tout le reste. C' est en fait la même chose que Google fait. Google Docs, parce que ce serait bizarre de montrer quelques icônes d'abord, puis d'avoir une icône de hamburger pour les montrer tous, il n'a tout simplement pas de sens. Donc, cela fonctionne très bien. La dernière chose qui peut réellement fonctionner assez bien est peut-être de penser à des navigations plus complexes comme celle-ci, où vous avez beaucoup de filtres, ce qui pourrait vraiment fonctionner ici est en fait de regarder dans le que vous devez concevoir, dans ce cas quelques filtres pour peut-être un site de commerce électronique. Essayez de regarder le contenu seul, extraire le sens et de le reconcevoir. Donc, si vous pensez à ça, eh bien, vous pourriez avoir quelques filtres, peut-être que c'est une taille, peut-être que c'est une marque, peut-être que c'est la couleur, des choses comme ça. Donc, vous pouvez réellement le séparer en morceaux, en onglets, et les présenter en bas, trois d'entre eux afin que les gens chaque fois que vous cliquez dessus, ils peuvent en fait obtenir peut-être trois, quatre éléments à la fois et ils peuvent naviguer avec eux. C' est juste beaucoup plus logique. Une autre chose qui peut réellement fonctionner très bien dans ces scénarios est cette approche en mode vue, qui l'emmène un peu plus loin. Eh bien, l'idée est d'utiliser un motif off-canvas, mais aussi avec cette approche en mode vue lorsque vous pouvez réellement avoir des vues encapsulées. Donc, vous avez le contenu à l'arrière et en même temps avoir une couche de la navigation sur la droite, ou sur la gauche, bien sûr, en fonction de votre conception. Ce qui peut fonctionner étonnamment bien dans de nombreux scénarios, ici c'est fait sur la décomposition du cancer, où vous avez en fait quelques éléments de navigation et il peut naviguer facilement et voir le contenu en même temps. Vous pouvez, bien sûr, avoir aussi dans des scénarios plus complexes comme dans une caisse ici, où ici sur cottonbureau.com si vous voulez ajouter un article au panier et que vous voulez vérifier, vous ne vérifier et tout est à nouveau hors toile dans ces vues encapsulées. Cela peut être très utile. Alors, qu'est-ce qu'on peut faire ? Eh bien, nous pouvons penser à la navigation dans les couches d'oignon, ajouter la recherche d'abord, penser à la navigation primaire , la navigation secondaire, peut-être des accordéons, des choses comme ça , mais jamais, probablement pas une bonne idée se déplacer au-delà du troisième niveau de navigation. Gardez les boutons fermés et ouverts au même endroit, sorte que chaque fois que les utilisateurs cliquent sur l'icône pour ouvrir le tiroir, ils peuvent effectivement le fermer immédiatement. Si vous avez beaucoup d'éléments affichés dans la navigation, pensez à ce menu et modèle de recherche avec off-canvas. Ça fonctionne à peu près partout. Dans le même temps, nous pouvons l'étendre à la priorité plus modèle, ce qui est en fait encore mieux étant donné que vous pourriez avoir un appel à des boutons d'action vraiment importants, par exemple, un appel à des liens d'action qu'ils ont besoin de garder partout. Ils ont quelques éléments que vous pouvez simplement glisser dans le contenu avec le bouton de menu entre le logo et le contenu. C' est vraiment une bonne idée de garder les actions importantes visibles et si vous avez une navigation très complexe, vous pourriez envisager d'avoir quelques onglets, essayez de simplement réduire cette complexité que vous avez dans quelque chose plus gérable, à des morceaux gérables. Aussi, parce que nous avons des écrans plus grands, pensez que les contrôles sont accessibles en bas de votre écran mobile, pas nécessairement en haut parce que parfois ces contrôles supérieurs peuvent être vraiment difficiles à frapper, tandis que les bas sont beaucoup, beaucoup plus faciles à frapper. Avec cela à l'esprit, vous pouvez réellement créer une sorte de navigation qui fonctionne remarquablement bien sur différents écrans et ne fait pas sentir l'interface bondée. Maintenant que nous avons une idée de ce qu'il faut faire de la navigation, nous pouvons passer à quelques petites icônes et nous assurer qu'elles sont aussi réactives. 5. Les icônes: Maintenant, dans la section de navigation, nous avons parlé de l'icône de hamburger et puis certaines personnes pourraient ne pas vraiment savoir ce que cette icône signifie. Ainsi, la sélection d'une icône compte beaucoup. Mais ce qui compte aussi, c'est la façon dont vous affichez cette icône, n'est-ce pas ? Et c'est là que le concept de l'iconographie réactive entre en place. Parce que chaque fois que vous parlez réellement à un concepteur de ce qu'il pensait réellement lorsqu'il conçoit ou conçoit une icône, parlera toujours du point doux, cette zone où il a choisi pour concevoir le d'abord. Pas étonnant alors si vous décalez cette icône ou réduisez l'icône, elle n'a pas l'air aussi nette ou aussi bonne, n'est-ce pas ? Donc, juste parce qu'une image est évolutive, cela ne signifie pas qu'elle sera lisible, et la plupart des éléments visuels ont cette flèche parfaite, taille parfaite pour laquelle ils ont été conçus. Non seulement les icônes, mais à peu près tous les éléments visuels. Donc, en gardant cela à l'esprit, nous pourrions avoir besoin d'envisager de le faire, non ? Genre d'ajuster les choses le niveau de fidélité pour nos icônes en fonction de l'écran de clôture ou de la hauteur. Maintenant, vous pourriez penser que ce n'est pas vraiment nécessaire dans de nombreux scénarios comme pourquoi créer six, sept illustrations différentes afin créer une sorte d'expérience unique pour tous ces écrans ? Eh bien, vous n'en avez peut-être pas besoin pour tous ces visuels, toutes les icônes, mais il y a un cas d'utilisation spécifique avec devenir vraiment, vraiment important, et c'est l'image de marque. Parce que très souvent, vous avez un logo occupant beaucoup d'espace, prenant vraiment de l'espace de pression précieux sur un appareil mobile, le réserver pour quelques bons matériaux ne veulent pas vraiment faire attention, parce qu'ils sont venus pour le contenu, droit ? Alors, qu'est-ce que tu fais ? Eh bien, vous pourriez vraiment ajuster le niveau de fidélité. Peut-être que vous avez trois vues différentes ou trois conceptions différentes pour votre logo, puis vous décidez quand mettre quoi, afin de réduire la quantité d'espace nécessaire pour afficher le logo. Donc, poussez le contenu vers l'avant afin que vous puissiez toujours le voir mieux. En fait, de nombreux scénarios, vous pourriez penser, eh bien ce genre de réduction de logo est vraiment difficile parce que vous perdez beaucoup de détails et le logo est vraiment important pour une marque, mais dans de nombreux cas, ce n'est pas que difficile du tout, car en fait, plus vous simplifiez, plus il devient intemporel, et il va toujours être reconnaissable, comme vous pouvez le voir dans ces scénarios. Quelles sont donc les techniques pratiques que vous pouvez utiliser lors de la conception de ces logos ? Eh bien, vous pouvez penser au niveau de détail, vous pouvez penser à l'épaisseur des lignes, ou vous pouvez penser aux textes ou aux contours du texte, ou ce qui est exactement mis et comment vous le concevez, le texture et des choses comme ça. Vous pouvez également penser à la position, et à la structure. Donc, si vous avez une icône et que vous avez un texte en dessous, vous pouvez réellement l'examiner et repositionner certains des éléments afin qu'ils n'occupent pas autant d'espace vertical. Aussi bien sûr, nous avons quelque chose comme un texte circulaire entourant votre logo. Eh bien, cela ne va tout simplement pas fonctionner dans les petits écrans, sorte que vous pouvez en fait tout aussi bon simplement l'enlever et essayer de le rendre un peu plus simple, et aussi plus mémorable, et la façon dont vous conceviez pour le construire plus tard, vous venez de mettre différentes icônes à l'intérieur de SVG lumineux et potentiellement simplement utiliser quelques repères médiatiques à l'intérieur de SVG pour cibler des écrans spécifiques pour concevoir des écrans spécifiques. Maintenant, c'est ce que nous pouvons faire avec l'icône réelle mais vraiment nous devons penser à la position un peu plus, parce que dans cet exemple vraiment simple ici, ce que je peux faire vous choisir, mais aussi où le mettez-vous ? Donc, si vous avez quelques accordéon, donc si vous sous-déposez, allez-vous mettre l'icône à droite ou à gauche du texte ? Ou quelle icône choisiriez-vous, utiliseriez-vous un plus ou une flèche vers le bas vers le bas vers la droite ? C' est un peu important. La bonne nouvelle est que les gars qui dirigent l'étude ont compris que presque tout le monde comprend ce que cela signifie, donc vous pouvez avoir un texte à gauche, droite, des icônes à gauche et à droite. Les gens l'obtiennent, mais les gens cliquent sur différents domaines. Donc, la carte thermique va être très différente selon l'endroit où vous placez votre icône et pas seulement la carte thermique, mais aussi le temps réel d'achèvement de la tâche sera différent aussi, et nous ne parlons pas de quelques 100 millisecondes. Ici, la différence est d'environ 1,5 seconde entre celui qui a le plus de temps ou le moins de temps, donc c'est vraiment important. Alors, qu'est-ce qu'on fait ici ? Eh bien, ce qu'on découvre est que la façon dont l'icône placée sur la droite est qu'elle aura juste tendance à cliquer sur l'icône et non sur le texte, maintenant c'est vraiment important, et toutes les options avec des icônes placées sur la droite ont entraîné une tâche plus lente achèvement, bien que cela ne signifie pas que ça va, ne va pas fonctionner dans nos scénarios, aussi bien que, désolé. Ce que cela signifie, c'est que chaque fois que nous mettons réellement une icône sur la droite, nous ferions mieux de nous assurer que c'est vraiment, vraiment grand, parce que sinon les gens ne pourront pas cliquer dessus. Nous pouvons également bien sûr changer l'épaisseur réelle et les styles en survol et vraiment le réajuster de manière très granulaire, et c' est ce que nous pouvons faire aujourd'hui sans avoir à passer beaucoup de temps dans le code. Donc, ce sont toutes les options que nous avons pour faire apparaître nos icônes un peu mieux. Alors, qu'est-ce qu'on peut faire ? Maintenant, nous pouvons simplifier les icônes pour une apparence claire, pour les rendre vraiment mieux et plus nettes. Nous pouvons économiser de l'espace vertical en utilisant cette petite astuce où nous repositionnons une partie du logo, sorte qu'il n'occupe pas autant d'espace vertical. Des zones spécifiques, surtout si nous savons que les utilisateurs vont se concentrer sur l'icône comme ils le font dans les sous-listes déroulantes, quand ils sont placés dans la droite, choisissez des icônes plus grandes pour qu'elles soient plus faciles à toucher, et évidemment nous besoin de choisir une icône en fonction du contexte droit. Et potentiellement même éviter les icônes tout à fait si nous le pouvons, si nous avons besoin d'avoir quelque chose d'un peu plus clair comme le menu au lieu d'un hamburger. Droit. Ce sont donc les choses que vous pouvez faire pour rendre vos icônes un peu plus réactives, pour s'assurer qu'elles fonctionnent et sont belles partout. Maintenant, que nous avons réellement traité des visuels, peut-être que nous pouvons passer à la structure et parler de quelque chose d'aussi chic que les tables, ensuite. 6. Les tableaux et les calendriers: Les métaux de structure aussi bien, bien sûr. Maintenant, nous avons parlé de conception visuelle, nous avons parlé de navigation et il y a des moyens de remanier le contenu dans une mise en page pour s'assurer qu'il fonctionne, mais certains composants sont tout simplement plus difficiles à aborder. Pensez aux composants avec des relations fermes comme les tables ou les calendriers. Vous ne pouvez pas aller de l'avant et les déplacer et les presser dans peu d'espace. Vous devrez peut-être repenser entièrement la façon dont vous présentez le contenu qui reste réellement dans votre table ou dans un calendrier. Le problème est très souvent les tables semblent horribles et fonctionnent horribles sur les écrans mobiles. Vous devez zoomer et zoomer tout le temps et vous ne pouvez pas voir toute la table et c'est vraiment, vraiment ennuyeux. Alors, comment traitons-nous avec eux ? Maintenant, il y a une solution simple. Le fait est que vous n'avez pas nécessairement besoin de montrer toutes les colonnes de votre table tout le temps, non ? Donc, en tant que concepteur, vous pourriez décider d'accord , dans ce scénario spécifique, je vais prioriser ces colonnes. Je vais détecter ce qui est important et je vais le pousser à l'utilisateur et leur permettre de sélectionner réellement ce qu'ils veulent voir. Donc, peut-être qu'ils ne veulent pas tout voir à la fois de toute façon. Donc, laissez-les choisir ce qu'ils veulent voir et s'ils veulent tout voir bien, alors vous pouvez vraiment le faire. Ensuite, vous aurez cette expérience iframe que nous voulons éviter. Mais par défaut, nous prenons réellement des décisions sur le nombre de colonnes qui seront affichées et cette expérience sera pleinement réactive. Ils vont étendre cet exemple en ayant un bouton d'affichage tout et un bouton d'affichage. qui le rend un peu plus facile pour l'utilisateur peut-être de naviguer réellement dans la table et ce que j'aurais probablement juste été activé par défaut, est le mode appelé focus. Où vous pouvez simplement aider l'utilisateur à taper sur une ligne spécifique ou une colonne ou une cellule peut-être, et mettre en évidence la zone où ils sont réellement. Parce que surtout si vous voulez voir toutes les colonnes, vous pourriez finir dans cet énorme océan de données que vous devez parcourir et vous risquez de perdre la trace. Vous ne savez peut-être pas exactement quels chiffres vous regardez. Donc, c'est vraiment, vraiment important et utile. Donc, voici un exemple pratique pour cela. Là où l'application muse était une implication pour le personnel de notation et ce qu'ils ont fait, c'est qu'ils ont créé une grille de données qui utilise exactement ce modèle. Donc, vous pouvez voir sur la droite ici, eh bien, vous pouvez simplement taper sur une cellule et il change le contenu, changer les données réelles. En même temps, vous pouvez sélectionner ce que vous voulez voir, quelles options ou quelles colonnes vous voulez voir et vous les verrez. La sélection est faite par défaut par les concepteurs. Parfois, vous pouvez vouloir avoir un en-tête fixe. Cela fonctionne aussi parce que vous pourriez avoir une grande table sur la grande vue , puis une petite vue que vous voudrez peut-être la garder à flot. Donc, vous pourriez le garder intact. Donc, vous pouvez réellement aller de l'avant et l'afficher pendant que tous les autres éléments vont avoir cette expérience iframe. Aussi parfois, vous pouvez faire quelque chose de complètement différent. Donc, ici vous avez une table de données avec beaucoup de données et vous pouvez choisir d'aller de l'avant et peut-être de la visualiser. Pourquoi pas ? Donc, vous pourriez transformer une table en quelque chose de complètement différent. Peut-être un graphique ou un graphique. C' est logique, mais dans ce cas, je voudrais juste aller de l'avant et ne pas montrer seulement le graphique sur la petite vue et seulement la table sur la vue large, mais en fait permettre à l'utilisateur de sélectionner ce qu'ils veulent voir. Certains peuvent avoir une vue graphique par défaut avec tabling sur mobile, puis le bureau ayant une table avec le lien graphique permettant aux utilisateurs de changer la vue. Un motif très commun est un motif de bouton radio. Chaque fois que vous avez une matrice de deux ou plusieurs choses spécifiques que vous voulez que l'utilisateur puisse sélectionner, eh bien, vous finissez toujours avec ce type de modèle. Par exemple, dans les salles de cinéma, il se peut que vous ayez un titre de spectacle et que vous ayez des horaires en haut. Dans ce cas, si vous voulez juste économiser un peu d'espace, ce que vous pouvez faire est juste jusqu'à ce que les en-têtes un peu. Dans ce cas, dans ce temps de cette façon, vous économisez vraiment beaucoup d'espace en ne faisant pas grand-chose, pour être honnête. Maintenant, une autre chose que vous pouvez faire, bien sûr, est de gérer les calendriers. Maintenant, les calendriers ont une histoire très différente. Tu ne peux pas dire que je vais laisser tomber tous les vendredis parce qu'ils n'ont pas d'importance. Eh bien, en fait, ils le font. Alors, qu'est-ce que tu fais ? Eh bien, dans ce cas, pensez un peu plus abstrait à la façon dont vous concevez réellement. Pensez au contenu qui va réellement dans ce tableau. Extrayez, redessinez-le, remaniez-le, et mettez-le spécialement conçu pour l'espace mobile. Donc, ici, nous avons cette table avec des jours en cours sur le dessus et l'heure sur la gauche et vous pouvez juste aller avant et en fait vraiment juste changer en quelque chose de complètement différent. Peut-être deux vues. L' un serait une petite table et l'autre sera une base de données, parce que évidemment c'est beaucoup plus facile d'obtenir responsive. Donc, vous n'avez pas besoin d'avoir cette expérience individuelle. Cela peut différer beaucoup. Ou tout autre type de table. Vous pouvez appliquer à peu près la même logique. Ici, vous avez la ligue AFC et NFC pour les séries éliminatoires de la NFL et évidemment, vous avez beaucoup de détails et vous ne pouvez pas simplement laisser tomber quelques colonnes. Ce n'est pas comme ça que ça marche. Donc, dans ce cas, vous pouvez juste essayer de jouer un peu avec la taille et changer la topographie petit peu, rembourrage, la modélisation, et ainsi de suite. À un moment donné, ça ne marche plus. Donc, vous pouvez retourner, évidemment. Il suffit de retourner un peu la mise en page montrant la ligue AFC par défaut, ce qui est ce qu'ils font, puis d'avoir un curseur glissant sur la ligue NFC. Mais il pourrait aussi bien utiliser un ensemble d' accordéons et peut-être juste changer le niveau de fidélité visuelle ici. Vous n'avez pas besoin de montrer tous les logos en un tout le temps et ainsi vous pouvez économiser de l'espace. Alors, que pouvez-vous faire ? Eh bien, vous pouvez hiérarchiser les colonnes importantes et supprimer les colonnes dont vous n'avez pas besoin et autoriser les utilisateurs à sélectionner ce qu'ils veulent voir. Vous pouvez également définir pour la navigation afin de permettre aux utilisateurs de se déplacer entre les parties de la table en fragments et en pièces. Vous pouvez visualiser le contenu et repositionner les en-têtes. incliner un peu pour économiser un peu d'espace vertical. Vous pouvez également juste réduire la fidélité pour les tables vraiment complexes comme les tables de tournoi, mais plus spécifiquement, toujours regarder le contenu, extraire le sens, et essayer de le réutiliser ou de le reconditionner et de concevoir il correctement pour l'espace mobile. Parce que c'est vraiment une chose très souvent très différente de ce que vous avez sur le bureau. Donc, cela à l'esprit, vous avez quelques stratégies pour gérer les tables. Passons ensuite aux formulaires Web. 7. Les formulaires Web (Partie I): Donc, de tous les composants que nous avons certains sont ridiculement ennuyeux. Quand je parle d'ennuyeux, je parle de formulaires Web. Parce que les deux formulaires sont très fastidieux et ils sont extrêmement difficiles et vraiment juste frustrant à remplir sur un appareil mobile. Alors, comment puis-je les améliorer ? Surtout, en pensant à la conception réactive en général. Maintenant, il y a des stratégies générales évidentes que nous devons garder à l'esprit tout le temps et elles ne sont pas si difficiles. Maintenant, tout d'abord, nous devons placer des étiquettes au-dessus des champs d'entrée, juste parce que nous créons vraiment ce beau chemin linéaire que vous pouvez suivre sans avoir à faire défiler vers la gauche, vers la droite pour comprendre ce qu'est réellement l'étiquette. Maintenant, parfois nous plaçons en fait mettre l'attribut d'espace réservé, ce qui peut être un peu difficile à certains moments. Juste parce que vous ne savez peut-être pas ce qu'ils tapent et s' ils sont perturbés ou distraits. Donc, peut-être que c'est vraiment bon ou une mauvaise idée de mettre des étiquettes simples au-dessus des champs. Une autre chose est que parfois il est vraiment difficile d'obtenir une rétroaction visuelle, vous ne savez pas si les données ont été soumises ou non. Donc, toujours activer pour désactiver le bouton immédiatement après le clic. Ainsi, les utilisateurs ont une très bonne rétroaction visuelle tout de suite. Nous pouvons également utiliser la validation de formulaire en ligne bien sûr. Mais nous pouvons l'utiliser à différents endroits. Donc, surtout, quand il s'agit de mot de passe, il est préférable de l'avoir après qu' un champ est laissé ce qui indique que l'utilisateur a soumis et terminé son entrée. Parfois, ça pourrait être une bonne idée de le faire en déplacement, non ? Ça dépend. Désactivez également la correction automatique car elle peut vraiment produire des erreurs. Désactivez-le sur les adresses e-mail car sinon vous risquez de vous retrouver avec des entrées très étranges. Désactivez l'email de mise en majuscule automatique par exemple, ou sur d'autres zones qui ne l'exigent pas absolument. Aussi bien sûr, utilisez la disposition appropriée du clavier. Je veux dire, il ne sert à rien de retirer un clavier de messagerie si vous utilisez une barre latérale pour taper chiffres dans votre entrée de numéro de téléphone, n'est-ce pas ? Donc, fais juste attention à ça. Malheureusement, la plupart des formes sont cependant encore extrêmement ennuyeux. Celui-ci où vous devez réellement taper le caractère de crochet gauche dans les champs de saisie pour soumettre les données. D' autres sont diaboliques comme celui-ci. Nous avons fait pour nous assurer que nous sommes idéalement situés entre le Danemark et la Finlande dans le sélecteur de compteur, vous devez sélectionner si vous ne voulez pas ajouter des coûts d'assurance à votre facture, ou tout aussi ennuyeux comme celui-ci. Mais le plus important, le problème est que ces formes qu'ils ne pensent pas vraiment à l'interaction réelle, ils pensent à la structure. C' est une partie difficile car remplir un formulaire comme celui-ci est vraiment difficile sur l'appareil mobile. Nécessite beaucoup d'efforts, beaucoup de robinets, et ce n'est vraiment pas une façon confortable de le faire. Alors, et si on pensait à concevoir de meilleures formes un peu différemment. Peut-être plus comme ça où, sur le côté gauche, vous avez clairement un formulaire. Il a une structure de plate-forme vraiment claire, simple, familière à nous et il se sent comme forme aussi. Donc, si vous concevez cela, vous concevez un formulaire. Mais sur la droite, vous concevez une interface. C' est en fait la même entrée. La seule différence est que vous êtes tenu en tant qu'utilisateur de modifier, de cliquer sur des éléments spécifiques pour les modifier, n'est-ce pas ? Ensuite, chaque fois que vous avez terminé, il vous suffit de cliquer sur Démarrer au lieu de continuer. Donc, le bon se sent un peu plus comme une interface et beaucoup moins comme une forme, non ? C' est comme un progrès et pas comme l'ennui, ce qui est une grosse affaire. Maintenant, la forme de type est également l'une de ces approches qui vous aident à atteindre exactement cela. Sentez-vous un peu plus comme une interface et moins comme un formulaire. Donc, dans ce cas, eh bien, l'idée est de se concentrer sur la dactylographie tout le temps. Donc, au lieu de déplacer votre souris ou de taper partout tout le temps, vous devriez simplement vous concentrer sur la frappe, donc vous tapez. Ensuite, si vous voulez passer d'un champ à un autre, vous appuyez simplement sur Entrée ou sélectionnez A, B, C, D. Vous n'utilisez pas de liste déroulante de sélection parce que vous ne les utilisez pas tous évidemment dans le bureau, vous utilisez simplement des raccourcis clavier tout le temps partout. Si vous voulez passer de la gauche à la droite, du précédent au prochain champ d'entrée, eh bien, vous pouvez le faire en utilisant les contrôles en bas, à droite ? Ensuite, généralement si vous pouvez éviter ces éléments structurels vraiment ennuyeux, ennuyeux, comme un champ d'entrée par exemple, vous pouvez le faire en utilisant un élément d'entrée plus intelligent. Par exemple, si vous avez seulement deux options comme afficher et masquer, vous pouvez simplement utiliser un commutateur pour cela, permettant aux utilisateurs de taper facilement et de se déplacer entre les deux. Si vous avez quelque chose comme une fourchette de prix, à droite, avec un minimum avec une valeur maximale, évident que la diapositive est un bien meilleur choix pour cela. Ensuite, si vous voulez juste laisser l'utilisateur sélectionner une valeur spécifique, une valeur discrète comme disons 1, 2, 3, 4, 5, pourquoi ne pas simplement les énumérer tous en utilisant des contrôles segmentés et laisser les utilisateurs taper dessus facilement. Le dernier qui est également très important surtout quand il s'agit de vérifier et de choses comme ça, juste un simple pas à pas, permettant aux utilisateurs d'augmenter ou de diminuer la valeur de, par exemple, la quantité de produits ou de copies d' un livre qu'ils veulent acheter, des choses comme ça. Vraiment facile à faire et vraiment, vraiment utile. En fait, les curseurs peuvent faire un long chemin. Ainsi, vous pouvez utiliser différents types de curseurs, un seul curseur et un double curseur, un curseur continu, des curseurs discrets, et ainsi de suite et ainsi de suite. Les curseurs continus sont ceux où vous avez des laisse dire, des valeurs indéterminées. Température de prix et curseurs discrets de choses comme la taille des vêtements. C' est toujours une bonne idée de garder et d'utiliser un continu et de ne pas empêcher la page de résultats zéro. Vous pouvez réellement étendre vos curseurs pour faire plus que simplement afficher une plage de valeurs. Peut-être montrant réellement les méta-données réelles sur le nombre d'options que vous avez dans cette fourchette de prix spécifique. Donc, ici vous savez exactement en fonction de la hauteur des barres, combien d'options vous avez. Ce serait peut-être une bonne idée d'y ajouter un contexte en termes de texte. La façon dont vous distribuez votre gamme de curseurs peut également avoir de l'importance. Veillez à ce que vous ayez toujours à peu près la même quantité d'articles dans toutes les fourchettes de prix. De cette façon, vous devriez vous assurer que les utilisateurs ne finiront jamais avec zéro page de résultats tous ensemble, beaucoup comme Airbnb fait, où vous avez exactement cette barre juridique à l'arrière. Donc, pour résumer ici. Eh bien, fondamentalement, nous pouvons essayer de faire en sorte que toutes les formes se sentent un peu moins comme des formes et un peu plus comme interface réelle en utilisant ces éléments d'interface traditionnels comme des curseurs, comme des bascules, comme des commutateurs, pour réellement s'éloigner des champs de saisie et sélectionnez des barres, sélectionnez des listes déroulantes tout ensemble. Moins nous les utilisons, meilleure sera l'expérience. Donc, ce n'est pas si difficile, mais cela peut vraiment faire une grande différence. 8. Les formulaires Web (Partie II): Donc, juste quelques modifications mineures comme nous l'avons vu dans la dernière partie, nous pouvons nous assurer que peut-être votre formulaire ne ressemble pas vraiment à un formulaire, peut-être plus à une interface. Ils sont vraiment mineurs, mais il y a une petite différence. Maintenant, si vous mettez tout ensemble, vous pourriez finir avec une interface comme celle-ci. Donc, vous voulez avoir quelques select- grandes listes déroulantes vraiment fantaisie, qui sont vraiment confortables à taper. Vous pourriez vous retrouver avec quelques contrôles segmentés, comme celui-ci. Vous pourriez vous retrouver avec des boutons vraiment proéminents qui sont si faciles à cliquer, sorte que le déplacement entre la caisse ne se sent plus vraiment comme une grosse affaire. C' est confortable, mais à la fin, vous finissez toujours avec ces champs de saisie, et il n'y a pas grand-chose que vous pouvez faire à ce sujet. Vous devez toujours taper des données. Oui, vous pouvez utiliser ces boutons radio de fantaisie comme ils le font ici, mais en fin de compte, c'est toujours comme du travail. Peut-être que si nous pouvons réellement éviter les champs d'entrée complètement, cela fonctionnerait, mais nous devons taper des données. Donc, jetons un coup d'oeil à d'autres exemples de la façon dont vous pouvez réellement éviter ces champs de saisie, et les rendre un peu meilleurs, si vous avez besoin de les utiliser. Donc, l'un d'eux est, bien sûr, chaque fois que vous avez des éléments secondaires, adresse, adresse facultative ou toute entrée téléphonique facultative ou autre, si vous savez que vous n'en avez pas nécessairement besoin, ne les affichez pas par défaut. Utilisez quelque chose comme la divulgation progressive, comme avec le bouton plus ou tout ce qui l'afficherait réellement, faites-les apparaître sur le clic, parce que vous n'en avez pas vraiment besoin. Une autre chose, c'est que vous avez en fait beaucoup de données sensibles que vous demandez. Eh bien, pourquoi ne pas expliquer aux utilisateurs pourquoi vous avez besoin de ces données. Qu' il s'agisse d'une entrée téléphonique, d' adresse e-mail, ou quoi que ce soit, suffit de fournir une sorte de petit indice pour vraiment les rassurer pourquoi vous avez réellement besoin de ces données, car il pourrait être très bien qu'ils ne connaissent tout simplement pas le raisons pour lesquelles vous en avez besoin. Une autre chose est l'adresse e-mail. Maintenant, nous savons que l'adresse e-mail est l'un de ces éléments critiques que vous avez toujours dans le commerce électronique et qu'il est vraiment important d'avoir. Mais si vous avez une adresse e-mail incorrecte, c'est comme si le client n'avait jamais existé. Donc, peut-être que vous pouvez réellement rendre l'entrée un peu plus facile. Donc, chaque fois que les utilisateurs tapent quelque chose, eh bien, peut-être que vous pouvez fournir quelque chose comme la saisie semi-automatique, auto-suggérer, avec les fournisseurs de messagerie communs qui, selon votre base de données, sont fortement utilisés par les utilisateurs. Peut-être que c'est Facebook, peut-être que c'est Gmail. Mais si quelqu'un tape réellement dans Gmail, il est vraiment beaucoup plus facile pour eux de corriger parce qu'ils peuvent juste tabuler, pas vraiment une grosse affaire. C' est vraiment, vraiment confortable. L' autre façon de l'améliorer est de demander aux utilisateurs de vérifier leur e-mail juste avant de soumettre leur commande ou avant de soumettre leur formulaire de commentaires, juste pour s'assurer qu'ils ont effectivement fourni l'adresse e-mail. Parce que le problème réel est que la plupart des utilisateurs, lorsqu'ils sont invités à retaper l'adresse e-mail dans le champ de saisie, ils utilisent le copier-coller. En fait, 60 pour cent des utilisateurs selon la recherche Baymard, copiez systématiquement coller l'adresse e-mail au lieu de retaper l'e-mail. Donc, ce n'est pas une bonne idée de l'avoir parce que la plupart des gens ne l'utilisent pas de toute façon. Donc, s'ils ont fait une erreur en premier lieu, ils vont la répéter parce qu'ils copient coller de toute façon. Supprimez donc complètement le champ de vérification des e-mails. Tu n'en as pas besoin. Au lieu de cela, peut-être que vous pourriez utiliser la saisie semi-automatique en ligne, en vérifiant vraiment en ligne qu'elle est correcte, ou simplement avoir une page de révision où elle est demandée. Très souvent, vous vous retrouvez dans des situations où vous avez des espaces réservés pour économiser de l'espace, en particulier dans les mobiles. Eh bien, le problème avec les espaces réservés, c'est quand les gens commencent à taper, ils disparaissent. Donc, c'est une grosse affaire parce qu'ils perdent réellement des contextes. Donc, vous pouvez en fait avoir les deux. Donc, SP va commencer à taper, vous pouvez réellement pousser ce titre un peu vers le haut. Donc, ce n'est pas aussi important mais il est toujours disponible, donc il ne se perd pas. Ces entrées, ou ces étiquettes, peuvent également être réactives. Donc, si vous n'avez pas d'espace pour le montrer en haut, vous pouvez réellement les montrer à droite ou à tout moment. Donc, vous pouvez être vraiment flexible à ce sujet. la même manière qu'avec textarea. Toutes ces petites choses peuvent vraiment résumer, donc quand elles sont résumées, faire une différence. Donc, ici, si vous commencez réellement à taper, la taille de textarea augmente automatiquement. Donc, vous n'avez pas besoin de réserver huit ou 10 lignes pour textarea. Vous pouvez être plus flexible à ce sujet. Encore une fois, réduisez la hauteur totale du formulaire. Quand il s'agit de l'année d'entrée de naissance, eh bien, parfois vous n'avez pas besoin de la date exacte, peut-être vous avez juste besoin de l'année. Alors, demandez pour l'année. Vous n'avez pas besoin de deux entrées supplémentaires pour le mois et pour la date. En outre, il en va de même pour le sélecteur de pays, qui peut être sans fin, presque fin, se sentir comme sans fin, où vous pourriez finir avec ne pas savoir où trouver votre pays. Si vous êtes des Pays-Bas, ou vous êtes des Pays-Bas ou des Pays-Bas ou des Pays-Bas ou peut-être que votre pays est prioritaire dans le sélecteur de pays. Ainsi, vous pouvez simplement demander aux utilisateurs de taper les deux premiers, trois caractères de leur pays. Ce n'est pas vraiment une grosse affaire et au fur et à mesure qu'ils tapent, vous pouvez reconnaître les synonymes à l'arrière. Donc, peu importe s'ils tapent CH, Schwei ou Suisse. Ou s'ils tapent DE, Deutschland ou Allemagne, vous pouvez réaliser que c'est la même chose de toute façon, et c'est beaucoup plus facile à remplir. En fait, en parlant de pays, parfois il n'est pas très nécessaire de demander villes du tout parce que vous pouvez demander un code postal. En fait, voici une petite étude qui montre qu'une fois, si vous demandez aux utilisateurs le code postal d'abord, puis pré-remplir la ville et l'état automatiquement, en moyenne, le taux d'achèvement est beaucoup plus élevé parce que vous allez le prédire correctement basé sur des bibliothèques comme Zippopotam.us, par exemple. Ainsi, lorsque vous commencez à taper, lorsque vous tapez votre code postal, vous pouvez pré-remplir la ville et l'état afin que les utilisateurs n'aient pas à le taper complètement. Bien sûr, le roi des champs de saisie, qui est la couronne des formulaires Web ici est les champs de saisie de carte de crédit. Parfois, ces formulaires sont vraiment difficiles à taper parce qu'ils vous demandent s'il s'agit de MasterCard ou Visa, et vous avez beaucoup de champs de saisie que vous devez parcourir. Et si on combinait tout ça en un seul ? Alors, dans ce cas, vous demandez, quelle est votre carte de crédit ? S' il vous plaît entrer votre numéro de carte de crédit, vous voyez juste à la, indice en bas. Alors commencez à taper. Eh bien, vous pouvez vraiment reconnaître à l'arrière ce que c'est, soit Visa, MasterCard ou quoi que ce soit d'autre. Une fois que vous avez cette entrée, eh bien, il glisse en quelque sorte sur le côté, et il continue à taper. Donc, notez que la notification en bas indique ce changement. Donc, vous savez ce que vous tapez, puis chaque fois que vous avez quelque chose qui nécessite une sorte de rétroaction, retour visuel, vous pouvez également changer l'icône. Ici, dans ce cas, il fournit EV, puis enfin le code postal, et un point si tout est correct, c'est bien, c'est le feu vert. C' est beaucoup plus simple un champ d'entrée qui fonctionne juste et ce n'est vraiment pas une si grosse affaire. Maintenant, qu'est-ce que ça veut dire ? Eh bien, si vous pouvez éviter des interactions complexes, si vous pouvez éviter des champs de saisie complexes et vraiment ennuyeux, comme la liste déroulante de sélection par exemple, s'il vous plaît le faire. En général, si vous pouvez permettre à un utilisateur de fournir sorte d'entrée en un clic ou en un seul clic, recherchez cela. Si vous pouvez simplifier, évidemment si vous pouvez simplifier certains éléments formels, faites cela. Préférez les boutons radio, les bascules et les curseurs simplement parce qu'ils sont tellement plus faciles à manipuler sur un appareil mobile. Si vous n'avez pas besoin de champs spécifiques, de champs de saisie champs secondaires, vous n'avez pas besoin de les afficher immédiatement. Montrez-les comme une divulgation progressive. Utilisez le modèle d'étiquette flottante pour ne jamais perdre le contexte de ce que les utilisateurs tapent. Aussi parce que la plupart des gens sont en train de copier-coller des e-mails de toute façon, il suffit d'éviter la vérification des e-mails, utiliser quelque chose comme la vérification en ligne ou simplement de leur demander plus tard de vérifier l'adresse e-mail. Chaque fois que vous avez de longs commentaires, pensez à des moyens communs plus simples de réduire réellement cette complexité en quelque chose d'un peu plus gérable. Utilisez également le code postal. Une fois que vous avez demandé le code postal, vous pouvez pré-remplir beaucoup de données à partir de celui-ci. En général, envisagez simplement d'utiliser l'entrée au lieu de parce que dans la plupart des cas, vous n'avez pas vraiment besoin d'une liste déroulante, surtout pour des choses comme le sélecteur de pays, vous n'en avez pas besoin. De cette façon, juste en utilisant ces petites règles de base, vous pouvez vraiment vous assurer que chaque fois que vous avez un champ de saisie, il sert vraiment un but, et vos formulaires seront vraiment beaucoup plus courts à la fin, et les utilisateurs je l'espère, sera beaucoup plus heureux. 9. Les micro-composants adaptatifs (Partie I): Donc, certains des composants dont nous avons parlé vont être utilisés dans presque tous les projets, dans tous les projets réactifs. Pensez à la navigation ou même peut-être à des tables. Mais certains d'entre eux pourraient ne pas être utilisés du tout, ou très rarement. Maintenant, le problème est, cependant, si vous n'avez pas réfléchi à la façon dont un composant spécifique s'intègre dans le contexte, vous pourriez vous retrouver dans des situations vraiment difficiles. Donc, certains de ces composants sont vraiment difficiles à gérer une fois que tout le reste est réglé. Jetons donc un coup d'oeil à certains de ces micro-composants dont vous pourriez avoir besoin, mais vous n'avez probablement pas besoin tout le temps. Donc, lorsque vous pensez aux composants à un niveau très stratégique, c'est une bonne façon de penser qu'ils sont des niveaux d'expériences. Comme Patty Toland a parlé dans une conférence pour le groupe Filament, elle a dit que nous pouvons penser à concevoir des composants réactifs en termes de superposition de différents niveaux d'expériences et de fonctionnalités. Nous commençons en tant que couche fonctionnelle, et nous mettons à niveau des niveaux plus améliorés pour chaque composant et pour tous les ensembles de composants. Donc, nous commençons par quelque chose de vraiment fondamental dont nous avons juste besoin. Nous commençons par la vitesse, l'allégement, en nous assurant que le composant web que nous construisons est léger, rapide, et qu'il est vraiment fortement optimisé. En plus de cela, nous nous assurons qu'il est accessible entièrement fonctionnel sur toute la gamme d'écrans et d'appareils. Ensuite, une fois que nous avons cela, nous pouvons réellement commencer à parler de la structure et comment le composant va réellement changer en fonction des grilles, du point d'arrêt, de l'ordre et de la disposition. Et puis en fait, une fois que nous avons cela, quand nous savons exactement quel est le comportement réactif de ce composant, vous pouvez penser à la décoration en termes de style ou de marque de logo, couleurs, polices et ainsi de suite. Donc, pensez toujours à cette pyramide d'abord lorsque vous concevez réellement un composant personnalisé. Disons que vous devez concevoir une chronologie. Maintenant, la chronologie n'est pas une grosse affaire, en général, vous avez juste une chronologie et vous vous en tenez à elle. Il peut être horizontal, il peut être vertical. Dans ce cas, nous pouvons jouer un peu avec la topographie, un peu avec la taille de la police, et le rembourrage. Il ne devrait pas... nous gardons cette belle chronologie, et nous pourrions probablement tout garder loin, mais alors l'expérience de lecture réelle pourrait ne pas être bonne parce que l'alignement sera trop court. Donc, dans ce cas, vous pouvez simplement le transformer en quelque chose d'un peu différent comme un aperçu de ces éléments qui fonctionne aussi bien. Quand il s'agit de graphiques ou de graphiques, ce n'est pas si difficile ou fondamentalement ce ne sont que des éléments multimédias, donc vous pouvez simplement les presser dans l'espace mobile. Mais vous devez vous assurer que ces graphiques à secteurs ou tout ce que vous utilisez, sont encore assez grands. Donc, vous pourriez avoir besoin de les rendre plus grands, pas petits pour l'espace mobile. Et maintenant, toutes ces interactions, bien sûr, devront être toujours en place. Et aussi en même temps, parfois vous pouvez avoir ces éléments animés. Donc, vous pouvez vraiment repenser l'épaisseur des lignes et la façon dont elles sont dessinées en fonction de ce que vous voulez concevoir. Maintenant, voici une belle étude de cas de Globe and Mail, de Teehan Lax, qui conçoit Global Mail, et ils parlent beaucoup des conceptions de composants financiers, spécifiquement pour les marchés boursiers. Et encore une fois penser aux infographies et graphiques, et ils sont en fait considérés comme toutes les différentes vues et aussi spécifiquement étiquettes parce que dans cette position, lors du casting pour les graphiques, la position des étiquettes, et le couleur des étiquettes peut être considérablement importante. Parce que vous voulez vous assurer que cette infographie est agréable à la fois sur un écran de mauvaise qualité et un écran de bonne qualité. Donc, pensez non seulement à l'épaisseur des lignes, mais aussi aux étiquettes et à l'endroit où vous les positionnez, et bien sûr le niveau de fidélité devra changer. Parfois, vous pouvez montrer exactement la même chose à la fois sur mobile et de bureau, et aussi les couleurs à choisir, par exemple les couleurs d'arrière-plan, cela peut faire une différence. cartes en général sont une grosse affaire, parce que lorsque vous avez une carte, et que vous utilisez par exemple la carte et la carte CG comme filtre, peut-être les états comme filtres comme vous le faites ici, et cela fonctionne bien sur le bureau mais cela ne fonctionne pas vraiment sur mobile du tout, à cause d'un problème de gros doigts, vous n'êtes pas en mesure de taper sur un état spécifique, surtout si sa taille n'est pas assez grande. C' est juste une grosse affaire. En revenant à cette superposition dont nous avons parlé au début, pourquoi ne pas commencer par quelque chose de fonctionnel, comme une liste déroulante de sélection, comme vous pouvez le voir ici ? Et puis faire des normes et l'améliorer pour quelque chose d'un peu plus significatif pour les écrans plus grands. Moins comme une carte réelle où vous pouvez réellement taper et sélectionner ce que vous voulez sélectionner. Avec les cartes en général, vous pouvez aller un peu plus loin et si vous avez une très petite zone que les utilisateurs peuvent vouloir sélectionner, il suffit de leur permettre de sélectionner plusieurs pays à la fois, puis de demander une petite liste vous tous pour leur permettre de sélectionner réellement la pièce spécifique qu'ils veulent avoir sélectionnée. Une chose vraiment petite, mais peut être tout à fait, assez utile en fait. Mais vous n'avez pas besoin de charger la carte à l'avance tout le temps. Parce que vous savez que vous avez beaucoup de cartes dans votre conception, vous pourriez finir avec les utilisateurs qui défilent à nouveau directement vers le bas dans la carte, qui n'est probablement pas ce que vous voulez. Donc, dans ce cas, ce que vous pouvez faire, est en fait fournir une image, juste une image de la carte, une capture d'écran de la carte si vous le souhaitez, avec un lien vers Google Maps ou tout service de carte que vous utilisez. Ensuite, si vous savez que la plupart de l'espace d' écran est disponible, la largeur de l'écran est disponible, nous pouvons réellement montrer l'iFrame réel. Droit. Mais vous n'avez pas besoin de le montrer dans l'espace normal tout le temps, et avez conditionnellement charger la carte l'iFrame quand vous en avez besoin, et juste montrer un lien quand vous n'en avez pas besoin. va de même pour les boîtes lumineuses en fait, parce que très souvent vous cliquez sur une image, ou vous appuyez sur une image sur la page, puis vous avez une image et en fait la plus petite taille, bien que ce soit censé être un boîte lumineuse. Donc, il suffit de montrer l'image dans une petite vue. Droit. Avec un lien vers la grande vue réelle, afin que les gens puissent zoomer et zoomer s'ils sont comme, puis afficher et charger la boîte de lumière conditionnelle de manière plus conditionnelle. Seulement quand vous en avez besoin parce que ce n'est vraiment pas nécessaire tout le temps. D' accord. Alors, que pouvons-nous apprendre de cela ? Eh bien en général, pensez à cette pyramide tout le chemin, pensez à la vitesse et l'accès à venir en premier, assurez-vous que vous êtes bon là-bas, et puis vous pouvez réellement utiliser l'échelle et le style plus tard pour créer vraiment de belles expériences réactives riches. Maintenant, retourner ou changer de direction n'est pas suffisant dans la plupart des cas. Je veux dire, l'ajustement du bureau au mobile, qui est malheureusement ce que nous allons faire la plupart du temps, peut être assez difficile. Il ne s'agit pas seulement d'ajuster la mise en page, pensez à changer le niveau de fidélité en changeant les différentes vues car il s'agit d'une infographie de n'importe quel composant personnalisé. Aussi quand il s'agit de cartes et de boîtes lumineuses, pensez au chargement conditionnel de ces iFrames, et si vous ne pouvez pas vous assurer que l'utilisateur se sent à l'aise avec la sélection d'une petite entrée, eh bien, il suffit de demander le sur le robinet, afin qu'ils puissent réellement spécifier l'entrée si nécessaire. Mais en général, une fois que vous avez tout cela à l'esprit, vous pouvez vous assurer que tous ces composants, lorsqu'ils entrent en jeu, peuvent être traités efficacement et efficacement. Donc, les utilisateurs n'ont pas à attendre, et ils ont toujours une très bonne expérience de navigation sur votre site. 10. Les micro-composants adaptatifs (Partie II): Dans la section précédente, nous avons parlé de quelques micro-composants visuels, non ? Des choses comme des cartes, des choses comme des boîtes lumineuses, qui ont en fait un élément médiatique dedans. Donc, ça les rend vraiment très présents. Dans le même temps, il existe de nombreux composants structurels qui ne sont peut-être pas aussi bien positionnés. Eh bien, cela dépend comme nous le verrons dans une seconde, mais cela peut nécessiter beaucoup plus de travail à garder à l'esprit, surtout quand on pense à la chapelure, tous ces petits détails. Alors, regardons certains d'entre eux. Donc, je crois vraiment que si un problème de conception peut être résolu de manière réactive, finalement, il sera résolu de manière réactive. Le problème, c'est que nous avons tendance à négliger. Surveillez quelque chose d'aussi grand qu'un carrousel. Droit ? Maintenant, nous avons parlé des visuels dans le précédent, mais ici, ce qui est vraiment important, c'est la structure réelle du carrousel. Maintenant, très souvent, si nous faisons simplement abstraction de la présentation réelle, il contient quelques erreurs et quelques points au milieu, qui est censé représenter le progrès, genre de pas que vous êtes en ce moment, et très souvent, ils sont vraiment mal conçus. Comme ceci est probablement l'un des pires exemples, où vous avez une grande image vraiment proéminente au milieu, puis ces petits points qui sont censés être vos éléments de navigation. Droit ? C'est la façon dont vous naviguez. Ce n'est tout simplement pas très pratique, c'est pourquoi de nombreux designers ont tendance à s'éloigner des carousels. Par exemple, ceci ici, peut être présenté comme un carrousel, et il est souvent basé sur des données, sur des données solides. Parce que si vous regardez combien de personnes utilisent réellement le carrousel, pour être plus précis, combien de personnes voient réellement l'image deux, trois, quatre et ainsi de suite, vous finirez avec étonnamment un nombre bas, non ? C' est peut-être deux à trois pour cent pour la position 2, la position 3, position 4, la position 5, ce qui n'est vraiment pas une grosse affaire. Ce n'est pas beaucoup de gens. Évidemment, une sorte de transformer un carrousel en générateur d'images aléatoires, faisant défiler les positions, n'aide pas vraiment, juste parce que les gens ne naviguent pas avec. Donc, nous pouvons améliorer la situation, peut-être comme le fait Amazon, où au lieu de simplement montrer des flèches et des points, fournir un contexte. Pourquoi les gens devraient-ils cliquer dessus ? Fournissez quelque chose comme une miniature ou un texte, ce qui rend vraiment plus facile pour les utilisateurs d'aller de l'avant et cliquez sur l'une de ces cases pour obtenir plus d'informations sur un produit, une offre ou tout ce que vous avez. Il est très utile juste de fournir un contexte. Une autre chose est la chapelure, donc je devrais progresser pas. Si vous consultez sur le bureau, eh bien, il est parfaitement bien de montrer toutes les étapes que l'utilisateur devra passer par. Mais parfois, je peux simplement le réduire en texte simple comme vous pouvez le voir dans le coin supérieur gauche ici. On montre juste l'étape 1 sur 5, et on nomme le pas, et c'est à peu près tout. C' est à quel point cela peut être simple. Donc, si l'utilisateur passe à la deuxième, la troisième, et ainsi de suite à l'étape, vous modifiez simplement le texte en conséquence. Vraiment pas une grosse affaire. Maintenant, ces étapes de progrès peuvent être vraiment aussi simples que la précédente, ou un peu plus difficiles. Ici, est l'endroit où vous faites défiler le texte vers le bas. Vous pouvez en fait fournir un contexte sur la façon dont cela est venu en lecture, ou a fini de lire cette section d'un article, qui est un peu très utile. Une autre chose dans un cadre très différent est le commerce électronique checkouts. Eh bien, là encore, vous avez votre carte d'achat, et alors que vous allez réellement à la caisse, ce que vous voyez est que, au lieu d'avoir réellement ces étapes de progression, ils agissent comme des onglets. Donc, vous pouvez passer entre l'expédition, et la facturation, et examiner très rapidement, parce qu'ils agissent en fait à peu près comme des étapes, ce qui est également très pratique. Vous n'avez pas vraiment besoin d'afficher sur le texte seul si vous le pouvez. La même chose vaut pour, si vous avez une sélection de vol ou quelque chose comme ça. Maintenant, la chapelure n'a pas à ressembler à de la chapelure ici. Par exemple, vous pouvez avoir à nouveau des choses comme un petit bascule qui vous permet de montrer, pour voir tout dans la vue entière. Mais par défaut, vous pouvez avoir une vue compacte très simple, sans distraire l'utilisateur du tout. Une autre chose très importante à garder à l'esprit est que, nous avons tendance à oublier le carrousel médiatique vertical. Maintenant, le carrousel vertical sont souvent très importants, car, la largeur de l'écran, la largeur de la mise en page peut vraiment être différente. Parce que vous avez peut-être un grand écran, un petit écran, mais la largeur seule ne dit pas vraiment que c'est un appareil mobile ou non. Alors que la hauteur, peut être un très bon indicateur qu'il est en fait un appareil mobile ou pas un appareil mobile. Alors, pensez aux vues de la musique vasco mobile. Surtout, si vous avez quelque chose comme cette navigation, où vous avez quelques éléments apparaissant. Eh bien, quand vous cliquez sur une icône, ce n'est pas très à l'échelle car à un moment donné, cela ne sera tout simplement plus visible. Il sera très difficile de naviguer. Donc, peut-être que vous pourriez réellement penser à utiliser l'accordéon basé sur la hauteur. Donc, si vous savez qu'il n'y a rien de hauteur à afficher, tous les éléments peuvent en fait utiliser encore plus, et genre de spectacle comme le MoorLink, et afficher les sections dans les parties. Cela peut être très utile. Maintenant, faites les comparaisons. Évidemment, sur mobile, vous n'avez pas beaucoup d'espace. Alors, qu'est-ce que vous avez besoin de faire ? Eh bien, la seule option que vous avez est d'utiliser la pleine hauteur pour le plein écran fondamentalement. En tant qu'utilisateur, cliquez sur comparer, il suffit d'occuper tout l'espace disponible avec cette boîte de diapositives pour qu'il soit plus facile pour eux de comparer. Aussi, notes de bas de page, notes d'accompagnement et mises en page de magazines. Donc, très souvent, vous vous retrouvez avec des notes de bas de page inconfortables quelque part en bas où vous devez sauter là-bas que cela pour sauter en arrière, ou des notes de côté qui en fait sont en quelque sorte pressées entre deux paragraphes. Eh bien, peut-être que vous pourriez utiliser quelque chose comme des notes de côté en ligne, ou comme vous pouvez le voir ici, quand il y a un clic sur cette icône, vous pouvez en fait obtenir des informations sur la note de côté spécifique, et il pourrait apparaître dans le bas ou il pourrait apparaître sur le dessus, c'est vraiment à vous de décider. Mais essayez de le mettre en contexte. Vous n'avez pas besoin de faire sauter les gens d'un endroit à l'autre. en va de même pour les PDF, car les PDF sont vraiment obtrusifs. Je veux dire, vous devez télécharger le fichier PDF entier si vous voulez lire la page 18. Ce n'est pas vraiment cool. Donc, peut-être que vous pourriez réellement montrer avec vos miniatures. Donc, si les gens veulent télécharger le fichier PDF, je pense qu'ils peuvent en fait aller de l'avant et le télécharger, mais cela peut être un humax, donc cela peut prendre un certain temps. Dans le même temps, il suffit de fournir quelque chose comme de très petites vues miniatures, miniatures vraiment fortement optimisées, donc si les gens veulent simplement se rendre à la page 17 par exemple, ils peuvent y arriver avec 50 ou 40 kilo-octets sans avoir à téléchargez l'intégralité du PDF. Donc, les carousels ne sont pas mauvais. Ils ne sont pas très différents des accordéons, juste un peu plus différents dans la divulgation précédente. Cependant, ils ont besoin de contextes , donc, fournissent un contexte, des détails significatifs afin que les gens soient enclins à passer d'un domaine à l'autre. Les chapelures peuvent être des onglets ou des accordéons, ou aussi simples que du texte brut. Utilisez des requêtes de médias verticaux, car souvent ils sont très bon indicateur que vous avez un appareil mobile. Afficher les comparaisons de produits en plein écran, car il n'y a pas d'autre moyen de contourner vraiment. Au lieu de mettre des notes secondaires sur le côté, ou en fait des notes de bas de page en bas, peut-être que vous pouvez réellement les insérer directement dans le contenu, et en même temps, ce que vous avez à traiter avec beaucoup de PDF. Fournir une vignette fortement optimisée, certaines personnes ne peuvent pas y accéder très rapidement. Cela peut aussi faire un long chemin. droite. Ensuite, nous allons parler d'images, particulier de la mise à l'échelle réactive. Comment nous pouvons utiliser tout l'espace disponible pour tirer le meilleur parti de nos mises en page. 11. Mise à l'échelle adaptative: Lorsque nous traitons avec la conception réactive, nous avons généralement cette intention simple de passer de l'espace de bureau à l'espace mobile. On se déplace entre ces deux espaces. Alors que dans le même temps, il est vraiment important pour nous de considérer, non seulement dans l'espace mobile lui-même qui est évidemment crucial et important, mais aussi dans ce grand affichage, grand espace d'écrans. Donc, nous optimisons beaucoup, du bureau au mobile, mais nous devrions peut-être optimiser de l'ordinateur de bureau à ces grands espaces, car ils nous offrent beaucoup d' occasions de faire de l' expérience pour que nous utilisions beaucoup mieux. Alors, voyons certaines de ces façons. Maintenant, comme Mike Pick l'a écrit dans un de ses articles analyste à part, « En adoptant les derniers écrans, nous pouvons avoir l'opportunité ou utiliser l'opportunité de travailler dans un pli plus large, présentant aux utilisateurs plus de contenu simultanément, défilement sur des pages plus longues, et créer une expérience utilisateur plus riche et plus étendue. » Maintenant, cela offre beaucoup d'avantages, parce que si vous pensez à la vue générale que vous avez si vous allez sur un site de commerce électronique aléatoire, c'est ce que l'expérience va ressentir. Ce n'est pas seulement vrai pour vous avec beaucoup d'espace blanc partout, ce n'est pas seulement vrai pour le commerce électronique, mais aussi pour les journaux. Ici, nous avons MSNBC, qui est entièrement réactif de cet auto-mobile, mais pas tellement quand vous allez plus loin du tout. va de même pour quartz.com, où nous pourrions avoir cette image très importante en haut, et une très petite colonne où réside le contenu. Donc, peut-être que nous pouvons le rendre un peu meilleur. Ainsi, quelques idées pour le commerce électronique spécifiquement représentées par les instituts BioMart dans l'un des articles du magazine Smashing, et les idées sont très simples, et elles sont vraiment simples à mettre en œuvre aussi. Il fait juste usage de l'espace vraiment, c'est à peu près tout. Par conséquent, si vous pouvez afficher cinq éléments par ligne, il suffit d'afficher cinq éléments par ligne à mesure que vous augmentez le nombre d'éléments que vous pouvez afficher dans votre grille. Fournissez également quelque chose comme des choses critiques très importantes comme la commande, donc aperçu des commandes ou l'accès à votre compte, ou assistance téléphonique. Très subtile de manière très subtile, mais quelque part à droite ou à gauche pour que les utilisateurs puissent toujours y avoir accès. Si vous avez quelque chose comme une image vraiment proéminente que vous voulez mettre en évidence, au lieu de les rendre petits dans la grille, laissez-la simplement briser la grille et les montrer vraiment bien en évidence. Aussi, le bouton Ajouter au panier ou le bouton Commande peut être vraiment essentiel pour garder à l'esprit, regarder, rester disponible tout le temps. Filtres, nous avons parlé des remplissages dans les sections contentieux, une section où si vous avez beaucoup de filtres, vous pouvez utiliser des onglets potentiellement pour les présenter en bas de l'écran, donc lorsque les utilisateurs cliquent dessus, ils ont un peu de minerais pop, mais si vous avez beaucoup de sécurité, vous pouvez simplement montrer les filtres. Donc, ici, vous pouvez avoir un type de filtres de couleur, filtres de taille, et ainsi de suite. Juste être présent de sorte que l'utilisateur fait défiler la page vers le bas, ils peuvent effectivement avoir accès à filtrer encore, car les filtres que les filtres défilent avec eux. va de même pour les articles récemment consultés et Ajouter au panier sur la page de révision , ainsi que le résumé de la commande, par exemple, qui descend généralement jusqu'au bas du patient en mode mobile. Tout devrait être présent. Maintenant, l'idée est, eh bien, et si vous avez une forte présence visuelle comme lourde ? Donc, si vous avez une image de fond visuelle, ce que vous pouvez toujours faire est juste étendre un peu. Sur une vue mobile, vous n'avez peut-être pas d'espace pour l'afficher, mais vous agrandissez certainement la vue. Donc, vous pouvez simplement utiliser l'espace, utiliser une couleur pour le montrer.Ceci est à peu près la même chose sur tout l'arrière-plan à côté qui ont l'arrière-plan. Vous pouvez toujours étendre un peu l'arrière-plan, sorte qu'il ne se sent pas si perdu. Maintenant, il y a peu d'exemples intéressants de ce que vous pouvez réellement faire avec. L' un de mes favoris est UNIQLO car au lieu d'avoir seulement quelques éléments, un nombre limité d'éléments affichés par ligne, ils augmentent réellement. Donc, parfois, vous pouvez avoir un, deux, articles, mais parfois vous pouvez avoir six, sept, huit, etc., ce qui est logique, cela transforme une vue d'ensemble du produit dans un mur de produit, ce qui est utile à faire. Furtado, vélo furtado, ils montrent en fait une grande image d'un produit qu'ils vendent. Vous n'avez peut-être pas besoin de montrer le produit si grand, mais il va dans la bonne direction, ils utilisent juste l'espace disponible. Le grand mécontentement est un magazine, et ils ont une belle disposition de grille de magazine, mais ils utilisent aussi toujours tout l'espace disponible. Donc, une image va être vraiment grande dans la grande vue, le cool va être, la topographie va être, ça va sesentir très magazine comme, sentir très magazine comme, parce qu'il n'y a pas de largeur maximale tout à fait. Si vous faites défiler, ou descendre et réduire la taille, alors qu'ils ont encore la même expérience, bien sûr, juste les images un peu plus petites. Mais c'est vraiment agréable d'avoir de la cohérence dans la façon dont ils deviennent petits, comment ils deviennent gros. Parfois, vous pouvez avoir un illustrations vraiment complexes qui sont juste faciles à mettre à l'échelle vers le haut et vers le bas. Donc, ici vous avez toutes ces illustrations et peu importe la hauteur ou la largeur que vous avez, peut-être que vous finissez avoir un affichage plein écran, il est juste affiché tout le temps, sens bien que la topographie pourrait être un peu plus grand. Mais mon exemple préféré de loin est l'exemple du site Web du Kremlin, où si vous avez beaucoup d'espace, eh bien, vous avez cette disposition à double panneau si vous le souhaitez, où vous avez un résultat de recherche sur la gauche, et que vous avez le contenu de cette page sur la droite, ce qui a du sens, c'est utile. Dans le même temps, si vous n'avez pas l'espace, va juste être une superposition. Donc, vous devez le fermer et ensuite vous passez à la suivante. Mais si vous avez de l'espace, c'est vraiment agréable de se rendre compte de naviguer car ici vous pouvez en ouvrir un, puis il peut en ouvrir un autre, et vous pouvez vraiment avoir cette double vue. Donc, c'est logique. Maintenant, pour résumer que pouvons-nous faire ? Bien qu'il y ait quelques options évidemment. Tout d'abord, nous devons étendre la conception pour remplir l'écran. Sinon, l'utilisateur pourrait se sentir perdu si vous avez beaucoup trop d'écran large et laissé sur la droite, et que la topographie est petite. Les notes de bas de page et les notes de côté , en particulier dans les mises en page de magazines, peuvent en fait sauter sur le côté gauche ou à droite, car vous pouvez utiliser l'espace disponible. Vous pouvez également envisager la mise en page multi-colonnes, multi-panneaux comme le Kremlin ou Tradus. Vous allez étendre les grilles de produits, comme UNIQLO, où vous affichez simplement plus de produits si vous avez de l'espace pour cela. Mais le plus important est de mettre l'accent sur les actions importantes, sorte que des choses comme Ajouter au panier ou Checkout, comme ces boutons critiques, peuvent toujours être présentées d'une manière très agréable, peut-être subtile, peut-être pas si subtile, afin que les utilisateurs puissent toujours y avoir accès, car une fois que vous avez cela, les utilisateurs ne se sentiront pas perdus, et c'est vraiment une bonne chose. 12. Conception d'une interface adaptative complexe: Donc, parfois, vous savez exactement quel type de composants vous aurez besoin. Mais parfois, vous obtenez un projet, un projet bizarre, et vous devez travailler dessus. Il faut vraiment faire preuve de créativité et trouver un moyen de faire fonctionner les choses. Pas quelque chose qui peut être juste fou, peut-être vous soudainement tout d'un coup de travail sur un projet japonais avec langage que vous ne comprenez pas ou peut-être vous avez besoin de construire un jeu très intéressant, interactif, ou quelque chose comme ça. C' est faisable. Mais, toujours dans les deux cas, ce que vous devez comprendre est comment créer et faire travailler ceux atteignent des interfaces réactives. Parfois, ils font simplement appel à des solutions personnalisées. Plus souvent, ces interfaces vont être très difficiles et très complexes, et pas aussi faciles qu'on pourrait le penser. Alors, jetons un coup d'oeil à certains d'entre eux. L' un des plus importants qui sont disponibles, qui est juste partout, est bien sûr la caisse. Nous pourrions penser que le paiement est un processus relativement simple, mais ce n'est pas parce qu'il y a beaucoup de points de contact de paiement avec l'utilisateur doivent passer par. De l'ajout d'un article au panier, de la vérification de la politique de remboursement, vérification des options de paiement, saisie de l'adresse d'enchère ou de l'adresse d'expédition, de la finalisation du paiement, ou peut-être de savoir que l'autorisation échec qui n'a pas fonctionné à la fin, abandonner le panier, se connecter pour télécharger la facture éventuellement, puis juste terminer tout et espérer le meilleur qu'ils obtiendront le produit. C' est un processus long et malheureusement, dans de nombreux scénarios, le commerce électronique se sent très fastidieux et très ennuyeux. Alors, jetons un coup d'oeil à quelques exemples de la façon de le rendre meilleur. Donc, voici un bel exemple pour cela, pour une expérience de commerce électronique vraiment agréable. Donc, un club de rasage à dollar, où ils n'ont pas autant de produits, mais ils en ont quelques-uns. Ce qu'ils ont est un calque vraiment simple avec une page très simple, où vous avez des options gratuites à choisir dans la vue du bureau, et la vue plus petite, eh bien, vous tournez ce joli petit curseur, que vous pouvez utiliser pour naviguez entre ces trois éléments. Ensuite, vous pouvez évidemment agrandir l'un d'eux et obtenir des informations à ce sujet, et ainsi de suite et ainsi de suite. Sélectionnez un article potentiellement, puis il va être ajouté au panier. En outre, vous pouvez toujours y ajouter plus de choses. Donc ici, on peut aller à la suivante si on ne veut rien d'autre. Vous pouvez revenir en arrière en utilisant seulement deux d'un. Vous pouvez également modifier le nombre d'éléments que vous souhaitez choisir. Évidemment, ajoutez plus d'éléments de la recherche. Tu vois à quel point c'est rapide, et tu vois à quel point c'est chic ? C'est vraiment sympa. Il avait encore cette belle expérience de panier, qui est comme un pop-up, comme une boîte lumineuse, mais c'est vraiment sympa. Il peut changer la quantité très facilement. C' est juste une expérience très agréable, très concentrée. Bon alors, un certain point évidemment, vous finirez dans le panier et c'est là que vous allez remplir les données, taper toutes les données de la carte de crédit, je ne vais pas acheter avec espoir. Il y a si peu, beaucoup de petits détails comme adresse de facturation va être la même que l'adresse de livraison, et cet article, l'icône va être disponible seulement si tout le reste est correct. C' est juste une très belle expérience pour ici dans le site e-commerce. Une autre expérience similaire est ici de Harris, où vous avez une expérience très similaire mais il est juste vraiment serré, vraiment propre et agréable. Donc, à partir de la gratuité pour les boutons, et comment vous ajoutez l'article au panier et la taille du choix, tout est juste conçu comme il est censé être. Ça n'a pas à être si difficile. Pendant les options d'expédition et ainsi de suite, sorte que le paiement n'est pas vraiment une grosse affaire. Notez également que, par exemple, lorsque vous voulez corriger des erreurs, elles vous permettent de corriger des erreurs, mais vous n'avez pas à le faire. Donc, c'est une très belle interface très indulgente. Donc, si vous voulez avoir un bel exemple d'expérience de commerce électronique qui fonctionne vraiment bien, regardez ces deux exemples, je pense qu'ils sont vraiment bons. Mais parfois, vous pourriez avoir une expérience très différente, comme Typekit. Pensez à n'importe quelle interface où vous avez beaucoup de contenu bizarre au milieu de la page, comme celle-ci. Vous avez beaucoup de différentes boîtes, boîtes animées en fait, qui fournissent des conseils ou des informations survolent. Si vous avez décidé de tout coller en une seule page, cela va finir vraiment mal. Ça ne va pas être agréable, donc vous n'allez pas créer une belle expérience avec elle. Mais ce que vous pouvez toujours faire dans ces cas est de transformer ce blob de données en quelque chose de plus gérable comme un curseur. J' aimerais que nous ayons un peu bascule ici pour passer à la précédente et à la suivante, un ensemble d'images ou d'options, mais cela en fait des curseurs, que vous pouvez glisser à travers si vous voulez, ce qui est vraiment sympa. C' est un moyen vraiment simple de réduire cette complexité que nous avons à quelque chose de plus gérable dans la vue mobile. Maintenant, mais parfois, ils ont encore quelque chose de vraiment l'espace, comme celui-ci. Donc, vous avez un petit projet, un projet de gestion, une petite plate-forme, où les utilisateurs sont censés être en mesure d'acheter des billets pour des spectacles, des événements, des spectacles de stade, quoi que ce soit. Vous voulez ne pas être en mesure de regarder toutes les différentes zones disponibles, mais aussi de pouvoir zoomer sur une rangée spécifique où ils veulent s'asseoir, et sélectionner le siège où ils veulent réellement s'asseoir, peut-être même obtenir un aperçu de ce que cela va ressembler à partir de cet endroit spécifique. Ça a l'air d'un problème très compliqué. Alors, comment diriez-vous réellement avec la conception d'une interface comme celle-ci ? Comment ferais-tu que ça marche ? Eh bien, vous finirez probablement avec quelque chose comme, je ne sais pas, peut-être certains des paramètres, modèle où vous pouvez fournir, vous demander de simplement nous dire quelle gamme de prix aimez-vous, quel genre de sièges voudriez-vous préfèrent. Aussi, peut-être qu'il y a des offres spéciales en cours dans des domaines spécifiques, et ainsi de suite. Donc, en fin de compte, ce que vous pourriez faire, c'est qu'il n'est plus disponible ici. Je sélectionne l'une de ces options spécifiques que vous aimez, qui sont importantes pour vous en tant qu'utilisateur, ou peut-être ajuster certains filtres comme celui-ci, et d'autres paramètres pour vraiment minimiser cette complexité que vous devez afficher. Ou, vous pourriez vous retrouver avec la conception de composants personnalisés comme celui-ci, où vous devez faire face à un robinets de guitare interactifs. Donc, évidemment, vous devrez recalculer les différents espacements entre les différents composants que vous venez de jouer sur la page, sur ces différents onglets. Cela va être un cauchemar, mais si c'est faisable, je pense que tout est faisable. Si vous voulez vraiment explorer ces différentes interfaces, eh bien, allez de l'avant vers les sites japonais ou chinois, parce que les sites japonais et chinois sont vraiment loin, beaucoup plus loin que nous. Nous réfléchissons beaucoup à l'optimisation du bureau au mobile, mais ils pensent beaucoup à l'optimisation mobile au bureau parce qu'ils sont d'abord mobiles. Donc, encore une fois, en pensant à ce blob de données, ou s'ils ont un langage visuel différent, eh bien, vous pouvez juste apprendre beaucoup d'eux. Comme, ce blob de données se transforme en quelque chose de gérable comme un ensemble de zones, blocs éléments avec des illustrations client mis à la place de ces grandes images. Donc, c'est une direction bizarre si tu veux. La même chose vaut pour cette page ici, où vous avez beaucoup de zones et aussi beaucoup d'animations qui se déroulent. Même ces petites infographies ou les chercheurs de voie, si vous le souhaitez, vont toujours être affichés en bonne place. Ils sont aussi réactifs. Donc, ces zones, qui pourraient ne pas être aussi faciles à développer et à construire, sont encore réactives, ce qui est tout à fait remarquable. Donc, vous vous retrouvez avec ces expériences, et vous pouvez en apprendre beaucoup sur la conformité et la façon d'utiliser l'eau, et ainsi de suite et ainsi de suite, juste en faisant cela. Que pouvez-vous faire ? Eh bien, vous pouvez décomposer la complexité juste en essayant de réduire la fidélité. Tu n'as pas besoin de haute fidélité tout le temps. Je peux vous demander ceci, ce qui est important pour eux, leur demander leurs préférences, penser à des façons de réellement présenter mieux pour eux, afin qu'ils puissent réellement naviguer dans cette interface. Vous pouvez garder à l'esprit ce qui est important et le prioriser pour eux, vraiment définir des valeurs par défaut sensibles, par défaut intelligent, c'est logique. Lorsque vous pensez à ces objets blob complexes de données, pensez à les transformer en un curseur, qui peut être facile à naviguer. Lorsque vous pensez à site e-commerce, assurez-vous juste que vous avez cette règle d'un seul robinet à l'esprit tout le temps. Ainsi, ceux-ci peuvent cliquer, ajouter un article au panier très facilement, changer le nombre d'articles, passer à la caisse en utilisant des valeurs par défaut intelligentes comme la définition de l'adresse, la définition de l'adresse livraison, la même adresse que l'adresse de facturation, et d'autres choses comme ça. Cela peut vraiment faire un long chemin, et juste prolonger la conduite de manière significative, parce que c'est une chose de montrer une carte, avec des sièges et où les gens peuvent réellement trouver un ticket où ils veulent s'asseoir, mais c'est vraiment un chose différente pour créer un assistant agréable qui vous demanderait spécifiquement toutes les questions dont il a besoin pour fournir une sortie significative dans cela, et pas trop de sortie. Donc, pensez aux choses et alors même l'interface la plus complexe n'a pas à avoir l'impression que c'est vraiment complexe et vraiment difficile à naviguer. 13. Réflexions finales: Maintenant, c'était un voyage. Alors que nous avons jeté un oeil à beaucoup de composants différents, partir de très petits, sorte de passer de vraiment simples comme une icône de hamburger et des choses comme ça, à quelque chose d'un peu plus avancé comme des tables, des boîtes et des calendriers et des choses comme ça, puis vers quelque chose de vraiment avancé et vraiment complexe interfaces utilisateur. La question est de savoir ce qu'on en fait maintenant ? Maintenant, évidemment, je le suis encore, je veux juste m'assurer que nous sommes tous sur la voie claire ici. Je ne vois pas que toutes ces techniques, toutes les solutions comme des points de terminaison finaux pour n'importe quelle conception. Je ne pense pas que vous puissiez aller de l'avant et le prendre et l' appliquer à votre projet tout de suite et simplement l'appeler un jour. Ce n'est pas ainsi que cela fonctionne car le contexte sera différent dans votre scénario. Mais je pense que c'est vraiment précieux, vraiment utile d'être conscient de toutes ces choses différentes que vous pouvez faire quand vous tombez sur un problème comme celui-ci. Donc juste pour savoir quel genre d'options vous avez quand vous devez traiter avec le calendrier, quand vous devez traiter avec la table, nous devons traiter toutes ces choses différentes. Alors prenez toutes ces idées avec vous et construisez sur elles pour créer quelque chose de nouveau. Et les nouvelles ne sont pas à nouveau comme le point de vue final et le résultat final de ce que vous construisez , mais plutôt le début de conversation pour votre processus de conception parce que c'est essentiellement tout cela. C' est ce que c'est. Et évidemment maintenant que nous avons toutes ces techniques en place. Ça n'a pas de sens de s'asseoir et de les regarder, nous devons les mettre en pratique. Essayons donc de trouver un bon moyen de les faire fonctionner dans notre contexte, dans le contexte de notre petit projet. Jetons donc un coup d'oeil au projet que vous pouvez voir sur votre écran et réfléchissons à tous les composants dont nous avons parlé, mais aussi à ceux qui composent réellement cette mise en page de magazine dont nous avons parlé, à droite. Essayez de les identifier, essayez de les concevoir correctement, essayez de vous assurer qu'ils se sentent bien ensemble et essayez de les rendre vraiment réactifs d'une manière qu'il s'adapte vraiment à la fois pour les petits écrans, très petits écrans et pour écrans plus grands. Et puis peut-être en fait les remanier d'une manière qui fonctionnerait mieux pour ces postes non dirigés que nous devons concevoir. Maintenant, quand je pense au design réactif, en fait, j'ai cette vision de ce record voyageur qui a été envoyé dans l'espace en 1977 pour communiquer avec des extraterrestres, afin que les extraterrestres puissent nous trouver et faire ce qu'ils veulent avec nous. C' est une très sorte de point de vue optimiste, mais c'est bon. Parce qu'à un moment donné quelqu'un a dû aller à un concepteur visuel, leur demander de concevoir un langage visuel qui résistera l'épreuve du temps et sera conçu pour les étrangers, à droite. C' est une tâche, je dirais. Ce petit projet que nous devons concevoir n'est pas si compliqué que vous le savez, comme celui-ci. Mais à ce stade, nous devons réfléchir à ce que nous ferions pour soutenir cette personne. Comment concevoir quelque chose qui résisterait à l'épreuve du temps pendant des années et des années à venir. Mais il s'avère que ce que nous faisons aujourd'hui avec le web n'est pas très différent parce que nous pouvons créer des interfaces, nous pouvons créer des expériences qui devront résister à l'épreuve du temps pendant des années et des années à venir. Parce que s'ils sont accessibles, s'ils sont rapides, s'ils sont créés avec un vrai genre de maintenance à l'esprit, nous pouvons les faire vraiment, vraiment bien fonctionner, même dans 10 ou 15 ans et être à la fois accessibles et réactif et beau en même temps afin que nos utilisateurs vont vraiment, vraiment les trouver délicieux. Avec cela à l'esprit, j'espère que vous serez en mesure de créer ces interfaces. Peut-être avec quelques techniques que nous avons partagées et dont nous avons discuté dans cette classe. Donc, je tiens à remercier Simon C Page pour la couverture de la classe. J' ai une situation d'Homer Simpson quelque part, je ne sais pas où. Les illustrations de section, les illustrations animées ont été réalisées par Guillaume Kurkdjian de Nantes, France. C' est un illustrateur incroyable. Donc, si vous cherchez un illustrateur, c'est une excellente option à considérer. J' ai aussi eu une image hypercube dans l'une des premières sections et j'espère vraiment que cela a été utile et que vous serez maintenant en mesure de créer une interface vraiment belle et j'ai hâte de voir vos projets, croquis, filaires, tout autre chose dans le répertoire du projet ici. Merci d'avoir fait partie de ce cours. J' espère que certaines des techniques que nous avons discutées aujourd'hui, que vous avez découvertes aujourd'hui, ont été vraiment, vraiment utiles pour vous. J' ai vraiment hâte de voir ce que vous allez faire, ce que vous allez faire avec les projets. Alors n'hésitez pas à soumettre n'importe quoi, que ce soit comme des croquis précoces, les brouillons n'ont pas besoin d'être une maquette ou quoi que ce soit, filaires, quoi que ce soit. Je serai vraiment heureux de donner quelques commentaires, mais peut-être que nous pouvons découvrir une technique ou deux qui aide vraiment ou aidera à se débarrasser de certaines choses ennuyeux que nous avons encore sur le web parfois. Comme des formes, par exemple ou à peu près n'importe quoi d'autre. Donc, j'ai vraiment hâte de voir ce que vous allez trouver et si je l'ai fait, je peux vous donner des conseils si nous pouvons aider de toute façon, je ferai de mon mieux. Je pense. Oui, je le ferai. Bien sûr. Je te le promets. Garanti. Donc, avec cela à l'esprit, j'espère vous voir bientôt et une partie du monde, passer une très bonne journée et avoir hâte d'avoir une conversation avec vous. 14. Découvrir le design sur Skillshare: façon.