Post on 12-Sep-2018
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
3
Utilisabilité des sites web (vous)
Citer les 5 problèmes d’utilisabilité les plus importants :
4
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/
J. Nielsen • Téléchargement rapide, Régularité des mises à jour,
Utilisation facile du site, Contenu de qualité, Simplicité • http://www.useit.com/
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 aide 8. Droit à l’erreur 9. Gain de temps 10. Liberté 11. Accessibilité 12. Satisfaction (utilité, esthétique, service, fiabilité)
5
6
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
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
8
Diversité des ressources
Interfaces pour handicapés : normes d'accessibilité W3C
Palm, TV, Téléphone, voiture, ipad
É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
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
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
11
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
D’après J-F Nogier
Site
Internet
12
Les compétences (J. Landay)
Information
Architecture
User Interface
Design
Usability
Evaluation
Information
Design
Navigation
Design
Graphic
Design
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
14
Cycle de conception (Landay 2004)
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
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
• É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
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
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é (1/11/10)
http://www.w3.org/WAI/wai-fr
Pour les sites de l’administration française (1/11/10) :
http://www.references.modernisation.gouv.fr/charte-ergonomique
Ergonomie Web, Nicole Lompré (1/11/10)
http://web.univ-pau.fr/~lompre/liens/liens.php
Ergolab (Amélie Boucher)
http://www.ergolab.net
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)
Netway : http://www.net-ways.com/
Adobe (http://www.adobe.com/fr/), Google
Commerce
Nike, Coca-cola, Renault
Amazon, La redoute …
Voyage
Air France, Sncf, Virgin Atlantic
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/
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
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
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ée
http://www.designofsites.com/
Formulaires
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
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
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
B
C
D
A
E
D
CB
A
31
Un cas d’école…
32
Tout ça pour rien !
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 pratimoines de l’humanité en Europe
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 (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
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
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
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
48
Pyramide inversée (2)
Informations importantes
Titre, Courtes annonces, Résumés, Panorama
Informations moins importantes
Détails, Citations longues
49
Pyramide inversée (3)
50
Les conseilleurs en 2004
En 2009
51
En 2011
52
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)
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
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
Les couleurs
Cf : cours 1 bis p 24 à 28 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.w3.org/TR/CSS2/colors.html/ Se restreindre à ces couleurs Pas d’effet arbre de noël
Rester très sobre pour la couleur de fond Cours en ligne sur les couleurs
http://interface.free.fr/Interface/Couleur.html
56
Accessibilité visuelle
Outils en ligne pour tester vos couleurs
http://www.vischeck.com/
www.etre.com/tools/colourcheck
www.snook.ca/technical/colour_contrast/colour.html
57
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
Formulaires
Un bon cours (2008, en anglais) : Luke Wroblewski
http://www.lukew.com/resources/articles/WebForms_LukeW.pdf
Un document (2004, en français) : Amélie Boucher
http://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
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)
61
Référencement
Très important
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
63
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
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/
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/
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