Design de pages

Interfaces et Scénarisation (COM2571)

15 octobre 2013Grégory Petit

http://lrcm.com.umontreal.ca/greg/COM2571/

La semaine dernière …Rechercher de l’information

Outils d’aide à la navigation

Les représentations structuralesCas d’utilisationStructures statiquesStructures dynamiques

Maquette

Scénarisation interactiveAnalyse des besoins

Objectifs de communication

Cas d’utilisation, scénarios

Description du contenu

et exemples

Design de la structure

d’interaction

Design des principaux écrans et

des boutons

Validation par les usagers

Programmation

Validation par le client

Et donc on fait quoi aujourd’hui?

Principes du design des pages selon Weinschenk Titres, textes, menus, boutons et menus, etc. Formulaires Choix d'icônes et de médias

Psychologie des couleurs

Lois de la Gestalt

Internationalisation et accessibilité

Bloopers - Les erreurs les plus fréquentes selon Johnson

Maquettes

Principes du design de pages

Principes du design de pages Weinschenk & al. Ch. 11

NavigationMise en pageTextes et typographieMenus et titresBoîtes de dialogue et formulaires Graphiques, images et icônesMultimédia et choix d’un médium

Design des écrans ou fenêtresChoisir un titre court et expressif.Un contexte général doit être présent sur la

page d’accueil.Créer des blocs fonctionnels :

Définir les blocs fixes (éviter le défilement dans ces blocs).

Rectangle d’or (1 x 1.618)ou double carré.Regrouper les informations et les organiser

dans l'ordre naturel de lecture et d'action (exception les blocs fonctionnels).

Design des écrans ou fenêtres

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 :Le réduire le plus possible .Utiliser les ancres pour réduire le défilement

dans les pages longues.

NavigationMaximum 3 clics pour atteindre l’information

(idéal).

Cohérence interne.

Utiliser la hiérarchie de sections jusqu’à trois.

Menus textuels et pas seulement par des icônes (plus rapide).

Réduire le nombre de liens dans les pages pour avoir du vrai contenu.

NavigationSi le site est grand, on peut fournir deux niveaux de

navigation (Revenu Québec).

Le survol et le grossissement peuvent aider à la navigation

Choisir de bonnes étiquettes éviter « Cliquer ici », « Valider »

Mettre des liens internes (ancres), si les pages sont longues.

Réviser les liens internes et externes régulièrement.

Faire ouvrir les liens externes dans un nouvel onglet.

Mise en pageMettre ce qui est important, intéressant, fréquent au

début.

Mettre les principales sections sous forme de grille (menu).

Première page (accueil) sur une seule page.

Attention aux sauts probables des pages.

Un chargement long pour gêner la mise en page.

Utiliser les tables cachées pour la mise en page.

Mise en pageUtiliser les feuilles de styles CSS.

Gérer correctement les espaces horizontaux et verticaux.

Placer le texte près des images (en dessous).

Créer des groupes dans les formulaires et dans les listes longues indentation

Minimiser le défilement vertical.

Jamais de défilement horizontal.

Textes et typographie

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

Textes et typographie

"Sleon une édtue de l'Uvinertisé de Cmabrigde, l'odrre des ltteers dnas un mto n'a pas d'ipmrotncae, la suele coshe ipmrotnate est que la pmeirère et la drenèire soeint à la bnnoe pclae. Le rsete peut êrte dnas un dsérorde ttoal et vuos puoevz tujoruos lrie snas porlbème. C'est prace que le creaveu hmauin ne lit pas chuaqe ltetre elle-mmêe, mias le mot cmome un tuot."

TypographiePolices sans empattement (serif) AB vs. AB.

Minimiser le gras.

Éviter l’italique, le souligné.

Pour les changements de grosseur, utiliser les styles standards Accessibilité.

Dans les listes, suivez les standards de majuscule et de ponctuation.

TextesNe pas mettre de titre de manière verticale.Mettre des sous-titres si nécessaire.Privilégier les phrases courtes et détachées.Évitez les césures dans les mots.Éviter les mots rares et/ou longs, conjonctions,

mots ambigus.Préférer la forme positive, active et au présent.Évitez les textes tout en majuscule, ou qui

clignotent.Mise en relief pas plus de 10% du texte, pas trop

