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-IFL/DU-TICE, UPMC Conception des sites web Cours 4.

Présentations similaires


Présentation au sujet: "1 Conception des logiciels interactifs M2-IFL/DU-TICE, UPMC Conception des sites web Cours 4."— Transcription de la présentation:

1 1 Conception des logiciels interactifs M2-IFL/DU-TICE, UPMC Conception des sites web Cours 4

2 Organisation de la séance Cours 4 : Points de repères et documentation sur la conception de sites web 4 bis : Conception des formulaires (projet) TD Présentation des scénarios et des personnages Analyse des tâches Pour la séance 5 (la dernière avant latelier final) : préparation de la revue de conception (fiche design walkthrough) 2

3 Règles dor (A. Boucher) 1.Site bien rangé (architecture) 2.Pages bien rangées (organisation visuelle) 3.Capitaliser sur lapprentissage interne (cohérence) et externe (conventions et standards) 4.Informations et feedback (communication) 5.Mots et symboles simples et clairs (compréhension) 6.Guidage et aide 7.Droit à lerreur 8.Gain de temps 9.Liberté 10.Accessibilité 11.Satisfaction (utilité, esthétique, service, fiabilité) 3

4 4 Plan Processus et techniques de conception Conception de la structuration Conception des pages Conception de la navigation Conception des formulaires

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

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

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

8 8 Cycle de conception (Landay 2004)

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

10 10 Où trouver le savoir-faire ? (1) Regarder les sites Sites communautaires et services publiques Europa, impôts Universités UPMC, Sydney, Berkley Les pros Livre Ergonomie Web illustrée (A. Boucher) Adobe (http://www.adobe.com/fr/), Google Commerce Nike, Coca-cola, Renault Amazon, La redoute … Voyages Air France, Sncf, Virgin Atlantic

11 11 Où trouver le savoir-faire ?(2) Recommandations de conception (pas récents, principes de base) W3C accessibilité ?language=fr Accessiweb (2012) Pour les sites de ladministration française Ergonomie Web, Nicole Lompré Ergolab (Amélie Boucher)

12 12 Où trouver le savoir-faire ? (3) Design Patterns (liens testés le 1/12/2013) Livre : The Design of Sites, Doug Van Duyne, James Landay, Jason Hong Conception et développement (en français) Conception et développement (en anglais) Nouvelles tendances UX et ergonomie de IHM

13 13 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, Jeux Sérieux (équipe Mocah) Génie logiciel, modélisation objet (Gamma et al. 1995, Craig etc.) : standard

14 DP Solution reproductible à des problèmes récurrents Recueil de bonnes pratiques Un vocabulaire pour la conception Si votre but est de… Alors essayer cette solution : … Si vos contraintes sont … Alors essayer cette solution :… en savoir plus sur les DP en EIAH : lemans.fr/num/vol2007/02- delozanne/sticef_2007_delozanne_02p.pdfhttp://sticef.univ- lemans.fr/num/vol2007/02- delozanne/sticef_2007_delozanne_02p.pdf les serious games : 14

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

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

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

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

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

20 20 Navigation élément ESSENTIEL lien clairement identifié simple à comprendre identique sur tout le site les internautes peuvent arriver sur une page autre que votre page d'accueil des options de navigation sur toutes les pages toujours un lien vers la page d'accueil « miettes de pain » moteur de recherche sur le site

21 21 Les liens Un lien doit être clairement identifiable Pour une image : ajouter un texte alternatif 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 (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é) Souligner au survol du lien L'intitulé du lien = titre de la page accédée

22 22 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) Pas de page et panneaux en construction Ne pas nommer de bouton « page précédente » Les liens doivent être suffisamment grands Pas dutilisation du soulignement autre que pour les liens

23 23 Le contenu Titre de la page daccueil représente la totalité du site Titres des pages donnent une idée de leur contenu et fournissent un « favori » explicite Dates de mises à jour Responsable éditorial le document doit être signé Adresse électronique du Web master : obligatoire Chaque page doit établir le contexte du document Miettes de pain (Petit Poucet)

24 24 Modèle de page Unique pour l'ensemble du site Standard obligatoire Seuls les liens sont soulignés Les liens sont de couleur différente L'important : 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 Pas danimation trop voyante Pas danimation à côté dun texte à lire Possibilité de stopper lanimation

25 25 Typographie Lecture à lécran : police sans empattement Exemples : Helvetica, Verdana, Comic, Calibri Contre-exemple : Times, Book Antigua Moins de 3 polices différentes Sémantique bien définie à chaque police/couleur Éviter italique, majuscule EXEMPLE EXEMPLE exemple exemple Jamais de souligné (sauf lien) : exemple exemple Lisibilité Taille 12 au minimum (texte courant) Augmenter linterligne (1.5) Aligner à gauche (jamais justifier)

26 Les couleurs (Cf : cours 1 bis) Cours en ligne sur les couleurs web.studiovitamine.com/couleur-web,362,fr.html web.studiovitamine.com/couleur-web,362,fr.html Minimiser le nombre de couleurs sur une même page Effet arbre de noël Rester très sobre pour la couleur de fond Penser aux déficients visuels Toujours utiliser un double codage : couleur + autre 26

27 Accessibilité visuelle Outils en ligne pour tester vos couleurs 27

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

29 Formulaires Le complément du cours 4 spécial formulaire 29

30 30 Référencement Très important

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

32 32 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.Offrez une carte de votre site 8.Optez pour un design sobre 9.Soignez les détails, la lisibilité 10.Faites-vous connaître grâce au référencement

33 33 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-IFL/DU-TICE, UPMC Conception des sites web Cours 4."

Présentations similaires


Annonces Google