Design de pages

1. Design de pages Interfaces et Scénarisation (COM2571) 15 octobre 2013 Grégory Petit http://lrcm.com.umontreal.ca/greg/COM2571/

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

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

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

5. Principes du design de pages

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

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

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

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

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

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

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

13. Textes et typographie Qu’est ce qui diminue la lisibilité d’un texte?

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

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

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

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

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

19. Conventions pour les menus d’applications

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

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

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

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

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

25. Exemple avec la sauvegarde Windows XP Répertoire sélectionné Liens favoris Valeur par défaut Bouton par défaut

26. Exemple avec la sauvegarde Valeur par défaut Étendre répertoire MAC et Windows Vista Bouton par défaut (retour)

27. 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? »).

28. Curseur de la souris

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

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

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

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

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

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

35. Icônes

36. Icônes

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

38. Psychologie des couleurs

39. Regardez bien!

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

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

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

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

44. Lois de la Gestalt

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

46. 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. = ≠

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

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

49. Internationalisation et accessibilité

50. Internationalisation (1999)