Introduction mars 2013 Grégory Petit

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

Infos en vrac Courriel : Aujourdhui 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 latelier

Avant de commencer… Quest que « lInternet » pour vous? Faites-vous une différence entre lInternet et le Web? Quest ce que vous attendez de ce cours?

Pourquoi ce cours???

Peu importe le domaine artistique, vous êtes en contact quasi-obligatoire avec le monde de lInternet. Si cela peut vous rassurer, ce cours ne va pas faire de vous des programmeurs! Un site magnifique ne sert à rien si personne narrive à correctement lutiliser.

Yaura quoi dans ce cours? Beaucoup de pratique : Vous nêtes pas dans ce cours pour apprendre divers théories sur lInternet, 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 dun site Web.

Yaura quoi dans ce cours? Apprentissage de méthodes de conception : Utilisation des éléments HTML, Mise en page à laide de fichiers CSS, Intégration de médias, Via Adobe Dreamweaver CS6. Tout en utilisant des connaissances sur : Lergonomie, Le design, Le multimédia.

Scénarisation interactive

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

Analyse des besoins

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

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 lanalyse des besoins!

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

Objectif de communication Quel va être lobjectif 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

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 dutilisabilité visés.

Les cas dutilisation On représente tout ce que le système fait ou tout ce quon veut faire avec. Quels sont les buts et les usages? Cas = Acteur + Activité ou utilisation sur une composante de loutil ou sur un autre acteur

Les cas dutilisation Exemple dun forum entre professeurs et étudiants Étudiant Écrire des messages sur ce quil 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 lon veut pouvoir relire, et les mettre à part. Trier les messages en ordre de priorité.

Diagramme de cas dutilisation Trier messages Archiver messages Surveiller la présence UsagerÉtudiant Ecrire messages Associer messages Professeur

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

Les représentation structurales Il est nécessaire de faire une représentation structurale des scénarios et des interactions dune 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 dinteraction qui déclencheront les actions.

Le contenu Définir les contenus dinformation Définir les variables dont on aura besoin pour classer l'information et pour construire les pages daccès au contenu Définir comment les informations vont interagir, si elle doivent interagir

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!

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

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

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

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

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

Conception centrée utilisateur

Encore des préjugés chez les concepteurs … « Bien sur que je sais quel genre dutilisateur va utiliser mon produit! » « Jai été étudiant, donc je sais comment concevoir un produit pour des étudiants. » « Si jai une bonne idée, les utilisateurs laimeront certainement! » « De toute façon, les utilisateurs ne savent comment dire ce quils veulent! »

Conception centrée utilisateur

Connaitre lutilisateur!!! Définir les caractéristiques de lutilisateur : 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.

Conception centrée utilisateur Produit dun 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

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 dobjectifs précis dutilisabilité

Des questions??? Passons à la suite