65
1 Conception des logiciels interactifs M2-IFL/DU-TICE, UPMC [email protected] Conception des sites web Cours 4

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

Embed Size (px)

Citation preview

Page 1: 1 Conception des logiciels interactifs M2-IFL/DU-TICE, UPMC Elisabeth.Delozanne@upmc.fr Conception des sites web Cours 4

1

Conception des logiciels interactifs

M2-IFL/DU-TICE, [email protected]

Conception des sites web

Cours 4

Page 2: 1 Conception des logiciels interactifs M2-IFL/DU-TICE, UPMC Elisabeth.Delozanne@upmc.fr Conception des sites web Cours 4

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 l’atelier final) : préparation de la revue de conception (fiche design walkthrough)

2

Page 3: 1 Conception des logiciels interactifs M2-IFL/DU-TICE, UPMC Elisabeth.Delozanne@upmc.fr Conception des sites web Cours 4

3

Utilisabilité des sites web (vous)

Citer les 5 problèmes d’utilisabilité les plus importants :

Page 4: 1 Conception des logiciels interactifs M2-IFL/DU-TICE, UPMC Elisabeth.Delozanne@upmc.fr Conception des sites web Cours 4

4

Utilisabilité des sites web (les experts)

auditweb Rapidité du site, Aisance de la navigation,

Pertinence du design, Respects des standards, Qualité du service

J. Nielsen• Téléchargement rapide, Régularité des mises à

jour, Utilisation facile du site, Contenu de qualité, Simplicité

• http://www.useit.com/

Page 5: 1 Conception des logiciels interactifs M2-IFL/DU-TICE, UPMC Elisabeth.Delozanne@upmc.fr Conception des sites web Cours 4

Règles d’or (A. Boucher)

1. Site bien rangé (architecture)2. Pages bien rangées (organisation visuelle)3. Capitaliser sur l’apprentissage

interne (cohérence) 4. et externe (conventions et standards)5. Informations et feedback (communication)6. Mots et symboles simples et clairs (compréhension)7. Guidage et aide8. Droit à l’erreur9. Gain de temps10.Liberté11.Accessibilité12.Satisfaction (utilité, esthétique, service, fiabilité)

5

Page 6: 1 Conception des logiciels interactifs M2-IFL/DU-TICE, UPMC Elisabeth.Delozanne@upmc.fr Conception des sites web Cours 4

6

Plan

Spécificité des sites webProcessus et techniques de conceptionConception de la structurationConception des pagesConception de la navigationConception des formulaires

Page 7: 1 Conception des logiciels interactifs M2-IFL/DU-TICE, UPMC Elisabeth.Delozanne@upmc.fr Conception des sites web Cours 4

7

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

Page 8: 1 Conception des logiciels interactifs M2-IFL/DU-TICE, UPMC Elisabeth.Delozanne@upmc.fr Conception des sites web Cours 4

8

Diversité des ressources

Interfaces pour handicapés : normes d'accessibilité W3C

Palm, TV, Téléphone, voiture, tablette É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 9: 1 Conception des logiciels interactifs M2-IFL/DU-TICE, UPMC Elisabeth.Delozanne@upmc.fr Conception des sites web Cours 4

9

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

Page 10: 1 Conception des logiciels interactifs M2-IFL/DU-TICE, UPMC Elisabeth.Delozanne@upmc.fr Conception des sites web Cours 4

10

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 Pas de contrôle du concepteur sur

l'environnement client

Page 11: 1 Conception des logiciels interactifs M2-IFL/DU-TICE, UPMC Elisabeth.Delozanne@upmc.fr Conception des sites web Cours 4

11

Différentes tâches

Evaluationergonomique

Ciblage

Processus de mises à jour

Copyright

Stratégiecommerciale Sécurité

Designgraphique

RédactionDu contenu

Développementinformatique

Configurationmatérielle, réseau

D’après J-F Nogier

SiteInternet

Page 12: 1 Conception des logiciels interactifs M2-IFL/DU-TICE, UPMC Elisabeth.Delozanne@upmc.fr Conception des sites web Cours 4

12

Les compétences (J. Landay)

Information Architecture

User InterfaceDesign

Usability Evaluation

Information Design

Navigation Design

Graphic Design

Page 13: 1 Conception des logiciels interactifs M2-IFL/DU-TICE, UPMC Elisabeth.Delozanne@upmc.fr Conception des sites web Cours 4

13

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

Page 14: 1 Conception des logiciels interactifs M2-IFL/DU-TICE, UPMC Elisabeth.Delozanne@upmc.fr Conception des sites web Cours 4

14

Cycle de conception (Landay 2004)

