Design et interactivité II

Programme des Cégep Techniques de Sainte-Foy d intégration multimédia Design et interactivité II 582-FWV-SF Pondération : 1-2-2 Enseignante : Julie Côté Groupes : 0001, 0002 Bureau : C-325 Casier : C-308 Session : Hiver 2010 Téléphone : 659-6600, poste 6684 Courriel : julie.cote@cegep-ste-foy.qc.ca Présentation générale du cours Le cours Design et interactivité II aborde le développement des interfaces dans un processus continu : connaître, concevoir et évaluer. Ce processus place l utilisateur au cœur du développement des interfaces de systèmes multimédias tout en abordant la conception sous l'angle de l ergonomie et de l utilisabilité. L'élève explore l'interactivité et la navigation de produit en vue d en faciliter l'utilisation pour des usagers spécifiques. L accent est mis sur la relation entre l'utilisateur, l'interface et la tâche à accomplir. Pour faire contrepoids à la vision utilitaire du Web et élargir les horizons de la création, des interfaces de produits multimédias plus artistiques ou exploratoires sont visionnées et analysées. Le cours Design et interactivité II est une suite logique des cours Langage multimédia I et II, Traitement des médias I et II et Design et interactivité I. Il donne l occasion à l élève d approfondir les notions de design apprises jusque là et d en découvrir de nouvelles. Le cours se divise en trois blocs. Le premier bloc aborde le développement des interfaces utilisateurs en insistant sur le design d interface et les concepts d ergonomie et d utilisabilité. De brefs exercices d analyse sont réalisés en vue de comprendre les facteurs et les règles d ergonomie. En se basant sur les exercices et la théorie vue en classe, l élève conçoit les interfaces d une application multimédia sur support en tenant compte des utilisateurs. Des notions relatives à l évaluation ergonomique des interfaces viennent conclurent ce bloc. Un projet est réalisé individuellement et en collaboration avec le cours Production multimédia IV. Le deuxième bloc approfondit le développement des interfaces en se centrant sur l utilisateur. La méthode de description de personnages y est présentée et appliquée dans le cadre d un deuxième projet. Le design d interface d un thème au choix de l étudiant y est réalisé. L étudiant pourrait réaliser son propre site Web de type portfolio ou encore réaliser les interfaces d un site de son choix. Ce projet permet aussi d aborder brièvement la rédaction de contenus spécifiquement pour le Web en tenant compte du style et de l expérience que l élève veut faire vivre à l utilisateur. L étudiant documente sa démarche de conception et d apprentissage. Un accent particulier est mis sur la présentation écrite et orale des concepts. Le troisième bloc aborde les notions et les enjeux de l utilisabilité des sites Web. L élève est appelé à explorer et à analyser divers types d interfaces sous la lorgnette de l utilisabilité. Un dernier exercice sommatif consiste à choisir une interface ayant des lacunes, et à en proposer une version améliorée. Durant toute la session, un accent particulier est mis sur la démarche de conception pour suivre et favoriser le développement des habiletés conceptuelles de chaque élève. Dans le cadre du 2 e projet, il compile, à cet effet, toutes les traces de la démarche dans un cahier de travail. L étudiant est aussi appelé à commenter, critiquer et présenter son travail à ses collègues. Le développement des attitudes professionnelles se poursuit et fait l objet d une évaluation formative tout au long de la session. Une attention particulière est aussi mise sur la qualité de la langue dans l ensemble des communications et des travaux réalisés. L ensemble du cours est l occasion de faire un retour constant sur les aspects reliés au design d interface: typographie expressive, contraste et harmonie de couleurs, grille de mise en page, hiérarchisation du contenu, style graphique. Réduire Réutiliser Recycler Design et interactivité II 582-FWU-SF Hiver 2010 1

