COM2571 - Design des écrans Choisissez une icône Faut-il des cadres sur Internet ? Quelles sortes de boutons ? Quelles couleurs choisir ? Comment les combiner ? Pourquoi ce texte, qui est pourtant important, n' est-il pas plus facile à lire et à comprendre, du moins par nos clients. Pourtant il a été rédigé par un diplômé de Communication qui se disait un expert en typographie.

Étapes de la scénarisation interactive Analyse des besoins Objectifs de communication Cas d’utilisation, scénarios Maquette Description du contenu et exemples Design de la structure d ’interaction Design des principaux écrans et des boutons Validation par le client Validation par les usagers Programmation

COM2571 - Design d'écrans Principes du design des pages Titres, textes, menus, boutons et menus, etc. Formulaires Choix d'icônes et de médias Bloopers - Les erreurs les plus fréquentes selon Johnson Psychologie des couleurs Internationalisation Accessibilité

Principes du design d’écrans Design des écrans Design sur Internet - Weinschenck Ch 11 Textes et typographie Menus et titres Boîtes de dialogue et formulaires Graphiques, images et icônes Multimédia et choix d’un médium La couleur, psychologie des couleurs Icones Utilisation de la couleur

Navigation 3 clics Cohérence interne Utiliser la hiérarchie de sections jusqu’à trois (CINEMA) Menus textuels et non seulement par des icônes (plus rapide) Réduire le nombre de liens dans les pages et pour de vrais contenus Si le site est grand, fournir deux niveaux de navigation Survol et grossissement est très important Attention précédent, retour, …Éviter cliquer ici Mettre des liens internes, si les pages sont longues. Reviser les liens internes et externes régulièrement Enterrer les liens externes ou les faire ouvrir dans une nouvelle page Weinschenk & al. Ch 11

Nouveaux défis – » Pages dynamiques. Animations et menus émergents Pheromone, cirque, Fondation Langlois, VIA Vidéos dans les pages Mémoire des anges , WebTele Publicités intégrées Navigation protégées, mots de passe et retour limités Pages qui s’adaptent à la plateforme Mobile Ouverture et intégration d’applications sur Internet Web Sémantique et réseaux  ’open social ’ Patrick Chanezon Faciliter les échanges interapplications de façon dynamqiue Présentations Vidéo

Mise en page sur Internet Mettre ce qui est important, intéressant, fréquent au début Principales sections (grille) Première page (home) sur une seule page, suite possible avec indices … Attention aux sauts probables des pages Page longues (chargement plus lent, plus de manipulation) ou courtes Utiliser les tables cachées pour la mise en page, lignes courtes Utiliser les styles Espaces blancs, espacement vertical Placer le texte près des images Créer des groupes dans les formulaires, dans les listes longues, indentation Minimiser le défilement vertical Éviter le défilement horizontal Weinschenk & al. Ch 11

Qu’est-ce qui diminue la lisibilité d’un texte ???

D’abord la typographie …sur les écrans Fontes sans empattement (serif) Minimiser le gras Éviter l’italique, le souligné Prévoir les changements de grosseur, utiliser le styles standards Les fontes de caractères expriment l’image Si vous utilisez des caractères spéciaux sous forme d’image n’oubliez pas les textes alternatifs… Dans les listes suivez les standards de majuscule et de ponctuation Weinschenk & al. Ch 11

Textes ne pas mettre de titre avec une lettre en dessous de l'autre phrases courtes, détachées, espaces blancs mettre des sous-titres évitez les césures dans les mots et dans les propositions Lisibilité Mots rares, mots longs, conjonctions, mots ambigus personnalisé forme positive,active et au présent évitez les textes tout en capitales, ou qui clignotent mise en relief - pas plus de 10% du texte, pas trop de différents alignement à gauche (sauf les titres).

Question: Que changer dans ce texte ? Pourquoi ce texte, qui est pourtant important, n' est-il pas plus facile à lire et à comprendre, du moins par nos clients. Pourtant il a été rédigé par un diplômé de Communication qui se disait un expert en typographie. Pourquoi ce texte important, est-il difficile à lire ? Comment le faire comprendre aux clients de la Banque Royale ? Marie Dufour Diplômée de Communication