Page 15: 1 Conception des logiciels interactifs M2-IFL/DU-TICE, UPMC Elisabeth.Delozanne@upmc.fr Conception des sites web Cours 4

15

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

Page 16: 1 Conception des logiciels interactifs M2-IFL/DU-TICE, UPMC Elisabeth.Delozanne@upmc.fr Conception des sites web Cours 4

16

Document à la fin de l’étape

Site :

Buts du site :

Contraintes :

Critères de succès :

Catégories d’utilisateurs (personnages) :

10 principales utilisations du site (scénarios d’utilisation)

Page 17: 1 Conception des logiciels interactifs M2-IFL/DU-TICE, UPMC Elisabeth.Delozanne@upmc.fr Conception des sites web Cours 4

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

• É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 18: 1 Conception des logiciels interactifs M2-IFL/DU-TICE, UPMC Elisabeth.Delozanne@upmc.fr Conception des sites web Cours 4

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

•Entrer dans les détails (Cf. Design Patterns)

Préciser le graphisme Évaluer et itérer si besoin

Page 19: 1 Conception des logiciels interactifs M2-IFL/DU-TICE, UPMC Elisabeth.Delozanne@upmc.fr Conception des sites web Cours 4

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

Page 20: 1 Conception des logiciels interactifs M2-IFL/DU-TICE, UPMC Elisabeth.Delozanne@upmc.fr Conception des sites web Cours 4

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

Page 21: 1 Conception des logiciels interactifs M2-IFL/DU-TICE, UPMC Elisabeth.Delozanne@upmc.fr Conception des sites web Cours 4

21

Où trouver le savoir-faire ?(1)

Guides, critères et recommandations de conceptions W3C accessibilité (1/11/10)http://www.w3.org/2003/03/Translations/byLanguage?language=fr Pour les sites de l’administration française

(1/11/10) :http://references.modernisation.gouv.fr/sites/default/files/Charte_ergonomique_v2.0_2.pdf Ergonomie Web, Nicole Lompré (1/11/10)http://web.univ-pau.fr/~lompre/liens/liens.php Ergolab (Amélie Boucher)http://www.ergolab.net

Page 22: 1 Conception des logiciels interactifs M2-IFL/DU-TICE, UPMC Elisabeth.Delozanne@upmc.fr Conception des sites web Cours 4

22

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 Livre Ergonomie Web illustrée (A. Boucher) Adobe (http://www.adobe.com/fr/), Google

Commerce Nike, Coca-cola, Renault Amazon, La redoute …

Voyage Air France, Sncf, Virgin Atlantic

Page 23: 1 Conception des logiciels interactifs M2-IFL/DU-TICE, UPMC Elisabeth.Delozanne@upmc.fr Conception des sites web Cours 4

23

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)

http://www.alsacreations.com/ Conception et développement (en anglais)

http://www.lukew.com/

Page 24: 1 Conception des logiciels interactifs M2-IFL/DU-TICE, UPMC Elisabeth.Delozanne@upmc.fr Conception des sites web Cours 4

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

Page 25: 1 Conception des logiciels interactifs M2-IFL/DU-TICE, UPMC Elisabeth.Delozanne@upmc.fr Conception des sites web Cours 4

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 : http://sticef.univ-lemans.fr/num/vol2007/02-delozanne/sticef_2007_delozanne_02p.pdf

les serious games : http://seriousgames.lip6.fr/DesignPatterns/

25

Page 26: 1 Conception des logiciels interactifs M2-IFL/DU-TICE, UPMC Elisabeth.Delozanne@upmc.fr Conception des sites web Cours 4

26

Exemples de DP

Structure du site Navigation d’ensemble (top-level) http://www.time-tripper.com/uipatterns/

Toplevel_Navigation Conception des pages

La page d'accueil d'un portail Lecture sur écran : pyramide inverséehttp://www.designofsites.com/

Formulaires

Page 27: 1 Conception des logiciels interactifs M2-IFL/DU-TICE, UPMC Elisabeth.Delozanne@upmc.fr Conception des sites web Cours 4

27

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 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 28: 1 Conception des logiciels interactifs M2-IFL/DU-TICE, UPMC Elisabeth.Delozanne@upmc.fr Conception des sites web Cours 4

28

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

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 29: 1 Conception des logiciels interactifs M2-IFL/DU-TICE, UPMC Elisabeth.Delozanne@upmc.fr Conception des sites web Cours 4

29

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) 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 30: 1 Conception des logiciels interactifs M2-IFL/DU-TICE, UPMC Elisabeth.Delozanne@upmc.fr Conception des sites web Cours 4

30

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

B

C

D

A

E

D

CB

A

Page 31: 1 Conception des logiciels interactifs M2-IFL/DU-TICE, UPMC Elisabeth.Delozanne@upmc.fr Conception des sites web Cours 4