Stratégies pédagogiques et modalités de participation Le cours Design et interactivité II permet à l'étudiant d affiner et d acquérir de nouvelles connaissances en design d interface. Plusieurs formules pédagogiques sont employées : jeu, exercices pratiques, analyses de cas, groupe de discussion, mais la principale formule est celle du projet réalisé individuellement. L'élève explore diverses voies de communication à travers le travail qui lui est demandé. Les conditions initiales du premier projet comportent un contenu, un scénario interactif, un schéma de navigation sous forme d arborescence. La stratégie de communication et le contexte de réalisation sont aussi déterminés à l avance. Le deuxième projet offre un cadre d exigences à rencontrer, mais les paramètres de conception et de réalisation sont laissés au soin de l étudiant. Le troisième projet comporte des directives qui sont déterminées et fournies à l apprenant en début de conception. Les projets et les exercices couvrent tous les éléments de la compétence «Adapter l interactivité des pages-écrans». Les projets proposent différents niveaux de difficulté sur le plan de l ergonomie, de l utilisabilité et de la communication. Les logiciels de design d'interface utilisés seront principalement Photoshop et Illustrator. Afin de compléter les notions théoriques présentées en classe, des lectures obligatoires sont réparties tout au long de la session. Deux tests annoncés au calendrier du cours viendront valider ces connaissances théoriques. Objets d apprentissage Savoir Les principes de l ergonomie de l interface Les qualités d un message efficace Les qualités d une mise en page communicante Les qualités plastiques des images et des textes Le rôle de l interface Le rôle des éléments de navigation Savoir faire Lire et décomposer un scénario et son schéma de navigation Analyser et organiser un message Reconnaître et établir les besoins d une production en fonction de la clientèle cible Réaliser un «persona» Adapter un schéma de navigation en fonction des objectifs de communication et du concept visuel choisi Adapter un concept visuel d une interface en fonction des objectifs de communication Réaliser des maquettes signifiantes Présenter un concept Savoir être Communicatif Organisé Créatif Stratégie d évaluation Évaluation formative L étudiant est accompagné par l enseignant dans son travail en cours de réalisation ; son travail est commenté, critiqué et des suggestions lui sont faites dans le but d atteindre les compétences. Plusieurs exercices sont réalisés au fil de la session. Chaque exercice est commenté par l enseignant et par les pairs, une évaluation formative de l exercice est donnée : Cote A+ : Cote A : Cote B : Cote Z : excellent travail qui va au delà des exigences réussi, très bon travail réalisé, mais incomplet ou faiblesse mineure non réalisé ou ne répond pas à la commande Design et interactivité II 582-FWU-SF Hiver 2010 2

Évaluation sommative Bloc I Bloc II Bloc III Ergonomie et utilisabilité des interfaces Projet 1 : Interface d une application elearning sur support 25 % Test Bloc 1 5 % Utilisabilité des sites Web Exercice : Interface améliorée 15 % Développement centré sur l utilisateur Projet 2 : Interfaces centrées sur l utilisateur 40 % Participation au forum de discussion 5 % Test Bloc 2-3 10 % Développement des attitudes L étudiant doit développer des attitudes professionnelles au fil de sa formation. Dès la première année des habiletés relatives aux attitudes d autonomie, de coopération et de créativité ont été exercées. Elles sont toujours en développement et en deuxième année s y ajoute de nouvelles habiletés. Des rétroactions formatives permettent à l étudiant de prendre conscience des attitudes à adopter dans un contexte de travail d équipe et de production multimédia. Attitude : Autonomie Habiletés à développer : Prise en charge personnelle et motivation Concrètement Je classe les notes de cours et les documents de productions remis en classe. Je m approprie leur contenu, les complète et les annote ;Je me centre sur la tâche et je suis attentif en classe ; Je fais des efforts pour résoudre mes problèmes ; Je communique mes difficultés aux enseignants. Je développe des stratégies pour résoudre mes problèmes. Je fais preuve de méthode ; J accepte la critique, je suis tolérant ; Je fais preuve d initiative, je m organise personnellement ; J aborde les exercices avec intérêt et je garde une attitude positive en tout temps. Attitude : Coopération Habiletés à développer : Implication et engagement personnel Concrètement Je participe aux discussions et aux activités proposées ; J'adopte un comportement agréable avec les autres ; Je suis à l'écoute des autres et je les aide lorsqu'ils éprouvent de la difficulté dans leurs tâches ; Je les respecte en prenant garde de ne pas les déranger lors des cours ou des ateliers ; Je respecte les normes et les règles de mon milieu de travail ; Je partage mes réactions, mes sentiments, mes impressions ; J exprime mes désaccords amicalement. J aide mon équipe à réaliser ses objectifs ; J aide à élaborer, approfondir, créer des idées ; J aide à planifier ; Je suggère des moyens pour rendre le travail plus efficace ; Je développe une bonne capacité relationnelle. Attitude : Créativité Habiletés à développer : Ouverture à l expérience Concrètement Je développe ma curiosité, ma créativité ; J explore de nouvelles avenues tant visuelle que stratégique ; Je cherche à améliorer les solutions apportées. Attitude : Engagement professionnel Habiletés à développer : Engagement personnel Je crée un climat de travail efficace ; Je fais preuve de dynamisme au travail ; Contexte d apprentissage En équipe et individuellement. Durée Couvre l ensemble de la session Activités d apprentissage Rétroaction formative à travers l ensemble des activités et des projets du cours. Design et interactivité II 582-FWU-SF Hiver 2010 3

