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,

page 1Jean-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.


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

d’intervention• Aperçu de la méthode qui sera utilisée pour la

conception de sites Web• Ressources en ligne

Sujets du cours 1


1- Survol du plan de cours

ObjectifsArchitecture du coursPortée et limitesÉvaluationApproche pédagogique

Prochaines sections


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.


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

Introductionet

présentationdu cours

Cours 2 et 3

Introductionà l’ergonomie

et àl’analyse de tâche

Cours 8 à 12

Outils fondamentauxd’évaluation

ergonomique de la norme ISO13407

(Méthode de conceptionde sites Web centrée

sur l’utilisateur)

Cours 13-15

Présentationsdes travaux d’équipe en classe.

Cours de révision des notions

clés.

Projet (travail d’équipe)

Cours 4 à 7

Introductionau code HTML

Notions Historiques,

pratiqueset

élémentaires


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.


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


1- Approche pédagogique

• Utilisation simultanée de cours en ligne et d’exercices d’intégration pour la première partie (AHT et HTML)

• Présentations magistrales et exécution d’une partie du projet en classe pour la seconde partie (conception de sites Web).


2- Justification et définitions

– Problématique des sites de commerce électronique– Éléments de motivation– Cycle de vie logiciel

Prochaines sections


2- Problématique des sites Web

• Facteurs affectant le succès des sites:

– Résultats d’une é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.



• Gagnant de la catégorie « News » :



• Gagnant de la catégorie « Best practices » :



Contribution des critères au pointage total

0,7

0,75

0,8

0,85

0,9

0,95

Contenu Navigation Design visuel Interactivité Fonctionalité

Art

Nouvelle

Service

Site de commerce



Contribution des critères au pointage total

0,7

0,75

0,8

0,85

0,9

0,95

Art Nouvelle Service Site decommerce

Contenu

Navigation

Design visuel

Interactivité

Fonctionalité



• 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 d’une catégorie.



• 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



• Recherche d’information: Commerce électronique:

– Une étude * de 239 utilisateurs fréquents d’Internet 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).

– D’autres études ** montrent que• utilisateurs ont pu trouver l’information requise seulement 42 % du temps même s’ils ont

été amené à la page d’accueil adéquate (revue de 20 sites commerciaux de grande envergure)

• la plupart des directeurs en charge du développement Internet n’ont pas de but défini pour le site bien que 56 % mentionnent l’accès rapide; seulement 24 % des sites utilisent les tests d’utilisabiité (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



• Problèmes généraux de conception *– Modèle d’affaires – considérer le Web comme un moyen de

publicité traditionnel (p. ex., brochure).– Besoins de l’entreprise vs besoins des utilisateurs du site.– Architecture de l’information:

• Structure de l’entreprise • Mission du site

– Conception des pages composant le site :• Surface vs contenu• commentaires informels vs évaluation

* Nielsen, J., Conception de sites Web – l’art de la simplicité. CampusPress. 2000



• 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 d’amélioration de l’utilisabilité 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).

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.

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 %



• Problèmes généraux de conception:– Phénomène d’aveuglement 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" LinksJan Panero Benway, David M. Lane , Rice University, ITG Newsletter, Dec 1998



– Explication: Phénomène d’aveuglement aux bannières (« banner blindness »):

– Situation où les utilisateurs à la recherche d’information 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.


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 d’introduction• Gadgets vs besoins


2- Motivation

• Apport de l’ergonomie pour la conception d'Intranet:

– Étude chez NCR montre augmentation de 25 % de productivité et une réduction de 25 % des erreurs à la suite d’une reconception de l’IHM (Interface Humain-Machine) sur la base de principes ergonomiques.

– Étude chez IBM montre une réduction du temps d’apprentissage de 1 semaine à 1 heure avec une IHM reconçue suivant des principes ergonomiques.


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


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 KaratA business case approach to usability cost justification.In, R. Bias and D. Mayhew, Eds. Cost-Justifying Usability, Academic Press, NY, 1994.


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


2- Cycle de vie du logiciel

• Intégration de l’utilisabilité:

Spécification

Arch./design

Tests

Implantation

Analyse IHMConception /

validation IHM

• Définition de l’IHM sert de véhicule pour identifier et valider les fonctionnalités à offrir pour atteindre les objectifs de l’organisation et des opérateurs.

• L’interface graphique conviviable résultante est (presque) un bénéfice « secondaire ».


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


3- Aperçu de la méthode - ISO 13 407

Survol– Titre: « Processus de conception centrée sur

l’opérateur humain pour les systèmes interactifs »,– Motivations pour l’utilisation de cette norme,– Rôles et responsabilités des intervenants :

• Utilisabilité, "user experience", architectes de l'information, spécialistes en utilisabilité, etc. ,

• Notion d’utilisabilité.

Prochaines sections



• Pourquoi utiliser une méthode?– Facilité de compréhension et d’utilisation– Satisfaction de l’utilisateur– 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 à l’utilisateur et à la tâche,– Répartition appropriée des fonctions entre les utilisateurs et la

technologie.



• Activités de conception

Identifier lanécessité d’une conception

centrée sur l’opérateur humain

Comprendre et spécifier le contexte

d’utilisation

Le système répond auxexigences de l’utilisateur

et de l’organisation`

Spécifier lesexigences liées à l’utilisateur et à

l’organisation

Évaluer lesconceptions par

rapport aux exigences

Proposer des solutions deconception

Ce processus est amorcé dès la formulation des spécifications initiales du produit ou du système.


3- Rôles et responsabilités des intervenants

Programmeur: Développe le logiciel pour implanter la spécification

Concepteur d’IHM:Développe et valide la spécification touchant les aspects interactifs

Designer industriel:Harmonisation dans l’environnement…

Designer graphique: Infographie, « branding » …

Architecte de l’information

Spécialiste en utilisabilité

Ergonome

Spécialiste de la qualité



• Dans certains milieux on distingue:– spécialiste en utilisabilité :

• préoccupé par la facilité d’utilisation

– architecte de l’information :• préoccupé par la définition et l’organisation du contenu

– l’ergonome :• préoccupé par les « facteurs humains »

• Évolution historique récente

• Distinctions souvent abusives…



• 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é d’utilisation

* ISO 9241-11 Exigences ergonomiques pour travail de bureau avec terminaux à écrans de visualisation


Quelques statistiques en faveur de l’ergonomie…

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)

Documents

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,