introduction mars 2013 grégory petit
TRANSCRIPT
Internet et Web(ART6017)
Introduction mars 2013
Grégory Petithttp://lrcm.com.umontreal.ca/greg/ART6017/
Un peu sur le profEtudiant au doctorat à Polytechnique
Montréal
Accessibilité des nouvelles technologies
Aussi consultant en expérience utilisateur pour divers clients
Infos en vrachttp://lrcm.com.umontreal.ca/greg/ART6017/
Courriel : [email protected]
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
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?
Pourquoi ce cours???
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.
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.
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.
Scénarisation interactive
Maquette
Scénarisation interactiveAnalyse des besoins
Objectifs de communication
Cas d’utilisation, scénarios
Description du contenu
et exemples
Design de la structure
d’interaction
Design des principaux écrans et
des boutons
Validation par les usagers
Programmation
Validation par le client
Analyse des besoins
Maquette
Scénarisation interactiveAnalyse des besoins
Objectifs de communication
Cas d’utilisation, scénarios
Description du contenu
et exemples
Design de la structure
d’interaction
Design des principaux écrans et
des boutons
Validation par les usagers
Programmation
Validation par le client
Analyse des besoinsInventaire des attentes par rapport au site
Web (fournisseurs et utilisateurs du site)Analyser les expériences antérieuresAnalyser ce qui existe, ce qui va bien et ce
qui doit changerCommencer à répertorier les objets, les
actions, les attributs, le vocabulaire à utiliserCaractéristiques des usagers potentiels, leurs
compétences et attitudesLes usagers doivent être impliqués dans
l’analyse des besoins!
Analyse des besoinsInventaire 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 communicationQuel 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égieTrop ≠ mieuxLa meilleure approche ≠ la plus directeLes 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 d’utilisabilité visés.
Les cas d’utilisationOn 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
Les cas d’utilisationExemple 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é.
Diagramme de cas d’utilisation
Trier message
sArchiver message
s
Surveiller la
présence
Usager
Étudiant
Ecrire message
s
Associer messages
Professeur
Maquette
Maquette
Scénarisation interactiveAnalyse des besoins
Objectifs de communication
Cas d’utilisation, scénarios
Description du contenu
et exemples
Design de la structure
d’interaction
Design des principaux écrans et
des boutons
Validation par les usagers
Programmation
Validation par le client
Les représentation structuralesIl 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.
Le contenuDé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
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
ChoixAutomatiqueChangement dans le cadre seulement
Sous-section
Sous-section
Sections
Structure statique des pages
Accueil Description
LiensRéférences
Plan de CoursÉvaluatio
n
Travail 1
Travail 2
Projet
Structure du site Web du cours
Les pages dans la zones jaune communiquent toutes entre elles
Structure dynamique des pagesInformation 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 cycleClassées par département
Règlement pour lerenouvellement
oui
oui oui
nonnon etc.
Théâtre du rideau vert
• Le théâtre n’existe pas sans vous• Venez y jouer votre rôle
• Information 345-2278
Passion
Rêve
Tendresse
Amour
Ouverture:Animation mots apparaissentTrois coups…
Interaction:Mois - Effet 3D au survol
Bienvenue au Théâtre du Rideau VertSaison 2008
Sortie :Seul le cadre droit en bas change
N’oubliez pas les titres, Respectez la grille et les cohérence interne
JanFévMarAvrMaiJuinJuilAoûtSeptOctNovDéc
English
Théâtre du rideau vertBienvenue au Théâtre du Rideau VertProgramme Janvier 2008
JanFévMarAvrMaiJuinJuilAoûtSeptOctNovDéc
English
6 janvier au 13 marsLe malade imaginaire Molière
18 janvier au 19 avrilLa maison de poupée Ibsen
20 janvier au 15 févrierUbu Roi Ionesco
Ouverture :Choix du mois reste sélectionné
Interaction :3 lignes de biographie des auteursapparaissent au survol3 lignes de description apparaissent au survol du titreÉtoiles liées aux évaluations des spectateurs
Théâtre du rideau vertBienvenue au Théâtre du Rideau VertLe Malade Imaginaire
JanFévMarAvrMaiJuinJuilAoûtSeptOctNovDéc
English
Argan : Remy GirardToinette: 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éfilableActeurs sont cliquables
Les étoiles permettent de coter.
Votre évaluation ?
Maquette
Scénarisation interactiveAnalyse des besoins
Objectifs de communication
Cas d’utilisation, scénarios
Description du contenu
et exemples
Design de la structure
d’interaction
Design des principaux écrans et
des boutons
Validation par les usagers
Programmation
Validation par le client
Conception centrée utilisateur
Conception centrée utilisateurEncore 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! »
Conception centrée utilisateur
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 professionSes habitudes de travailEtc.
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
Conception centrée utilisateurCycle 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é
