Bloc 6 – Interface utilisateur
Question de réflexion 6
Activités
L’apparence visuelle d’un programme est très importante pour capter l’attention du public ciblé et le motiver à l’utiliser. Pour ton jeu éducatif, pense aux couleurs, aux polices de caractères et au style qui seraient les plus appropriés pour le public cible que tu as choisi. Crée un miniguide portant sur le style d’interface que tu désires adopter pour ton jeu éducatif.
À l’aide de la page Web Mémento des propriétés CSS, familiarise-toi avec la disposition CSS.
Que retiens-tu des différentes propriétés et du positionnement CSS?
Positionne et personnalise (couleur, police de caractères, style) avec les attributs ID CLASS le formulaire que tu as créé à la deuxième piste de l’activité 3.3. Tiens compte de ton public cible lorsque tu fais tes choix visuels en ce qui concerne les couleurs et le style.
Pour chacune des propriétés CSS ci-dessous, indique ce à quoi elles servent et la façon de les intégrer dans un code.
- Marges (margins)
- Remplissage (padding)
- Bordures (borders)
Trouve des exemples, dans la vie de tous les jours, d’interactions entre des humains et des appareils qui contiennent un ordinateur (p. ex., guichet automatique, console des nouvelles voitures). Crée une grille d’évaluation des points forts et des points faibles de l’interaction avec l’un de ces appareils en se basant sur son interface.
Créer le code d’une interaction sans bouton qui demande à l’utilisatrice ou à l’utilisateur d’effectuer un choix dans un menu déroulant. Lorsqu’elle ou il procède à un choix, fais afficher un message qui confirme ce qui a été sélectionné.
Plusieurs éléments d’interaction avec l’utilisatrice ou l’utilisateur peuvent être ajoutés à un formulaire HTML <form></form> tels que des boutons radio, des listes de contrôle ou des menus déroulants. Dresse une liste des façons d’intégrer cinq balises différentes dans ton jeu éducatif.
Visionne le tutoriel Interaction sur une image et reproduis les exemples de différentes fonctions possibles avec une image. Pour faciliter ton apprentissage, télécharge et décompresse le fichier de départ. N’oublie pas d'ajouter le code manquant, tel que mentionné dans le tutoriel.
Voici un exemple d’un code qui fait « allumer » et « éteindre » une ampoule. Imagine une question dans ton jeu éducatif pour laquelle une animation de ce genre serait utilisée et adapte le code en conséquence. Clique ici pour télécharger les images.
Explore différentes propriétés qui te permettent de modifier l’image au survol du pointeur de la souris telles que :
- opacité;
- bordure;
- position et dimension.
Note qu’une interaction sur une image peut également te permettre d’ouvrir un site Web externe.
Pense à des questions de ton jeu éducatif que tu pourrais transformer en format image ou pour lesquelles tu pourrais expérimenter les interactions associées aux images que tu viens d’apprendre.
Élabore le schéma de l’interface utilisateur de ton jeu éducatif. Ton interface utilisateur doit :
- être conviviale;
- comporter au moins un bouton;
- contenir un menu déroulant;
- comporter des images;
- contenir du texte pour expliquer les choix et diriger l’utilisatrice ou l’utilisateur;
- contenir des éléments graphiques de ton choix.
Crée l’interface utilisateur de ton jeu éducatif.
Demande à au moins deux autres élèves du groupe-classe de tester ton interface utilisateur. Recueille leurs commentaires et apporte au moins trois ajustements à ton projet en fonction de leurs suggestions.
Prends le temps de formuler une critique constructive à l’endroit de deux élèves du groupe-classe.