31

Un cas d’école…

Page 32: 1 Conception des logiciels interactifs M2-IFL/DU-TICE, UPMC Elisabeth.Delozanne@upmc.fr Conception des sites web Cours 4

32

Tout ça pour rien !

Page 33: 1 Conception des logiciels interactifs M2-IFL/DU-TICE, UPMC Elisabeth.Delozanne@upmc.fr Conception des sites web Cours 4

33

Règle d’or

Tout doit être accessible en 3 clics

Qu’en pensez-vous ?

Pensez aux parcours des utilisateurs

Exemple : je veux visiter les sites patrimoines de l’humanité en Europe

Page 34: 1 Conception des logiciels interactifs M2-IFL/DU-TICE, UPMC Elisabeth.Delozanne@upmc.fr Conception des sites web Cours 4

34

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

Page 35: 1 Conception des logiciels interactifs M2-IFL/DU-TICE, UPMC Elisabeth.Delozanne@upmc.fr Conception des sites web Cours 4

35

DP de navigation

Exemples : the design of siteB1: Multiple Ways to NavigateB2: Browsable ContentB3: Hierarchical OrganizationB4: Task-Based OrganizationB5: Alphabetical OrganizationB6: Chronological OrganizationB7: Popularity-Based OrganizationB8: Category PagesB9: Site Accessibility

Page 36: 1 Conception des logiciels interactifs M2-IFL/DU-TICE, UPMC Elisabeth.Delozanne@upmc.fr Conception des sites web Cours 4

36

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

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 37: 1 Conception des logiciels interactifs M2-IFL/DU-TICE, UPMC Elisabeth.Delozanne@upmc.fr Conception des sites web Cours 4

37

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 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 38: 1 Conception des logiciels interactifs M2-IFL/DU-TICE, UPMC Elisabeth.Delozanne@upmc.fr Conception des sites web Cours 4

38

Exemples (ancien)

Page 39: 1 Conception des logiciels interactifs M2-IFL/DU-TICE, UPMC Elisabeth.Delozanne@upmc.fr Conception des sites web Cours 4

39

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

Page 40: 1 Conception des logiciels interactifs M2-IFL/DU-TICE, UPMC Elisabeth.Delozanne@upmc.fr Conception des sites web Cours 4

40

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 d’utilisation du soulignement autre que pour les liens

Page 41: 1 Conception des logiciels interactifs M2-IFL/DU-TICE, UPMC Elisabeth.Delozanne@upmc.fr Conception des sites web Cours 4

41

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

Page 42: 1 Conception des logiciels interactifs M2-IFL/DU-TICE, UPMC Elisabeth.Delozanne@upmc.fr Conception des sites web Cours 4

42

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)

Page 43: 1 Conception des logiciels interactifs M2-IFL/DU-TICE, UPMC Elisabeth.Delozanne@upmc.fr Conception des sites web Cours 4

43

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

Page 44: 1 Conception des logiciels interactifs M2-IFL/DU-TICE, UPMC Elisabeth.Delozanne@upmc.fr Conception des sites web Cours 4

44

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

Page 45: 1 Conception des logiciels interactifs M2-IFL/DU-TICE, UPMC Elisabeth.Delozanne@upmc.fr Conception des sites web Cours 4

45

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

Page 46: 1 Conception des logiciels interactifs M2-IFL/DU-TICE, UPMC Elisabeth.Delozanne@upmc.fr Conception des sites web Cours 4

46

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 Utiliser des images petites et compressées Utiliser du graphique léger Utiliser un nombre réduit de colonnes

Page 47: 1 Conception des logiciels interactifs M2-IFL/DU-TICE, UPMC Elisabeth.Delozanne@upmc.fr Conception des sites web Cours 4

47

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

Page 48: 1 Conception des logiciels interactifs M2-IFL/DU-TICE, UPMC Elisabeth.Delozanne@upmc.fr Conception des sites web Cours 4

48

Pyramide inversée (2)

Informations importantesTitre, Courtes annonces, Résumés, Panorama

Informations moins importantesDétails, Citations longues

Page 49: 1 Conception des logiciels interactifs M2-IFL/DU-TICE, UPMC Elisabeth.Delozanne@upmc.fr Conception des sites web Cours 4

49

Pyramide inversée (3)

Page 50: 1 Conception des logiciels interactifs M2-IFL/DU-TICE, UPMC Elisabeth.Delozanne@upmc.fr Conception des sites web Cours 4

50

Les conseilleurs en 2004

Page 51: 1 Conception des logiciels interactifs M2-IFL/DU-TICE, UPMC Elisabeth.Delozanne@upmc.fr Conception des sites web Cours 4