Bloc I Ergonomie et utilisabilité des interfaces Énoncé de la compétence Adapter l interactivité des pages-écrans Éléments de la compétence Prendre connaissance des indications relatives à l interactivité Analyser l interactivité des pages-écrans Effectuer la réalisation de l interface préliminaire Communiquer avec les autres membres de l équipe Habiletés Déterminer les différents types d interfaces, leurs composantes et leurs modes de fonctionnement Préparer le plan de navigation (organiser et hiérarchiser les éléments de contenu de façon cohérente et conviviale) Identifier les éléments de contenu spécifiques à différents produits multimédias (jeu, informatif, éducatif, narratif, etc.) Déterminer le rôle de l interface selon les différents types de produits multimédias et leur vocation Comparer le scénario à des produits semblables ou concurrents Rechercher des solutions alternatives au regard de l interactivité Respect des règles de convivialité Manifestation d ouverture d esprit et de souplesse Organisation fonctionnelle et cohérente des composantes de l interface Contexte d apprentissage Des évaluations formatives sont réalisées tout au long du travail en laboratoire. Le projet 1 est réalisé individuellement. Le concept de base, le scénario, les médias et le schéma de navigation sont fournis aux élèves. Critères de performance Reconnaissance exacte des composantes du message de la page-écran Interprétation juste des objectifs de communication sousjacents aux informations de la page-écran Reconnaissance exacte des qualités esthétiques des éléments de la page-écran Interprétation juste de la relation entre le langage plastique et le message Traitement correct des textes Agencement lisible et harmonieux des éléments de la pageécran Exploitation judicieuse des logiciels nécessaires à la réalisation de la page-écran Respect du concept initial et de la grille de mise en page Éléments du contenu Produits multimédias (Internet, sur support, etc.) Vocations et buts d un produit Structure de contenu (modélisation) Structure du scénario Réalisations d inventaire des données Guides d interface (boutons, menus, fenêtres de dialogue, guides d interface, etc.) Schématisation (symboles utilisés dans les schémas en diagrammes) Recherche d idée Étude de cas Analyse de produits Caractéristiques des interfaces Importance de l usager Logiciels appropriés (logiciels d illustration, de traitement d images, etc.) Activités d apprentissage Lectures complémentaires sur l ergonomie Exercice 1 Reconnaissance des critères ergonomiques Exercice 2 Analyse d interfaces Exercice 3 Évaluation experte Projet 1 Réalisation des interfaces d une application elearning sur support, réalisé individuellement et en collaboration avec le cours de Production multimédia IV. Test Bloc 1 (lectures des cours 1, 2 et 3) Durée et pondération Bloc I : 5 semaines Heures contact : 15 hres Travail personnel : 10 hres Projet 1 Interfaces d une application elearning 25% Test Bloc 1 5 % Design et interactivité II 582-FWU-SF Hiver 2010 4

