Embed Size (px)
DESCRIPTION
Séminaire realisé pour l' AMDH, CMODH, Espace Associatif (Maroc) pour apprendre faire un projet web
Citation preview
Rabat 2011- Comment faire un projet web?
L'ergonomie, l'utilisabilité
Dabne
Rabat 2011- Comment faire un projet web?
Qu’est-ce que le web design
Le web design désigne la conception de l'interface web:
l’architecture interactionnelle, l’organisation des pages, l’arborescence et la navigation dans le site web. Il s’agit d’une phase essentielle dans la conception d’un tel site. La conception d'un design web tient compte des contraintes spécifiques du support Internet, notamment en termes d’ergonomie, d’utilisabilité et d’accessibilité.
2
L'utilisabilité...
Rabat 2011- Comment faire un projet web?
Ergonomie
L'ergonomie est l'utilisation de connaissances scientifiques relatives à l'homme (psychologie, physiologie, médecine) dans le but d'améliorer son environnement de travail.
3
L'utilisabilité...
Rabat 2011- Comment faire un projet web?
L'ergonomie se caractérise généralement selon deux composantes:
• L'efficacité, consistant à adopter des solutions appropriées d'utilisation d'un produit, au-delà du bon sens du concepteur;
• L'utilisabilité, marquant l'adéquation aux capacités de l'utilisateur. Elle se décline en:
• confort d'utilisation, consistant à réduire au maximum la fatigue physique et nerveuse.
• sécurité, consistant à choisir des solutions adéquates pour protéger l'utilisateur;
4
L'utilisabilité...
Rabat 2011- Comment faire un projet web?
Ergonomie web
Appliquée au domaine du web, l'ergonomie d'un site web peut être définie par sa capacité à répondre efficacement aux attentes des utilisateurs et à leur fournir un confort de navigation.
La principale difficulté que tente de lever l'ergonomie est la diversité des profils des visiteurs. Les critères suivants sont généralement déterminants pour un site web:
• attentes de l'utilisateur: tous les visiteurs du site ne recherchent pas nécessairement la même information ou n'ont pas nécessairement les mêmes exigences en terme de graphisme.
5
L'utilisabilité...
Rabat 2011- Comment faire un projet web?
• habitudes de l'utilisateur: elles correspondent à des comportements acquis.
• âge de l'utilisateur: il caractérise en général la capacité d'adaptation de l'utilisateur et sa rapidité de navigation.
• équipements: il s'agit d'une des difficultés majeures. En effet, l'affichage du site pourra varier d'un équipement à l'autre, en particulier selon le navigateur et la résolution d'affichage.
• niveau de connaissances: tous les visiteurs du site ne sont pas nécessairement des as de l'informatique. L'ergonomie du site doit être pensée pour l'utilisateur le moins expérimenté.
http://www.commentcamarche.net/contents/web/ergonomie.php3
6
L'utilisabilité...
Rabat 2011- Comment faire un projet web?
L'ergonomie a pour objectif d'améliorer l'interaction homme-machine, la facilité d’utilisation et d’apprentissage des produits interactifs
Ergonomie = Utilité + Utilisabilité
(Caractère de ce qui est utile + Qui peut être utilisé)
7
L'utilisabilité...
Rabat 2011- Comment faire un projet web?
Utilisabilité
Facilité d’utilisation, convivialité
(dans le langage commun)
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é
http://fr.wikipedia.org/wiki/Utilisabilité
8
L'utilisabilité...
Rabat 2011- Comment faire un projet web?
Utilisabilité web
• Accessibilité & simplicité: le grand principe bien connu. Tout le monde doit pouvoir utiliser votre produit.
• Trouver son chemin: que ce soit pour s’inscrire à une newsletter ou se rendre à l’hôtel dans une ville que vous ne connaissez pas, le principe reste le même: orientation, décision de la route à suivre, monitoring de cette route et reconnaissance de la destination finale.
9
L'utilisabilité...
Rabat 2011- Comment faire un projet web?
• Flexibilité: des produits flexibles, oui! Mais attention à ne pas transformer cette flexibilité en complexité. Un fonctionnalité pour chaque fonction.
• Faire le ménage dans les ordures: L’exemple le plus commun se retrouve souvent dans les formulaires, qui sont trop longs et avec champs inutiles.
• Performance: l'utilisateur doit utiliser peu de temps et peu d'effort physique et mentale pour accomplir une tâche.
10
L'utilisabilité...
Rabat 2011- Comment faire un projet web?
• Visibilité: la clarté et la lisibilité de l’information. Laisser des espaces en blanc, l'alignement du texte...
• La combinaison des informations affichées: savoir écrire l’information à plusieurs dimensions. Mettre les images, vidéos, documents joints appropriées...
• Le droit à l’erreur: l’utilisateur peut se tromper, faire une mauvaise action et il ne doit pas être puni pour ça. En clair, attention aux réaction de votre site/appli selon les actions effectuées par votre utilisateur. Par exemple, l'utilisateur doit peut revenir a la page précédent facilement.
http://blog.ramenos.net/internetweb/usabilite-web-un-bel-article-a-lire-et-6-points-a-retenir/
11
L'utilisabilité...
Rabat 2011- Comment faire un projet web?
Des pratiques, pourtant courantes, qui nuisent à l’utilisabilité d’un site web sont, par exemple
• l’ouverture intempestive de nouvelles fenêtres lorsque l’on clique sur un lien hypertexte,
• le masquage dans la barre de statut du navigateur de l’URL pointée par un lien hypertexte,
• le soulignement de textes hors de liens hypertextes, alors que cela est identifié instinctivement comme une mise en évidence des liens depuis la création du web,
• la multiplication des typographies, couleurs et autres mises en formes visuelles plus perturbantes que pertinentes
12
L'utilisabilité...
Rabat 2011- Comment faire un projet web?
Test d'utilisabilité
• http://www.useit.com/papers/webwriting/studyfiles/questionnaire1.html
• http://www.useit.com/papers/webwriting/studyfiles/questionnaire2.html
13
L'utilisabilité...
Rabat 2011- Comment faire un projet web?
Qu'est-ce que c'est pour nous un site dynamique?
• Animations (flash, gifs)?
• Beaucoup des liens?
• Un site avec plusieurs visiteurs?
• ...?
14
L'utilisabilité...
Rabat 2011- Comment faire un projet web?
Une page Web dynamique est une page Web générées à la demande, par opposition à une page Web statique. Le contenu d'une page Web dynamique peut donc varier en fonction d'informations (heure, nom de l'utilisateur, formulaire rempli par l'utilisateur, etc.) qui ne sont connues qu'au moment de sa consultation. À l'inverse, le contenu d'une page Web statique est a priori identique à chaque consultation.
http://fr.wikipedia.org/wiki/Page_Web_dynamique
15
L'utilisabilité...
Rabat 2011- Comment faire un projet web?
Accessibilité
Elle nécessite un traitement tout au long du cycle de vie d'un site Web, par l'ensemble de ses acteurs, via des méthodes d'applications, des référentiels métiers et une démarche de suivi.
16
L'utilisabilité...
Rabat 2011- Comment faire un projet web?
Références
• http://www.commentcamarche.net/contents/web/ergonomie.php3
• http://www.qualitystreet.fr/2007/11/08/ergonomie-utilite-utilisabilite-special- usability-day/
• http://fr.wikipedia.org/wiki/Utilisabilité
• http://www.useit.com/ Jackob Nielsen
• http://www.clever-age.com/veille/clever-link/usabilite-accessibilite-et-realite.html
• http://blog.ramenos.net/internetweb/usabilite-web-un-bel-article-a-lire-et-6-points- a-retenir/
• http://userpathways.com/2010/10/usability/ (en anglais)
• http://www.seo-reference.net/optimisation/usabilite.html
• http://www.choblab.com/web-design/web-design-et-usabilite-notions-de-mise-en-
17
L'utilisabilité...
Rabat 2011- Comment faire un projet web?
page-3030.html (maquette)
• http://www.dcc.uchile.cl/~rbaeza/inf/usabilidad.html (en espagnol)
• http://www.bewype.fr/conception-web/12-conseils-usabilite-page-accueil
• http://www.useit.com/papers/webwriting/studyfiles/questionnaire1.html (en anglais)
• http://www.useit.com/papers/webwriting/studyfiles/questionnaire2.html (en anglais)
• http://fr.wikipedia.org/wiki/Page_Web_dynamique
18
Cette oeuvre est mise à disposition selon le contrat Attribution-ShareAlike 3.0 Unported disponible en ligne http://creativecommons.org/licenses/by-sa/3.0/ ou par courrier postal à Creative Commons, 171 Second Street, Suite 300, San Francisco, California 94105, USA.
L'utilisabilité...
