Embed Size (px)
1
Conception des logiciels interactifs
M2-EIAH/DU-TICE, Paris [email protected]
http://www.lutes.upmc.fr/delozanne/2008-2009/M2-P6-EIAH-Accueil.htm
Conception des sites web
Cours 5
2
Utilisabilité des sites web (vous)
Citer les 5 problèmes d’utilisabilité les plus importants :
3
Utilisabilité des sites web (les experts)
auditweb rapidité du site, aisance de la navigation, pertinence du
design, respects des standards, qualité du service http://www.auditweb.net/conseils/
internet World temps de chargement, facilité d ’utilisation, graphisme,
facilités commerciales, contenu, commentaires généraux
http://www.iw.com Nielsen
• téléchargement rapide, régularité et fréquence des mises à jour, utilisation facile du site, contenu de qualité
• http://www.useit.com/papers/heuristic/heuristic_list.html
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 àhttp://www.keynote.com/docs/datasheets/StopLosingCustomers.pdf
5
Plan
Spécificité des sites webProcessus et techniques de conceptionConception de la structurationConception des pagesConception de la navigationConception des formulaires
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
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 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
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
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
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
11
Les compétences (J. Landay)
Information Architecture
User InterfaceDesign
Usability Evaluation
Information Design
Navigation Design
Graphic Design
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
Cycle de conception (Landay 2004)
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
État de l’art Evaluation rapide (IBM 99)
L’objectif du site est-il clair ? L’audience 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 qu’ils souhaitent ? Facilement ? Le contenu et l’organisation des informations sont-
ils cohérents avec l’objectif du site ? L’information 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
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)
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
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
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
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
Où trouver le savoir-faire ?(1)
Guides, critères et recommandations de conceptions W3C accessibilité (11/11/08)http://www.w3.org/WAI/wai-fr Pour les sites de l’administration française
(11/11/08) :http://www.synergies-publiques.fr/ Ergonomie Web, Nicole Lompré (11/11/08)http://web.univ-pau.fr/~lompre/liens/liens.php
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 : http://www.net-ways.com/ Adobe (http://www.adobe.com/fr/), Google
Commerce Nike, Coca-cola Renault
Voyage Air France, Sncf, Virgin Atlantic
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
http://www.designofsites.com/ En ligne : les Web Design patterns de Weliehttp://www.welie.com/patterns/ En Ligne : Twidellhttp://www.time-tripper.com/uipatterns/Et http://designinginterfaces.com/
Conception et développement (en français) http://www.alsacreations.com/
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
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/pb/index.html
Formulaires
26
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
27
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
28
Site de la communauté européenne
29
Page interne
30
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
31
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
32
Un cas d’école…
33
Tout ça pour rien !
34
Règle d’or
Tout doit être accessible en 3 clics
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
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
37
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
38
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
39
Exemples (ancien)
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 : 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 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
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 à l’inté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
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
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
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
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
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
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
48
Free
49
Free en 2008
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
Pyramide inversée (2)
Informations importantesTitre, Courtes annonces, Résumés, Panorama
Informations moins importantesDétails, Citations longues
52
Pyramide inversée (3)
53
Les conseilleurs en 2004
54
En 2007
En 2008
Pas la patience d’attendre le chargement…
55
56
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)
57
Qui fait ce site ?
http://www.education.fr
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 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
59
Les pages web Format des pages
largeur (à vérifier)• Standard d'affichage : 800-600• 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
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 : http://www.W3C.org• Se restreindre à ces couleurs
Rester très sobre pour la couleur de fond Cours en ligne sur les couleurs
• http://membres.lycos.fr/interaction/• http://www.vrrh.ulaval.ca/sante/couleurs.html• http://interface.free.fr/Interface/Couleur.html
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 d’homogé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
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)
63
Sncf
64
Virgin atlantic
65
Air France
66
Images Texte alternatif à l’image (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 à 28800 bps Utiliser le mode vignette
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 d’accueil
• Préciser quand il va y avoir le chargement d’un document
Indiquer le volume du document à télécharger
68
Référencement
Très important Le principe http://www.dailly.info/dossiers/referencement/
index.php
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
Références du cours James Landay + The Design of sites :
http://guir.berkeley.edu/courses/cs160/2002_spring/lectures.htm
http://www.designofsites.com/ Jean-François Nogier De l’ergonomie du logiciel au design des sites web, Dunod,
2002, 243 p. Joëlle Coutaz :
http://iihm.imag.fr/docs/coutaz.ecole2/ConceptionPagesWeb.html
En ligne : les Web Design patterns de Weliehttp://www.welie.com/patterns/ En Ligne : Twidellhttp://www.time-tripper.com/uipatterns/
71
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. 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
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