Bloc II Utilisabilité des sites Web Énoncé de la compétence Adapter l interactivité des pages-écrans Éléments de la compétence Prendre connaissance des indications relatives à l interactivité Analyser l interactivité des pages-écrans Proposer des adaptations à la navigation et à l interface des pages-écrans Effectuer la réalisation du schéma de navigation Effectuer la réalisation de l interface préliminaire Habiletés Identifier les éléments de contenu spécifiques à différents produits multimédias (jeux; informatif; éducatif; narratif, etc.) Déterminer le rôle de l interface selon les différents types de produits multimédias et leur vocation (grand public, éducation, corporatif) Identifier les éléments de contenu du scénario Déterminer les différents types d interfaces, leurs composantes et leurs modes de fonctionnement Préparer le plan de navigation (organiser et hiérarchiser les éléments de contenu de façon cohérente et conviviale) Schématiser à l'aide des règles propres à l'arborescence Utiliser les règles de schématisation Préparer le plan de navigation (organiser et hiérarchiser les éléments de contenu de façon cohérente et conviviale) Rechercher des solutions alternatives au regard de l interactivité Élaborer des méthodes pour adapter le scénario et le scénarimage Faire la maquette de l interface (types de boutons et emplacement, esquisse de la mise en page, etc.) Contexte d apprentissage Des évaluations formatives sont réalisées tout au long du travail en laboratoire. Critères de performance Propositions pertinentes et signifiantes de modifications au scénario Adaptation originale et novatrice du scénario Respect des règles de convivialité Organisation cohérente des éléments de contenu Schématisation précise de la navigation Organisation fonctionnelle et cohérente des composantes de l interface Éléments du contenu Recherche d idée Analyse de produits Adaptation au scénario Caractéristiques des interfaces Importance de l usager Logiciels de schématisation Structuration de la navigation Logiciels appropriés (logiciels auteurs, logiciels d illustration et de traitement d images, etc.) Activités d apprentissage Lectures complémentaires sur l utilisabilité des pages d accueil. Analyse d interface. Exercice Interface améliorée réalisée individuellement L exercice est réalisé individuellement. Durée et pondération Bloc II : 3 semaines Heures contact : 9 hres. Travail personnel : 6 hres Exercice : Interface améliorée 15 % Design et interactivité II 582-FWU-SF Hiver 2010 5

Bloc III Développement centré sur l utilisateur Énoncé de la compétence Adapter l interactivité des pages-écrans Éléments de la compétence Analyser la structure de communication de la pageécran Analyser l interactivité des pages-écrans Organiser la page-écran Effectuer la réalisation de l interface préliminaire Critères de performance Propositions pertinentes et signifiantes de modifications au scénario Adaptation originale et novatrice du scénario Respect des règles de convivialité Schématisation précise de la navigation Organisation fonctionnelle et cohérente des composantes de l interface Habiletés Éléments du contenu Identifier les éléments de contenu spécifiques à différents Recherche d idée produits multimédias (jeux; informatif; éducatif; narratif, etc.) Démarche créative Déterminer le rôle de l interface selon les différents types de Analyse de produits produits multimédias et leur vocation (grand public, éducation, Caractéristiques des interfaces corporatif) Importance de l usager Déterminer les différents types d interfaces, leurs composantes Description de personnage et leurs modes de fonctionnement Logiciels appropriés (logiciels auteurs, logiciels d illustration Rechercher des solutions alternatives au regard de l interactivité et de traitement d images, etc.) Faire la maquette de l interface (types de boutons et emplacement, esquisse de la mise en page, etc.) Contexte d apprentissage Des évaluations formatives sont réalisées tout au long du travail en laboratoire. Le projet 2 est réalisé individuellement. Durée et pondération Bloc III : 7 semaines Heures contact : 21 hres Travail personnel : 14 hres Activités d apprentissage Lectures complémentaires sur l ergonomie Exercice 4 Description de personnage «persona» Exercice 5 Présentation des maquettes et critiques des concepts sur le forum Projet 2 Interfaces centrées sur l utilisateur Projet réalisé individuellement Test Bloc 2 (lectures des cours 5, 7 et 8) Projet 2 : Interfaces centrées sur l utilisateur 40 % Participation au forum de discussion 5 % Test Bloc 2-3 10 % Design et interactivité II 582-FWU-SF Hiver 2010 6