Menus et listes de choix Kiger - deux niveaux et pas plus de 10 items Ordre standard (cohérence externe) alphabétique, chronologique, fréquence d'utilisation en haut à gauche similarité sémantique (avantages-inconvénients, spéciaux - produits) organisation spatiale - pays, exploration d'un objet ordre d'utilisation (couper, coller...) Raccourçis Commandes présentées dans les menus (Enregistrer Ctrl S) icône qui apparaît ensuite pop up menu menu qui se décroche

Titres Attention aux multiples fenêtres, logiciel anti pop up Choisir soigneusement les titres pour qu’ils désignent bien le contenu et qu’il soient bien distincts les uns des autres Mettre un titre aux pages (qu’il reste visible) Choisir le titre des pages qui apparaît dans la barre de titre et apparaîtra dans les favoris Mette des sous-titres dans le contenu Mettre titre - sous-titre dans la barre titre. Attention aux cadres ne chargent qu’une fois, données générales..mais pas de favoris, d’impression, de barre titre Si les gens arrivent par la recherche…il faut mettre la possibilité de revenir au site à partir des pages Utiliser un cadre pour une zone hypertexte pour les commentaires et détails. Attention aux multiples fenêtres, logiciel anti pop up Weinschenk & al. Ch 11

Boîtes de dialogue ou formulaires (forms) Titre Organisation: Groupes et ordre naturel d'entrée Valeurs de défaut (entrée avec un bouton Shneiderman) Bouton par défaut différent Permettre une façon d'échapper si possible Montrer clairement les champs à compléter Fournir des exemples de ce qui est demandé ou des formats requis (dates) Uniformiser la présentation selon une grille Minimiser l'information qui doit être entrée Permettre de corriger (réversibilité) Boutons exprimant bien la pragmatique Bouton Visualiser plutôt que Commander si on peut se corriger

Boîtes de dialogue ou formulaires - les contrôles Respecter les types de contrôles et la façon de s’en servir Champs de texte à remplir (retour et tabulation) Menus, menus avec options cochées, menus avec dialogue Combo box Listes de sélections Onglets Boites à cocher Boutons radios Comment sélectionner une liste d’objets à transférer ou pour le tri ? Les onglets et les menus dans les boîtes de dialogue (Imprimer en Word). Compléments graphiques Séparateurs de zone, avec titres Attributs des éléments par défaut Dépend du système Mac, IBM et de la version du système d’opération http://msdn.microsoft.com/library/default.asp?url=/library/en-us/dnwue/html/part2.asp

Composantes d’un menu et conventions…

Boîte de dialogue pour enregistrer, Quels sont les standards ? Barre titre Titre de zone ??? ??? ???

Sur Mac … Valeur par défaut Étendre répertoire Bouton par défaut (retour)

Exemple avec la sauvegarde Windows XP Répertoire sélectionné Liens favoris Valeur par défaut Bouton par défaut

Titres standards..icônes standards Allez-voir Menu Affichage Personnaliser la boîte d’outils

Etc.. Plusieurs autres aspects améliorent la convivialité et la cohérence externe d’une interface Les boites de fermeture, d’agrandissement, Les changements de pointeurs Les titres aux fenêtres Messages La rétroaction (votre fichier a été enregistré, 10 éléments trouvés..) Les indices de l’attente et de la progression La possibilité d’annuler Messages d’alerte et dialogue Problème et solution « ’Vous allez perdre les modifications, voulez-vous enregistrer ?   » Pas de négatif dans la formulation « Vous ne voulez pas enregistrer ? » Respecter l’ordre chronologique « Dans le menu X faire le choix Y »

Question - Que changer dans ce formulaire ? Nom Prénom Tél Adresse Profession Intérêts Formation Commentaires Produit commandé Carte de crédit Approbation

Question - Que changer dans ce formulaire ? Nom Prénom Tél Adresse Profession Intérêts Formation Commentaires Produit commandé Carte de crédit Alignements Donner des modèles Ordre habituel Grandeur des champs appropriée Chercher à déduire l’information Fournir des choix, éviter d’écrire Bouton Annuler Approbation

