Internet et Web (ART6017)

1. Internet et Web(ART6017) Introduction mars 2013 Grégory Petit http://lrcm.com.umontreal.ca/greg/ART6017/

2. Un peu sur le prof • Etudiant au doctorat à Polytechnique Montréal • Accessibilité des nouvelles technologies • Aussi consultant en expérience utilisateur pour divers clients

3. Infos en vrac • http://lrcm.com.umontreal.ca/greg/ART6017/ • Courriel : gregory.petit@umontreal.ca • Aujourd’hui de 9h à 16h en B-340 (Marie-Victorin) • Même horaire demain • Samedi prochain de 13h à 16h • 1 crédit • 1 travail individuel sur la continuité de l’atelier

4. Avant de commencer…  Qu’est que « l’Internet » pour vous?  Faites-vous une différence entre l’Internet et le Web?  Qu’est ce que vous attendez de ce cours?

5. Pourquoi ce cours???

6. Pourquoi ce cours??? • Peu importe le domaine artistique, vous êtes en contact quasi-obligatoire avec le monde de l’Internet. • Si cela peut vous rassurer, ce cours ne va pas faire de vous des programmeurs! • Un site magnifique ne sert à rien si personne n’arrive à correctement l’utiliser.

7. Y’aura quoi dans ce cours? Beaucoup de pratique : • Vous n’êtes pas dans ce cours pour apprendre divers théories sur l’Internet, • Vous allez apprendre à faire un site Web basique sans forcément écrire une seule ligne de code, • Mais vous allez apprendre à comprendre le code derrière une page Web. Du boulot : • Evaluation continue sur un projet : maquettage et conception d’un site Web.

8. Y’aura quoi dans ce cours? Apprentissage de méthodes de conception : • Utilisation des éléments HTML, • Mise en page à l’aide de fichiers CSS, • Intégration de médias, • Via Adobe Dreamweaver CS6. Tout en utilisant des connaissances sur : • L’ergonomie, • Le design, • Le multimédia.

9. Scénarisation interactive

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

11. Analyse des besoins

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

13. Analyse des besoins • Inventaire des attentes par rapport au site Web (fournisseurs et utilisateurs du site) • Analyser les expériences antérieures • Analyser ce qui existe, ce qui va bien et ce qui doit changer • Commencer à répertorier les objets, les actions, les attributs, le vocabulaire à utiliser • Caractéristiques des usagers potentiels, leurs compétences et attitudes • Les usagers doivent être impliqués dans l’analyse des besoins!

14. Analyse des besoins • Inventaire général des sources d'information, exemple de contenus, caractéristiques médiatiques du contenu, contraintes à l'accès • Ressources disponibles pour aider à l'élaboration, la mise en forme, la mise à jour • Description des contraintes techniques à considérer pour l'élaboration et la diffusion

15. Objectif de communication • Quel va être l’objectif de votre site en fonction des besoins que vous avez identifiés. • Choisir parmi les besoins, les fonctions possibles et préciser la stratégie • Trop ≠ mieux • La meilleure approche ≠ la plus directe • Les fonctions et objectifs primaires et secondaires • Spécifier le message à passer et les fonctions visées

16. Objectifs de communication • Choisir une métaphore si besoin et la justifier • Choisir les outils techniques à utiliser (environnement matériel et logiciel) • Choisir les techniques de médiatisation (composantes des médias) • Définir la stratégie générale de l'interface • Définir les critères de performance et d’utilisabilité visés.

17. Les cas d’utilisation • On représente tout ce que le système fait ou tout ce qu’on veut faire avec. Quels sont les buts et les usages? • Cas = Acteur + Activité ou utilisation sur une composante de l’outil ou sur un autre acteur

18. Les cas d’utilisation Exemple d’un forum entre professeurs et étudiants • Étudiant • Écrire des messages sur ce qu’il lit. • Associer les messages avec ce qui a été vu en cours. • Prof • Être averti de ceux qui ne sont pas branchés depuis X jours. • Tous • Sélectionner les messages que l’on veut pouvoir relire, et les mettre à part. • Trier les messages en ordre de priorité.

19. Diagramme de cas d’utilisation Surveiller la présence Associer messages Ecrire messages Archiver messages Trier messages Usager Étudiant Professeur

20. Maquette

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

22. Les représentation structurales • Il est nécessaire de faire une représentation structurale des scénarios et des interactions d’une application avant tout codage! • Cela se fait avant la maquette physique. • On peut faire ça sur papier, ou avec des logiciel spécialisés (Microsoft Visio, Smartdraw, Axure, Omnigraffle, ConceptDraw) ou non (Word, Photoshop, etc.). • On pense déjà aux futurs boutons, menus et autres moyens d’interaction qui déclencheront les actions.

23. Le contenu • Définir les contenus d’information • Définir les variables dont on aura besoin pour classer l'information et pour construire les pages d’accès au contenu • Définir comment les informations vont interagir, si elle doivent interagir

24. Structure statique des pages • Diagramme permettant de donner une vision globale du site Web • On ne met pas tous les liens! • Mais on met les contenus, les dossiers et les pages!

25. Structure statique des pages Intro IntroFlash Aide Références Accueil Accueil Flash Glossaire Sections Section 1 Section 3 Section 4 Section 5 Section 2 Forum Sous-section Choix Automatique Changement dans le cadre seulement Sous-section

26. Structure statique des pages Plan de Cours Accueil Description Évaluation Références Liens Structure du site Web du cours Les pages dans la zones jaune communiquent toutes entre elles Travail 1 Travail 2 Projet

27. Structure dynamique des pages Information sur les bourses Une bourse pour vous ? Calendrier des demandes non etc. non Étranger ? 1er Cycle ? Boursier ? oui oui oui Liste des bourses Accessibles aux étrangers Règlement pour le renouvellement Liste des bourses De premier cycle Classées par département

28. 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 Ouverture: Animation mots apparaissent Trois coups… Passion • 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

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

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

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

32. Conception centrée utilisateur

33. Conception centrée utilisateur Encore des préjugés chez les concepteurs … • « Bien sur que je sais quel genre d’utilisateur va utiliser mon produit! » • « J’ai été étudiant, donc je sais comment concevoir un produit pour des étudiants. » • « Si j’ai une bonne idée, les utilisateurs l’aimeront certainement! » • « De toute façon, les utilisateurs ne savent comment dire ce qu’ils veulent! »

34. Conception centrée utilisateur

35. Connaitre l’utilisateur!!! • Définir les caractéristiques de l’utilisateur : • Connaître la physiologie et la psychologie basique humaine • Groupe spécifique? (non-voyants, enfants, personnes âgées…) • Ses connaissances, compétences et expériences avec la technologie • Son éducation, sa profession • Ses habitudes de travail • Etc.

36. Conception centrée utilisateur • Produit d’un processus de consultation et de participation active des utilisateurs • Préoccupation en amont des utilisateurs, de leurs tâches et de leur environnement • Répartition appropriée des fonctions entre les utilisateurs et les concepteurs

37. Conception centrée utilisateur • Cycle de conception : itération de solutions  démarche qui boucle et reboucle jusqu'à ce que le système satisfasse aux exigences définies au départ • Intervention d'une équipe de conception multidisciplinaire • Spécification et poursuite d’objectifs précis d’utilisabilité