Règles départementales Évaluation des apprentissages 1.1 Cheminement et notation L étudiant doit disposer avant la mi-session de l information sur l état de ses apprentissages. Les résultats d une activité d évaluation sommative permettent de lui fournir cette information ou, à défaut, les résultats d une évaluation formative formelle. (complément de la PEA - ARTICLE : 6.1.3 Calendrier des activités d évaluation) 1.2 Évaluation formative L étudiant est accompagné par l enseignant dans son travail en cours de réalisation; son travail est commenté, critiqué et des suggestions lui sont faites afin d identifier ses forces et ses faiblesses et, s il y a lieu, d entreprendre des actions visant à renforcer les apprentissages qui soulèvent des difficultés. Lorsqu une évaluation formative formelle du travail est donnée, elle respecte le barème suivant : Cote A+ : excellent travail, qui va au-delà des exigences Cote A : réussi, très bon travail Cote B : réalisé, mais incomplet ou faiblesse mineure Cote Z : non réalisé ou ne répond pas à la commande 1.3 Évaluation du français L enseignant signale sur les copies d étudiants les erreurs de langue, notamment en ce qui concerne l orthographe d usage, l orthographe grammaticale et la construction de phrase. Dans toutes les évaluations sommatives, chaque erreur de langue est pénalisée à raison de 0,5 % de la pondération de l évaluation en cause jusqu à concurrence de 10 % de la note, selon le nombre d erreurs. L enseignant peut refuser un travail lorsque les erreurs de langue entravent trop la communication et demander à l étudiant de corriger ses erreurs avant qu il remette à nouveau le travail en question. Les pénalités prévues à l article 6.1.12 s appliquent dans un tel cas. (PEA - ARTICLE : 6.1.9 Évaluation du français) 1.4 Présentation des travaux Les étudiants doivent présenter leurs travaux écrits en conformité avec les normes de présentation adoptées par le Cégep. Les exigences de présentations pour les travaux réalisés dans les cours de formation spécifique sont précisées pour chaque type de travaux et doivent être respectées. (complément de la PEA - ARTICLE : 6.1.10 Évaluation de la présentation et de la composition des travaux) 1.5 Présence au cours et aux examens Cette politique se situe dans la perspective d assurer une bonne qualité de cours. La première responsabilité d un étudiant est bien d assister aux cours. Son absence et sa non-participation, en plus d être un manquement à cette responsabilité, est source de bien des ennuis tant pour l étudiant que pour l enseignant : retard à combler, surplus de travail pour l étudiant d où la difficulté à suivre la séquence normale du cours. La présence au cours (de corps et d esprit) est obligatoire. Tout retard de moins d une heure est considéré comme une (1) heure d absence. Tout départ avant la fin de l heure est considéré comme une (1) heure d absence. Un étudiant qui n a pas le matériel requis pour le cours est considéré comme absent. L étudiant qui s absente au-delà d une proportion d heures de 15 % d un cours obtient un échec. Lors de l analyse de la situation, l enseignant peut tenir compte de circonstances particulières pour prendre sa décision. Pour le cours Design et interactivité I cela représente 6,75 heures. N.B. Les absences motivées (rendez-vous chez le médecin, etc.) sont considérées comme des absences à moins d une entente particulière préalable. Présence aux examens L étudiant absent lors d un examen se verra attribuer la note zéro pour cet examen; si l enseignant le juge à propos, au plus tard à la fin de la session, il pourra déterminer s il y a lieu de procéder à une évaluation ad hoc. (Complément de la PEA - ARTICLE : 6.1.11 Présence aux cours) Design et interactivité II 582-FWU-SF Hiver 2010 7

