Interfaces et Scénarisation (COM2571) 15 octobre 2013 Grégory Petit

La semaine dernière … Rechercher de linformation Outils daide à la navigation Les représentations structurales Cas dutilisation Structures statiques Structures dynamiques

Maquette Scénarisation interactive Analyse des besoins Objectifs de communication Cas dutilisation, scénarios Description du contenu et exemples Design de la structure dinteraction Design des principaux écrans et des boutons Validation par les usagers Programmation Validation par le client

Et donc on fait quoi aujourdhui? 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 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 dun médium

Design des écrans ou fenêtres Choisir un titre court et expressif. Un contexte général doit être présent sur la page daccueil. Créer des blocs fonctionnels : Définir les blocs fixes (éviter le défilement dans ces blocs). Rectangle dor (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.

Navigation Maximum 3 clics pour atteindre linformation (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.

Navigation Si le site est grand, on peut fournir deux niveaux de navigation (Revenu Québec).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 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 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 Quest ce qui diminue la lisibilité dun 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."

Typographie Polices sans empattement (serif) AB vs. AB. Minimiser le gras. Éviter litalique, le souligné. Pour les changements de grosseur, utiliser les styles standards Accessibilité. Dans les listes, suivez les standards de majuscule et de ponctuation.

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 lalignement à gauche (sauf les titres).

Textes « Pourquoi ce texte, qui est pourtant important, nest-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 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

Conventions pour les menus dapplications

Titres Mettre obligatoirement un titre aux pages (quil reste visible) Choisir soigneusement les titres pour quils désignent bien le contenu et quil 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)site du prof

Titres Attention aux cadres (frames) Ne chargent quune 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 dannuler 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 laction Bouton Voter plutôt que Valider

Boîtes de dialogue et formulaire Respecter les types de contrôles et la façon de sen 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 dexploitation (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épertoire MAC et Windows Vista

Boîtes de dialogue et formulaire Plusieurs autres aspects améliorent la convivialité et la cohérence externe dune interface : La rétroaction (votre fichier a été enregistré, 10 éléments trouvés). Les indices de lattente et de la progression. La possibilité dannuler. Les changements dans le curseur de la souris. Messages dalerte et dialogue (« Vous allez perdre les modifications, voulez-vous enregistrer? »).

Curseur de la souris

Quest ce qui ne va pas ici? Approbation NomPré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 linformation Fournir des choix, éviter décrire Bouton Annuler

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 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 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ô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ônes Prendre en compte le contexte dutilisation (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

Multimédia Lorsque le non-verbal est plus naturel. Pour une audience moins lettrée ou internationale. Pour renforcer lapprentissage. Pour attirer lattention. Permettre de couper le son. Éviter les animations qui nen finissent plus. Faciliter le chargement des modules complémentaires.

Psychologie des couleurs

Regardez bien!

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 lattention. Exprime la relation entre des éléments, découpe zones. Peut réduire la recherche dans une fenêtre complexe.

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

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

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 sil ya des espaces à linté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 lassociation 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)

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.

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

Le handicap au Canada La plupart des personnes ont plus dun handicap Source : L'Enquête sur la participation et les limitations d'activités de 2006 : rapport analytique, p Nombre dincapacité Enfants de 5 à 14 ans Adultes de 15 ans et plus Nombre% % Total , ,0 Une , ,4 Deux , ,9 Trois ,9 Quatre ou cinq , ,9 Six ou plus , ,0

Accessibilité Je ne peux pas vous donner tout ce quil 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 dutilisation). Pages légères (blanc, rapide à afficher). Permettre dimprimer 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 laccès aux malvoyants Balises. 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 Jonhson Bloopers = bourdes/bétises Cela correspond aux erreurs les plus fréquentes commises lors de la conception dinterfaces. Ils ont été repris et traduit par Sylvie Turcotte

Erreurs de contenu Crise didentité de la page daccueil La page daccueil veut tout faire pb dincitation. Classifications confuses pb dorganisation. Descriptions inutiles associées à un lien. Contenu conflictuel (deux prix différents pour un produit) pb de cohérence interne.

Erreurs de contenu Contenu désuet – « annoncer une conférence passée ». Contenu manquant ou inutile - Site dun festival qui nindique pas la date ou la carte. Contenu incomplet « Page en construction ».

Erreurs du soutien à la tâche Requêtes redondantes pb dactions 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 laéroport le plus proche, sil ny en a pas dans la ville demandée. Cul de sac Laisser lusager senfoncer dans une option quand en fait elle nest pas disponible. Ex : Demander de spécifier un vol quand il ny a plus de place. Donner le prix avoir demandé les coordonnées. Tâche désespérante, trop longue.

Erreur du soutien à la navigation La structure est celle de lorganisation et non pas celle de la tâche pb dorganisation Trop de structures différentes mêlées (Radio-canada) Double lien avec deux noms différents pb de cohérence interne Ex : Download now vs. Free download Lien indirect ou faux lien (qui sort du site) Perdu dans lespace : page qui ne dit pas où lusager 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 Forcer les utilisateurs à écrire si cela peut être évité. Manque de souplesse dans lentré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 nest 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 lair modifiable, mais qui ne lest pas.

Erreur des liens Nont pas lair de liens. Non liens ont lair 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 nexiste pas sans vous Venez y jouer votre rôle Information Passion Rêve Tendresse Amour Ouverture: Animation mots apparaissent Trois coups… Interaction: Mois - Effet 3D au survol Bienvenue au Théâtre du Rideau Vert Saison 2008 Sortie : Seul le cadre droit en bas change Noubliez pas les titres, Respectez la grille et les cohérence interne Jan Fév Mar Avr Mai Juin Juil Août Sept Oct Nov Déc Jan Fév Mar Avr Mai Juin Juil Août Sept Oct Nov Déc English

Théâtre du rideau vert Bienvenue au Théâtre du Rideau Vert Programme Janvier 2008 Jan Fév Mar Avr Mai Juin Juil Août Sept Oct Nov Déc Jan Fév Mar Avr Mai Juin Juil Août Sept Oct Nov Déc English 6 janvier au 13 mars Le malade imaginaireMolière 18 janvier au 19 avril La maison de poupée Ibsen 20 janvier au 15 février Ubu RoiIonesco Ouverture : Choix du mois reste sélectionné Interaction : 3 lignes de biographie des auteurs apparaissent au survol 3 lignes de description apparaissent au survol du titre Étoiles liées aux évaluations des spectateurs

Théâtre du rideau vert Bienvenue au Théâtre du Rideau Vert Le Malade Imaginaire Jan Fév Mar Avr Mai Juin Juil Août Sept Oct Nov Déc Jan Fév Mar Avr Mai Juin Juil Août Sept Oct Nov Déc English Argan : Remy Girard Toinette: 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éfilable Acteurs sont cliquables Les étoiles permettent de coter. Votre évaluation ?

Atelier

Desjardins Site Web de Desjardins Trouvez une autre façon de concevoir le site. Penser comment réorganiser linterface. Rajouter des fonctions si vous en trouver des utiles.

Des questions??? Merci de votre attention! A la semaine prochaine!