COM Design d'écrans Ne regardez pas cette page

Présentation au sujet: "COM Design d'écrans Ne regardez pas cette page"— Transcription de la présentation:

1 COM2571 - Design d'écrans Ne regardez pas cette page
Quelles couleurs choisir ? Comment les combiner ? Choisissez une icone Faut-il des cadres sur Internet ? Quel sortes de boutons ? 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.

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 d’un 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 stables rectangle d'or 1 X ou double carré Sur l’Internet 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
Cliquez Bienvenue sur notre site ? Cliquez 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.

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

6 Favoriser l’accès 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 alt pour favoriser l’accè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 Qu’est-ce qui diminue la lisibilité d’un texte
???

10 D’abord la typographie …sur les écrans
Fontes sans 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

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

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

17 Composantes d’un menu et conventions…

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

19 dasd

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

21 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

22 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 Approbation

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 Icones Choisissez une icone
16 pixels2 , 32 pixels2 , bureau 48 pixels2 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 Choisissez une icone

25 Choix d'icones 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é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 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 Weinschenk & al. Ch 11

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

28 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

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

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 l’infomration Indiquer la date de la mise à jour
Fournique quelquechose 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 courriel Demander la permission avant de créer un lien Mentionner le copyright Faire attention à la familiarité et à l’humour Attention à l’accessibilité Weinschenk & al. Ch 11

35 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