1.6 Date, heure et lieu de remise des travaux Les rapports et les travaux exigés de l étudiant doivent être remis à l enseignant à la date, au moment et au lieu indiqués. Une journée ouvrable de retard est tolérée entraînant une pénalité de 5 % de la note. Au-delà de ce délai, le travail est refusé et la note «0» est attribuée. (PEA - ARTICLE : 6.1.12 Remise des travaux) 1.7 Responsabilité de son travail L étudiant garde en tout temps la responsabilité de son travail. Il devra donc toujours en faire une copie de sécurité sur un deuxième support qu il gardera en lieu sûr. En cas de perte ou de bris du support remis à l enseignant, la copie de sécurité servira à l évaluation ; si l étudiant oublie de faire une copie de sécurité, en cas de perte ou de bris du support remis à l enseignant, la note compilée sera de 0%. (Complément du Règlement 18 : ARTICLE 3.2 Protection des données appartenant à l utilisateur) 1.8 Plagiat et fraude Tout acte de plagiat et de fraude sera sanctionné. Constitue notamment un plagiat ou une fraude tout acte de copier ou de fournir ou recevoir volontairement de l information lors d un examen, de reproduire en tout ou en partie le travail d une autre personne, qu il s agisse d un document imprimé, audiovisuel ou électronique, sans y faire expressément référence, de remplacer un étudiant ou de se faire remplacer lors d un examen ou d un travail faisant l objet d une évaluation, d obtenir, posséder ou utiliser frauduleusement des questions ou réponses d examen, de falsifier les résultats de travaux ou d examens. En cas de plagiat, de coopération à un plagiat ou de fraude lors d un examen ou d un travail, l étudiant obtient la note «0» pour cet examen ou ce travail, sans exclure la possibilité d autres sanctions compte tenu de la gravité de la faute. (PEA ARTICLE 6.1.13 Plagiat et fraude) 1.9 Condition de réussite d un cours Note de passage Pour obtenir la note de passage d un cours, l étudiant doit obtenir une note finale minimale de 60%. 1.10 Révision de la note finale Le Comité de révision sera formé de trois professeurs dont l enseignant responsable du cours, un autre professeur enseignant ou ayant enseigné à la même cohorte et d un troisième enseignant n ayant pas enseigné à cette cohorte. Toutes les demandes de révision de note doivent être traitées une semaine après la réception de la demande par le coordonnateur du département L étudiant qui demande une révision de note doit fournir ses travaux et examens au comité de révision de note. (Complément de la PEA - ARTICLE : 6.5 La révision de note) 1.11 Échelle de notation 90 % - 100 % : excellent, le travail est de qualité exceptionnelle dépassant tous les objectifs (implication personnelle). 80 % - 90 % : très bien, très bon travail répondant à l ensemble des objectifs tant techniques que conceptuels. 70 % - 80 % : bien, bon travail répondant aux objectifs mais comportant des lacunes mineures. 60 % - 70 % : passable, travail acceptable mais comportant des lacunes importantes par rapport à l atteinte des objectifs. 60 % : note de passage. 50 % - 60 % : insatisfaisant, travail s éloignant trop des objectifs et comportant des lacunes dans le rendu technique et conceptuel. 30 % - 50 % : travail faible à tous les niveaux. 0 % - 30 % : plagiat, travail non remis ou remis trop tard. Design et interactivité II 582-FWU-SF Hiver 2010 8