Graphiques sur Internet Images Pas de graphiques inutiles, réutiliser Taille et qualité minimum (ne pas rapetisser à l’écran) Mettre aussi du texte - tout le monde ne comprends pas Mettre un texte alternatif - escamot (alt) - moteur de recherche Utiliser des miniatures des images progressives Fonds Éviter les motifs Mettre couleur ou image, pendant que les images du fond sont chargées Tester les fonds Utiliser une petite image répétée (patterns) Attention à la lisibilité et aux interactions de couleur (différents selon écran) Créer des motifs avec des textures, des photos, des logos Éviter le dithering brouille les caractères Weinschenk & al. Ch 11

Icônes Choisissez une icône 16 pixels2 , 32 pixels2 , bureau 48 pixels2 crayon 15, trackball 20, écran tactile 40 Chaque icône ne ressemble pas aux autres Cohérence externe et interne reconnaissable même petite ou en noir et blanc Barres de boutons - thème métaphore, unité visuelle, associer les verbes à des objets Sur l'Internet prévoir un texte alternatif (ALT), qui apparaît en commentaire et sert aux interfaces non graphiques Boutons- Rétroaction lorsque choix courant, lorsque déjà choisi Choisissez une icône

Choix d'icônes Types d'images non réalistes (Arnheim 64) reproduit des caractéristiques physiques d'un objet d'abstraction inférieur triangle = montagne les images, les caricatures sont des icônes. symbole représente concrètement un objet d'un niveau d'abstraction supérieure triangle = hiérarchie signe lien arbitraire avec l'objet triangle = danger En fait les meilleurs signes peuvent être icônes et aussi des symboles, représente l'objet et les propriétés ou actions possibles (pragmatique - poubelle pleine) Plus une image abstrait les caractéristiques essentielles plus la reconnaissance est rapide (caricature).

Multimédia Lorsque le non-verbal est plus naturel Pour audience moins lettrée Pour audience internationale Pour renforcer l’apprentissage Pour attirer l’attention Pour la rétroaction Pour montrer comment marche les choses Permettre de couper le son Éviter les animations qui n’en finissent plus Faciliter le chargement des modules complémentaires Weinschenk & al. Ch 11

Gayeski x Survol ou révision Spatial Texte Schéma Image audio animation image vidéo Survol ou révision x Spatial conceptuel Relations temporelles Invisible Subtilités de l’Intéraction Identification comparaison Simultané Sur 2 canaux

Couleur Fidélité des couleurs selon l’écran Problème à l’impression Pas trop ≠ Pizza Plus intéressant que noir et blanc (45% plus remarqué, moins lisible) Alerte changement, attire l'attention, clignotement Exprime la relation entre des éléments, découpe zones attention que ca soit approprié Peut réduire la recherche dans une fenêtre complexe L'usager doit connaître (cohérence externe) ou apprendre le code par indices Il doit pouvoir le contrôler - Internet, fonds d’écrans Les codes doivent être très différents les uns des autres Attention aux daltoniens Couleur difficile à lire -> gras et grosseur, foncé sur pâle Interaction entre les couleurs contrastantes dans l'espace et dans le temps bordures, change la couleur perçue, fatigue Fidélité des couleurs selon l’écran Problème à l’impression

Psychologie des couleurs physiologie (données) rouge augmente GSR couleur chaude et froide fovéa - centre plus détaillé symbologie ex blue =mer,infini rouge=feu,force,sang vert=forêt, nature noir=nuit,mort blanc=pureté, divinité personnalité bleu conservateur, violet excentrique, brun solide, noir anarchique, blanc simple, rouge énergique, vert naturel, etc. basé sur des tests associant les couleurs à des qualificatifs fonctionnalité: publicité noir et blanc-->message couleur --> image

Psychologie des couleurs... environnement chaud stimule créativité, action (éducation IQ+12, vente, restaurant) froid calme neutre évite distraction, cache poussière codification sécurité = code des couleurs Gestalt (principes de combinaison des couleurs) similarité : camaïeux, couleur chaude ensemble continuité: pas de surprise dans le temps fermeture: tous les aspects des couleurs (brillance, teinte, saturation) trois éléments (fond, forme, accent)

