com2571 - design d'écrans ne regardez pas cette page quelles couleurs choisir ? comment les...

COM2571 - Design d'écrans

Ne regardez pas cette pageNe 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 disaitun expert en typographie.

Choisissez une icone

Faut-il des cadres sur Internet ?Quel sortes de boutons ?

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

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

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

CliquezCliquez

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

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

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


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


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

• ???

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


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

Titres

• 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..maispas 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


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 radiosComment 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érationhttp://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 ?

??? ???

Titre de zone

Barre titre

???

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 ?

Approbation

Nom Prénom

Tél

Adresse

Profession

Intérêts

Formation

Commentaires

Produit commandé

Carte de crédit

Question - Que changer dans ce formulaire ?

Approbation

Nom Prénom

Tél

Adresse

Profession

Intérêts

Formation

Commentaires

Produit commandé

Carte de crédit

AlignementsDonner des modèlesOrdre habituelGrandeur des champs appropriéeChercher à déduire l’informationFournir des choix

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 progressivesFonds• É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


• 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

Icones

Choisissez une icone

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.

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

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


Survol ou revision

x x

Spatial

conceptuelx x x

Relations

temporellesx x x

Invisible x x

Subtilités de l’Interaction x x

Idenfication comparaison x

Simultané

Sur 2 canauxx x

Texte Schéma Image audio animation image vidéo

Gayeski P 5-15

• 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

Couleur

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é : 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)

Internationalisation et accessibilité

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


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é


Cie

Menu desdes sous-sections

TitreOnglets des grandes sections

Accèsinteractif

Exemple de Grille

Courriel, recherchewebmestre

Corporatif, Home

com2571 - design d'écrans ne regardez pas cette page quelles couleurs choisir ? comment les...

Documents