Comprendre la conception web et l'expérience utilisateur

Name: Comprendre la conception web et l'expérience utilisateur
Author: Matthew Brown

Dans ce chapitre, vous découvrirez les éléments de conception du contrôle d’entrée, notamment les boutons, les menus déroulants, les boutons radio et les…

Preview the first lesson free — get full access to all 6 lessons.

Demander une démo Se connecter

Cours : à la demande

Bonjour. Dans ce chapitre, nous chercherons à la conception de sites Web du point de vue de l'expérience utilisateur et des éléments de conception. Les éléments de l'interface utilisateur seront regroupés en quatre catégories. Commandes d'entrée. Ceux-ci permettent aux utilisateurs de saisir des informations dans le système. Composants de navigation, ceux-ci permettent aux utilisateurs pour vous déplacer dans votre application ou votre site Web. Les composants informatifs permettront au développeur pour partager toute information qui est pertinent avec les utilisateurs. Les conteneurs vous permettent de regrouper du contenu connexe. Nous commencerons par examiner quelques des commandes d'entrée les plus courantes que tous les concepteurs et développeurs doivent connaître. Les premiers sont des boutons. Ce sont les formes les plus courantes d'entrées d'utilisateurs qui sont souvent affichées sous forme de formes avec une étiquette dessus. Cela permet aux utilisateurs d'effectuer des actions, comme sauvegarder ou soumettre. Nous avons ensuite des cases à cocher, qui permet aux utilisateurs d'effectuer des sélections en fonction sur les options disponibles. Les menus déroulants permettent aux utilisateurs de faire des sélections à partir d'une liste d'éléments. Champs de saisie, un endroit où les utilisateurs saisissent le texte ou le contenu, comme des pièces jointes dans le système. Et nous avons aussi des boutons radio. Ce sont des éléments circulaires qui permettent aux utilisateurs pour choisir parmi les options. Et enfin, nous avons des curseurs utilisé pour permettre à l'utilisateur de sélectionner une valeur d'une plage de valeurs. Comme on peut le voir ici, nous avons une simple page ouverte dans Notepad++ avec quelques exemples de quelques-uns des contrôles d'entrée qui sont possibles. Tout d'abord, nous avons la saisie de texte, et ceci est juste une entrée de texte pour le prénom et le nom de famille. Nous utilisons le type d'entrée de texte. Si nous avons le prénom ID ou fname. Et puis le nom est fname. D'accord? Et puis nous avons une étiquette pour le nom de famille puis nous avons une entrée pour le nom de famille. Et puis nous avons aussi un type d'entrée de soumission, qui est mon bouton. Le contrôle suivant que nous avons sur cette page est le bouton radio. Nous avons un simple paragraphe qui indique quel est votre langage de programmation préféré. Nous avons un type d'entrée de radio. Identifiant, HTML. Nom, langue préférée et valeur, HTML. Nous avons une autre étiquette pour HTML. Et nous avons un autre bouton radio d'entrée pour CSS. Et un autre bouton radio d'entrée pour JavaScript. Donc, quand nous exécuterons ceci, nous verrons à quoi cela ressemble. Le contrôle suivant que nous avons appelé ici est une case à cocher avec une question quel mode de transport avez-vous? Un simple paragraphe. Mais le type utilisé cette fois est la case à cocher et nous avons trois valeurs pour la case à cocher. Nous avons le véhicule un, c'est-à-dire que j'ai un vélo. J'ai le véhicule deux, j'ai une voiture. Et le véhicule trois, j'ai un bateau. Et vous pouvez voir la syntaxe avec. Ensuite, nous avons la liste déroulante, qui est une étiquette pour les voitures. Choisir une voiture est l'étiquette puis les options, nous utilisons la balise option. Nous avons une Volvo, une Saab, une Fiat et une Audi. Et puis le contrôle final que nous avons est un contrôle de curseur. Mon type d'entrée est une plage. Les points et le nom de l'ID sont des points. La valeur minimale est zéro, la valeur maximale est 10. Alors maintenant, nous aurons exécuté ceci et voir à quoi ça ressemble vraiment. Encore une fois, ce n'est qu'une simple page où nous avons le champ de saisie pour le prénom, un champ de saisie pour le nom de famille, puis nous avons le bouton Soumettre. Parce qu'il n'y a pas de code derrière ce bouton d'envoi, ça ne fait rien en fait. Et puis nous avons les boutons radio. Quel est votre langage de programmation préféré ? Et puis nous pouvons voir que nous pouvons choisir n'importe lequel des boutons. Et puis nous avons la case à cocher. Quel est votre moyen de transport ? J'ai un vélo, j'ai une voiture, j'ai un bateau ? Et je peux choisir n'importe laquelle de ces cases à cocher ou tous. Et puis nous avons notre liste déroulante, choisissez votre voiture. Volvo, Saab, Fiat. Et puis nous avons notre contrôle de curseur. Valeur minimale de zéro, valeur maximale de 10. Merci de nous avoir rejoint. Dans la leçon suivante, nous examinerons les composants de navigation pour la conception.