de différentes tailles.Utiliser l’alignement à gauche (sauf les titres).

Textes

« 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. »

Est-ce difficile à lire?

Que changer dans ce texte?

Menus et listes de choixKiger - deux niveaux et pas plus de 10 items par niveau

Ordre Standard (cohérence externe) Alphabétique, chronologique, fréquence d'utilisation en haut à gauche Similarité sémantique Organisation spatiale - pays, exploration d'un objet Ordre d'utilisation (couper, coller...)

Raccourcis dans les menus Commandes présentées dans les menus (Enregistrer = Ctrl+S) Icône qui apparaît ensuite Pop-up menu Menu qui se décroche

Conventions pour les menus d’applications

TitresMettre obligatoirement un titre aux pages (qu’il reste

visible)

Choisir soigneusement les titres pour qu’ils désignent bien le contenu et qu’il soient bien distincts les uns des autres.

Choisir le titre des pages qui apparaît dans la barre de titre et apparaîtra dans les favoris.

Mettre des sous-titres dans le contenu.

Mettre titre - sous-titre dans la barre titre. (site du prof)

TitresAttention aux cadres (frames)

Ne chargent qu’une fois, donc bien pour mettre les données générales mais pas de barre de titre adaptée

Si les gens arrivent par la recherche, il faut mettre la possibilité de revenir au site à partir des pages

Utiliser un cadre pour les commentaires et détails.

Attention aux multiples fenêtres logiciels anti pop-up

Boîtes de dialogue et formulaire

Titre

Organisation : groupes et ordre naturel d'entrée

Valeurs par défaut

Permettre une façon d’annuler si possible

Montrer clairement les champs à compléter

Boîtes de dialogue et formulaire

Fournir des exemples de ce qui est demandé ou des formats requis (dates, numéros de téléphone)

Uniformiser la présentation selon une grille

Minimiser l'information qui doit être entrée

Permettre de corriger (réversibilité)

Boutons exprimant correctement le sens de l’action Bouton Voter plutôt que Valider

Boîtes de dialogue et formulaire

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

Compléments graphiques : Séparateurs de zone, avec titres Attributs des éléments par défaut

Dépend du système d’exploitation (MAC, Windows, Linux).

Exemple avec la sauvegarde

Valeur par défaut

Bouton par défaut

Répertoire sélectionné

Liens favoris

Windows XP

Exemple avec la sauvegarde

Bouton par défaut (retour)

Valeur par défaut Étendre répertoireMAC etWindows Vista

Boîtes de dialogue et formulaire

Plusieurs autres aspects améliorent la convivialité et la cohérence externe d’une interface :

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.Les changements dans le curseur de la

souris.Messages d’alerte et dialogue (« Vous allez

perdre les modifications, voulez-vous enregistrer? »).

Curseur de la souris

Qu’est ce qui ne va pas ici?

Approbation

Nom PrénomTélAdresse

ProfessionIntérêtsFormationCommentairesProduit commandéCarte de crédit

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

ImagesPas de graphiques inutiles.

Taille et qualité minimum (ne pas rapetisser à l’écran).

Mettre aussi du texte tout le monde ne comprends pas accessibilité

Mettre un texte alternatif (balise alt) moteur de recherche + accessibilité

Utiliser des miniatures.

Des images progressives (entrelacement).

Fonds de pageMettre une couleur pendant que les images du fond sont

chargées.

Tester les fonds sur plusieurs résolutions d’écran.

Utiliser une petite image répétée (patterns).

Attention à la lisibilité et aux interactions de couleur (différents selon les écrans).

Créer des motifs avec des textures, des photos, des logos.

Éviter le « dithering » (réduction du nombre de couleurs) brouille les caractères.

IcônesStandard : 16 pixels, 32 pixels, 48 pixels sur le

bureau.

Taille pour être sélectionnable : 15 (crayon), 20 (trackball ), 40 (écran tactile).

Chaque icône doit être différentiable des autres.

Cohérence externe et interne.

Reconnaissable même petit ou en noir et blanc.

IcônesBarres de boutons - thème métaphore, unité visuelle,

associer les verbes à des objets.

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

Plus une image abstrait les caractéristiques essentielles plus la reconnaissance est rapide (caricature).

IcônesPrendre en compte le contexte d’utilisation