Calendrier Les cours à l horaire sont : les lundis de 15 h 00 à 18 h 00 pour le groupe 0001 les mercredis de 15 h 00 à 18 h 00 pour le groupe 0002 Semaine Contenu Remise 1 Lun. 18 janv Mer. 20 janv BLOC 1 ERGONOMIE ET UTILISABILITÉ DES INTERFACES Développement des interfaces utilisateurs : connaître, concevoir et évaluer Ergonomie : théorie, notions de base Exercice 1 Reconnaissance des critères ergonomiques Ergonomie et utilisabilité : théorie, notions de base Exercice 1 Reconnaissance des critères ergonomiques (F) 2 Lun. 25 janv Mer. 27 janv 3 Lun. 1 fév Mer. 3 fév 4 Lun. 8 fév Mer. 10 fév 5 Lun. 15 fév Mar. 17 fév Ergonomie et utilisabilité (suite) Exercice 2 Analyse d interfaces Lancement du projet 1 elearning Exploration de la problématique Inventaire et analyse du matériel disponible Idéation, recherche et esquissage Ergonomie : Éléments d interface vs tâche Contrôles et icônes Projet 1 elearning Réalisation des maquettes préliminaires et des éléments d interface Projet 1 elearning Corrections et ajustements Réalisation des maquettes finales Ergonomie : Méthodes d évaluation Projet 1 elearning Exercice 3 Évaluation experte Ajustements des maquettes Exercice 2 Analyse d interfaces (F) Projet 1: Esquisses (F) Projet 1: Maquettes préliminaires (F) Test Bloc 1 (lectures) (S) (5%) Projet 1: Maquettes concept final (S) (25%) Exercice 3 Évaluation experte (F) 6 Lun. 22 fév Mar. 24 fév BLOC 2 UTILISABILITÉ DES SITES WEB Utilisabilité et accessibilité des sites Web Recherche et analyse de sites Web Exercice Interface améliorée Recherche et choix d une interface Web Objectif du site et analyse des besoins de l utilisateur et de la tâche 7 Lun. 1 mars Mar. 3 mars 8 Lun. 8 mars Mar. 10 mars Utilisabilité et accessibilité des sites Web Étude de cas de sites Web Exercice Interface améliorée Analyse de l interface vs objectif, besoins et tâche Réalisation de la maquette améliorée Exercice Interface améliorée Finalisation et présentation de l interface améliorée Exercice Interface améliorée: Analyse de l interface (F) Exercice Interface améliorée (S) (15%) Relâche : 15 au 19 mars Design et interactivité II 582-FWU-SF Hiver 2010 9

9 Lun. 22 mars Mer. 24 mars 10 Lun. 29 mars Mer. 31 mars 11 Mer. 7 avril Lun. 12 avril 12 Mer. 14 avril Lun. 19 avril BLOC 3 DÉVELOPPEMENT CENTRÉ SUR L UTILISATEUR Conception centrée sur l utilisateur Phases de développement des interfaces utilisateurs et exercice (F) Lancement du projet 2 Interfaces centrées sur l utilisateur Identification de la problématique et spécifications à déterminer Conception centrée sur l utilisateur Profil utilisateur Méthode de description de personnages Projet 2 Interfaces centrées sur l utilisateur (suite) Exercice 4 Description de personnage «méthode persona» Exploration interfaces vs utilisateurs Projet 2 Interfaces centrées sur l utilisateur Détermination du contenu Rédaction en fonction du Web Esquisses et démarche créative Projet 2 Interfaces centrées sur l utilisateur Réalisation des maquettes préliminaires Exercice 5 Présentation écrite des maquettes préliminaires sur le forum et critique constructive des concepts Exercice 4 Description de personnage «persona» (F) Exercice 5 Remises des maquettes et critiques des maquettes sur le forum (F) 13 Mer. 21 avril Projet 2 Interfaces centrées sur l utilisateur Réalisation des maquettes finales Test Blocs 2-3 (lectures) (S) (15%) Lun. 26 avril 14 Mer. 28 avril Lun. 3 mai Projet 2 Interfaces centrées sur l utilisateur Réalisation des maquettes finales Projet 2 : Présentation des maquettes et critiques des maquettes sur le forum (S) (5%) 15 Mer. 5 mai Lun. 10 mai Projet 2 Interfaces centrées sur l utilisateur Préparation de la présentation 16 Évaluation et examens Présentation des maquettes en classe Projet 2 : Maquettes finales et présentation orale (S) (40%) N.B. Ce calendrier peut être sujet à changement. Vous en serez avisés. Design et interactivité II 582-FWU-SF Hiver 2010 10

