Le 14 septembre 2017, nous avons publié une version actualisée de notre Politique de confidentialité. En utilisant video2brain.com vous vous engagez à respecter ces documents mis à jour. Veuillez donc prendre quelques minutes pour les consulter.

Découvrir le design responsive

Créer des formulaires responsives

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Dans cette séquence, vous verrez comment créer des formulaires adaptés à l'affichage et à la saisie tactile sur des écrans de petite taille.

Transcription

Le design responsive ne consiste pas uniquement à modifier Pour créer des sites qui soient réellement responsives, vous devez penser au contexte dans lequel le site va être utilisé et quelles vont être les interactions des utilisateurs, en particulier en ce qui concerne les formulaires. S'assurer que les formulaires soient clairs et faciles à remplir est une composante importante de toute bonne expérience utilisateur. Étant donné que les facteurs de mise en forme vont changer d'un périphérique à l'autre, il est parfois difficile de créer des formulaires qui soient également efficaces sur tous les périphériques. Dans cet esprit, on va examiner ensemble quelques techniques et quelques bonnes pratiques afin que vous puissiez rendre vos formulaires beaucoup plus responsives. Et il va s'agir essentiellement non pas uniquement de raisonner en fonction de la taille de l'écran mais d'adjoindre à ces préoccupations la préoccupation principale de comprendre comment Et il faut en ce sens comprendre que l'utilisateur va de plus en plus utiliser majoritairement des périphériques mobiles. Nous allons donc principalement nous concentrer sur des formulaires qui vont être créés dans un premier temps pour les périphériques mobiles. En plaçant ces considérations en tête de liste, on va créer des formulaires qui vont être meilleurs et qui vont faciliter leur adaptation ensuite sur les différents périphériques. Bien entendu, on va constater essentiellement des différences de mise en forme : vous voyez qu'ici sur ces deux écrans nous avons des champs de formulaire où l'on va pouvoir sur un écran en mode paysage placer les étiquettes à gauche et puis sur un écran d'une largeur inférieure devoir placer les étiquettes au-dessus des différents champs. D'une manière générale, il y a des contraintes liées au mobile qui sont essentiellement des contraintes de hauteur mais pas uniquement. Cela va être également des contraintes qui sont liées à l'utilisation de ce mobile. Effectivement le mobile est utilisé de façon tactile : c'est avec son doigt que l'utilisateur va activer tel ou tel champ et il est très important de maintenir des espaces suffisants entre les différents champs pour qu'il n'y ait pas d'activation malencontreuse d'un champ alors que l'utilisateur voulait, et bien, activer un autre champ. On va donc utiliser des balises de formulaire qui vont être des balises de type HTML 5. Vous remarquez ici que notre balise de champ de formulaire est encadrée par une balise d' étiquette label qui spécifie qu'il s'agit ici du nom et puis ensuite il y a la balise qui va définir quel est le champ de formulaire. Nous allons entrer dans le détail de ces balises. Il faut essentiellement comprendre que nous allons devoir assister l'utilisateur dans la saisie de ce formulaire et nous allons devoir également nous assurer que les champs de formulaire ont été saisis de manière valide, c'est-à-dire qu'ils correspondent bien à ce que l'on attend. Nous avons ici dans un premier temps un champ qui va concerner la saisie d'une adresse email. On va avoir ensuite un champ ici qui va permettre de saisir une URL et nous avons ici un champ qui est un champ de recherche. En utilisant des balises de type HTML 5 qui sont conformes aux règles du code, nous allons faciliter l'assistance et nous allons également faciliter la validation. Vous voyez qu'ici il s'agit de champs qui sont requis et ce sont des champs dont le type a été précisé. Pour l'email, le type est email. Pour l'adresse internet, le type est URL et puis pour le champ de recherche, le type est search. En ce qui concerne l'assistance, on a la possibilité de préciser des informations qui vont aider l'utilisateur à remplir les différents champs de formulaire. C'est quelque chose comme nous le voyons ici qui peut tout à fait fonctionner sur un ordinateur de bureau mais lorsque vous êtes sur un écran qui va être limité en hauteur et où l'utilisateur va devoir travailler de façon tactile nous n'allons pas bénéficier de cette place et il va falloir que nous trouvions une autre solution. Dans ce cas, il va falloir donner des indications à l'intérieur même des champs de formulaire où l'on va expliquer à l'utilisateur le type de données que l'on attend qu'il saisisse. Et pour ce faire, nous allons utiliser l'attribut placeholder où on va préciser par exemple qu'à l'intérieur du champ on attend votre nom. Et d'autre part, on va également préciser si ce champ est requis. Vous voyez qu'ici nous avons précisé que le champ est requis et nous avons ajouté en-dessous un paragraphe qui précise que le nom est requis de manière à ce que l'utilisateur sache que ce champ doit obligatoirement être rempli. Si on regarde le code d'un formulaire ici qui est saisi au format HTML 5, vous voyez qu' on a bien précisé à chaque fois les labels, les étiquettes et puis à l'intérieur du champ de formulaire on a précisé le type de champ et on a également placé des placeholders, c'est-à-dire des explications sur ce que l'on attend de l'utilisateur. Et vous voyez que l'affichage ici avec un navigateur montre clairement les placeholders à l'intérieur des champs et vous constatez également que le champ de recherche est bien un champ dans lequel on va pouvoir saisir une requête. En ce qui concerne la réalisation de ces formulaires responsives, il y a des bonnes pratiques qui sont premièrement d'utiliser des éléments de formulaire HTML 5, d'autre part d'automatiser au maximum la saisie des différentes données que l'on va demander à l'utilisateur de renseigner et puis de pouvoir éventuellement combiner les différents éléments. La combinaison des éléments peut effectivement être intéressante en ce sens qu'elle va permettre de générer un gain de place. Si au lieu de demander de saisir la rue, le numéro de téléphone, le code postal et la ville dans des champs séparés, on peut demander à l'utilisateur de nous communiquer son adresse selon un modèle qu'on va lui communiquer : ici, numéro de rue, code postal et ville. On est dans un système qui dans certains cas peut générer des données qui ne seront peut-être pas extrêmement cohérentes en termes d'exploitation sur une base de données mais l'on va faciliter la saisie de l'utilisateur et donc améliorer son expérience. De la même façon, au lieu de présenter trois boutons radio pour donner un choix, on va pouvoir utiliser un menu déroulant qui va occuper beaucoup moins de place à l'écran et qui va permettre à l'utilisateur d'avoir une vision beaucoup plus claire de notre formulaire. Nous devons donc lorsque nous nous attaquons à la réalisation de formulaires responsives, non pas uniquement nous concentrer sur un problème de mise en page et de taille d'écran mais raisonner expérience utilisateur, c'est-à dire de comprendre quelles sont les informations que l'utilisateur souhaite nous communiquer et quelle va être la meilleure façon pour lui de nous les communiquer facilement. vos mises en page pour qu'elles l'utilisateur va fonctionner.

Découvrir le design responsive

Abordez les principes du design responsive. Comprenez la problématique des écrans haute densité, analysez les grilles fluides, explorez les outils de prototypage, etc.

Aucun commentaire n´est disponible actuellement
 
Spécial abonnés
Date de parution :6 sept. 2017

Votre formation est disponible en ligne avec option de téléchargement. Bonne nouvelle : vous ne devez pas choisir entre les deux. Dès que vous achetez une formation, vous disposez des deux options de consultation !

Le téléchargement vous permet de consulter la formation hors ligne et offre une interface plus conviviale. Si vous travaillez sur différents ordinateurs ou que vous ne voulez pas regarder la formation en une seule fois, connectez-vous sur cette page pour consulter en ligne les vidéos de la formation. Nous vous souhaitons un excellent apprentissage avec cette formation vidéo.

N'hésitez pas à nous contacter si vous avez des questions !