(Arnheim 1964)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

Icônes

Icônes

MultimédiaLorsque le non-verbal est plus naturel.Pour une audience moins lettrée ou

internationale.Pour renforcer l’apprentissage.Pour attirer l’attention.

Permettre de couper le son.Éviter les animations qui n’en finissent plus.Faciliter le chargement des modules

complémentaires.

Psychologie des couleurs

Regardez bien!

CouleursPas trop de couleurs différentes on fait des

interfaces, pas des pizzas!!!Plus intéressant que noir et blanc 45%

plus remarqué même si moins lisible.Attire mieux l’attention.Exprime la relation entre des éléments,

découpe zones.Peut réduire la recherche dans une

fenêtre complexe.

CouleursL'usager doit connaître (cohérence externe)

ou apprendre le code par indices.Les codes doivent être très différents les uns

des autres.Attention aux daltoniens! 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 couleursPhysiologie :

Champs de vision : 60° en haut, 70° en bas et 90° environ latéralement.

Fovéa - centre plus détaillé et captant mieux les couleurs.

Symbologie :Bleu = mer, infini Rouge= feu, force, sangVert= forêt, natureNoir= nuit, mortBlanc= pureté, divinité

Psychologie des couleursPersonnalité :

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é :Ex : publicité

noir et blanc MessageCouleur Image

Lois de la Gestalt

Lois de la Gestalt (1920)Proximité : nous regroupons les points

d'abord les plus proches les uns des autres.

Similarité : si la distance ne permet pas de regrouper les points, nous nous attacherons ensuite à repérer les plus similaires entre eux pour percevoir une forme.

Lois de la Gestalt (1920)Continuité : des points rapprochés tendent à

représenter des formes lorsqu'ils sont perçus, nous les percevons d'abord dans une continuité, comme des prolongements les uns par rapport aux autres.

=

≠

Lois de la Gestalt (1920)La clôture : on a tendance à fermer des

contours, même s’il ya des espaces à l’intérieur.

Distinction figure-fond : la figure est souvent vue comme plus petite que le fond … comment bien distinguer ce qui est le fond ou la figure?

Lois de la Gestalt (1920)Symétrie : percevoir une image comme un

tout ou comme l’association de plusieurs formes.

Ici, que voyez-vous?Une seule figure?2 losanges qui se recoupent?Un petit losange avec 2 L?

Internationalisation et accessibilité

Internationalisation (1999)

Internationalisation (2007)

InternationalisationAlphabets, 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.

InternationalisationPréciser les coordonnées spatiales

Pays, état, extension téléphonique

Coordonnées temporelles - fuseau horaire

Dans les formulaires, penser aux formats étrangersEspaces et exemples des codes postaux ou des

téléphones

Information minimale en anglais

Le handicap au canadaLa fréquence augmente avec l’âge

Source : L'Enquête sur la participation et les limitations d'activités de 2006 : rapport analytique, p. 9. http://www.statcan.ca/francais/freepub/89-628-XIF/89-628-XIF2007002.pdf

Le handicap au CanadaLa plupart des personnes ont plus d’un handicap

Source : L'Enquête sur la participation et les limitations d'activités de 2006 : rapport analytique, p. 9. http://www.statcan.ca/francais/freepub/89-628-XIF/89-628-XIF2007002.pdf

Nombre d’incapacité

Enfants de 5 à 14 ans

Adultes de 15 ans et plus

Nombre % Nombre %Total 174 810 100,0 4 215 530 100,0Une 45 920 26,3 775 450 18,4Deux

63 780 36,5711 410 16,9

Trois 1 174 760 27,9Quatre ou cinq

45 760 26,2 1 216 840 28,9

Six ou plus 19 350 11,1 337 070 8,0

AccessibilitéJe ne peux pas vous donner tout ce qu’il

faudrait faire pour rendre accessible une application … si cela vous intéresse cours IDV6919 : Accessibilité du Web et du Multimedia

Mais on peut voir quand même quelques petits trucs!

AccessibilitéAttention aux mélanges de couleurs daltoniens.

Utiliser des grandeurs relatives (handicapés visuels).

Manipulation facile (problèmes de motricité).

Contenu approprié (qui correspond aux besoins, aux cas d’utilisation).

