Docstoc
EXCLUSIVE OFFER FOR DOCSTOC USERS
Try the all-new QuickBooks Online for FREE.  No credit card required.

évaluation des logiciels interactifs

Document Sample
évaluation des logiciels interactifs Powered By Docstoc
					Conception des logiciels interactifs


                           Cours 5

                Conception des sites web



                    M2-EIAH/DU-TICE, Paris 6
                   Elisabeth.Delozanne@upmc.fr
http://www.lutes.upmc.fr/delozanne/2008-2009/M2-P6-EIAH-Accueil.htm


                                                                      1
Utilisabilité des sites web (vous)
 Citer les 5 problèmes d’utilisabilité les plus importants :




                                                                2
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
                                                            3
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   4
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




                                         5
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




                                                     6
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

                                                            7
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

                                                          8
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

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

D’après J-F Nogier
                                                       10
Les compétences (J. Landay)
             User Interface
                Design
                                        Usability
                                       Evaluation
   Information
   Architecture


                    Information             Navigation
                       Design                Design




                                  Graphic
                                  Design




                                                         11
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
                                  12
Cycle de conception (Landay 2004)




                                    13
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




                                                           14
É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 ?
                                                                15
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)


                                                                  16
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




                                                              17
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



                                                      18
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




                                         19
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




                                                           20
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




                                                                 21
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



                                                22
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 Welie
   http://www.welie.com/patterns/
    En Ligne : Twidell
   http://www.time-tripper.com/uipatterns/
   Et http://designinginterfaces.com/
 Conception et développement (en français)
    http://www.alsacreations.com/

                                                          23
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
                                                              24
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ée
   http://www.designofsites.com/pb/index.html
 Formulaires




                                                  25
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


                                                             26
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



                                                              27
Site de la communauté européenne




                                   28
Page interne




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

                                  C
            B                                                        D

                    A                                          C
                                                         B


           E                          D        A




                                                                         31
Un cas d’école…




                  32
Tout ça pour rien !




                      33
Règle d’or




Tout doit être accessible en 3 clics




                                       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


                                                             35
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




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

                                                             38
Exemples (ancien)




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


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




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

                                                               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




                                                             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

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




                                                  47
Free




       48
Free en 2008




               49
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




                                                             50
Pyramide inversée (2)

             Informations importantes
Titre, Courtes annonces, Résumés, Panorama




              Informations moins importantes
              Détails, Citations longues



                                               51
Pyramide inversée (3)




                        52
Les conseilleurs en 2004




                           53
En 2007




          54
En 2008
 Pas la patience d’attendre le chargement…




                                              55
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)
                                                                56
Qui fait ce site ?
 http://www.education.fr




                            57
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


                                                                           58
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
                                                                              59
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
                                                                             60
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)

                                                                     61
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)
                                                                           62
Sncf




       63
Virgin atlantic




                  64
Air France




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




                                                                      67
Référencement
 Très important
 Le principe
 http://www.dailly.info/dossiers/referencement/index.ph
  p




                                                           68
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

                                                                69
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 Welie
http://www.welie.com/patterns/
 En Ligne : Twidell
http://www.time-tripper.com/uipatterns/




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




                                                            72

				
DOCUMENT INFO
Shared By:
Categories:
Tags:
Stats:
views:21
posted:1/9/2012
language:Latin
pages:72