la page daccueil analyse et principes de conception
TRANSCRIPT
![Page 1: La page daccueil Analyse et principes de conception](https://reader036.vdocuments.net/reader036/viewer/2022062511/551d9d84497959293b8bf77b/html5/thumbnails/1.jpg)
La page d’accueil
Analyse et principes de conception
![Page 2: La page daccueil Analyse et principes de conception](https://reader036.vdocuments.net/reader036/viewer/2022062511/551d9d84497959293b8bf77b/html5/thumbnails/2.jpg)
Plan• 1 – Les enjeux
• 2 – Identification
• 3 – Navigation
• 4 – Les contenus
![Page 3: La page daccueil Analyse et principes de conception](https://reader036.vdocuments.net/reader036/viewer/2022062511/551d9d84497959293b8bf77b/html5/thumbnails/3.jpg)
1 – Quels enjeux autour d’une page d’accueil ?
![Page 4: La page daccueil Analyse et principes de conception](https://reader036.vdocuments.net/reader036/viewer/2022062511/551d9d84497959293b8bf77b/html5/thumbnails/4.jpg)
Un site web a 3 objectifs :
• 1 Etre trouvé par l’internaute• 2 Convaincre l’internaute de rester et de
surfer sur le site.• 3 Convaincre l’internaute de revenir sur le
site
• Le point d’entrée sur le site doit remplir les deux premiers objectifs.
• Importance de la page d’accueil.
![Page 5: La page daccueil Analyse et principes de conception](https://reader036.vdocuments.net/reader036/viewer/2022062511/551d9d84497959293b8bf77b/html5/thumbnails/5.jpg)
Une page d’accueil …c’est …• La couverture d’un magazine ?
• Image d’entreprise ?
• Œuvre d’art ?
• Le hall d’une université, d’un hôpital ?
• Une table des matières ?
• La une d’un journal ?
• Une plaquette ?
![Page 6: La page daccueil Analyse et principes de conception](https://reader036.vdocuments.net/reader036/viewer/2022062511/551d9d84497959293b8bf77b/html5/thumbnails/6.jpg)
La page d’accueil doit …
• Présenter l’organisation
• Livrer des contenus adaptés au web
• Informer l’internaute sur ce qu’il va trouver dans le site
• Offrir des facilités de navigation
• Être présente dans les moteurs et annuaires.
![Page 7: La page daccueil Analyse et principes de conception](https://reader036.vdocuments.net/reader036/viewer/2022062511/551d9d84497959293b8bf77b/html5/thumbnails/7.jpg)
2 - Identification de l’organisation
Objectifs du site
![Page 8: La page daccueil Analyse et principes de conception](https://reader036.vdocuments.net/reader036/viewer/2022062511/551d9d84497959293b8bf77b/html5/thumbnails/8.jpg)
Logo et nom
![Page 9: La page daccueil Analyse et principes de conception](https://reader036.vdocuments.net/reader036/viewer/2022062511/551d9d84497959293b8bf77b/html5/thumbnails/9.jpg)
Logo et nom
![Page 10: La page daccueil Analyse et principes de conception](https://reader036.vdocuments.net/reader036/viewer/2022062511/551d9d84497959293b8bf77b/html5/thumbnails/10.jpg)
Logo et nom
![Page 11: La page daccueil Analyse et principes de conception](https://reader036.vdocuments.net/reader036/viewer/2022062511/551d9d84497959293b8bf77b/html5/thumbnails/11.jpg)
![Page 12: La page daccueil Analyse et principes de conception](https://reader036.vdocuments.net/reader036/viewer/2022062511/551d9d84497959293b8bf77b/html5/thumbnails/12.jpg)
![Page 13: La page daccueil Analyse et principes de conception](https://reader036.vdocuments.net/reader036/viewer/2022062511/551d9d84497959293b8bf77b/html5/thumbnails/13.jpg)
![Page 14: La page daccueil Analyse et principes de conception](https://reader036.vdocuments.net/reader036/viewer/2022062511/551d9d84497959293b8bf77b/html5/thumbnails/14.jpg)
• Nom et logo bien en vue (en haut à gauche en occident)
• Ajouter une tag line (pour les organisations peu connues ou hors contexte)
Logo et nom
![Page 15: La page daccueil Analyse et principes de conception](https://reader036.vdocuments.net/reader036/viewer/2022062511/551d9d84497959293b8bf77b/html5/thumbnails/15.jpg)
![Page 16: La page daccueil Analyse et principes de conception](https://reader036.vdocuments.net/reader036/viewer/2022062511/551d9d84497959293b8bf77b/html5/thumbnails/16.jpg)
![Page 17: La page daccueil Analyse et principes de conception](https://reader036.vdocuments.net/reader036/viewer/2022062511/551d9d84497959293b8bf77b/html5/thumbnails/17.jpg)
ENSAM ?
![Page 18: La page daccueil Analyse et principes de conception](https://reader036.vdocuments.net/reader036/viewer/2022062511/551d9d84497959293b8bf77b/html5/thumbnails/18.jpg)
![Page 19: La page daccueil Analyse et principes de conception](https://reader036.vdocuments.net/reader036/viewer/2022062511/551d9d84497959293b8bf77b/html5/thumbnails/19.jpg)
Objectifs du site
• Site institutionnel (vitrine) : www.nike.com
• Site catalogue : www.audi.com
• Site marchand : www.amazon.com
• Portail généraliste : www.yahoo.com
• Portail thématique : www.carrefourlocal.org
• Communauté virtuelle : www.ebay.fr
• Portail d’entreprise (intranet, extranet…)
• Journal on line : www.liberation.fr
![Page 20: La page daccueil Analyse et principes de conception](https://reader036.vdocuments.net/reader036/viewer/2022062511/551d9d84497959293b8bf77b/html5/thumbnails/20.jpg)
3 - Navigation dans le site
![Page 21: La page daccueil Analyse et principes de conception](https://reader036.vdocuments.net/reader036/viewer/2022062511/551d9d84497959293b8bf77b/html5/thumbnails/21.jpg)
Retour à l’accueil
• Un lien clair depuis toutes les pages pour revenir à l’accueil (souvent sur le logo).
• Augmente le PageRank• Pas de lien depuis la page d’accueil
elle-même.• Identification claire de la home page
(charte graphique légèrement différente)
![Page 22: La page daccueil Analyse et principes de conception](https://reader036.vdocuments.net/reader036/viewer/2022062511/551d9d84497959293b8bf77b/html5/thumbnails/22.jpg)
Accès au site
• Navigation claire et ordonnée : pas de termes vagues ni de jeu de mot.
![Page 23: La page daccueil Analyse et principes de conception](https://reader036.vdocuments.net/reader036/viewer/2022062511/551d9d84497959293b8bf77b/html5/thumbnails/23.jpg)
![Page 24: La page daccueil Analyse et principes de conception](https://reader036.vdocuments.net/reader036/viewer/2022062511/551d9d84497959293b8bf77b/html5/thumbnails/24.jpg)
![Page 25: La page daccueil Analyse et principes de conception](https://reader036.vdocuments.net/reader036/viewer/2022062511/551d9d84497959293b8bf77b/html5/thumbnails/25.jpg)
Accès au site
• Règle des 7 choix
• Regrouper les fonctions du site (en haut de page) de manière cohérente
![Page 26: La page daccueil Analyse et principes de conception](https://reader036.vdocuments.net/reader036/viewer/2022062511/551d9d84497959293b8bf77b/html5/thumbnails/26.jpg)
Accès au site
• Organiser la navigation en fonction des attentes des internautes
• Règle des 3 clics• Définition correcte des objectifs et des cibles
![Page 27: La page daccueil Analyse et principes de conception](https://reader036.vdocuments.net/reader036/viewer/2022062511/551d9d84497959293b8bf77b/html5/thumbnails/27.jpg)
Eléments de navigation• Présence d’un moteur de recherche.
• Navigation ordonnée (par cible, par type de service, etc…)
• Navigation en bas de page (parfois redondante ?)
• Fonctions habituelles :• Contacts• Aide (plan du site, …)• Login• Mentions légales …
![Page 28: La page daccueil Analyse et principes de conception](https://reader036.vdocuments.net/reader036/viewer/2022062511/551d9d84497959293b8bf77b/html5/thumbnails/28.jpg)
Navigation principale
• Barre à gauche : 30%
• Onglets : 30%
• Liens en haut de page : 30%
• Catégories au centre : 10%
• Autres (à droite, en bas …) : 6%
• Attention à la zone d’ombre
![Page 29: La page daccueil Analyse et principes de conception](https://reader036.vdocuments.net/reader036/viewer/2022062511/551d9d84497959293b8bf77b/html5/thumbnails/29.jpg)
![Page 30: La page daccueil Analyse et principes de conception](https://reader036.vdocuments.net/reader036/viewer/2022062511/551d9d84497959293b8bf77b/html5/thumbnails/30.jpg)
![Page 31: La page daccueil Analyse et principes de conception](https://reader036.vdocuments.net/reader036/viewer/2022062511/551d9d84497959293b8bf77b/html5/thumbnails/31.jpg)
![Page 32: La page daccueil Analyse et principes de conception](https://reader036.vdocuments.net/reader036/viewer/2022062511/551d9d84497959293b8bf77b/html5/thumbnails/32.jpg)
![Page 33: La page daccueil Analyse et principes de conception](https://reader036.vdocuments.net/reader036/viewer/2022062511/551d9d84497959293b8bf77b/html5/thumbnails/33.jpg)
4 - Les contenus
Emplacement, ratios
![Page 34: La page daccueil Analyse et principes de conception](https://reader036.vdocuments.net/reader036/viewer/2022062511/551d9d84497959293b8bf77b/html5/thumbnails/34.jpg)
Images et animations• Pas de décorations : les éléments graphiques
doivent faciliter la navigation, ou apporter de l’information.
• Attention aux animations (zone d’ombre cf TF1)
• Consacrer 5 à 15% si pas de teneur visuelle particulière.
![Page 35: La page daccueil Analyse et principes de conception](https://reader036.vdocuments.net/reader036/viewer/2022062511/551d9d84497959293b8bf77b/html5/thumbnails/35.jpg)
Images
• Utiliser le recadrage et le redimensionnement Sartre : Venise de ma fenêtre.
![Page 36: La page daccueil Analyse et principes de conception](https://reader036.vdocuments.net/reader036/viewer/2022062511/551d9d84497959293b8bf77b/html5/thumbnails/36.jpg)
Animations
• Choix stratégique quant à Flash.
• Analyser l’équipement de la cible en plug-in
• Ne pas oublier la priorité de l’œil humain.
• Gérer la zone d’ombre.
• Eviter les animations si possible.
![Page 37: La page daccueil Analyse et principes de conception](https://reader036.vdocuments.net/reader036/viewer/2022062511/551d9d84497959293b8bf77b/html5/thumbnails/37.jpg)
Publicités
• L’idéal est 0 pub.
• S’il y en a, ne pas dépasser 15% de l’espace.
• Ne pas dépasser 3 annonces.
• Favoriser l’autopromotion.
• Les placer si possible en périphérie
![Page 38: La page daccueil Analyse et principes de conception](https://reader036.vdocuments.net/reader036/viewer/2022062511/551d9d84497959293b8bf77b/html5/thumbnails/38.jpg)
Contenu informatif
• Emplacement idéal : le centre.
• Charte lisible et cohérente (liens bleus, police sans empattements, fond blanc, …)
![Page 39: La page daccueil Analyse et principes de conception](https://reader036.vdocuments.net/reader036/viewer/2022062511/551d9d84497959293b8bf77b/html5/thumbnails/39.jpg)
![Page 40: La page daccueil Analyse et principes de conception](https://reader036.vdocuments.net/reader036/viewer/2022062511/551d9d84497959293b8bf77b/html5/thumbnails/40.jpg)
![Page 41: La page daccueil Analyse et principes de conception](https://reader036.vdocuments.net/reader036/viewer/2022062511/551d9d84497959293b8bf77b/html5/thumbnails/41.jpg)
MétriqueContrôles du système et du navigateur
Identification
Navigation
Publicité
Auto-promotion
Contenu informatif
Habillage
Inutilisé
![Page 42: La page daccueil Analyse et principes de conception](https://reader036.vdocuments.net/reader036/viewer/2022062511/551d9d84497959293b8bf77b/html5/thumbnails/42.jpg)
![Page 43: La page daccueil Analyse et principes de conception](https://reader036.vdocuments.net/reader036/viewer/2022062511/551d9d84497959293b8bf77b/html5/thumbnails/43.jpg)