Médiagraphie Sites Web À visiter régulièrement et au besoin pour les informations et pour la culture visuelle http://www.grafika.com/ http://www2.infopresse.com/ http://www.commarts.com/ http://www.adobe.com/fr/designcenter/ http://www.netdiver.net/ http://surfstation.lu/ http://www.digitalthread.com/ http://www.coolhomepages.com/ http://www.linkdup.com/ http://www.webbyawards.com/ http://www.designgraphik.com/ http://www.designiskinky.com/ Ergonomie Les critères ergonomiques de Scapin et Bastien http://www.ideactif.com/testnet/criteres_ergo_courts.html Christian Bastien présente des exemples http://www.ergoweb.ca/criteres.html Ergolab est un site de ressources en ergonomie web et logiciel : http://www.ergolab.net/ Un portail sur l'ergonomie: http://www.lergonome.org/ Des guides pour concevoir des interfaces utilisables : http://interface.free.fr/interface/ergonomie.html Abonnez-vous à la liste de diffusion (mensuel) http://www.humanfactors.com/home/default.asp Articles sur l'utilisabilité Le site de Jacob Nielsen The Alertbox: http://useit.com/ Divers intervenants sur l'utilisabilité et liens à propos de l'utilisabilité sur le Web : http://www.usableweb.com/ http://www.adobe.com/fr/designcenter/dialogbox/usability/ (en français) Flash et utilisabilité / ce qu on en disait et ce qu on en dit encore. http://afterchaos.com/essays_toflashornot.php http://news.com.com/2100-1040-930301.html http://www.flash99good.com/ http://www.veblog.com/ http://www.webstandards.org/2007/08/06/accessible-flash/ http://www.adobe.com/accessibility/products/flash/best_practices.html Normes d'accessibilité http://www.tbs-sct.gc.ca/clf-nsi/inter/inter-01-tb_f.asp http://www.accessibiliteweb.com/projets/evaluations/triennale-2007/fr/ Associations http://www.utilisabilitequebec.org/ Magazines voir au centre des médias : Graphika Espacecom Communication Arts Graphis How Design et interactivité II 582-FWU-SF Hiver 2010 11

Livres Ergonomie du logiciel et du design Web Jean-François Nogier, Dunod 2008. (4e édition) ISBN : 2-10-051572-1 Le design Web raisonné Daniel Lafrenière, Les éditions logiques, 2005. ISBN : 2-89381-949- About Face 3 The Essentials of Interaction Design, Cooper Alan, Reimann, Robert, Cronin, David. Wiley Publishing, 2007. ISBN 978-0-470-08411-3. Designing For Interaction. Creating Smart Applications and Clever Devices, Saffer, Dan, New Riders, 2007. ISBN 0-321-43206-1 Art de la page d'accueil : 50 sites Web passés au crible, Nielsen, Jakob & Tahir, Marie, Eyrolles, 2002. ISBN : 2-212-11117-7 Conception de sites Web, L art de la simplicité, Jacob Nielsen, CampusPress. ISBN : 2-7440-0887-7 Créer des interfaces gagnantes, Lafrenière, Daniel, 1995, Les Éditions Logiques. ISBN: 2-89381-294-5 Designing With Web Standards, Zeldman, Jeffrey, 2003, New Riders. ISBN 0-7357-1201-8 Elements of User Experience, The: User-Centered Design for the Web, Garrett, Jesse James, 2002. The Elements of User Interface Design, Mandel, Theo, 1997, John Wiley & Sons Inc. ISBN: 0-471-16267-1 Face too! The best Interactive Interface Designs, Donnelly, Daniel, Rockport Publishers Inc. ISBN 156496-677-1 MTIV: Process, Inspiration and Pratice for the New Media Designer, Curtis, Hillman, 2002, New Riders. ISBN : 0-7357-1165-8 Web Navigation, Designing the User Experience, Fleming, Jennifer, 1998, O Reilly. ISBN: 1-56592-351-0 Web Site Usability Handbook, Pearrow, Mark, 2000, Charles River Media Inc. ISBN 1-58450-026-3 Web Design: Portfolios, Wiedemann, Julius, 2005, Taschen. ISBN 3-8228-4043-2 Design et interactivité II 582-FWU-SF Hiver 2010 12