c4conceptionweb [mode de compatibilit ]lutes.upmc.fr/.../cours-ihm/c4conceptionweb.pdf · les...
TRANSCRIPT
![Page 1: C4Conceptionweb [Mode de compatibilit ]lutes.upmc.fr/.../Cours-IHM/C4Conceptionweb.pdf · Les enquêtes montrent que des millions de visiteurs quittent le site sur la page d'accueil](https://reader034.vdocuments.mx/reader034/viewer/2022042220/5ec6683303fbe15f90107c3d/html5/thumbnails/1.jpg)
Conception des logiciels interactifs
Conception des sites web
Cours 4
1
M2-IFL/DU-TICE, [email protected]
http://www.lutes.upmc.fr/delozanne/2009-2010/M2-IFL-DU-TICE-09-Accueil.htm
Conception des sites web
![Page 2: C4Conceptionweb [Mode de compatibilit ]lutes.upmc.fr/.../Cours-IHM/C4Conceptionweb.pdf · Les enquêtes montrent que des millions de visiteurs quittent le site sur la page d'accueil](https://reader034.vdocuments.mx/reader034/viewer/2022042220/5ec6683303fbe15f90107c3d/html5/thumbnails/2.jpg)
Utilisabilité des sites web (vous)� Citer les 5 problèmes d’utilisabilité les plus importants :
2
![Page 3: C4Conceptionweb [Mode de compatibilit ]lutes.upmc.fr/.../Cours-IHM/C4Conceptionweb.pdf · Les enquêtes montrent que des millions de visiteurs quittent le site sur la page d'accueil](https://reader034.vdocuments.mx/reader034/viewer/2022042220/5ec6683303fbe15f90107c3d/html5/thumbnails/3.jpg)
Utilisabilité des sites web (les experts)� auditweb
� Rapidité du site, Aisance de la navigation, Pertinence du design, Respects des standards, Qualité du service
� http://www.auditweb.net/conseils/� J. Nielsen• Téléchargement rapide, Régularité des mises à jour, Utilisation facile du site, Contenu de qualité, Simplicité
3
• Téléchargement rapide, Régularité des mises à jour, Utilisation facile du site, Contenu de qualité, Simplicité
• http://www.useit.com/• A. Boucher• Un site bien rangé, Des pages bien rangées, Capitaliser sur l’apprentissage interne (cohérence) et externe (conventions et standards), Informations et feeback, Mots et symboles simples et clairs, Assistance, Droit à l’erreur, Gain de temps, Liberté, Accessibilité, Satisfaction (utilité, esthétique, service, fiabilité)
• http://www.ergolab.net
![Page 4: C4Conceptionweb [Mode de compatibilit ]lutes.upmc.fr/.../Cours-IHM/C4Conceptionweb.pdf · Les enquêtes montrent que des millions de visiteurs quittent le site sur la page d'accueil](https://reader034.vdocuments.mx/reader034/viewer/2022042220/5ec6683303fbe15f90107c3d/html5/thumbnails/4.jpg)
Utilisabilité des sites web (statistiques)
�2/3 des acheteurs en ligne abandonnent avant la fin de la transaction en 1998, en 2000 (Landay, 2004, ch. 1
4
Accessible le 5/3/07 à
http://www.keynote.com/docs/datasheets/StopLosingCustomers.pdf
![Page 5: C4Conceptionweb [Mode de compatibilit ]lutes.upmc.fr/.../Cours-IHM/C4Conceptionweb.pdf · Les enquêtes montrent que des millions de visiteurs quittent le site sur la page d'accueil](https://reader034.vdocuments.mx/reader034/viewer/2022042220/5ec6683303fbe15f90107c3d/html5/thumbnails/5.jpg)
Plan�Spécificité des sites web�Processus et techniques de conception�Conception de la structuration�Conception des pages
5
�Conception des pages�Conception de la navigation�Conception des formulaires
![Page 6: C4Conceptionweb [Mode de compatibilit ]lutes.upmc.fr/.../Cours-IHM/C4Conceptionweb.pdf · Les enquêtes montrent que des millions de visiteurs quittent le site sur la page d'accueil](https://reader034.vdocuments.mx/reader034/viewer/2022042220/5ec6683303fbe15f90107c3d/html5/thumbnails/6.jpg)
GUI Design vs Web design (1)Qu'est-ce qui change ?�Très grande variabilité des ressources physiques
� L'usager contrôle la navigation
6
� L'usager considère le Web dans son ensemble davantage qu'un site spécifique
![Page 7: C4Conceptionweb [Mode de compatibilit ]lutes.upmc.fr/.../Cours-IHM/C4Conceptionweb.pdf · Les enquêtes montrent que des millions de visiteurs quittent le site sur la page d'accueil](https://reader034.vdocuments.mx/reader034/viewer/2022042220/5ec6683303fbe15f90107c3d/html5/thumbnails/7.jpg)
Diversité des ressources� Interfaces pour handicapés : normes d'accessibilité W3C� 2001 : aux USA
� seulement 50 % des connections via un PC,� le reste Palm, TV, Téléphone, voiture
� Écrans
7
� Écrans � D’un ordinateur portable à une station : 1 à 3� D’un palm et une station : 1 à 6� D’un téléphone à une station : ?
� Donnée incontournable à prendre en compte� Utilisation des feuilles de styles
� + facile pour l'information que pour l'interaction
![Page 8: C4Conceptionweb [Mode de compatibilit ]lutes.upmc.fr/.../Cours-IHM/C4Conceptionweb.pdf · Les enquêtes montrent que des millions de visiteurs quittent le site sur la page d'accueil](https://reader034.vdocuments.mx/reader034/viewer/2022042220/5ec6683303fbe15f90107c3d/html5/thumbnails/8.jpg)
GUI Design vs Web design (3)� L'usager contrôle la navigation
� Accès par la page d'accueilmais plus souvent • par moteurs de recherche ou marques pages
� Fournir contexte et navigation
8
� Fournir contexte et navigation
� L'usager considère le Web dans son ensemble davantage qu'un site spécifique� Votre site n'est pas le centre du monde� Le web est devenu un « genre » et chaque site est interprété en fonction des règles de ce genre
![Page 9: C4Conceptionweb [Mode de compatibilit ]lutes.upmc.fr/.../Cours-IHM/C4Conceptionweb.pdf · Les enquêtes montrent que des millions de visiteurs quittent le site sur la page d'accueil](https://reader034.vdocuments.mx/reader034/viewer/2022042220/5ec6683303fbe15f90107c3d/html5/thumbnails/9.jpg)
GUI Design vs Web design (4)�Contraintes sur la conception
� Temps de développement très courts� Des mises à jour très fréquentes� Des technologies qui évoluent très rapidement et ne sont pas complètement standardisées
9
et ne sont pas complètement standardisées�Des interfaces différentes
� Navigation vs Manipulation directe � Peu d'interactivité� Pas de contrôle du concepteur sur l'environnement client
![Page 10: C4Conceptionweb [Mode de compatibilit ]lutes.upmc.fr/.../Cours-IHM/C4Conceptionweb.pdf · Les enquêtes montrent que des millions de visiteurs quittent le site sur la page d'accueil](https://reader034.vdocuments.mx/reader034/viewer/2022042220/5ec6683303fbe15f90107c3d/html5/thumbnails/10.jpg)
Différentes tâches
Evaluation
ergonomique
Ciblage
Processus
de mises à
jour Rédaction
Du contenu
DéveloppementSite
10
ergonomique
Copyright
Stratégie
commercial
eSécurité
Design
graphique
Développement
informatique
Configuration
matérielle, réseau
D’après J-F Nogier
SiteInternet
![Page 11: C4Conceptionweb [Mode de compatibilit ]lutes.upmc.fr/.../Cours-IHM/C4Conceptionweb.pdf · Les enquêtes montrent que des millions de visiteurs quittent le site sur la page d'accueil](https://reader034.vdocuments.mx/reader034/viewer/2022042220/5ec6683303fbe15f90107c3d/html5/thumbnails/11.jpg)
Les compétences (J. Landay)
Information Architecture
User InterfaceDesign
Usability Evaluation
11
Information Design
Navigation Design
Graphic Design
![Page 12: C4Conceptionweb [Mode de compatibilit ]lutes.upmc.fr/.../Cours-IHM/C4Conceptionweb.pdf · Les enquêtes montrent que des millions de visiteurs quittent le site sur la page d'accueil](https://reader034.vdocuments.mx/reader034/viewer/2022042220/5ec6683303fbe15f90107c3d/html5/thumbnails/12.jpg)
Une équipe� Les partenaires
� Marketing� Communication� Ergonome� Infographes
12
� Infographes� Rédacteurs� Ingénieur IHM� Développeurs� Ingénieur bases de données
� Règles d'or� Communiquer� Former
![Page 13: C4Conceptionweb [Mode de compatibilit ]lutes.upmc.fr/.../Cours-IHM/C4Conceptionweb.pdf · Les enquêtes montrent que des millions de visiteurs quittent le site sur la page d'accueil](https://reader034.vdocuments.mx/reader034/viewer/2022042220/5ec6683303fbe15f90107c3d/html5/thumbnails/13.jpg)
Cycle de conception (Landay 2004)
13
![Page 14: C4Conceptionweb [Mode de compatibilit ]lutes.upmc.fr/.../Cours-IHM/C4Conceptionweb.pdf · Les enquêtes montrent que des millions de visiteurs quittent le site sur la page d'accueil](https://reader034.vdocuments.mx/reader034/viewer/2022042220/5ec6683303fbe15f90107c3d/html5/thumbnails/14.jpg)
Découverte� Ciblage :
� Comprendre les attentes du client� Déterminer l'étendue et les objectifs du projet� Analyser l'existant et la concurrence� Déterminer les caractéristiques des utilisateurs et
14
� Déterminer les caractéristiques des utilisateurs et leurs tâches
![Page 15: C4Conceptionweb [Mode de compatibilit ]lutes.upmc.fr/.../Cours-IHM/C4Conceptionweb.pdf · Les enquêtes montrent que des millions de visiteurs quittent le site sur la page d'accueil](https://reader034.vdocuments.mx/reader034/viewer/2022042220/5ec6683303fbe15f90107c3d/html5/thumbnails/15.jpg)
Document à la fin de l’étape
� Site :
� Buts du site :
� Contraintes :
15
� Critères de succès :
� Catégories d’utilisateurs (personnages) :
� 10 principales utilisations du site (scénarios d’utilisation)
![Page 16: C4Conceptionweb [Mode de compatibilit ]lutes.upmc.fr/.../Cours-IHM/C4Conceptionweb.pdf · Les enquêtes montrent que des millions de visiteurs quittent le site sur la page d'accueil](https://reader034.vdocuments.mx/reader034/viewer/2022042220/5ec6683303fbe15f90107c3d/html5/thumbnails/16.jpg)
Exploration� Générer des idées de conception
� Se donner les moyens de visualiser les solutions pour découvrir des questions
� Concevoir l'information et la navigation• Énumérer les contenus
16
• Énumérer les contenus• Défini les parcours client
� Faire plusieurs propositions d’organisation des écrans� Sélectionner un/plusieurs choix de conception� Techniques
� Remue-méninges, prototypes légers (plan du site, story boards), cartes à trier, revues de conception
![Page 17: C4Conceptionweb [Mode de compatibilit ]lutes.upmc.fr/.../Cours-IHM/C4Conceptionweb.pdf · Les enquêtes montrent que des millions de visiteurs quittent le site sur la page d'accueil](https://reader034.vdocuments.mx/reader034/viewer/2022042220/5ec6683303fbe15f90107c3d/html5/thumbnails/17.jpg)
Affinement� L'équipe crée des représentations du futur site à plusieurs niveaux de détail
� Le site est itérativement affiné à tous niveaux de détails
�Développer la conception
17
�Développer la conception� Maquette conceptuelle• Entrer dans les détails (Cf. Design Patterns)
� Préciser le graphisme� Évaluer et itérer si besoin
![Page 18: C4Conceptionweb [Mode de compatibilit ]lutes.upmc.fr/.../Cours-IHM/C4Conceptionweb.pdf · Les enquêtes montrent que des millions de visiteurs quittent le site sur la page d'accueil](https://reader034.vdocuments.mx/reader034/viewer/2022042220/5ec6683303fbe15f90107c3d/html5/thumbnails/18.jpg)
Production�Finaliser la conception
� Livrer la charte graphique� Le cahier de spécifications, les recommandations et des prototypes
� Soigner les détails
18
� Soigner les détails� Être aussi précis que possible
![Page 19: C4Conceptionweb [Mode de compatibilit ]lutes.upmc.fr/.../Cours-IHM/C4Conceptionweb.pdf · Les enquêtes montrent que des millions de visiteurs quittent le site sur la page d'accueil](https://reader034.vdocuments.mx/reader034/viewer/2022042220/5ec6683303fbe15f90107c3d/html5/thumbnails/19.jpg)
Techniques de conception (rappel)
� Les techniques� Cartes à trier : objets métier, libellé, structuration� Scénarios : vue utilisateur, tâche, contexte� Plan du site : vue d'ensemble de haut niveau� Story boards : séquence d'interaction, niveau page
19
� Story boards : séquence d'interaction, niveau page� Schémas : structure de page, navigation et information� Maquettes : haute-fidélité, représentation très précise
![Page 20: C4Conceptionweb [Mode de compatibilit ]lutes.upmc.fr/.../Cours-IHM/C4Conceptionweb.pdf · Les enquêtes montrent que des millions de visiteurs quittent le site sur la page d'accueil](https://reader034.vdocuments.mx/reader034/viewer/2022042220/5ec6683303fbe15f90107c3d/html5/thumbnails/20.jpg)
Où trouver le savoir-faire ?(1)� Guides, critères et recommandations de conceptions
� W3C accessibilité (11/11/08)http://www.w3.org/WAI/wai-fr� Pour les sites de l’administration française (11/11/08) :http://www.synergies-publiques.fr/
20
http://www.synergies-publiques.fr/� Ergonomie Web, Nicole Lompré (11/11/08)http://web.univ-pau.fr/~lompre/liens/liens.php� Ergolab (Amélie Boucher)http://www.ergolab.net
![Page 21: C4Conceptionweb [Mode de compatibilit ]lutes.upmc.fr/.../Cours-IHM/C4Conceptionweb.pdf · Les enquêtes montrent que des millions de visiteurs quittent le site sur la page d'accueil](https://reader034.vdocuments.mx/reader034/viewer/2022042220/5ec6683303fbe15f90107c3d/html5/thumbnails/21.jpg)
Où trouver le savoir-faire ? (2)Regarder les sites (exemples pour ce cours):� Sites communautaires et services publiques
� Europa, impôts� Universités UPMC, Sydney, Berkley
� Les pros� Netway : http://www.net-ways.com/
21
� Netway : http://www.net-ways.com/� Adobe (http://www.adobe.com/fr/), Google
� Commerce� Nike, Coca-cola, Renault� Amazon, La redoute …
� Voyage� Air France, Sncf, Virgin Atlantic
![Page 22: C4Conceptionweb [Mode de compatibilit ]lutes.upmc.fr/.../Cours-IHM/C4Conceptionweb.pdf · Les enquêtes montrent que des millions de visiteurs quittent le site sur la page d'accueil](https://reader034.vdocuments.mx/reader034/viewer/2022042220/5ec6683303fbe15f90107c3d/html5/thumbnails/22.jpg)
Où trouver le savoir-faire ? (3)� Design Patterns (liens testés le 1/12/09)
� Livre : The Design of Sites, Doug Van Duyne, James Landay, Jason Hong
http://www.designofsites.com/� Conception et développement (en français)
22
Conception et développement (en français)� http://www.alsacreations.com/
![Page 23: C4Conceptionweb [Mode de compatibilit ]lutes.upmc.fr/.../Cours-IHM/C4Conceptionweb.pdf · Les enquêtes montrent que des millions de visiteurs quittent le site sur la page d'accueil](https://reader034.vdocuments.mx/reader034/viewer/2022042220/5ec6683303fbe15f90107c3d/html5/thumbnails/23.jpg)
Design Pattern ?� Inventeur : Alexander (architecte (1977)� Objectif
� Ne pas réinventer la roue � Bénéficier de l'expérience accumulée� Réutiliser des schémas de conception qui ont prouvé
23
� Réutiliser des schémas de conception qui ont prouvé leur efficacité
� Description de problèmes et de leurs solutions� ou plutôt de schéma de solutions à adapter au contexte
� Utilisation :� Éducation� Génie logiciel, modélisation objet (Gamma et al. 1995, Craig etc.) : standard
![Page 24: C4Conceptionweb [Mode de compatibilit ]lutes.upmc.fr/.../Cours-IHM/C4Conceptionweb.pdf · Les enquêtes montrent que des millions de visiteurs quittent le site sur la page d'accueil](https://reader034.vdocuments.mx/reader034/viewer/2022042220/5ec6683303fbe15f90107c3d/html5/thumbnails/24.jpg)
Exemples de DP� Structure du site
� Navigation d’ensemble (top-level)� http://www.time-tripper.com/uipatterns/Toplevel_Navigation
� Conception des pages
24
� Conception des pages� La page d'accueil d'un portail� Lecture sur écran : pyramide inverséehttp://www.designofsites.com/
� Formulaires
![Page 25: C4Conceptionweb [Mode de compatibilit ]lutes.upmc.fr/.../Cours-IHM/C4Conceptionweb.pdf · Les enquêtes montrent que des millions de visiteurs quittent le site sur la page d'accueil](https://reader034.vdocuments.mx/reader034/viewer/2022042220/5ec6683303fbe15f90107c3d/html5/thumbnails/25.jpg)
Structuration� Facteur essentiel de l’utilisabilité� L’organiser
� par rapport aux tâches principales des utilisateurs� pas en calquant la structure de l’organisme
� Techniques : trier les cartes
25
� Techniques : trier les cartes� Une carte par rubrique� Regrouper les cartes par similarité� Faire faire les groupements par différentes personnes et comparer les groupements
� La rendre visible : DP navigation d’ensemble
![Page 26: C4Conceptionweb [Mode de compatibilit ]lutes.upmc.fr/.../Cours-IHM/C4Conceptionweb.pdf · Les enquêtes montrent que des millions de visiteurs quittent le site sur la page d'accueil](https://reader034.vdocuments.mx/reader034/viewer/2022042220/5ec6683303fbe15f90107c3d/html5/thumbnails/26.jpg)
DP : navigation d’ensemble� Pb :
� vous voulez rendre la structure du site visible� Solution :
� vous disposez une barre de navigation en haut de toutes les pages qui permet d’atteindre toutes les parties importantes du site
26
toutes les pages qui permet d’atteindre toutes les parties importantes du site
� vous laissez les panneaux gauche et droits disponibles pour d’autres styles de navigation
� Exemple variante : portail de l’union européenne� http://europa.eu/index_fr.htm
![Page 27: C4Conceptionweb [Mode de compatibilit ]lutes.upmc.fr/.../Cours-IHM/C4Conceptionweb.pdf · Les enquêtes montrent que des millions de visiteurs quittent le site sur la page d'accueil](https://reader034.vdocuments.mx/reader034/viewer/2022042220/5ec6683303fbe15f90107c3d/html5/thumbnails/27.jpg)
Structure� Organisation non-linéaire des données
� défavorise l’orientation de l’utilisateur� Organisation fonctionnelle des contenus
� défavorise la mémorisation, ni le repérage� Organisation hiérarchique
� meilleure mémorisation (structure et contenu)
27
� meilleure mémorisation (structure et contenu)� facilite la navigation
� Organisation linéaire � faibles performances, semble bien adaptée à une 1ère utilisation
� Organisation en réseau � inadéquat aux utilisateurs novices du système ou du domaine
![Page 28: C4Conceptionweb [Mode de compatibilit ]lutes.upmc.fr/.../Cours-IHM/C4Conceptionweb.pdf · Les enquêtes montrent que des millions de visiteurs quittent le site sur la page d'accueil](https://reader034.vdocuments.mx/reader034/viewer/2022042220/5ec6683303fbe15f90107c3d/html5/thumbnails/28.jpg)
Navigation maximale� Pour une compréhension «exhaustive» d’un certain contenu : limite de l’ordre de 4
pour le niveau de largeur pour le niveau de profondeur
C
28
B
C
D
A
E
D
CB
A
![Page 29: C4Conceptionweb [Mode de compatibilit ]lutes.upmc.fr/.../Cours-IHM/C4Conceptionweb.pdf · Les enquêtes montrent que des millions de visiteurs quittent le site sur la page d'accueil](https://reader034.vdocuments.mx/reader034/viewer/2022042220/5ec6683303fbe15f90107c3d/html5/thumbnails/29.jpg)
Un cas d’école…
29
![Page 30: C4Conceptionweb [Mode de compatibilit ]lutes.upmc.fr/.../Cours-IHM/C4Conceptionweb.pdf · Les enquêtes montrent que des millions de visiteurs quittent le site sur la page d'accueil](https://reader034.vdocuments.mx/reader034/viewer/2022042220/5ec6683303fbe15f90107c3d/html5/thumbnails/30.jpg)
Tout ça pour rien !
30
![Page 31: C4Conceptionweb [Mode de compatibilit ]lutes.upmc.fr/.../Cours-IHM/C4Conceptionweb.pdf · Les enquêtes montrent que des millions de visiteurs quittent le site sur la page d'accueil](https://reader034.vdocuments.mx/reader034/viewer/2022042220/5ec6683303fbe15f90107c3d/html5/thumbnails/31.jpg)
Règle d’or
Tout doit être accessible en 3 clics
Qu’en pensez-vous ?
31
Qu’en pensez-vous ?
Pensez aux parcours des utilisateurs
Exemple : je veux visiter les sites pratimoines de l’humanité en Europe
![Page 32: C4Conceptionweb [Mode de compatibilit ]lutes.upmc.fr/.../Cours-IHM/C4Conceptionweb.pdf · Les enquêtes montrent que des millions de visiteurs quittent le site sur la page d'accueil](https://reader034.vdocuments.mx/reader034/viewer/2022042220/5ec6683303fbe15f90107c3d/html5/thumbnails/32.jpg)
Navigation� l'élément ESSENTIEL à l'intérieur d'un site ou d'une application
� lien clairement identifié� simple à comprendre � identique sur tout le site les internautes peuvent arriver sur une page autre que
32
� les internautes peuvent arriver sur une page autre que votre page d'accueil� mettre des options de navigation sur toutes les pages� toujours un lien à la page d'accueil� miettes de pain
� moteur de recherche sur le site
![Page 33: C4Conceptionweb [Mode de compatibilit ]lutes.upmc.fr/.../Cours-IHM/C4Conceptionweb.pdf · Les enquêtes montrent que des millions de visiteurs quittent le site sur la page d'accueil](https://reader034.vdocuments.mx/reader034/viewer/2022042220/5ec6683303fbe15f90107c3d/html5/thumbnails/33.jpg)
DP de navigation
� Exemples : the design of siteB1: Multiple Ways to NavigateB2: Browsable ContentB3: Hierarchical OrganizationB4: Task-Based OrganizationB5: Alphabetical Organization
33
B5: Alphabetical OrganizationB6: Chronological OrganizationB7: Popularity-Based OrganizationB8: Category PagesB9: Site Accessibility
![Page 34: C4Conceptionweb [Mode de compatibilit ]lutes.upmc.fr/.../Cours-IHM/C4Conceptionweb.pdf · Les enquêtes montrent que des millions de visiteurs quittent le site sur la page d'accueil](https://reader034.vdocuments.mx/reader034/viewer/2022042220/5ec6683303fbe15f90107c3d/html5/thumbnails/34.jpg)
Plan du site� La page d’accueil (C.f. plus loin)
� Elle doit contenir • la barre de navigation • un lien vers un plan détaillé du site
� Dès cette page, on doit être dans le site et naviguer� Le plan du site
34
� Le plan du site� représentation simple, de préférence graphique des thèmes du site
� Pas d’ascenseur pour cette page• Les dimensions du plan doivent s’adapter à celles de l’écran
� Les items composant le plan doivent être des liens vers les pages correspondantes
![Page 35: C4Conceptionweb [Mode de compatibilit ]lutes.upmc.fr/.../Cours-IHM/C4Conceptionweb.pdf · Les enquêtes montrent que des millions de visiteurs quittent le site sur la page d'accueil](https://reader034.vdocuments.mx/reader034/viewer/2022042220/5ec6683303fbe15f90107c3d/html5/thumbnails/35.jpg)
Niveaux de navigation� Le bandeau général du Web
� Ne pas s’appuyer dessus pour organiser la navigation� La navigation doit être conçue de façon indépendante
� Utilisation d'un bandeau générique pour l'ensemble du site
35
site� dans les pages d'accueil d'un thème, à gauche� le répéter en bas de page (si dépasse 1,5 fois la longueur de l’écran)
� Utilisation d'un bandeau spécifique au thème parcouru� présentation des différentes parties du thème� un lien avec la page d'accueil général
![Page 36: C4Conceptionweb [Mode de compatibilit ]lutes.upmc.fr/.../Cours-IHM/C4Conceptionweb.pdf · Les enquêtes montrent que des millions de visiteurs quittent le site sur la page d'accueil](https://reader034.vdocuments.mx/reader034/viewer/2022042220/5ec6683303fbe15f90107c3d/html5/thumbnails/36.jpg)
Exemples (ancien)
36
![Page 37: C4Conceptionweb [Mode de compatibilit ]lutes.upmc.fr/.../Cours-IHM/C4Conceptionweb.pdf · Les enquêtes montrent que des millions de visiteurs quittent le site sur la page d'accueil](https://reader034.vdocuments.mx/reader034/viewer/2022042220/5ec6683303fbe15f90107c3d/html5/thumbnails/37.jpg)
Les liens� Un lien doit être clairement identifiable
� Pour une image : ajouter un texte • pour les navigateurs non graphiques et les publics à besoin spéciaux (Standards W3C : http://www.W3C.org)• pour aider le surfeur à identifier le lien
� Un titre de page ne peut pas être un lienPlacer les liens sur les mots clés
37
� Placer les liens sur les mots clés� Ne pas utiliser une phrase entière comme lien (si souligné)� Jamais de : cliquez ici
� Ne pas souligner toute une phrase• Contre-Ex : Résumé de la conférence de Paris• Ex : Conférence de Paris (résumé)
� L'intitulé du lien = titre de la page accédée
![Page 38: C4Conceptionweb [Mode de compatibilit ]lutes.upmc.fr/.../Cours-IHM/C4Conceptionweb.pdf · Les enquêtes montrent que des millions de visiteurs quittent le site sur la page d'accueil](https://reader034.vdocuments.mx/reader034/viewer/2022042220/5ec6683303fbe15f90107c3d/html5/thumbnails/38.jpg)
Les liens� Le comportement des liens doit être cohérent
� Un même texte doit toujours conduire à la même page� Une même page doit toujours être désignée par le même texte
� Les liens visités doivent changer de couleur� Les intitulés de parties non encore accessibles doivent être grisées (clairement inaccessibles)
38
(clairement inaccessibles)� Pas de page et panneaux en construction
� Ne pas nommer de bouton « page précédente »� Les liens doivent être suffisamment grands� Pas d’utilisation du soulignement autre que pour les liens
![Page 39: C4Conceptionweb [Mode de compatibilit ]lutes.upmc.fr/.../Cours-IHM/C4Conceptionweb.pdf · Les enquêtes montrent que des millions de visiteurs quittent le site sur la page d'accueil](https://reader034.vdocuments.mx/reader034/viewer/2022042220/5ec6683303fbe15f90107c3d/html5/thumbnails/39.jpg)
Page d'accueil d'un portail� Problème
� Si la page d'accueil n'est pas attractive, � personne n'ira sur le reste de votre site
� Les enquêtes montrent que des millions de visiteurs quittent le site sur la page d'accueil• Et ne reviennent jamais…
39
• Et ne reviennent jamais…� Les pages d'accueil doivent• Séduire• Trouver des compromis entre- Donner l'image de marque- Permettre la navigation dans le site- Donner des informations sur le contenu du site- Se charger rapidement
![Page 40: C4Conceptionweb [Mode de compatibilit ]lutes.upmc.fr/.../Cours-IHM/C4Conceptionweb.pdf · Les enquêtes montrent que des millions de visiteurs quittent le site sur la page d'accueil](https://reader034.vdocuments.mx/reader034/viewer/2022042220/5ec6683303fbe15f90107c3d/html5/thumbnails/40.jpg)
Régles de base� Pour le visiteur
� Arrivant pour la première fois• Indiquer en quoi le site peut lui être utile
� Qui connaît un peu le site• Servir de point d'entrée pour la navigation
40
• Servir de point d'entrée pour la navigation� Disposition
� Mettre en évidence les choses importantes au centre et à droite
� Les détails sur des domaines particuliers sont relégués plus bas, sur les côtés
� Effets de mode (changements de style fréquents)
![Page 41: C4Conceptionweb [Mode de compatibilit ]lutes.upmc.fr/.../Cours-IHM/C4Conceptionweb.pdf · Les enquêtes montrent que des millions de visiteurs quittent le site sur la page d'accueil](https://reader034.vdocuments.mx/reader034/viewer/2022042220/5ec6683303fbe15f90107c3d/html5/thumbnails/41.jpg)
6 conseils (début)� Faire une première impression positive
� Tester• Présenter des liens explicites et longs (autre DP)• Utiliser un langage familier et compréhensible (encore un DP)
41
(encore un DP)• Apprenez à connaître vos utilisateurs- Enquêtes, études de terrains- Graphismes et couleurs– Site de skateboards/ site bancaire
![Page 42: C4Conceptionweb [Mode de compatibilit ]lutes.upmc.fr/.../Cours-IHM/C4Conceptionweb.pdf · Les enquêtes montrent que des millions de visiteurs quittent le site sur la page d'accueil](https://reader034.vdocuments.mx/reader034/viewer/2022042220/5ec6683303fbe15f90107c3d/html5/thumbnails/42.jpg)
6 Conseils (suite)� Cibler un centre principal d'intérêt
� Faire qu'au premier coup d'œil il soit clairement lisible et identifier (ex. réservation/achat en ligne)
� Le rendre clair et plus grand que le reste de la page� Éliminer les éléments restants pour n'en garder que quelques uns
42
� Éliminer les éléments restants pour n'en garder que quelques uns
� Construisez votre image de marque� Identifier votre entreprise� Inclure ce qu'elle peut apporter au visiteur (DP)� Mettre un lien sur votre politique de protection des droits individuels pour montrer votre sérieux
![Page 43: C4Conceptionweb [Mode de compatibilit ]lutes.upmc.fr/.../Cours-IHM/C4Conceptionweb.pdf · Les enquêtes montrent que des millions de visiteurs quittent le site sur la page d'accueil](https://reader034.vdocuments.mx/reader034/viewer/2022042220/5ec6683303fbe15f90107c3d/html5/thumbnails/43.jpg)
6 conseils (suite)� Rendre la navigation évidente
� Pour les débutants et les experts� Utiliser plusieurs systèmes pour naviguer (autre DP)• Pour les fondamentaux de votre site : liens en clair (autre DP)• Barre de navigation (DP)
43
• Barre de navigation (DP)• Utiliser des sections colorées pour séparer les zones (DP)• Utiliser des images réutilisables pour mettre en évidence les nouveautés
� Donner envie au visiteur de revenir� Avec des contenus récents et mis à jour� Avec un contenu vivant, précis
![Page 44: C4Conceptionweb [Mode de compatibilit ]lutes.upmc.fr/.../Cours-IHM/C4Conceptionweb.pdf · Les enquêtes montrent que des millions de visiteurs quittent le site sur la page d'accueil](https://reader034.vdocuments.mx/reader034/viewer/2022042220/5ec6683303fbe15f90107c3d/html5/thumbnails/44.jpg)
6 conseils (fin)� Faites qu'il se télécharge rapidement
� Ex. version flash et sans flash (Nike)� Option : Passer l’introduction
� Stratégies� Utiliser du texte
44
� Utiliser du texte� Utiliser des images petites et compressées� Utiliser du graphique léger� Utiliser un nombre réduit de colonnes
![Page 45: C4Conceptionweb [Mode de compatibilit ]lutes.upmc.fr/.../Cours-IHM/C4Conceptionweb.pdf · Les enquêtes montrent que des millions de visiteurs quittent le site sur la page d'accueil](https://reader034.vdocuments.mx/reader034/viewer/2022042220/5ec6683303fbe15f90107c3d/html5/thumbnails/45.jpg)
Free
45
![Page 46: C4Conceptionweb [Mode de compatibilit ]lutes.upmc.fr/.../Cours-IHM/C4Conceptionweb.pdf · Les enquêtes montrent que des millions de visiteurs quittent le site sur la page d'accueil](https://reader034.vdocuments.mx/reader034/viewer/2022042220/5ec6683303fbe15f90107c3d/html5/thumbnails/46.jpg)
Free en 2008, en 2009 ?
46
![Page 47: C4Conceptionweb [Mode de compatibilit ]lutes.upmc.fr/.../Cours-IHM/C4Conceptionweb.pdf · Les enquêtes montrent que des millions de visiteurs quittent le site sur la page d'accueil](https://reader034.vdocuments.mx/reader034/viewer/2022042220/5ec6683303fbe15f90107c3d/html5/thumbnails/47.jpg)
Pyramide inversée (1)� Problème
� Lecture écran 25 % moins rapide que lecture papier� Les surfers veulent des pages• Qui se chargent vite• Faciles à utiliser
47
• Faciles à utiliser• Qui se parcourent vite
� Solution� Donner les conclusions en premier� Proposer des détails ensuite pour ceux qui en veulent
![Page 48: C4Conceptionweb [Mode de compatibilit ]lutes.upmc.fr/.../Cours-IHM/C4Conceptionweb.pdf · Les enquêtes montrent que des millions de visiteurs quittent le site sur la page d'accueil](https://reader034.vdocuments.mx/reader034/viewer/2022042220/5ec6683303fbe15f90107c3d/html5/thumbnails/48.jpg)
Pyramide inversée (2)
Informations importantesTitre, Courtes annonces, Résumés, Panorama
48
Informations moins importantesDétails, Citations longues
![Page 49: C4Conceptionweb [Mode de compatibilit ]lutes.upmc.fr/.../Cours-IHM/C4Conceptionweb.pdf · Les enquêtes montrent que des millions de visiteurs quittent le site sur la page d'accueil](https://reader034.vdocuments.mx/reader034/viewer/2022042220/5ec6683303fbe15f90107c3d/html5/thumbnails/49.jpg)
Pyramide inversée (3)
49
![Page 50: C4Conceptionweb [Mode de compatibilit ]lutes.upmc.fr/.../Cours-IHM/C4Conceptionweb.pdf · Les enquêtes montrent que des millions de visiteurs quittent le site sur la page d'accueil](https://reader034.vdocuments.mx/reader034/viewer/2022042220/5ec6683303fbe15f90107c3d/html5/thumbnails/50.jpg)
Les conseilleurs en 2004
50
![Page 51: C4Conceptionweb [Mode de compatibilit ]lutes.upmc.fr/.../Cours-IHM/C4Conceptionweb.pdf · Les enquêtes montrent que des millions de visiteurs quittent le site sur la page d'accueil](https://reader034.vdocuments.mx/reader034/viewer/2022042220/5ec6683303fbe15f90107c3d/html5/thumbnails/51.jpg)
En 2009
51
![Page 52: C4Conceptionweb [Mode de compatibilit ]lutes.upmc.fr/.../Cours-IHM/C4Conceptionweb.pdf · Les enquêtes montrent que des millions de visiteurs quittent le site sur la page d'accueil](https://reader034.vdocuments.mx/reader034/viewer/2022042220/5ec6683303fbe15f90107c3d/html5/thumbnails/52.jpg)
Le contenu� Titre de la page d’accueil : représente la totalité du site� Titres des pages : donnent une idée de leur contenu et fournisse un « favori » explicite
� Dates de mises à jour figurent sur les pages concernées
52
� Responsable éditorial : le document doit être signé � L’adresse électronique du Web master : obligatoire
� pour que les visiteurs puissent faire des remarques constructives
� Chaque page doit établir le contexte du document� Miettes de pain (Petit Poucet)
![Page 53: C4Conceptionweb [Mode de compatibilit ]lutes.upmc.fr/.../Cours-IHM/C4Conceptionweb.pdf · Les enquêtes montrent que des millions de visiteurs quittent le site sur la page d'accueil](https://reader034.vdocuments.mx/reader034/viewer/2022042220/5ec6683303fbe15f90107c3d/html5/thumbnails/53.jpg)
Qui fait ce site ?� http://www.education.fr
53
![Page 54: C4Conceptionweb [Mode de compatibilit ]lutes.upmc.fr/.../Cours-IHM/C4Conceptionweb.pdf · Les enquêtes montrent que des millions de visiteurs quittent le site sur la page d'accueil](https://reader034.vdocuments.mx/reader034/viewer/2022042220/5ec6683303fbe15f90107c3d/html5/thumbnails/54.jpg)
Modèle de page� Doit être unique pour l'ensemble du site� Standard obligatoire
� Seuls les liens sont soulignés � Les liens sont de couleur différente � L'important étant la bonne visibilité (en fonction du fond d'écran)
� Pas de pages vides ou en constructionPas d’ascenseur en largeur
54
� Pas d’ascenseur en largeur� jamais de double ascenseur (horizontal et vertical)
� Les animations� Ne pas abuser des animations� Ne pas mettre d’animation trop voyante� Ne pas mettre d’animation à côté d’un texte à lire � Laisser la possibilité de stopper l’animation
![Page 55: C4Conceptionweb [Mode de compatibilit ]lutes.upmc.fr/.../Cours-IHM/C4Conceptionweb.pdf · Les enquêtes montrent que des millions de visiteurs quittent le site sur la page d'accueil](https://reader034.vdocuments.mx/reader034/viewer/2022042220/5ec6683303fbe15f90107c3d/html5/thumbnails/55.jpg)
Police et couleurs� Polices de caractères
� Si plusieurs polices sont utilisées, une sémantique bien définie doit être associée à chaque police
� Éviter d’écrire en italique, en majuscule (moins lisible)� Ne pas utiliser de polices trop petites• Taille 12 au minimum pour le texte courant
� Les couleurs
55
� Les couleurs� Ne pas multiplier le nombre de couleurs sur une même page� Utiliser les "true colors" : Seules 216 couleurs sont communes aux navigateurs : Standards W3C : http://www.W3C.org• Se restreindre à ces couleurs
� Rester très sobre pour la couleur de fond� Cours en ligne sur les couleurs • http://interaction2.free.fr/• http://www.vrrh.ulaval.ca/sante/couleurs.html• http://interface.free.fr/Interface/Couleur.html
![Page 56: C4Conceptionweb [Mode de compatibilit ]lutes.upmc.fr/.../Cours-IHM/C4Conceptionweb.pdf · Les enquêtes montrent que des millions de visiteurs quittent le site sur la page d'accueil](https://reader034.vdocuments.mx/reader034/viewer/2022042220/5ec6683303fbe15f90107c3d/html5/thumbnails/56.jpg)
Accessibilité visuelle� Outils en lignehttp://www.vischeck.com/www.etre.com/tools/colourcheckwww.snook.ca/technical/colour_contrast/colour.html
56
![Page 57: C4Conceptionweb [Mode de compatibilit ]lutes.upmc.fr/.../Cours-IHM/C4Conceptionweb.pdf · Les enquêtes montrent que des millions de visiteurs quittent le site sur la page d'accueil](https://reader034.vdocuments.mx/reader034/viewer/2022042220/5ec6683303fbe15f90107c3d/html5/thumbnails/57.jpg)
Présentation des pages� Graphisme
� Vecteur important de communication• pour la fidélisation du visiteur• renforce le message véhiculé par le texte
� Définir une charte graphique• Définir les modèles de pages• Style de présentation des titres et du texte
57
• Style de présentation des titres et du texte� Feuilles de style
� Possible avec HTML grâce au CSS� Objectif : Séparer le fond de la forme• Garantie d’homogénéité sur tout le site• Mise à jour rapide
� De préférence, définir un fichier à part, lié au fichier HTML� Exemple (suite)
![Page 58: C4Conceptionweb [Mode de compatibilit ]lutes.upmc.fr/.../Cours-IHM/C4Conceptionweb.pdf · Les enquêtes montrent que des millions de visiteurs quittent le site sur la page d'accueil](https://reader034.vdocuments.mx/reader034/viewer/2022042220/5ec6683303fbe15f90107c3d/html5/thumbnails/58.jpg)
Formulaires� Un bon cours (2008, en anglais) : Luke Wroblewskihttp://www.lukew.com/resources/articles/WebForms_LukeW.pdf
� Un document (2004, en français) : Amélie Boucherhttp://www.ergolab.net/articles/ergonomie-formulaire.phphttp://www.ergolab.net/articles/ergonomie-formulaire.php
58
![Page 59: C4Conceptionweb [Mode de compatibilit ]lutes.upmc.fr/.../Cours-IHM/C4Conceptionweb.pdf · Les enquêtes montrent que des millions de visiteurs quittent le site sur la page d'accueil](https://reader034.vdocuments.mx/reader034/viewer/2022042220/5ec6683303fbe15f90107c3d/html5/thumbnails/59.jpg)
Formulaires� Aligner les champs
� Utiliser des tableaux à plusieurs colonnes� à gauche les libellés� à droite pour les objets de la saisie� avantage : présentation plus régulière
� Choix d'un élément
59
� Choix d'un élément� Moins de 5 options : Radios boutons/cases à cocher (choix multiples)� De 5 à 100 éléments : Liste déroulante� Plus de 100 : accéder à une nouvelle page pour faire une recherche
� Utilisation d’un langage de script � pour signaler les absences ou les erreurs de saisie� pour les champs de type numérique : vérification du format attendu
� Principe du caddie (commerce électronique)� Stocker les informations saisies sur une page à part (DP le panier)
![Page 60: C4Conceptionweb [Mode de compatibilit ]lutes.upmc.fr/.../Cours-IHM/C4Conceptionweb.pdf · Les enquêtes montrent que des millions de visiteurs quittent le site sur la page d'accueil](https://reader034.vdocuments.mx/reader034/viewer/2022042220/5ec6683303fbe15f90107c3d/html5/thumbnails/60.jpg)
Sncf
60
![Page 61: C4Conceptionweb [Mode de compatibilit ]lutes.upmc.fr/.../Cours-IHM/C4Conceptionweb.pdf · Les enquêtes montrent que des millions de visiteurs quittent le site sur la page d'accueil](https://reader034.vdocuments.mx/reader034/viewer/2022042220/5ec6683303fbe15f90107c3d/html5/thumbnails/61.jpg)
Virgin atlantic
61
![Page 62: C4Conceptionweb [Mode de compatibilit ]lutes.upmc.fr/.../Cours-IHM/C4Conceptionweb.pdf · Les enquêtes montrent que des millions de visiteurs quittent le site sur la page d'accueil](https://reader034.vdocuments.mx/reader034/viewer/2022042220/5ec6683303fbe15f90107c3d/html5/thumbnails/62.jpg)
Air France
62
![Page 63: C4Conceptionweb [Mode de compatibilit ]lutes.upmc.fr/.../Cours-IHM/C4Conceptionweb.pdf · Les enquêtes montrent que des millions de visiteurs quittent le site sur la page d'accueil](https://reader034.vdocuments.mx/reader034/viewer/2022042220/5ec6683303fbe15f90107c3d/html5/thumbnails/63.jpg)
Référencement
� Très important
63
![Page 64: C4Conceptionweb [Mode de compatibilit ]lutes.upmc.fr/.../Cours-IHM/C4Conceptionweb.pdf · Les enquêtes montrent que des millions de visiteurs quittent le site sur la page d'accueil](https://reader034.vdocuments.mx/reader034/viewer/2022042220/5ec6683303fbe15f90107c3d/html5/thumbnails/64.jpg)
Encore les utilisateurs…� Vérifier que le site fonctionne correctement sur différents environnements
� Interactions avec l'utilisateur� Fidélisation :• Penser à proposer aux utilisateurs l'inscription à
64
• Penser à proposer aux utilisateurs l'inscription à une liste pour être avertis des nouveautés
� Évaluation:• Offrir la possibilité aux utilisateurs de donner leur avis sur le site
� Penser à enregistrer le nombre de visites sur chacune des parties du site
![Page 65: C4Conceptionweb [Mode de compatibilit ]lutes.upmc.fr/.../Cours-IHM/C4Conceptionweb.pdf · Les enquêtes montrent que des millions de visiteurs quittent le site sur la page d'accueil](https://reader034.vdocuments.mx/reader034/viewer/2022042220/5ec6683303fbe15f90107c3d/html5/thumbnails/65.jpg)
Références du cours� James Landay + The Design of sites : http://guir.berkeley.edu/courses/cs160/2002_spring/lectures.htm
http://www.designofsites.com/� Jean-François Nogier
� De l’ergonomie du logiciel au design des sites web, Dunod, 2002, 243 p.
� Joëlle Coutaz : http://iihm.imag.fr/docs/coutaz.ecole2/ConceptionPagesWeb.html
65
http://iihm.imag.fr/docs/coutaz.ecole2/ConceptionPagesWeb.html
� En ligne : les Web Design patterns de Weliehttp://www.welie.com/patterns/� En Ligne : Twidellhttp://www.time-tripper.com/uipatterns/
![Page 66: C4Conceptionweb [Mode de compatibilit ]lutes.upmc.fr/.../Cours-IHM/C4Conceptionweb.pdf · Les enquêtes montrent que des millions de visiteurs quittent le site sur la page d'accueil](https://reader034.vdocuments.mx/reader034/viewer/2022042220/5ec6683303fbe15f90107c3d/html5/thumbnails/66.jpg)
Les clés du succès
1. Investissez dans le contenu, Renouvelez le contenu2. Respectez les standards3. Soignez la navigation4. Évitez les pages trop lourdes, les modes techniques, les"pages tunnels"
66
"pages tunnels"5. Rendez le site disponible6. Répondez aux courriels, fidélisez grâce aux courriels7. N'utilisez pas les frames (ou à bon escient) !8. Offrez une carte de votre site9. Optez pour un design sobre10.Soignez les détails, la lisibilité11.Faites-vous connaître grâce au référencement
![Page 67: C4Conceptionweb [Mode de compatibilit ]lutes.upmc.fr/.../Cours-IHM/C4Conceptionweb.pdf · Les enquêtes montrent que des millions de visiteurs quittent le site sur la page d'accueil](https://reader034.vdocuments.mx/reader034/viewer/2022042220/5ec6683303fbe15f90107c3d/html5/thumbnails/67.jpg)
Pour la route� Comme en génie –logiciel� Pensez Design Patterns pour
� Ne pas réinventer la roue� Faciliter la compréhension de votre conception par d’autres
67
d’autres� Réserver votre créativité sur des innovations qui en valent la peine