Internationalisation et accessibilité

Internationalisation et accessibilité

Internationalisation et accessibilité Amérique du nord.. n’est plus que 18% Augmentation de l’Asie, l’Afrique, l’Amérique du Sud

Internationalisation et accessibilité Alphabets, claviers sont différents Sens de lecture Différence de calendriers, des dates, d'unités de mesure ($) Icônes ou métaphores peuvent être offensantes ou avoir des sens différents Évitez les expressions locales Utilisez les formats standards sur Internet Attention au daltoniens Utiliser des grandeurs relatives (handicapés visuels) Manipulation facile (problèmes de motricité) Modalités redondantes

Internationalisation Préciser les coordonnées spatiales Pays, état, extension téléphonique Coordonnées temporelles - fuseau horaire Dans les formulaires, penser aux formats étrangers Espaces et exemples des codes postaux ou des téléphones Signification des symboles, des couleurs peut varier Information minimale en anglais Weinschenk & al. Ch 11

Favoriser l’accessibilité Contenu approprié (qui correspond aux besoins, aux cas d’utilisation) Pages légères (blanc, rapide à afficher) Permettre d’imprimer les pages longues Mettre des indices visuels pour distinguer (où on est, ce qui est important) Fournir une carte des relations entre les pages et relier cette carte au contenu Ajouter des « textes alternatifs » pour favoriser l’accès aux mal-voyants Adapter les images actives (avec des alt) Informations méta - Penser aux titres, aux mots-clés, aux descriptions pour les moteurs de recherche (interne et externe) Fournir un outil de recherche sur le site (Google) Valider sur différents navigateurs, formats d’écrans et clavier Utiliser les styles standards (permet le grossissement des caractères). Weinschenk & al. Ch 11

Netiquette Tenir l’information à jour Indiquer la date de la mise à jour Fournir quelque chose pendant l’attente Ne pas utiliser des contenus sans avoir les droits et sans rendre le crédit (attention au plagiat) Permettre aux visiteurs de s’adresser à vous Répondre aux courriels Demander la permission avant de créer un lien Mentionner le copyright Faire attention à la familiarité et à l’humour Weinschenk & al. Ch 11

Onglets des grandes sections Accès interactif Cie Titre Onglets des grandes sections Accès interactif Menu des des sous-sections Corporatif, Home Courriel, recherche webmestre Exemple de Grille

Les critères équivalents sont en rouge Bloopers de Johnson * http://books.elsevier.com/companions/9781558608405/checklist.html Listes des erreurs les plus fréquentes Les critères équivalents sont en rouge Erreur de contenu Crise d’identité de la page d’accueil http://ww.pwcglobal.com/ incitation Classifications confuses organisation Descriptions inutiles associées à un lien Contenu conflictuel (deux prix différents pour un produit) cohérence interne Contenu désuet - “annoncer une conférence passée” Contenu manquant ou inutile - Site d’un festival qui n’indique pas la date ou la carte Contenu incomplet “Page en construction” * Repris et traduit par Sylvie Turcotte

Bloopers de Johnson Erreur du soutien à la tâche Requêtes redondantes actions minimales Exiger des données non nécessaires Choix injustifiés Options importantes sont absentes Manque de soutien à la tâche.. pour réserver un vol, proposer l’aéroport le plus proche, s’il n’y en a pas dans la ville demandée Cul de sac (Now you tell me!). Laisser l’usager s’enfoncer dans une option quand en fait elle n’est pas disponible Demander de spécifier un vol quand il n’y a plus de place Donner le prix avoir avoir demandé les coordonnées Flot de tâche désespérant, trop long (agonizing task flow)

Bloopers de Johnson Erreur du soutien à la navigation Structure est celle de l’organisation et non pas de la tâche organisation Trop de structures différentes mêlées (Radio-canada) Double liens avec deux noms différents - cohérence interne Download now - free download Lien indirect ou faux lien (qui sort du site) Perdu dans l’espace - page qui ne dit pas où l’usager est rétroaction, visibilité Lien qui boucle..(qui mène à la page elle-même) + cohérence interne Page sans lien (Back or nothing) possibilité d’échappement

