Page 1 Jean-Yves Fiset, ing. HEC Montréal, 2002. Tous droits réservés. 30-771-01 Conception de sites Web Préparé par: Yan Bodain, M.A. Jean-Yves Fiset,

Présentation au sujet: "Page 1 Jean-Yves Fiset, ing. HEC Montréal, 2002. Tous droits réservés. 30-771-01 Conception de sites Web Préparé par: Yan Bodain, M.A. Jean-Yves Fiset,"— Transcription de la présentation:

1 page 1 Jean-Yves Fiset, ing. HEC Montréal, 2002. Tous droits réservés. 30-771-01 Conception de sites Web Préparé par: Yan Bodain, M.A. Jean-Yves Fiset, ing., Ph. D.

2 page 2 Jean-Yves Fiset, ing. HEC Montréal, 2002. Tous droits réservés. Cours 1 Survol du plan de cours Justification et définitions Rôles et responsabilités des intervenants Notion de cycle de vie du logiciel, moment dintervention Aperçu de la méthode qui sera utilisée pour la conception de sites Web Ressources en ligne Sujets du cours 1

3 page 3 Jean-Yves Fiset, ing. HEC Montréal, 2002. Tous droits réservés. 1- Survol du plan de cours Objectifs Architecture du cours Portée et limites Évaluation Approche pédagogique Prochaines sections

4 page 4 Jean-Yves Fiset, ing. HEC Montréal, 2002. Tous droits réservés. 1- Objectifs Comprendre le code HTML comme élément de développement de sites Web, Évaluer les produits des différents fournisseurs, Concevoir et réaliser des sites Web de haute qualité sur le plan ergonomique, Gérer des sites Web complexes, Agir comme webmestre pour une entreprise.

5 page 5 Jean-Yves Fiset, ing. HEC Montréal, 2002. Tous droits réservés. 1- Architecture À retenir: –faire des pages Web est différent de faire des sites Web, et est aussi différent de programmer en HTML. Cours 1 Introduction et présentation du cours Cours 2 et 3 Introduction à lergonomie et à lanalyse de tâche Cours 8 à 12 Outils fondamentaux dévaluation ergonomique de la norme ISO13407 (Méthode de conception de sites Web centrée sur lutilisateur) Cours 13-15 Présentations des travaux déquipe en classe. Cours de révision des notions clés. Projet (travail déquipe) Cours 4 à 7 Introduction au code HTML Notions Historiques, pratiques et élémentaires

6 page 6 Jean-Yves Fiset, ing. HEC Montréal, 2002. Tous droits réservés. 1- Portée et limites Les notions apprises permettront de/d: –Comprendre, rédiger et au besoin corriger du code HTML –Élaborer le contenu et la mise en page de sites Web de manière efficace –Connaître dans leurs grandes lignes les possibilités offertes par certaines technologies évoluées. Limites: –infographie et aspects publicitaires –profondeur des notions qui seront acquises.

7 page 7 Jean-Yves Fiset, ing. HEC Montréal, 2002. Tous droits réservés. 1- Évaluation Intra –30 % –couvre les séances 1 à 6 inclusivement –sans documentation (une référence est fournie pour le HTML) Projet (travail déquipe) –30 % –formation déquipes (4 minimum par équipe) –annonce des projets avant la séance 6 (faire valider le choix du site par le prof – aucun doublon, premier arrivé premier servi) –à remettre (rapport, maquette et présentation en classe notée) Examen final –40 % –sans documentation mais avec références (HTML + critères ergonomiques) –moitié HTML et moitié ergonomie

8 page 8 Jean-Yves Fiset, ing. HEC Montréal, 2002. Tous droits réservés. 1- Approche pédagogique Utilisation simultanée de cours en ligne et dexercices dintégration pour la première partie (AHT et HTML) Présentations magistrales et exécution dune partie du projet en classe pour la seconde partie (conception de sites Web).

9 page 9 Jean-Yves Fiset, ing. HEC Montréal, 2002. Tous droits réservés. 2- Justification et définitions –Problématique des sites de commerce électronique –Éléments de motivation –Cycle de vie logiciel Prochaines sections

