design de pages n.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
Design de pages PowerPoint Presentation
Download Presentation
Design de pages

Loading in 2 Seconds...

play fullscreen
1 / 73

Design de pages - PowerPoint PPT Presentation


  • 82 Views
  • Uploaded on

Design de pages. Interfaces et Scénarisation (COM2571) 15 octobre 2013 Gré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 structurales Cas d’utilisation Structures statiques

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

Design de pages


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
design de pages

Design de pages

Interfaces et Scénarisation (COM2571)

15 octobre 2013

Grégory Petit

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

la semaine derni re
La semaine dernière …
  • Rechercher de l’information
  • Outils d’aide à la navigation
  • Les représentations structurales
    • Cas d’utilisation
    • Structures statiques
    • Structures dynamiques
sc narisation interactive
Scénarisation interactive

Analyse des besoins

Objectifs de communication

Cas d’utilisation, scénarios

Maquette

Description du contenu et exemples

Design de la structure d’interaction

Design des principaux écrans et des boutons

Validation par le client

Validation par les usagers

Programmation

et donc on fait quoi aujourd hui
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 weinschenk al ch 11
Principes du design de pagesWeinschenk & al. Ch. 11
  • Navigation
  • Mise en page
  • Textes et typographie
  • Menus et titres
  • Boîtes de dialogue et formulaires
  • Graphiques, images et icônes
  • Multimédia et choix d’un médium
design des crans ou fen tres
Design des écrans ou fenêtres
  • Choisir 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 tres1
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.
navigation
Navigation
  • Maximum 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.
navigation1
Navigation
  • Si 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 page
Mise en page
  • Mettre 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 page1
Mise en page
  • Utiliser 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
Textes et typographie

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

textes et typographie1
Textes et typographie

"Sleon une édtue de l'Uvinertisé de Cmabrigde, l'odrre des ltteersdnas un mto n'a pas d'ipmrotncae, la suelecosheipmrotnate est que la pmeirère et la drenèiresoeint à la bnnoepclae. Le rsete peut êrtednas un dsérordettoal et vuospuoevztujoruoslriesnasporlbème. C'est prace que le creaveuhmauin ne lit pas chuaqeltetreelle-mmêe, mias le mot cmome un tuot."

typographie
Typographie
  • Polices 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.
textes
Textes
  • Ne 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).
textes1
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 choix
Menus et listes de choix
  • Kiger - 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
titres
Titres
  • Mettre 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)
titres1
Titres
  • Attention 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
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 formulaire1
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 formulaire2
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
Exemple avec la sauvegarde

Windows XP

Répertoire sélectionné

Liens favoris

Valeur par défaut

Bouton par défaut

exemple avec la sauvegarde1
Exemple avec la sauvegarde

Valeur par défaut

Étendre répertoire

MAC et

Windows Vista

Bouton par défaut (retour)

bo tes de dialogue et formulaire3
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? »).
qu est ce qui ne va pas ici
Qu’est ce qui ne va pas ici?
  • 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, éviter d’écrire

Bouton Annuler

Approbation

images
Images
  • Pas 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 page
Fonds de page
  • Mettre 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 nes
Icônes
  • Standard : 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 nes1
Icônes
  • Barres 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 nes2
Icônes
  • Prendre 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
multim dia
Multimédia
  • Lorsque 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.
couleurs
Couleurs
  • Pas 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.
couleurs1
Couleurs
  • L'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 couleurs1
Psychologie des couleurs
  • Physiologie :
    • 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, sang
    • Vert= forêt, nature
    • Noir= nuit, mort
    • Blanc= pureté, divinité
psychologie des couleurs2
Psychologie des couleurs
  • 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é :
    • Ex : publicité

noir et blanc  Message

Couleur  Image

lois de la gestalt 1920
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 19201
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 19202
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 19203
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
Internationalisation
  • 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.
internationalisation1
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
  • Information minimale en anglais
le handicap au canada
Le handicap au canada
  • La 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 canada1
Le handicap au Canada
  • La 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

accessibilit
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!
accessibilit1
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.
accessibilit2
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 jonhson
Bloopers de Jonhson
  • Bloopers= 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 contenu
Erreurs de contenu
  • Crise 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 contenu1
Erreurs de contenu
  • Contenu 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 che
Erreurs du soutien à la tâche
  • Requê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 navigation
Erreur du soutien à la navigation
  • La structure est celle de l’organisation et non pas celle de la tâche  pb d’organisation
  • Trop de structures différentes mêlées (Radio-canada)
  • Double lien avec deux noms différents  pb de cohérence interne

Ex : Downloadnow 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 formulaires
Erreur des formulaires
  • Forcer 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 liens
Erreur des liens
  • N’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.
th tre du rideau vert
Théâtre du rideau vert

Bienvenue au Théâtre du Rideau VertSaison 2008

Jan

Fév

Mar

Avr

Mai

Juin

Juil

Août

Sept

Oct

Nov

Déc

Passion

Ouverture:

Animation mots apparaissent

Trois coups…

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

Tendresse

Rêve

Interaction:

Mois - Effet 3D au survol

Amour

Sortie :

Seul le cadre droit en bas change

English

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

th tre du rideau vert1
Théâtre du rideau vert

Bienvenue au Théâtre du Rideau VertProgramme Janvier 2008

Ouverture :

Choix du mois reste sélectionné

Jan

Fév

Mar

Avr

Mai

Juin

Juil

Août

Sept

Oct

Nov

Déc

6 janvier au 13 mars

Le malade imaginaire Molière

18 janvier au 19 avril

La maison de poupée Ibsen

20 janvier au 15 février

Ubu Roi Ionesco

Interaction :

3 lignes de biographie des auteursapparaissent au survol

3 lignes de description apparaissent au survol du titre

Étoiles liées aux évaluations des

spectateurs

English

th tre du rideau vert2
Théâtre du rideau vert

Bienvenue au Théâtre du Rideau VertLe Malade Imaginaire

Jan

Fév

Mar

Avr

Mai

Juin

Juil

Août

Sept

Oct

Nov

Déc

Interaction:

Description défilable

Acteurs sont cliquables

Les étoiles permettent de coter.

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.

Argan : Remy Girard

Toinette: Guylaine Tremblay

Votre évaluation ?

English

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

desjardins
Desjardins
  • Site 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.