Débutant Fournisseur : Matthew Brown 6 leçons · 21m en Arabe, Allemand, Anglais, Espagnol, Français, Portugais, Chinese

Description du cours

Dans ce chapitre, vous découvrirez les éléments de conception du contrôle d’entrée, notamment les boutons, les menus déroulants, les boutons radio et les curseurs. Ce chapitre couvrira également l’utilisation de conteneurs HTML pour organiser le contenu des pages Web ainsi que les éléments de conception intuitive de l’interface utilisateur.

Objectifs de la formation :

Les compétences :

Ce que vous allez apprendre

Créer des éléments de contrôle de saisie sur un site web, notamment des boutons, des menus déroulants, des boutons radio et des curseurs
Contrôler la couleur, le texte et les styles pour une meilleure conception web
Mettre en œuvre des éléments de navigation dans un site web
Utiliser des conteneurs HTML pour organiser le contenu des pages web
Concevoir des boutons d'appel à l'action, des boutons d'action principaux, des icônes, des superpositions d'images, des dégradés et des messages d'erreur
Appliquer des principes de conception d'interface utilisateur intuitive tels que la familiarité, la cohérence et la facilité d'apprentissage

Points clés à retenir

Le chapitre couvre les éléments de conception de contrôle de saisie, y compris les boutons, les menus déroulants, les boutons radio et les curseurs.
Les conteneurs HTML sont utilisés pour organiser le contenu des pages web.
La conception d'interface utilisateur intuitive s'appuie sur la familiarité, la cohérence et un design invisible et facile à apprendre.
Les éléments de conception pour l'expérience utilisateur incluent les couleurs, les dégradés, les messages d'erreur, les styles de texte, les polices et les superpositions d'images.

Foire aux questions

Qu'apprendrai-je dans ce chapitre ?

Vous apprendrez à créer des éléments de contrôle d'entrée sur un site web, à contrôler la couleur, le texte et les styles pour une meilleure conception web, et à implémenter des éléments de navigation dans un site web.

Quels éléments de conception ce chapitre couvre-t-il ?

Il couvre les boutons CTA, les boutons d'action principaux, les icônes, les superpositions d'images, les boutons radio, les menus déroulants, les couleurs, les dégradés, les messages d'erreur, les styles de texte et les polices.

Ce chapitre aborde-t-il l'expérience utilisateur et la conception d'interface ?

Oui. Il couvre les éléments d'une conception d'interface utilisateur intuitive, y compris la familiarité, la cohérence et un design invisible et facile à apprendre.

Quelles compétences ce chapitre aide-t-il à développer ?

Il développe des compétences en composants HTML, en contrôles HTML, en conception d'interaction, en conception d'interface, en conception d'interface utilisateur (UI) et en conception d'interface utilisateur web.