COM2571 - Design de la Structure et des écrans Quelles couleurs choisir ? Comment les combiner ? Pourquoi ce texte, qui est pourtant important, n' est-il.

Présentation au sujet: "COM2571 - Design de la Structure et des écrans Quelles couleurs choisir ? Comment les combiner ? Pourquoi ce texte, qui est pourtant important, n' est-il."— Transcription de la présentation:

1 COM2571 - Design de la Structure et des écrans 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. Choisissez une icône Faut-il des cadres sur Internet ? Quelles sortes de boutons ?

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

3 Illustrator PageMaker Word

4 Information sur les bourses Calendrier des demandes Une bourse pour vous ? Étranger ? 1er Cycle ? Liste des bourses Accessibles aux étrangers Boursier ? Liste des bourses De premier cycle Classées par département Règlement pour le renouvellement oui non Représentations: http://lrcm.com.umontreal.ca/dufresne/bta/scen/frame3b.html

5 Structure dune interaction, dun site Différents types de représentation User Modeling Language UML Fournissent des spécifications sur le système Outils pour construire ces représentations Mac - Omnigraffle Version réduite sur le serveurOmnigraffle PC – AxureAxure Exemples: http://lrcm.com.umontreal.ca/dufresne/bta/scen/frame3b.html

6 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é

7 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 dun médium La couleur, psychologie des couleurs Icones Utilisation de la couleur

8 Design des écrans ou fenêtre Titre court et expressif, qui correspond au contenu et au choix précédent, à l'icône choisie. Indices du contexte plus général Créer des blocs fonctionnels et utiliser une grille, définir des zones stablesgrille rectangle d'or 1 X 1.618 ou double carré Sur lInternet les proportions des fenêtres varient permettent le défilement créer une interface dynamique Regrouper les informations et les organiser dans l'ordre naturel de lecture..et d'action (exception les cadres) Penser à la fréquence de consultation ou d'entrée et mettre au début ou au centre ce qui est plus fréquent Penser au défilement, mettre les boutons accessibles donner une idée de ce qui suit (ancre) Fenêtres multiples et navigation ? Voir le tableau dans les notes

9 Question Que changer dans cette fenêtre Bienvenue sur notre site ? 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 diplômé de Communication. Cliquez

10 Design sur Internet - Weinschenk & al. Ch 11 Favoriser laccès Navigation Mise en page sur Internet Titres Graphiques Netiquette Multimédia et modalités Typographie sur Internet

11 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

12 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

13 Quest-ce qui diminue la lisibilité dun texte ???

14 Dabord la typographie …sur les écrans Fontes sans serif Minimiser le gras Éviter litalique, le souligné Prévoir les changements de grosseur, utiliser le styles standards Les fontes de caractères expriment limage Si vous utilisez des caractères spéciaux sous forme dimage noubliez pas les textes alternatifs… Dans les listes suivez les standards de majuscule et de ponctuation Weinschenk & al. Ch 11

15 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).

16 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

17 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

18 Titres Choisir soigneusement les titres pour quils désignent bien le contenu et quil soient bien distincts les uns des autres Mettre un titre aux pages (quil 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 quune fois, données générales..mais pas de favoris, dimpression, 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

19 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

20 Boîtes de dialogue ou formulaires - les contrôles Respecter les types de contrôles et la façon de sen 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 dobjets à 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 dopération http://msdn.microsoft.com/library/default.asp?url=/library/en- us/dnwue/html/part2.asp

21 Composantes dun menu et conventions…

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

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

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

25 Titres standards..icônes standards Allez-voir Menu Affichage Personnaliser la boîte doutils

26 Etc.. Plusieurs autres aspects améliorent la convivialité et la cohérence externe dune interface Les boites de fermeture, dagrandissement, 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 lattente et de la progression –La possibilité dannuler Messages dalerte 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 lordre chronologique « Dans le menu X faire le choix Y »

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

28 Question - Que changer dans ce formulaire ? Approbation NomPré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 linformation Fournir des choix, éviter décrire Bouton Annuler

29 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

30 16 pixels 2, 32 pixels 2, bureau 48 pixels 2 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 Icônes Choisissez une icône

31 Choix d'icônes Types d'images non réalistes (Arnheim 64) icône 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).

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

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

34 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 à limpression Couleur

35 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

36 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)

37 Internationalisation et accessibilité

38

39 Amérique du nord.. nest plus que 18% Augmentation de lAsie, lAfrique, lAmérique du Sud

40 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

41 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

42 Favoriser laccessibilité Contenu approprié (qui correspond aux besoins, aux cas dutilisation) Pages légères (blanc, rapide à afficher) Permettre dimprimer 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 laccè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

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

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

45 Bloopers de Johnson * http://books.elsevier.com/companions/9781558608405/checklist.html Listes des erreurs les plus fréquentes http://books.elsevier.com/companions/9781558608405/checklist.html Erreur de contenu –Crise didentité de la page daccueil http://ww.pwcglobal.com/ incitationhttp://ww.pwcglobal.com/ –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 dun festival qui nindique pas la date ou la carte –Contenu incomplet Page en construction Les critères équivalents sont en rouge * Repris et traduit par Sylvie Turcotte

46 Bloopers de Johnson Erreur du soutien à la tâche –Requêtes redondantesactions 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 laéroport le plus proche, sil ny en a pas dans la ville demandée –Cul de sac (Now you tell me!). Laisser lusager senfoncer dans une option quand en fait elle nest pas disponible Demander de spécifier un vol quand il ny 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)

47 Bloopers de Johnson Erreur du soutien à la navigation –Structure est celle de lorganisation 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 lespace - page qui ne dit pas où lusager 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

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

49 Bloopers de Johnson Erreur des liens –Nont pas lair de liens –Non liens ont lair 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

50 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

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

52 6 janvier au 13 mars Le malade imaginaireMolière 14 mars au 19 mai La maison de poupée Ibsen 20 mai au 24 juin Ubu RoiIonesco Jan Fév Mar Avr Mai Juin Juil Août Sept Oct Nov Déc Jan Fév Mar Avr Mai Juin Juil Août Sept Oct Nov Déc Théâtre du Rideau Vert Programme English Ouverture: Choix du mois reste sélectionné 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

53 Le malade Imaginaire, Molière Argan : Remy Girard Toinette: Guylaine Tremblay 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 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 Interaction: Description est défilable Acteurs sont cliquables Permet de coter.. Flèche Ouvre formulaire Applaudissement ou chououou après avoir coté. Votre évaluation ?

54 Atelier Faites la Structure Statique du site sur les Eportefolios http://www.aedii.qc.ca/v3/portfolios/ Faites la structure statique et la structure dynamique du jeu sur lAlimentation http://www.aedii.qc.ca/v3/portfolios/