En 2009

51

Page 52: 1 Conception des logiciels interactifs M2-IFL/DU-TICE, UPMC Elisabeth.Delozanne@upmc.fr Conception des sites web Cours 4

En 2011

52

Page 53: 1 Conception des logiciels interactifs M2-IFL/DU-TICE, UPMC Elisabeth.Delozanne@upmc.fr Conception des sites web Cours 4

53

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

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 54: 1 Conception des logiciels interactifs M2-IFL/DU-TICE, UPMC Elisabeth.Delozanne@upmc.fr Conception des sites web Cours 4

54

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 construction

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: 1 Conception des logiciels interactifs M2-IFL/DU-TICE, UPMC Elisabeth.Delozanne@upmc.fr Conception des sites web Cours 4

55

Police de caractères (rappel) Lecture à l’écran : police sans empattement

Exemples : Arial, Helvetica, Verdana, Comic, Calibri Contre-exemple : Times, Book Antigua

Plusieurs polices Associer une sémantique bien définie à chaque

couleur chaque police Éviter d’écrire

en italique, en majuscule EXEMPLE EXEMPLE exemple exemple

Jamais de souligné (sauf lien) : exemple exemple Ne pas utiliser de polices trop petites

Taille 12 au minimum pour le texte courant

Page 56: 1 Conception des logiciels interactifs M2-IFL/DU-TICE, UPMC Elisabeth.Delozanne@upmc.fr Conception des sites web Cours 4

Les couleurs

Cf : cours 1 bis Ne pas multiplier le nombre de couleurs sur une même page

Pas d’effet arbre de noël Rester très sobre pour la couleur de fond Cours en ligne sur les couleurs

http://ergonomie-web.studiovitamine.com/couleur-web,362,fr.html

56

Page 57: 1 Conception des logiciels interactifs M2-IFL/DU-TICE, UPMC Elisabeth.Delozanne@upmc.fr Conception des sites web Cours 4

Accessibilité visuelle

Outils en ligne pour tester vos couleurshttp://www.vischeck.com/www.etre.com/tools/colourcheckwww.snook.ca/technical/colour_contrast/colour.html

57

Page 58: 1 Conception des logiciels interactifs M2-IFL/DU-TICE, UPMC Elisabeth.Delozanne@upmc.fr Conception des sites web Cours 4

58

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 d’homogénéité sur tout le site• Mise à jour rapide

De préférence, définir un fichier à part, lié au fichier HTML

Page 59: 1 Conception des logiciels interactifs M2-IFL/DU-TICE, UPMC Elisabeth.Delozanne@upmc.fr Conception des sites web Cours 4

Formulaires

Plusieurs fiches sur les formulaires : Luke Wroblewskihttp://www.lukew.com/ Un document (2004, en français) : Amélie Boucherhttp://www.ergolab.net/articles/ergonomie-

formulaire.php Voir aussi le livre de 2010 exemples de formulaires

analysés Le complément du cours 4 spécial formulaire

59

Page 60: 1 Conception des logiciels interactifs M2-IFL/DU-TICE, UPMC Elisabeth.Delozanne@upmc.fr Conception des sites web Cours 4

60

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 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 61: 1 Conception des logiciels interactifs M2-IFL/DU-TICE, UPMC Elisabeth.Delozanne@upmc.fr Conception des sites web Cours 4

61

Référencement

Très important

Page 62: 1 Conception des logiciels interactifs M2-IFL/DU-TICE, UPMC Elisabeth.Delozanne@upmc.fr Conception des sites web Cours 4

62

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

Page 63: 1 Conception des logiciels interactifs M2-IFL/DU-TICE, UPMC Elisabeth.Delozanne@upmc.fr Conception des sites web Cours 4

63

Les clés du succès

1. Investissez dans le contenu, Renouvelez le contenu 2. Respectez les standards3. Soignez la navigation 4. Évitez les pages trop lourdes, les modes techniques,

les "pages tunnels" 5. Rendez le site disponible6. Répondez aux courriels, fidélisez grâce aux courriels7. 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

Page 64: 1 Conception des logiciels interactifs M2-IFL/DU-TICE, UPMC Elisabeth.Delozanne@upmc.fr Conception des sites web Cours 4

64

Références du cours Amélie Boucher

Ergonomie Web, Eyrolles, 2009 James Landay cours:

http://www.cs.washington.edu/education/courses/cse440/08au/

Van Duyne et al : http://www.designofsites.com/

Page 65: 1 Conception des logiciels interactifs M2-IFL/DU-TICE, UPMC Elisabeth.Delozanne@upmc.fr Conception des sites web Cours 4

65

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 Réserver votre créativité sur des innovations qui

en valent la peine