ergonomie

3 746 vues

Publié le

Publié dans : Formation
0 commentaire
1 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
3 746
Sur SlideShare
0
Issues des intégrations
0
Intégrations
4
Actions
Partages
0
Téléchargements
0
Commentaires
0
J’aime
1
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

ergonomie

  1. 1. » Le contenu et le contenant Introduction > Doivent répondre aux attentes utilisateurs > Doivent y répondre facilement et rapidement www.simaway.com 1 LPRO – Lionel DAMM - 2008
  2. 2. » En un coup d’œil, l’internaute doit comprendre le but du site internet >  Site informatif >  Site de vente >  Site communautaire » En un coup d’œil, l’internaute doit comprendre le secteur d’activité >  Le type de produits >  Le positionnement de gamme de l’enseigne www.simaway.com 2 LPRO – Lionel DAMM - 2008
  3. 3. » Déterminer les fonctionnalités principales du e- commerce >  Rappel du panier >  Retour à la HomePage GARDER EN TÊTE L’OBJECTIF >  Ajouter au panier PRINCIPAL : >  Les menus de navigation AMELIORER LE TAUX >  Le moteur de recherche DE TRANSFORMATION >  Mon compte >  SAV www.simaway.com 3 LPRO – Lionel DAMM - 2008
  4. 4. www.simaway.com LPRO– Lionel DAMM - 2008
  5. 5. » Permet d’obtenir une vue globale du site » Permet de segmenter chaque partie Construction du site » Il regroupe l’ensemble des pages du site avec certaines informations clés » C’est un document clé du développement » Elle peut évoluer avec le temps » C’est un des premiers documents créés www.simaway.com »  Voir PDF 5 LPRO – Lionel DAMM - 2008
  6. 6. Construction du site 6 LPRO – Lionel DAMM - 2008 www.simaway.com
  7. 7. » Construire son menu en fonction de l’arborescence Construction du site » Construire une navigation intuitive pour les visiteurs » Respecter au maximum la règle des 3 clics pour accéder à l’information www.simaway.com 7 LPRO – Lionel DAMM - 2008
  8. 8. » Une navigation intuitive ? > Répondre aux attentes des internautes > Faire en fonction du comportement de l’internaute > Prendre en compte l’âge de la cible > Peu importe le niveau de pratique de l’internaute, il doit trouver l’information rapidement ADAPTER LA NAVIGATION OU OFFRIR PLUSIEURS CHOIX www.simaway.com 8 LPRO – Lionel DAMM - 2008
  9. 9. » Le cerveau humain est capable d’intégrer plus ou moins 7 éléments dans la mémoire à court terme » Ne pas exagérer sur vos menus de navigation PRÉFÉREZ FAIRE UN MENU AVEC DES SOUS MENUS PLUTÔT QU’UN MENU UNIQUE TROP CHARGÉ www.simaway.com LPRO – Lionel DAMM - 2008
  10. 10. » Menus par onglets » Menus déroulants » Listes déroulantes » Zone de recherche » FAQ » Chemin de navigation www.simaway.com 10 LPRO – Lionel DAMM - 2008
  11. 11. » Le chemin de navigation (breadcrumbs trail) > Connaître facilement sa position dans le site > Pouvoir facilement revenir à la rubrique supérieure www.simaway.com 11 LPRO – Lionel DAMM - 2008
  12. 12. » Faire un plan du site > Plan par catégorie et index alphabétique » Mettre en avant un bouton « Accueil » > Le standard est de mettre ce lien sur le logo du site » Faire des URLs explicites >  http://www.rueducommerce.fr/Ordinateurs/Ordinateur-Portable/Ordinateur- Portable-Professionnel/APPLE/389584-MacBook-Pro-17-2-33GHz-Intel- Core-2-Duo.htm www.simaway.com » Eviter l’utilisation du Flash 12 LPRO – Lionel DAMM - 2008
  13. 13. » Les liens > Mettre en avant les liens cliquables •  Couleur, épaisseur, soulignement… > Mettre en avant les liens visités » Offre une navigation plus rapide et plus intuitive » Définir la destination du lien (pdf, externe, www.simaway.com image, langue) 13 LPRO – Lionel DAMM - 2008
  14. 14. www.simaway.com LPRO– Lionel DAMM - 2008
  15. 15. » Choisir la bonne taille Construction du site » En fonction des statistiques de son lectorat www.simaway.com 15 LPRO – Lionel DAMM - 2008
  16. 16. » Choisir la bonne présentation > En fonction du nombre d’informations > Du nombre de menus Construction du site > De la publicité éventuelle » Permet de choisir un navigation à droite ou à gauche » Permet de choisir la largeur des colonnes www.simaway.com 16 LPRO – Lionel DAMM - 2008
  17. 17. » Choisir la bonne présentation Construction du site www.simaway.com 17 LPRO – Lionel DAMM - 2008
  18. 18. » Choisir la bonne présentation Construction du site www.simaway.com 18 LPRO – Lionel DAMM - 2008
  19. 19. » Choisir la bonne présentation Construction du site www.simaway.com 19 LPRO – Lionel DAMM - 2008
  20. 20. » Le site doit être accessible pour tous quelque soit : > Le navigateur > L’OS > La taille d’écran / les couleurs > Les plugins installés (flash, quicktime, java…) > La connexion internet www.simaway.com 20 LPRO – Lionel DAMM - 2008
  21. 21. » Développer le site sur des standards web d’accessibilité » Utilisation du XHTML et CSS pour l’optimisation des pages > Poids plus léger > Accessibilité pour les non voyants » Lisibilité accrue pour tous www.simaway.com > Limiter l’accès aux plugins externes 21 LPRO – Lionel DAMM - 2008
  22. 22. » Structurer l’information > Utiliser des typologies identiques pour les items semblables > Utiliser la même mise en forme •  Couleur, espacement, alignement… > Mettre en avant les éléments importants www.simaway.com > Bien nommer les pages 22 LPRO – Lionel DAMM - 2008
  23. 23. » Attention à la compatibilité entre les ordinateurs » Ne pas utiliser de polices « exotiques » » Utiliser uniquement 1 ou 2 polices sur l’ensemble du site » Utiliser des polices standards > Verdana, tahoma, times, lucida, helvetica » Respecter les tailles en fonction : > De l’importance de l’information www.simaway.com > De la hiérarchisation 23 LPRO – Lionel DAMM - 2008
  24. 24. » Images ? Animations ? Vidéos ? » Bien choisir ses images en fonction de ses La mise en forme besoins > JPG > PNG > GIF » Flash www.simaway.com > Présentation de produit 24 LPRO – Lionel DAMM - 2008
  25. 25. » Image ou couleur » Permet de créer une ambiance » Peut faciliter la lecture La mise en forme » Attention à l’intégration et à la lisibilité » Problème de contraste sur une couleur » Problème d’image et de transparence www.simaway.com 25 LPRO – Lionel DAMM - 2008
  26. 26. » Certaines icones ont des significations fortes www.simaway.com 26 LPRO – Lionel DAMM - 2008
  27. 27. www.simaway.com LPRO– Lionel DAMM - 2008
  28. 28. » Le graphisme du site doit être en accord avec la cible client (couleur, forme, technologie) » Le fond est important mais la forme également. > Elle facilite la lecture > Elle facilite l’adhésion > Elle facilite la reconnaissance > Elle développe l’image > Elle fidélise www.simaway.com 28 LPRO – Lionel DAMM - 2008

×