La présentation est en train de télécharger. S'il vous plaît, attendez

La présentation est en train de télécharger. S'il vous plaît, attendez

1 Conception des logiciels interactifs M2-EIAH/DU-TICE, Paris 6

Présentations similaires


Présentation au sujet: "1 Conception des logiciels interactifs M2-EIAH/DU-TICE, Paris 6"— Transcription de la présentation:

1 1 Conception des logiciels interactifs M2-EIAH/DU-TICE, Paris 6 Conception des sites web Cours 5

2 2 Utilisabilité des sites web (vous) Citer les 5 problèmes dutilisabilité les plus importants :

3 3 Utilisabilité des sites web (les experts) auditweb rapidité du site, aisance de la navigation, pertinence du design, respects des standards, qualité du service internet World temps de chargement, facilité d utilisation, graphisme, facilités commerciales, contenu, commentaires généraux Nielsen téléchargement rapide, régularité et fréquence des mises à jour, utilisation facile du site, contenu de qualité

4 4 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 Accessible le 5/3/07 à

5 5 Plan Spécificité des sites web Processus et techniques de conception Conception de la structuration Conception des pages Conception de la navigation Conception des formulaires

6 6 GUI Design vs Web design (1) Qu'est-ce qui change ? Très grande variabilité des ressources physiques L'usager contrôle la navigation L'usager considère le Web dans son ensemble davantage qu'un site spécifique

7 7 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 Dun ordinateur portable à une station : 1 à 3 Dun palm et une station : 1 à 6 Dun téléphone à une station : ? Donnée incontournable à prendre en compte Utilisation des feuilles de styles + facile pour l'information que pour l'interaction

8 8 GUI Design vs Web design (3) L'usager contrôle la navigation Accès par la page d'accueil mais plus souvent par moteurs de recherche ou marques pages 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

9 9 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 Des interfaces différentes Navigation vs Manipulation directe Très peu d'interactivité Pas de contrôle du concepteur sur l'environnement client

10 10 Différentes tâches Evaluation ergonomique Ciblage Processus de mises à jour Copyright Stratégie commercial e Sécurité Design graphique Rédaction Du contenu Développement informatique Configuration matérielle, réseau Daprès J-F Nogier Site Internet

11 11 Les compétences (J. Landay) Information Architecture User Interface Design Usability Evaluation Information Design Navigation Design Graphic Design

12 12 Une équipe Les partenaires Marketing Communication Ergonome Infographes Rédacteurs Ingénieur IHM Développeurs Ingénieur bases de données Règles d'or Communiquer Former

13 13 Cycle de conception (Landay 2004)

14 14 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 leurs tâches

15 15 État de lart Evaluation rapide (IBM 99) Lobjectif du site est-il clair ? Laudience du site peut-elle être clairement identifiée ? Le site est-il utile, pertinent, intéressant, attirant ? Les visiteurs peuvent-ils accomplir toutes les tâches quils souhaitent ? Facilement ? Le contenu et lorganisation des informations sont-ils cohérents avec lobjectif du site ? Linformation importante est-elle facile à trouver ? Le visiteur sait-il toujours où il est et comment faire pour aller où il veut ? Le graphisme est-il agréable ? Les pages se chargent-elles suffisamment vite ?

16 16 Document à la fin de létape Site : Buts du site : Contraintes : Critères de succès : Catégories dutilisateurs (personnages) : 10 principales utilisations du site (scénarios dutilisation)

17 17 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 Faire plusieurs propositions de charte graphique Sélectionner un/plusieurs choix de conception Techniques Remue-méninges, prototypes légers (plan du site, story boards), cartes à trier, revues de conception

18 18 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 Entrer dans les détails (Cf. Design Patterns) Préciser le graphisme Évaluer et itérer si besoin

19 19 Production Finaliser la conception Livrer la charte graphique Le cahier de spécifications, les recommandations et des prototypes Soigner les détails Être aussi précis que possible

20 20 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 Schémas : structure de page, navigation et information Maquettes : haute-fidélité, représentation très précise

