Conception d'interface utilisateur, modèles de conception d'interface utilisateur — Enseigné par un instructeur UX/UI universitaire

1. 1 cours ajouté sur les motifs de conception: Bienvenue dans le cours sur les modèles de conception de l'interface utilisateur. m'appelle Erin Lawrence et je suis concepteur UX principal et fondateur d'une agence UX appelée UX Honey à San Francisco, en Californie. Je suis également professeur UX où j'enseigne design UX avancé à l' Academy of Art University, également ici à San Francisco. Ce cours est un guide très pratique pour comprendre l' expérience utilisateur et les modèles de conception de l'interface utilisateur. Les modèles de conception sont un ensemble de directives et de règles relatives à l' utilisation des produits et des éléments d' interface utilisateur par les utilisateurs . compréhension de ces modèles est indispensable pour tout concepteur d' interface utilisateur ou d'interface utilisateur. Il s'agit d'éléments tels que les champs de formulaire et les listes déroulantes, les barres de navigation et cases à cocher, les boutons radio et les barres d' onglets et les sélecteurs de date, etc. Si vous envisagez concevoir une expérience utilisateur. ou conception de l'interface utilisateur. Et vous n'avez pas une compréhension approfondie de ces modèles de conception. C'est comme être un boulanger de gâteaux sans rien savoir sur les ingrédients du gâteau. Parce que ce sont essentiellement les ingrédients qui composent un gâteau. en va de même pour la conception de l'interface utilisateur. La conception de l'expérience utilisateur, ou conception UX, a beaucoup à voir avec la compréhension des besoins de l'utilisateur et du contenu dont il a besoin pour atteindre son objectif. Et c'est ce contenu qui fait de l'interface. En d'autres termes, une interface utilisateur n' est que de l'immobilier pour le contenu. Et comprendre quel est le meilleur immobilier à utiliser pour un contenu spécifique a beaucoup à voir avec modèles de conception et les composants de l' interface utilisateur. C'est de cela que se résume cette classe. Chaque vidéo de la classe, nous allons faire un plongeon approfondi et aborderons un sujet ou un composant d' expérience utilisateur suivant. Nous allons commencer par des choses comme les champs de formulaire, les boutons, les listes déroulantes, les sélecteurs de dates, les boutons radio, les cases à cocher, les bascules, les formulaires d'adresse, les forums de recherche, barres d' onglets, les barres de titre, les accordéons, les onglets, les infobulles, ombres, miniatures, carrousels, modaux, lightbox comme menus et tiroirs, assistants, chapelure, pagination, icônes, photos et tous ces sujets auront des explications, des exemples réels, bonnes pratiques sur la façon de les utiliser, pourquoi les utilisez-vous ? Et mon préféré, nous aurons aussi des exemples à faire et à ne pas faire. J'ai inclus tout le matériel source dans la classe que vous pouvez télécharger et que vous pouvez conserver pour toujours. Et vous pouvez également télécharger le fichier Figma que j'ai utilisé pour cette classe afin que vous puissiez l'avoir dans votre application Figma, également pour toujours. Et aussi en prime, nous allons prendre tous ces modèles de design. Et j'ai ajouté un espace supplémentaire à la classe. Eh bien, c'est plus basé sur des projets, où nous allons utiliser l'outil de conception figma. Et nous allons construire tous ces composants pour voir à quoi ils ressemblent et comment les utiliser dans des prototypes en direct. Des choses comme les boutons radio personnalisés où l'état de survol et l'état de sélection sont ici. Nous allons faire des menus qui glissent vers l'intérieur, glissent. Nous allons réaliser des modaux, des accordéons qui utilisent techniques d'animation intelligentes dans Figma. Nous procéderons à la validation en ligne et apprendrons tout sur la validation en ligne dans la classe. Ensuite, nous l'appliquerons à un prototype pour permettre à quelqu'un de voir les exigences relatives au mot de passe, de valider au fur et à mesure qu' il permettre à quelqu'un de voir les exigences relatives au mot de passe, saisira un mot de passe qui a les exigences correctes et d'appuyer sur Créer. Nous allons faire des spinners animés ici pour imiter le chargement de la création de compte, faire des listes déroulantes qui imitent le défilement d'une liste déroulante réelle et l'état de sélection. Ensuite, nous allons apprendre comment les faire les appareils mobiles. Plus. Et ce qui est génial, c'est que j'ai également construit un fichier Figma entier où la rangée supérieure de chacune des sections ici a été conçue pour prototype prêt à l'emploi que vous pouvez utiliser un exemple de sélection. Et puis, pendant les vidéos, nous parcourrons chacune de ces vidéos et nous le ferons ensemble pour tous ces différents types de motifs de conception. Et nous ferons également la même chose pour tous les modèles mobiles. Donc, non seulement vous obtenez les meilleures pratiques et les choses à faire et à ne pas faire. Vous allez également vous salir les mains et apprendre à le faire avec l'outil de conception figma. Ce cours est idéal pour tous ceux qui étudient pour devenir concepteur UX ou concepteur d'interface utilisateur. Ou si vous êtes déjà sur le terrain et que vous désirez rehausser ces motifs. Très bien, c'est l'introduction. Je m'appelle Erin Lawrence et j'espère que vous apprécierez la classe. 2. Structure des cours: Avant de commencer la classe, je voulais faire une vidéo rapide sur la structure de chaque vidéo et sur ce que nous allons couvrir. Chaque vidéo va explorer un composant d'interface utilisateur et les un composant d'interface utilisateur modèles de conception existants qui s' associent à ce composant. Chacun, je vais donner une brève explication de ce qu'est le composant, origines du composant. Nous parlerons des avantages et des inconvénients. Nous parlerons de cas d'utilisation de ce composant. Je vais montrer comment il est construit, comment sont les différents états du composant, quoi il ressemble. Nous allons examiner des exemples réels. Je vais vous montrer comment combiner les composants existants ensemble. Nous allons faire et ne pas faire pour le composant. Vous pouvez dire la même chose ici pour les onglets. Encore une fois, les origines, ce qu'est un onglet, exemples de bonnes pratiques mobiles et Web. Et encore une fois, nous terminerons sur les choses à faire et à ne pas faire pour chaque composant. Très bien, je vous verrai bientôt. 3. Introduction du cours: Très bien, bienvenue dans la classe. Ce n'est qu'une introduction rapide à quoi s'attendre pour la classe. Et je vais également parler un peu conception de l' interface utilisateur ainsi que des modèles de conception et de conception UX. Mais il suffit de commencer par le haut. Oui, la conception de l'interface utilisateur est celle que les concepteurs de processus utilisent pour créer des interfaces et des systèmes d'exploitation logiciels ou de périphériques. Encore une fois, en se concentrant sur le contenu et la convivialité ainsi que sur la hiérarchie des contenus Et la conception UX consiste à comprendre les besoins de vos utilisateurs et la façon dont ils utilisent une application ou une expérience utilisateur spécifique. Il y a beaucoup de chevauchement entre les concepteurs UX et les concepteurs d'interface utilisateur. Le concepteur d'interface utilisateur traduit en hiérarchie les besoins des utilisateurs issus de vos tests d'observation ou vos recherches en hiérarchie de contenu et de contenu. Et cet ensemble d'informations sera utilisé s' affiche dans l'expérience utilisateur d'une application. Être un bon concepteur d'interface signifie que vous avez une bonne compréhension de la une bonne compréhension de la hiérarchie de contenu et pour laquelle vous devez concevoir. Et surtout, quels types de composants et de modèles immobiliers de l' interface utilisateur communiqueront le mieux et serviront cette hiérarchie de contenu et de contenu. C'est là que la compréhension des modèles de conception est très utile et c'est ce que représente cette classe. Les modèles de conception ne sont qu'un ensemble de règles et de règles d'interface utilisateur qui concernent la façon dont les utilisateurs utilisent les produits et éléments d'interface utilisateur et comprennent ces modèles de conception. C'est un must pour tout le monde en conception UX ou UI. Et ce sont des éléments tels que les champs de formulaire et les listes déroulantes , les barres de navigation et les barres d'onglets. Et je vais parler de tout ça ici dans la seconde prochaine. Les modèles de conception sont extrêmement utiles, principalement parce qu'ils nous permettent d'économiser du temps et l'argent et nous obtiennent de meilleurs résultats plus rapidement et plus rapidement. Et c'est une philosophie fondamentale pour le développement d'applications agiles. Et il demande aux concepteurs que nous puissions tirer parti de ces modèles et les utiliser dans nos décisions quotidiennes en matière de conception. Parce que ces modèles et ces composants sont utilisés tous les jours dans de nombreuses expériences utilisateur. Et les utilisateurs n' ont pas été habitués à la façon dont ces modèles étaient. Nous savons donc essentiellement qu'ils fonctionnent et nous pouvons les exploiter au jour le jour. Ce cours va vous fournir un guide très pratique pour comprendre ce que sont ces modèles de conception d'interface utilisateur, et comment les concepteurs les utilisent, quelles règles s'appliquent à eux ? Exemples réels et réels. Chacun d'entre eux aura des choses à faire et à ne pas faire pour chaque composant. Et encore une fois, la maîtrise de ces modèles et composants vous aidera à devenir un meilleur concepteur, mais aussi à faire de vous un meilleur décideur quant à l'immobilier de l' interface utilisateur à utiliser pour le contenu et hiérarchie de contenu dans laquelle vous travaillez. Encore une fois, ça va vous rendre plus rapide, vous rendre meilleur. Et cela vous aidera à appliquer une bonne logique de décision sur la raison pour laquelle vous avez utilisé un certain modèle ou un modèle de conception dans votre conception. Nous allons couvrir beaucoup de choses. Nous allons couvrir les champs étrangers, les boutons, les listes déroulantes, les sélecteurs de date, les boutons radio, les cases à cocher et les bascules. Forums d'adresse et formulaires de recherche. onglets intitulées barres, accordéons et onglets, infobulles et ombres, miniatures et carrousels, modaux, boîtes lumineuses, menus et tiroirs , assistants, chapelure, pagination, icônes et photos, et chacune des ces exemples, encore une fois, nous allons avoir les meilleures pratiques d'où ils viennent, quand les utiliser, quand ne pas les utiliser. Et nous aurons aussi des choses à faire et à ne pas faire. À la fin, encore une fois, c'est une bonne information. Si nous allons passer au niveau supérieur, si vous le souhaitez, nous allons apprendre comment réaliser tous ces éléments dans Figma et Figma comme outil de conception. Et je vais fournir un dossier. Et ce dossier ressemble à ça. Il est déjà préréglé, préconçu. Ce que nous allons faire, c'est que nous allons passer en revue et créer tous les différents composants dont nous avons parlé et concevoir des modèles dont nous avons parlé en classe, comme des boutons radio personnalisés. ou même ce que sont les boutons radio. Nous allons créer des modaux, sont des menus comme celui-ci et le fermer fera des modaux. Et apprenez comment, non seulement pour en apprendre davantage sur ces schémas, comment les faire et les meilleures pratiques, mais nous apprendrons également comment les atteindre jusqu'à la fin. Nous avons des accordéons ici. Vous pouvez voir cette interaction, la validation en ligne pour la création de compte ici, en plaçant des spinners à l'intérieur d' un bouton ici pour afficher les états de chargement. Et nous allons faire des déroulements et comment les créer dans Figma. Nous ferons même tous ces efforts pour les applications mobiles. Apprenez également à le faire dans des prototypes mobiles. Nous aborderons donc les meilleures pratiques Web. Nous le ferons également sur mobile. Et nous appliquerons tous ces modèles que nous allons apprendre dans l'outil de conception figma, que tous les fichiers soient prêts à être utilisés. Il vous suffit donc de télécharger le fichier. J'ai l'exemple préconstruit pour que vous puissiez le distinguer. Pendant le cours, ce que nous allons faire, c'est que nous allons le regarder et voir comment cela fonctionne , puis nous allons le construire ensemble. Donc, ça va être super amusant, c'est engageant. Et j'espère vous y voir et je vous verrai dans le prochain cours. Au revoir. 4. Matériel du cours: Ok, je voulais juste faire une brève vidéo sur le matériel de classe qui prend environ 30 secondes ou une minute ici, j'ai deux types de formats différents. J'ai tout le matériel en format PDF, que je vais ouvrir ici dans une seconde et vous montrer. J'ai également tout le matériel construit dans Figma, l'outil de conception. J'ai inclus ce fichier, c'est un point, c'est la classe Figma file zip. Il suffit de double-cliquer sur ce fichier. Et il va ouvrir un dossier. Dans ce dossier, j'ai un fichier de configuration de points Figma, et j'ai également des instructions de classe sur la façon d'ouvrir ce fichier, mais je me suis dit que je ferais une vidéo pour vous aussi. La chose à signaler, si vous ouvrez le fichier Figma, c'est que vous ne pouvez pas double-cliquer sur le fichier Figma et l'ouvrir. Vous obtiendrez cette erreur ici. Et je suis sur un Mac ici, juste en tête. Ce que vous devez faire, c'est que vous devez faire glisser ce fichier dans les sections brouillons de votre application Figma, en haut à gauche. Votre section brouillons peut être un peu différente de mienne puisque j'ai tous ces fichiers ici. Encore une fois, les brouillons de sections en haut à gauche. Prenons ce fichier Figma, faites-le glisser. Vous verrez ce contour bleu autour de l'outil Figma. C'est génial. Cela signifie que Figma va ouvrir cela et cliquons dessus et faites-le glisser. Et c'est un gros dossier. Il faudra peut-être une seconde pour que Figma ouvre ça. Pendant que cela s'ouvre, vous pouvez prendre n'importe lequel de ces formats ici, du matériel au format PDF, et ceci suit avec la classe. Donc, la première classe que nous allons faire des champs de forme. Encore une fois, c'est un gros fichier, donc je dois m'ouvrir dans une application d'aperçu, zoomer. Ensuite, vous pouvez simplement naviguer d'ici, partir du début, parcourir la droite de la classe et avoir tout ce matériel ici. Encore une fois, je suis un grand fan. Vous devriez avoir ces choses pour toujours, que vous l'ayez au format PDF ou Figma. Allons voir Figma. OK, c'est cool. Il est donc toujours en train de charger le fichier. Et là encore, comme je l'ai dit, c'est un gros dossier. Ok, super. Il s'était chargé. Allons-y et ouvrons-le très vite. L'avantage du fichier Figma ici est qu'il s' agit de composants actifs, ce qui signifie que vous pouvez saisir ces éléments et les utiliser pour vos conceptions. Comme je l'ai dit, nous allons faire un cours à la fin où nous allons construire tous ces éléments. Mais ils sont tous vivants. Vous pouvez zoomer sur Figma, supposons que vous vouliez ce sélecteur de date ici. Vous pouvez aller chercher ce sélecteur de dates. J'ai tous les champs de formulaire. J'ai un tas de boutons ici que vous pouvez saisir et utiliser et les champs de formulaire ici sont différents styles que vous pouvez utiliser et ce sont tous des composants en direct que vous pouvez saisir. Je n'ai pas eu tout un tas d' icônes ici que vous pouvez en saisir deux. Encore une fois, que vous, en ce qui concerne le matériel de classe, que vous souhaitiez le fichier Figma ou que vous souhaitiez également le format PDF, n'a pas vraiment d'importance. Vous n'en avez même pas besoin. Les vidéos sont géniales, elles couvrent beaucoup de bons contenus, mais comme je l'ai dit, je suis un croyant, vous devriez avoir ce matériel pour toujours et y revenir quand vous en avez besoin. Je vous verrai plus tard. Au revoir. 5. Champs de formulaire: Très bien, bienvenue dans les champs de formulaire. Les facteurs d'un bon champ de forme ne sont que quelques éléments. Ensuite, nous aborderons différents styles et états communs et nous plongerons en profondeur dans les champs de formulaire et les cas d' utilisation pour eux, mais ils sont généralement faciles à lire. Ils ont des textes clairement étiquetés et des textes de forme. Il est facile de cliquer sur un texte de saisie. Ils utilisent bien les textes fantômes et je parlerai beaucoup de textes fantômes, que c'est un attribut important d'un champ de formulaire et qu'il a un état défini comme survol actif désactivé error. Je vais entrer dans différents exemples de ces états. Il dispose de biens immobiliers pour les messages d'erreur et affiche un message d'erreur clair indiquant ce qui a un message d'erreur clair indiquant ce qui erré et quel champ de formulaire n'a pas d'erreur. il est facile de comprendre quels champs de formulaire sont requis, ainsi que quels champs de formulaire sont facultatifs. Allons dans certains styles remplis de formulaires. Il existe cinq styles de champs étrangers les plus courants que vous voyez sur le Web et les applications. Une chose à mentionner également, c'est que les champs de formulaire y sont très importants. En fait, l'un des éléments d'interface utilisateur les plus importants de l'expérience utilisateur et des applications dont nous disposons. Seulement parce qu'il extrait des informations de nos utilisateurs. Nous apprenons à connaître des informations à leur sujet. Il aide à créer du contenu. C'est cette barrière entre notre application, ou c'est l'entonnoir de communication entre notre application et notre utilisateur. Si l'utilisateur veut dire quelque chose à votre application, cela se produira dans un champ de formulaire. Il est également important pour nos services commerciaux, comme si vous êtes une entreprise qui vend des produits que vous avez besoin de personnes pour acheter des produits chez vous. Et lorsqu'ils sous-produits, ils s'engagent sur un champ de formulaire. En tant que concepteur UX, il est donc important que nous ayons une très bonne idée des règles, meilleures pratiques et des modèles entre les champs de formulaire. La première chose que nous avons ici est un formulaire détaillé rempli. C'est le plus courant. Il s'agit de l'état par défaut, ce qui signifie qu' il s'agit de l'état, mais il n'est pas encore survolé ou saisi, juste le premier état que l'utilisateur verrait un formulaire hiérarchique. C'est juste le rectangle ici, et il a une couleur grise contour. Ensuite, nous avons ici les textes étiquetés. Ce serait comme un nom. Ensuite, nous avons les textes fantômes. Ces textes fantômes sont en fait un secret. C'est une opportunité stratégique pour nous de l'utiliser. Et il y a tellement de fonctions et de secrets différents dans l'industrie sur la façon de définir vos textes fantômes pour communiquer le format que vous souhaitez pour votre utilisateur. Ou mettez-le en stratégie pour montrer à la communauté l' objectif de communication que nous voulons pour l'utilisateur ou pour inviter votre utilisateur à entrer ces informations, n'est-ce pas ? C'est ce qu'on appelle les textes fantômes. J'en parlerai beaucoup. Encore une fois, un bon formulaire rempli a une hauteur minimale de 50 pixels, puis la largeur dépend uniquement du contenu ici. Celui-ci montre une largeur de 350 pixels, mais cela dépend vraiment de la largeur de votre formulaire, du contexte et du contenu qui sera écrit dans ce champ de formulaire. Disons que c'était un nom ou un e-mail. Vous allez vouloir un champ de formulaire plus long. S'il s'agit d'un numéro de téléphone, vous n'en voudrez peut-être qu'un numéro court comme celui-ci. Le deuxième état, c'est un formulaire rempli. Et il s'agit essentiellement des mêmes contextes. Nous avons les textes fantômes, nous avons l'étiquette, elle est juste remplie au lieu du contour, nous avons une couleur de champ ici. Ensuite, nous avons un formulaire d'interface utilisateur matériel. même genre de principe ici. Il comporte un texte fantôme et une étiquette. C'est juste au lieu d'un contour, c'est un rectangle. Il n'utilise qu'une ligne pour indiquer où se trouve le formulaire. Cette interface utilisateur a été créée par Google et ce type de style, un champ de formulaire est courant dans les produits Google et les appareils Android. Vous disposez également d'une interface utilisateur matérielle sans titre. C'est ce qu'on appelle un flotteur étiqueté où le titre remplace les textes fantômes. Et ce qui se passe ici, c'est qu'on appelle ça une étiquette de flux car lorsque l' utilisateur clique cette étiquette ou ce champ de formulaire, le titre ou le texte de l' étiquette s'affiche ici flotte. Et les textes fantômes apparaissent comme ça. Mais à l'état par défaut, il n' y a pas de texte fantôme. Ce n'est que le titre ici. Une chose pour laquelle je ne les utilise généralement pas personnellement, c'est parce qu'ils n' affichent pas ce texte fantôme à l'état par défaut. Les textes fantômes ne s'affichent que lorsque l'utilisateur clique pour saisir des informations. Nous perdons donc cette occasion de structurer nos textes fantômes à l'état par défaut du champ du forum. Et entrez ici des informations qui aident nos utilisateurs à servir nos utilisateurs ou leur donnent des instructions ou des conseils sur le format que nous attendons à ce qu'ils saisissent. Je les ai également utilisés auparavant dans le passé où nous avions une disposition remplie de formulaire à une colonne comme celle-ci. où vous le pouvez, vous aviez quelque chose comme un nom ici et vous pouviez dire une robe ou quelque chose ici. J'ai remarqué que lorsque nous avons testé cela auprès personnes âgées et d'un public plus âgé, ils ne savaient pas où cliquer. Dans un cas, l'utilisateur essayait de cliquer sur le nom ici. Cela a peut-être été un peu plus serré ici, et ils ont accidentellement cliqué sur l'adresse parce que la ligne n'est pas une indication assez forte de la zone de frappe pour cliquer ou taper sur la zone cible ou la zone du robinet. me basant sur ceux-ci, je reste généralement loin d'eux. Et vous pouvez voir que lorsque vous utilisez le plus courant, c' est-à-dire ce formulaire de contour ici, cela a un bon sens de la zone de frappe. Vous pouvez voir le rectangle, c'est là que l'entrée va se produire. Où est l'interface utilisateur matérielle, c'est juste cette ligne ici. Un autre, c'est que nous avons un formulaire contour avec l'étiquette flottante. Et encore une fois, c'est sans titre. Le titre remplace le texte fantôme ici. Et alors, que se passe-t-il ? C'est le même principe lorsque vous survolez le champ du forum. Le titre flotte ensuite au-dessus du texte fantôme ici. Comme ça. Même principe que je tape, restez généralement loin d'eux simplement parce que nous n'utilisons pas les textes fantômes pour des stratégies de communication au début. Certains d'entre eux étaient tous les états par défaut. Pour les états survol ont des forums. Je vais passer par là rapidement. Votre philosophie pour le vol stationnaire est que quelque chose doit prendre vie lorsque vous survolez et qu'il devrait généralement être d'une couleur plus vive. Donc, si vous avez une, une couleur comme ce formulaire rempli ici, alors elle devrait être plus brillante à l' état de vol stationnaire juste pour la rendre plus vivante. C'est en quelque sorte la philosophie et les principes entourant le vol stationnaire. Et nous avons fait la même chose ici pour le formulaire de plan. Nous venons de rendre le contour bleu. dicton très courant de l' interface utilisateur du matériau que vous obtenez la même chose à contour devient bleu, qu'il s'agisse d'une étiquette flottante ici. Et le même principe pour le remplissage du formulaire contour avec l'étiquette flottante est que nous venons de changer la couleur du contour en bleu. Très bien, l' état suivant est appelé état d'entrée ou de mise au point. Et c'est à ce moment que l'utilisateur clique sur le champ de formulaire à partir d'un AM survol ou appuie sur le champ de formulaire. Et la technologie fantôme passe au curseur de type. Ainsi, vous verrez apparaître le curseur de type et les textes fantômes et la plupart des cas resteront là jusqu'à ce que l' utilisateur commence à taper. Une fois qu'ils ont tapé la première lettre, vous verrez cela disparaître. Les textes fantômes disparaîtront une fois que la première lettre commencera à taper. Très bien, il s' agit donc de l'état actif, qui signifie ou je suis désolé, l'état d'entrée ou l'état de mise au point. Et tout ce que cela signifie, c'est que l'utilisateur saisit informations dans cet état ici, ou qu'il est concentré dans cet état. Le curseur de type est ici, il se concentre sur ce champ de formulaire. Et c'est la meilleure pratique sur le vol stationnaire de l'utiliser. Une couleur vive ici, le bleu. Mais lorsque vous arrivez à l'état d'entrée, il est préférable d' un gris plus foncé ou même un noir, ou vous pouvez ajouter un peu de bleu dans le gris, comme ce que nous avons fait ici également. Mais il est préférable de passer de cette couleur claire pour l'état par défaut, puis d'une couleur plus foncée pour l'état d'entrée. Ici. Vous pouvez voir les différents exemples ici, exactement les mêmes pour l'interface utilisateur matérielle. Ils l'avaient fait. Le bleu du survol devient plus foncé pour l'état d'entrée. Et ensuite, la même chose pour les autres champs de formulaire d' étiquette flottante. Très bien, l' état actif est pratiquement une fois que l'utilisateur a tapé des informations et quitte le champ de formulaire. Ce champ de formulaire retournera à l'état par défaut. La seule chose qui change, c'est le texte saisi prend une couleur plus forte. Très bien, nous utilisons donc un gris clair pour le texte fantôme pour indiquer qu'il n'y a rien entré ici. Et généralement, cela ressemble à un appel à l'action, comme le nom de stagiaire, de stagiaire ici, comme ça. Et nous voulons pouvoir assombrir le texte pour les états d'entrée. Ainsi, lorsque l'utilisateur analyse tout cela, peut voir que ceux-ci ont été remplis. Encore une fois, même pour l'état rempli. Si nous utilisons un formulaire rempli, nous avons un blanc plus lumineux. Et même pour l'état d'entrée ici pour les formulaires d'étiquettes de flux. Cool. Ainsi, chaque champ de formulaire pour l'étape d'erreur, chaque formulaire doit avoir sa propre propriété immobilière pour message d'erreur, généralement en bas. Et encore une fois, cela peut se produire lorsque l'utilisateur est de taper dans le champ de formulaire. Et nous avons ce qu'on appelle la validation en ligne, c' est-à-dire lorsque nous faisons erreur l' utilisateur dans le champ de formulaire. Ou cela se produit lorsqu'ils appuient sur le bouton Enregistrer ou Soumettre ou Suivant. Et nous n'avons pas satisfait aux exigences de ce champ de formulaire. Quoi qu'il n'ait pas été satisfait pour un champ de formulaire spécifique en ce qui concerne les exigences, le message d'erreur devrait être ici. Encore une fois, ces messages d'erreur doivent être très clairs sur les erreurs. Vous pouvez voir pour les formulaires de champ, nous pouvons simplement rendre le formulaire entier rouge pour le contour. Il ne s'agit que de bonnes pratiques, juste pour faire le contour rouge sur le champ du forum, vous n'avez pas besoin de faire du rouge avec le texte ou quoi que ce soit de ce genre. Vous ne devenez même pas trop fou. Tout ce que vous avez à faire, c'est juste une petite indication subtile du rouge pour indiquer à l'utilisateur où regarder dans son message. Et rouge. Idem pour les formulaires d'interface utilisateur du matériau ici et l'autre étiquette flottante ici. Dans le dernier état où nous avons, c'est commun dans les champs de formulaire en tant qu' état désactivé. Il s'agit donc de l'état dans lequel un utilisateur ne peut pas engager, entrer ou modifier aucune de ces informations. Et j'aime simplement utiliser 30 % de transparence ou un gris clair, ou vous pouvez même utiliser les deux. Très bien, donc tous ces éléments sont 30 % d'opacité ici. D'accord, nous allons donc dans la plongée profonde des champs de formulaires maintenant. Regardez différentes fonctions. Voyons comment nous pouvons utiliser le texte fantôme pour définir les différents besoins, un format et des entrées basés sur le champ de formulaire dont nous disposons. Nous allons examiner certains champs de formulaire courants. L'un d'entre eux est celui des numéros de téléphone. Vous pouvez voir l'exemple des textes fantômes ici, c'est qu'il donne à l' utilisateur le format que nous voulons qu'il saisisse dans le numéro de téléphone. Nous ne demandons pas un 11. Nous voulons juste ici 1112223333, comme ça. Et ce qui se passe ici, c'est que nous avons ces tirets que vous pouvez voir ici. Ainsi, lorsque l'utilisateur entre dans ce champ de formulaire, nous remplissons automatiquement les tirets pour eux. L'auto, ils verront les tirets toujours ici dans le texte fantôme. Quand ils arrivent au premier numéro deux, et disons qu'ils ont tapé les deux suivants. Nous allons mettre ça fringant pour eux. Ils n'ont pas besoin de faire des tirets automatiquement, remplissent automatiquement cela pour eux. Vous verrez ensuite le remplissage du champ de formulaire une fois que c'est terminé. L'autre chose à savoir est que si vous avez un champ de formulaire de téléphone mobile ou un champ de formulaire directement lié à des numéros. Lorsque vous êtes sur un appareil mobile, ouvrez le pavé numérique. N'ouvrez pas le pavé numérique et demandez l'utilisateur de revenir au pavé numérique. Cela correspond également à la raison pour laquelle nous remplissons automatiquement le tableau de bord, c'est que si votre utilisateur tape ceci sur un clavier, il suffit de taper les numéros sur le clavier. Ils peuvent avoir un clavier qui est une section numérique à droite. Et puis sur un appareil mobile, il y a un mauvais numéro de clé, clavier ressemble à ceci. Ils n'ont pas besoin d'entrer dans les tirets. Ils ont juste mis les chiffres et nous le ferons pour eux. Une fois encore. Cela remonte beaucoup, beaucoup à cela, à la première chose dont j'ai parlé ici, à savoir l'abordance, le moins de temps et d'énergie pour accomplir une tâche. Ce sont donc de grands. L'Affordance, je parlerai beaucoup aussi. Et le moyen de transport est également très important. Date de naissance. C'est le même principe que nous utilisons les textes fantômes pour saisir, pour transmettre à l'utilisateur le format dans lequel nous voulons qu'il saisisse des informations. Nous voulons le mois, le mois, le jour, jour, l'année, l'année, l'année. Et l'astuce avec la date de naissance est que l'utilisateur tape, nous montrons toujours les textes fantômes. Cela ne disparaît pas quand l'utilisateur commence taper et les barres obliques, Oh, vous le pariez. Les barres obliques sont également remplies automatiquement, n'est-ce pas ? Il suffit donc de taper les chiffres sur le clavier. Et voici mon anniversaire, 09131983. Les barres obliques sont toutes autocomplétées pour l'utilisateur. Tout ce qu'ils ont à faire, c'est taper sur le clavier. Mauvais, boum, abordable, facile, pas de problème. Lorsque cette date arrivera cette année, vous pouvez aller de l'avant et m'envoyer un vœu d'anniversaire ou un cadeau, quoi que vous vouliez, je l'accepterai avec plaisir. Le formulaire d'e-mail est assez simple. Au lieu de taper un e-mail, il suffit d'afficher un faux e-mail. Vous pouvez mettre en colère ou vous pouvez mettre comme un nom. Email.com montre simplement le format à une différence ici c'est que lorsque l'utilisateur saisit les textes fantômes disparaissent, comme s'il s'affiche directement lorsqu'il clique. Vous auriez donc ce curseur de clavier qui s'affiche. Donc, cette chose apparaîtrait juste quand elle serait un peu plus sombre, mais elle apparaîtrait quand ils commenceront à taper. Et puis, une fois qu'ils ont mis ce premier mot , il disparaîtra. Mais il n' apparaît pas comme nous l'avons utilisé ici à la date de naissance car ils tapent, apparaissent qu'une seule fois. Ils cliquent et une fois qu'ils tapent, ils disparaissent complètement. Pour de l'argent rempli. Même principe, nous utilisons les textes fantômes pour montrer l'entrée et le format que nous aimerions. Une fois que l'utilisateur commence à taper, nous supprimons les zéros. Nous ne montrons plus les textes fantômes, mais nous gardons le signe du dollar. signe du dollar ne disparaît pas. Ensuite, nous ajoutons des virgules. Nous n'avons pas besoin que nos utilisateurs ajoutent des virgules pour nous. Eh bien, nous allons mettre les virgules, mais l'utilisateur doit taper la décimale. Nous ne remplissons pas automatiquement la décimale, ils doivent donc faire une décimale. Laissez-leur ça à eux. Numéros de carte de crédit. Encore une fois, regardez comment nous utilisons les textes fantômes. Vous pouvez voir pourquoi j' aime que les champs de formulaire fantômes des textes parce que c'est un élément additif qui nous aide à établir des stratégies pour les besoins de communication. Nous avons donc 111 espaces, 2222, espace 333. Nous avions les indications de l'espace ici. Ce qui se passe ici, c'est que lorsque l'utilisateur tape, il verra le numéro qu'il saisit. Mais tout le reste deviendra des balles. Ils ne voient que le numéro y taper afin savoir dans quoi ils tapent le bon numéro. Mais nous n'exposons pas tous les autres numéros de de crédit uniquement pour des raisons de sécurité et de sûreté. Et devinez quoi ? Nous remplissons automatiquement les espaces pour nos utilisateurs. Ils n'ont pas besoin de le refaire, tout ce que je dois faire, c'est juste les chiffres sur le clavier ou sur ce clavier. Et nous ferons le reste du formatage pour eux. Ensuite, nous avons toujours montré les quatre derniers au cas où l'utilisateur aurait plusieurs cartes de crédit. Je ne sais pas. Supposons que vous ayez dix cartes de crédit et que vous ayez fait une virée shopping sur Amazon lorsque vous êtes ivre vous avez commandé un tas de choses dont vous n'aviez pas besoin et que vous avez maximum de quatre ou cinq cartes de crédit et vous ne vous rendez pas vraiment compte de cela. Et trois jours plus tard, votre copine dit pourquoi y a-t-il 50 boîtes de trucs Amazon chez nous ? Et puis tu es comme, Eh bien, je ne sais pas. Et puis vous regardez votre histoire Amazon et vous vous dites , Oh mon Dieu, je pense que j'ai commandé un portefeuille Gucci l'autre soir quand j'étais ivre comme, oh, ce n'est pas bon. Donc, quand je vais acheter ma prochaine Gucci Wally, je n'utiliserai pas les cartes au maximum et je le saurai car je verrai les quatre derniers chiffres ici. Je viens de l'inventer. Je n'ai pas acheté de manteau d'agouti. La prochaine chose est donc les champs de messages de forme libre. Ils sont gratuits car nous n'avons pas vraiment besoin de ce que l' utilisateur va entrer. C'est pourquoi il s'agit d'un formulaire gratuit. Ils peuvent entrer tout ce qu'ils veulent. Nous l'utilisons beaucoup dans l'UX comme des champs de commentaires. Si nous le voulons. Nous les avons dans certaines de nos applications où un client intervient et il peut consulter l'application utilisateur. Et nous avons un petit domaine qui dit nous donner des commentaires ou une application radar. Et ils ouvrent cela et nous utilisons à nouveau les textes fantômes pour stratégie sur l'indice ou l'invite que nous aimerions obtenir de nos utilisateurs. Dans ce cas, nous aimons toujours entendre parler problèmes auxquels les gens sont confrontés lorsqu' ils utilisent notre logiciel. Mais nous aimons entendre parler de demandes de fonctionnalités, comme vous aimeriez voir quelque chose qui se trouve dans l'application que nous n'avons pas nécessairement lu pour le moment. Nous utilisons ces textes fantômes ici pour nous aider à établir des stratégies pour que nous puissions obtenir ce type d'informations auprès de nos clients et utilisateurs. Nous avons aussi parfois un nombre maximum de caractères. Vous allez juste mettre ça ici en haut à droite. Une fois que l'utilisateur aura atteint un nombre maximal de caractères comme celui-ci, ce Coco lira. Ils ne pourront plus taper. Vous aurez donc deux niveaux de justification. type d'exigence est que cela deviendra rouge et qu'ils cesseront réellement de frapper. Une fois que j'ai tapé le clavier, rien ne se passera. Nous avons également cette petite icône d'extension ici. Donc pour les champs de formulaire ouverts, comme je ne sais pas si peut-être quelqu'un qui veut écrire un paragraphe assez long, 500 caractères, c'est assez long. Ils peuvent donc saisir cela et étirer le formulaire rempli de bas en haut. Cela aide donc beaucoup pour ces champs de formulaire ouverts. Très bien, allons donc examiner quelques exigences de mot de passe ici. Comment appelons-nous cela lorsque nous disons des textes de filles par défaut, cela signifie que nous ne l'utilisons pas vraiment pour définir nos objectifs de communication. Très bien, donc celui-ci est juste d'entrer mot de passe, assez simple. Je pense que cela arrive avec les mots de passe, c'est que nous ne montrons même jamais le caractère que l'utilisateur tape. Si je tape un cinq, nous ne montrons pas les cinq. Il s'agit d'une balle. Pour des raisons de sécurité et de confidentialité. Nous pouvons ajouter la petite icône ici, l'icône des yeux. Et lorsque l'utilisateur clique dessus, révélerons le mot de passe, n'est-ce pas ? Donc, l'icône III est comme si les gens regardent , ne montrez rien. Et quand vous cliquez dessus et que les vêtements comme les gens ne regardent pas, montrez-moi, montrez-moi mon mot de passe. La différence entre un champ de formulaire facultatif et obligatoire. Il est préférable de ne montrer que du texte qui dit facultatif et par rapport à un autre. Lorsque vous avez un champ obligatoire, ce que vous verrez, c'est ces petits astérisques ici. Le plus souvent ou non, la plupart de vos champs de formulaire seront obligatoires. Donc, au lieu d'avoir tous les champs de formulaire avec ces petits astérisques et tout le monde ne sait pas que l'astérisque est un champ de formulaire obligatoire, comme l'aîné. Les utilisateurs plus âgés ne s'y accrochent pas. Ils ne le verront peut-être même pas. Il est préférable de laisser tous les champs de formulaire requis comme requis, puis de saisir l'endroit où il s'agit du filtre de formulaire facultatif, car il s'agit d'un meilleur moyen de transport. Et si nous revenons à notre guide ici, le moyen de transport, est-il facile de comprendre les informations liées à une tâche particulière ? Donc optionnel. Écrire le texte facultatif signifie quelque chose parce que c'est du texte, il est facultatif par rapport à un astérisque est une chose très abstraite. Comme PDD. Tout le monde ne sait pas ce que cela signifie. Ainsi, lorsque nous pensons à des informations faciles à comprendre liées à la tâche, optionnel fait mieux. Et puis vous pouvez le faire, j'ai une vidéo complète sur infobulles qui verront que vous pourriez faire une icône d'information et cela vous donnera une astuce sur le survol ou si vous êtes sur le web, ou cliquez sur si vous êtes sur le Web, puis touchez si vous êtes sur le Web. sont sur appareils mobiles et tablettes, regardez, nous utilisons les textes fantômes pour mieux définir les adresses secondaires. Par exemple, l'appartement 111. Vous pouvez utiliser le texte fantôme ici pour des invites comme la crème glacée préférée plutôt que comme la crème glacée préférée, vous pouvez faire des exemples comme le chocolat vanillé, route rocheuse, toutes ces bonnes choses. N'oubliez pas que les utilisateurs vont parcourir vos formulaires. Utilisateurs plus avertis en technologie, ils appuieront sur la touche tabulation du clavier et ils se déplaceront dans chaque champ de formulaire. Cela permet à l' utilisateur d'éviter d'utiliser la souris et de devoir cliquer hors d'un champ de formulaire et de cliquer de nouveau dessus. Une fois encore. Cela revient à ce mot clé, à l'abordance, au moins de temps et d'énergie pour accomplir une tâche. Si vous voyez ici, c' est ainsi que cela fonctionne. L'utilisateur se trouve dans le deuxième champ. Ils viennent de compléter ce texte ici. Ils vont appuyer sur la touche tabulation du clavier. La deuxième formule, celle qu'ils venaient d'utiliser, nous reviendrons à l'état par défaut. Ensuite, le troisième champ étranger dans lequel ils onglet sera désormais dans l' état de mise au point d'entrée et prêt à commencer à taper. Ils peuvent donc parcourir l' intégralité de vos champs de formulaire et ne jamais avoir à cliquer sur cette souris. Allons voir des choses à faire et à ne pas faire. L'une des choses communes ici est la différence entre une disposition de champ étranger à une colonne et une colonne plus en zigzag. Celui de droite. Des études ont été réalisées avec un test de suivi oculaire, test temporel également. Ils ont constaté que les utilisateurs passent plus de temps à sauter une colonne à l'autre lorsqu' il y a une colonne d'outil ici, vos yeux scannent dans Z ici plutôt que de descendre les champs de formulaire. Et quand vous avez un champ de formulaire à une colonne c'est psychologique psychique, mais cela fonctionne mieux parce que vous avez l'impression d'en terminer davantage. Vous descendez davantage dans la liste, ce qui semblait être plus achevé plutôt que de gauche à droite. En fait, il a été constaté que le formulaire à une colonne rempli de la même quantité de champs de formulaire testés par rapport à un formulaire à deux colonnes réellement exécuté était plus rapide, celui d'une colonne était plus rapide que les deux colonnes. Très bien, donc en revenant à cette offre, colonnes simples font également un meilleur travail pour transmettre quels champs de formulaire. Si quelqu'un appuie sur la touche, appuie sur la touche tabulation du clavier, lequel sera le prochain ? Où deux colonnes va-t-elle descendre ou va-t-il aller dans le bon modèle ? Le plus souvent, il fonctionne avec un motif Z, n'est-ce pas ? Il va aller à droite ici, puis par ici. Mais les études fonctionnent et une colonne forme des champs, elles peuvent avoir plus d'espace blanc. Il se peut qu'ils ne remplissent pas votre interface utilisateur si vous disposez d'un ordinateur de bureau volumineux, mais ils sont beaucoup plus faciles à analyser rapidement et ils donnent à un utilisateur un sentiment d' mais ils sont beaucoup plus faciles à analyser rapidement et ils donnent à un utilisateur un sentiment d' achèvement car il se déplace rapidement vers le bas. Une autre petite astuce ici est que vous pouvez leur espacer deux groupes différents, n'est-ce pas ? Donc, si cela concernait le même nom et que cela concernait, je ne sais pas, les informations de l'employeur. Nous utilisons simplement un peu plus d'espace à partir ici pour regrouper ces informations ensemble. Et cela aide davantage la numérisation, en mettant les informations de façon systématique. Vous pouvez voir pourquoi c'est important, pourquoi ces champs de formulaire et l'apprentissage de ces choses sont importants, c'est que cette entreprise a fait une étude sur les raisons pour lesquelles les gens ont abandonné leur site Web pendant le passage à la caisse. Encore une fois, 50 % d'entre eux étaient parce que leurs affaires étaient trop chères. Ils avaient des frais d' achat et des taxes trop élevés ainsi que des frais d'expédition, des taxes et autres choses. 28 % ont déclaré que le site souhaitait créer un compte. Ils avaient un mur de compte. Ils n'ont pas laissé un utilisateur comme un client passer à la caisse. Si quelqu'un veut vous donner votre argent, comme faire en sorte qu'il soit aussi facile que possible d'acheter votre produit et de me donner votre argent. Ne les obligez pas à créer un compte. Mais regardez ici, 21 % ont dit que le processus de paiement, les champs de formulaire sont trop longs, trop longs d'un processus. la caisse compliqué. Il s'agit alors d'un nombre, c'est ce qu'on appelle une mesure quantitative. C'est quantitatif parce qu'il s'agit d'un nombre avec la qualitative, pourquoi ? Pourquoi était-ce trop compliqué ? Alors ? Nous devrions y aller et nous prendrions ici certains de ces principes que nous avons appris il y a. Laine, est-ce un champ de forme à double colonne ? Si c'est le cas, qu'est-ce qui va expérimenter sur une colonne. Vous pouvez sortir ça. Je sauterai sur celui-ci s'il s'agit de mini-champs de formulaires comme celui-ci ici. Vous voyez tous ces champs de formulaire sur la droite, comme éviter cela, c'est beaucoup trop de champs de formulaire. Si vous avez autant d'informations, il est préférable de les mettre dans un assistant. Le magicien est génial pour les formes longues et j'ai une vidéo complète à la fin de la classe ici où je viens de parler uniquement de sorciers. Chez les assistants, c'est génial parce qu' il donne, il décompose toutes les informations de forme longue en catégories de petites bouchées. Cela donne une idée de l'utilisateur, un sentiment de localisation comme si vous vous trouvez ici. Vous avez terminé ces deux tâches, il y a donc des progrès et du temps. Et aussi des progrès et du temps qu'il ne vous reste plus qu' un seul. Il a brisé tous ces champs de forme longue que nous aurions ici à droite. Et cela l'a mis dans un processus étape par étape. Encore une fois, la raison est que cela n'a pas l'air intimidant par rapport à un Zoom Outlook à droite. C'est une tâche intimidante ici pour essayer d'accomplir là où cela n'a pas l' air si intimidant. Et un autre petit truc psychologique, c'est que si vous faites arbre vraiment facile et vraiment facile pour la première étape, c'est super facile. Et si c'est vraiment facile, le plus souvent, des études ont montré que les gens sont plus susceptibles de terminer ces étapes dans la première, c'est vraiment facile, alors la dernière devrait être très facile à écrire. Vous ne voulez pas que les gens tombent. Ils ont déjà fait le travail et rendent le dernier très facile. Et ensuite, c'est fini. Utilisez d'autres choses à faire et n'utilisez pas d'erreurs utiles. Dans ce cas, nous pouvons voir que les mots de passe ne correspondent pas. Évitez des choses comme celle-ci où elles appuient sur le bouton Créer et cela indique simplement que quelque chose a mal tourné, veuillez corriger et vous ne savez pas ce qui a mal tourné, n'est-ce pas ? Par conséquent, chacun de ces champs de formulaire doit comporter sa propre erreur qui s'applique à lui-même. Explorez les entrées de journal, n'est-ce pas ? Vous ne contrôlez pas combien de temps durent les noms des gens. À ce stade, nous devons savoir si cette personne avait un nom long. Nous avons deux options. Est-ce qu'on l'ellipse ? C'est ce que j'aime faire. Donnez ces trois petits points ici pour indiquer à l'utilisateur qu'il y a plus de nom. Et si l'utilisateur souhaite voir plus de nom, il peut cliquer dessus et il peut faire flèche vers l'avant avec la flèche et il y verra plus de nom. Ou nous pouvons diviser cela en deux lignes. Comme ça, ici. Quoi, mais la seule chose avec ça, c'est que ça provoque plus, il déplace le champ du forum et crée plus de largeur ou de hauteur ici. Et cela jette en quelque sorte l'assymétrie de la cohérence visuelle de la hauteur de tous les champs de formulaire. C'est pourquoi je suis plus fan de l'ellipse ici. Mais il suffit d'en être conscient. Vous n'avez pas de gens, certaines personnes ont de très longs noms, très longs noms de famille. N'utilisez pas de champ de formulaire abrégé comme celui-ci. Si vous savez que cela va être long. S'il s'agit d'un e-mail, donnez-leur suffisamment d'espace. Rappelez-vous que celui-ci en a déjà parlé, mais regroupez les sections pertinentes ensemble. Donc, si vous avez le groupe un, le groupe deux et le groupe trois, plutôt que de garder le même espace pour tout. Il suffit d'utiliser de l'espace. C'est tout ce que vous devez faire. Espace, espaces. Whitespace est votre ami. Validation en ligne. C'est génial. Utilisez donc la validation en ligne si vous le pouvez. Donc, si je tape un e-mail et que je mets accidentellement une virgule, erreur moi au moment où j'ai mis une virgule, comme une fois que nous sommes arrivés ici, juste des adresses non valides. Ou si je mets un espace supplémentaire ici, erreur moi à ce stade, cela m'erreur dans le sens de la ligne dans le champ du forum pendant que je le tape, sorte que je peux le réparer avant de quitter ce champ de formulaire. Cela dépend de votre base de données. Ce n'est pas comme si les gens n' allaient pas utiliser votre application, mais il vaut mieux leur faire valider le mensonge. Que se passe-t-il si ce n'est pas le cas, c'est que l'utilisateur remplit toutes les informations, appuie sur Envoyer, puis quand il doit traquer comme quoi ? Oh, pourquoi n'ont-ils pas vécu quelque chose d'erroné ? Ensuite, nous devons regarder le point culminant, le champ du forum ici, et au moment de retaper le champ de formulaire, cliquer sur retaper dessus, corriger l'erreur là où elle revient à cette limite. Comme nous savions déjà que l'utilisateur était ici, nous savions qu'il s'agissait d'une erreur. Pourquoi les laisser partir ? Comme si on leur demandait de le réparer ici. Pourquoi allons-nous faire cela à notre utilisateur ? J'ai parlé de sorciers. Il peut y avoir une vidéo complète sur les sorciers ici. Nous terminerons avec ces deux dernières choses à faire et à ne pas faire. N'oubliez pas la taille appropriée. Nous avons obtenu le code postal ici. Donnez-lui la taille d'un code postal, même s'il supprime votre assymétrie visuelle. Car encore une fois, la convivialité doit toujours dépasser la visibilité ou le visuel. Bien que cela puisse paraître mieux. Regardez la façon dont les gens utilisent la facilité d'utilisation de votre produit est toujours meilleure que l'apparence de quelque chose. Il y a quelque chose qui peut paraître superbe, mais il ne s' utilise pas très bien. Quelque chose n'a peut-être même pas l'air si beau, mais les gens l'utilisent et ont très bien fonctionné. Par rapport à celui de droite ici. Et puis jamais, jamais champs de formulaire à trois colonnes comme celui-ci, s'il vous plaît, ne faites pas cela. Encore une fois, vous pourriez faire les deux colonnes que je viens de mettre au courant, c'est mauvais, ce n'est pas un dôme. Il y a des moments où c'est le cas, nous l'avons fait, mais ne faites pas vraiment trois colonnes ici. Je vais juste me terminer à nouveau avec quelques pièces de haut niveau. J'ai beaucoup parlé de la mise en page d'une seule colonne. Encore une fois, l'une des choses faut parler est la saisie semi-automatique. Complétion semi-automatique. Super. Donc, la saisie semi-automatique est, je le montre dans la vidéo où nous parlons forums d' adresses et de formulaires de recherche. Mais ce que cela fait, c'est qu'il affiche des informations pertinentes basées sur les entrées déjà effectuées par l' utilisateur. Et cela empêche l'utilisateur d' écrire le mot en entier. Donc, si vous tapez simplement mon nom AIR, les compléments automatiques afficheront une liste déroulante ci-dessous, et nous parlerons des listes déroulantes dans la prochaine vidéo. Mais il affichera une petite liste déroulante de ce qu'il pense correspondre à l'AAR. Il dit qu'il peut y avoir des choses arides et quelques autres choses qui correspondent à ce nom. Ce qui se passe ici, ce qui est génial, c'est comme, disons que j'ai tapé mon nom et que je remplissais une adresse et qu'une Erin complétée automatiquement peut également remplir automatiquement mon nom de famille, mon e-mail, mon adresse, ma ville, mon état, et dans de nombreux cas, l' application ne fournira pas cela. Chrome, comme votre navigateur Internet, fera cela pour vous. Mais il suffit d'être conscient de la terminologie. C'est ce qu'est la saisie semi-automatique. Rappelez-vous le sorcier que nous avons montré, je vais parler beaucoup de ça. Mais quels que soient les assistants, c'est toujours génial de penser à des expériences utilisateur, ayant ces trois aspects clés, comme définir l' attente, l'emplacement, comme la location votre actualité ou votre utilisateur sait où il en est dans votre expérience utilisateur, temps et vos progrès, ils auront une tâche à accomplir comme, est-ce qu'ils ont déjà fait ? Où sont-ils et combien de temps reste-t-il ? Quelles sont les étapes à suivre, ce dont ils ont besoin. Nous avons parlé de vouloir simplement nous assurer que nous parlions de la validation en ligne facultative par rapport validation en ligne requise pour donner des erreurs utiles. Je me souviens juste de m'entraîner. Soyez explicite sur la façon dont vous voulez que les gens traitent ces noms longs dans vos champs de formulaire et devinez ce que les ingénieurs voudront remarquer. Ils vont demander, d'accord, alors comment traiter un long nom ? Allons-nous à deux lignes ? Est-ce qu'on fait de l'ellipse ? Et j'aime préférer faire des ellipses comme je vous l'ai déjà montré. Ok, Cool, ce sont des champs de formulaire. Je vous verrai dans la prochaine vidéo. Nous parlerons de boutons. 6. Boutons: Bon, bienvenue à la prochaine classe. Nous allons parler de boutons. Je vais ignorer la théorie des boutons et je le ferai vers la fin parce que je pense que ce sera plus relatif et facile à obtenir une fois que nous aurons traversé tout ça. Très bien, commençons par certains types de boutons, puis je vais aborder les combinaisons de boutons dans différents états et bonnes pratiques et je ferai quelques choses à ne pas faire. Mais généralement, nous avons notre bouton carré. Vous pouvez voir ici que je suis un bon bouton, mesure au moins 50 pixels. Bonne zone de prise, 50 x 50 pixels. La largeur dépend vraiment du contexte du bouton. Vous voulez donc un peu d' espace pour respirer vos textes. Je vais montrer quelques exemples de choses à faire et à ne pas faire. Mais celle-ci, elle mesure 140 pixels de large. Il peut probablement être un peu plus court si vous le vouliez aussi. Mais une bonne marge de respiration pour la topographie à l'intérieur du bouton. Et au moins 50 pixels par hauteur. Nous avons un bouton carré qui n'a pas de bords arrondis. Et vous pouvez voir que celui de droite a des bords arrondis. C'est ce qu'on appelle un bouton de pilule. C'est assez explicite, on dirait une pilule que vous prendriez. Il est entièrement arrondi, arrondi sur les bords. Celui-ci s'appelle un bouton fantôme. Et c'est juste un bouton fantôme car il a un contour de sorte que la couleur principale ici soit le contour du bouton. Et le remplissage est la plupart du temps blanc ou n'importe quelle couleur de l'arrière-plan de ce bouton. Si tout cela ressemblait à une interface utilisateur sombre, ce serait une couleur plus foncée ou si elle était sur un fond blanc, elle serait blanche comme ici. Mais pour l'essentiel, il devrait ressembler à ce qu'il s'agisse d'un contour avec le texte. Et ils sont vraiment parfaits pour les boutons secondaires. Je parlerai un peu de cela où vous pouvez voir ces boutons en couleur sont parfaits pour les boutons primaires. Et ce style fantôme est une excellente combinaison avec le bouton principal. Et c'est pour des actions secondaires. Et je vais parler un peu actions secondaires ici dans une seconde. Nous avons des boutons de texte ou des liens. Ce ne sont que des mots sans éléments graphiques à côté. Et si vous les touchez ou cliquez dessus, ils le seront, ils le seront, ils emmèneront l'utilisateur à un endroit. C'est assez simple. Nous savons tous quels sont les liens. Soit ont la texture de la couleur, vous avez une ligne en dessous. Cela dit, la ligne en dessous est dans certains cas meilleure juste en raison de l'accessibilité. Si quelqu'un est daltonien, il peut ne pas y voir un lien. Mais s'ils voient la ligne en dessous, cela leur indique que c'est l'élément reliable. Les boutons peuvent également contenir des états de chargement. Vous verrez donc que celui-ci est assez courant où l'utilisateur paiera quelque chose sur un site et qu'il cliquera sur le bouton de lecture et au lieu de les sauter dans un autre écran ou dans un autre état, ce qui est comme le chargement. Et si quelque chose ne s'est pas produit, vrai, on s'y trompe. Nous pouvons les conserver dans le même contexte et le bouton se transforme en état de chargeur. Il garde ça. Cela donne ce niveau de contrôle et de rétroaction et vous appuyez sur la touche Paiement, vous voyez les commentaires que nous avons reçus lors du paiement. Attendez une seconde, nous le traitons et nous vous donnerons un succès. À la fin de tout ça. Nous avons encore des boutons d'icônes, ce ne sont que des textes et des combos d'icônes. Vous verrez les plus populaires comme ajouter ensuite, télécharger. Ensuite, vous avez des boutons d'icônes. Ce ne sont que des boutons sans textes, et ils servent simplement d'éléments d'action. Pas de technologie, il s'agit généralement d'icônes plus courantes comme les cartes d' achat et les envois ou les collations, le téléchargement et la fermeture et une annonce. La plupart du temps, ils n'ont pas besoin de texte à côté d' eux car ce sont des icônes communément reconnues. Et ils peuvent entrer dans le bouton comme vous l'avez vu ici, ou ils peuvent simplement être des icônes elles-mêmes. J'ai tout un discours à la fin, l' un des derniers cours dont je parlerai d'un plongeon profond dans les icônes, iconographie et les meilleures pratiques là-bas. Allons voir quelques combinaisons de boutons. J'aime beaucoup ce combo ici, qui est un bouton secondaire à gauche, qui est de couleur plus claire. Ou j'aime le combo du bouton fantôme pour ces actions secondaires et les actions secondaires ou choses comme ça vont être annulées vêtements ou, dans certains cas, peuvent être supprimés. Ensuite, les boutons primaires sont de couleur plus foncée. Et j'aime bien celui qui est rempli ici. Donc, des fantômes sur le champ gauche, à droite. Et c'est là votre action principale. Il s'agit donc de la chose la plus importante que vous souhaitez que votre utilisateur fasse dans un flux de travail particulier ou un écran qui doit être combiné ou accompagné du bouton principal. Il s'agit de choses comme Enregistrer et soumettre ou suivant. Vous pouvez également utiliser la couleur pour indiquer ces boutons secondaires et principaux. Vous l'avez fait. Une couleur un peu moins forte à gauche et une couleur plus forte visuelle à droite. Ensuite, vous avez la pilule Annuler le bouton fantôme sur la gauche et la pilule à droite. Des trucs assez simples ici. J'aime généralement utiliser la même largeur de ces boutons côte à côte. Donc, si vous tirez sur ce bouton d' annulation ici, il s'agit de la même largeur que le bouton Enregistrer, donc il s'empile très facilement. Vous pouvez le voir ici. Ils s'empilent, s'empilent bien contre quelque chose comme ça. Il est normal d'avoir votre bouton Annuler, peut-être un peu plus petit que votre bouton principal simplement visuellement, cela donne un ton plus important à voir ou plus fort à l'action principale. C'est génial lorsque vous effectuez ce type d'alignement horizontal, mais lorsqu'ils s' empilent verticalement comme celui-ci, cela annule l'alignement vertical. Et ce n'est pas une mauvaise idée d'en faire la même largeur. Retournez un peu ici. D'accord ? L'accent sur les boutons, décrivez déjà cela, mais l'accent est élevé pour les actions Kotlin primaires, couleur plus foncée, l'accent moyen, les actions secondaires, la couleur plus claire. Et un faible accent EF, ce qui signifie qu'aucun bouton désactivé d'action qui n'a aucune action ne devrait être très faible. L'accent visuel ou l'apparence visuelle d'un bouton. Allons voir les états des boutons. Encore une fois, nous avons cet état par défaut. Vous avez un état de vol stationnaire ici. Et comme je l'ai dit dans la vidéo du forum, les meilleures pratiques pour le survol sont d' utiliser une couleur plus vive. Cela aide le bouton à devenir plus vivant. C'est comme, Hé, je suis en vie, clique sur moi. Mais rappelez-vous qu' une action que nous utilisons sur le Web, pas les appareils mobiles et tablettes désactivés, j'ai tendance à utiliser 30 % d'opacité pour l'arrière-plan , puis 70 % pour le texte. Vous voulez toujours que les gens puissent lire les textes s'ils sont désactivés, vous voulez simplement les rendre très désactivés. Ils doivent toujours savoir qu'il s'agit d'un bouton de soumission, mais ils devraient le voir comme quelque chose qui n'a pas air engagé ou exploitable. Très bien, vous pouvez donc utiliser des ombres sur les boutons. Je vais vous montrer très vite quelques boutons ici ou quelques ombres ici. Donc, si nous devions ajouter un et que j'ai tout un discours sur les ombres, mais laissez-moi rapidement passer par une petite démo rapide sur les ombres ici. Si nous devions ajouter une ombre à ce bouton, l' une des premières choses à ne pas faire ou à éviter par défaut, l' ombre par défaut que vous obtenez n'est jamais la meilleure, mais ne commencez jamais par défaut. Vous pouvez voir ici qu'il y a quatre sur le y, c'est-à-dire sur la ligne verticale sous le bouton. Pour les pixels vers le bas et il y a 0 sur le x ce qui signifie qu'aucune ombre n'apparaît sur le côté vertical des boutons. Encore une fois, y sur la ligne horizontale et x sur la ligne verticale. Nous voulons au moins cinq de chaque côté et cinq. Maintenant, la partie suivante est que ce bouton est trop sévère. Comme si vous plissez les yeux, vous pouvez toujours voir ce bouton. Nous ne voulons pas cela. Nous voulons un bouton très subtil ici ou une ombre ici. Allons donc y ajouter un peu de flou . C'est déjà mieux. 20 flou sera bon. J'ai généralement aimé même quelle que soit la couleur des boutons, j'aime mettre un peu de bleu, juste un peu de bleu dans l'ombre de couleur de ce bouton, n'est-ce pas ? Donc, quelle que soit la couleur rose ou violette ou autre, un peu bleuté de bleu et la zone noire ou grise de l'ombre sont toujours meilleures que le noir pur. Vous y allez. C'est ça. Donnez-nous un peu de profondeur. On dirait qu'un bouton ressemble à quelque chose sur lequel vous pouvez appuyer. Vous pouvez même y ajouter une couleur. Vous pouvez également ajouter la même couleur ou couleur similaire à l'ombre pour un autre effet. Allons-y donc. Nous allons en fait changer cela. Faisons-le, faisons une couleur bleue ici. Cool. Passons maintenant à la couleur de l'ombre. Passons l'ombre à un peu plus bleue. Cela vous donne un peu plus de regard. Je vais réduire le flou. J'irai probablement un peu plus haut sur l'opacité. Vous y allez. Très subtil. Subtil est efficace. Nous ne voulons pas que l'ombre soit très visible, devrait simplement donner un peu de profondeur. Vous pouvez les voir ici avec l'ombre. n'y a pas de profondeur sur ce bouton. Et ces ombres aident un peu de profondeur ici. Une chose à retenir est que vous effectuez ce système de jumelage où vous avez le bouton fantôme à gauche et un bouton principal à droite. Et un utilisateur passe le pointeur sur le bouton Annuler. Et vous ressentez l'annulation avec l'orange ici, le même orange que celui utilisé pour le bouton principal. Lorsque vous regardez ce survol de données, ils ont tous deux une hiérarchie visuelle égale. Ils sont en compétition l'un contre l' autre juste en état de vol stationnaire. Il vaut mieux éviter quelque chose comme ça et utiliser un survol qui se trouve peut-être encore dans la zone orange, mais un peu plus clair d' un ton orange comme ça vaut mieux, n'est-ce pas ? Le principal ressemble donc toujours au bouton principal, même en survol. Très bien, l'état suivant du bouton est appelé état focalisé. Et c'est quand un utilisateur Ms met en surbrillance cet élément de bouton à l'aide d' une méthode de saisie telle qu'un onglet clavier. Vous pouvez tabuler les champs de formulaire et vous pouvez également accéder au bouton. Ce n'est pas la souris qui passe au-dessus du bouton, mais j'aime utiliser le même état que le survol où la couleur est plus vive lorsque vous apprenez à tabuter le clavier sur le bouton. Ainsi, si vous disposez de trois champs de formulaire et d'un bouton d'envoi, l'utilisateur peut tabuler dans chacun de ces champs de formulaire, insérer des informations, puis tabuter sur le bouton et appuyer sur Entrée sur le clavier en tant que soumission. Cela montre simplement que ce type d'état de focalisation est également important. Encore une fois, tant que vous aurez défini le survol , ce sera le même état pour cela. Il y a un état pressé. C'est alors que l'utilisateur a appuyé sur le bouton. Encore une fois, vous pouvez utiliser une couleur plus claire que celle qui se trouvait sur le survol ou l'état focalisé. Vous pouvez également faire une animation où vous avez cette valeur par défaut, vous avez ce survol, ils appuient dessus et vous obtenez cette petite animation qui se produit assez rapidement, mais elle passe de 123 pressée. Et c'est vraiment subtil, mais cela donne à l'utilisateur le fait qu' il clique sur le bouton ou qu'il appuie sur le bouton. Allons voir des choses à faire et à ne pas faire. Les boutons doivent comporter un ou deux mots, trois mots Max. Plus de trois mots, il n'est pas facile de scanner et de voir quelle l'action principale ou ce que fait le bouton, n'est-ce pas ? Il devrait être très facile de simplement regarder le bouton. Button va informer l'utilisateur de ce qu'il fait. Et ici, vous devez lire dans ce bouton, c'est trop long, trop de texte. Si vous utilisez des icônes de boutons, utilisez alignement horizontal et évitez alignement vertical avec les textes. Les icônes ici créent simplement une forme déséquilibrée et ce n'est pas un bouton courant ici. Il suffit donc de l'éviter. n'y a aucune raison de ne pas faire quelque chose comme ça sur la gauche. Donnez un bon espacement. Vous pouvez voir ici que nous avons donné un espacement égal à partir du haut et un espacement égal vers la droite. Et vous avez un bon bouton comme celui-ci par rapport à celui de droite. Nous avons un bon espacement sur le dessus. Eh bien, nous n'avons même pas d'espacement vers la gauche et la droite, donc nous devons rendre cela un peu plus espacé. Donnez également une bonne marge de respiration à partir du texte. Vous pouvez faire un espacement égal ou ajouter plus d'espace à partir de la gauche et de la droite. C'est utile parce que vous avez une cible de tapotage, l'immobilier que prend ce bouton, sa taille, qui vous indiquera à quel point il est facile de taper ou de cliquer, n'est-ce pas ? y a donc aucun problème. ne devrait pas y avoir de problème à agrandir le bouton, surtout s'il s'agit du bouton principal. Pour faciliter la tâche, toucher et revenir, vous bénéficiez d'une meilleure marge de respiration du texte de votre bouton par rapport à ceux de droite. Comme tous ces boutons se sentent pressés. Comme les champs de texte très pressés ici comme je ne peux pas, je dois le garder de cette façon pour que je puisse vous montrer l'exemple, mais je me serais vraiment approché et juste, c'est tellement mieux. Hier Doit bien bouton maintenant, vous pouvez voir que c'est vraiment difficile pour moi Nazi même de laisser ces boutons comme ça. Encore une fois, il revient à l' espace de tapotage et de clic comme celui-ci devrait être facile à cliquer et à appuyer. Celui-ci a donc besoin de plus de verticalité comme ça semble bien. Si vous utilisez une icône de bouton, utilisez une icône à la fois. N'en utilisez pas plus d'un. Il mélange le style de communication. Vous pouvez voir que celui-ci ressemble à ce que c'est un téléchargement ou NADH. Je ne sais pas. Utilisez une couleur plus brillante pour passer le vol stationnaire. Ensuite, j'ai vu ça une fois. N' agrandissez pas le texte en survol. Utilisez la couleur comme indicateur de survol, non pas le texte et la taille. Si vous avez un lien secondaire comme celui-ci où il est annulé, il se situe très bien sous le bouton Enregistrer. Ne le mettez pas en haut, car la plupart du temps, nous laisserons leur lecture comme ça. Nous voulons que le bouton principal soit la première chose que quelqu'un scanne et pas nécessairement le bouton Annuler car il annule secondaire. Même affaire ici, à gauche. Vous pouvez aussi les empiler. La plupart du temps, nous faisons des boutons primaires à droite et des boutons secondaires à gauche. Vous pouvez changer cette commande lorsque vous avez quelque chose qui peut être accidentel. Si c'est le cas, je vais me presser. Je vais donc aller à un autre cours. Je vais en parler ici. Celui-là, ici. Si vous avez quelque chose où quelqu'un va supprimer quelque chose et supprimer, nous pouvons toujours faire un RU sûr, mobile modal ici et nous avons une suppression et une annulation. Parfois, ces modaux apparaissent et l'utilisateur clique accidentellement dans la position principale ici et le supprime accidentellement. Et c'est une suppression percutante car ils suppriment un compte et nous sommes comme, Hé, voulez-vous vraiment supprimer ce compte ? Comme vous avez fait beaucoup de travail sur ce compte, vous allez tout perdre, donc dès la première suppression qu'ils ont fait, nous lançons ce modal et nous leur donnons juste une chance de dire : êtes-vous sûr de vouloir le faire ? Vous pouvez changer l' ordre de ces boutons, sorte que cela ne se produise pas. Vous pouvez placer celui-ci ici et vous pouvez placer l'annulation à droite, comme ceci et changer cet ordre au cas où ils appuieront accidentellement sur l'annulation. Ce n'est pas l'action principale percutante. Il s'agit d'une stratégie pour utiliser cette combinaison ici pour aider ce cas accidentel où vous appuyez de nouveau accidentellement sur Annuler, mais vous aimeriez tous vous remercier. C'est ce qu'ils ont fait. Je ne voulais pas appuyer sur Supprimer là où vous devez vraiment aller. Je veux vraiment supprimer ce rapport. C'est à peu près tout ce que je décrivais ici. Sur celui-là. Ici, tu peux changer ça un peu. Juste pour les suppressions très percutantes qui se produisent dans celles-ci. Tout ce qui peut être accidentel que vous voulez simplement vous assurer que votre utilisateur ne le fait pas. Lorsque vous utilisez un bouton en arrière-plan d' une photo comme celle-ci, utilisez le bouton couleur de votre champ comme le bouton principal. Et la plupart du temps, n'utilisez pas le bouton fantôme ici car cela aura un impact la lisibilité du texte où sur la lisibilité du texte où celui de gauche se distingue beaucoup plus. Quand il s'agit de liens. Utilisez le bon nombre de mots pour afficher vos liens. Vous voyez donc celui sur la gauche. Si nous vous contentons de cliquer ici pour voir vos directives d'utilisation CR, cliquez ici, les textes bleus. Et tout le reste est donc facile à lire. Il a une bonne lisibilité. Et nous informons également à l'utilisateur que nous utilisons intentionnellement bleu ici parce que nous voulons que vous intergiez avec ce lien. Vous pouvez même aller plus loin et ajouter une ligne ici si vous le souhaitez également. Juste comme ça. Par rapport à la droite, comme tout rendre bleu, je veux vraiment que mes utilisateurs utilisent ça. Ils peuvent, d'abord, ne pas affecter la lisibilité et la lisibilité. Et ils ne savent peut-être pas que tout cela est cliquable. Ils peuvent penser que cela fait partie de votre marque et que vous utilisez simplement des textes bleus pour tout. Soyez intelligent avec vos liens, surtout s'ils attachent deux phrases comme celle-ci. Utilisez une ligne de texte pour vos boutons. Ne faites jamais cela, là où il va à deux lignes. Cela jette juste la symétrie des boutons et ça a l'air super bizarre. Encore une fois, s'il n' y a pas deux lignes, vous avez trop de mots. Nous sommes arrivés à quelque chose pour donner à vos mots comme un bouton avec quelque chose de agréable à donner là, mais ne devrait jamais être sur deux lignes. Encore une fois, gardez les boutons à la même largeur lorsque vous les empilez, puis ne mélangez pas la largeur comme celle-ci lorsque vous les empilez. Très bien, je pense que c'est tout. Passons rapidement en revue la théorie des couleurs du bouton et nous allons terminer. Une des choses que je veux juste appeler ça, vous entendrez cet acronyme se faire balancer. C'est ce qu'on appelle l'appel à l'action. L'appel à l'action peut faire référence à deux éléments qui peuvent faire référence au texte d'un écran particulier, qui est comme la chose la plus importante que vous souhaitez voir à l'écran ou qui fait référence au bouton, le bouton d'appel à l'action, qui est ce bouton principal. Encore une fois, vous avez une action secondaire, c' est-à-dire ce bouton secondaire. Des choses comme revenir et fermer, annuler, des choses comme ça. N'oubliez pas que le bouton de taille doit être facile à cliquer, facile à appuyer sur les directives de l' interface utilisateur d'Apple. Ils disent que tout ce qui s'y trouve, les appareils Apple ou les applications Apple Store, tout ce qui peut être tapé ou doit être de 40 pixels sur 40 pixels. Personnellement, je pense que c'est trop petit. J'ai tendance à faire au moins 50 pixels 50 pixels comme le plus petit. Encore une fois, rappelez-vous que la couleur d' arrière-plan doit avoir un bon contraste et devrait se démarquer des autres composants de l'interface utilisateur s'il s'agit du bouton principal, n'est-ce pas ? Le bouton principal devrait donc être l'une des choses les plus semblables et les plus sombres de l'application. C'est donc très facile à savoir. Pouvez-vous vous montrer un exemple de ce que vous devez faire, n'est-ce pas ? Donc, si vous regardez cette page ici, plissez les yeux et regardez-la, cette orange éclate, n'est-ce pas ? C'est donc la principale chose que nous voulons que l'utilisateur fasse. Nous utilisons donc la hiérarchie visuelle pour transmettre cela également. Vous pouvez également utiliser cette couleur à nouveau pour différencier les touches entre le bouton principal et le bouton secondaire. J'ai déjà parlé de formes. Donc, juste des formes de pilules horizontales. Le placement est également crucial, n'est-ce pas ? Quelle que soit la couleur de votre bouton ou la taille de votre bouton. S'il ne se trouve pas dans un endroit où les utilisateurs vos utilisateurs ne peuvent pas le voir ou le scanner facilement , ce n'est pas aussi efficace. Ainsi, le placement de ces boutons dépend de votre contexte, mais généralement en haut ou bas de vos écrans fonctionnent mieux. Là encore, la copie doit être courte et douce, facile à lire, facile à numériser. Et si vous ne savez pas à quoi appartient le bouton du copieur, il doit indiquer ce que le bouton va faire. OK, c'est cool. C'était des boutons. Je vous verrai le prochain. On se voit tous dans la vidéo suivante. Nous couvrirons les dépotoirs. 7. Les gouttes: Très bien, parlons un peu des listes déroulantes. listes déroulantes sont à peu près des éléments formés. La seule différence est qu' ils sont utilisés pour la sélection. Ils ont donc quelque chose que lorsque vous cliquez sur le champ de formulaire ici, menu apparaît un peu ce que nous appelons le menu déroulant ici. Il y a des variables de sélection pour l'utilisateur. Ils sont parfaits pour tout ce qui comporte trois éléments ou variables ou plus à sélectionner par un utilisateur. Parce que vous pouvez mettre tout un tas de ces objets. Vous pouvez placer, disons, 15 de ces sélections dans la petite fenêtre. Et cela permet d'économiser une tonne de biens immobiliers à l'écran, plutôt que de ne montrer que 20 de ces sélections. Mais si vous n'avez que deux à trois variables ou éléments de sélection pour un utilisateur, il vaut mieux utiliser un bouton radio ou une case à cocher. Et je vais vous les montrer en vidéo ici. Je ne pense pas à la prochaine vidéo, mais à la vidéo après nous plongerons dans les boutons radio et les cases à cocher. Le critère d'une liste déroulante est, encore une fois, que nous utiliserons les mêmes styles pour nos champs de formulaire. Vous verrez le champ du formulaire hiérarchique ici. Ensuite, le formulaire d'interface utilisateur matériel qui n'a que la ligne. La seule distinction d'un champ de formulaire et d'un menu déroulant est la petite carotte, cette petite flèche bleue ici. Lorsque vous cliquez dessus, le menu déroulant s'ouvre. Et la chose requise pour la liste déroulante, c' est que l'utilisateur ne peut sélectionner qu'un seul élément, puis cette sélection devient l'entrée ici où se trouve le texte fantôme. Si vous avez plus 20 éléments dans une liste déroulante, il est également préférable de faire un type de tête ou de saisie semi-automatique, ce que je vais vous montrer ici dans une seconde. listes déroulantes sont idéales non seulement pour les formulaires, mais vous pouvez également les utiliser comme menus. Vous les verrez donc beaucoup sur les sites de commerce électronique. Vous les verrez dans le système d'exploitation de votre ordinateur comme Mac. La zone de la fenêtre supérieure contient des menus déroulants ici. Vous verrez de nombreuses listes déroulantes pour les menus qui ressemblent à ceci. Voici notre site Bobo t sur nos produits ménagers. Et ensuite, l'architecture apparente est la marchandise domestique. Et les informations sur le niveau des enfants basées sur articles ménagers sont des oreillers, des estampes et des horloges et ce que vous avez. Ensuite. Vous verrez également des listes déroulantes sous la forme de menus appelés méga menus, où il s'agit de grands sites de commerce électronique et ils ont plusieurs architectures d'informations où ils ont un niveau parent tel que des articles de maison et ils ont un niveau enfant comme des oreillers, puis ils ont tout un tas de petits-enfants niveaux un oreiller ici. J'obtiendrai toutes ces informations et ces menus et une vidéo que je pense vers la fin de la classe, j'ai parlé de menus et de tiroirs, et nous allons approfondir ce sujet. Voyons ici quelques styles déroulants typiques. Nous avons donc le style par défaut. Encore une fois, nous avons ce survol où le contour devient bleu. Nous avons la fenêtre de dialogue ou la liste déroulante qui contient les menus. Notez également que dans ce menu déroulant, vous avez également le survol ici. Cela suivra votre souris. Encore une fois, survolez votre ordinateur de bureau, mais pas pour les appareils mobiles ou tablettes, puis vous avez l'état actif. Il s'agit donc de la valeur sélectionnée ici. Par conséquent, si un utilisateur a sélectionné quelque chose , l'état d'erreur s'affiche. Semblable à nos champs de formulaire et à notre message d'erreur et un contour pour le rouge pour indiquer l'erreur. Et là encore, vous avez cet état désactivé, donc 30% dépassent la transparence ou, ou un gris très clair. Ou vous pouvez même faire les deux pour indiquer que ce menu déroulant est trop stable. Examinons quelques types de listes déroulantes et de cas d'utilisation. Ils sont parfaits pour tout ce qui a une valeur de plage. Vous dites plutôt : combien de pieds carrés est votre maison ou combien d'argent gagnez-vous par mois ? Et vous pouvez utiliser à nouveau les textes fantômes pour donner un peu l'objectif de communication ou l' invite comme l'exemple 500 à 100. Lorsque l'utilisateur clique dessus, il voit toutes les plages qu'il peut sélectionner ici. C'est mieux qu'une simple entrée droite comme j'ai mélangé 2300 par mois. Vous pourriez en fait coûter 335$ par mois. Parfois, il est préférable dans ces valeurs de donner une fourchette. Et cela permet à l' utilisateur de sélectionner plus facilement une plage et ce n'est pas si intrusif. Surtout quand on pense à combien gagne-t-on un mois par rapport à un nombre exact par rapport à une fourchette. Et même pour les pieds carrés ici. Comme si vous ne connaissiez peut-être pas vraiment votre superficie exacte, mais vous connaîtrez une estimation approximative de la superficie de votre maison. La gamme et les listes déroulantes sont donc bonnes pour aller ensemble. Vous pouvez donc combiner les listes déroulantes avec des champs de formulaire. Vous pouvez donc voir ici que nous avons la valeur de notre numéro de téléphone. Disons que c'est un produit international, vous pouvez utiliser le menu déroulant ici pour sélectionner le type de numéro de téléphone que vous allez entrer. Ensuite, le format à quatre chiffres ici et les textes fantômes changeront en fonction de la sélection du pays que vous avez sélectionné. Encore une fois, si vous avez plus de 20 éléments, lorsque l'utilisateur clique si vous avez plus de 20 éléments, sur le formulaire ici, il verra la liste déroulante, mais il verra également l'état de saisie. Et lorsque l'utilisateur saisit, il filtre la liste ci-dessous. Vous verrez donc cela très courant pour les sélections d'états. Ainsi, lorsque vous tapez, MA, vous verrez apparaître la liste déroulante des filtres d'éléments en fonction de ce type. Et encore une fois, vous pouvez aller ici et cliquer sur Maryland, ou vous pouvez faire flècher le clavier vers le bas sur votre clavier et aller faire et sélectionner cet élément. Ainsi, l'état de survol ne fonctionne pas seulement pour survoler la souris, mais il fonctionne également si vous étiez un clavier fléché vers le bas sur votre clavier ici également. Un attribut important de ce genre est négligé. Parfois, c'est l'état de survol de cette liste déroulante ici lorsque vous concevez cela, vous pouvez combiner ces listes déroulantes avec des cases à cocher. Supposons donc que vous vouliez quelque chose qui comportait plus d'un type de sélection. La liste déroulante par défaut n'est qu'un seul critère de sélection sélectionné. Mais dans ce cas, vous pouvez le combiner avec les listes déroulantes pour informer une sélection multiple. Dans ce cas, nous examinons toutes les saveurs de crème glacée. Cochez les cases ici. Et si un utilisateur clique sur les cases à cocher et ferme la liste déroulante en cliquant en dehors de la fenêtre déroulante. Ainsi, chaque fois que cette liste déroulante apparaît, vous cliquez en dehors de celle-ci et elle se ferme. Et vous pouvez voir ici les sélections basées sur la liste déroulante multi-sélections qui s'affiche. Et si vous cliquez sur le X ici, il désélectionne la vanille dans la liste déroulante, et cette valeur sera également supprimée ici. Cela apparaîtrait et des biscuits et de la crème, qui glissent ici comme ça. C'est génial. Une autre façon d'utiliser la même liste déroulante consiste à créer une icône de filtre. Vous pouvez donc voir où le menu déroulant comporte le porteur ou la flèche pour indiquer la liste déroulante. Ensuite, pour le filtrage, nous utilisons une icône de filtre. Et si vous ouvrez cette icône de filtre vers le haut, vous pouvez voir que vous sélectionnez des types d'aliments. Cela serait bon pour une commande de service de livraison en ligne. Et dans ce cas, la nourriture chinoise, italienne et indienne est filtrée. En général, vous avez l'icône de filtre et en bleu ou en couleur pour indiquer que ce champ de formulaire est filtré. S'il n'était pas filtré, ce qui signifie que tout le type d'aliment a été sélectionné. Cela pourrait ressembler à ceci, qui est le choix. Juste la couleur grise ici, la même couleur que la couleur du trait. Il s'agit de l'état par défaut. Et s'il filtre la liste, elle devient bleue pour indiquer à l'utilisateur que les informations ci-dessous sont filtrées en fonction des types d'aliments. Encore une fois, vous pouvez utiliser le défilement dans la liste déroulante et faire défiler avec la souris pour voir les autres sélections situées sous le pli. Sous le pli signifie que ce sont les sélections que je ne vois pas sous la fenêtre de dialogue ou la fenêtre déroulante. Une grande chose que vous verrez souvent ici. Et vous n'avez peut-être pas remarqué qu'une liste déroulante mobile, une liste déroulante sur votre appareil mobile est un peu différente d'une liste déroulante de ce que nous venons de voir sur le Web. liste déroulante Mobile utilise l'ensemble de l'immobilier, toute la largeur du téléphone, et il permet de sélectionner facilement les éléments ici et faire défiler les éléments qui se trouvent dans le les éléments qui se trouvent dans cette liste déroulante, n'est-ce pas ? Ce que vous voulez éviter, c'est d' utiliser un menu déroulant mobile au format Web comme celui-ci, car il utilise moins d'espace et il peut être difficile d' appuyer sur cette zone et de le balayer pour voir le reste du éléments déroulants. Et il n'utilise pas non plus l'espace complet pour l' immobilier à claquer. Sur un appareil mobile, votre robinet convivial et convivial. Et le plus facile à atteindre est là où ces boîtes grises, c'est l'idée derrière une liste déroulante mobile est utiliser l'immobilier complet du téléphone, toute la largeur. Facilitez également le balayage vers le haut et vers le bas dans cette sélection déroulante. Ça ressemble à ça. J'en ai un ouvert ici. Tout ce que vous avez à faire est de cliquer sur le I sucré régulier ou de taper sur de la glace sucrée régulière ici. Votre niveau de douceur apparaîtra et s'il y avait plus de champs, il vous suffit de cliquer et de faire glisser notre balayage. Et cela montrerait des valeurs de niveau de douceur différentes ici. Et si vous sélectionnez le sucré ordinaire ou le semi-sucré ici, cela va fermer le menu déroulant. Vous avez un grand tapioca si vous le voulez. Je ne veux pas vous donner faim d'Abeba t mais oui, c'est essentiellement la liste déroulante mobile. Encore une fois, pour éviter les listes déroulantes de style Web sur les appareils mobiles, vous pouvez le faire pour tablette. Mais comme notre immobilier est si petit sur nos appareils mobiles, c'est un glissement vers le haut par le bas. Ensuite, lorsque vous touchez votre sélection, elle glisse vers le bas. Allons plus loin dans certaines choses à faire et à ne pas faire. Encore une fois, un menu déroulant est idéal pour trois valeurs ou plus. Une autre chose est que le formulaire de date rempli, il est préférable que l'utilisateur saisisse simplement la date ici. Mois, mois, jour, jour, année, année, année. Ensuite, au lieu de faire les listes déroulantes pendant des mois, des jours et des années distincts , des jours et des années , parce que c'est une affaire, il faudra trois onglets ou trois clics pour entrer ici et saisissez ces informations, puis trouvez la date. Imaginons que vous regardiez votre anniversaire ou quelque chose comme ça, pour faire défiler vers le bas et trouver la date à laquelle vous êtes au lieu d' engager une seule fois, seul clic, des numéros de clavier, entrées et être en mesure de saisir les chiffres en fonction de ce clavier. Ils sont parfaits pour les formulaires combinés remplis d'un sélecteur de date. Donc, ce que c'est que j' ai une discussion sur les sélecteurs de dates le prochain, je crois que la prochaine vidéo nous parlerons des sélecteurs de dates ici. Mais essentiellement, vous pouvez y entrer, vous pouvez entrer la date ici ou cliquer sur l'icône du calendrier, qui affichera ensuite le sélecteur de date. Et vous pouvez soit passer la journée d'aujourd'hui par défaut, soit avancer dans le temps ou revenir dans le temps en fonction du contexte de cela, si c'est comme planifier un rendez-vous, alors vous n'êtes que va aller de l'avant à temps. S'il s'agit plutôt d'une référence de date d'heure passée, comme si vous souhaitez qu'elle examine les analyses ou quelque chose qui s'est produit hier sur votre site Web, vous pouvez cliquer à nouveau dans les jours et ne partirez pas. Vous ne pourrez pas non plus passer à l'état futur ici. Mais j'aborde tout ça dans la vidéo du sélecteur de dates ici dans une seconde. Ok, donc si vous avez moins de trois valeurs, il est préférable de les exposer sous forme de boutons radio ou de cases à cocher, car encore une fois, cela revient à l'abordance est moins de clics et expose les informations à le niveau du visage et non dans le menu déroulant. Évitez donc si la question est que vous avez plus de 21 ans, utilisez les boutons radio oui ou non contre Avez-vous plus de 21 ans ? Cliquez sur, puis vous devez maintenant faire un autre clic. Non. C'est donc encore un clic. Il vaut mieux faire une version comme celle-ci avec les boutons radio. Liste déroulante. La largeur doit être minimale au minimum. Donc la fenêtre ici, cette chose, cette largeur doit être au moins la longueur du formulaire déroulant rempli. Ne rendez pas le champ de formulaire ici moins large que la boîte de dialogue réelle ou la boîte de dialogue déroulante. Ne réduisez pas cette largeur dans le champ de formulaire ici. Ce n'est pas grave s'ils passent comme s'ils pouvaient aller un peu plus loin que le menu déroulant lui-même. Il suffit de ne pas le faire moins de largeur ici à droite. Vous pouvez faire l'un ou l'autre comme ce champ de formulaire peut se trouver au-dessus de cette liste déroulante ici. Comme lorsque vous cliquez dessus, il ne peut pas dépasser la valeur. Ou il peut voir qu'il peut faire ce qu'il fait ici, c' est-à-dire qu'il glisse sous le champ de formulaire, soit un, soit totalement bien. Vous pouvez donc voir l'exemple ici comme si vous cliquez ici et la boîte de dialogue du champ de formulaire ici. Il va en plus de ce favori pour la liste déroulante des couleurs. Alors que c'est juste en dessous. Il n'y a ni bien ni mal ici. Ils ont dit que les deux sont acceptables. N'oubliez pas de bien espacer la flèche ici et le texte. Et utilisez toujours la largeur qui détermine la largeur de votre liste déroulante en fonction du mot le plus long que vous avez dans la zone déroulante. C'est ce qui déterminera la largeur lorsqu'elle est sélectionnée. Donc, si vous avez un long mot ici, assurez-vous que cela couvre le mot long ici. Et si ça dure plus longtemps, permettez-moi de taper ça très rapidement. Cool. Donc, si cela dure plus longtemps que le menu déroulant, ce que vous pouvez faire, c'est que vous avez le choix. Vous pouvez passer à deux lignes, ce que je n'aime généralement pas faire. Ou encore, vous pourriez faire ce que nous avons fait dans le passé, qui est une ellipse off. Bien, il suffit d'aller trois autres comme ça. Mais disons que votre parole est exactement là où elle est. Supposons que vous ayez le mot le plus long dans cette liste déroulante où vous n'avez qu' un mot sur la deuxième ligne. Il est préférable d'ajouter un peu plus de largeur à votre liste déroulante. Sortez ce qui est trop serré ici. Ajoutez-le un peu plus longtemps. Vous y allez. Cela devrait être une bonne largeur pour le mot le plus long de votre menu déroulant. Ce serait donc comme la plus longue saveur de crème glacée au monde ici. Je vais défaire ça. Encore une fois, donnez juste un espacement adéquat pour ces listes déroulantes. Ne serrez pas la flèche ou les textes ne permettent pas à ces choses de respirer. Encore une fois, ellipsez les mots longs ici, et ne passez pas à deux lignes. Je pense que ça a l'air bizarre de jeter aussi l' alignement asymétrique. Encore une fois, donnez un bon espacement entre les textes et les champs de formulaire. Ne les écrasez pas comme ça, non ? Cela devrait aller, lui donner une certaine marge de respiration. Bien trop serrés ici, ils étouffent cette chose devraient pouvoir respirer un peu. Comme toujours, utilisez la bonne longueur pour faire défiler la boîte de dialogue, n'est-ce pas ? Donc, tout ce contenu ici devrait pouvoir faire défiler. Ne rendez pas la zone de liste si grande qu'elle affiche tous les éléments, car elle ne conviendra pas à votre appareil ou à votre bureau. Et vous allez faire défiler le tout pour descendre. Quoi qu'il en soit, si vous avez une liste aussi longue, il vaut mieux faire un type de tête. Quoi qu'il en soit, affichez simplement la liste ici si l'utilisateur veut faire défiler vers le bas et la trouver géniale. Mais ils peuvent également taper sur le clavier et filtrer rapidement cette liste, puis trouver la valeur de la variable ou la sélection d'entrée qu' ils recherchent. Très bien, c'était des listes déroulantes. Et sur la prochaine vidéo, nous allons couvrir les sélecteurs de dates. Je vous y verrai. Au revoir. 8. Choix de dates: Parlons des sélecteurs de dates. Un sélecteur de dates est à peu près un menu déroulant pour les dates. Il permet également à un utilisateur de sélectionner des dates en interagissant avec une superposition de calendrier. Et il existe principalement deux types courants fonctions de sélecteur de date. Le premier ici permet de sélectionner une date spécifique. L'autre option la plus courante consiste à sélectionner la plage de dates. Commençons par le premier ici. S'il est utilisé pour sélectionner un jour spécifique, il est couramment utilisé pour la planification. Si vous deviez prendre rendez-vous, disons au Genius Bar, Apple Genius Bar ou à un aller simple. Ou si vous n'avez pas créé de rendez-vous pour votre Diego, vous n'avez pas vu votre dentiste pour se faire nettoyer les dents. Et ce qui se passe ici, c'est que cela fonctionne comme un menu déroulant et que vous cliquez sur le champ de formulaire lui-même. Le menu déroulant superposition de calendrier indique que vous avez une petite zone grise qui indique le jour où vous êtes , puis que vous touchez n'importe où et vous verrez que le séjour actif apparaît non seulement là où se trouvaient les textes fantômes, vous verrez le texte terminé actif. Vous verrez également une représentation de cette sélection sur la superposition du calendrier. Ensuite, il devient un peu plus compliqué quand choisir une plage de dates et, encore une fois, couramment utilisé pour les vols aller-retour ou les séjours à l'hôtel. Des exemples que vous pouvez trouver sur Google Flights ou Travelocity. Et ce qui se passe ici, c'est si ces dates d'enregistrement et de départ ou de départ et d'arrivée sont à la fois. Dates d'arrivée ou de départ. Ceux-ci apparaissent sous la forme d'une superposition de calendrier égale, mais de deux types différents de champs de date. Et ce qui se passe ici, c'est que lorsque vous cliquez et dites la date d'enregistrement, votre première sélection fait la première date. Et ensuite, sur la même superposition de calendrier, vous pouvez avancer des mois ou des mois en arrière. Et la deuxième sélection correspond à la plage de dates. Et vous appuyez sur OK ou vous pouvez cliquer hors de la fenêtre déroulante et la fermer. Et la première sélection saisira la valeur du premier sélecteur de date. Et la deuxième sélection ici, nous saisirons la valeur du deuxième sélecteur de date. Allons donc voir les États pour trouver un sélecteur de dates ici. Encore une fois, vous avez les deux types de styles les plus courants. Vous avez cette interface utilisateur matérielle pour qui n'a que la ligne. Et puis vous avez le formulaire de contour ici, nous sommes des décalages et un rectangle de contour. Encore une fois, l'état de vol stationnaire, revenant au principe où quelque chose s' allume ou a l' impression d'être vivant. Nous allons utiliser le bleu pour le contour ou pour l' interface utilisateur du matériau supprimée, sélecteur de date, la règle déroulante, utiliser la ligne pour, la ligne deviendra bleue. Et puis nous avons à nouveau l'état actif, c'est juste l'état d'entrée. L'erreur reste ici. Et un état désactivé en tant que transparence de 20 % dans le sélecteur de dialogue du calendrier. C'est assez compliqué en soi, juste la boîte ici parce qu' il y a beaucoup de choses à faire. Vous pouvez remonter un mois, vous pouvez aller de l'avant un mois. Comme je l'ai déjà dit, vous avez le rectangle gris autour des données. C'est aujourd'hui. Vous avez l'indication bleue, qui correspond à la date sélectionnée ou activée. Et puis vous avez également un état de survol qui ferait le tour et suivrait votre souris ici. Il y a donc beaucoup de choses à faire dans la boîte de dialogue. Vous pouvez également les utiliser et, encore une fois, vous pouvez les combiner avec un champ de date. Si vous avez une sélection de date, l'utilisateur peut entrer et taper comme nous le ferions le champ de date dans les champs de formulaire que nous avons vus auparavant, il suffit d'ouvrir un type de pavé clavier dans les chiffres, fera les barres obliques eux et ensuite ils finiront ça. Ou bien, ils peuvent cliquer sur l'icône Menu, ce qui ouvrira ensuite la liste déroulante du sélecteur de date ou la fenêtre de dialogue où ils pourraient sélectionner, faire la sélection pour la date. Vous pouvez également être assez rusé avec votre boîte de dialogue de date ou votre sélection déroulante. Et vous pouvez faciliter un peu la sélection des années passées et vous pouvez ajouter des mois. Et encore une fois, cela aiderait à rendre un peu plus facile pour l' utilisateur de remonter des années, passer dans différents mois ici, puis de faire les sélections ici également. Lorsque nous parvenons aux sélecteurs de dates mobiles, je vous le recommande, et c'est la meilleure pratique d'utiliser l'immobilier en plein écran. Et je vais vous montrer quelques exemples que nous avons créés pour une application sur laquelle je travaille. C'est génial pour. Encore une fois, tapez sur l' immobilier à utilise l'immobilier plein écran que nous avons, le précieux. Écrivez les biens immobiliers que nous avons sur les appareils mobiles. Et il est très facile de glisser deux années différentes. Je vais vous montrer un exemple ici dans une seconde. Encore une fois, il est très clair d'utiliser le, si cela prend l'immobilier en plein écran, vous pouvez utiliser ces barres ici pour indiquer que la plage de dates dans laquelle vous avez sélectionné pour un individu date aussi. Et encore une fois, il s'agit d'un immobilier plus exploitable, facile à balayer vers le haut et vers le bas et voir les mois à venir. Vous pouvez le voir ou les mois précédents, vous pouvez le voir dans des exemples Google Flight. Si vous allez voir Google Flights sur votre téléphone. Et puis voici le sélecteur de date nous utilisons pour une application sur laquelle je travaille. Il s'agit d'une application solaire, et vous avez essentiellement le sélecteur de date ici. Vous pouvez remonter le temps et analyser votre système. Et si vous cliquez sur ce mardi ou que vous touchez ce mardi, vous verrez à nouveau la diapositive de date. Vous pouvez y retourner. À ce stade, regardez à quel point il est facile de passer des mois différents. Très bien, pour que je puisse facilement aller dans le passé. Disons que je voulais aller voir le 23 septembre ici, je peux cliquer sur le 23, appuyer sur Terminé. Et cela changerait ma sélection ici. Il est beaucoup plus facile que de faire des allers-retours sur ces flèches, comme un moyen rapide d' entrer et de choisir une date. Ensuite, je vais vous montrer ici le champ de date personnalisé. Donc, le même principe ici. Nous appuyons sur la coutume, les diapositives et vous avez les dates de début et de fin. Encore une fois, il est très facile pour l' appareil mobile de glisser ces différents mois. Disons que je voulais faire le 29 septembre, jusqu'au 13 septembre. Et vous pouvez voir l'indication des barres orange pour transmettre à l'utilisateur la plage de dates. Et si vous appuyez sur Terminé, nous aurons la plage ici. Et l'utilisateur peut y retourner, ajouter des dates différentes dont il a besoin. C'est la meilleure pratique pour les sélecteurs de dates sur le Web, vous pouvez utiliser des choses comme ça. Ensuite, vous pouvez également utiliser ce type d' interaction pour les sélecteurs de dates mobiles. Passons à quelques choses à faire et à ne pas utiliser un champ de formulaire de date pour les anniversaires. Encore une fois, si vous faites une date de naissance, utilisez le format comme celui-ci où nous montrons MM, JD, YY. N'utilisez jamais de sélecteur de date pour un champ de formulaire de date de naissance. Cela s'affiche lorsque vous cliquez dessus, lorsque l'utilisateur clique sur le champ du formulaire du sélecteur de date, la liste déroulante passe par défaut à la date d'aujourd'hui. Donc, si vous pouvez imaginer, né en 1979, je dois revenir en 1979 ces mois. Comme personne ne voudra le faire là où sur un champ de formulaire ici, je peux simplement taper le format ba, ba, ba, ba, ba, ba, ba, ba, done. N'oubliez pas pour les appareils mobiles, donnez suffisamment d'espace pour votre calendrier et n'oubliez pas de donner un bon espace Tap. Si vous vous rappelez dans la vidéo précédente, j'ai parlé des directives d' interface utilisateur d'Apple d' au moins 40 pixels sur 40 pixels pour tout type de propriété sur votre appareil mobile. Vous pouvez voir ici si nous avons rendu le calendrier vraiment petit, il sera très difficile d' utiliser une valeur spécifique, surtout si vous avez de gros pouces ou de gros doigts. Voici donc 50 pixels sur 50. Vous pouvez voir que ce n'est pas le cas, ce n'est pas suffisant. Il va rendre quelqu'un vraiment difficile de sélectionner une seule de ces valeurs où, ici, chacune de ces lettres sont ces chiffres ici est précisément espacée de 50 par 50 pixels. Pour que nous suivions ce principe. Très bien, donc c'était adapté à la date, les sélectionneurs de dates. Et je vous verrai dans la prochaine vidéo où nous couvrirons les boutons radio, cases et basculer les modèles et les composants de l'interface utilisateur. voit là-bas. 9. Boutons radio, checkboxes, Toggles: Très bien, dans cette vidéo, nous allons parler boutons radio, de cases à cocher et de bascules. Pour boutons radio. Ils sont utilisés lorsqu'il existe une liste de deux options ou plus. Leur fonction permet à l'utilisateur de sélectionner exactement un choix. C'est tout ce que vous obtenez. Un choix avec les boutons radio. Et si vous cliquez sur un bouton radio non sélectionné, il désélectionne l'autre bouton radio sélectionné. Il ne s'agit donc que d'une fonction à choix unique. L'origine ici est qu'un bouton radio a été modélisé ces boutons radio physiques qui se trouvaient dans de vieilles voitures. Et ce qui se passe, c'est que vous auriez ces stations préférées prédéfinies que vous le feriez, l'utilisateur choisirait. Si vous cliquez sur cette sélection am ici, la voiture retournera lire la station de radio définie présélectionnée que vous aviez. Et si vous cliquez sur une autre station AM, celle qui était juste là reviendrait, et celle-ci reviendrait en jouant à l'autre station préférée que vous auriez. Il s'agissait donc d'une fonctionnalité similaire aux boutons radio, ce qui signifie qu'il ne s'agit que d'une seule sélection à la fois. Et au lieu de surgir et d'entrer dans le monde d' aujourd'hui, ils ressemblent davantage à ceci. Il y a des cercles pour un état par défaut, puis pour l'état actif, vous obtiendrez les deux cercles ici et les cercles intérieurs se remplissent, toujours remplis comme ceci. Vous pouvez les personnaliser. Je vais vous montrer comment les personnaliser ici dans une seconde. Mais dans la plupart des cas, il y a généralement déjà un bouton radio prédéfini dans l' état actif sélectionné. Même si vous avez eu une question de bouton radio comme celle-ci, j'ai dit : Avez-vous plus de 21 ans et vous appuyez sur Oui. Maintenant, il n'y a aucun moyen de le désélectionner. Vous ne pouvez pas simplement désélectionner cet état, c'est-à-dire revenir à cet état. Une fois que l'un est sélectionné, il reste sélectionné et vous devez maintenant choisir l'un ou l'autre, oui ou non. C'est la principale fonction du vent et c'est pourquoi vous devez utiliser un bouton radio, surtout au-dessus d'une case à cocher. La case à cocher vous donne plusieurs sélections. Si un bouton radio n'est qu'un seul critère ou une fonction de sélection. Vous pouvez voir ici quelques cas d'utilisation si vous deviez choisir à quelle heure voulez-vous, quelle heure est-il l'heure de votre dîner ? Et vous sélectionnez cinq heures, six heures ou sept heures, ce ne sera qu'une seule fois. Vous n'avez qu'une seule fois, dites en ce jour que vous allez dîner. S'il y a eu d'autres fois que vous ne voyez pas, voici comment le combiner avec un champ de formulaire ouvert si vous appuyez sur Autre que le formulaire ouvert rempli passe de l'état désactivé, qui est à nouveau à 20 % d'opacité et devient désormais l'état par défaut. Et un utilisateur peut entrer dans un créneau qu'il ne voit pas en fonction de son heure de dîner ici. Cool. Vous pouvez faire des boutons radio personnalisés ici où, dans ce cas, nous avons une sélection de votre sexe. Et donc, soit vous êtes un homme ou une femme. Et si vous êtes une femme, vous, lorsque vous placez votre souris ici, vous verrez le contour rose comme un survol. Ensuite, vous aurez cet état sélectionné, qui correspond à l'état couleur ici. Mais encore une fois, nous utilisons des boutons radio pour obtenir la bonne quantité de contenu ou de fonction, qui n'est qu'une seule sélection. Vous pouvez voir qu'il s'agit d'un style personnalisé pour une radio, mais il ne ressemble pas à un bouton radio, mais il fonctionne exactement de la même manière qu'un bouton radio où, si vous cliquez sur Mel, il désélectionne la case femelle et elle choisirait le mâle. Ici. Vous pouvez voir la même sélection ici est que j' ai sélectionné Mel et non féminin. Et si vous passiez votre souris sur l'état féminin ici, il cliquerait et cliquerait. Vous choisiriez également la carte féminine ici. La différence est que nous avons inclus le bouton radio ici sur la carte elle-même, n'est-ce pas ? Nous avons donc ajouté la carte. Sans la carte, ça ressemblerait à ça. Nous avons ajouté la carte ici pour lui donner un peu plus d'élégance. Si vous avez plus de trois sélections de boutons radio de ce type, disposez-les verticalement. C'est normal de les faire côte à côte ici. Si vous en avez deux ou trois, vous pouvez probablement pousser jusqu'à quatre. Mais plus que cela, vous voulez disposer verticalement, c'est plus facile à lire et à numériser. Très bien, voici une sélection où vous avez tout un tas de boutons disposés ici. Et ce qui se passe quand ils sont disposés verticalement sorte, c'est que vous n'avez peut-être pas assez de biens immobiliers pour que tous ces biens soient adaptés et que vous ne voulez certainement pas les diviser en deux lignes, Je vois juste à quel point ça a l'air bizarre. Et ce qui se passe, c'est que l'utilisateur a du mal à analyser l'association entre le bouton radio qu'il a sélectionné et l'heure. Vous pouvez donc voir que les sept heures sont entrées, mais parfois il peut être déroutant si le bouton est pondéré ici plus de six heures, ou est-ce sept heures ? Si vous le placez verticalement comme ça, cela peut prendre plus de biens immobiliers à l'écran. Mais en ce qui concerne la fonction, la relation entre le bouton radio et le champ temporel est beaucoup plus claire relation entre le bouton radio et le . Si vous avez plus de dix options, disons , il vaut mieux utiliser une liste déroulante à nouveau. La liste déroulante remplit la même fonction. Il s'agit d'une sélection à la fois. À quelle heure allez-vous vous coucher ? Et vous allez faire notre texte fantôme ici. Par exemple 1030, ils peuvent entrer, faire cliquer sur le menu déroulant, sélectionner 1030 ou autre, sélectionner 1030 ou autre, quelle que soit l'heure où vous vous couchez, peut-être quatre heures du matin. Nous sommes ici. Cela prend un peu trop de biens immobiliers à l'écran. Et il est important de rechercher immédiatement un utilisateur pour voir toutes ces options où un menu déroulant est préférable car il le masquera dans la fenêtre. Vous enregistrerez l'immobilier de l'écran et l'utilisateur peut faire défiler ou balayer pour trouver sa fenêtre horaire préférée. Très bien, la prochaine chose ici est de se souvenir d' une option à la fois. Uniquement. Choisissez un numéro un à cinq, vous ne les choisissez qu'un seul numéro, le numéro un. Vous pouvez voir ici que nous enfreignons les règles fondamentales des boutons radio. Vous ne pouvez pas en avoir plus d'une sélection. Cela fait plutôt référence à un type d'interaction de case à cocher et non à un type d'interaction de bouton radio. Très bien, si bonne ségue. Allons parler des cases à cocher. Encore une fois, les cases à cocher sont utilisées lorsqu' il existe une liste de deux options ou plus. leur fonction permet à un utilisateur de sélectionner plusieurs choix dans les valeurs de sélection. n'y en a donc pas, aucune case à cocher n'est cochée par défaut et l'utilisateur peut accéder et désélectionner plusieurs options à la fois. Vous pouvez également avoir des cas où vous filtrez une liste. Vous pouvez déjà avoir tous ces éléments présélectionnés et l'utilisateur peut entrer et les désélectionner en fonction de cela. Mais dans ce cas, nous voulons que vous veniez sélectionner vos saveurs de crème glacée préférées. Vous pouvez voir ici où l'utilisateur clique ou appuie sur l' un de ces éléments. Ensuite, vous verrez la sélection multiple ici avec la case à cocher. Encore une fois, vous pouvez combiner les cases avec les listes déroulantes comme nous l'avons mentionné dans la vidéo déroulante où nous avons le champ de formulaire ici sur la vidéo déroulante où lequel vous cliquez, vous avez les cases à cocher ici sur lesquelles vous cliquez Biscuits et crèmes rocheux à la vanille. Ensuite, vous verrez apparaître les sélections de formulaires de pilules ici. Et encore une fois, l'utilisateur peut cliquer sur l' un d'eux pour supprimer ce qui décocherait également dans la case à cocher. Les styles sont assez simples, ils ont juste un contour par défaut. Encore une fois, vous pouvez faire deux choses pour le vol stationnaire. Vous pouvez rendre le contour bleu ou remplir de bleu, puis l'état actif lorsqu'il est sélectionné, vous avez la petite coche. Ensuite, vous pouvez avoir l'état désactivé lorsque quelque chose est sélectionné dans l'état actif. Encore une fois, 30 % d'opacité. Ou vous pouvez l'avoir à l'état par défaut où rien n'est sélectionné. Et encore une fois, c'est 30 % d'opacité. Vous pouvez personnaliser les cases à cocher. Encore une fois, il suffit de les utiliser pour le bon type de contexte avant de les utiliser comme As-tu 21 ans ou plus ? Oui ou non, ou masculin ou féminin ? Une sélection par critère où pour les boutons radio où les cases à cocher nous pouvons faire des multiples. Dans ce contexte, nous allons demander à quelqu'un quel est son préféré, sélectionner son activité préférée. Lorsque l'utilisateur survole la souris sur l'un de ces éléments, nous pouvons utiliser le contour pour indiquer qu'ils sont vivants , cliquables et tapables. Et quand ils cliquent sur l'un d'eux, nous remplissons la forme de la carte ici. Et maintenant, vous pouvez voir qu'il s' agit de cases à cocher personnalisées. Ils permettent à un utilisateur d'en sélectionner plus d' un, puis un peu plus fantaisiste que la case à cocher ici avec du texte à côté, nous pouvons ajouter des petites illustrations et des icônes sympas. J'ai également une vidéo complète sur les icônes et iconographie et sur les meilleures pratiques les utiliser vers la fin du cours. Bon, passons à bascule. Les bascules sont à peu près un interrupteur qui permet à un utilisateur d' activer et de désactiver les choses. Et cela représente beaucoup de ce que nous voyons dans nos maisons, qui sont des interrupteurs d'éclairage. Il y a donc plus d' éléments exploitables utilisés dans les paramètres. Le problème est comme le Wi-Fi et le Bluetooth. Vous verrez cela beaucoup ou désactiverez les notifications. Mais la fonction principale pour activer et désactiver. Vous mettez quelque chose ou vous éteignez quelque chose. Lorsqu'une case à cocher correspond davantage à un critère de sélection et qu'un bouton radio est également un critère de sélection. Un bascule a un peu plus d'unicité en ce sens parce qu'il s'agit plus souvent d'un type d'interrupteur. Vous le voyez ici comme des notifications reçues. Vous verrez que l' état par défaut est gris. Et ensuite, lorsque l' utilisateur l'active, il indique que les notifications sont activées. Lorsqu'il est activé, il indique que les notifications sont désactivées. D'une façon, vous pouvez modifier les textes étiquetés pour indiquer l'état dans lequel il se trouve. Vous pouvez également le faire ici. Vous avez reçu des notifications que vous avez reportées à gauche, sur le bureau droit d'une couleur plus foncée, maintenant c'est la même couleur que le bouton radio ou le bascule. Et puis, lorsque vous l' allumez, il devient l'état de couleur utilisé pour l'état actif de la bascule et la désactivation revient à cet état gris. Même affaire ici. Voici un autre exemple où il est un peu plus petit et plus courant sur le web est ce type. Et vous cliquez sur le cercle, vous glissez. Encore une fois, nous ajoutons de la couleur pour indiquer que c'est activé. Ensuite, vous pouvez le désactiver à nouveau en tant qu'appel à l'action ou l'activer lorsqu'il est à l'état par défaut ici. Allons voir des choses à faire et à ne pas faire ici. Encore une fois, comme je l'ai déjà mentionné, utilisez la couleur non seulement à l'intérieur de la boîte, mais aussi sur le texte pour indiquer l'état actuel. Et évitez de le faire là où le texte se trouve à l'intérieur de la bascule car il n'est pas clair si vous regardez cela, si je l'éteins en glissant ou si l'état est désactivé, ou dans ce cas ici, est-ce que c'est allumé ou est-ce que je vais l'allumer en engageant avec cette bascule ? Ensuite, modifiez de nouveau les textes pour informer l'utilisateur de ce qui se passe. Ainsi, au lieu d'un texte d'appel à l'action, vous pouvez également donner aux textes d'état où vous indiquez simplement quel est l'état de cette bascule à l'heure actuelle, quel Wi-Fi est désactivé. Et lorsque vous touchez et glissez ou que vous touchez dessus et que vous cliquez dessus, vous verrez que le Wi-Fi change de texte est activé. Encore une fois, évitez quelque chose comme ça grâce à la case à cocher où le Wi-Fi est activé et le Wi-Fi est activé. Encore une fois, la case à cocher est plutôt un critère de sélection où, si vous avez un Wi-Fi sur un type de critères comme celui-ci, il est préférable d'utiliser un bascule. N'oubliez pas que la gauche est toujours hors état et la droite est toujours sur l'état. Encore une fois, faites correspondre les conventions actuelles des bascules existantes. Ne l'éteignez pas et que la gauche est allumée. OK, c'est cool. Il s' agissait de boutons radio cases à cocher et de bascules. Et le prochain que je vais couvrir sur la vidéo est celui formulaires adressés et des formulaires de recherche. Et je vous y verrai. 10. Formulaires de recherche: Très bien, parlons donc des formulaires d'adresse et des formulaires de recherche. Ces deux-là sont si communs et ils semblent faciles, mais ils sont en fait assez délicats, surtout les forums de recherche que je voulais juste les faire, parler et des exemples et faire et ne fonctionne pas uniquement sur ces deux types de champs de formulaire. Encore une fois, un formulaire d'adresse tel qu'il semble, c'est des formulaires pour votre adresse. Ils sont très courants. Nous les utilisons tout le temps. Mon champ préféré à utiliser est le seul champ de formulaire, le formulaire d'adresse de saisie semi-automatique. Au lieu d'avoir l'adresse du domicile avec, vous savez, votre adresse, votre ville, votre État, votre code postal, votre pays. Ce que vous pouvez faire, c'est que vous pouvez faire quelque chose comme celui-ci lorsque vous avez votre adresse personnelle, vous avez les SMS fantômes, entrez simplement votre adresse par défaut. Et lorsque vous saisissez l'adresse personnelle ici, vous utiliserez la recherche automatique ou la saisie semi-automatique ici, et cela va chercher dans vous utiliserez la recherche automatique ou la saisie semi-automatique ici, la base de données d'adresses fonction du nombre de caractères que vous avez mis dans votre auto, dans votre formulaire rempli ici. Habituellement, ils ne démarrent que lorsque vous avez au moins trois ou quatre caractères dans les champs de formulaire. Et puis cela commencera à se rétrécir, réduisant cette liste déroulante de résultats. Et dans la liste ici, il peut que nous ayons 30 ou 40 résultats fonction de vos commentaires ici, mais nous n'affichons que cinq tirets sept à la fois. Il est plus facile pour un utilisateur de scanner cinq ou sept d'entre eux pour voir s'il y a des correspondances. S'il y en a, ne voyez pas la correspondance, ils peuvent facilement rester serrés. Au fur et à mesure qu'ils continuent de taper, cette liste d'adresses auto-complète va se filtrer en fonction du nombre de caractères. Et ce résultat de recherche deviendra plus petit et plus petit et plus précis à l' adresse que vous saisissez en tant qu'utilisateur jusqu'à ce que vous trouviez votre adresse. Ainsi, à ce stade, l' utilisateur peut arrêter de taper. Voyez ici l'adresse qu'ils veulent indiquer, qui est cinq par cinq Gary Street, San Francisco. Ils peuvent faire flèche vers le bas sur leur clavier. Encore une fois, vous devez avoir l'état de survol ici, sinon l'état du survol apparaîtrait également lorsque l'erreur, lorsque l'utilisateur faisait du clavier haut et vers le bas sur le clavier. Ensuite, lorsqu'ils appuient sur Entrée, vous pouvez voir maintenant que le formulaire d'adresse unique porte le nom de la rue , la ville, l'État et le pays. Et vous pouvez même ajouter du code postal à cela. Vous pouvez facilement appuyer sur X ou sur X dans le champ du forum, ce qui vous ramènera à l'état par défaut ici. C'est un moyen très facile ramener l'adresse de quelqu'un à ce mot clé, abordance, comme l'accessibilité des utilisateurs, leur permettant de gagner du temps, d'économiser de l'énergie. Voici plutôt une méthode manuelle traditionnelle. Encore une fois, ce n'est pas une marque ou une rupture. Vous le verrez tout le temps. Mais je vais vous montrer comment nous pourrions toujours utiliser la base de données de recherche automatique de saisie des champs d'adresse pour remplir toutes les informations dont vous avez besoin pour une adresse ici, même si vous devez la casser. comme ça, où vous avez l'adresse, la ville, l'état et le code postal. Donc, traditionnellement, ce à quoi cela ressemblerait est quelque chose comme ça et vous devrez taper votre adresse. Vous auriez votre deuxième adresse, vous saisissez dans votre ville. Vous auriez un menu déroulant pour votre État. Vous disposerez d'un code postal et d'une liste déroulante pour votre pays. Encore une fois, n'utilisez jamais de liste déroulante pour une ville. Vous pouvez toujours utiliser la liste déroulante pour sélectionner un état. Rarement, vous tapez dans l'état ici. Utilisez donc toujours un texte libre ici pour la ville et un menu déroulant pour l'État et le pays. Bon, donc encore une fois, si vous pouvez éviter cela, faites-le. Et voici un moyen de combiner celui que je viens de vous montrer ci-dessus avec ce type d'interactions de champs de formulaire. Supposons donc que vous ayez l'adresse 12, que vous ayez la ville, l' État, le code postal. Et nous savons déjà que la plupart des gens seront pour le service que nous fournissons aux États-Unis. Nous pouvons quitter ces États-Unis. Ce qui se passe ici, c'est qu'un utilisateur va dans le champ d'adresse numéro un, qu'il saisit son adresse, il voit la correspondance. Oui. C'est le 515 Geary Street, San Francisco. Ils cliquent là-dessus. Et ce qu'il fait, c'est qu'il renseigne l'adresse, la ville, l'État , le code postal et le pays dans ces champs de formulaire afin qu'ils n'aient pas à entrer dans chacun d'eux. Il s'agit d'une façon intelligente de faire les formulaires d'adresse. Allons voir le formulaire de recherche. La zone de recherche est donc essentiellement une combinaison d'un champ de saisie et d'un bouton d'envoi. Et ils semblent super faciles. Mais il y a beaucoup de choses pour eux. Et pour les sites complexes, la zone de recherche peut être la principale façon dont un utilisateur trouve quoi que ce soit ou la première chose qu'il fait lorsqu'il arrive sur votre site, pensez à Amazon. La première chose que vous effectuez sur Amazon, c'est de faire une recherche. Vous cherchez ce que vous recherchez. Dans ces cas, le formulaire de recherche est très important. Et la page de résultats que la zone de recherche vous donne aussi une grande importance. N'oubliez pas que la recherche n'est nécessaire que lorsque vous avez beaucoup de contenu. Si vous n'avez pas beaucoup de contenu sur votre site, vous n'avez pas besoin de rechercher des tailles impaires où nous accordons priorité aux produits que nous construisons. La recherche intervient plus tard après que nous ayons plus de choses comme si un utilisateur saisit un tas d' informations dont il a besoin pour rechercher. Nous ne commençons généralement pas par la recherche car nous n' avons même pas encore de produit. Nous lançons sans recherche, laissons les utilisateurs entrer des informations indiquant qu'ils l'ont attendu techniquement que vous souhaitez rechercher à un moment donné dans notre application. Et puis, à ce moment-là, nous ajouterons la recherche plus tard. s'agit donc que d'une sorte de mécanisme de portée ou d'un ensemble de priorités pour le lancement de nouveaux produits. Mais si vous avez un site de commerce électronique où vous allez avoir une tonne de choses que quelqu'un qui a besoin de trouver, alors les recherches sont très importantes et devraient être presque la chose numéro un que vous feriez, vous commenceriez à créer en plus du contenu et des produits dans les flux de paiement que vous auriez. Encore une fois, rendez la recherche accessible sur tous les écrans d'un site complexe et ne compliquez pas la recherche des utilisateurs. Vous êtes donc généralement en haut à droite ou au milieu de votre barre de navigation sur votre site de recherche. Voici quelques exemples. Le premier exemple ici est un champ de recherche courant, mais il n'y a pas de bouton d'envoi. Et le bouton Soumettre est activé en effectuant clavier Entrée sur votre clavier. Et cela soumettra le champ de recherche ici et amènera l'utilisateur à la page des résultats. Dans ce cas, encore une fois, saisie semi-automatique est très importante. Et vous pouvez utiliser des textes fantômes pour indiquer certaines des recherches possibles que nous souhaitons rechercher par un utilisateur. Le deuxième exemple ici est un bouton physique. Encore une fois, l'utilisateur peut toujours appuyer sur Entrée sur le clavier pour soumettre la recherche et accéder à la page des résultats de la recherche. Ils peuvent également cliquer sur le bouton Rechercher qui les amènera à la page des résultats de la recherche. Et dans les deux cas, la saisie automatique reste très importante. Mais rappelez-vous que le bouton de recherche physique visuel indique à l'utilisateur que s'il n'y a pas de correspondance dans la saisie automatique, il peut toujours appuyer sur le bouton Envoyer et trouver la correspondance que nous avons eue Impossible de trouver la saisie semi-automatique. Je sais que cela semble assez complexe, mais laissez-moi vous montrer l'exemple ici. Google est donc un excellent exemple de champ de recherche sans bouton Envoyer. Mais je veux vous montrer comment, de toute façon, soit vous soumettez sur le clavier soit vous disposez d'un bouton physique sur lequel vous pouvez cliquer ou encore pouvoir appuyer sur Entrée sur votre clavier en tant que soumission. Mais je veux vous montrer comment prend la saisie semi-automatique, joue un rôle à cet égard. Disons que je suis dans Google et que je tape la typographie. Vous pouvez voir qu'il me donne le cas présent, il me donne, je pense que dix résultats de recherche ici sont les plus courants. À ce stade, ce que je pourrais faire, c'est que je peux flèche sur mon clavier, je suis en train de se rétrécir. Je vais faire une flèche vers le haut. Je peux sortir X ou cliquer sur l'une de ces modifications, m' amener à ma page de résultats. Mais au fur et à mesure que je continue à taper, les résultats de la recherche commencent à être de moins en moins nombreux. Et je vais commencer à taper des numéros bizarres ici. Très bien, donc maintenant il n'y a plus de résultats de recherche. Mais je peux toujours appuyer sur Entrée sur mon clavier. Quel que soit le système que nous faisons ferons de son mieux pour correspondre aux options qui existaient. Et donnez-moi la page de résultats ici. C'est là que l'autocomplétion entre en jeu, est pratique. Et aussi le bouton Rechercher, car le bouton de recherche indiquera toujours à l'utilisateur que, quelle que soit sa saisie, vous pouvez toujours la rechercher. Il peut y avoir de rares cas où votre page de résultats n'a rien donné. Vous pouvez revenir à la page de résultats sans aucun résultat dans ce cas, vous pouvez voir Google a environ huit résultats. En se basant sur ça. Il s'agit de rechercher sur le Web un nom vraiment bizarre comme celui-ci, et il y a encore huit résultats. Voyons si nous pouvons faire en sorte qu'il n'y ait aucun résultat ici. Oui, c'est toujours des résultats. Vous pouvez donc voir ce que je veux dire ici, c'est que, si vous concevez quelque chose pour la recherche, pas seulement le champ du formulaire de recherche, vous devez réfléchir à la façon dont l' utilisateur remplit automatiquement son recherches. La façon dont ils sélectionnent les compléments automatiques. La page de résultats de la recherche correspondant aux résultats. Et s'il n'y a pas de résultats, ils peuvent toujours appuyer sur Entrée sur le clavier et accéder à une page de résultats. Et s'il n'y a pas de résultats, nous devons réfléchir à cette expérience utilisateur. Est-ce que nous avons juste clair que le Texas a désolé, il n'y a pas eu de résultats à cette recherche. Cependant, nous abordons ce type de cas Edge qui est important. Encore une fois, lorsque vous pensez simplement chercher, cela semble facile, mais c'est beaucoup plus complexe. Et je vais vous montrer un peu plus de complexité lorsqu'elle entrera dans une interface mobile sur le fonctionnement de la recherche. Rapidement, passons en revue l'auto-complétion. Encore une fois, nous avons obtenu cinq à sept dans le cas de Google, on dirait qu'ils en ont fait dix. Les correspondances les plus courantes fonction de la sélection effectuée par l'utilisateur. Cette affaire, nous ne faisons que regarder l'OPS. Nous essayons de faire correspondre le téléphone ici, c'est ce que nous supposons que l'utilisateur souhaite rechercher en fonction des fonctions de recherche les plus courantes que nous ayons dans notre système qui commencent par l'OPS. Encore une fois, le x ici, l'utilisateur peut annuler cela. Et alors que je viens de parler du SOS de saisie automatique, ce menu déroulant n' apparaît qu' après les trois premières recherches. Il donne à l'utilisateur une liste bien plus claire de ce qu'il recherche. Encore une fois, ne surchargez pas vos utilisateurs avec des suggestions en cinq tirets sept à dix options ici sur la saisie semi-automatique fonctionnera très bien. Et n' oubliez pas de définir du survol ou l'état des flèches haut et bas du clavier . Encore une fois, vous pouvez utiliser la même interaction pour effectuer une recherche sur votre barre de navigation Web. Et vous pouvez effectuer un état par défaut comme celui-ci où nous affichons réellement le mot recherche et que l'icône de recherche survole, elle s'allume et un état actif. Nous pouvons prendre plus de biens immobiliers comme celui-ci, soit pousser le texte soit cacher tout le texte. Ici. Vous pouvez rendre ça très long. Et l'utilisateur commence à taper. Nous ajoutons la liste déroulante de saisie semi-automatique. Ils peuvent appuyer sur X ici pour supprimer la liste. Ou ils peuvent appuyer sur l'OPS et appuyer sur le clavier Entrée. Et nous devrions définir une page de résultats de recherche pour ce que nous pensons les meilleures options pour l' OPS ou s'il n'y a pas eu de résultats. Ou ils peuvent dire tout ce que je cherchais réellement des étuis de téléphone. Cliquez sur les étuis de téléphone et nous les emmenons vers une page de résultats affichant les étuis du téléphone. Et sur cette page de résultats, ils devraient toujours être en mesure de rechercher, devraient être à tous les endroits. Voici la même interaction de recherche pour mobile. Et tout ce que nous avons fait ici, c'est que j'ai une vidéo où je parle menus et de tiroirs ici vers la fin de la classe, je vais beaucoup parler fonctionnement de ces navigateurs au niveau parent sur votre barre de navigation. se réduira en icônes de menu ou, dans ce cas, comme une liste déroulante de menu. Nous avons toujours la barre de recherche ici. Et pour le mobile, prendre la barre de navigation complète ici verrouiller l'utilisateur et garder concentré dans cet état de recherche. Une autre chose à faire, à faire et à ne pas faire pour les cotisations pour le Web est simplement montrer si vous avez l'immobilier, montrez le mot recherche. Cela permet d'économiser, il faudra un peu plus d'espace. Vous pouvez également étendre l'état actif de la recherche pour donner un peu plus de biens immobiliers à l'utilisateur qui saisit. Mais si vous avez la salle, affichez la barre de recherche à donner ou le texte de recherche ici et le champ du formulaire de recherche ici comme meilleur moyen de transport. Et il montre à l'utilisateur, il lui donne aussi un peu plus de cible de tapotage, où appuyer sur la barre de recherche plutôt que de faire quelque chose comme ça, bien que ça semble lisse, c'est juste cette petite icône de recherche. Si vous avez l'immobilier, montrez le shell rempli de formulaire, le texte du fantôme de recherche ici, c'est encore plus cliquable immobilier, abordable. Il a un moyen de transport plus fort, rappelant toujours à l' utilisateur qu'il y a une recherche ici par rapport à l'icône. Mais si vous n'avez que le, lorsque cette réponse est cette barre de navigation apparaît sur une interface mobile. Ensuite, il est bon d'afficher uniquement l'icône elle-même , car vous n'avez pas la place pour toute la barre de recherche. Ce n'est que lorsque vous avez la salle que vous souhaitez afficher les textes de recherche et le champ étranger ? Et évitez de faire quelque chose comme ça pour le web lorsque vous avez évidemment la place pour afficher le champ du forum et la barre de recherche. Et même sur mobile, si vous avez la place pour le faire ici, mais c'est acceptable si vous aviez quelque chose comme ça, là où c'était juste l' icône de recherche ici lorsque vous êtes sur mobile. Ce que je voulais aussi appeler pour le mobile, c' est que c'est une interaction délicate que vous ne prendriez pas nécessairement tout de suite à moins que vous ne vous engagiez beaucoup dans la recherche dans ce type d'état d'esprit. Lorsque vous le faites, lorsque vous effectuez une conception d'interaction ou une perspective UX, chaque fois que vous utilisez des appareils, réfléchissez simplement à la façon dont ces éléments se comportent. Il s'agit d'une interaction très courante sur Apple. Interfaces est la zone de recherche de messages. Si vous regardez le message Turks box maintenant sur mes messages, je peux créer un nouveau message ici avec la petite boîte bleue ici. J'ai également les paramètres avec les trois icônes ici, et j'ai cette barre de recherche ici. Ce qui se passe lorsque je clique sur la recherche ou que je tape sur la barre de recherche ici, c'est que cette barre de recherche flotte en fait. Et ça me place dans un mode de recherche où tout ce que je peux faire à ce stade, c'est me concentrer sur la recherche. Soit je recherche, je peux appuyer sur Annuler et revenir au mode que j'étais auparavant. Je peux taper ma recherche, je commence à voir l'achèvement automatique et les correspondances à ma recherche ci-dessous. Je peux facilement appuyer sur X à X pour sortir le texte et continuer à taper d'autres textes. s'agit d'une très bonne interaction car elle concentre l'utilisateur sur un objectif et une tâche spécifiques, à savoir dans ce cas la recherche. Ce que vous voudriez éviter. Ce type où supposons que vous appuyez simplement sur Rechercher. Maintenant, je suis en mode recherche et je ne suis pas concentré au même point de recherche. Je peux entrer et appuyer sur Créer un nouveau message. Ou je pourrais entrer dans les paramètres ici, je peux sélectionner de nouveaux messages, modifier les noms, faire les photos. Je peux également voir les textes de ma mère ici dans l'état de recherche. Il ne s'agit donc pas de garder l'utilisateur concentré dans ce type d'état. Il y a trop d'actions en cours en plus, la seule chose que nous essayons de réaliser pour cet utilisateur est la recherche. Ils touchent la recherche. Ils informent l'interface utilisateur qu' ils souhaitent effectuer une recherche. donc important de les concentrer sur est donc important de les concentrer sur cette interaction par rapport à quelque chose comme celui-ci. C'est une interaction délicate et délicate, mais vous comprenez pourquoi elles le font. Cela a beaucoup à voir avec le transport et le maintien de la concentration de l'utilisateur. Par rapport à ici, il y a trop de choses qui se passent à la fois. Génial. Ainsi, les formulaires d'adresse et les formulaires de recherche vous verront dans la vidéo suivante. Nous parlerons des barres d'onglets et des barres de titre. 11. Barres d'onglets et barres de titres: Très bien, Bienvenue dans la vidéo suivante. Nous allons couvrir les barres d'onglets et les barres de titre. Commençons par la barre d'onglets. Par conséquent, les mots tabous sont également appelés barres de navigation inférieures. Ils apparaissent en bas des écrans de niveau parent d'une application. , il permet aux utilisateurs de basculer rapidement entre différentes sections de l'application ou des destinations au sein de l'application. Ils sont également utilisés pour les applications mobiles et tablettes ou lors de la visualisation d'un site Web sur un appareil mobile ou tablette. Mais évitez de les utiliser pour tout ce qui concerne le bureau du site Web. Nous les avons tous vus. Ils ressemblent à ceux-ci dans l'application beauté des robots, cette petite section ici, c'est votre barre d'onglets. Il s'agit donc d'un élément d'interface utilisateur de navigation. Et avant d'aborder certaines des meilleures pratiques et quelques conseils pour les utiliser, je veux parler un peu architecture de l' information car comme nous allons commencer à entrer dans d'autres vidéos, nous parlerons non seulement des niveaux d'architecture de l'information, mais aussi de la navigation. Donc, si vous songez à naviguer dans le contenu de votre site ou de vos barres de navigation ou à la façon dont une application d'expérience utilisateur candidat à l'utilisateur navigue, ou comment l'utilisateur navigue-t-il dans votre expérience utilisateur ? Cela concerne en grande partie l' architecture de l'information ou l'IA. Le fondement fondamental, juste au niveau de base, est que nous avons un système comme celui-ci où vous avez un niveau parent, puis que vous avez un niveau enfant. L'enfant a donc une relation avec le parent, puis vous avez un niveau petit-enfant. Ensuite, le petit-enfant a une relation avec le niveau de l'enfant. Dans le monde de, dans cet exemple, je vais donner, c'est comme de la crème glacée. Le niveau parent correspond aux tailles de crème glacée, petite, moyenne, grande ou de cône. Et le niveau de l'enfant, celui des informations relatives au niveau parent de la taille des glaces, sont des saveurs de crème glacée. Parce que si vous choisissez une grande taille, vous pouvez obtenir trois boules de saveurs différentes. Eh bien, si vous choisissez une petite taille de saveur de crème glacée par e-mail et obtenez une ou une saveur si vous choisissez une petite taille. Vous pouvez donc voir comment il existe une relation entre ce niveau enfant et ce niveau parent. Et puis du niveau petit-enfant dans analogie de la crème glacée, voici des garnitures de crème glacée. Et il a un rapport avec les saveurs car les saveurs dicteront ou indiqueront le type de garniture que vous voudrez sur votre crème glacée. Lorsque nous réfléchissons à des niveaux d'information importants, le parent est le plus important. Le deuxième des parents est l'enfant, et le troisième est le petit-enfant. Et pour ce qui est de la hiérarchie et de l'importance, l' une des choses qui est intéressante ici est que cela s'applique également à la façon dont les gens pensent à l'information. C'est ce qu'on appelle un modèle mental. Et j'en parlerai quand nous arriverons aux vidéos du menu. Mais si vous allez n'importe quel magasin de crème glacée n'importe où dans le monde, la première chose qu'ils vous ont demandé, c'est la taille de la crème glacée. Ils n'entrent pas et vous demandent un cool. Bon, eh bien, quelles garnitures aimeriez-vous ? C'est plutôt étrange. Cela commence donc généralement par ce niveau d'architecture d' information qui s'applique à la convention commune de crème glacée, hiérarchie et de modèles mentaux de crème glacée qui existe dans le monde. Cela commence donc par des tailles qui vont aux saveurs et aux garnitures. Ce niveau de compréhension de la façon dont information se rapporte les unes aux autres d' un point de vue hiérarchique est important au fur et à mesure que nous parcourons ces classes. OK, c'est cool. Parlons donc des meilleures pratiques pour les barres d'onglets. Comme je l'ai déjà dit, catégorisez le contenu de premier niveau dans votre barre d'onglets. Ces destinations sont donc ces catégories qui doivent être au niveau parent comme la maison, profil, la boutique, la navigation, ce type de choses. Utilisez la barre d'onglets uniquement pour la navigation et les destinations, non pas pour les éléments indépendants. Donc, ce ne devrait pas être comme des choses où un bouton d'action ou vous feriez quelque chose. Ils sont axés sur la destination et la navigation. Pour votre mobile et votre tablette. onglets. À tout le moins, il faut avoir deux catégories. Et au maximum, vous pouvez en avoir cinq, mais pas plus de cinq et pas moins de deux, et je vais m'attarder un peu plus que ça sur les choses à faire et à ne pas faire. Encore une fois, ne les utilisez pas pour les postes de travail Web. Ils conviennent parfaitement aux appareils mobiles et tablettes. Et ne masquez pas la barre d' onglets lorsque l'utilisateur appuie sur une autre option dans la barre d'onglets. La taille du robinet par onglet est environ 40 pixels par 40 pixels au minimum. Mais vous pouvez l'obtenir jusqu'à 75. À 75 ans. Ils sont meilleurs que ce que nous appelons le menu des hamburgers. Si vous vous souvenez, j'ai une vidéo complète sur les menus, mais le menu hamburger est en quelque sorte un élément d' interface utilisateur qui héberge les options de menu est l'endroit où l'utilisateur clique dessus. Il révèle ces options à l'utilisateur, ce qui nous permet d'économiser de l'immobilier. Et il peut contenir beaucoup plus d'options que ce que nous pourrions afficher à l'écran. Mais si nous pouvons classer notre système d' onglets ou notre profil ou que notre système de navigation au niveau parent a besoin d' au moins deux à cinq, nous n'avons pas besoin de hamburger. Nous pouvons utiliser la barre d'onglets et elle fonctionne mieux car elle expose ces options au niveau principal d'un écran. Encore une fois, cela remonte à cette limite. L'utilisateur n'a pas la lueur. Cliquez sur le bouton dans le menu. Revoyez le menu, appuyez à nouveau sur l'élément de menu , puis faites des allers-retours. Ils peuvent facilement, avec un seul onglet, parcourir les sections de niveau parent de votre site Web ou de votre expérience utilisateur. N'oubliez pas que la barre d'onglets reste toujours fixée au bas de votre téléphone ou de votre tablette. Il ne doit jamais faire défiler. Et assurez-vous qu'il y a un actif clair et un rester actif par défaut correspondant l'état dans lequel se trouve l'utilisateur. Et un état par défaut, les états dans lesquels l'utilisateur ou les destinations ou touchent l'utilisateur n'est pas allé et qu'il n'est pas activé, alors n'ont jamais d'option d'onglet État désactivée. Toutes ces options d'onglets doivent être activables et ne doivent pas être désactivées là où vous ne pourrez pas aller ici. Vous pouvez définir ces sections ici une hauteur d' environ 90 pixels à 100 pixels. Et encore une fois, vous pouvez voir ce rectangle de points roses 50 pixels sur 50 pixels. Ainsi, la zone cible, c'est-à-dire la zone de frappe pour l'utilisateur. Ce n'est pas l'icône. La partie supérieure est un espace invisible. Nous voulons rendre cet espace plus grand que cette icône ici, n'est-ce pas ? Ils auraient donc tous une zone de robinet qui ressemblerait à ceci. Et assurez-vous que les zones touchant au moins 40 pixels sur 40 pixels. Mais encore une fois, j'ai tendance à utiliser 50 par 50 juste pour que les utilisateurs puissent en tirer un peu plus facilement. D'autres options ici vous pouvez voir l'écran de profil ici. L'utilisateur appuie sur l'icône Bubba Illustration. Ils accèdent à un site de magasinage de bobo ici et peuvent à n'importe quel moment à la caisse , puis commencer à entrer dans le flux de paiement. Voici d'autres exemples pour l'une des applications et sur lesquelles nous travaillons actuellement. Et vous pouvez voir le téléphone. Nous allons insérer les quatre options d'onglets. Et quand nous arrivons à une tablette, nous pouvons l'espacer pour correspondre à l'immobilier que nous avons pour tablette. La raison pour laquelle ils fonctionnent si bien est qu'ils sont placés dans l'immobilier le plus exploitable sur les appareils mobiles. Si vous utilisez une main, si vous êtes gaucher, toute la zone verte de votre appareil mobile est facilement tapissable et vous n'avez pas à vous étirer ou il n'est pas difficile d'y accéder. Si vous êtes à droite. Comme la plupart des utilisateurs , c'est tout. Le vert est génial, naturel, facile à enfiler, facile à traverser. Ils sont donc placés avec environ 80 % dans un espace naturel, 80 à 90 % pour qu'un utilisateur taper en fonction de sa main gauche ou de sa main droite. Et puis cette zone ici est difficile si vous êtes là où ces boîtes grises ici, c'est une zone difficile, mais certains des plus gros téléphones que nous utilisons notre main gauche. Donc, si je suis droitier, je tiens ce téléphone ici. Nous allons utiliser notre main gauche pour fermer les choses ici. Et donc, si vous aviez un bouton X ici, il est préférable de placer votre bouton X ici. Faites un petit X , ok, cool. Il est donc préférable d' avoir votre bouton x ici sur les appareils mobiles. Ensuite, par ici. La raison en est qu'il est très confortable de tirer parti de ce x avec votre autre main. Donc, vous tenez le téléphone avec leur main droite et vous appuyez avec votre doigt ou votre pouce avec votre main gauche en haut ici. Passons à quelques choses à faire et à ne pas faire sur une bonne utilisation de la barre d'onglets , mais il suffit de suivre ce schéma ici et vous serez prêt à y aller. Allons plus loin dans les choses à faire et à ne pas faire. Encore une fois, utilisez votre barre d'onglets 45 destinations ou cinq icônes sont des onglets, max. Et gardez les dessins très simples comme cet exemple que je vous montre ici avec cette maison détaillée comme celle-ci. C'est à peu près aussi complexe que vous voulez obtenir quelque chose de plus que cela. C'est trop compliqué. La chose à éviter, c'est de ne pas utiliser plus de cinq destinations. Il y a six onglets et destinations ici. Ils sont trop serrés. Et lorsque vous créez une application Apple, vous devez l' envoyer sur l'App Store et Apple examinera votre application. Et si cela ne correspond pas aux consignes de leur interface utilisateur, ils vous empêcheront de lancer votre application sur l'App Store. De plus, leurs règles strictes sont que ces barres d'onglets n'ont que cinq destinations et non six ou sept. Alors indiquez clairement quelle est l'étape active, l'étape que l'utilisateur voit sur les choses que vous voyez la maison ici, nous avons ce petit point orange, et nous avons également rendu la maison beaucoup plus sombre en couleur. Et les états par défaut de ces icônes, du profil et de l'analyse. Vous pouvez voir comment ces dernières sont un peu plus grises. Et la couleur plus foncée, police plus audacieuse et le petit point orange aident. Vous pouvez le voir ici. Le, le, Bien que la maison soit audacieuse ici et nous avons un peu un contour plus épais plus noir pour l'icône de la maison. Il n'est toujours pas assez clair sur quelle étape les utilisateurs sur quelle section de l'application se trouve l'utilisateur ? Nous sommes sur celui de gauche. Si vous plissez les yeux et que vous regardez, vous pouvez voir que la maison surgit vraiment ici. Également. N'oubliez pas d'utiliser des icônes cohérentes, ne mélangez pas les icônes remplies ou caressées. Vous pouvez voir celui de droite ici. Nous avons ici un langage visuel incohérent en affichant une icône remplie pour le profil à une icône de trait ici pour la maison. Encore une fois, nous voulons être cohérents avec notre langage visuel et en être uniformes. Donc, soit la meilleure pratique, utilisez des icônes remplies et seules les icônes remplies sont utilisées. Icônes caressées et n' utilisent que des icônes caressées, mais ne mélangez pas les deux. Mais voici le botteur. Vous pouvez utiliser une icône remplie pour l'état actif. Encore une fois, ils sont tous des traits lorsque leur état par défaut. Vous pouvez voir ici la valeur par défaut pour profil et une analyse par défaut ici. Mais lorsque l'utilisateur appuie dessus, nous remplissons cette section de la page analysée. Nous remplissons également cette section du profil avec notre marque. Nous avons une marque de couleur orange. Vous pouvez voir comment vous pouvez l'utiliser pour vous aider encore plus et créer l' état actif de votre application. Et cela aide à apporter un peu de marque et un peu de saveur dans les icônes. N'ajoutez jamais de bouton dans la barre de navigation. Ils sont destinés à des fins de destination et non à des actions. Et ensuite, n'utilisez jamais une option d'onglet comme chez vous ici. Par exemple, si vous n' avez qu'une seule option, vous n'avez pas besoin d'une barre d'onglets. Il n'est pas nécessaire de naviguer. Utilisez de petits textes, mais utilisez un bon espacement entre les lettres sur le petit texte. Les petits textes que vous pouvez utiliser sont donc d'environ dix pixels. Vous pouvez aller tous les casquettes. Utilisez un espacement entre les lettres de 1,5 pixel. Ou vous pouvez faire 12 pixels. Ce que j'ai ici tout les pixels hauts, la hauteur, tous les minuscules, mais les deux ont un espacement entre les lettres de 1,5 pixel. L'espace de l' espacement des lettres est l'espace entre les lettres ici. Ces types d'espacement. Vous voulez un peu de MIP, espacement supplémentaire des lettres pour le petit texte simplement parce qu' il facilite la lecture. Et vous ne finirez pas avec vos lettres trop frottées ensemble. Je vais vous montrer ici comme ça. Comme si c'était trop serré. C'est probablement trop d'espacement entre les lettres. Et tout comme nous l'avions fait, c'était très bien. OK, c'est cool. Et ensuite, n'utilisez jamais deux mots. Vous pouvez voir le shopping, maison ici est descendue à deux mots, étendant sur deux lignes ou un gros texte. Vous pouvez donc voir que ce texte est trop volumineux. Il a juste l'air de Horsey. Il n'a pas air lisse, il n'a pas l'air moderne. Et c'est le cas, ce sont surtout des pièces de navigation et ne devraient pas être trop lourdes comme en poids visuel. Parce que vous voulez que l'utilisateur regarde le contenu que ces onglets hébergent et quatre et une information par rapport à quelque chose qui se distingue vraiment comme celui-ci. Très bien, passons à la barre d'onglets, à nos barres de titre. Une barre de titre fournit donc un moyen fiable de guider les utilisateurs à travers une application. une barre de titre affiche des informations et des actions liées à l'écran actuel. Et il reste également fixe, ce qui signifie qu'il ne reste pas toujours en haut, même lorsque l'utilisateur glisse ou fait défiler. Ils sont souvent associés à une barre d'onglets dans les applications mobiles ou tablettes. Le plus courant, c'est que vous verrez un système comme celui-ci, où vous avez le titre ici. Vous avez une zone d' action à gauche, une zone d'action à droite. Ensuite, nous avons la barre d'onglets que nous venons de parler ici en bas. Vous verrez sur l'une des applications les plus populaires est Instagram. Et ils utilisent une combinaison d'une barre de titre et d'une barre d'onglets. Ils ont donc la barre d'onglets ici. Ils utilisent également la technique d'une icône remplie pour l'état actif et le petit point ici pour l'état actif, l' état sur lequel se trouve l'utilisateur. Ensuite, ils utilisent la barre de titre pour leur logo et certains dans la page d'accueil du niveau très apparent. Et ils ont utilisé le bon côté pour les éléments d'action. Mais vous pouvez voir ici lorsque l'utilisateur accède à partir d'un niveau parent, il s'agit d'un écran de niveau parent. un écran de niveau enfant, nous conservons toujours la barre d'onglets, mais nous utilisons plus une barre de titre traditionnelle ici où vous avez les Bulldogs français au milieu comme titre et verso pour revenir à cette page d'accueil. Ensuite, nous avons le menu à trois points ici plus pour les paramètres qui se rapportent à cette page. Et il suffit de regarder ces adorables petits chiens. Regardez ce petit ici. OK, c'est cool. J'adore ces types. J'ai un de ces chiens. Elle s'appelle moelleuse. Je suis un grand fan. Voici la panne. Cette zone où vous voyez la batterie, votre temps et votre connectivité Wi-Fi, c'est ce que l'on appelle une barre d'état. Et c'est un, un iOS ou Apple, Android en a une version. Ils sont également appelés barre d'état. Ils ont juste l'air un peu différents pour Android par rapport à iOS. Vous pouvez voir les deux ici. C'est Android, c'est Apple. La ventilation est principalement la section supérieure gauche ici. Il est principalement utilisé pour le bouton Précédent ou une icône de menu. La section centrale ici concerne le titre des appareils Android, le titre peut être aligné à gauche. Je préfère qu'ils soient au milieu, mais cela dépend du, si vous concevez une application pour Android par rapport à Apple, ils ont deux types d'expérience utilisateur et d'utilisateur différents directives d'interface, et je parlerai aux deux personnes tout au long de la classe. Vous pouvez créer cette section ici avec la barre d'état située en haut de la barre de titre étant de la même couleur. Je mesure environ 50 à 80 pixels. Et encore une fois, cette bonne zone est un endroit idéal pour les actions. Vous avez donc un peu ce titre. Il donne les contextes et l' emplacement de l'utilisateur. Vous disposez du bouton Précédent qui permet à l'utilisateur de revenir d' où il venait. Ensuite, vous avez des actions en haut à droite qui sont basées sur les contextes que l'utilisateur voit. Vous pouvez également avoir des boutons ici. Vous pouvez avoir des annulations sauf la beauté de celui-ci, c'est que les boutons sont très comme toujours dans votre visage. Si vous faites défiler un site, les boutons sont toujours là, ils restent fixes là où nous en avons parlé avec les barres d'onglets. Nous ne voulons pas de boutons dans nos systèmes de robinet, mais nous pouvons les avoir dans la barre de titre. Il s'agit de quatre actions très importantes ici, comme enregistrer ou annuler des visionneuses , ajouter des informations et en fonction de vos paramètres. Ou nous voulions que ces boutons ne se perdent pas. Pour un remplissage très moderne. Personnellement, j'aime les petits textes, tous les majuscules avec beaucoup d'espacement entre les lettres. Vous pouvez voir l'exemple ici. Sur la gauche, vous avez le titre, encore une fois, toutes les majuscules. Et vous pouvez voir celui de droite. J'utilise une hauteur de 121212 pixels, toutes les majuscules avec un espacement entre les lettres de 2,5 pixels. Et cela rend l'application beaucoup plus moderne comme : Eh bien, nous allons le faire maintenant avec ce texte ici. Si je le sélectionne, je lui ai donné beaucoup d'espacement entre les lettres ici. Rend l'application un peu plus élégante, rend un peu plus moderne. Et ce que nous voulons faire, c'est éviter quelque chose de trop serré comme nous l'avons fait ici. Trop serré comme ça, c'est juste 0. C'est la valeur par défaut. Pour moi, c'est trop serré. Il faut que cela respire un peu plus. Un petit conseil de pro pour vous là-bas. Ok, donc les barres de marée sur Apple, elles ont deux types différents. Ils ont ici un titre standard qui contient, ce dont nous venons de parler, une action à droite, le bouton Retour à gauche et le titre de la page que vous regardez au milieu. Et ils ont un titre de texte volumineux, c' est-à-dire que le titre en haut se déplace sous le bouton Précédent. Encore une fois, rien ne change avec l'action. Et cela englobe plus de biens immobiliers à l' écran que celui de gauche. Cela dépend simplement l'application et parfois de l'appareil Apple, cela vous permettra de définir des titres volumineux dans le système d'exploitation. Disons que pour un peu plus vieux, vos yeux ne sont pas aussi bons. C'est ce que nous appelons une fonctionnalité d' accessibilité. Et cela aide les personnes qui ne peuvent pas voir petits textes à lire ces petits textes plus facilement pour eux. La différence entre Android à gauche et Apple, également connu sous le nom d'iOS à droite, est à peu près la même chose. C'est juste que le titre sera généralement centré sur les produits Apple. Et puis sur Android, ils vont l'aligner ici. Le même type d'offre lorsqu'il s'agit d' action est généralement qu'ils suivent le même paradigme lorsque vous avez des actions en haut à droite de votre barre d'onglets. C'est que les titres vont aller à gauche et au milieu ici. Je l'aime bien au milieu parce qu' il nous permet d' utiliser cet espace ici pour n'importe quel bouton arrière ou ce type de navigation. J'aime généralement styliser là où vous avez les actions du bouton Précédent ici et un titre au début ou au milieu. Et peu importe, vous pouvez quand même concevoir une application Android. Et il peut toujours avoir le titre ici au centre du bouton Précédent, les éléments d'action à droite, et tout va bien. Très bien, une autre chose que vous pouvez faire ici C'est assez soigné, car encore une fois, l'aboiement du titre reste toujours fixe. Cela signifie que lorsque l'utilisateur glisse vers le bas sur une application mobile ou tablette, la barre de titre ne va nulle part. Mais vous pouvez faire cette astuce où, en tant qu' utilisateur, je glisse vers le bas, notre balayage vers le haut. Et donc je pousse le contenu vers le haut, ce qui signifie que je suis intéressé. Je veux aller plus loin dans cette section, ce que cette section a à offrir. Lorsque cela se produit, vous pouvez réellement déplacer la barre de titre à une position, vous la verrez disparaître. Et ensuite, lorsque je redescends, qui signifie que je voudrais peut-être sortir de cette section, la barre de titre réapparaîtra en fonction de cette interaction. Vous verrez qu'Airbnb l'utilise sur son application mobile ou sur son site Web sur le Web, son site Web sur le Web ainsi que sur un appareil mobile ou une tablette. Et je vais vous montrer un petit aperçu ici. Vous pouvez le voir. Voici leur barre de titre en haut. C'est qu'ils ont également ajouté des filtres sur le titre. Et ils ont la barre d'onglets en bas. Vous pouvez puiser entre les risques, connexion, les souhaits, vos séjours. Lorsque je glisse vers le haut ou que je fais défiler vers le bas, vous voyez comment la barre de titre a disparu et ils supprimeront également la barre d'onglets. Ensuite, lorsque vous effectuez un balayage vers le bas, vous le verrez apparaître lorsque vous effectuez un balayage vers le haut. Très bien, donc je suis en train de glisser vers le bas. Une fois encore. L'idée ici est que vous êtes intéressé, vous savez que votre action consiste à informer le site que vous êtes plus intéressé par le contenu en ce moment, lorsque je glisse vers le haut, votre action peut être pertinent pour, Oh, avez-vous besoin de faire quelque chose avec ce contenu ou de naviguer hors de cet écran ? Vous pouvez voir comment ces réponses, alors ils disent, d'accord, voici, voici votre tablette. Nous allons vous donner cette barre d'onglets. Voici votre téléphone portable. Nous allons vous donner cette barre d'onglets. Mais vous voyez que lorsque nous allons sur le Web, ils n'utilisent pas la barre d'onglets. La barre d'onglets n'est pas un motif palmé. Il s'agit d'un modèle mobile et tablette. Très bien, cool. La dernière chose à examiner avant d' entrer dans certaines choses à faire et à ne est que la barre de titre peut réellement changer et afficher des actions en fonction de l'entrée de l'utilisateur. Nous avons donc une barre de titre de navigation par défaut ici. Et ce qui se passe, c'est que lorsque l'utilisateur appuie sur l'une de ces photos, la barre de navigation bascule et nous donnons des actions en fonction de cette interaction utilisateur. Ils ont pris une photo. Maintenant, la barre d'onglets passe des contextes, désolé, la barre de titre passe de contextes à une barre de titre orientée action. Il vous permet donc de savoir que vous en avez sélectionné un et cela vous donne des options que vous pourriez faire. Vous pouvez supprimer celui-ci, vous pouvez l'envoyer. Et puis vous avez le menu de débordement, qui est également appelé menu de kebab ou menu de kebab, qui héberge simplement d'autres actions liées à cela également. C'est ainsi que vous pouvez l'utiliser d'un point de vue de l'interaction et non seulement l'avoir uniquement pour la communication , les contextes et l'emplacement, mais vous pouvez également le faire orienter vers l'action. N'oubliez pas de résumer que la plupart des applications qui utilisent la barre d'onglets en bas, la barre de titre en haut, c'est un modèle de conception courant. Maintenant, allons nous trouver des choses à faire et à ne pas faire. titre d'une barre d'onglets doit être suffisamment court pour s'adapter à l'espace. Il est comme une FAQ. Et puis ne rendez pas le titre trop long qu'il ait deux ellipses sur les trois petits points ici. Le titre doit être suffisamment court pour replacer l'espace. Et encore une fois. Ne rendez pas le titre II long pour qu'il passe en deux lignes éclipsant, ou deux lignes ici. Placez les actions suffisamment ajustées ici dans la barre de titre comme trois à quatre maximum, cinq c'est en quelque sorte le pousser. Vous en voyez six ici, c'est trop. Et si vous avez un titre long, il ne va pas s'écouler avec les actions ici. Trois, c'est ton numéro magique. Soyez prudent de la hauteur, surtout quand ça va être réparé. Cela va prendre de l' immobilier au fur et à mesure qu' un utilisateur parcourt votre application, vous pouvez également avoir une barre d'onglets en bas à droite. Vous êtes donc, vous êtes, vous limitez votre contenu visible ici uniquement par cette section. Soyez donc prudent quant à la hauteur de cette barre et vous ne voulez pas ou pour votre barre de titre et vous ne voulez pas qu'elle soit trop serrée, trop haute que, encore une fois, elle restreint le contenu ci-dessous et ne lui donne pas assez d'espace pour ce contenu. On y va. Il y a des barres à onglets et des barres de marée. Je vous verrai sur la prochaine vidéo où nous couvrirons les accordéons et les onglets. Je vous y verrai. 12. Accordions et ongles: Très bien, allons parler d'accordéons et d'onglets. Le menu Accordéon est une liste d'en-têtes empilés verticalement qui peuvent être cliqués, touchés, pour révéler ou masquer les détails importants d'une section. Le terme accordéon vient de l' instrument de musique dans lequel la fonction principale est élargir et se contracter. C'est donc de là que nous avons obtenu ça. Il s'agit d'un menu qui se développe pour afficher informations, puis se contracte pour masquer les informations. Vous le verrez utiliser comme FAQs où la question est l'en-tête ou le titre, puis vous l'ouvrez et vous verrez les réponses à ces questions. Vous le verrez pour les listes d'événements où l' événement est l'en-tête. Ensuite, vous toucherez et il s'agrandira et affichera les détails de cet événement. Nous avons récemment utilisé une application automobile où vous pouvez ouvrir l'accordéon pour voir les modules complémentaires et sélectionner type de modules complémentaires que vous vouliez dire pour stéréo ou les rems ou l' intérieur d'un voiture. Ils ressemblaient à ça. Il s' agit de l'état par défaut dans lequel il contient les informations de niveau parent. Vous l'avez fait. Les en-têtes ici. Lorsqu'un utilisateur appuie dessus, nous veillons à mettre l'en-tête en surbrillance afin que l' utilisateur sache à quoi rapporte le niveau d'informations enfant ou auquel se rapporte. Et aussi la flèche ici, elle monte à 180 degrés pour indiquer que cet en-tête est ouvert. Encore une fois, nous avons l'état par défaut, nous avons l'état actif. Et la fonction vraiment importante d'un, un accordéon est que lorsque l' utilisateur appuie sur le Wi-Fi est lent, ce qui se passe c'est que le titre est actuellement ouvert, ouvert, puis révèle l' enfant informations de niveau sur le titre sur lequel l'utilisateur vient d'appuyer ou de cliquer. Il ferme, paie ma facture, paie ma facture passe à l'état par défaut et dans le Wi-Fi est lent, passe à l'état actif et révèle les informations de niveau enfant. En fonction de ce niveau parent. Les avantages et les inconvénients sont le processus qui aide les utilisateurs à trouver contenu qu' ils recherchent en classant simplement les en-têtes. Ils peuvent simplement parcourir tous les en-têtes, trouver celui qu'ils recherchent et l'ouvrir. Il permet de numériser facilement ces informations de niveau parent et, encore une fois, approfondir les informations de niveau enfant. Et c'est un outil utile lorsque vous avez beaucoup de contenu. Et vous voulez masquer certains contenus, ce qui rend l'ensemble du contenu plus digeste d'un coup d'œil. Ensuite, l'utilisateur peut décider dans lequel il souhaite approfondir. L'escroquerie est d'essayer de ne pas les utiliser pour plus de dix options car ils sautent beaucoup et essaient de ne pas avoir trop d' informations sur le niveau des enfants qui amènent l'en-tête suivant à passer sous la réunion de pli, sous la zone de visualisation que l'utilisateur consulte, il ne peut pas voir l'option de niveau parent. Si vous avez beaucoup d'options de niveau enfant qui poussent tout, tous les autres parents vers le bas. Et l'utilisateur doit aller assez loin pour trouver un autre niveau parent, ou il doit revenir sur cet en-tête de niveau parent ici. Donc, si l'utilisateur appuie sur nouveau, paie à nouveau ma facture, elle se fermera. Payez donc ma facture ici, ouvrez, appuyez sur Payer ma facture ici ferme également. Mais si vous avez beaucoup d' informations au niveau des parents ou si vous désolez des informations sur le niveau enfant, cela pousse tous ces en-têtes jusqu'en dessous du pli comme ça. Lors de l'ouverture et de la fermeture de différents en-têtes, ils ont tendance à rebondir et à ne pas rester cohérents dans leur emplacement. Et c'est l'avantage que je vais vous parler des onglets. Comme les onglets ne sautent pas, ils restent en position lorsque l'utilisateur appuie dessus. Mais les accordéons, vous savez, alors que vous envisagez de payer ma facture et que vous appuyez sur le Wi-Fi est lent, il ferme, paie ma facture et le Wi-Fi saute ici pour qu'ils rebondissent dans ce sens. Vous pouvez également utiliser les boutons Plus plutôt que les flèches. Et puis à l'état actif, les boutons du bouton Plus passent à moins. Vous pouvez également les utiliser en combinaison avec des cases à cocher. Vous pouvez voir ici que nous avons des fonctionnalités technologiques que vous touchez. Nous affichons en fait un nombre, donc vous avez sélectionné 0, nous avons quatre options. L'utilisateur peut facilement appuyer sur C, les quatre options qu'il souhaite. Nous avons les cases à cocher sur la droite en premier avec le prix basé sur chaque fonctionnalité. Et ils peuvent sélectionner n'importe laquelle de ces fonctionnalités que nous avons qui augmente également le nombre ici à partir de deux options sur quatre. Il suffit d'avoir ce niveau parallèle que l'utilisateur peut voir. Ils peuvent être obligés de le faire. Nous ne ferions pas de cela une couleur différente. Nous ferions ça quelque chose comme du bleu, comme ça. Mais au niveau des parents, ils peuvent voir le nombre de mises à niveau qu'ils ont déjà sélectionnées en fonction des fonctionnalités technologiques ou des mises à niveau audio ou des haut-parleurs. Nous aurons aussi des options pour leur obtenir 20 jumeaux, je dis. Très bien, cool. N'oubliez donc pas de conserver le contenu de niveau enfant. C'est le contenu qui se rapporte au niveau parent. Gardez ce contenu court et doux. N'oubliez pas, n'utilisez pas, évitez d'utiliser beaucoup de contenu au niveau des enfants. Vous pouvez voir comme si je disais payer ma facture et que j'ouvre ça, je suis comme, ouah, c'est beaucoup. C'est là que si vous avez cela, ce n'est pas le meilleur mécanisme. Vous pouvez simplement amener l'utilisateur vers une page distincte. Ou j'ai ici une vidéo sur les modaux et les tiroirs. Et ce serait une option parfaite pour montrer une rangée de corvées qui prend simplement l'ensemble de l'immobilier et l'utilisateur peut fermer et se retrouver ici. Si vous rencontrez ce problème, ce n'est pas le meilleur modèle pour cela. Si vous avez beaucoup d'informations sur les enfants, ce n'est pas le meilleur modèle pour cela. Je l'ai vu une fois et c'est super bizarre. Ne placez pas d'accordéon dans des accordéons. Comme les accordéons ne devraient pas avoir de niveau parent, enfant et petit-enfant. C'est juste un parent et un enfant. Je l'ai vu une fois et c'était super bizarre et ça a rebondi. Je me suis vraiment perdu sur lequel était ouvert, lequel était fermé ? Encore une fois, notez aucun accordéon dans l'accordéon lui-même. N'oubliez pas que si un utilisateur appuie sur une autre option, fermez celle qui était déjà ouverte. Ne laissez pas l'utilisateur ouvrir plus d'une option à la fois. Assurez-vous ensuite d'avoir des distinctions claires entre les en-têtes. Vous pouvez voir ici que nous utilisons les lignes celle-ci ici et voyons ces petites lignes ici, ces lignes grises, elles aident à donner les sections. Ainsi, lorsque vous n'avez pas ces sections et que vous ouvrez l'accordéon, il est difficile de voir où se terminent les informations de niveau enfant et où le titre parent suivant entre. C'est de l'accordéon. Allons donc parler d'onglets. Les onglets sont l'un des moyens les plus courants présenter des sections de catégories. Et ils permettent à un utilisateur de cliquer et d'accéder à chaque catégorie, voir le changement de contenu en fonction de sa sélection. Encore une fois, ils ressemblent beaucoup à la barre d'onglets dont nous avons parlé. Ils apparaissent simplement en haut des sites Web et ils ne s' affichent généralement pas en bas s' ils se ferment sur un bouton en bas ou si vous avez besoin d'une navigation en bas, puis utilisez les règles qui s' appliquent à la barre d'onglets. On appelle des onglets parce que l'origine de celui-ci se rapporte au classeur de bureau. Et vous pouvez remarquer que les onglets sortent comme le niveau d'information parent. Ensuite, vous pouvez plonger dans ces derniers, les ouvrir et voir qu'il s'agit informations pertinentes au niveau des enfants ici, afin que vous puissiez voir comment cela revient à cette architecture d'information J'en ai parlé dans la dernière vidéo. Ils sont couramment utilisés pour les menus de commande de nourriture. Vous utilisez des onglets pour le petit-déjeuner, le déjeuner, le désert ou différentes catégories d' aliments comme nourriture chinoise ou la pizza, les hamburgers italiens. Ils sont parfaits pour les tableaux de bord, ils sont parfaits pour les outils analytiques. Les barres de navigation sur les appareils Android les utilisent beaucoup. Résultats de recherche Google, je peux penser à toutes les images, etc. Beaucoup, beaucoup, beaucoup de cas d'utilisation pour les onglets. Ils sont beaucoup plus courants que les accordéons. Peut voir les onglets pour mobile, encore une fois, barre d' onglets doit toujours être fixée et en haut, ne jamais les placer en bas. Parce que si vous comptez les utiliser pour le bas, allez chercher une barre d'onglets et utilisez ces règles. Il existe un ensemble différent de règles appliquées aux barres d'onglets, puis aux onglets. Vous pouvez utiliser jusqu'à cinq options maximum, sans balayage horizontal, ce qui signifie que l'utilisateur d'une tablette ou d'un téléphone peut glisser horizontalement différents onglets. C'est vraiment la différence claire entre une barre d'onglets et des onglets, c'est que barres d' onglets sont en bas et que les barres d'onglets ont jamais de balayage horizontal. n'y a que cinq options, max et onglets. Ils peuvent toujours vivre en haut d'un site, et ils peuvent avoir un balayage horizontal, ce qui signifie qu'ils peuvent avoir plus d'une option. Mais ils restent généralement au sommet parce qu'ils sont nouveau des paramètres globaux, semblables aux destinations. Et vous pouvez en avoir beaucoup plus de cinq avec un balayage horizontal. Vous pouvez voir ici que nous avons la barre de titre en haut avec le logo et notre menu de profil ici. Ensuite, nous avons un menu de barre d' onglets secondaire en haut, il mesure 90 pixels de hauteur. Nous avons obtenu les textes qui sont tous masqués ici, 11 pixels de hauteur avec deux pixels espacés entre les lettres, donc tout majuscule un peu d'espacement entre les lettres. Vous pouvez voir comment cela fonctionne en tant qu'utilisateur sur lequel je viens de toucher. Et je pouvais voir que l'élément n'est pas un contenu qui se rapporte à l'article deux ici. Et si je reviens à un, goûte à un, si je tape sur trois, me ramène à trois. Voici quelques exemples d'onglets pour le Web. Nous avons ici plus de cinq options, tant que nous nous adaptons sur le Web en conséquence. Encore une fois, l'utilisateur peut accéder à ces différents onglets. Ce genre de choses imite la structure des dossiers de l'armoire. Lorsque vous pensez à ce type d'informations, cela est similaire à celui dans lequel vous cliquez sur différents onglets pour afficher les informations du niveau parent. Et apparemment, l'information pourrait comporter des boutons et du texte, des photos, des illustrations et des icônes. Voici une navigation de type tabulation supérieure. Vous pouvez l'utiliser pour le Web. Vous disposez ensuite d'une navigation par onglets latéraux que vous pouvez utiliser pour le Web, mais vous pouvez l'utiliser uniquement pour une tablette. Mais nous n'avons pas assez de biens immobiliers pour les appareils mobiles. Pour cela. S'il s'agissait d'un appareil mobile, vous ne regardez vraiment que quelque chose comme autant de biens immobiliers, n'est-ce pas ? Ils sont donc mieux adaptés aux appareils Web et tablettes. Et si vous cliquez sur l'élément deux ici, cela ouvre l'article deux et vous pouvez voir l'idée cliquée sur l'article 1 passe à l'article 1. Bon, allons regarder le balayage horizontal. Vous pouvez donc voir ici que nous avons un système d'onglets en haut qui comporte plus de trois options ici, nous ne savons pas combien d'options il s'agit. Mais nous faisons une technique un peu explicite , c'est que nous voulons que l'une des options soit coupée à droite, disons cette option. Ce que cela fait, c'est le moyen de transport. Il indique à l' utilisateur qu'il y a plus d'options masquées pour qu'il puisse aller et balayer. Où si vous venez de l'avoir, où ce n'était que les trois options et elles étaient parfaitement espacées ici, comme ça. Cela ne signifie pas un balayage horizontal. Donc, nous voulons toujours couper l' un d'entre eux juste pour donner ce signal visuel que hé, utilisateur sur l'option numéro quatre et je suis ici, venez me chercher. Un genre de chose. N'oubliez pas que ce balayage horizontal ne doit être utilisé que pour les tablettes et les appareils mobiles. N'utilisez jamais le défilement horizontal pour le Web. Personne ne veut faire défiler horizontalement avec la barre de navigation sur le Web comme ça. À moins que vous ne fassiez une feuille de calcul, si vous concevez un système sur un ordinateur de bureau qui est une feuille de calcul, oui, vous pouvez utiliser le défilement horizontal, mais pas ici. Exemple de l'application sur laquelle je travaille actuellement ici. Vous pouvez voir, vous pouvez voir les onglets ici, jour, mois et année. Vous pouvez effectuer un balayage horizontal pour obtenir plus d'options. Et encore une fois, nous avons intentionnellement fait ce cycle de facturation à droite juste pour informer l'utilisateur qu'il y a plus ici que vous pouvez balayer. Encore une fois, ces derniers restent en position. Vous pouvez aller au mois, vous pouvez aller à l'année et voir à quel point vous pouvez les transiter facilement et en douceur. Doordash a le même exemple ici, il y a donc les onglets ici. Si vous touchez, tirez et appuyez, vers la droite, vous verrez plus de l'onglet. Des exemples arrivent et ils coupent un peu les cadeaux. Et je vais vous montrer que c' est à quoi ça ressemble sur leur site mobile. Un petit peu de coupure se produit ici. Vous pouvez voir ici le même système utilisé pour le web, mais ils ne font pas de défilement horizontal. Ils vous donnent ces petites flèches et vous permettront de faire des allers-retours. Il est toujours en train de couper certains de ces sujets ici dans ces onglets. Mais c'est ainsi que cela fonctionne. Et si vous allez dans Gifts, cela informera tous les contenus liés aux cadeaux. Vous pouvez voir comment cela fonctionne. Et puis en revenant maintenant, c'est sur un appareil mobile, vous pourriez le faire sur le Web. Mais s'il est écrit sur mon appareil mobile, je serais capable de balayer ces catégories, regardant comment Keith, c'est ce petit survol. Veillez à ce qu'ils aient tous de petites illustrations. Super mignon. Examinons quelques bonnes pratiques pour les onglets. Prenez toujours toute la largeur. Même si vous avez deux articles, prenez toute la largeur. Ne faites pas seulement une largeur proportionnelle pour mobile, comme cet espace vide ici. Ne faites jamais un seul onglet. Si vous avez un seul onglet, vous n'en avez pas besoin. Comme si vous n'avez qu'un seul niveau d'information, vous n'avez pas besoin d'un onglet, tout comme vous en débarrasser. Vous utilisez un balayage horizontal sur les onglets mobiles. Si vous le gardez en haut, et ne mettez jamais de balayage horizontal en bas ici. Et la raison pour laquelle il est très étrange votre pouce passe à travers ces différents objets ici. Et si vous voulez juste, donnez-lui un coup de feu, allez sur votre téléphone et juste avec vos pouces, commencez à glisser vers la gauche et ça fait mal comme ça deviendrait étranger après un certain temps. Comme nos doigts sont plus adaptés au balayage vers le haut et vers le bas et non pas vers la gauche et la droite. OK, cool. C'était des accordéons et des onglets en un mot, et j'espère que vous avez apprécié celui-ci, vous verrez infobulles et les ombres de la prochaine vidéo. 13. Conseils et ombres: Très bien, Bienvenue sur le sujet suivant où nous allons parler d'infobulles et d'ombres. infobulles. Il s'agit d'un message additif positif et utile qui s'affiche lorsqu'un utilisateur interagit avec un élément ou un élément de contenu. Et les infobulles sont généralement lancées par un clic de souris ou sur un appareil mobile. Et encore une fois, ils sont informatifs. Ils ne devraient pas être des instructions. Il ne devrait s'agir que d' un petit peu d'informations supplémentaires si un utilisateur souhaite en savoir plus sur un contenu spécifique qu'il consulte. Ils ressemblaient à ça. Supposons que vous l'ayez fait, voici un exemple d'icône de point d'interrogation où vous avez un numéro CVE et si les utilisateurs ne sont pas sûrs de ce qu'est un numéro CVE sur leur carte de crédit, ils peuvent survoler ou appuyer sur cette icône. Et cela vous donnerait un peu d' informations sur le numéro CVE. Et encore une fois, si vous faites ce survol, rappelez-vous simplement que vous pouvez cliquer dessus lorsque r, Si vous cliquez dessus, vous pouvez cliquer dessus pour le fermer. S'il est en survol, il se ferme automatiquement lorsque votre souris s'éloigne. Et ensuite, pour les appareils mobiles, vous pouvez le faire survoler pour le Web. Et puis pour Mobile, faites-le là où un utilisateur appuie dessus pour ouvrir et qu'il le retire , puis il se ferme. Vous pouvez également utiliser l' autre icône commune qui est une icône d'information. Au lieu de poser une question sur l'icône info, le même genre de principe ici cette petite info-bulle apparaît et encore une fois, c'est l'infobulle. C'est cette petite boîte ici que l'infobulle a généralement une petite flèche pointant vers quelque chose, mais vous n'avez pas besoin de l'avoir. Mais c'est encore une fois, un peu d'information additive. Vous pouvez l'utiliser pour clarifier un exemple d'action ici. Donc, si vous avez des options d'envoi ou un bouton qui ne sont peut-être pas si clairs pour l' utilisateur lorsqu'il survole , il vous donne un texte un peu plus descriptif de ce que fait ce bouton. Vous pouvez le faire de même pour les icônes. Vous avez cette icône ici, elle apparaît. Mais rappelez-vous simplement s'il s'agit de votre principal moyen d'informer un utilisateur de ce que ces actions font, et que cette expérience utilisateur sera diffusée sur tablettes et les produits mobiles que ce n'est pas le cas, de votre principal moyen d'informer un utilisateur de ce que ces actions font, et que cette expérience utilisateur sera diffusée sur les tablettes et les produits mobiles que ce n'est pas le cas, n'est pas suffisant car il n' y a pas de survol sur les produits mobiles et les tablettes non plus. Donc, mieux vaut peut-être ajouter du texte ici pour dire double plutôt qu'une icône. Si c'est le cas. Si ce n'est qu'une application Web, alors oui, vous pouvez faire quelque chose comme ça et utiliser le survol pour donner cela. Je vais ouvrir mon e-mail très vite et vous pouvez écrire certains des courriels pour moi. Je plaisante. Vous pouviez voir comment ils le font sur Google. Quelle est cette petite question ? Oh, c'est du soutien. Quelle est cette petite icône ? Oh, c'est les réglages. Qu'est-ce que c'est ? C'est Google Apps. Ils ont fait la même chose ici aussi. Encore une fois, lorsque vous utilisez une info-bulle et vous n'êtes pas sûr d'être basé sur les informations avec lesquelles vous travaillez. Si vous avez besoin d'une info-bulle, demandez-vous simplement ceci, comme regardez ces informations et partez, si ces informations que vous souhaitez insérer dans une info-bulle nécessaires ou importantes pour l'utilisateur puisse accomplir sa tâche. Si c'est le cas, affichez les informations. Ne le cachez pas dans une infobulle. Si ce n'est pas le cas, ce n'est pas nécessaire, c'est juste du texte utile ou du contenu utile, alors oui, vous pouvez le mettre dans une infobulle. J'ai utilisé celui-ci sur un produit pour éditer, très bien performé, c'est que vous avez cet ensemble de champs de formulaire ici. À partir de l'état par défaut. Ce ne sont que ces boîtes grises. Mais dès qu'un utilisateur survole sa souris dans l' un de ces champs de formulaire, ces informations changent et basées sur le formulaire que vous remplissez. Si vous n'êtes pas sûr du numéro d'un compteur électrique sur votre maison. Une fois que vous y arrivez et que vous survolez votre souris ou cliquez sur ce champ de formulaire. Cette info-bulle va changer pour donner informations explicites sur ce qu'est ce compteur électrique. Une petite photo ici est accompagnée pour montrer comment la trouver. C'est ce qu'on appelle une infobulle en ligne, ce qui signifie qu'elle apparaît lorsque l'utilisateur est en ligne ou en pointant sur l' un de ces éléments ici. Nous avions ici la même boîte qui concernait les états de service électrique. Ainsi, lorsque l'utilisateur était à la date de service ou survolé cette section, cet outil est apparu ou cette info-bulle s'est présentée pour expliquer ce que c' était et ce que c'était. le type de contenu était. J'adore ça. Je pense que ce sont des moyens super intelligents de le faire. Et si vous vous souvenez de la première vidéo, j'ai parlé de ne faire qu'une disposition de formulaire de colonne comme celle-ci correspond bien à l'espace vide pour une mise en page à une colonne, un peu plus délicate si elle est sur mobile. Les plateformes mobiles, mais pour le web, nous sommes vraiment géniaux. Allons voir des choses à faire et à ne pas nous souvenir, ne mettez pas trop de contenu. Trop. Cela devrait être un peu utile pour la plupart, comme trois ou quatre lignes de messages texte ne devraient pas être comme une simple phrase. N'oubliez pas, n'utilisez pas de survol, votre principal outil de communication. Surtout si cela va être diffusé sur un ordinateur de bureau une tablette ou un produit mobile, ajoutez des contextes s'il s'agit d'un utilisateur mobile, comme mettre le mot en double ici. Et vous pouvez également faire la même chose et surcommuniquer sur le Web lorsque l'utilisateur survole cela. Ne mettez pas d'informations importantes dans une info-bulle. Si quelqu'un doit entrer un passe et qu'il y a des exigences de mot de passe, ne les avez pas dans l' infobulle pour le faire ici. Vous pouvez également échouer à ce que nous appelons la validation en ligne, dont j'ai parlé plus tôt. Vous pouvez indiquer en vert et en rouge s'il y a une nouvelle saisie de leur mot de passe ou un mot de passe qui répond à ces critères. Nous constatons que le mot de passe ne peut pas être l'ancien mot de passe. Ils disaient : Oh, on dirait que vous n'avez pas mis une majuscule, moins une lettre minuscule. Tu es bien allé. Vous avez encore huit personnages. Vous avez au moins deux lettres et un autre échec, nous avons besoin d'au moins un numéro pour créer un mot de passe correct, n'est-ce pas ? Vous ne voulez donc pas que ce truc soit caché dans une infobulle. Il s'agit d'informations importantes pour que l'utilisateur puisse accomplir sa tâche. Nous devrions l'exposer. Passons sur les ombres. La règle numéro un est de ne pas simplement utiliser une ombre par défaut, jamais. Quel que soit l'état par défaut de l'ombre, ne l'utilisez pas. Vous devez y ajouter. Voici donc les étapes. Vous avez l' ombre par défaut ici, j'ai cette petite carte avec une petite icône de crème glacée mignonne. Je veux ajouter une ombre par défaut à cela. Juste ici. Il va nous donner quatre pixels sur l'axe Y. Donc en bas et 0 sur le x, vraiment rien sur le x ici, Blair va avoir quatre ans . Nous sommes arrivés ici à 25  % d'opacité. La prochaine étape de la deuxième étape consiste donc à ajouter davantage à l'axe x et à l'axe Y. avons donc donné 55 à ce stade. Maintenant, je peux voir un peu plus d'ombre sur la ligne verticale ici sur l'axe X. L'étape suivante, la plus importante est d'ajouter un peu de flou. Nous sommes passés de quatre à 35 pixels flou dessus. Et on peut y voir les ombres trop nettes, c'est trop dur. Comme je me souviens dans la vidéo sur les boutons, nous disions regarder les ombres à boutons et ne pas être trop dur avec les ombres comme il devrait y avoir des ombres douces et subtiles. Ensuite, vous pouvez faire un effort supplémentaire ici. Vous pouvez ajouter un peu de couleur à l'ombre. J'aime généralement utiliser un gris bleuâtre, pas trop bleu, pas trop gris, juste au milieu là. Nous allons rendre ce look très moderne. Très propre. Vous donne cette belle ombre par rapport à ce bord dur par défaut. Par défaut ici, commence à s' améliorer un peu avec le flou. Et puis c'est juste le gris subtil et joli qui rend ça vraiment agréable. Vous pouvez également utiliser des ombres intérieures. Cela aide à créer de la profondeur ici afin que vous ne puissiez voir aucune ombre intérieure ici. Et maintenant que nous avons l'ombre intérieure pour cela, ce cercle de progression ou cercle de tarte ici. Et cela crée un ensemble de profondeur que cela est rempli. Cette ombre intérieure aide beaucoup et c'est les mêmes principes que l'ombre intérieure. Pas trop dur. Encore une fois, devrait être, donnez-lui un peu, donnez-lui un beau flou, une belle couleur. Certaines choses à faire et à ne pas faire. Et puis je vais faire quelques ombres rapides pour vous pour que vous puissiez voir, ne mettez pas d'ombre sur le texte. Si vous avez une photo ici et que vous êtes comme, Oh mec, mon texte ne se lit pas, eh bien, ne le résolvez pas en mettant une ombre. Ce que vous devez faire, c'est ajuster la photo pour que vous puissiez voir ici, nous avons ajouté une superposition plus foncée sur le haut de la photo, puis nous avons placé le texte sur le dessus pour qu'elle se démarque. Lorsque j'étais à l'école de design pendant toutes les années où j'y étais, il y avait à San Francisco à l'Academy of Art University. Il y avait une femme nommée Mary Scott pendant les quatre années entières et tout le programme, même si vous êtes allé sur un master, dit-elle mâché et c'était catégorique. Je ne voudrais jamais voir d' ombre sur un texte. Et puis c'était drôle parce que nous n'avons jamais mis d'ombre sur les textes. Et un jour, j'ai eu mon premier emploi. L'un des directeurs créatifs vient ici parce que je fais apparaître ce texte, y mets une jolie petite ombre. Je suis comme, d'accord, cool. Encore une fois, il s'agit de connaître les règles, mais aussi de savoir quand enfreindre ces règles. Mais la règle assez dure que vous pourriez suivre ici est simplement de ne pas le dire, ne pas résoudre les textes lisibles sur une photo avec une ombre comme si vous deviez manipuler la photo. Ne rendez pas vos ombres trop fortes. Comme si c'était beaucoup trop fort. Vous pouvez voir celui de droite. Celui-ci a un goût joli et subtil d'ombre. Ce qui est amusant, c'est que vous pouvez rendre l'ombre plus foncée dans cette couleur et cette opacité sur le vol stationnaire. Rappelez-vous que la philosophie d'un bon vol stationnaire est qu' elle prend vie. C'est comme s'engager avec moi. Ici, vous pouvez voir que c' est une excellente technique pour une belle ombre et nous deviendrons un peu plus sombres. La couleur, l'opacité du survol. Cela crée vraiment le sentiment de profondeur où cette chose est un peu plus grande que celle qui se trouve en dessous. Encore une fois, une utilisation agréable, agréable et subtile d'un vol stationnaire là-bas. Et puis normal. Ne mettez pas trop de couleur dans l'ombre. Comme si c' était beaucoup trop, comme si c' est bon. C'est trop. N'utilisez pas ces bords durs. Gardez les bords doux. Allons de l'avant et faisons simplement une ombre rapide. Je vais copier ce cercle ici. Encore une fois, nous essayons d'accéder à ce genre de fonction ici, mais nous allons nous amuser un peu. Nous avons la carte blanche que je vais utiliser appelée Figma. J'aurai quelques petits projets à la fin des vidéos qui vont passer en revue et nous allons créer certains de ces modèles de design que vous voyez ici également. Mais avant d'y arriver, vous pouvez simplement voir comm