Pages légères (blanc, rapide à afficher).

Permettre d’imprimer les pages longues.

AccessibilitéMettre des indices visuels pour distinguer où on est et 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

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

claviers.Utiliser les styles standards (permet le grossissement des

caractères).

Bloopers de Johnson

Bloopers de JonhsonBloopers = bourdes/bétises

Cela correspond aux erreurs les plus fréquentes commises lors de la conception d’interfaces.

Ils ont été repris et traduit par Sylvie Turcotte

Erreurs de contenuCrise d’identité de la page d’accueil

La page d’accueil veut tout faire pb d’incitation.

Classifications confuses pb d’organisation.

Descriptions inutiles associées à un lien.

Contenu conflictuel (deux prix différents pour un produit) pb de cohérence interne.

Erreurs de contenuContenu 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 ».

Erreurs du soutien à la tâcheRequêtes redondantes pb d’actions minimales.

Exiger des données non nécessaires.

Options importantes qui sont absentes.

Manque de soutien à la tâche :Ex : 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 Laisser l’usager s’enfoncer dans une option quand en fait elle n’est pas disponible.Ex : Demander de spécifier un vol quand il n’y a plus de place.

Donner le prix avoir demandé les coordonnées.

Tâche désespérante, trop longue.

Erreur du soutien à la navigationLa structure est celle de l’organisation et non pas celle

de la tâche pb d’organisationTrop de structures différentes mêlées (Radio-canada)Double lien avec deux noms différents pb de

cohérence interneEx : Download now vs. Free download

Lien indirect ou faux lien (qui sort du site)Perdu dans l’espace : page qui ne dit pas où l’usager est

pb de rétroaction et de visibilitéLien qui boucle(qui mène à la page elle-même) cohérence interne

Page sans lien impossibilité d’échappement

Erreur des formulairesForcer les utilisateurs à écrire si cela peut être

évité.Manque de souplesse dans l’entrée des champs de

formulaires pb de tolérance aux erreurs.Pas de valeur par défaut ou mauvais choix pour le

défaut.Le curseur n’est pas positionné au début du

formulaire.É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.

Erreur des liensN’ont pas l’air de liens.

Non liens ont l’air de liens (Bell).

Boutons bizarres (différents de ce qui est cliquable).

Liens sur deux lignes 1 ou 2 liens?

Liens cachés dans le texte.

Liens sans rétroaction.

Maquettes

Théâtre du rideau vert

• Le théâtre n’existe pas sans vous• Venez y jouer votre rôle

• Information 345-2278

Passion

Rêve

Tendresse

Amour

Ouverture:Animation mots apparaissentTrois coups…

Interaction:Mois - Effet 3D au survol

Bienvenue au Théâtre du Rideau VertSaison 2008

Sortie :Seul le cadre droit en bas change

N’oubliez pas les titres, Respectez la grille et les cohérence interne

JanFévMarAvrMaiJuinJuilAoûtSeptOctNovDéc

English

Théâtre du rideau vertBienvenue au Théâtre du Rideau VertProgramme Janvier 2008Jan

FévMarAvrMaiJuinJuilAoûtSeptOctNovDéc

English

6 janvier au 13 marsLe malade imaginaire Molière

18 janvier au 19 avrilLa maison de poupée Ibsen

20 janvier au 15 févrierUbu Roi Ionesco

Ouverture :Choix du mois reste sélectionné

Interaction :3 lignes de biographie des auteursapparaissent au survol3 lignes de description apparaissent au survol du titreÉtoiles liées aux évaluations des spectateurs

Théâtre du rideau vertBienvenue au Théâtre du Rideau VertLe Malade ImaginaireJan

FévMarAvrMaiJuinJuilAoûtSeptOctNovDéc

English

Argan : Remy GirardToinette: 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.

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

Interaction:Description défilableActeurs sont cliquables

Les étoiles permettent de coter.

Votre évaluation ?

Atelier

DesjardinsSite Web de Desjardins

Trouvez une autre façon de concevoir le site.

Penser comment réorganiser l’interface.

Rajouter des fonctions si vous en trouver des utiles.

Des questions???

Merci de votre attention!

A la semaine prochaine!

gregory.petit@polymtl.cahttp://lrcm.com.umontreal.ca/greg/COM2571/