10 page 10 Jean-Yves Fiset, ing. HEC Montréal, 2002. Tous droits réservés. 2- Problématique des sites Web Facteurs affectant le succès des sites: –Résultats dune étude portant sur 3000 sites primés au Webby Awards 2001, –Évaluation faite par 100 juges par rapport à 5 critères: Contenu, structure et navigation, design visuel, fonctionnalité et interactivité. –Sites assignés à 27 catégories: p. ex., nouvelles, personnel, finances, services, sports, mode, technologie, arts……. –3 niveaux: revue, nomination, final. Source: « Content or Graphics? An Empirical Analysis of Criteria for Award-Winning Websites », Rashmi Sinha, Marti A. Hearst, Melody Y. Ivory, and Maya Draisin. To appear in the Proceedings of the 7th Conference on Human Factors and the Web (HFWeb '01), June 2001.

11 page 11 Jean-Yves Fiset, ing. HEC Montréal, 2002. Tous droits réservés. 2- Problématique des sites Web Gagnant de la catégorie « News » :

12 page 12 Jean-Yves Fiset, ing. HEC Montréal, 2002. Tous droits réservés. 2- Problématique des sites Web Gagnant de la catégorie « Best practices » :

13 page 13 Jean-Yves Fiset, ing. HEC Montréal, 2002. Tous droits réservés. 2- Problématique des sites Web

14 page 14 Jean-Yves Fiset, ing. HEC Montréal, 2002. Tous droits réservés. 2- Problématique des sites Web

15 page 15 Jean-Yves Fiset, ing. HEC Montréal, 2002. Tous droits réservés. 2- Problématique des sites Web Résultats (Webby Awards 2001) –Corrélation par rapport à lévaluation: la plus faible - design visuel la plus forte - contenu –Le contenu contribue fortement aux résultats de toutes les catégories, sauf pour les pages personnelles. –Le contenu est un facteur majeur pour les sites évalués dans plus dune catégorie.

16 page 16 Jean-Yves Fiset, ing. HEC Montréal, 2002. Tous droits réservés. 2- Problématique des sites Web Utilisation par des individus et des consommateurs : –Enquête de Forrester Research Inc. : entrevues avec 8600 ménages où on utilisait Internet pour déterminer pourquoi les individus retournaient visiter des sites Web. * Source: http://www.system-concepts.com/articles/forrester.html

17 page 17 Jean-Yves Fiset, ing. HEC Montréal, 2002. Tous droits réservés. 2- Problématique des sites Web Recherche dinformation: Commerce électronique: –Une étude * de 239 utilisateurs fréquents dInternet ayant magasiné « en ligne » au cours des 60 jours précédents a montré que 28 % ont eu un peu ou beaucoup de difficulté à trouver les produits … et que 62 % avaient abandonné. Parmi ceux-ci, 45 % se sont tournés vers des moyens traditionnels (catalogues, visites en magasin). –Dautres études ** montrent que utilisateurs ont pu trouver linformation requise seulement 42 % du temps même sils ont été amené à la page daccueil adéquate (revue de 20 sites commerciaux de grande envergure) la plupart des directeurs en charge du développement Internet nont pas de but défini pour le site bien que 56 % mentionnent laccès rapide; seulement 24 % des sites utilisent les tests dutilisabiité (entrevues avec 25 directeurs de développement) on estime des pertes de près de 50% des ventes potentielles du fait que les clients ne peuvent trouver les produits, et des pertes de « visites répétées » de 40% de la part de clients déçus Source: Seminerio, M., « Study: One In Three Experienced Surfers Find Online Shopping Difficult » Inter@ctive Week, 10 September 1998 ** Source: Nielsen, J., « Alertbox Oct. 1998 Failure of corporate sites, www.useit.com

18 page 18 Jean-Yves Fiset, ing. HEC Montréal, 2002. Tous droits réservés. 2- Problématique des sites Web Problèmes généraux de conception * –Modèle daffaires – considérer le Web comme un moyen de publicité traditionnel (p. ex., brochure). –Besoins de lentreprise vs besoins des utilisateurs du site. –Architecture de linformation: Structure de lentreprise Mission du site –Conception des pages composant le site : Surface vs contenu commentaires informels vs évaluation * Nielsen, J., Conception de sites Web – lart de la simplicité. CampusPress. 2000

19 page 19 Jean-Yves Fiset, ing. HEC Montréal, 2002. Tous droits réservés. 2- Problématique des sites Web Problèmes généraux de conception * –Conception des pages composant le site (suite) Lecture de pages –Une étude * montre que 79 % des utilisateurs « balaient » la page et que seulement 16 % la lisent « mot à mot » –Exemple damélioration de lutilisabilité en appliquant ces règles: Nebraska is filled with internationally recognized attractions that draw large crowds of people every year, without fail. In 1996, some of the most popular places were Fort Robinson State Park (355,000 visitors), Scotts Bluff National Monument (132,166), Arbor Lodge State Historical Park & Museum (100,000), Carhenge (86,598), Stuhr Museum of the Prairie Pioneer (60,002), and Buffalo Bill Ranch State Historical Park (28,446).Carhenge 0 % In 1996, six of the best-attended attractions in Nebraska were Fort Robinson State Park, Scotts Bluff National Monument, Arbor Lodge State Historical Park & Museum, Carhenge, Stuhr Museum of the Prairie Pioneer, and Buffalo Bill Ranch State Historical Park.Carhenge 58 % In 1996, six of the most-visited places in Nebraska were: Fort Robinson State Park Scotts Bluff National Monument Arbor Lodge State Historical Park & Museum Carhenge Stuhr Museum of the Prairie Pioneer Buffalo Bill Ranch State Historical Park 124 %

20 page 20 Jean-Yves Fiset, ing. HEC Montréal, 2002. Tous droits réservés. 2- Problématique des sites Web Problèmes généraux de conception: –Phénomène daveuglement aux bannières (« banner blindness »): –Une étude 3 H, 3 H, âge fin 20 à fin 30 –tâche: 24 courtes recherches spécifiques, la plupart peuvent être réalisées seulement par les hyperliens, alors que les bannières peuvent servir de « shortcuts » pour les autres –résultats (p < 0.03): Source: Banner Blindness: Web Searchers Often Miss "Obvious" Links Jan Panero Benway, David M. Lane, Rice University, ITG Newsletter, Dec 1998

21 page 21 Jean-Yves Fiset, ing. HEC Montréal, 2002. Tous droits réservés. 2- Problématique des sites Web –Explication: Phénomène daveuglement aux bannières (« banner blindness »): –Situation où les utilisateurs à la recherche dinformation spécifique sur une page tendent à ignorer les éléments de grande taille et colorés qui ont une apparence différente des autres éléments sur la page. –Des études convergents tendent à démontrer que les bannières publicitaires sont peu ou pas utilisées pour accéder aux pages correspondantes.

22 page 22 Jean-Yves Fiset, ing. HEC Montréal, 2002. Tous droits réservés. 2 - Problématique des sites Web Problèmes généraux de conception : –Effet de délais –Lisibilité –Résolution –Navigation –Structure (principes, règles et critères de conception) –Emphase négative sur la technologie : Flash et animations Pages dintroduction Gadgets vs besoins

23 page 23 Jean-Yves Fiset, ing. HEC Montréal, 2002. Tous droits réservés. 2- Motivation Apport de lergonomie pour la conception d'Intranet: –Étude chez NCR montre augmentation de 25 % de productivité et une réduction de 25 % des erreurs à la suite dune reconception de lIHM (Interface Humain-Machine) sur la base de principes ergonomiques. –Étude chez IBM montre une réduction du temps dapprentissage de 1 semaine à 1 heure avec une IHM reconçue suivant des principes ergonomiques.

24 page 24 Jean-Yves Fiset, ing. HEC Montréal, 2002. Tous droits réservés. 2 - Cycle de vie du logiciel Cycle de développement : les « techniques » usuelles sont peu performantes : exemple (cascade) Spécification Arch./design Tests Implantation –56 % des erreurs et 82 % des $ de correction sont liés aux spécifications* * Cooling, J.E., First steps - requirements analysis and specification in Software Design for Real-Time Systems, 1991

25 page 25 Jean-Yves Fiset, ing. HEC Montréal, 2002. Tous droits réservés. 2- Cycle de vie logiciel Études : « For each dollar a company invests in developing the usability of a product, the company receives $10-$100 in benefits and wins customer satisfaction and continued business…for each dollar spent to fix a problem during product design, $10 are spent to fix the same problem in product development, and $100 or more are spent to fix the same problem after product release ». « … cost-benefit data shows that including usability … actually cuts the time to market and increases sales because usability and ease of use build quality into products and catch many expensive problems early on in the cycle when they can be addressed at lower cost… » Claire Marie Karat A business case approach to usability cost justification. In, R. Bias and D. Mayhew, Eds. Cost-Justifying Usability, Academic Press, NY, 1994.

26 page 26 Jean-Yves Fiset, ing. HEC Montréal, 2002. Tous droits réservés. 2- Cycle de vie logiciel « …unpublished IBM rule of thumb for the relative costs to identify software defects: during design, 1.5; prior to coding, 1; during coding, 1.5; prior to test, 10; during test, 60; in field use, 100. TRW: The relative times to identify defects: during requirements, 1; during design, 3 to 6; during coding, 10; in development test, 15 to 40; in acceptance test, 30 to 70; during operation, 40 to 1000 (Boehm 81) IBM: The relative time to identify defects: during design review, 1; during code inspections, 20; during machine test, 82 (Remus) » Source: http://www.numega.com/library/papers/quality.shtml

27 page 27 Jean-Yves Fiset, ing. HEC Montréal, 2002. Tous droits réservés. 2- Cycle de vie du logiciel Intégration de lutilisabilité: Spécification Arch./design Tests Implantation Analyse IHM Conception / validation IHM Définition de lIHM sert de véhicule pour identifier et valider les fonctionnalités à offrir pour atteindre les objectifs de lorganisation et des opérateurs. Linterface graphique conviviable résultante est (presque) un bénéfice « secondaire ».

28 page 28 Jean-Yves Fiset, ing. HEC Montréal, 2002. Tous droits réservés. 2 – Cycle de vie du logiciel Utilisation de maquettes plutôt que de prototypes : –Rapport coûts-bénéfices –Validation des concepts –Tests de la navigation –….. –Marketing

29 page 29 Jean-Yves Fiset, ing. HEC Montréal, 2002. Tous droits réservés. 3- Aperçu de la méthode - ISO 13 407 Survol –Titre: « Processus de conception centrée sur lopérateur humain pour les systèmes interactifs », –Motivations pour lutilisation de cette norme, –Rôles et responsabilités des intervenants : Utilisabilité, "user experience", architectes de l'information, spécialistes en utilisabilité, etc., Notion dutilisabilité. Prochaines sections

30 page 30 Jean-Yves Fiset, ing. HEC Montréal, 2002. Tous droits réservés. 3- Aperçu de la méthode - ISO 13 407 Pourquoi utiliser une méthode? –Facilité de compréhension et dutilisation –Satisfaction de lutilisateur –Productivité et efficience opérationnelle –Qualité, esthétique et impact du produit, et avantages concurrentiels. Principes sous-jacents à cette norme : –Participation active des utilisateurs et compréhension claire des exigences liées à lutilisateur et à la tâche, –Répartition appropriée des fonctions entre les utilisateurs et la technologie.

31 page 31 Jean-Yves Fiset, ing. HEC Montréal, 2002. Tous droits réservés. 3- Aperçu de la méthode - ISO 13 407 Activités de conception Identifier la nécessité dune conception centrée sur lopérateur humain Comprendre et spécifier le contexte dutilisation Le système répond aux exigences de lutilisateur et de lorganisation` Spécifier les exigences liées à lutilisateur et à lorganisation Évaluer les conceptions par rapport aux exigences Proposer des solutions de conception Ce processus est amorcé dès la formulation des spécifications initiales du produit ou du système.

32 page 32 Jean-Yves Fiset, ing. HEC Montréal, 2002. Tous droits réservés. 3- Rôles et responsabilités des intervenants Programmeur: Développe le logiciel pour implanter la spécification Concepteur dIHM: Développe et valide la spécification touchant les aspects interactifs Designer industriel: Harmonisation dans lenvironnement… Designer graphique: Infographie, « branding » … Architecte de linformation Spécialiste en utilisabilité Ergonome Spécialiste de la qualité

33 page 33 Jean-Yves Fiset, ing. HEC Montréal, 2002. Tous droits réservés. 3- Rôles et responsabilités des intervenants Dans certains milieux on distingue: –spécialiste en utilisabilité : préoccupé par la facilité dutilisation –architecte de linformation : préoccupé par la définition et lorganisation du contenu –lergonome : préoccupé par les « facteurs humains » Évolution historique récente Distinctions souvent abusives…

34 page 34 Jean-Yves Fiset, ing. HEC Montréal, 2002. Tous droits réservés. 3- Rôles et responsabilités des intervenants Utilisabilité *: degré selon lequel un produit peut être utilisé, par des utilisateurs identifiés, pour atteindre des buts définis avec efficacité, efficience et satisfaction, dans un contexte d'utilisation spécifié. –Efficacité: précision et degré d'achèvement selon lesquels l'utilisateur atteint des objectifs spécifiés. –Efficience: rapport entre les ressources dépensées et la précision et le degré d'achèvement selon lesquels l'utilisateur atteint des objectifs spécifiés. –Satisfaction: absence d'inconfort et attitudes positives dans l'utilisation du produit. Conséquence –Utilisabilité facilité dutilisation * ISO 9241-11 Exigences ergonomiques pour travail de bureau avec terminaux à écrans de visualisation

35 page 35 Jean-Yves Fiset, ing. HEC Montréal, 2002. Tous droits réservés. Quelques statistiques en faveur de lergonomie… eshopability facts –Luc Carton etourism 75% of respondents abandoned their cart without making a purchase (Bizrate.com) 27% of all web transactions are abandoned at the payment screen (Forrester) 4 visitors out of 5 never come back on a web site ( Nvision) 43% of the bookings fall through because of a bad web site usability (Creativegood)