La présentation est en train de télécharger. S'il vous plaît, attendez

La présentation est en train de télécharger. S'il vous plaît, attendez

COM2571 - Design d'écrans Ne regardez pas cette page Quelles couleurs choisir ? Comment les combiner ? Pourquoi ce texte, qui est pourtant important, n'

Présentations similaires


Présentation au sujet: "COM2571 - Design d'écrans Ne regardez pas cette page Quelles couleurs choisir ? Comment les combiner ? Pourquoi ce texte, qui est pourtant important, n'"— Transcription de la présentation:

1 COM Design d'écrans Ne regardez pas cette page 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 icone Faut-il des cadres sur Internet ? Quel sortes de boutons ?

2 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 icones Multimédia et choix dun médium La couleur, psychologie des couleurs Icones Utilisation de la couleur

3 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 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

4 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

5 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

6 Favoriser laccès 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 alt pour favoriser laccès aux mal-voyants Considérer les images actives (avec des alt) Information méta - Penser aux titres, aux mots-clés 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 Weinschenk & al. Ch 11

7 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

8 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

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

10 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

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

12 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

13 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) –icone qui apparaît ensuite –pop up menu –menu qui se décroche

14 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

15 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

16 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 us/dnwue/html/part2.asp

17 Composantes dun menu et conventions…

18 Boîte de dialogue pour enregistrer ? ??? Titre de zone Barre titre ???

19 dasd

20 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 »

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

22 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

23 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 une couleur 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

24 16 pixels 2, 32 pixels 2, bureau 48 pixels 2 crayon 15, trackball 20, écran tactile 40 Chaque icone 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 titre, qui apparaît en commentaire et sert aux interfaces non graphiques Boutons- Rétroaction lorsque choix courrant, lorsque déjà choisi Icones Choisissez une icone

25 Choix d'icones Types d'images non réalistes (Arnheim 64) icone 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éarchie signe lien arbitraire avec l'objet triangle = danger En fait les meilleurs signes peuvent être icones 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).

26 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 Weinschenk & al. Ch 11

27 Survol ou revision xx Spatial conceptuel xxx Relations temporelles xxx Invisible xx Subtilités de lInteraction xx Idenfication comparaison x Simultané Sur 2 canaux xx Texte Schéma Image audio animation image vidéo Gayeski P 5-15

28 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

29 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

30 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é : camayeux, 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)

31 Internationalisation et accessibilité

32 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

33 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

34 Netiquette Tenir linfomration Indiquer la date de la mise à jour Fournique quelquechose 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 courriel Demander la permission avant de créer un lien Mentionner le copyright Faire attention à la familiarité et à lhumour Attention à laccessibilité Weinschenk & al. Ch 11

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


Télécharger ppt "COM2571 - Design d'écrans Ne regardez pas cette page Quelles couleurs choisir ? Comment les combiner ? Pourquoi ce texte, qui est pourtant important, n'"

Présentations similaires


Annonces Google