Bloopers de Johnson Erreur des formulaires Forcer les utilisateurs à dactylographier si peut être évité Manque de souplesse dans l’entrée des champs de formulaires Tolérence aux erreurs Pas de valeur de défaut, Mauvais choix pour le défaut Le curseur n’est pas positionné - l’usager ne peut juste taper. Étiquettes des champs à remplir décalées Mauvais choix des boutons radios ou des cases à cocher. Zone qui a l’air modifiable, mais qui ne l’est pas Contrôle mystérieux..On ne peut pas deviner Étiquette, titre, disposition.. cohérence externe, organisation

Bloopers de Johnson Erreur des liens N’ont pas l’air de liens Non liens ont l’air de liens Boutons bizarres (différents de ce qui est cliquable) Liens sur deux lignes = 1 ou 2 ? Liens cachés dans le texte Liens sans rétroaction

Maquette du Design de pages Présenter la grille les zones Pour chaque page typique fournir un exemple Montrer le contenu.. Décrire les animations

Maquette Présentation des pages Ouverture: Animation mots apparaissent Trois coups… Théâtre du Rideau Vert Saison 97-98 Jan Fév Mar Avr Mai Juin Juil Août Sept Oct Nov Déc Passion Interaction: Mois - Effet 3D au survol Le théâtre n’existe pas sans vous Venez y jouer votre rôle Information 345-2278 Tendresse Rêve Amour Sortie : Seul le cadre droite en bas change English N’oubliez pas les titres, respectez la grille et les cohérence interne

Programme Théâtre du Rideau Vert 6 janvier au 13 mars Ouverture: Choix du mois reste sélectionné Jan Fév Mar Avr Mai Juin Juil Août Sept Oct Nov Déc 6 janvier au 13 mars Le malade imaginaire Molière 14 mars au 19 mai La maison de poupée Ibsen 20 mai au 24 juin Ubu Roi Ionesco Interaction: Au survol, phrase extraite de la pièce est lue. 3 lignes de biographie des auteurs apparaissent au survol, pop up 3 lignes de description apparaissent au survol du titre , pop up Étoiles liées aux évaluations des spectateurs Théâtre du Rideau Vert English Exemple de justification Le programme est présenté selon une métaphore habituelle (verticale), flexibilité - les titres et les images permettent de naviguer consistance- le titre et les mois sont au même endroit perception - le rouge des titres attire l’attention, au centre facile à cliquer. Support à navigation - titres choisis sont marqués en vert si visités ...

Le malade Imaginaire, Molière Le Malade imaginaire est la dernière comédie écrite par Molière. C'est une comédie-ballet en trois actes (comportant respectivement 8, 9 et 15 scènes), représentée au Théâtre du Palais-Royal le 10 février 1673 par la troupe de Molière ; elle puise son inspiration dans la commedia dell'arte. La musique est de Marc-Antoine Charpentier et les ballets de Pierre Beauchamp. Source Wikipedia Interaction: Description est défilable Acteurs sont cliquables Permet de coter.. Flèche Ouvre formulaire Applaudissement ou chououou après avoir coté. Théâtre du Rideau Vert Argan : Remy Girard Toinette: Guylaine Tremblay Votre évaluation ? Mettre les vrais textes, un aperçu des vraies images, de façon à tester les grandeurs, la lisibilité, etc..Ne pas oublier les éléments généraux, comme le titre Rideau Vert, le bouton pour la version anglaise, etc.. Vous pouvez justifier les aspects ergonomiques de la page..

Théâtre du rideau vert Le vrai site du Théâtre du Rideau Vert Le Théâtre du Nouveau Monde Explorez trouvez les problèmes – navigation, lisibilité, couleurs, accessibilité Trouvez une autre façon de concevoir le site du théâtre du rideau vert. Changez la structure Changez les écrans Rajoutez des fonctions si vous en trouvez qui seraient utiles par exemple notes ou commentaires du public.