21 21 Où trouver le savoir-faire ?(1) Guides, critères et recommandations de conceptions W3C accessibilité (11/11/08) Pour les sites de ladministration française (11/11/08) : Ergonomie Web, Nicole Lompré (11/11/08)

22 22 Où trouver le savoir-faire ? (2) Regarder les sites (exemples pour ce cours): Sites communautaires Europa Universités UPMC, Sydney, Berkley Les pros Netway : Adobe (http://www.adobe.com/fr/), Google Commerce Nike, Coca-cola Renault Voyage Air France, Sncf, Virgin Atlantic

23 23 Où trouver le savoir-faire ? (3) Design Patterns (liens testés le 11/11/08) Livre : The Design of Sites, Doug Van Duyne, James Landay, Jason Hong En ligne : les Web Design patterns de Welie En Ligne : Twidell Et Conception et développement (en français)

24 24 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é 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

25 25 Exemples de DP Structure du site Navigation densemble (top-level) tripper.com/uipatterns/Toplevel_Navigation Conception des pages La page d'accueil d'un portail Lecture sur écran : pyramide inversée Formulaires

26 26 Structuration Facteur essentiel de lutilisabilité Lorganiser par rapport aux tâches principales des utilisateurs Pas en calquant la structure de lorganisme 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 densemble

27 27 DP : navigation densemble Pb : vous voulez rendre la structure du site visible Solution : vous disposez une barre de navigation en haut de toutes les pages qui permet datteindre toutes les parties importantes du site vous laissez les panneaux gauche et droits disponibles pour dautres styles de navigation Exemple variante : portail de lunion européenne

28 28 Site de la communauté européenne

29 29 Page interne

30 30 Structure Organisation non-linéaire des données défavorise lorientation de lutilisateur Organisation fonctionnelle des contenus défavorise la mémorisation, ni le repérage Organisation hiérarchique 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

31 31 Navigation maximale Pour une compréhension «exhaustive» dun certain contenu : limite de lordre de 4 pour le niveau de largeur pour le niveau de profondeur

32 32 Un cas décole…

33 33 Tout ça pour rien !

34 34 Règle dor Tout doit être accessible en 3 clics

35 35 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 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

36 36 DP de navigation Exemples : the design of site B1: Multiple Ways to Navigate B2: Browsable Content B3: Hierarchical Organization B4: Task-Based Organization B5: Alphabetical Organization B6: Chronological Organization B7: Popularity-Based Organization B8: Category Pages B9: Site Accessibility

37 37 Plan du site La page daccueil (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 représentation simple, de préférence graphique des thèmes du site Pas dascenseur pour cette page Les dimensions du plan doivent sadapter à celles de lécran Les items composant le plan doivent être des liens vers les pages correspondantes

38 38 Niveaux de navigation Le bandeau général du Web Ne pas sappuyer 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 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

39 39 Exemples (ancien)

40 40 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 : pour aider le surfeur à identifier le lien Un titre de page ne peut pas être un lien Placer les liens sur les mots clés Ne pas utiliser une phrase entière comme lien 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

41 41 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 Une page ne doit pas avoir un lien actif qui pointe vers cette même page Sauf navigation à lintérieur de la page Les liens visités doivent changer de couleur Les intitulés de parties non encore accessibles doivent être grisées (clairement inaccessibles) Pas de page et panneaux en construction Ne pas nommer de bouton « page précédente » Les liens doivent être suffisamment grands

42 42 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… 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

43 43 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 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)

44 44 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) Apprenez à connaître vos utilisateurs -Enquêtes, études de terrains -Graphismes et couleurs –Site de skateboards/ site bancaire

45 45 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 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

46 46 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) 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

47 47 6 conseils (fin) Faites qu'il se télécharge rapidement Ex. version flash et sans flash (Nike) Option : Passer lintroduction Stratégies Utiliser du texte Utiliser des images petites et compressées Utiliser du graphique léger Utiliser un nombre réduit de colonnes

48 48 Free

49 49 Free en 2008

50 50 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 Qui se parcourent vite Solution Donner les conclusions en premier Proposer des détails ensuite pour ceux qui en veulent

51 51 Pyramide inversée (2) Informations importantes Titre, Courtes annonces, Résumés, Panorama Informations moins importantes Détails, Citations longues

52 52 Pyramide inversée (3)

53 53 Les conseilleurs en 2004

54 54 En 2007

55 En 2008 Pas la patience dattendre le chargement… 55

56 56 Le contenu Titre de la page daccueil : 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 Responsable éditorial : le document doit être signé Ladresse é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)

57 57 Qui fait ce site ?

58 58 Modèle de page Doit être unique pour l'ensemble du site Chaque page doit tenir dans 3 écrans au maximum Standard obligatoire Seuls les liens sont souligner Les liens sont de couleur différente (généralement bleue). L'important étant la bonne visibilité (en fonction du fond d'écran) Pas de pages vides ou en construction Pas dascenseur en largeur jamais de double ascenseur (horizontal et vertical) Les animations Ne pas abuser des animations Ne pas mettre danimation trop voyante Ne pas mettre danimation à côté dun texte à lire Laisser la possibilité de stopper lanimation

59 59 Les pages web Format des pages largeur (à vérifier) Standard d'affichage : marge de gauche entre 60 et 100 pixels longueur (profondeur) pages d'orientation ou les pages de saisie : éviter les ascenseurs pages de type texte : -peuvent être assez longues -prévoir un bouton imprimer cette page en-tête titre : en haut, à gauche, informatif, court et précis répétition systématique d'un bandeau de navigation invariable pied de page informations utiles : date mise à jour, mél du Webmaster, auteur reprise du bandeau du haut pour les pages très longues

60 60 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 Eviter 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 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 : Se restreindre à ces couleurs Rester très sobre pour la couleur de fond Cours en ligne sur les couleurs

61 61 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 Feuilles de style Possible avec HTML grâce au CSS Objectif : Séparer le fond de la forme Garantie dhomogénéité sur tout le site Mise à jour rapide De préférence, définir un fichier à part, lié au fichier HTML Exemple (suite)

62 62 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 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 dun 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)

63 63 Sncf

64 64 Virgin atlantic

65 65 Air France

66 66 Images Texte alternatif à limage (standard W3C, accessibilité) Images comme liens Possible, l'interface intuitive MAIS, page plus longue à charger Formats à utiliser GIF reconnu par tous les navigateurs adapté pour les schémas, diagrammes restreint à 256 couleurs GIF est devenu payant. Utiliser PNG JPEG Plus adapté pour les photos Occupe moins de place Une certaine perte de qualité par rapport à GIF Pour les grosses images Une image de 36Ko met 10 s (voire beaucoup plus !) avec un modem à bps Utiliser le mode vignette

67 67 Transfert de données Penser au temps de chargement Placer les images en bas de page Indiquer à lécran en bas de page la progression du chargement Les images doivent être associées à du texte Indiquer précisément la fonction du lien Pointer directement sur la page de téléchargement, pas sur une page daccueil Préciser quand il va y avoir le chargement dun document Indiquer le volume du document à télécharger

68 68 Référencement Très important Le principe p p

69 69 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 à 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

70 70 Références du cours James Landay + The Design of sites : Jean-François Nogier De lergonomie du logiciel au design des sites web, Dunod, 2002, 243 p. Joëlle Coutaz : En ligne : les Web Design patterns de Welie En Ligne : Twidell

71 71 Les clés du succès 1.Investissez dans le contenu, Renouvelez le contenu 2.Respectez les standards 3.Soignez la navigation 4.Évitez les pages trop lourdes, les modes techniques, les "pages tunnels" 5.Rendez le site disponible 6.Répondez aux courriels, fidélisez grâce aux courriels 7.N'utilisez pas les frames (ou à bon escient) ! 8.Offrez une carte de votre site 9.Optez pour un design sobre 10.Soignez les détails, la lisibilité 11.Faites-vous connaître grâce au référencement

72 72 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 dautres Réserver votre créativité sur des innovations qui en valent la peine


Télécharger ppt "1 Conception des logiciels interactifs M2-EIAH/DU-TICE, Paris 6"

Présentations similaires


Annonces Google